#footer-main h4,
#footer-main .h4 {
    color: #fff !important;
}

#footer-main a {
    color: #fff !important;
}

/* Estilos para contenido dinámico de benefits */
.box-benefits > p:first-of-type {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.box-benefits > h3,
.box-benefits > .h3 {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 40px;
}

.box-benefits > ul {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.box-benefits > ul > li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 24px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}

.box-benefits > ul > li:before {
    content: "\e90e";
    font-family: 'icomoon' !important;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
    color: var(--Secondary);
    font-weight: normal;
}

/* Estilos para contenido dinámico de box-about */
.box-about > p:first-of-type {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.box-about > h3,
.box-about > .h3 {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 40px;
}

.box-about > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.box-about > ul > li {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    gap: 16px;
    margin-bottom: 31px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
}

.box-about > ul > li:last-child {
    margin-bottom: 0;
}

.box-about > ul > li:before {
    content: "\e914";
    font-family: 'icomoon' !important;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    font-size: 36px;
    background-color: var(--Secondary);
    border-radius: 999px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    flex: none;
    position: relative;
    font-weight: normal;
    font-style: normal;
    color: #fff;
}

.box-about > ul > li > * {
    flex: 1;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    margin: 0;
}

/* Estilos para contenido dinámico de misión y visión */
#mision-vision {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px;
    margin-bottom: 70px;
}

#mision-vision > h2:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

#mision-vision > p:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
}

#mision-vision > h2:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

#mision-vision > p:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
}

.grecaptcha-badge {
  visibility: hidden !important;
  display: none !important;
}

/* --- Accesibilidad: enlace de salto al contenido (WCAG 2.1 - 2.4.1) ---
   Fuera de pantalla salvo cuando recibe el foco de teclado, de modo que no
   ocupa espacio en el flujo ni es visible para un usuario de raton. */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    padding: 12px 24px;
    background: var(--Primary, #2d0e3c);
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}

.skip-to-content:focus {
    left: 0;
}

/* El landmark principal recibe el foco al usar el enlace de salto, pero no
   debe mostrar contorno al hacerlo porque no es un control interactivo. */
#contenido:focus {
    outline: none;
}

/* --- Accesibilidad: clases espejo de encabezado (WCAG 2.1 - 1.3.1) ---
   Al corregir la jerarquia de encabezados cambia la etiqueta, no el aspecto:
   el elemento conserva su tamano mediante la clase espejo (.h1 a .h6).
   Esto no se puede dejar en manos de la cascada porque los ajustes responsive
   del tema van por etiqueta y con !important, y ganarian a la clase. Por eso
   cada banda de anchura fija aqui el valor final de forma explicita.
   Los valores son los que el tema produce hoy, medidos sobre el CSS de
   produccion; cambiar el nivel de un encabezado no altera lo que se ve. */



@media (min-width: 992px) {
    .h1 {
        font-size: 80px !important;
        line-height: 88px !important;
    }

    .h2 {
        font-size: 56px !important;
        line-height: 68px !important;
    }

    .h3 {
        font-size: 44px !important;
        line-height: 52px !important;
    }

    .h4 {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .h5 {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    .h6 {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .box-about > .h3,
    .box-benefits > .h3 {
        font-size: 48px !important;
        line-height: 1.2 !important;
    }
}



@media (min-width: 768px) and (max-width: 991px) {
    .h1 {
        font-size: 80px !important;
        line-height: 88px !important;
    }

    .h2 {
        font-size: 45px !important;
        line-height: 53px !important;
    }

    .h3 {
        font-size: 44px !important;
        line-height: 52px !important;
    }

    .h4 {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .h5 {
        font-size: 24px !important;
        line-height: 32px !important;
    }

    .h6 {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .heading-section.text-start .h3 {
        font-size: 30px !important;
        line-height: 33px !important;
    }

    .box-about > .h3,
    .box-benefits > .h3 {
        font-size: 48px !important;
        line-height: 1.2 !important;
    }
}



@media (min-width: 551px) and (max-width: 767px) {
    .h1 {
        font-size: 80px !important;
        line-height: 88px !important;
    }

    .h2 {
        font-size: 35px !important;
        line-height: 43px !important;
    }

    .h3 {
        font-size: 30px !important;
        line-height: 38px !important;
    }

    .h4 {
        font-size: 25px !important;
        line-height: 33px !important;
    }

    .h5 {
        font-size: 19px !important;
        line-height: 25px !important;
    }

    .h6 {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}



@media (max-width: 550px) {
    .h1 {
        font-size: 80px !important;
        line-height: 88px !important;
    }

    .h2 {
        font-size: 35px !important;
        line-height: 43px !important;
    }

    .h3 {
        font-size: 26px !important;
        line-height: 34px !important;
    }

    .h4 {
        font-size: 25px !important;
        line-height: 33px !important;
    }

    .h5 {
        font-size: 19px !important;
        line-height: 25px !important;
    }

    .h6 {
        font-size: 20px !important;
        line-height: 28px !important;
    }
}



/* Propiedades que no son de tamano y que se perderian al cambiar la etiqueta,
   porque el tema las declara sobre el selector de etiqueta. */
.heading-section .h3 {
    text-transform: capitalize;
}

/* Y al reves: un encabezado que pasa a ser H3 dentro de este contenedor no
   debe heredar ese capitalize si su nivel original no lo tenia. */
.heading-section .h1,
.heading-section .h2,
.heading-section .h4,
.heading-section .h5,
.heading-section .h6 {
    text-transform: none;
}



/* Texto disponible para lectores de pantalla pero no en pantalla. Se usa en
   paginas que no muestran titulo visible y aun asi necesitan un H1. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Controles que eran <div> y pasan a ser <button> para poder usarse con el
   teclado. El navegador aplica estilos propios a <button> (fondo gris, relleno,
   tipografia del sistema), asi que se neutralizan para que el aspecto no
   cambie. Lo unico que si cambia, y a proposito, es el cursor: ahora indica
   que el elemento se puede pulsar. */
.btn-unstyled {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
}