/* ==========================================================================
   LaboClid - estilos de las páginas públicas
   (los paneles de alumno/maestro siguen usando style.css)
   ========================================================================== */

:root {
    /* Paleta tomada del logo de LaboClid */
    --azul: #04698E;
    --azul-profundo: #05344A;
    --acento: #047BA6;
    --acento-oscuro: #03617F;
    --verde: #A8CE43;
    --verde-oscuro: #93B936;
    --verde-claro: #EEF6DA;
    --fondo: #F5F8F9;
    --tinte: #EAF2F5;
    --texto: #16293A;
    --texto-suave: #4B6070;
    --borde: #D3E0E6;
    --blanco: #FFFFFF;

    --fuente-titulos: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --fuente-texto: 'Figtree', 'Segoe UI', sans-serif;

    --radio: 14px;
    --radio-chico: 8px;
    --ancho: 1160px;
    --nav-alto: 72px;
    --curva: cubic-bezier(0.22, 1, 0.36, 1);
    --curva-salida: cubic-bezier(0.23, 1, 0.32, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-alto);
}

body {
    margin: 0;
    font-family: var(--fuente-texto);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    /* La pestaña de WhatsApp sobresale del borde: que no genere scroll lateral */
    overflow-x: clip;
}

img {
    display: block;
    max-width: 100%;
}

h1, h2, h3 {
    font-family: var(--fuente-titulos);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 0.6em;
    color: var(--azul-profundo);
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--acento);
}

:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 3px;
    border-radius: 4px;
}

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 640px) {
    .contenedor { padding: 0 32px; }
}

.saltar {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    background: var(--blanco);
    color: var(--azul);
    padding: 0.6rem 1rem;
    border-radius: var(--radio-chico);
    transition: transform 0.2s var(--curva-salida);
}

.saltar:focus {
    transform: translateY(72px);
}

/* ---------- Botones y enlaces ---------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.7rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font: 600 1rem/1.2 var(--fuente-texto);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.16s var(--curva-salida);
}

/* Al presionar, respuesta inmediata (sin esperar la transición) */
.boton:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
}

.boton--acento {
    background: var(--acento);
    color: var(--blanco);
}

.boton--verde {
    background: var(--verde);
    color: var(--azul-profundo);
}

.boton--contorno {
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--blanco);
}

.boton--claro {
    background: var(--blanco);
    color: var(--azul);
}

/* Hover solo con ratón: en táctil el hover queda "pegado" tras tocar */
@media (hover: hover) and (pointer: fine) {
    .boton--acento:hover { background: var(--acento-oscuro); }
    .boton--verde:hover { background: var(--verde-oscuro); }
    .boton--contorno:hover { background: var(--blanco); color: var(--azul); }
    .boton--claro:hover { background: var(--verde-claro); }
}

.enlace {
    display: inline-block;
    font-weight: 600;
    color: var(--acento);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-underline-offset 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .enlace:hover {
        text-underline-offset: 8px;
    }
}

/* ---------- Navegación ---------- */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--azul);
    color: var(--blanco);
    /* blur(0) explícito para que el desenfoque se funda junto con el color
       en vez de aparecer de golpe */
    backdrop-filter: blur(0);
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        backdrop-filter 0.25s ease;
}

/* En inicio la barra flota sobre el hero hasta que se hace scroll */
.pagina-inicio .nav {
    position: fixed;
    left: 0;
    right: 0;
    background: transparent;
}

.pagina-inicio .nav.nav--solida,
.nav.nav--solida {
    background: rgba(5, 52, 74, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.5);
}

.nav__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-alto);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--blanco);
    text-decoration: none;
    font: 800 1.35rem/1 var(--fuente-titulos);
    letter-spacing: -0.02em;
}

.marca__logo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav__menu ul {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__menu ul a {
    position: relative;
    display: block;
    padding: 0.5rem 0.85rem;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}

.nav__menu ul a::after {
    content: '';
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.2rem;
    height: 2px;
    background: var(--verde);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s var(--curva-salida);
}

.nav__menu ul a[aria-current="page"] {
    color: var(--blanco);
}

.nav__menu ul a[aria-current="page"]::after {
    transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
    .nav__menu ul a:hover {
        color: var(--blanco);
    }

    .nav__menu ul a:hover::after {
        transform: scaleX(1);
    }
}

.nav__login {
    min-height: 42px;
    padding: 0.5rem 1.2rem;
}

.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s var(--curva-salida);
}

.nav__toggle:active {
    transform: scale(0.92);
    transition-duration: 0.08s;
}

.nav__toggle span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: var(--blanco);
    border-radius: 2px;
    transition: transform 0.25s var(--curva-salida), opacity 0.15s ease;
}

@media (max-width: 860px) {
    .nav__toggle {
        display: block;
    }

    .nav__menu {
        position: fixed;
        top: var(--nav-alto);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem 16px 1.5rem;
        background: var(--azul-profundo);
        box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.5);
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        /* Cierre: rápido, el sistema responde */
        transition: clip-path 0.18s var(--curva-salida), visibility 0s 0.18s;
    }

    .nav--abierta .nav__menu {
        clip-path: inset(0 0 -40px 0); /* deja ver la sombra inferior */
        visibility: visible;
        transition: clip-path 0.26s var(--curva-salida), visibility 0s;
    }

    .nav__menu ul {
        flex-direction: column;
    }

    .nav__menu ul a {
        padding: 0.75rem 0;
        font-size: 1.15rem;
    }

    /* Los enlaces entran escalonados; al cerrar desaparecen sin esperar */
    .nav__menu li,
    .nav__login {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.12s ease, transform 0.12s ease;
    }

    .nav--abierta .nav__menu li,
    .nav--abierta .nav__login {
        opacity: 1;
        transform: none;
        transition: opacity 0.25s ease, transform 0.25s var(--curva-salida);
    }

    .nav--abierta .nav__menu li:nth-child(2) { transition-delay: 0.03s; }
    .nav--abierta .nav__menu li:nth-child(3) { transition-delay: 0.06s; }
    .nav--abierta .nav__login { transition-delay: 0.09s; }

    .nav--abierta .nav__login:active {
        transform: scale(0.97);
        transition-delay: 0s;
        transition-duration: 0.08s;
    }

    .nav__menu ul a::after {
        left: 0;
        right: auto;
        width: 2rem;
    }

    .nav--abierta {
        background: var(--azul-profundo) !important;
    }

    .nav--abierta .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav--abierta .nav__toggle span:nth-child(2) { opacity: 0; }
    .nav--abierta .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero (solo inicio) ---------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(100svh, 900px);
    padding: calc(var(--nav-alto) + 3rem) 0 4rem;
    overflow: hidden;
    color: var(--blanco);
    background:
        radial-gradient(circle at 78% 45%, rgba(4, 123, 166, 0.45), transparent 55%),
        radial-gradient(circle at 20% 110%, rgba(4, 105, 142, 0.9), transparent 60%),
        var(--azul-profundo);
}

/* Borde del campo del microscopio */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 52, 74, 0.7) 0%, rgba(5, 52, 74, 0.35) 40%, transparent 65%),
        radial-gradient(circle at 72% 50%, transparent 38%, rgba(3, 30, 43, 0.75) 72%);
}

.hero__campo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__contenido {
    position: relative;
    z-index: 1;
}

.hero__lugar {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero__titulo {
    max-width: 14ch;
    font-size: clamp(2.6rem, 7vw, 5.25rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.022em;
    color: var(--blanco);
}

.hero__texto {
    max-width: 44ch;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2.25rem;
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

/* Secuencia de entrada al cargar la página */
.hero__contenido > * {
    animation: entrar 0.5s var(--curva) both;
}

.hero__contenido > :nth-child(2) { animation-delay: 0.06s; }
.hero__contenido > :nth-child(3) { animation-delay: 0.12s; }
.hero__contenido > :nth-child(4) { animation-delay: 0.18s; }

@keyframes entrar {
    from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(4px);
    }
}

@keyframes entrar-suave {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(2px);
    }
}

/* ---------- Cabecera de páginas internas ---------- */

.cabecera {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 4rem;
    color: var(--blanco);
    background: var(--azul);
    border-bottom: 6px solid var(--verde);
}

.cabecera h1 {
    position: relative;
    max-width: 18ch;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    color: var(--blanco);
    /* Se ve en cada cambio de página: entrada corta y con poco recorrido */
    animation: entrar-suave 0.45s var(--curva) both;
}

.cabecera p {
    position: relative;
    max-width: 55ch;
    margin: 0;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.82);
    animation: entrar-suave 0.45s 0.06s var(--curva) both;
}

/* ---------- Secciones ---------- */

.seccion {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.seccion--tinte {
    background: var(--tinte);
}

.titulo-seccion {
    max-width: 22ch;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    font-weight: 700;
}

.entradilla {
    max-width: 55ch;
    font-size: 1.15rem;
    color: var(--texto-suave);
    margin-bottom: 1.75rem;
}

.dividido {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

.dividido--invertido {
    grid-template-columns: 1fr 1.1fr;
}

@media (max-width: 860px) {
    .dividido,
    .dividido--invertido {
        grid-template-columns: 1fr;
    }

    .dividido--invertido .foto {
        order: -1;
    }
}

.foto {
    position: relative;
    margin: 0;
    border-radius: var(--radio-chico);
    overflow: hidden;
    /* Safari pierde el redondeo mientras la imagen hija se transforma */
    isolation: isolate;
}

.foto figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.35rem 0.7rem;
    background: rgba(5, 52, 74, 0.82);
    border-top-right-radius: var(--radio-chico);
    color: var(--blanco);
    font-size: 0.85rem;
}

.foto.foto--retrato img {
    aspect-ratio: 4 / 5;
    object-position: 50% 20%;
}

.dividido--arriba {
    align-items: start;
}

.foto img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s var(--curva-salida);
}

/* En el collage solo la foto de arriba: la de abajo queda tapada en parte
   y su zoom se vería como un movimiento accidental */
@media (hover: hover) and (pointer: fine) {
    .foto:not(.collage .foto):hover img,
    .collage__secundaria:hover img {
        transform: scale(1.03);
    }
}

/* Dos fotos superpuestas: aula y laboratorio */
.collage {
    position: relative;
    padding: 0 12% 18% 0;
}

.collage__secundaria {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58%;
    border: 6px solid var(--blanco);
    border-radius: var(--radio-chico);
}

.collage__secundaria img {
    aspect-ratio: 16 / 10;
}

/* Las fotos se descubren de arriba abajo al entrar en pantalla, una sola vez.
   Solo con JS (clase .js en <html>): sin él se ven desde el principio. */
.js .collage .foto {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.5s var(--curva);
}

.js .collage .collage__secundaria {
    transition-delay: 0.12s;
}

.js .collage.collage--visto .foto {
    clip-path: inset(0);
}

/* ---------- Llamado a la acción ---------- */

.llamado {
    padding: 0 0 clamp(3.5rem, 8vw, 6rem);
    background: var(--tinte);
}

.llamado__caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    padding: clamp(2rem, 5vw, 3.25rem);
    border-radius: var(--radio);
    background: var(--azul);
    color: var(--blanco);
}

.llamado__caja h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: var(--blanco);
    margin-bottom: 0.4rem;
}

.llamado__caja p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

/* Materias como etiquetas */
.materias {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.materias li {
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    font-weight: 500;
    color: var(--azul-profundo);
}

/* Etapas de la carrera: es una secuencia real, por eso va numerada */
.etapas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    counter-reset: etapa;
}

.etapas li {
    position: relative;
    padding: 2rem 2rem 0 0;
    border-top: 3px solid var(--borde);
}

.etapas li:first-child {
    border-top-color: var(--azul);
}

.etapas li:last-child {
    border-top-color: var(--acento);
}

.etapas li::before {
    counter-increment: etapa;
    content: counter(etapa);
    position: absolute;
    top: -1.1rem;
    left: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--fondo);
    border: 3px solid currentColor;
    font: 700 0.95rem/1 var(--fuente-titulos);
}

.etapas li:first-child::before { color: var(--azul); }
.etapas li:last-child::before { color: var(--acento); }

.etapas__meses {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    color: var(--texto-suave);
}

.etapas h3 {
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}

.etapas p {
    color: var(--texto-suave);
}

@media (max-width: 640px) {
    .etapas { grid-template-columns: 1fr; gap: 2rem; }
}

/* Lista con marcas de verificación */
.lista-check {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
}

.lista-check li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.9rem;
}

.lista-check li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--verde-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E8F1F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ---------- Contacto ---------- */

.contacto {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
}

.contacto h2 {
    font-size: 1.7rem;
}

.contacto__datos dl {
    margin: 0 0 2rem;
}

.contacto__datos dl > div {
    padding: 1rem 0;
    border-bottom: 1px solid var(--borde);
}

.contacto__datos dt {
    font-weight: 600;
    color: var(--texto-suave);
    font-size: 0.95rem;
}

.contacto__datos dd {
    margin: 0.2rem 0 0;
    font-size: 1.1rem;
}

.contacto__datos dd a {
    color: var(--texto);
}

.escribenos {
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: var(--azul);
    border-radius: var(--radio);
    color: var(--blanco);
}

.escribenos h2 {
    color: var(--blanco);
}

.escribenos p {
    max-width: 44ch;
    margin-bottom: 1.75rem;
    color: rgba(255, 255, 255, 0.85);
}

.escribenos__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.mapa {
    margin: 1.5rem 0 1.25rem;
    border-radius: var(--radio-chico);
    overflow: hidden;
    border: 1px solid var(--borde);
}

.mapa iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

@media (max-width: 860px) {
    .contacto { grid-template-columns: 1fr; }
    .mapa iframe { height: 320px; }
}

/* ---------- Hoja de resultados (inicio) ---------- */
/* Resumen de la carrera con el formato de un informe de laboratorio */

.hoja {
    max-width: 860px;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-top: 6px solid var(--azul);
    border-radius: 4px;
}

.hoja__cabecera {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
    border-bottom: 2px solid var(--azul-profundo);
}

.hoja__cabecera img {
    border-radius: 50%;
}

.hoja__cabecera p {
    margin: 0;
    line-height: 1.25;
}

.hoja__lab {
    font: 800 1.2rem/1.2 var(--fuente-titulos);
    color: var(--azul-profundo);
}

.hoja__tipo {
    color: var(--texto-suave);
    font-size: 0.95rem;
}

.hoja__fecha {
    margin-left: auto !important;
    color: var(--texto-suave);
    font-size: 0.9rem;
    text-align: right;
}

.hoja__tabla {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.hoja__tabla th,
.hoja__tabla td {
    padding: 0.85rem clamp(1.25rem, 3vw, 2rem);
    text-align: left;
    vertical-align: baseline;
    border-bottom: 1px dashed var(--borde);
}

.hoja__tabla thead th {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--azul-profundo);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--texto-suave);
}

.hoja__tabla tbody th {
    font-weight: 500;
    color: var(--texto);
}

.hoja__resultado {
    font: 700 1.15rem/1.3 var(--fuente-titulos);
    color: var(--azul);
    white-space: nowrap;
}

.hoja__tabla td:last-child {
    color: var(--texto-suave);
}

.hoja__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding: 1.1rem clamp(1.25rem, 3vw, 2rem) 1.4rem;
}

.hoja__pie p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--texto-suave);
}

/* En móvil cada fila se apila: análisis arriba, resultado y observación debajo */
@media (max-width: 640px) {
    .hoja__tabla thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .hoja__tabla tr {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.1rem 1rem;
        padding: 0.85rem 1.25rem;
        border-bottom: 1px dashed var(--borde);
    }

    .hoja__tabla tbody th,
    .hoja__tabla td {
        padding: 0;
        border: 0;
    }

    .hoja__tabla tbody th {
        grid-column: 1 / -1;
        font-size: 0.9rem;
        color: var(--texto-suave);
    }

    .hoja__tabla td:last-child {
        align-self: baseline;
        font-size: 0.95rem;
    }

    .hoja__fecha {
        display: none;
    }
}

/* ---------- Misión y visión ---------- */

.proposito h2 {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
}

.proposito p {
    max-width: 55ch;
    color: var(--texto-suave);
    margin-bottom: 2rem;
}

.proposito p:last-child {
    margin-bottom: 0;
}

/* ---------- Preguntas frecuentes ---------- */

.preguntas {
    border-top: 1px solid var(--borde);
}

.preguntas details {
    border-bottom: 1px solid var(--borde);
}

.preguntas summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    font-weight: 600;
    color: var(--azul-profundo);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

.preguntas summary::-webkit-details-marker {
    display: none;
}

/* Signo más que se convierte en menos al abrir: la barra vertical se encoge
   hasta desaparecer, así se ve un solo símbolo que cambia y no dos que se pisan */
.preguntas summary::after {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background:
        linear-gradient(var(--acento), var(--acento)) center / 100% 2px no-repeat,
        linear-gradient(var(--acento), var(--acento)) center / 2px 100% no-repeat;
    transition: background-size 0.2s var(--curva-salida);
}

.preguntas details[open] summary::after {
    background-size: 100% 2px, 2px 0%;
}

/* Apertura animada donde el navegador lo permite; en el resto abre al instante.
   Abrir acompaña al usuario; cerrar es más rápido porque ya decidió. */
.preguntas details {
    interpolate-size: allow-keywords;
}

.preguntas details::details-content {
    block-size: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        block-size 0.16s var(--curva-salida),
        opacity 0.12s ease,
        content-visibility 0.16s allow-discrete;
}

.preguntas details[open]::details-content {
    block-size: auto;
    opacity: 1;
    transition:
        block-size 0.24s var(--curva-salida),
        opacity 0.24s ease,
        content-visibility 0.24s allow-discrete;
}

.preguntas details p {
    max-width: 60ch;
    margin: 0 0 1.1rem;
    color: var(--texto-suave);
}

@media (hover: hover) and (pointer: fine) {
    .preguntas summary:hover {
        color: var(--acento);
    }
}

/* ---------- WhatsApp: pestaña lateral ---------- */
/* Pegada al borde derecho. Se extiende 8px por fuera de la pantalla para que,
   al asomarse con el hover, nunca quede un hueco entre la pestaña y el borde. */

.whatsapp-flotante {
    position: fixed;
    top: 50%;
    right: -8px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 60px;
    height: 56px;
    margin-top: -28px;
    padding-right: 8px;
    border-radius: 14px 0 0 14px;
    background: #25D366;
    box-shadow: -4px 6px 16px -6px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
    /* Al presionar se encoge hacia el borde, sin despegarse de él */
    transform-origin: right center;
    transition: transform 0.25s var(--curva-salida);
}

@media (hover: hover) and (pointer: fine) {
    .whatsapp-flotante:hover {
        transform: translateX(-6px);
    }
}

.whatsapp-flotante:active {
    transform: translateX(-6px) scale(0.96);
    transition-duration: 0.08s;
}

.whatsapp-flotante svg {
    width: 28px;
    height: 28px;
    fill: var(--blanco);
}

@media (max-width: 640px) {
    .whatsapp-flotante {
        width: 56px;
        height: 52px;
        margin-top: -26px;
    }

    .whatsapp-flotante svg {
        width: 26px;
        height: 26px;
    }
}

/* ---------- Pie ---------- */

.pie {
    padding: 3.5rem 0 1.5rem;
    background: var(--azul-profundo);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.98rem;
}

.pie__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 2rem;
}

.pie__logo {
    width: 200px;
    margin-bottom: 1rem;
    padding: 0.4rem 0.6rem;
    background: var(--blanco);
    border-radius: var(--radio-chico);
}

.pie__titulo {
    margin-bottom: 0.6rem;
    font-weight: 600;
    color: var(--blanco);
}

.pie p {
    margin-bottom: 0.4rem;
}

.pie a {
    color: rgba(255, 255, 255, 0.85);
}

@media (hover: hover) and (pointer: fine) {
    .pie a:hover {
        color: var(--blanco);
    }
}

.pie__legal {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
}

@media (max-width: 760px) {
    .pie__grid { grid-template-columns: 1fr; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* Menos movimiento no es cero movimiento: se quitan los desplazamientos
       pero se conservan los fundidos, que ayudan a entender el cambio */
    *,
    *::before,
    *::after {
        transition-delay: 0s !important;
    }

    .hero__contenido > *,
    .cabecera h1,
    .cabecera p {
        animation-name: fundido;
        animation-duration: 0.3s;
    }

    .nav__menu li,
    .nav__login {
        transform: none !important;
    }

    .foto img,
    .nav__toggle span {
        transition: none;
    }

    /* Sin transición el zoom sería un salto brusco: mejor no hacerlo */
    .foto:hover img {
        transform: none !important;
    }

    /* Las fotos aparecen con un fundido en vez de descubrirse */
    .js .collage .foto {
        clip-path: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .js .collage.collage--visto .foto {
        opacity: 1;
    }

    .preguntas details::details-content,
    .preguntas details[open]::details-content {
        transition:
            opacity 0.2s ease,
            content-visibility 0.2s allow-discrete;
    }

    .boton:active,
    .nav__toggle:active {
        transform: none;
    }
}

@keyframes fundido {
    from { opacity: 0; }
}