/* Landing del Ciclo Semestral · Área A, Ciencias de la Salud — San Marcos.

   TODO cuelga de .lp-salud. El marco del sitio inyecta en ESTE documento Bootstrap,
   akcadmia.css y sitio.css, y lo hace DESPUÉS de esta hoja: sus reglas conviven con
   las de aquí y, a igualdad de especificidad, ganan las suyas. De ahí el prefijo
   lp- en todo, el bloque de neutralización y los !important de la costura.

   DOS IDENTIDADES, Y NO SE MEZCLAN:

     · LA UNIVERSIDAD (--lp-uni-*): granate y dorado, idénticos en todas las
       landings de San Marcos. Ocupan la franja superior y los filetes.
     · LA CAMPAÑA (el resto): petróleo, verde azulado y celeste. Es la paleta
       clínica del área de Salud.

   El movimiento es parte del mensaje en esta landing: trazo de monitor latiendo,
   cifras que suben y secciones que entran. Todo respeta la preferencia de menos
   movimiento del sistema. */
.lp-salud {
    /* ── Identidad de la universidad ───────────────────────────────────── */
    --lp-uni: #7A0C2E;
    --lp-uni-claro: #A31D42;
    --lp-uni-tinta: #FFFFFF;
    --lp-uni-oro: #D3A85B;
    --lp-uni-tipo: Georgia, "Times New Roman", serif;
    /* ── Paleta de la campaña ──────────────────────────────────────────── */
    --lp-acento: #0E7C74;
    --lp-acento-claro: #5FD3C4;
    --lp-acento-tinta: #FFFFFF;
    --lp-celeste: #7DD3F0;
    --lp-celeste-fuerte: #2FA8D8;
    --lp-profundo: #0C3A44;
    --lp-portada-a: rgba(6, 30, 36, .94);
    --lp-portada-b: rgba(8, 52, 55, .7);
    --lp-portada-c: rgba(10, 70, 70, .48);
    --lp-halo: rgba(125, 211, 240, .26);
    --lp-realce: #62D0EC;
    --lp-realce-fuerte: #33B5DC;
    --lp-realce-tinta: #04252E;
    --lp-claro: #DCF3F0;
    /* ── Superficies y texto ───────────────────────────────────────────── */
    --lp-tinta: #12262B;
    --lp-tinta-suave: #4E6A70;
    --lp-fondo: #FFFFFF;
    --lp-fondo-alterno: #F1FAFB;
    --lp-superficie: #FFFFFF;
    --lp-borde: rgba(14, 124, 116, .16);
    --lp-sombra: rgba(12, 58, 68, .08);
    --lp-sombra-fuerte: rgba(12, 58, 68, .18);
    --lp-ancho: 82rem;
    --lp-ancho-texto: 46rem;
    margin: 0;
    background: var(--lp-fondo);
    color: var(--lp-tinta);
    line-height: 1.65;
    scroll-behavior: smooth;
}

/* Tema oscuro del sitio. El atributo lo pone Akcadmia en un ancestro; aquí solo se
   reasignan las variables, nunca las reglas. */
[data-tema="oscuro"] .lp-salud {
    --lp-uni: #8E1637;
    --lp-uni-claro: #B02A4E;
    --lp-uni-oro: #DFC384;
    --lp-acento: #5FD3C4;
    --lp-acento-claro: #93E6DB;
    --lp-acento-tinta: #052623;
    --lp-celeste: #9BDCF3;
    --lp-celeste-fuerte: #62C4EA;
    --lp-profundo: #08222A;
    --lp-portada-a: rgba(3, 16, 20, .96);
    --lp-portada-b: rgba(5, 36, 40, .82);
    --lp-portada-c: rgba(7, 52, 54, .64);
    --lp-halo: rgba(125, 211, 240, .16);
    --lp-realce: #7FDCF2;
    --lp-realce-fuerte: #4FC2E6;
    --lp-realce-tinta: #04252E;
    --lp-claro: #CDE9E6;
    --lp-tinta: #E4F1F0;
    --lp-tinta-suave: #A0BBBE;
    --lp-fondo: #0A1417;
    --lp-fondo-alterno: #0E1E22;
    --lp-superficie: #12252A;
    --lp-borde: rgba(95, 211, 196, .22);
    --lp-sombra: rgba(0, 0, 0, .4);
    --lp-sombra-fuerte: rgba(0, 0, 0, .55);
}

/* ═══ Costura con la cabecera del sitio ════════════════════════════════════
   El marco inserta su cabecera como hermano justo encima de la landing y deja un
   hueco entre las dos. Por ese hueco asomaba el fondo del cuerpo, que en el sitio
   es claro.

   El hueco no se suprime: se PINTA del color de la franja institucional, y así
   deja de distinguirse sea cual sea su origen. Las anulaciones se quedan porque
   recortan su altura cuando sí vienen de la cabecera.

   El granate va escrito y no como variable porque --lp-uni se declara en .lp-salud
   y aquí se pinta su ancestro, que no la ve. */
body:has(> .lp-salud) {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #7A0C2E;
}

[data-tema="oscuro"] body:has(> .lp-salud) {
    background-color: #200811;
}

body > :has(+ .lp-salud) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

    body > :has(+ .lp-salud) > :last-child {
        margin-bottom: 0 !important;
    }

/* ═══ Neutralización de los estilos del sitio ══════════════════════════════
   Una regla de elemento del sitio gana siempre a un color heredado: sin esto, el
   titular de la portada tomaba el color de marca de la plataforma. :where aporta
   cero especificidad, así que este bloque solo derrota a esos selectores y queda
   por debajo de las clases de más abajo. */
.lp-salud :where(h1, h2, h3, h4, p, ul, ol, li, a, span, strong, small, em, label, summary, button, textarea, aside, article) {
    color: inherit;
    font-family: inherit;
}

.lp-salud__ancho {
    width: min(100% - 3rem, var(--lp-ancho));
    margin-inline: auto;
}

/* Los iconos macizos heredan el color del texto que acompañan. Los dibujos de
   trazo —el electrocardiograma— vuelven a poner fill en none en su bloque. */
.lp-salud svg {
    fill: currentColor;
}

.lp-salud__icono {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
}

/* ═══ Aparición al desplazar ═══════════════════════════════════════════════
   El estado inicial solo se aplica cuando el guion ha marcado el documento: sin él
   la clase nunca se añade y todo se ve desde el principio. */
.lp-salud--animada [data-revelar] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .6s ease, transform .6s ease;
}

    .lp-salud--animada [data-revelar].lp-salud--visible {
        opacity: 1;
        transform: none;
    }

/* Quien pidió menos movimiento en su sistema no lo recibe: se apagan el latido, el
   pulso del monitor y las entradas. */
@media (prefers-reduced-motion: reduce) {
    .lp-salud {
        scroll-behavior: auto;
    }

    .lp-salud--animada [data-revelar] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .lp-salud__punto,
    .lp-salud__ecg-pulso,
    .lp-salud__accion--grande {
        animation: none;
    }
}

/* ═══ Franja institucional ═════════════════════════════════════════════════ */
.lp-salud__institucional {
    background: linear-gradient(90deg, var(--lp-uni), var(--lp-uni-claro));
    color: var(--lp-uni-tinta);
    box-shadow: inset 0 -2px 0 var(--lp-uni-oro);
}

.lp-salud__institucional-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .7rem 0;
}

.lp-salud__emblema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid var(--lp-uni-oro);
    color: var(--lp-uni-oro);
}

    .lp-salud__emblema svg {
        width: 1.3rem;
        height: 1.3rem;
    }

.lp-salud__uni {
    margin: 0 auto 0 0;
    line-height: 1.3;
}

.lp-salud__uni-nombre {
    display: block;
    font-family: var(--lp-uni-tipo);
    font-size: 1rem;
    font-weight: 700;
}

.lp-salud__uni-lema {
    display: block;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-uni-oro);
}

.lp-salud__uni-sello {
    padding: .3rem 1rem;
    border: 1px solid var(--lp-uni-oro);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lp-uni-oro);
}

/* ═══ Portada ══════════════════════════════════════════════════════════════
   La fotografía va en su color natural bajo un velo denso a la izquierda —donde
   cae el titular— que se abre hacia la derecha. background-color es la red de
   seguridad: si el archivo faltara, la portada se ve terminada igual. */
.lp-salud__portada {
    position: relative;
    background-color: var(--lp-profundo);
    background-image: linear-gradient(100deg, var(--lp-portada-a) 0%, var(--lp-portada-a) 30%, var(--lp-portada-b) 64%, var(--lp-portada-c) 100%), url("imagenes/portada.jpeg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    color: #fff;
    padding: 4rem 0 5.5rem;
    overflow: hidden;
}

    .lp-salud__portada::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
        background-size: 1.5rem 1.5rem;
        pointer-events: none;
    }

    .lp-salud__portada::before {
        content: "";
        position: absolute;
        top: -30%;
        right: -10%;
        width: 45rem;
        height: 45rem;
        max-width: 90%;
        border-radius: 50%;
        background: radial-gradient(circle, var(--lp-halo), transparent 62%);
        pointer-events: none;
    }

/* ═══ Monitor de signos vitales ════════════════════════════════════════════
   Dos trazos idénticos: uno tenue siempre visible y otro con un tramo corto que lo
   recorre en bucle. Es el elemento que más "hospital en marcha" aporta y no cuesta
   ninguna descarga.

   non-scaling-stroke mantiene el grosor aunque el viewBox se estire a todo el
   ancho, y el dasharray se mide sobre la longitud del trazado, no sobre píxeles. */
.lp-salud__ecg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5rem;
    pointer-events: none;
}

    .lp-salud__ecg path {
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

.lp-salud__ecg-base {
    stroke: rgba(255, 255, 255, .16);
}

.lp-salud__ecg-pulso {
    stroke: var(--lp-realce);
    stroke-width: 3;
    stroke-dasharray: 180 2600;
    filter: drop-shadow(0 0 .4rem var(--lp-realce));
    animation: lp-salud-pulso 5s linear infinite;
}

@keyframes lp-salud-pulso {
    from {
        stroke-dashoffset: 2780;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.lp-salud__portada-rejilla {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 3rem;
    align-items: center;
}

.lp-salud__marca-uni {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: .5rem 1.1rem .5rem .5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid var(--lp-uni-oro);
    text-align: left;
}

    .lp-salud__marca-uni .lp-salud__emblema {
        width: 2.1rem;
        height: 2.1rem;
    }

    .lp-salud__marca-uni strong {
        display: block;
        font-family: var(--lp-uni-tipo);
        font-size: .98rem;
        line-height: 1.25;
    }

    .lp-salud__marca-uni small {
        display: block;
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--lp-uni-oro);
    }

.lp-salud__antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.25rem;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    font-weight: 700;
}

.lp-salud__punto {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--lp-realce);
    animation: lp-salud-latido 1.8s ease-in-out infinite;
}

@keyframes lp-salud-latido {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .45;
        transform: scale(.75);
    }
}

.lp-salud__titulo {
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 5.6vw, 4.6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 .15rem 1.5rem rgba(0, 0, 0, .5);
}

.lp-salud__titulo-destacado {
    display: block;
    color: var(--lp-realce);
}

.lp-salud__bajada {
    margin: 0;
    max-width: 34rem;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, .94);
}

.lp-salud__ventajas {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    font-size: .95rem;
}

    .lp-salud__ventajas li {
        position: relative;
        padding-left: 1.6rem;
    }

        .lp-salud__ventajas li::before {
            content: "✓";
            position: absolute;
            left: 0;
            font-weight: 700;
            color: var(--lp-realce);
        }

/* ═══ Tarjeta de fechas ════════════════════════════════════════════════════
   El desenfoque de fondo la separa de la fotografía: sin él, sobre una zona clara
   de la imagen las cifras se pierden. */
.lp-salud__tarjeta-cuenta {
    position: relative;
    z-index: 1;
    background: rgba(6, 30, 36, .6);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 1.25rem;
    padding: 1.75rem;
    backdrop-filter: blur(8px);
}

.lp-salud__cuenta-sello {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .3rem .95rem;
    border-radius: 999px;
    background: var(--lp-uni);
    border: 1px solid var(--lp-uni-oro);
    color: var(--lp-uni-tinta);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-salud__cuenta-titulo {
    margin: 0 0 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-claro);
}

.lp-salud__cuenta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
}

.lp-salud__cuenta-caja {
    padding: .75rem .35rem;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    text-align: center;
}

.lp-salud__cuenta-cifra {
    display: block;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    /* Cifras de ancho fijo: sin esto el contador da un salto lateral cada vez que
       un número cambia de forma. */
    font-variant-numeric: tabular-nums;
}

.lp-salud__cuenta-rotulo {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .75);
}

.lp-salud__cuenta-pie {
    margin: .75rem 0 0;
    font-size: .85rem;
    color: rgba(255, 255, 255, .8);
    text-align: center;
}

.lp-salud__cuenta-lista {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

    .lp-salud__cuenta-lista li {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: .5rem;
        padding: .45rem 0;
        font-size: .92rem;
    }

    .lp-salud__cuenta-lista span {
        color: rgba(255, 255, 255, .7);
    }

    .lp-salud__cuenta-lista strong {
        text-align: right;
    }

/* ═══ Botones ══════════════════════════════════════════════════════════════
   El principal va en celeste con tinta oscura: es el color más luminoso de la
   paleta y sobre el petróleo destaca más que cualquier otro, que es justo lo que
   se le pide al botón de matrícula. */
.lp-salud__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 2rem;
}

.lp-salud__acciones--centro {
    justify-content: center;
}

.lp-salud__accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .9rem 2.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--lp-realce);
    color: var(--lp-realce-tinta);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .lp-salud__accion:hover {
        color: var(--lp-realce-tinta);
        transform: translateY(-2px);
        box-shadow: 0 .75rem 1.5rem rgba(4, 37, 46, .45);
    }

    .lp-salud__accion:focus-visible {
        outline: 3px solid var(--lp-uni-oro);
        outline-offset: 3px;
    }

/* El botón de registro repartido por la página: late muy despacio para atraer la
   mirada sin llegar a molestar en una lectura larga. */
.lp-salud__accion--grande {
    padding: 1.05rem 2.6rem;
    font-size: 1.05rem;
    background: linear-gradient(120deg, var(--lp-realce), var(--lp-realce-fuerte));
    animation: lp-salud-respira 3.2s ease-in-out infinite;
}

@keyframes lp-salud-respira {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(98, 208, 236, .5);
    }

    60% {
        box-shadow: 0 0 0 .9rem rgba(98, 208, 236, 0);
    }
}

.lp-salud__accion--bloque {
    display: flex;
    width: 100%;
    margin-top: 1.25rem;
}

.lp-salud__accion--compacta {
    padding: .6rem 1.5rem;
    font-size: .92rem;
}

.lp-salud__accion--fantasma {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .6);
    color: #fff;
}

    .lp-salud__accion--fantasma:hover {
        color: #fff;
        background: rgba(255, 255, 255, .14);
        box-shadow: none;
    }

.lp-salud__accion--secundaria {
    background: transparent;
    border: 2px solid var(--lp-acento);
    color: var(--lp-acento);
}

    .lp-salud__accion--secundaria:hover {
        color: var(--lp-acento-tinta);
        background: var(--lp-acento);
        box-shadow: none;
    }

.lp-salud__nota-accion {
    margin: 1rem 0 0;
    font-size: .9rem;
    color: rgba(255, 255, 255, .82);
}

/* ═══ Barra de llamada permanente ══════════════════════════════════════════
   fixed y no sticky: el documento carga las hojas del sitio, que definen su propio
   contenedor de desplazamiento, y con eso sticky no se pega a nada. La landing se
   sirve como documento propio, no dentro de un iframe.

   El guion la retira al llegar al cierre: debajo está el pie del sitio, con el
   libro de reclamaciones, y una barra fija encima lo dejaría inalcanzable.

   La franja ocupa todo el ancho, pero su contenido se detiene antes de la esquina
   inferior derecha, que es la de la mascota del sitio: el relleno derecho es la
   reserva que publica el marco, y la mascota, en su esquina, queda de pie sobre
   ese tramo vacío de la franja sin tapar el botón. Sin mascota la variable no
   existe y el relleno vuelve a cero. */
.lp-salud__barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding-right: var(--edu-landing-reserva-mascota, 0px);
    background: var(--lp-profundo);
    color: #fff;
    box-shadow: 0 -.5rem 1.5rem rgba(0, 0, 0, .35);
    border-top: 2px solid var(--lp-uni-oro);
}

.lp-salud--con-barra .lp-salud__barra {
    transform: translateY(110%);
    opacity: 0;
    /* Sin visibilidad no basta el desplazamiento: la barra seguiría interceptando
       pulsaciones sobre el pie del sitio aunque no se vea. */
    visibility: hidden;
    transition: transform .35s ease, opacity .35s ease, visibility .35s;
}

.lp-salud--con-barra .lp-salud__barra--visible {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.lp-salud__barra-progreso {
    display: block;
    width: 0;
    height: .2rem;
    background: var(--lp-realce);
    transition: width .1s linear;
}

.lp-salud__barra-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: .75rem 0;
}

.lp-salud__barra-texto {
    margin: 0;
    line-height: 1.35;
}

.lp-salud__barra-titulo {
    display: block;
    font-size: .95rem;
}

.lp-salud__barra-dato {
    display: block;
    font-size: .85rem;
    color: var(--lp-claro);
    font-variant-numeric: tabular-nums;
}

/* ═══ Franja de datos ══════════════════════════════════════════════════════ */
.lp-salud__datos {
    background: var(--lp-profundo);
    color: #fff;
    padding: 2.5rem 0;
}

.lp-salud__datos-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.75rem;
    text-align: center;
}

.lp-salud__dato-cifra {
    display: block;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--lp-realce);
    font-variant-numeric: tabular-nums;
}

.lp-salud__dato-texto {
    display: block;
    font-size: .88rem;
    color: rgba(255, 255, 255, .82);
}

/* ═══ Secciones ════════════════════════════════════════════════════════════ */
.lp-salud__seccion {
    padding: 5rem 0;
}

.lp-salud__seccion--alterna {
    background: var(--lp-fondo-alterno);
}

.lp-salud__cabecera {
    max-width: var(--lp-ancho-texto);
    margin: 0 auto 1rem;
    text-align: center;
}

.lp-salud__h2 {
    color: var(--lp-acento);
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 700;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.lp-salud__h2--claro {
    color: #fff;
}

.lp-salud__h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--lp-tinta);
    margin: 0 0 .5rem;
}

.lp-salud__texto {
    margin: 0 0 1rem;
    font-size: 1.02rem;
}

.lp-salud__texto--claro {
    color: var(--lp-claro);
}

.lp-salud__texto--intro {
    font-size: 1.12rem;
    color: var(--lp-tinta-suave);
    margin-bottom: 0;
}

.lp-salud__pie-seccion {
    max-width: var(--lp-ancho-texto);
    margin: 2.5rem auto 0;
    font-size: .93rem;
    color: var(--lp-tinta-suave);
    text-align: center;
}

.lp-salud__etiqueta {
    display: inline-block;
    margin: 0 0 .85rem;
    padding: .32rem 1rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--lp-uni-oro);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-uni-oro);
}

/* La etiqueta sobre fondo claro necesita su propio par de colores: el dorado sobre
   blanco no llega al contraste que sí tiene sobre el petróleo. */
.lp-salud__seccion--alterna .lp-salud__etiqueta,
.lp-salud__seccion:not(.lp-salud__seccion--medicina) .lp-salud__etiqueta {
    background: var(--lp-superficie);
    border-color: var(--lp-borde);
    color: var(--lp-acento);
}

/* ═══ Test vocacional ══════════════════════════════════════════════════════
   Sin el guion, el panel de preguntas no se pinta y quedan las seis fichas a la
   vista: la sección informa igual. */
.lp-salud__test {
    margin-top: 2.5rem;
}

.lp-salud__test-panel {
    display: none;
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.25rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-top: 4px solid var(--lp-acento);
    border-radius: 1.25rem;
    box-shadow: 0 1rem 2.5rem var(--lp-sombra);
}

.lp-salud--con-test .lp-salud__test-panel {
    display: block;
}

.lp-salud--con-test .lp-salud__perfiles {
    display: none;
}

/* Con el test vivo, la ficha ganadora se saca de la rejilla y se muestra sola
   dentro del bloque de resultado. */
.lp-salud--con-test .lp-salud__perfil--ganadora {
    display: block;
}

.lp-salud__test-progreso {
    margin: 0 0 1.25rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-salud__test-preguntas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-salud__test-pregunta {
    display: none;
}

/* La pregunta activa entra desplazándose: da la sensación de avance que un
       cambio seco no transmite. */
.lp-salud__test-pregunta--activa {
    display: block;
    animation: lp-salud-entrada .28s ease;
}

@keyframes lp-salud-entrada {
    from {
        opacity: 0;
        transform: translateY(.7rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lp-salud__test-enunciado {
    margin: 0 0 1.25rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lp-tinta);
}

.lp-salud__test-opciones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

    /* Cada opción es un botón a ancho completo: en móvil el área de toque es la
       fila entera y no solo el texto. */
    .lp-salud__test-opciones button {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .9rem 1.1rem;
        background: var(--lp-fondo-alterno);
        border: 1px solid var(--lp-borde);
        border-radius: .85rem;
        color: var(--lp-tinta);
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
    }

        .lp-salud__test-opciones button:hover {
            border-color: var(--lp-acento);
            transform: translateX(.25rem);
        }

        .lp-salud__test-opciones button:focus-visible {
            outline: 3px solid var(--lp-celeste-fuerte);
            outline-offset: 2px;
        }

/* La letra la pone el CSS con un contador: el guion no escribe ni la A ni
           la B en el marcado. */
.lp-salud__test-opciones {
    counter-reset: opcion;
}

    .lp-salud__test-opciones button::before {
        counter-increment: opcion;
        content: counter(opcion, upper-alpha);
        flex: 0 0 auto;
        width: 1.8rem;
        height: 1.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--lp-acento);
        color: var(--lp-acento-tinta);
        font-size: .8rem;
        font-weight: 700;
    }

.lp-salud__test-resultado {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.25rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-top: 4px solid var(--lp-realce-fuerte);
    border-radius: 1.25rem;
    box-shadow: 0 1rem 2.5rem var(--lp-sombra);
    text-align: center;
    animation: lp-salud-entrada .3s ease;
}

.lp-salud__test-rotulo {
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-tinta-suave);
}

.lp-salud__test-nombre {
    margin: .5rem 0 1rem;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 800;
    color: var(--lp-acento);
}

.lp-salud__test-texto {
    margin: 0;
    font-size: 1.02rem;
    color: var(--lp-tinta-suave);
}

.lp-salud__test-resultado .lp-salud__acciones {
    justify-content: center;
}

.lp-salud__test-aviso {
    margin: 1.5rem 0 0;
    font-size: .84rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Fichas de carrera ════════════════════════════════════════════════════ */
.lp-salud__perfiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
}

.lp-salud__perfil {
    padding: 1.75rem;
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-left: 4px solid var(--lp-acento);
    border-radius: 1rem;
}

.lp-salud__perfil-nombre {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--lp-tinta);
}

.lp-salud__perfil-texto {
    margin: 0;
    font-size: .95rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Bloque de Medicina ═══════════════════════════════════════════════════
   Dos columnas en pantalla ancha y apilado en móvil. El reparto lo hace el
   flex-basis de cada hijo: por debajo de ese ancho mínimo, el wrap los pone uno
   debajo del otro sin consulta de medios. */
.lp-salud__seccion--medicina {
    background: var(--lp-profundo);
    color: #fff;
}

.lp-salud__medicina {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: center;
}

.lp-salud__medicina-texto {
    flex: 1 1 26rem;
}

.lp-salud__lista-marcada {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

    .lp-salud__lista-marcada li {
        position: relative;
        padding: .7rem 0 .7rem 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
        color: var(--lp-claro);
    }

        /* La marca se dibuja con un pseudoelemento y no con un icono: dentro de la
           landing no se puede dar por hecho que una fuente de iconos haya cargado. */
        .lp-salud__lista-marcada li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 1.25rem;
            width: .55rem;
            height: .55rem;
            border-radius: 50%;
            background: var(--lp-realce);
        }

        .lp-salud__lista-marcada li:last-child {
            border-bottom: 0;
        }

/* Ranura de fotografía. El velo es suave a propósito: la foto es lo que humaniza
   la sección y oscurecerla de más la desperdicia. */
.lp-salud__foto {
    position: relative;
    flex: 1 1 24rem;
    min-height: 22rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, .18);
    background-color: var(--lp-profundo);
    background-image: linear-gradient(160deg, rgba(6, 30, 36, .18), rgba(6, 30, 36, .6)), url("imagenes/medicina.jpeg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35);
    overflow: hidden;
}

.lp-salud__foto-trazo {
    position: absolute;
    left: 0;
    bottom: 1.25rem;
    width: 100%;
    height: 3.5rem;
    color: var(--lp-realce);
    opacity: .8;
}

    .lp-salud__foto-trazo path {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

/* ═══ Banda de hospital ════════════════════════════════════════════════════
   Ranura opcional: si hospital.jpeg no existe, queda el degradado sobre el
   petróleo y la banda se ve terminada igual. */
.lp-salud__banda {
    padding: 5rem 0;
    color: #fff;
    background-color: var(--lp-profundo);
    background-image: linear-gradient(90deg, rgba(4, 26, 32, .92) 25%, rgba(4, 26, 32, .5) 100%), url("imagenes/hospital.jpeg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border-block: 2px solid var(--lp-uni-oro);
}

.lp-salud__banda-contenido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.lp-salud__banda-texto {
    max-width: 38rem;
    margin: 0;
    font-size: clamp(1.3rem, 2.8vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
}

.lp-salud__banda .lp-salud__accion {
    flex: 0 0 auto;
}

/* ═══ Ruta hasta la bata blanca ════════════════════════════════════════════
   Cinco hitos numerados con contadores. En pantalla ancha van en fila unidos por
   la línea superior; en móvil se apilan y cada uno conserva su marca. */
.lp-salud__ruta {
    counter-reset: hito;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.5rem;
}

.lp-salud__hito {
    counter-increment: hito;
    position: relative;
    padding-top: 2.75rem;
    border-top: 2px solid var(--lp-borde);
}

    .lp-salud__hito::before {
        content: counter(hito);
        position: absolute;
        top: -1.1rem;
        left: 0;
        width: 2.2rem;
        height: 2.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--lp-acento);
        color: var(--lp-acento-tinta);
        font-weight: 700;
        font-size: .95rem;
    }

.lp-salud__hito-titulo {
    display: block;
    margin-bottom: .35rem;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--lp-tinta);
}

.lp-salud__hito-texto {
    display: block;
    font-size: .93rem;
    color: var(--lp-tinta-suave);
}

/* ═══ Tarjetas de por qué aquí ═════════════════════════════════════════════ */
.lp-salud__tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.lp-salud__tarjeta {
    background: var(--lp-superficie);
    border: 1px solid var(--lp-borde);
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 .5rem 1.5rem var(--lp-sombra);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .lp-salud__tarjeta:hover {
        transform: translateY(-5px);
        box-shadow: 0 1.1rem 2.2rem var(--lp-sombra-fuerte);
    }

    .lp-salud__tarjeta p {
        margin: 0;
        font-size: .96rem;
        color: var(--lp-tinta-suave);
    }

.lp-salud__tarjeta-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    margin-bottom: 1rem;
    border-radius: .85rem;
    background: var(--lp-fondo-alterno);
    color: var(--lp-acento);
}

    .lp-salud__tarjeta-icono svg {
        width: 1.5rem;
        height: 1.5rem;
    }

/* ═══ Tira de evaluaciones ═════════════════════════════════════════════════ */
.lp-salud__evaluaciones {
    margin-top: 2.5rem;
    padding: 1.75rem 2rem;
    background: var(--lp-acento);
    color: var(--lp-acento-tinta);
    border-radius: 1rem;
}

.lp-salud__evaluaciones-rotulo {
    margin: 0 0 1rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lp-claro);
}

.lp-salud__evaluaciones-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
    font-size: .95rem;
}

    .lp-salud__evaluaciones-lista strong {
        display: block;
        margin-bottom: .2rem;
    }

/* ═══ Preguntas frecuentes ═════════════════════════════════════════════════
   details y summary: se despliegan sin JavaScript. El marcador del navegador se
   retira y se dibuja uno que gira al abrir. */
.lp-salud__faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: .85rem;
    align-items: start;
    margin-top: 2rem;
}

.lp-salud__faq-item {
    border: 1px solid var(--lp-borde);
    border-radius: .85rem;
    background: var(--lp-superficie);
    overflow: hidden;
}

    .lp-salud__faq-item summary {
        position: relative;
        padding: 1.1rem 3rem 1.1rem 1.3rem;
        font-weight: 700;
        color: var(--lp-tinta);
        cursor: pointer;
        list-style: none;
    }

        .lp-salud__faq-item summary::-webkit-details-marker {
            display: none;
        }

        .lp-salud__faq-item summary::after {
            content: "";
            position: absolute;
            right: 1.3rem;
            top: 1.45rem;
            width: .6rem;
            height: .6rem;
            border-right: 2px solid var(--lp-acento);
            border-bottom: 2px solid var(--lp-acento);
            transform: rotate(45deg);
            transition: transform .2s ease;
        }

        .lp-salud__faq-item summary:focus-visible {
            outline: 3px solid var(--lp-celeste-fuerte);
            outline-offset: -3px;
        }

    .lp-salud__faq-item[open] summary::after {
        transform: rotate(-135deg);
    }

    .lp-salud__faq-item p {
        margin: 0;
        padding: 0 1.3rem 1.2rem;
        font-size: .96rem;
        color: var(--lp-tinta-suave);
    }

/* ═══ Cierre ═══════════════════════════════════════════════════════════════
   Sobre el petróleo, así engancha con el pie del sitio que el marco añade justo
   debajo. No necesita relleno extra por la barra: al llegar aquí, el guion ya la
   retiró. */
.lp-salud__cierre {
    background: var(--lp-profundo);
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}

    .lp-salud__cierre .lp-salud__texto {
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
    }

.lp-salud__nota-legal {
    max-width: 44rem;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .8rem;
    color: rgba(255, 255, 255, .65);
}

/* ═══ Adaptación a pantallas estrechas ═════════════════════════════════════ */
@media (max-width: 61.99rem) {
    /* Con el texto centrado, el velo en diagonal deja el titular sobre la parte
       clara de la fotografía. Aquí pasa a ser vertical y parejo. */
    .lp-salud__portada {
        background-image: linear-gradient(180deg, var(--lp-portada-a) 0%, rgba(8, 52, 55, .9) 100%), url("imagenes/portada.jpeg");
    }

    .lp-salud__portada-rejilla {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        text-align: center;
    }

    .lp-salud__bajada {
        margin-inline: auto;
    }

    .lp-salud__ventajas,
    .lp-salud__portada .lp-salud__acciones {
        justify-content: center;
    }

    .lp-salud__medicina-texto {
        text-align: center;
    }

        .lp-salud__medicina-texto .lp-salud__acciones {
            justify-content: center;
        }

    .lp-salud__lista-marcada li {
        text-align: left;
    }

    .lp-salud__banda {
        background-image: linear-gradient(180deg, rgba(4, 26, 32, .85), rgba(4, 26, 32, .95)), url("imagenes/hospital.jpeg");
    }

    .lp-salud__banda-contenido {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 35.99rem) {
    .lp-salud__seccion,
    .lp-salud__banda {
        padding: 3.5rem 0;
    }

    .lp-salud__portada {
        padding: 3rem 0 4.5rem;
    }

    .lp-salud__ecg {
        height: 3.5rem;
    }

    .lp-salud__institucional-contenido {
        justify-content: center;
        text-align: center;
    }

    .lp-salud__uni {
        margin: 0;
    }

    .lp-salud__accion {
        width: 100%;
    }

    .lp-salud__accion--compacta {
        width: auto;
    }

    .lp-salud__barra-titulo {
        display: none;
    }

    /* Descontada la esquina de la mascota, a la barra le queda poco más de dos
       tercios del ancho: el texto y el botón se alinean a la izquierda y con menos
       margen a los lados, para que les quede el mayor ancho posible. */
    .lp-salud__barra .lp-salud__ancho {
        width: calc(100% - 2rem);
    }

    .lp-salud__foto {
        min-height: 14rem;
    }

    .lp-salud__tarjeta-cuenta,
    .lp-salud__test-panel,
    .lp-salud__test-resultado,
    .lp-salud__perfil,
    .lp-salud__evaluaciones,
    .lp-salud__tarjeta {
        padding: 1.5rem 1.25rem;
    }
}