/**
 * La paleta del tema, en la del IEV.
 *
 * Univet declara sus colores como variables CSS en su propia hoja
 * (`themes/univet/assets/css/theme.min.css`), con el azul y el amarillo del
 * demo. De ahí salen componentes que no pasan por Elementor —los botones
 * circulares del directorio de programas, por ejemplo— y que por eso seguían
 * saliendo amarillos por mucho que se repintara el kit.
 *
 * Se sobrescriben aquí y no en el tema para que sobrevivan a una
 * actualización. Esta hoja se encola la última justamente para esto.
 */
:root {
    --primaryColor: #014321;    /* era #003A65, azul del demo */
    --primaryFgColor: #FFFFFF;
    --secondaryColor: #1E7A4C;  /* era #FDC72F, amarillo del demo */
    --secondaryFgColor: #FFFFFF;
    --bodyColor: #5D6A6A;
    --titleColor: #14070E;
    --borderColor: #E4E9E6;
    --shadeColor: #F5F8F6;
}

/**
 * IEV · Estilo de las secciones propias.
 *
 * Paleta y proporciones tomadas del tema del aula (theme/iev), para que la
 * web pública y el Moodle del alumno se lean como una sola institución.
 * Univet aporta la tipografía (Maitree para titulares, Roboto para texto);
 * aquí solo se fijan tamaños, color y ritmo.
 */

.iev-p {
    --verde: #014321;
    --verde-2: #1E7A4C;
    --verde-osc: #0B2A1B;
    --menta: #6ED9A4;
    --tinta: #14070E;
    --texto-2: #5D6A6A;
    --gris: #788585;
    --borde: #E4E9E6;
    --fondo: #F5F8F6;

    --ancho: 76rem;
    --radio: 16px;

    box-sizing: border-box;
    color: var(--tinta);
}

.iev-p *,
.iev-p *::before,
.iev-p *::after {
    box-sizing: inherit;
}

/* Ritmo vertical común a todas las secciones. */
.iev-seccion {
    padding: clamp(3.5rem, 7vw, 6rem) 1.5rem;
}

.iev-cabecera {
    max-width: var(--ancho);
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.iev-cabecera-centrada {
    text-align: center;
}

.iev-cabecera-centrada .iev-sub {
    margin-inline: auto;
}

.iev-eyebrow {
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--verde-2);
}

.iev-p h1,
.iev-p h2 {
    margin: 0 0 0.75rem;
    color: var(--tinta);
    line-height: 1.14;
    text-wrap: balance;
}

.iev-p h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

.iev-sub,
.iev-texto {
    margin: 0;
    max-width: 44rem;
    color: var(--texto-2);
    font-size: 1.02rem;
    line-height: 1.7;
}

.iev-seccion-pie {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

/* --- Botones ---------------------------------------------------------- */

.iev-btn {
    display: inline-block;
    padding: 0.9rem 1.75rem;
    border: 1.5px solid var(--verde);
    border-radius: 999px;
    background: var(--verde);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.iev-btn:hover,
.iev-btn:focus-visible {
    background: var(--verde-2);
    border-color: var(--verde-2);
    color: #fff;
    transform: translateY(-2px);
}

.iev-btn-borde {
    background: transparent;
    color: var(--verde);
}

.iev-btn-borde:hover,
.iev-btn-borde:focus-visible {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}

.iev-p a:focus-visible {
    outline: 2px solid var(--menta);
    outline-offset: 3px;
}

.iev-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* --- Hero ------------------------------------------------------------- */

.iev-hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: clamp(26rem, 58vh, 36rem);
    /* La cabecera de Univet flota sobre el hero: sin este hueco, el titular
       queda debajo del menú. */
    padding: clamp(8.5rem, 11vw, 11rem) 1.5rem clamp(3.5rem, 6vw, 5rem);
    background-color: var(--verde-osc);
    background-image:
        linear-gradient(100deg, rgba(11, 42, 27, 0.95) 0%, rgba(1, 67, 33, 0.86) 48%, rgba(1, 67, 33, 0.48) 100%),
        var(--iev-foto, none);
    background-position: center, center 30%;
    background-size: cover, cover;
    background-repeat: no-repeat;
    color: #fff;
}

.iev-hero-caja {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 4rem);
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
}

.iev-hero-txt {
    max-width: 38rem;
}

.iev-p.iev-hero h1,
.iev-p.iev-hero h2 {
    color: #fff;
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    margin-bottom: 1.1rem;
}

.iev-hero .iev-eyebrow {
    color: var(--menta);
}

.iev-lead {
    margin: 0;
    max-width: 34rem;
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
}

.iev-hero .iev-btn {
    background: #fff;
    border-color: #fff;
    color: var(--verde);
}

.iev-hero .iev-btn:hover,
.iev-hero .iev-btn:focus-visible {
    background: var(--menta);
    border-color: var(--menta);
    color: var(--verde-osc);
}

.iev-hero .iev-btn-borde {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.iev-hero .iev-btn-borde:hover,
.iev-hero .iev-btn-borde:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

/* --- Sello de acreditación -------------------------------------------- */

.iev-sello {
    position: relative;
    flex: 0 0 auto;
    width: clamp(9.5rem, 15vw, 13.5rem);
    aspect-ratio: 1;
    transform: rotate(-7deg);
    color: var(--menta);
}

.iev-sello svg {
    display: block;
    width: 100%;
    height: 100%;
}

.iev-sello-anillo,
.iev-sello-anillo-fino {
    fill: none;
    stroke: currentColor;
}

.iev-sello-anillo {
    stroke-width: 2;
    opacity: 0.55;
}

.iev-sello-anillo-fino {
    stroke-width: 1;
    opacity: 0.3;
}

.iev-sello-orla {
    fill: currentColor;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.15px;
    opacity: 0.9;
}

.iev-sello-centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

.iev-sello-centro strong {
    font-size: clamp(1.7rem, 2.8vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.iev-sello-centro strong span {
    font-size: 0.5em;
    margin-left: 0.1em;
    vertical-align: super;
    color: var(--menta);
}

.iev-sello-centro em {
    margin-top: 0.45rem;
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* En pantallas estrechas el sello estorba al titular. */
@media (max-width: 62rem) {
    .iev-hero-caja {
        flex-direction: column;
        align-items: flex-start;
    }

    .iev-sello {
        align-self: flex-start;
        margin-top: 2.5rem;
    }
}

/* --- Áreas ------------------------------------------------------------ */
/* Las pinta el widget «rs-programs-directory» de Univet, con su propio
   estilo: aquí no hace falta nada. */

/* --- Nosotros --------------------------------------------------------- */

.iev-seccion-nosotros {
    background: var(--fondo);
}

.iev-dos-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    max-width: var(--ancho);
    margin-inline: auto;
}

.iev-razones {
    margin: 2rem 0 0;
    display: grid;
    gap: 1.1rem;
}

.iev-razones > div {
    padding-left: 1rem;
    border-left: 2px solid var(--menta);
}

.iev-razones dt {
    font-weight: 700;
    color: var(--tinta);
    font-size: 0.98rem;
}

.iev-razones dd {
    margin: 0.2rem 0 0;
    color: var(--texto-2);
    font-size: 0.94rem;
    line-height: 1.6;
}

.iev-figura {
    margin: 0;
}

.iev-figura img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 30rem;
    object-fit: cover;
    border-radius: var(--radio);
}

@media (max-width: 58rem) {
    .iev-dos-columnas {
        grid-template-columns: 1fr;
    }

    .iev-figura {
        order: -1;
    }
}

/* --- Metodología ------------------------------------------------------
 *
 * Las cuatro etapas son una secuencia: cada una se apoya en la anterior.
 * Antes salían en cuatro cajas iguales sobre una plancha verde, que no
 * contaba nada y pesaba mucho. Ahora van sobre un recorrido, y el verde
 * pasa de claro a oscuro de izquierda a derecha: el propio color lleva de
 * los fundamentos a la aplicación.
 */

.iev-seccion-metodo {
    position: relative;
    /* Un matiz de menta detrás del recorrido: da color sin volver a la
       plancha verde que había antes. */
    background:
        radial-gradient(60rem 26rem at 50% 62%, rgba(110, 217, 164, 0.16), transparent 70%),
        linear-gradient(180deg, #FFFFFF 0%, var(--fondo) 45%, var(--fondo) 100%);
}

.iev-ruta {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

/* El hilo que une las etapas, por detrás de las marcas. */
.iev-ruta::before {
    content: "";
    position: absolute;
    top: 1.7rem;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(110, 217, 164, 0.55) 0%,
        var(--verde-2) 45%,
        var(--verde) 100%);
    border-radius: 2px;
}

.iev-ruta li {
    position: relative;
    padding-top: 4.8rem;
    text-align: center;
}

.iev-ruta-marca {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    /* El tono avanza con la etapa: 1 clara, 4 el verde de la marca. */
    background: color-mix(in srgb, var(--verde) calc(var(--iev-paso) * 25%), #FFFFFF);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    /* El anillo también progresa: de menta claro a verde de marca. */
    box-shadow:
        0 0 0 6px var(--fondo),
        0 0 0 7px color-mix(in srgb, var(--verde) calc(var(--iev-paso) * 25%), var(--menta));
}

/* Sin color-mix (navegadores antiguos), un verde sólido legible. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .iev-ruta-marca {
        background: var(--verde-2);
    }
}

.iev-ruta li:first-child .iev-ruta-marca {
    color: var(--verde);
}

.iev-ruta strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.22rem;
    line-height: 1.3;
    color: var(--tinta);
}

.iev-ruta em {
    display: block;
    max-width: 17rem;
    margin-inline: auto;
    font-style: normal;
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--texto-2);
}

/* En pantallas estrechas el recorrido se pone de pie. */
@media (max-width: 58rem) {
    .iev-ruta {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 26rem;
    }

    .iev-ruta::before {
        top: 1.7rem;
        bottom: 1.7rem;
        left: 1.7rem;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg,
            rgba(110, 217, 164, 0.55) 0%,
            var(--verde-2) 45%,
            var(--verde) 100%);
    }

    .iev-ruta li {
        padding: 0 0 0 4.8rem;
        text-align: left;
    }

    .iev-ruta-marca {
        top: 0;
        left: 0;
        transform: none;
    }

    .iev-ruta em {
        margin-inline: 0;
    }
}

/* --- Escuela ---------------------------------------------------------- */

.iev-escuela {
    max-width: var(--ancho);
    margin-inline: auto;
    padding: clamp(2rem, 4vw, 3.25rem);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
}

.iev-materias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.iev-materias li {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: #fff;
    color: var(--texto-2);
    font-size: 0.86rem;
}

/* --- Docentes --------------------------------------------------------- */

.iev-docentes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.25rem;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.iev-docentes a {
    display: block;
    height: 100%;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.iev-docentes a:hover,
.iev-docentes a:focus-visible {
    border-color: var(--verde-2);
    box-shadow: 0 10px 28px rgba(1, 67, 33, 0.1);
    transform: translateY(-3px);
}

.iev-docentes img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
    background: var(--fondo);
}

.iev-docentes strong {
    display: block;
    margin: 1rem 1.1rem 0.3rem;
    color: var(--tinta);
    font-size: 0.98rem;
    line-height: 1.3;
}

.iev-docentes span {
    display: block;
    margin: 0 1.1rem 1.2rem;
    color: var(--texto-2);
    font-size: 0.85rem;
    line-height: 1.5;
}

.iev-seccion-docentes .iev-seccion-pie {
    max-width: var(--ancho);
    margin-inline: auto;
}

/* --- Cierre ----------------------------------------------------------- */

.iev-cierre {
    padding: clamp(3rem, 6vw, 4.5rem) 1.5rem;
    background: var(--verde);
    color: #fff;
}

.iev-cierre-caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: var(--ancho);
    margin-inline: auto;
}

.iev-cierre-txt {
    max-width: 38rem;
}

.iev-p.iev-cierre h2 {
    color: #fff;
}

.iev-cierre .iev-eyebrow {
    color: var(--menta);
}

.iev-cierre .iev-acciones {
    margin-top: 0;
}

.iev-cierre .iev-btn {
    background: #fff;
    border-color: #fff;
    color: var(--verde);
}

.iev-cierre .iev-btn:hover,
.iev-cierre .iev-btn:focus-visible {
    background: var(--menta);
    border-color: var(--menta);
    color: var(--verde-osc);
}

.iev-cierre .iev-btn-borde {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.iev-cierre .iev-btn-borde:hover,
.iev-cierre .iev-btn-borde:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

/* --- Ficha del docente en el curso ------------------------------------ */

.iev-docente-ficha {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    border: 1px solid #E4E9E6;
    border-radius: 14px;
    background: #F5F8F6;
}

.iev-docente-ficha img {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

.iev-docente-rotulo {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1E7A4C;
}

.iev-docente-ficha strong {
    display: block;
    margin-top: 0.2rem;
    color: #14070E;
    line-height: 1.35;
}

/* --- Preferencias del visitante --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .iev-p * {
        transition: none !important;
    }
}

/* --- Ficha y brochure en el catálogo y la página del curso ------------- */

.iev-ficha {
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
    line-height: 1.8;
}

.iev-ficha li {
    padding: 0.3rem 0;
    border-bottom: 1px solid #E4E9E6;
}

.iev-brochure {
    margin-top: 1.1rem;
}

.iev-brochure-mini {
    display: inline-block;
    margin-top: 0.45rem;
    font-size: 0.85em;
    text-decoration: underline;
}

/* --- Páginas interiores ----------------------------------------------- */

.iev-prosa {
    max-width: 48rem;
    margin-inline: auto;
}

.iev-prosa p {
    margin: 0 0 1.1rem;
    color: var(--texto-2);
    font-size: 1.02rem;
    line-height: 1.75;
}

.iev-dos-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.25rem;
    max-width: var(--ancho);
    margin-inline: auto;
}

.iev-dos-tarjetas article {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--fondo);
}

/* Vías de contacto */
.iev-vias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.iev-vias a {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    padding: 1.6rem 1.4rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.iev-vias a:hover,
.iev-vias a:focus-visible {
    border-color: var(--verde-2);
    box-shadow: 0 10px 28px rgba(1, 67, 33, 0.1);
    transform: translateY(-3px);
}

.iev-vias strong {
    color: var(--tinta);
    font-size: 1.05rem;
    line-height: 1.35;
}

.iev-vias em {
    margin-top: auto;
    padding-top: 0.5rem;
    font-style: normal;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--verde-2);
}

.iev-redes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.2rem;
    max-width: var(--ancho);
    margin: 2rem auto 0;
    color: var(--texto-2);
    font-size: 0.94rem;
}

.iev-redes span {
    font-weight: 600;
    color: var(--tinta);
}

.iev-redes a {
    color: var(--verde-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.iev-redes a:hover,
.iev-redes a:focus-visible {
    border-bottom-color: currentColor;
}

/* --- Entrada del hero -------------------------------------------------
 *
 * La secuencia cuenta algo: primero el aula (el sitio), luego el sello que
 * acredita al instituto —cae con fuerza, como un sello sobre un documento—
 * y por último el texto, que entra por la izquierda como se lee.
 */

@keyframes iev-hero-aparece {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes iev-sellar {
    0% {
        opacity: 0;
        transform: rotate(-30deg) scale(2.7);
        filter: blur(4px);
    }
    55% {
        opacity: 1;
        transform: rotate(-3deg) scale(0.9);
        filter: blur(0);
    }
    72% { transform: rotate(-10deg) scale(1.05); }
    86% { transform: rotate(-5.5deg) scale(0.985); }
    100% {
        opacity: 1;
        transform: rotate(-7deg) scale(1);
        filter: blur(0);
    }
}

@keyframes iev-entra-izquierda {
    from { opacity: 0; transform: translateX(-2.75rem); }
    to   { opacity: 1; transform: none; }
}

.iev-hero {
    animation: iev-hero-aparece 0.55s ease-out both;
}

.iev-hero .iev-sello {
    /* El rebote final es lo que da la sensación de golpe. */
    animation: iev-sellar 0.85s cubic-bezier(0.22, 1.2, 0.36, 1) 0.4s both;
}

.iev-hero-txt > * {
    animation: iev-entra-izquierda 0.6s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.iev-hero-txt > .iev-eyebrow { animation-delay: 0.95s; }
.iev-hero-txt > h1           { animation-delay: 1.05s; }
.iev-hero-txt > .iev-lead    { animation-delay: 1.18s; }
.iev-hero-txt > .iev-acciones { animation-delay: 1.3s; }

/* Quien pide menos movimiento ve la escena ya montada. */
@media (prefers-reduced-motion: reduce) {
    .iev-hero,
    .iev-hero .iev-sello,
    .iev-hero-txt > * {
        animation: none;
        opacity: 1;
        filter: none;
    }

    .iev-hero .iev-sello {
        transform: rotate(-7deg);
    }

    .iev-hero-txt > * {
        transform: none;
    }
}

/* --- Formulario de contacto -------------------------------------------
 *
 * Univet aplica su estilo de campo a «input.wpcf7-form-control», y eso
 * alcanza también a las casillas: la de aceptar la política salía con 55 px
 * de alto, fondo propio y sangría, como si fuera un campo de texto. Aquí se
 * la devuelve a su tamaño y se ordena la fila.
 *
 * Hace falta !important porque las reglas del widget llevan la
 * especificidad de Elementor (.elementor-NNN .elementor-element-XXX …).
 */

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    width: 1.05rem !important;
    height: 1.05rem !important;
    min-height: 0 !important;
    margin: 0.2rem 0 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    flex: 0 0 auto;
    accent-color: #014321;
    background: none !important;
    border: 1px solid #A9BCB0 !important;
    border-radius: 3px !important;
}

.wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.wpcf7-list-item-label {
    font-size: 0.87rem;
    line-height: 1.5;
    color: #5D6A6A;
}

/* El tema fija «.wpcf7 .wpcf7-acceptance a { color:#fff }», pensado para un
   formulario sobre fondo oscuro. Sobre el panel blanco el enlace a la
   política desaparecía: hay que igualar su especificidad para ganarle. */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label a,
.wpcf7 .wpcf7-acceptance a {
    color: #1E7A4C;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label a:hover,
.wpcf7 .wpcf7-acceptance a:hover,
.wpcf7 .wpcf7-acceptance a:focus-visible {
    color: #014321;
}

/* El botón, con la misma forma que los del resto del sitio. */
.wpcf7 input.wpcf7-submit {
    width: auto !important;
    height: auto !important;
    padding: 0.95rem 2.25rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    text-indent: 0 !important;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.wpcf7 input.wpcf7-submit:hover,
.wpcf7 input.wpcf7-submit:focus-visible {
    transform: translateY(-2px);
}

/* El aviso de resultado, alineado con el resto del formulario. */
.wpcf7 .wpcf7-response-output {
    margin: 1rem 0 0 !important;
    padding: 0.8rem 1rem !important;
    border-radius: 10px !important;
    font-size: 0.9rem;
}

.wpcf7 .wpcf7-not-valid-tip {
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: #B3261E;
}

@media (prefers-reduced-motion: reduce) {
    .wpcf7 input.wpcf7-submit {
        transition: none;
    }
}

/* --- El formulario dentro de la ventana emergente ----------------------
 *
 * Con los campos uno debajo de otro, la ventana salía más alta que la
 * pantalla y había que hacer scroll dentro de ella para llegar al botón.
 * Se reparten en dos columnas y se aprieta el ritmo vertical.
 */

.rstb-template-popup .wpcf7 form > p {
    margin: 0 0 0.7rem;
}

@media (min-width: 34rem) {
    .rstb-template-popup .wpcf7 form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
    }

    /* El mensaje, la aceptación y el botón ocupan la fila entera. */
    .rstb-template-popup .wpcf7 form > p:nth-of-type(n + 5),
    .rstb-template-popup .wpcf7 .wpcf7-response-output {
        grid-column: 1 / -1;
    }
}

.rstb-template-popup .wpcf7 label {
    font-size: 0.86rem;
}

.rstb-template-popup .wpcf7 input.wpcf7-form-control:not(.wpcf7-submit),
.rstb-template-popup .wpcf7 select {
    height: 44px !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
}

.rstb-template-popup .wpcf7 textarea {
    height: 84px !important;
    min-height: 0 !important;
}

.rstb-template-popup .wpcf7 input.wpcf7-submit {
    padding: 0.75rem 1.9rem !important;
}

/* --- Metodología: el recorrido se dibuja ------------------------------
 *
 * Portado del tema del aula (theme/iev/scss/post.scss) para que las dos
 * caras del instituto se muevan igual: la línea avanza de etapa en etapa,
 * el número gira al encenderse con un halo de menta, y el título y el
 * texto entran después, escalonados.
 *
 * El encendido lo marca la clase «is-on», que pone el guion de
 * iev-portada.php cuando la sección entra en pantalla.
 */

@keyframes iev-num-entra {
    0%   { transform: translateX(-50%) rotateY(-90deg) scale(0.7); opacity: 0; }
    60%  { transform: translateX(-50%) rotateY(12deg) scale(1.08); opacity: 1; }
    100% { transform: translateX(-50%) rotateY(0) scale(1); opacity: 1; }
}

@keyframes iev-halo {
    0%   { box-shadow: 0 0 0 6px var(--fondo), 0 0 0 7px var(--borde), 0 0 0 7px rgba(110, 217, 164, 0.55); }
    100% { box-shadow: 0 0 0 6px var(--fondo), 0 0 0 7px var(--borde), 0 0 0 26px rgba(110, 217, 164, 0); }
}

@keyframes iev-texto-entra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    /* La línea se dibuja de izquierda a derecha. */
    .iev-ruta.iev-animar::before {
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 1.5s cubic-bezier(0.22, 0.8, 0.3, 1) 0.1s;
    }

    .iev-ruta.is-on::before {
        transform: scaleX(1);
    }

    /* Se ocultan solo si el guion va a encenderlas. Sin JavaScript no hay
       clase «iev-animar» y todo se ve: la animación es la mejora, no el
       requisito. */
    .iev-ruta.iev-animar li > strong,
    .iev-ruta.iev-animar li > em,
    .iev-ruta.iev-animar .iev-ruta-marca {
        opacity: 0;
    }

    /* Cada etapa se enciende cuando le toca. */
    .iev-ruta li.is-on .iev-ruta-marca {
        animation: iev-num-entra 0.7s cubic-bezier(0.16, 1, 0.3, 1) both,
                   iev-halo 1.7s 0.45s ease-out 1;
    }

    .iev-ruta li.is-on > strong {
        animation: iev-texto-entra 0.6s 0.3s ease both;
    }

    .iev-ruta li.is-on > em {
        animation: iev-texto-entra 0.6s 0.42s ease both;
    }

    @media (max-width: 58rem) {
        /* De pie, la línea se dibuja hacia abajo y la marca no se centra. */
        .iev-ruta.iev-animar::before {
            transform: scaleY(0);
            transform-origin: center top;
            transition: transform 1.5s cubic-bezier(0.22, 0.8, 0.3, 1) 0.1s;
        }

        .iev-ruta.is-on::before {
            transform: scaleY(1);
        }

        @keyframes iev-num-entra {
            0%   { transform: rotateY(-90deg) scale(0.7); opacity: 0; }
            60%  { transform: rotateY(12deg) scale(1.08); opacity: 1; }
            100% { transform: none; opacity: 1; }
        }
    }
}

/* Sin color-mix, un anillo de menta para todas. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .iev-ruta-marca {
        box-shadow: 0 0 0 6px var(--fondo), 0 0 0 7px var(--menta);
    }
}

/* --- La sección donde estás, marcada en el menú ------------------------
 *
 * WordPress pone «current-menu-item» pero el tema no lo distingue de los
 * demás: el visitante no sabe en qué parte del sitio está. Se marca con el
 * verde menta —que es el acento sobre fondo oscuro— y un trazo debajo.
 */

.rstb-header .menu-item > a {
    position: relative;
}

.rstb-header .menu-item.current-menu-item > a,
.rstb-header .menu-item.current-menu-ancestor > a,
.rstb-header .menu-item.current_page_item > a {
    color: #6ED9A4 !important;
}

.rstb-header .menu-item.current-menu-item > a::after,
.rstb-header .menu-item.current-menu-ancestor > a::after,
.rstb-header .menu-item.current_page_item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.45rem;
    height: 2px;
    border-radius: 2px;
    background: #6ED9A4;
}

/* En el menú desplegable el trazo estorba: basta con el color. */
.rstb-header .sub-menu .menu-item.current-menu-item > a::after,
.rstb-header .mobile-panel-wrapper .menu-item.current-menu-item > a::after {
    display: none;
}

/* --- El banner deja sitio a la cabecera --------------------------------
 *
 * La cabecera flota sobre el banner. En la portada el hero le reserva un
 * hueco arriba; el banner de las páginas interiores no, así que el menú y
 * el botón de acceder al aula quedaban pegados al borde y recortados.
 */

.rstb-page-title .elementor-element[data-element_type="container"]:first-child {
    padding-top: clamp(7rem, 9vw, 9.5rem) !important;
    padding-bottom: clamp(3rem, 5vw, 4.5rem) !important;
}

/* =======================================================================
   FICHA DE DOCENTE  (2026-09-24)
   Las tarjetas del claustro ya enlazan aquí, así que la ficha tiene que
   sostenerse sola. Todavía no hay reseña biográfica de nadie —está pedida
   al cliente—, de modo que el peso lo llevan el retrato y sus cursos.
   ===================================================================== */
.iev-docente {
    max-width: var(--ancho, 1200px);
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem) 1.25rem clamp(3rem, 5vw, 4.5rem);
}
.iev-docente-cabeza {
    display: grid;
    grid-template-columns: minmax(0, 18rem) 1fr;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
}
.iev-docente-retrato img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radio, 14px);
    border: 1px solid var(--borde, #E4E9E6);
}
.iev-docente-datos h1 {
    margin: 0 0 .35rem;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.2;
    color: var(--tinta, #14070E);
}
.iev-docente-area {
    margin: 0 0 1rem;
    font-weight: 700;
    color: var(--verde, #014321);
}
.iev-docente-resena { margin: 0; line-height: 1.7; color: #4A554E; }

.iev-docente-titulo {
    margin: clamp(2.25rem, 4vw, 3rem) 0 1rem;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    color: var(--tinta, #14070E);
}
.iev-docente-cursos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
}
.iev-docente-cursos a {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #FFFFFF;
    border: 1px solid var(--borde, #E4E9E6);
    border-radius: var(--radio, 14px);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.iev-docente-cursos a:hover {
    border-color: var(--verde, #014321);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgb(1 67 33 / .1);
}
.iev-docente-cursos img { width: 100%; height: 9.5rem; object-fit: cover; display: block; }
.iev-docente-curso-nombre {
    display: block;
    padding: .9rem 1rem 1.1rem;
    font-weight: 600;
    line-height: 1.35;
}
.iev-docente-volver { margin: clamp(2rem, 4vw, 2.75rem) 0 0; }
.iev-docente-volver a {
    display: inline-block;
    padding: .7rem 1.4rem;
    border: 1px solid var(--verde, #014321);
    border-radius: 999px;
    color: var(--verde, #014321);
    font-weight: 700;
    text-decoration: none;
}
.iev-docente-volver a:hover { background: var(--verde, #014321); color: #FFFFFF; }

@media (max-width: 48rem) {
    .iev-docente-cabeza { grid-template-columns: 1fr; }
    .iev-docente-retrato { max-width: 14rem; }
}