/* ============================================================
   Ofelia Labs · landing pública (/labs)
   Migrada de labs.ofeliaexperience.com (Next.js en Vercel) a Twig.
   El layout va con utilidades Tailwind en templates/labs/landing.twig;
   aquí vive SOLO lo que Tailwind no cubre: la fuente Delight, el texto
   en gradiente y las animaciones con scroll.

   OJO: esto NO es el look del analizador interno (ese es labs.css con
   tokens --labs-*). La landing conserva la paleta del sitio original:
   marino #0A1628 / #020617, lima #DEF1BD, gris #F2F3F4.
   ============================================================ */

@font-face { font-family: 'Delight'; src: url('/fonts/Delight-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Delight'; src: url('/fonts/Delight-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Delight'; src: url('/fonts/Delight-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Delight'; src: url('/fonts/Delight-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Delight'; src: url('/fonts/Delight-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

html { scroll-behavior: smooth; }

body.ll {
    font-family: 'Delight', 'Degular Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #0A1628;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* El navbar pill es sticky: los anclajes aterrizan por debajo de él. */
.ll section[id] { scroll-margin-top: 88px; }

.ll-balance { text-wrap: balance; }

.ll-hero-title {
    font-size: clamp(40px, 5vw, 56px);
    line-height: 1.02;
    background-image: linear-gradient(197deg, #E4E5E8 0%, #FFFFFF 77%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Aparición al hacer scroll (FadeIn del original) ----------
   Solo se oculta si hay JS (clase .ll-js en <html>): sin JS, o si el
   observer no llega a correr, el contenido se ve completo. */
.ll-js .ll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease-out, transform .7s ease-out;
}
.ll-js .ll-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Acordeones (Qué incluye / FAQ) ----------
   Truco grid 0fr→1fr: anima la altura real sin medirla con JS. */
.ll-acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .3s ease-in-out, opacity .3s ease-in-out;
}
.ll-acc-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.ll-acc-panel > div { overflow: hidden; min-height: 0; }

.ll-chevron { transition: transform .3s; }
.is-open-chevron .ll-chevron { transform: rotate(180deg); }

/* ---------- "¿Este análisis es para ti?" ----------
   Orbe de fondo: capa sticky de una pantalla dentro de la sección (el
   original usaba position:fixed, que se colaba detrás de otras secciones). */
.ll-pq-orb {
    position: sticky;
    top: 0;
    height: 100vh;
    margin-bottom: -100vh;
    pointer-events: none;
    background: url('/assets/labs/landing/shape_bg.webp') no-repeat 15% center / 50%;
}
/* Tarjetas: entran y salen con el scroll (whileInView, once:false). */
.ll-js .ll-pq-card {
    transform: translateY(40px) scale(.96);
    transition: transform .5s ease-out;
}
.ll-js .ll-pq-card.is-in { transform: none; }

/* ---------- CTA fija en móvil (aparece al dejar atrás el hero) ---------- */
.ll-mobile-cta { transform: translateY(100%); transition: transform .3s; }
.ll-mobile-cta.is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ll-js .ll-reveal,
    .ll-js .ll-pq-card { opacity: 1; transform: none; transition: none; }
    .ll-acc-panel, .ll-chevron, .ll-mobile-cta { transition: none; }
}