/* ============================================================
   LANDING — Benincasa Pilates
   Extiende la paleta y tipografía de estilos.css (mismas variables
   :root), pero se arma aparte porque esta página no usa el layout
   operativo de la app (navbar de alumno/admin, .contenedor angosto):
   acá el objetivo es una página de una sola pantalla larga, de
   presentación, con secciones a todo el ancho.
   ============================================================ */

* { box-sizing: border-box; }

/* Scroll suave para los links del nav (anclas "#seccion"), con margen
   arriba para que el título de la sección no quede tapado por la
   barra superior, que es "sticky". Va en html (no en body) porque el
   scroll ocurre en el elemento raíz. */
html {
    scroll-behavior: smooth;
}
section[id] {
    scroll-margin-top: 84px;
}

body.landing {
    margin: 0;
    font-family: var(--f-body);
    color: var(--ink);
    background: var(--stone);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Red de seguridad: ninguna sección de esta página debería generar
       scroll horizontal, pero si algún elemento se pasa por un pixel
       en una pantalla muy angosta, que no arrastre a toda la página. */
    overflow-x: hidden;
}

.landing .envoltura {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- Barra superior fija ---------- */
.landing-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Semitransparente + blur en vez de un color sólido: al scrollear,
       lo que queda debajo se ve difuminado detrás de la barra en vez
       de tapado de golpe - una barra "de vidrio" en vez de una placa
       opaca (mismo recurso que usa Erika Bloom en su nav fija). */
    background: rgba(251, 247, 238, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
}
.landing-topbar .envoltura {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    padding-top: .8rem;
    padding-bottom: .8rem;
}
.landing-topbar .logo {
    font-family: var(--f-display);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    color: inherit; /* pisa el "a { color: var(--sage-deep) }" global: el logo es un link a home y tiene que verse en el tono oscuro del nav, no en el verde/azul de los links normales */
}

/* Nav de la landing (arriba a la derecha): son anclas a secciones de
   esta misma página, no rutas - por eso no reutilizamos ".navbar" de
   estilos.css (esa es para la navegación operativa de alumno/admin). */
.landing-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.landing-nav a {
    position: relative;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .02em;
    padding-bottom: 2px;
    white-space: nowrap;
    transition: color .15s ease;
}
/* Subrayado que crece desde la izquierda al pasar el mouse, en vez de
   aparecer de golpe - un detalle chico pero es el tipo de microinteracción
   editorial que comparten las tres páginas de referencia. */
.landing-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width .25s ease;
}
.landing-nav a:hover { color: var(--ink); }
.landing-nav a:hover::after { width: 100%; }

/* Botón hamburguesa: solo existe visualmente en mobile (ver media
   query de abajo). En desktop el nav ya entra horizontal junto al
   logo, así que no hace falta. */
.landing-nav-toggle {
    display: none;
    margin: 0; /* pisa el "button { margin-top: 1.4rem }" de estilos.css (pensado para botones de formulario) - sin esto, el ícono queda empujado hacia abajo y desalineado con el logo */
    background: none;
    border: none;
    color: var(--ink);
    cursor: pointer;
    padding: .4rem;
    line-height: 0;
}

@media (max-width: 640px) {
    /* Barra más fina en mobile: menos padding vertical, para que
       ocupe menos alto de pantalla - pero el nombre "Benincasa
       Pilates" queda más grande que en desktop, ya que en mobile es
       el único elemento de marca visible (sin ícono al lado). */
    .landing-topbar .envoltura { padding-top: .55rem; padding-bottom: .55rem; }
    .landing-topbar .logo { font-size: 1.3rem; }

    .landing-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

    /* En mobile el nav deja de ser una fila horizontal junto al logo
       (no entra) y pasa a ser un panel plegable a todo el ancho,
       debajo del logo+hamburguesa - el propio botón lo abre/cierra
       (ver el <script> al final de landing.html). Usamos max-height
       en vez de "display" para poder animar la apertura. */
    .landing-nav {
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .landing-nav.abierto {
        max-height: 260px;
        margin-top: .4rem;
        padding-top: .4rem;
        border-top: 1px solid var(--line-soft);
    }
    .landing-nav a {
        display: block;
        width: 100%;
        padding: .5rem 0;
    }
}

/* ---------- Botones ----------
   Pastilla completa (border-radius: 999px), no el radio chico que
   usa el resto del sitio: en una landing de bienestar, un botón
   totalmente redondeado lee como más premium/spa - es el patrón que
   se repite en las tres páginas de referencia (Erika Bloom, Forma,
   East River) para sus CTA principales. */
.landing .boton-cta {
    display: inline-block;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: .92rem;
    padding: .75rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
    white-space: nowrap;
}
/* Ahora que toda la landing es de fondo claro (ver .landing-hero y
   .landing-seccion.acento más abajo), un solo tratamiento de botón
   alcanza para toda la página - ya no hace falta la variante "-claro"
   que existía para diferenciarse de secciones oscuras que ya no
   existen. */
.boton-cta-primario {
    background: var(--ink);
    color: var(--paper);
}
.boton-cta-primario:hover { background: var(--ink-soft); transform: translateY(-1px); }

.boton-cta-secundario {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}
.boton-cta-secundario:hover { border-color: var(--ink); transform: translateY(-1px); }

.landing .fila-botones {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    align-items: center;
}

/* ---------- Animación de entrada ("reveal") ----------
   Todo elemento con esta clase arranca invisible y corrido hacia
   abajo; el script al final de landing.html le agrega ".visible"
   cuando entra en pantalla (o de una, si el navegador no soporta
   IntersectionObserver o la persona prefiere menos movimiento - ver
   el @media de más abajo). El --delay por elemento (inline en el
   HTML) es lo que arma la cascada dentro de cada grupo. */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s ease, transform .8s ease;
    transition-delay: var(--delay, 0s);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Hero ---------- */
.landing-hero {
    background: var(--stone);
    color: var(--ink);
    padding: 6rem 0;
    text-align: center;
    /* Casi toda la pantalla en la primera vista, sin forzar el 100vh
       exacto (en mobile eso suele generar un salto raro cuando la
       barra de direcciones del navegador aparece/desaparece). */
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.landing-hero .envoltura {
    width: 100%;
}
.landing-hero .eyebrow {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sage);
    display: block;
    margin-bottom: 1rem;
}
.landing-hero h1 {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(2.6rem, 6.5vw, 4.4rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 auto .9rem;
    max-width: 20ch;
}
.landing-hero .lema {
    font-family: var(--f-display);
    font-style: italic;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--sage-deep);
    margin: 0 auto 1.4rem;
}
/* Efecto "máquina de escribir": el lema se escribe letra a letra con
   un cursor parpadeando, en vez de aparecer entero de una - un guiño
   sutil de movimiento (visto en East River Pilates) que le da vida
   al hero sin caer en algo exagerado. A diferencia de la primera
   versión (un solo <keyframes> animando "width" en "ch", que asumía
   una sola línea y se cortaba en mobile), esto lo maneja JS
   agregando caracteres de a uno al span de adentro - así el texto
   ajusta a 2 líneas solo si hace falta, en cualquier tamaño de
   pantalla, sin cortarse nunca (ver el <script> de base_publica.html
   para la lógica). El span interno lleva aria-hidden porque el <p>
   que lo contiene ya tiene el texto completo en su aria-label - así
   quien usa lector de pantalla siempre escucha la frase entera, sin
   importar en qué momento de la animación esté. */
.landing-hero .lema-texto.escribiendo::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--sage-deep);
    animation: parpadeo-cursor .8s step-end infinite;
}
@keyframes parpadeo-cursor { 50% { opacity: 0; } }
.landing-hero .sub {
    font-size: 1.02rem;
    color: var(--muted);
    max-width: 46ch;
    margin: 0 auto 2.2rem;
}
.landing-hero .fila-botones { justify-content: center; }

/* ---------- Secciones generales ---------- */
.landing-seccion {
    padding: 7rem 0;
}
.landing-seccion.claro { background: var(--stone); }
.landing-seccion.papel { background: var(--paper); }

.landing-seccion .cabecera {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3.5rem;
}
.landing-seccion .eyebrow {
    display: block;
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: .6rem;
}
.landing-seccion h2 {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 0 0 .6rem;
    letter-spacing: -0.01em;
}
.landing-seccion .cabecera p {
    color: var(--muted);
    margin: 0;
    font-size: 1rem;
}

/* ---------- Frase / filosofía ---------- */
.landing-frase .envoltura {
    max-width: 720px;
    text-align: center;
}
.landing-frase p {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.35rem, 3.2vw, 2.05rem);
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--ink-soft);
    margin: 0;
}

/* ---------- Quiénes somos ---------- */
.landing-texto {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
}
.landing-texto p {
    font-size: 1.04rem;
    line-height: 1.75;
    color: var(--ink-soft);
    margin: 0 0 1.25rem;
}
.landing-texto p:last-child { margin-bottom: 0; }

.landing-badge {
    max-width: 640px;
    margin: 2rem auto 0;
    text-align: center;
    font-family: var(--f-mono);
    font-size: .8rem;
    letter-spacing: .01em;
    color: var(--sage-deep);
    background: var(--sage-tint);
    border-radius: 3px;
    padding: .9rem 1.25rem;
    line-height: 1.5;
}

.landing-foto {
    max-width: 900px;
    margin: 2.75rem auto 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(27, 25, 18, .08), 0 0 0 1px var(--line-soft);
}
.landing-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .6s ease;
}
.landing-foto:hover img { transform: scale(1.045); }

/* ---------- Valores / diferenciales ---------- */
.landing-valores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.landing-valor {
    background: var(--paper);
    border-radius: 4px;
    padding: 2rem 1.75rem;
    box-shadow: 0 1px 2px rgba(27, 25, 18, .08), 0 0 0 1px var(--line-soft);
    text-align: left;
    transition: transform .2s ease, box-shadow .2s ease;
}
.landing-valor:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(27, 25, 18, .1), 0 0 0 1px var(--line-soft);
}
.landing-valor .numero {
    font-family: var(--f-mono);
    font-size: .78rem;
    letter-spacing: .1em;
    color: var(--clay);
    display: block;
    margin-bottom: .9rem;
}
.landing-valor h3 {
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}
.landing-valor p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
}

/* ---------- Equipo ---------- */
.landing-equipo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.landing-profe {
    text-align: center;
}
.landing-profe .avatar {
    width: 108px;
    height: 108px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--sage-tint);
    color: var(--sage-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-display);
    font-size: 2.1rem;
    font-weight: 600;
    position: relative;
    box-shadow: 0 0 0 1px var(--line-soft), 0 4px 14px rgba(27, 25, 18, .1);
    transition: transform .2s ease;
}
.landing-profe:hover .avatar { transform: translateY(-4px); }
.landing-profe .avatar::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid var(--line);
}
.landing-profe h3 {
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 .3rem;
}
.landing-profe .rol {
    font-family: var(--f-mono);
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--muted);
    text-transform: uppercase;
}

/* ---------- Contacto / CTA final ---------- */
.landing-contacto {
    text-align: center;
}
.landing-contacto .fila-botones { justify-content: center; margin-top: .5rem; }
.landing-contacto .icono {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    margin-right: .5rem;
}

/* ---------- Ubicación / mapa ---------- */
.landing-mapa {
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(27, 25, 18, .08), 0 0 0 1px var(--line-soft);
}

/* ---------- Estrellas ---------- */
.landing-estrellas {
    color: var(--warn);
    letter-spacing: .12em;
    font-size: 1rem;
}
.landing-estrellas span {
    color: var(--muted);
    letter-spacing: normal;
    font-family: var(--f-mono);
    font-size: .78rem;
    margin-left: .5rem;
}

/* ---------- Reseñas ---------- */
.landing-resenas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.landing-resena {
    background: var(--stone);
    border-radius: 4px;
    padding: 1.75rem;
    box-shadow: 0 1px 2px rgba(27, 25, 18, .08), 0 0 0 1px var(--line-soft);
}
.landing-resena .landing-estrellas { margin-bottom: .8rem; font-size: .85rem; }
.landing-resena .texto {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}
.landing-resena .autor {
    font-family: var(--f-mono);
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--muted);
    text-transform: uppercase;
}

/* ---------- Preguntas frecuentes ---------- */
.landing-faq {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.landing-faq-item {
    background: var(--paper);
    border-radius: 4px;
    padding: 1.1rem 1.4rem;
    box-shadow: 0 1px 2px rgba(27, 25, 18, .08), 0 0 0 1px var(--line-soft);
}
.landing-faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink);
}
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-family: var(--f-mono);
    font-size: 1.2rem;
    color: var(--sage);
    transition: transform .15s ease;
}
.landing-faq-item[open] summary::after { transform: rotate(45deg); }
.landing-faq-item p {
    margin: .9rem 0 0;
    color: var(--ink-soft);
    line-height: 1.6;
    font-size: .96rem;
}

/* ---------- Botón flotante ("Tomar un turno") ----------
   Fijo en la esquina inferior derecha, sobre todo el contenido, para
   que quien esté leyendo la landing siempre tenga a mano la acción
   principal sin tener que volver a subir hasta la barra superior. Se
   deja oscuro a propósito (ahora que el resto de la página es clara):
   es el único acento oscuro que queda, así el ojo lo encuentra rápido
   como "la acción principal" en vez de perderse entre el resto. */
.boton-flotante {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--f-body);
    font-weight: 600;
    font-size: .92rem;
    padding: .85rem 1.4rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(27, 25, 18, .28), 0 2px 6px rgba(27, 25, 18, .16);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.boton-flotante:hover {
    background: var(--ink-soft);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(27, 25, 18, .32), 0 4px 10px rgba(27, 25, 18, .18);
}
.boton-flotante svg { flex-shrink: 0; }

@media (max-width: 480px) {
    .boton-flotante {
        right: 1rem;
        bottom: 1rem;
        padding: .75rem 1.15rem;
        font-size: .85rem;
    }
}

/* ---------- Footer ---------- */
.landing-footer {
    background: var(--stone);
    color: var(--muted);
    padding: 2rem 0;
    text-align: center;
    font-size: .8rem;
    border-top: 1px solid var(--line);
}
.landing-footer .envoltura {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: center;
}
.landing-footer a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.landing-footer a:hover { border-color: var(--ink); }
.landing-footer .enlaces { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }

@media (max-width: 780px) {
    .landing-valores, .landing-equipo, .landing-resenas { grid-template-columns: 1fr; }
    .landing-hero { padding: 4rem 0; min-height: 90vh; }
    .landing-seccion { padding: 5rem 0; }
    .landing-mapa { aspect-ratio: 4 / 5; }
    /* Deja lugar abajo para que el botón flotante no tape el último
       link del footer en pantallas angostas (ver .boton-flotante). */
    .landing-footer { padding-bottom: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .landing .boton-cta,
    .landing-valor,
    .landing-profe .avatar,
    .landing-nav,
    .landing-nav a::after,
    .landing-foto img,
    .boton-flotante { transition: none; }
    .reveal {
        /* El script también detecta esta preferencia y agrega
           ".visible" directo (ver landing.html), pero lo dejamos
           resuelto acá también por si el JS no llegó a correr. */
        opacity: 1;
        transform: none;
        transition: none;
    }
    /* El cursor parpadeante también se apaga - el script detecta esta
       misma preferencia y directamente no anima el tipeo (ver
       base_publica.html), así que ".escribiendo" nunca se llega a
       agregar, pero lo dejamos resuelto acá también por las dudas. */
    .landing-hero .lema-texto.escribiendo::after { animation: none; display: none; }
}