/* site.css — sitio público de Lyva (lyva.care / www.lyva.care).
   Tokens del Sistema de color v6 y las mismas fuentes self-hosted de la app.
   Sin frameworks, sin recursos externos: la CSP de la app no se toca.
   Móvil primero; los breakpoints suben desde 390 px. */


:root{
  /* Solo lo del SITIO. El resto de los tokens vive en /shared/tokens.css (O0).
     --wrap es el ancho de pagina y --r el radio del sitio: no estaban duplicados,
     asi que no ganan nada mudandose. Los radios se unifican en O1. */
  --wrap:1080px; --r:14px;
  /* Radios de PAGINA. Habia seis valores distintos para lo mismo — 8, 9, 10, 11, 12 y 13 —
     y nadie distingue un 11 de un 13 mirandolo: lo que se nota es que juntos nada se lee
     como familia. Ahora son dos, y el que manda es el TAMAÑO de la caja, no su papel:
     una caja de control (boton, enlace de la barra, item de menu, campo) lleva --r-ctl;
     una superficie de contenido lleva --r.
     NO entran aqui los radios de FORMA: el telefono (46/36/20 y los 2px de sus botones),
     las barras de las graficas (6 6 3 3 / 5 5 2 2), el globo del chat (12 12 12 4) y las
     piezas de dentro de la pantalla (.ph-*). Esos dibujan un objeto a su escala, no son
     sedimento; meterlos en la escalera deformaria el dibujo. */
  --r-ctl:10px;
  /* Elevacion del SITIO. --sh-sm (0 1px 2px rgba(...,.05)) es un filo, no una
     elevacion: 26 elementos de la portada lo compartian y la pagina se leia
     plana — solo el telefono (0 34px 70px) y las tarjetas flotantes tenian
     profundidad, asi que habia dos niveles: telefono y nada. Estos dos son del
     sitio; --sh-sm y --sh-md siguen intactos para la app (17 reglas los usan).
     Van con radio negativo: la sombra queda mas estrecha que la caja y no
     mancha el papel calido alrededor. */
  --sh-reposo:0 1px 2px rgba(27,36,32,.04), 0 10px 26px -10px rgba(27,36,32,.13);
  --sh-alza:0 2px 5px rgba(27,36,32,.05), 0 26px 54px -16px rgba(27,36,32,.19);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:var(--font-body);
      font-size:1rem; line-height:1.6; }
/* -webkit-font-smoothing:antialiased adelgaza los trazos en macOS. En pantallas
   Retina se lee como intencional; a 1x (monitor externo) deja el texto anemico y
   sucio, sobre todo la Bricolage a peso 700 y el gris --dim. Por eso va acotado a
   pantallas de alta densidad: a 1x gana el render por defecto del sistema, mas
   grueso y legible. Aplica igual en Chrome y en Safari: no es cosa del motor. */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:2dppx){
  body{ -webkit-font-smoothing:antialiased; }
}
img{ max-width:100%; display:block; }
/* El `hidden` del HTML tiene que ganar SIEMPRE: la regla del navegador es
   `[hidden]{display:none}` sin clase, así que cualquier `.btn{display:inline-flex}`
   la pisaba y un botón oculto seguía viéndose (visto en /prueba con la demo apagada). */
[hidden]{ display:none!important; }
a{ color:var(--accent2); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
/* El reset de prefers-reduced-motion vive en /shared/tokens.css (O0). */

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px; }

/* ── Cabecera ── */
.top{ position:sticky; top:0; z-index:20; background:rgba(250,249,247,.92);
      /* Safari <=17 necesita el prefijo o no hay desenfoque y se lee el contenido
         atraves del 92% de opacidad. */
      -webkit-backdrop-filter:saturate(140%) blur(8px);
              backdrop-filter:saturate(140%) blur(8px);
      /* Arriba del todo la cabecera es parte del papel: sin línea. La línea y la sombra
         llegan con .bajado, cuando hay contenido pasando por debajo y hace falta el borde. */
      border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease; }
.top .wrap{ display:flex; align-items:center; gap:16px; height:72px; transition:height .2s ease; }
/* La marca es la marca (el trazo verde sobre el papel), no el icono de la app metido en un
   cuadro: un cuadro verde de 26px junto al nombre se lee como favicon, no como logotipo.
   Es SVG (vectorizado de Marca/Logo/final-logo.png, 2.8 KB): nítido a cualquier densidad. */
/* Tamaño: la marca tiene que pesar lo mismo que el botón primario del otro extremo — 40px de
   trazo y el nombre a 1.625rem. A 30px/1.31rem se veía como un enlace más de la barra. */
.brand{ font-family:var(--font-display); font-weight:700; font-size:1.625rem; letter-spacing:-.03em;
        color:var(--text); display:flex; align-items:center; gap:10px; padding:4px 0; line-height:1; }
.brand:hover{ text-decoration:none; }
/* El trazo apoya en su base (la montaña) y el nombre en su línea base: bajar el nombre 1px
   los alinea ópticamente; sin eso la «L» flota sobre la montaña. */
.brand img{ width:40px; height:auto; display:block; transition:transform .25s ease; }
.brand span{ display:block; transform:translateY(1px); }
.brand:hover img{ transform:translateY(-1px); }
.top nav{ margin-left:auto; display:flex; align-items:center; gap:2px; }
.top nav .lnk{ color:var(--dim); font-weight:500; font-size:.9375rem; padding:8px 12px; border-radius:var(--r-ctl);
               transition:color .15s ease, background .15s ease; }
.top nav .lnk:hover{ color:var(--text); text-decoration:none; }
.top nav .lnk[aria-current]{ color:var(--text); font-weight:600; }
/* Los enlaces son un grupo y los botones otro: entre ambos, aire; entre botones, poco. */
.top nav .lnk + .btn{ margin-left:14px; }
.top nav .btn + .btn{ margin-left:6px; }
/* «Entrar» no compite con la acción primaria: es texto con área de toque, no una segunda caja. */
.top nav .btn-entrar{ border-color:transparent; color:var(--text); }
.top nav .btn-entrar:hover{ background:var(--panel2); border-color:transparent; }
/* En móvil el espacio es de: logo · Precios · Empieza gratis.
   "Para clientes" y "Entrar" siguen accesibles desde el pie. */
.top nav .lnk-2{ display:none; }
.top nav .btn-entrar{ display:none; }
@media(min-width:760px){
  .top nav .lnk-2{ display:inline-block; }
  .top nav .btn-entrar{ display:inline-flex; }
}

/* ── Botones ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
      font-family:var(--font-body); font-weight:600; font-size:.9375rem; line-height:1;
      padding:13px 20px; border-radius:var(--r-ctl); border:1px solid transparent; cursor:pointer;
      transition:background .15s ease, border-color .15s ease, transform .06s ease; }
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent2); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--dim); }
.btn-sm{ padding:9px 15px; font-size:.9375rem; border-radius:var(--r-ctl); }
.btn-lg{ padding:15px 24px; font-size:1rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ── Tipografía de sección ── */
h1,h2,h3{ font-family:var(--font-display); letter-spacing:-.025em; line-height:1.12; font-weight:700; }
h1{ font-size:clamp(2.125rem, 7vw, 3.625rem); }
h2{ font-size:clamp(1.625rem, 4.4vw, 2.3125rem); }
h3{ font-size:1.1875rem; letter-spacing:-.015em; font-weight:600; line-height:1.3; }
.lead{ font-size:clamp(1.0625rem, 2.4vw, 1.25rem); color:var(--dim); line-height:1.55; }
.kicker{ font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
         color:var(--accent); margin-bottom:14px; }
section{ padding:64px 0; }
@media(min-width:760px){ section{ padding:88px 0; } }
.section-head{ max-width:680px; margin-bottom:40px; }
.section-head p{ color:var(--dim); margin-top:14px; font-size:1.0625rem; }

/* ── Hero ── */
.hero{ padding:56px 0 8px; }
.hero h1{ max-width:15ch; }
.hero .lead{ max-width:46ch; margin:20px 0 28px; }
.fine{ font-size:.875rem; color:var(--dim); margin-top:16px; max-width:70ch; }
.hero .fine{ margin-top:16px; }
.hero-grid{ display:grid; gap:48px; align-items:center; }
@media(min-width:900px){
  .hero{ padding:76px 0 24px; }
  /* Las tarjetas flotantes salen ~76 px por la izquierda del visual: el hueco entre
     columnas tiene que ser mayor que eso para que no toquen el texto del hero. */
  .hero-grid{ grid-template-columns:1fr 1fr; gap:88px; }
}

/* ── Maqueta de teléfono (dibujada, no es una captura) ── */
/* Un teléfono de verdad: proporción 9:19.5, marco grafito, isla, barra de estado,
   botones laterales, barra de navegación de la app e indicador de inicio.
   Sin esto era un rectángulo blanco del alto de su contenido, y se leía como tarjeta. */
/* display:flex NO es decorativo: es el arreglo del desborde en Safari (10-sep).
   .phone-screen usaba height:100%, y WebKit NO resuelve un porcentaje de altura contra
   un padre cuya altura viene de aspect-ratio: lo trata como indefinido, cae a `auto` y
   toma la altura del contenido. Medido en Safari: la pantalla salia 619.3 px en vez de
   590 y sobresalia 18.3 px POR DEBAJO del marco, con sus esquinas redondeadas fuera del
   telefono. Chromium si lo resuelve, por eso solo se veia en Safari. Como contenedor
   flex, la pantalla se estira al alto del marco (align-items:stretch) sin pasar por
   ningun porcentaje. Afectaba a los 5 telefonos de index, prueba y clientes. */
.phone{ position:relative; display:flex; width:100%; max-width:300px; aspect-ratio:300 / 612; margin:0 auto;
        background:#1b1b1d; border-radius:46px; padding:11px;
        box-shadow:0 34px 70px rgba(27,36,32,.26), 0 6px 18px rgba(27,36,32,.14),
                   inset 0 0 0 1.5px #3c3c40, inset 0 0 0 3px #101012; }
.phone::before{ content:""; position:absolute; left:-3px; top:118px; width:3px; height:60px;
                background:#2a2a2d; border-radius:2px 0 0 2px; box-shadow:0 84px 0 #2a2a2d; } /* volumen */
.phone::after{ content:""; position:absolute; right:-3px; top:168px; width:3px; height:92px;
               background:#2a2a2d; border-radius:0 2px 2px 0; }                                /* encendido */
.phone-screen{ position:relative; flex:1; background:var(--bg); border-radius:36px; overflow:hidden;
               padding:12px 16px 14px; display:flex; flex-direction:column; }
.ph-top{ display:flex; align-items:center; justify-content:space-between; height:30px; margin-bottom:14px; }

/* ── El clip de la ingesta, en la maqueta del hero ────────────────────────────
   Misma receta de telefono: si un dia cambia el marco, cambian los dos.
   La proporcion sale de la cuenta, no del ojo: con `max-width:300px` la pantalla mide
   278 px (300 menos los 11 de marco por lado). El video es 600x1218 (0.49261), asi que
   ocupa 278 / 0.49261 = 564.3 px de alto. Sumando los 12 de aire superior y los 44 de la
   barra de estado (30 de alto + 14 de margen), la pantalla mide 620.3 y el telefono 642.3.
   De ahi el 300/642: encaja sin recortar ni un pixel del video. */
.phone-clip{ aspect-ratio:300 / 642; }
.phone-clip .phone-screen{ padding:12px 0 0; }
.phone-clip .ph-top{ padding:0 16px; }      /* el aire lateral lo recupera la barra */
.phone-clip video{ display:block; width:100%; height:auto; background:var(--bg); }
.clip-pie{ text-align:center; margin-top:16px; margin-left:auto; margin-right:auto; }
.ph-hora{ font-size:.875rem; font-weight:600; color:var(--text); letter-spacing:-.01em; width:56px; }
.ph-isla{ width:92px; height:27px; background:#0d0d0f; border-radius:20px; }
.ph-iconos{ display:flex; align-items:center; gap:5px; width:56px; justify-content:flex-end; }
.ph-iconos svg{ height:11px; width:auto; display:block; }
.ph-nav{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex;
         justify-content:space-around; font-size:.6875rem; font-weight:600; color:var(--dim); }
.ph-nav span{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.ph-nav i{ width:20px; height:20px; border-radius:6px; background:var(--panel2); display:block; }
.ph-nav .on{ color:var(--accent2); }
.ph-nav .on i{ background:var(--accent-soft); }
.ph-home{ width:118px; height:5px; border-radius:3px; background:var(--text); opacity:.8; margin:12px auto 0; }
.ph-kicker{ font-size:.75rem; color:var(--dim); font-weight:600; }
.ph-title{ font-family:var(--font-display); font-size:1.3125rem; font-weight:700; letter-spacing:-.02em; margin:2px 0 16px; }
.ph-card{ background:var(--panel); border:1px solid var(--line); border-radius:13px;
          padding:13px 14px; box-shadow:var(--sh-sm); margin-bottom:10px; }
.ph-card .t{ font-weight:600; font-size:.9375rem; }
.ph-card .s{ font-size:.8125rem; color:var(--dim); margin-top:3px; }
.ph-pill{ display:inline-block; font-size:.6875rem; font-weight:600; padding:3px 9px;
          border-radius:999px; background:var(--accent-soft); color:var(--accent2); margin-bottom:9px; }
.ph-sets{ display:flex; gap:6px; margin-top:11px; }
.ph-set{ flex:1; background:var(--panel2); border-radius:7px; padding:7px 0; text-align:center;
         font-size:.75rem; font-weight:600; color:var(--dim); }
.ph-set.done{ background:var(--accent-soft); color:var(--accent2); }
.ph-week{ display:flex; gap:5px; margin-top:6px; }
.ph-semana{ margin-top:12px; }
.ph-day{ flex:1; height:26px; border-radius:5px; background:#ece9e3; }
.ph-day.a{ background:#bfe0cb; } .ph-day.b{ background:#7fc59c; } .ph-day.c{ background:#15804f; }

/* ── Las tres escenas del teléfono (8-sep) ──────────────────────────────────
   El teléfono enseñaba una sola pantalla y se leía como una foto. Ahora se turnan
   las tres pestañas reales de la app —Hoy, Progreso, Plan— y la barra de abajo las
   sigue. Es la idea de Popmenu (algo que avanza solo) sin nada de su estética, y
   sin un solo byte de red: cero video, cero imágenes, cero riesgo de LCP.
   El alto del teléfono es fijo (aspect-ratio), así que las escenas superpuestas
   no mueven nada: CLS sigue en 0. */
.ph-cuerpo{ position:relative; flex:1; min-height:0; overflow:hidden; }
.ph-escena{ position:absolute; inset:0; opacity:0; transform:translateY(10px);
            transition:opacity .5s ease, transform .5s ease;
            pointer-events:none; visibility:hidden; }
.ph-escena.on{ opacity:1; transform:none; visibility:visible; }
/* Las series se rellenan solas al entrar en «Hoy»: la transición vive en .ph-set. */
.ph-set{ transition:background .35s ease, color .35s ease; }

/* La gráfica de Progreso: barras que crecen al entrar. Es transform, no height,
   para que la anime el compositor y no dispare recálculos de diseño. */
.ph-graf{ display:flex; align-items:flex-end; gap:7px; height:104px; margin:4px 0 6px; }
.ph-graf span{ flex:1; height:var(--h); background:var(--accent-soft); border-radius:6px 6px 3px 3px;
               transform:scaleY(0); transform-origin:bottom; transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.ph-graf span:last-child{ background:var(--accent); }
.ph-escena.on .ph-graf span{ transform:scaleY(1); }
.ph-escena.on .ph-graf span:nth-child(2){ transition-delay:.06s; }
.ph-escena.on .ph-graf span:nth-child(3){ transition-delay:.12s; }
.ph-escena.on .ph-graf span:nth-child(4){ transition-delay:.18s; }
.ph-escena.on .ph-graf span:nth-child(5){ transition-delay:.24s; }
.ph-escena.on .ph-graf span:nth-child(6){ transition-delay:.30s; }
.ph-ejes{ display:flex; justify-content:space-between; font-size:.6875rem; color:var(--dim);
          margin-bottom:13px; }
/* La pastilla de la barra de abajo se desliza entre pestañas. */
.ph-nav span{ transition:color .3s ease; }
.ph-nav i{ transition:background .3s ease, transform .22s ease; }

/* ── El dedo que toca (11-sep) ──────────────────────────────────────────────
   Las escenas ya se turnaban, pero sin nadie que las cambiara se leían como un
   carrusel. Ahora se ve el gesto: el dedo viaja a la pestaña, la aprieta, y la
   pantalla cambia en ese toque. Todo es transform y opacity —lo único que el
   navegador mueve sin recalcular diseño—, así que ni un repintado de más.
   El elemento lo crea site.js: sin JS no existe. */
.ph-dedo{ position:absolute; left:0; top:0; width:36px; height:36px; margin:-18px 0 0 -18px;
          border-radius:50%; background:rgba(27,36,32,.26); opacity:0; pointer-events:none; z-index:3;
          box-shadow:inset 0 0 0 2px rgba(255,255,255,.75), 0 0 0 1px rgba(27,36,32,.10),
                     0 5px 14px rgba(27,36,32,.28);
          transition:transform .26s cubic-bezier(.3,.75,.25,1), opacity .18s ease; }
/* Al apretar, el dedo deja de planear y baja de golpe: el viaje es lento, el toque no. */
.ph-dedo.abajo{ transition:transform .08s ease-out, opacity .18s ease; }
/* La onda del toque: un aro que se abre desde el dedo, como el que deja un dedo de
   verdad en una pantalla. Aro y no disco a propósito: relleno tapaba el icono de la
   pestaña y se leía como «se puso verde», no como «alguien la tocó». */
.ph-onda{ position:absolute; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px;
          border-radius:50%; border:2px solid var(--accent); opacity:0; transform:scale(.3); }
/* .20s (22-sep; antes .34s, .42s, .6s): la onda vive mientras el dedo está abajo (SUELTA en site.js). Si dura
   más, al levantarse el dedo se le quita la clase y el aro desaparece a media expansión. */
.ph-dedo.abajo .ph-onda{ animation:ph-onda .20s ease-out; }
@keyframes ph-onda{ from{ opacity:.75; transform:scale(.3); } to{ opacity:0; transform:scale(2.7); } }
/* Y la pestaña se hunde, como cualquier botón al que le pegan un dedo encima. */
.ph-nav .pulsa i{ transform:scale(.82); }

/* Sin movimiento: se ve «Hoy» y nada se turna. El JS ni arranca el ciclo, pero la
   regla queda por si alguien llega con el CSS cargado y el JS no. */
@media (prefers-reduced-motion:reduce){
  .ph-escena{ transition:none; }
  .ph-graf span{ transform:scaleY(1); transition:none; }
  .ph-dedo{ display:none; }
}

/* ── Tarjetas de contenido ── */
.cards{ display:grid; gap:18px; }
@media(min-width:720px){ .cards.c3{ grid-template-columns:repeat(3,1fr); } .cards.c2{ grid-template-columns:repeat(2,1fr); } }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
       padding:26px 24px; box-shadow:var(--sh-reposo); }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--dim); font-size:1rem; }
.card .ico{ width:38px; height:38px; border-radius:var(--r-ctl); background:var(--accent-soft);
            display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.card .ico svg{ width:20px; height:20px; stroke:var(--accent2); fill:none; stroke-width:1.9;
                stroke-linecap:round; stroke-linejoin:round; }

/* ── Franja de formatos ── */
.formats{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.fmt{ font-size:.875rem; font-weight:600; color:var(--dim); background:var(--panel);
      border:1px solid var(--line); border-radius:999px; padding:7px 14px; }

/* ── Banda de confianza ── */
.trust{ background:var(--accent-soft); border-top:1px solid #d5e9de; border-bottom:1px solid #d5e9de; }
.trust h2{ max-width:18ch; }
.trust p{ color:#25503c; max-width:58ch; margin-top:16px; font-size:1.0625rem; }
.trust .cta-row{ margin-top:22px; }
@media(min-width:900px){
  .trust .wrap{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:start; }
  .trust h2{ margin:0; }
  .trust p{ margin-top:0; }
}

/* ── Precios ── */
.plans{ display:grid; gap:16px; margin-top:8px; }
@media(min-width:820px){ .plans{ grid-template-columns:repeat(5,1fr); gap:12px; } }
.plan{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px 18px; }
.plan.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.plan .name{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; }
.plan .range{ font-size:.8125rem; color:var(--dim); margin-top:3px; }
.plan .price{ font-family:var(--font-display); font-weight:700; font-size:1.6875rem; margin-top:14px; letter-spacing:-.02em; }
.plan .per{ font-size:.8125rem; color:var(--dim); font-weight:500; }
.calc{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
       padding:26px 24px; box-shadow:var(--sh-sm); margin-top:34px; }
.calc label{ font-weight:600; font-size:.9375rem; display:block; margin-bottom:6px; }
.calc input[type=range]{ width:100%; accent-color:var(--accent); margin:12px 0 4px; }
.calc .out{ font-family:var(--font-display); font-size:clamp(1.25rem,3.4vw,1.6875rem); font-weight:700;
            letter-spacing:-.02em; margin-top:14px; line-height:1.3; }
.calc .out b{ color:var(--accent2); }
.calc .note{ color:var(--dim); font-size:.9375rem; margin-top:12px; }
.tablewrap{ overflow-x:auto; margin-top:8px; }
table{ border-collapse:collapse; width:100%; min-width:420px; font-size:.9375rem; }
th,td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); }
th{ font-weight:600; font-size:.875rem; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; }
tbody tr:last-child td{ border-bottom:0; }

/* ── Aviso / nota ── */
.note-box{ background:var(--amber-soft); border:1px solid #eddcb8; border-radius:var(--r);
           padding:18px 20px; color:#6f4a0c; font-size:.9375rem; margin-top:26px; }

/* ── Cierre ── */
.closer{ text-align:center; }
/* Los ocho h2 de seccion SI deben pesar igual: son pares entre si. El que no
   puede pesar lo mismo es este — es la ultima pantalla antes del pie y la que
   pide la conversion, y hasta hoy topaba en los mismos 36.8 px que los otros
   ocho (el techo de `h2{clamp(...,2.3125rem)}`), asi que se leia como una seccion
   mas. Con esto la escalera queda h1 58 > cierre 49 > seccion 37 px. */
.closer h2{ font-size:clamp(2.0625rem, 5.6vw, 3.0625rem); letter-spacing:-.032em;
            max-width:17ch; margin:0 auto; }
.closer .lead{ max-width:52ch; margin:18px auto 30px; }
/* `.fine` lleva max-width:70ch y ningun margen automatico, asi que su CAJA se pegaba a la
   izquierda y solo el texto se centraba dentro de ella: el renglon quedaba descentrado
   respecto a los botones de arriba. Se ve a partir de ~1100 px, que es donde nadie mira. */
.closer .fine{ margin-left:auto; margin-right:auto; }
.closer .cta-row{ justify-content:center; }
/* El boton primario del cierre es el unico de la pagina que levanta sombra, y
   la levanta en verde: es la accion principal del sitio, no un boton mas. */
.closer .btn-primary{ box-shadow:0 1px 2px rgba(27,36,32,.06), 0 12px 26px -10px rgba(21,128,79,.5); }
.closer .btn-primary:hover{ box-shadow:0 1px 2px rgba(27,36,32,.06), 0 16px 32px -10px rgba(21,128,79,.55); }
.stores{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
/* El badge OFICIAL de Apple (public/site/assets/, descargado del App Store Marketing Tools
   en es-MX, version negra — la preferida de sus guidelines). Hasta hoy esto era una tarjeta
   del sitio con el texto «App Store» dentro, porque no habia arte oficial: se veia como un
   div provisional al lado de un badge de verdad, y era lo mas flojo del cierre.
   Ahora el badge ES el badge: no va dentro de una caja, ni con borde, ni con fondo, ni con
   radio propio — sus guidelines prohiben modificarlo, recolorearlo o enmarcarlo. Lo unico que
   le toca decidir al sitio es el TAMAÑO y el AIRE, y los dos los fija Apple: minimo 40 px de
   alto en pantalla (que es justo el alto nativo del SVG, 119.66 x 40) y un cuarto de esa
   altura de aire libre alrededor — esos son los 10 px de padding, no una decision estetica.
   El realce al pasar el cursor mueve el enlace, nunca el arte. */
.store{ display:inline-block; padding:10px; line-height:0;
        transition:transform .18s ease, opacity .18s ease; }
.store:hover{ text-decoration:none; transform:translateY(-2px); opacity:.86; }
/* width/height van tambien en el HTML: sin ellos el badge llega tarde y mueve el cierre.
   El sitio esta en CLS 0 y esa cifra no se negocia. */
.store img{ height:40px; width:auto; display:block; }

/* ── Pie ── */
footer{ border-top:1px solid var(--line); padding:44px 0 56px; color:var(--dim); font-size:.9375rem; }
footer .cols{ display:grid; gap:26px; }
@media(min-width:720px){ footer .cols{ grid-template-columns:1.4fr 1fr 1fr; } }
footer a{ color:var(--dim); }
footer a:hover{ color:var(--text); }
footer .flist{ display:flex; flex-direction:column; gap:9px; }
footer .ftitle{ font-weight:600; color:var(--text); margin-bottom:4px; font-size:.9375rem; }
footer .legal{ margin-top:32px; padding-top:22px; border-top:1px solid var(--line); font-size:.875rem; }

/* utilidades usadas por las páginas (sin style= inline) */
.tight{ padding-top:0; }

/* ══ Ritmo de escenas ══════════════════════════════════════════════════════
   El sitio tenia 12 secciones y UNA sola con fondo propio: el ojo nunca
   cambiaba de escena. Se agrupan por tema —no una por una— con los tonos que
   ya estan en :root; no hay paleta nueva ni dependencia nueva.
   Papel (promesa) → hundido (como funciona) → papel (para quien) → hundido (lo
   que hace por ti) → verde .trust (confianza) → papel (objeciones) → hundido
   (cierre). Ningun par de tonos iguales se toca, asi que no hace falta filo.

   NUNCA usar --panel como fondo de seccion: es el color de las tarjetas
   (.card, .oficio, .conv-lado, .ciclo-vista, .paso, .ia-col, .plan...), asi
   que una banda blanca las hace desaparecer y solo sobrevive su filo de 1 px.
   El ritmo solo puede usar tonos que NO sean el color de las tarjetas.

   Una .tight que ABRE banda recupera su aire de arriba: .tight existe para
   pegarse a la seccion anterior, y una banda de color que arranca pegada al
   texto de arriba se lee como un error de maquetado, no como una escena.

   flow-root en la .tight que CONTINUA una banda: con padding-top:0 el margen
   del primer hijo se escapa por arriba (colapso de margenes) y pintaba una
   franja de 14 px del papel de fondo por DENTRO de la banda. El alto total no
   cambia; el margen pasa a vivir dentro. */
.escena-hundida{ background:var(--panel2); }
.abre-escena.tight{ padding-top:64px; }
.escena-hundida.tight:not(.abre-escena){ display:flow-root; }

/* ══ El aviso semanal, hecho objeto ════════════════════════════════════════
   Que hecho del producto ensena: que el mensaje que recibe el cliente sale de
   restar dos semanas que el mismo registro, no de interpretar. El copy de esa
   seccion lo afirma («el mensaje es el dato, no una porra generica»); aqui se
   ve, y el lector puede hacer la resta.
   El estado en reposo es el objeto COMPLETO: las dos semanas, la flecha, el
   aviso y la resta. La animacion solo los presenta en orden, y solo cuando
   .anima esta puesta —o sea nunca sin JS, con un init roto, con la pestana en
   segundo plano ni con reduced-motion—. Es transform y opacity: CLS 0. */
.aviso-obj{ margin:0 0 34px; display:grid; gap:13px; justify-items:center; }
.ao-semanas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
             width:100%; max-width:540px; }
.ao-sem{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
         padding:13px 15px; display:grid; gap:3px; }
.ao-hoy{ border-color:var(--accent); box-shadow:var(--sh-sm); }
.ao-et{ font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.ao-n{ font-family:var(--font-display); font-size:1.3125rem; font-weight:700; line-height:1.15; }
.ao-hoy .ao-n{ color:var(--accent2); }
.ao-s{ font-size:.8125rem; color:var(--dim); }
.ao-flecha svg{ display:block; width:19px; height:19px; fill:none; stroke:var(--dim);
                stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ao-push{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
          box-shadow:var(--sh-md); padding:13px 15px; width:100%; max-width:540px; }
.ao-cab{ display:flex; align-items:center; gap:7px; font-size:.6875rem; font-weight:600;
         letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-bottom:5px; }
.ao-punto{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.ao-txt{ margin:0; font-weight:600; }
.ao-txt b{ color:var(--accent2); font-weight:700; }
.ao-pie{ margin:0; font-size:.8125rem; color:var(--dim); text-align:center; }
.ao-pie b{ color:var(--accent2); }

@keyframes ao-entra{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
html.anima .aviso-obj.revelado > *{ animation:ao-entra .45s cubic-bezier(.22,.8,.3,1) both; }
html.anima .aviso-obj.revelado > :nth-child(2){ animation-delay:.22s; }
html.anima .aviso-obj.revelado > :nth-child(3){ animation-delay:.36s; }
html.anima .aviso-obj.revelado > :nth-child(4){ animation-delay:.62s; }

/* ══ Numeros que se cuentan al entrar ══════════════════════════════════════
   `tabular-nums` para que los digitos no bailen mientras corre la cuenta: en
   la mayoria de tipografias el 1 es mas angosto que el 8, y sin esto el numero
   tiembla. El ancho ademas se congela en JS antes de tocar el texto, porque
   pasar de "0" a "2,480" cambia el numero de caracteres y moveria la linea. */
[data-cuenta]{ font-variant-numeric:tabular-nums; }

/* ══ La banda de hechos entra escalonada ═══════════════════════════════════
   Aqui NO se cuentan los numeros a proposito: son 5, 4, 1 y 0, y contar cifras
   de un digito se lee como un parpadeo, no como un contador. Lo que da vida es
   que los cuatro hechos lleguen uno detras de otro. Reusa `ao-entra`: no hace
   falta un keyframe nuevo. */
html.anima .hechos-obj.revelado .hecho{ animation:ao-entra .5s cubic-bezier(.22,.8,.3,1) both; }
html.anima .hechos-obj.revelado .hecho:nth-child(2){ animation-delay:.09s; }
html.anima .hechos-obj.revelado .hecho:nth-child(3){ animation-delay:.18s; }
html.anima .hechos-obj.revelado .hecho:nth-child(4){ animation-delay:.27s; }

/* ══ La grafica de las 12 semanas (vive en el telefono del cliente) ════════
   Que hecho ensena: que el valor de Lyva no esta el dia que entregas el plan,
   sino en los meses siguientes. Cada barra es una semana que el cliente
   registro. Es el dato que la app YA pinta en Progreso, no una infografia.
   Se anima con `scaleY` y no con `height` para que lo haga el compositor y no
   dispare recalculos de diseno — mismo criterio que la grafica del hero.
   Estuvo un rato tambien en el paso 4 del ciclo y se quito el 10-sep: repetia
   lo que enseñan los dos telefonos 400 px mas abajo, y ademas el ciclo se
   llama «Una semana con Lyva» — los meses nunca fueron suyos. */
.lapso-graf{ display:flex; align-items:flex-end; gap:5px; height:120px; margin:2px 0 7px; }
.lapso-graf span{ flex:1; height:var(--h); border-radius:5px 5px 2px 2px; background:var(--accent-soft); }
/* Las tres ultimas semanas en verde pleno: el presente pesa mas que el historial. */
.lapso-graf span:nth-last-child(-n+3){ background:var(--accent); }
/* Sin `.anima` las barras estan puestas y quietas: el panel se lee igual. */
html.anima .lapso-graf span{ transform:scaleY(0); transform-origin:bottom;
                             animation:lapso-sube .42s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--d); }
@keyframes lapso-sube{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* ══ Los avisos del lunes, llegando uno a uno (paso 5) ═════════════════════
   No es adorno: asi es como llegan de verdad, por excepcion y en orden de
   urgencia. El ambar primero porque es el que pide accion. */
html.anima .escalona > *{ animation:ao-entra .42s cubic-bezier(.22,.8,.3,1) both; }
html.anima .escalona > :nth-child(1){ animation-delay:.10s; }
html.anima .escalona > :nth-child(2){ animation-delay:.42s; }
html.anima .escalona > :nth-child(3){ animation-delay:.74s; }

/* ══ Los tres meses siguientes, en dos telefonos ══════════════════════════
   Remate del antes-y-despues. El archivo convertido no es el argumento; el
   argumento es lo que pasa DESPUES, y eso solo se ve con el tiempo corriendo.
   Se usa el marco `.phone` del hero a proposito: el visitante ya lo reconoce
   como «la app», asi que no hay que explicarle que esta viendo. */
.meses{ display:grid; gap:38px; justify-items:center; margin-top:38px; }
@media(min-width:860px){ .meses{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px; align-items:start; } }
.meses-uno{ margin:0; display:grid; justify-items:center; gap:14px; width:100%; }
.meses-et{ display:flex; align-items:center; gap:9px; font-size:.875rem; color:var(--dim); font-weight:600; }
.meses-quien{ font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
              color:var(--accent2); background:var(--accent-soft); border-radius:999px; padding:4px 10px; }
.meses-tu{ color:var(--amber-ink); background:var(--amber-soft); }   /* O4: --amber aqui media 4.48 */
/* El cuerpo del telefono en estas dos pantallas no rota escenas: es contenido
   fijo, asi que va en flujo normal y no en la capa absoluta de `.ph-escena`. */
.meses-cuerpo{ display:flex; flex-direction:column; }
.meses-n{ font-family:var(--font-display); font-size:1.8125rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-top:2px; }
.meses-delta{ font-size:.8125rem; font-weight:700; color:var(--accent2); margin-bottom:10px; }
.meses-t{ font-family:var(--font-display); font-size:1.1875rem; font-weight:700; letter-spacing:-.02em; line-height:1.25; margin:2px 0 12px; }
.meses .lapso-graf{ height:96px; gap:4px; }
.meses .aviso{ margin-top:8px; padding:9px 11px; font-size:.8125rem; }
.meses .aviso .k{ font-size:.625rem; margin-bottom:2px; }
.meses .ph-card{ margin-top:9px; padding:11px 13px; }
.meses .ph-card .t{ font-size:.8125rem; }
.meses .ph-card .s{ font-size:.75rem; }
/* La pantalla del profesional se queda medio vacia A PROPOSITO: ese es el
   argumento. Esta linea lo dice en vez de dejar que parezca un hueco. */
.meses-fin{ margin-top:14px; font-size:.75rem; color:var(--dim); }
.brand-sm{ font-size:1.1875rem; }
.tagline{ margin-top:10px; max-width:34ch; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
          clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* En el hero los badges de tienda se alinean con el texto, no al centro. */
.hero .stores{ justify-content:flex-start; margin-top:20px; }

/* ── Para quién es ── */
.oficios{ display:grid; gap:16px; }
@media(min-width:640px){ .oficios{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .oficios{ grid-template-columns:repeat(4,1fr); } }
.oficio{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px;
         box-shadow:var(--sh-reposo); }
.oficio h3{ margin-bottom:8px; }
.oficio p{ color:var(--dim); font-size:.9375rem; }
.oficio .mide{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
               font-size:.875rem; color:var(--accent2); font-weight:600; }
/* Enlace a la página de cada oficio (23-sep): la portada es la que más peso pasa a Google y el
   pie solo no bastaba. Subrayado siempre: sin él se confundía con «Mide…», que tiene el mismo
   verde. Tarjeta en columna con «Mide…» al fondo: con textos de distinto largo, los enlaces
   quedaban a alturas distintas de una tarjeta a otra. */
.oficio{ display:flex; flex-direction:column; }
.oficio .mide{ margin-top:auto; }
.oficio p{ margin-bottom:14px; }
.oficio-link{ align-self:flex-start; margin-top:10px; font-size:.875rem; font-weight:600; color:var(--accent2);
              text-decoration:underline; text-underline-offset:3px; }
.oficio-link:hover{ color:var(--accent); }

/* ── Qué hace y qué no hace la IA ── */
.ia{ display:grid; gap:18px; margin-top:34px; }
@media(min-width:780px){ .ia{ grid-template-columns:1fr 1fr; } }
.ia-col{ border-radius:var(--r); padding:26px 24px; border:1px solid var(--line); background:var(--panel); }
.ia-col.si{ background:var(--accent-soft); border-color:#d5e9de; }
.ia-col h3{ margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.ia-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.ia-col li{ position:relative; padding-left:26px; font-size:1rem; color:var(--dim); line-height:1.5; }
.ia-col li::before{ position:absolute; left:0; top:0; font-weight:700; }
.ia-col.si li{ color:#25503c; }
.ia-col.si li::before{ content:"✓"; color:var(--accent2); }
/* Columna derecha: "lo que sigue siendo tuyo" son cosas que CONSERVAS, no negaciones.
   Una ✕ roja ahí comunica lo contrario de lo que dice el título. */
.ia-col.no li::before{ content:"✓"; color:var(--text); }
.ia-col.no li strong{ color:var(--text); }

/* ── Preguntas frecuentes ── */
.faq{ max-width:760px; margin-top:8px; }
/* A partir de 900 px las preguntas se parten en dos: el titular a la izquierda y el acordeon
   a la derecha. MEDIDO antes de decidir — en un viewport de 1512 la columna de contenido son
   1040 px y `.faq` topaba en 760, asi que sobraban 280 a la derecha (el 27%, no media pantalla
   como decia la auditoria). Con el reparto en dos no sobra ninguno.
   Es la MISMA receta que la banda de confianza (.trust, :270): mismo corte de 900 px, mismo
   reparto .85/1.15 y mismo hueco de 56. Se repite, no se inventa otra: si algun dia ese
   reparto cambia, cambian los dos a la vez y la pagina sigue leyendose como una sola cosa.
   El hueco entre titular y preguntas lo da el `gap`, por eso el margen de `.section-head` se
   va: con los dos puestos, el acordeon arrancaria 40 px por debajo del titular sin motivo. */
@media(min-width:900px){
  #preguntas .wrap{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
                    gap:56px; align-items:start; }
  #preguntas .section-head{ margin-bottom:0; }
  #preguntas .faq{ max-width:none; margin-top:0; }
}
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:20px 34px 20px 0; position:relative;
              font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
              letter-spacing:-.015em; line-height:1.35; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:6px; top:26px; width:9px; height:9px;
                     border-right:2px solid var(--dim); border-bottom:2px solid var(--dim);
                     transform:rotate(45deg); transition:transform .18s ease; }
.faq details[open] summary::after{ transform:rotate(-135deg); top:30px; }
.faq details p{ color:var(--dim); padding:0 0 22px; max-width:66ch; font-size:1rem; }
.faq details p + p{ padding-top:0; margin-top:-10px; }

/* Los enlaces dentro de un párrafo llevan subrayado, no solo color: no todo el mundo
   distingue el verde del texto (Lighthouse: link-in-text-block). */
p a, li a, .faq details a{ text-decoration:underline; text-underline-offset:2px;
                           text-decoration-thickness:1px; }
p a:hover, li a:hover{ text-decoration-thickness:2px; }
footer .flist a{ text-decoration:none; }
.soporte-cta{ margin-top:18px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Pulido premium (8-sep). Tres reglas al escribir esto:
   1. Todo movimiento va en transform/opacity — nada que provoque reflow ni CLS.
   2. Todo respeta prefers-reduced-motion (la regla global de arriba lo apaga).
   3. Cero recursos externos: los degradados y texturas son CSS, no imágenes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fondo con profundidad: dos halos verdes muy suaves, fijos, detrás de todo.
   Da sensación de material sin pesar un solo kilobyte de imagen. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 420px at 78% -8%, rgba(21,128,79,.07), transparent 70%),
    radial-gradient(520px 380px at -10% 12%, rgba(21,128,79,.05), transparent 70%);
}

/* Aparición al entrar en pantalla — mejora progresiva de verdad.
   El estado en reposo es VISIBLE. Solo se esconde cuando initReveal() ya corrió
   y puso .anima en <html>. Así, si el JS no llega, revienta en un init anterior,
   no hay IntersectionObserver o el usuario pidió reduced-motion, el contenido se
   lee igual. Nunca al revés: hasta el 9-sep-2026 estas reglas escondían 7 bloques
   del index y solo el JS los devolvía. Una animación de entrada recorre un estado
   que ya es válido; jamás lo sustituye. */
.reveal{ opacity:1; transform:none; }
html.anima .reveal{ opacity:0; transform:translateY(14px); }
html.anima .revelado{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1); }
@media (prefers-reduced-motion:reduce){ html.anima .reveal{ opacity:1; transform:none; } }

/* Tarjetas con más cuerpo y una reacción discreta al pasar el cursor. */
.card{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover{ transform:translateY(-2px); box-shadow:var(--sh-alza); border-color:#e2ded6; }
.oficio{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.oficio:hover{ transform:translateY(-2px); box-shadow:var(--sh-alza); border-color:var(--accent); }

/* ── Franja de hechos ──────────────────────────────────────────────────────
   La competencia pone "+14,000 usuarios". Nosotros no tenemos esos números y
   no vamos a inventarlos: esta franja dice hechos comprobables del producto. */
.hechos{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
         background:linear-gradient(180deg, #fff 0%, var(--bg) 100%); }
.hechos .wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px 18px; padding-top:26px; padding-bottom:26px; }
@media(min-width:760px){ .hechos .wrap{ grid-template-columns:repeat(4,1fr); gap:20px; } }
.hecho{ text-align:center; }
.hecho .n{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.875rem,5vw,2.5rem);
           letter-spacing:-.03em; color:var(--accent2); line-height:1; }
.hecho .l{ font-size:.875rem; color:var(--dim); margin-top:8px; line-height:1.35; }

/* ── Conversor: lo que subes → lo que ve tu cliente ────────────────────────
   La pieza que enseña el producto sin necesitar la demo real (que es Fase 3). */
.conv{ display:grid; gap:16px; align-items:stretch; }
@media(min-width:900px){ .conv{ grid-template-columns:1fr 54px 1fr; gap:0; } }
.conv-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.tab{ font-family:var(--font-body); font-size:.9375rem; font-weight:600; color:var(--dim);
      background:var(--panel); border:1px solid var(--line); border-radius:999px;
      padding:9px 16px; cursor:pointer; transition:all .16s ease; }
.tab:hover{ border-color:var(--dim); color:var(--text); }
.tab[aria-selected="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
.conv-lado{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
            padding:20px; box-shadow:var(--sh-sm); min-height:280px; }
.conv-et{ font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
          color:var(--dim); margin-bottom:14px; }
.conv-flecha{ display:flex; align-items:center; justify-content:center; color:var(--accent); }
.conv-flecha svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2;
                  stroke-linecap:round; stroke-linejoin:round; transform:rotate(90deg); }
@media(min-width:900px){ .conv-flecha svg{ transform:none; } }
/* Lo que sube el profesional: papel real, monoespaciado, un poco desordenado. */
.doc{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8125rem;
      line-height:1.7; color:#4b5852; white-space:pre-wrap; word-break:break-word; }
.doc .h{ color:var(--text); font-weight:700; }
.hoja{ width:100%; border-collapse:collapse; font-size:.75rem; min-width:0; }
.hoja th, .hoja td{ border:1px solid #dfdcd4; padding:5px 7px; text-align:left; font-weight:400; color:#4b5852; }
.hoja th{ background:var(--panel2); font-weight:600; font-size:.6875rem; color:var(--dim); }
.chat{ display:flex; flex-direction:column; gap:8px; }
.chat .b{ background:var(--panel2); border-radius:12px 12px 12px 4px; padding:9px 12px;
          font-size:.8125rem; max-width:92%; color:#4b5852; }
.conv-salida{ opacity:0; animation:entra .45s ease forwards; }

/* La ilustración del documento y su gemela dentro de la tarjeta del cliente. Es el mismo
   dibujo en los dos lados a propósito: lo que se está enseñando es que la imagen viajó al
   ejercicio correcto, no a otro. Trazo, no relleno: pesa nada y se ve bien en los dos temas. */
.doc-img{ margin:10px 0; padding:10px 12px; border:1px dashed var(--line); border-radius:var(--r-ctl);
  background:var(--bg); display:flex; align-items:center; gap:12px; }
.doc-img svg{ width:96px; height:60px; flex:none; stroke:var(--dim); fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.doc-img figcaption{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.75rem; color:var(--dim); }
.ph-img{ display:inline-block; margin-top:9px; padding:6px 10px; border-radius:9px; background:var(--bg); line-height:0; }

/* El video DENTRO de la tarjeta del ejercicio, en el teléfono del hero. El hueco reserva su
   sitio antes de cargar (aspect-ratio), así que la pantalla no salta cuando entra el video —
   el mismo cuidado que costó el CLS de /prueba. */
.ph-video{ margin-top:9px; border-radius:10px; overflow:hidden; background:#1b2420;
  aspect-ratio:16/9; }
.ph-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.ph-img svg{ width:84px; height:52px; stroke:var(--accent); fill:none;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:640px){ .doc-img svg{ width:76px; height:48px; } }
@keyframes entra{ to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .conv-salida{ opacity:1; animation:none; } }

/* Serie que se va marcando sola en la maqueta del teléfono del hero. */
.ph-set{ transition:background .35s ease, color .35s ease; }

/* El logo también lleva al inicio desde el pie (no solo desde la cabecera). */
footer .brand{ color:var(--text); text-decoration:none; display:inline-block; }
footer .brand:hover{ text-decoration:none; color:var(--accent2); }

/* ── Menú desplegable ──────────────────────────────────────────────────────
   Es un <details> nativo a propósito: se abre y se cierra SIN JavaScript, lo
   entiende el teclado y los lectores de pantalla lo anuncian solos. El JS solo
   añade el lujo (cerrar con Escape o al tocar fuera). En escritorio desaparece,
   porque ahí caben todos los enlaces. */
.menu{ position:relative; }
/* 44×44 es el mínimo cómodo para un dedo (Apple, Google y WCAG 2.5.5 coinciden).
   Con 42 el botón se falla al tocarlo desde un teléfono en movimiento. */
.menu summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
               justify-content:center; width:44px; height:44px; border-radius:var(--r-ctl);
               border:1px solid var(--line); background:var(--panel); }
.menu summary::-webkit-details-marker{ display:none; }
.menu summary:hover{ border-color:var(--dim); }
.menu summary svg{ width:20px; height:20px; stroke:var(--text); fill:none; stroke-width:2; stroke-linecap:round; }
.menu[open] summary{ border-color:var(--accent); background:var(--accent-soft); }
.menu-panel{ position:absolute; right:0; top:calc(100% + 10px); min-width:230px; z-index:30;
             background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
             box-shadow:var(--sh-md); padding:8px; display:flex; flex-direction:column;
             animation:menuEntra .16s ease; }
@keyframes menuEntra{ from{ opacity:0; transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce){ .menu-panel{ animation:none; } }
.menu-panel a{ padding:12px 14px; border-radius:var(--r-ctl); color:var(--text); font-weight:500;
               font-size:1rem; text-decoration:none; }
.menu-panel a:hover{ background:var(--panel2); text-decoration:none; }
.menu-panel a.destacado{ background:var(--accent); color:#fff; font-weight:600;
                         text-align:center; margin-top:6px; }
.menu-panel a.destacado:hover{ background:var(--accent2); }
@media(min-width:760px){ .menu{ display:none; } }
/* En móvil el CTA principal vive dentro del menú: fuera solo el logo y el botón. */
@media(max-width:759px){ .top nav .lnk{ display:none; } }

/* El encabezado se afina al bajar: menos alto, más sombra. Detalle de acabado. */
.top{ transition:box-shadow .2s ease, background .2s ease; }
.top .wrap{ transition:height .2s ease; }
/* Sin bajar, la cabecera es transparente de verdad: el 92% de papel sobre el papel del hero se
   veía como una banda un tono más clara. El fondo, la línea y la sombra llegan juntos al bajar. */
.top:not(.bajado){ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.top.bajado{ border-bottom-color:var(--line); box-shadow:0 8px 24px rgba(27,36,32,.05); }
.top.bajado .wrap{ height:62px; }
.top.bajado .brand img{ width:34px; }
.top.bajado .brand{ font-size:1.4375rem; }
.brand img, .brand{ transition:width .2s ease, font-size .2s ease, transform .25s ease; }

/* Los tres compromisos de D5, en la franja de confianza. */
.garantias{ list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.garantias li{ position:relative; padding-left:28px; color:#25503c; font-size:1rem; line-height:1.5; }
.garantias li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:700; color:var(--accent2); }
.garantias strong{ color:#173d2c; }

/* ═══ Referencia Popmenu (8-sep), traducida al lenguaje de Lyva ═══════════════
   Dos ideas suyas que sí encajan: el producto en el centro con cosas reales
   pasando alrededor, y una historia que avanza sola. Nada de su estética
   (fondo negro, degradados): aquí todo sigue en verde sobre papel. */

/* ── Hero: sistema vivo ── */
.hero-visual{ position:relative; width:290px; margin:0 auto; }
@media(min-width:900px){
  .hero-visual{ width:100%; max-width:540px; min-height:680px; display:flex;
                align-items:center; justify-content:center; }
}
.flot{ position:absolute; z-index:2; width:188px; background:var(--panel);
       border:1px solid var(--line); border-radius:var(--r); padding:11px 13px;
       /* La tarjeta cae 22 px sobre el marco del telefono (ver .flot-1..4). El marco
          es casi negro, asi que una sombra oscura ahi es INVISIBLE: medido, el pixel
          pegado al borde de la tarjeta valia (27,27,29) — el color base del marco. Sin
          separacion el bisel se ve amputado y la tarjeta parece recortar el telefono en
          vez de flotar encima; se nota sobre todo en pantallas sin Retina, donde el
          borde de 1 px no alcanza a hacer de labio. El halo del color del papel resuelve
          las dos cosas: sobre el marco abre un hueco claro que lee como oclusion, y
          sobre el papel —y sobre la pantalla de la app, que es del mismo color— es
          invisible. Va primero para quedar encima de las sombras difusas.
          Cambio local a .flot: --sh-md lo usan 17 reglas mas y no se toca. */
       box-shadow:0 0 0 5px var(--bg),
                  0 1px 2px rgba(27,36,32,.05),
                  0 14px 34px rgba(27,36,32,.16);
       font-size:.8125rem; line-height:1.35;
       animation:flota 6.5s ease-in-out infinite; display:none; }
/* 1240 y no 900: a 900 las tarjetas ya se pintan pero NO caben —su borde
   derecho cae fuera del viewport y la pagina entera se puede arrastrar de
   lado—. Medido el 10-sep: 103 px de desborde a 900, 48 a 1100, 8 a 1180 y 0
   a 1280. Se muestran solo donde caben. */
@media(min-width:1240px){ .flot{ display:block; } }
.flot .k{ font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
          color:var(--dim); margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.flot .k::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.flot .v{ font-weight:600; color:var(--text); }
.flot .v b{ color:var(--accent2); font-weight:700; }
/* Posicionadas respecto al CENTRO del contenedor (donde está el teléfono), no a su
   ancho, que cambia con el viewport. El teléfono mide 300 px: su borde queda a
   150 px del centro. La tarjeta (188 px) se detiene 22 px dentro de ese borde —
   sobre el marco y el margen interior de la pantalla, nunca sobre el texto. */
.flot-1{ top:92px;     left:calc(50% - 316px);  animation-delay:0s; }
.flot-2{ top:212px;    right:calc(50% - 316px); animation-delay:-2.2s; }
.flot-3{ bottom:196px; left:calc(50% - 316px);  animation-delay:-4.1s; }
.flot-4{ bottom:96px;  right:calc(50% - 316px); animation-delay:-1.3s; }
@keyframes flota{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ── Vida en reposo del teléfono del hero (10-sep) ──
   Medido en get.popmenu.com: su marco de teléfono flota a 4s infinito, y esa capa
   —la que sigue moviéndose cuando el visitante NO está haciendo nada— es la que hace
   que una página se sienta viva. El nuestro estaba completamente quieto, y las .flot
   que sí flotan solo se pintan a partir de 1240px: por debajo de eso, que es la mayoría
   de las visitas, no se movía absolutamente nada.
   7.5s y no 6.5s A PROPÓSITO: con el mismo periodo que las tarjetas, teléfono y tarjetas
   suben y bajan juntos y se leen como un bloque rígido. Con periodos distintos la fase
   deriva y se lee como objetos separados flotando.
   Amplitud 5px contra los 8px de la tarjeta: el marco es mucho más grande y el mismo
   recorrido se percibe más.
   SOLO el teléfono del HERO. Los dos de «los meses» y el de /prueba muestran datos que
   se leen —doce semanas, tres renglones del lunes, la rutina que acabas de subir— y ahí
   el movimiento es ruido, no vida. La regla global de prefers-reduced-motion (arriba) lo
   apaga sola. Es transform puro: no toca layout, no suma CLS. */
.hero .phone{ animation:respira 7.5s ease-in-out infinite; }
@keyframes respira{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (prefers-reduced-motion:reduce){ .flot{ animation:none; } }

/* ── Ciclo: una semana con Lyva ── */
.ciclo{ display:grid; gap:22px; }
@media(min-width:900px){ .ciclo{ grid-template-columns:.92fr 1.08fr; gap:40px; align-items:start; } }
.pasos{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.paso{ position:relative; overflow:hidden; display:flex; gap:14px; align-items:flex-start;
       width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
       padding:14px 16px; border-radius:var(--r); border:1px solid transparent; background:transparent;
       transition:background .18s ease, border-color .18s ease; }
.paso:hover{ background:var(--panel); border-color:var(--line); }
.paso[aria-selected="true"]{ background:var(--panel); border-color:var(--line); box-shadow:var(--sh-sm); }
.paso .n{ flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line);
          display:flex; align-items:center; justify-content:center;
          font-family:var(--font-display); font-weight:700; font-size:.8125rem; color:var(--dim);
          transition:background .18s ease, color .18s ease, border-color .18s ease; }
.paso[aria-selected="true"] .n{ background:var(--accent); border-color:var(--accent); color:#fff; }
.paso .t{ display:block; font-weight:600; font-size:1rem; }
/* Las cinco descripciones se ven SIEMPRE, tambien con JS. Antes era un
   acordeon —solo la del paso activo— y cada avance automatico cerraba una y
   abria otra: la lista cambiaba de alto sola cada 5 s y arrastraba todo lo de
   abajo. En movil eso daba CLS 0.15, por encima del umbral de Google, y no se
   veia en Lighthouse porque solo pasa si te quedas mirando la seccion.
   El paso activo se sigue distinguiendo por el circulo verde, el fondo blanco
   y la barra que se llena; el ciclo sigue avanzando solo. Se mueve el foco, no
   la pagina. Y de paso se leen los cinco pasos de un vistazo, en vez de esperar
   25 s a que los enseñe de uno en uno. */
.paso .d{ display:block; color:var(--dim); font-size:.875rem; margin-top:3px; }
/* La barra va METIDA 16 px por lado y con los extremos redondeados: a ras de borde
   cortaba las esquinas de la tarjeta (radio 14) y se leia como un filo partido, no
   como un progreso. Y se llena con `scaleX`, no con `width`: va al compositor, no
   dispara reflow en cada fotograma. */
.paso .barra{ position:absolute; left:16px; right:16px; bottom:0; height:2px;
              border-radius:999px; background:var(--accent);
              transform:scaleX(0); transform-origin:left center; }
.paso[aria-selected="true"] .barra{ animation:llena var(--dur, 5s) linear forwards; }
.ciclo.pausado .paso .barra{ animation-play-state:paused; }
@keyframes llena{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .paso .barra{ display:none; } }
/* Ya no es una tarjeta: es el telefono. El cuadro blanco competia con el propio aparato
   —dos superficies, dos radios y dos sombras para ensenar una sola cosa— y encima obligaba a
   dibujar a mano lo que la app ya hace. Se queda sin fondo, sin filo y sin sombra: el marco
   del telefono ya es el contenedor. */
.ciclo-vista{ display:flex; flex-direction:column; align-items:center; }
.ciclo-vista .phone{ max-width:264px; }   /* un pelo menor que el del hero: aqui comparte fila */
/* Dos cosas distintas. El ancho (32ch) es para que el pie no se estire mas que el
   telefono y no parta dejando una palabra sola. La ALTURA es lo que evita el tiron:
   los cinco pies miden entre 34 y 55 caracteres, asi que unos caben en una linea y
   otros en dos, y el bloque cambiaba de alto en cada paso empujando el control.
   Medir con `ch` no sirve para adivinarlo —`ch` es el ancho del 0, mas gordo que una
   letra media, y a 32ch los pasos 3 y 5 seguian cayendo en una sola linea (medido)—.
   Asi que se reserva el alto de DOS lineas y el texto se apoya arriba: el primer
   renglon cae siempre en el mismo sitio y el alto no se mueve en toda la vuelta. */
.ciclo-vista .clip-pie{ text-align:center; margin-top:16px; max-width:32ch;
                        min-height:3.2em; }   /* 2 x line-height (1.6) */
.ciclo-vista > *{ animation:entra .35s ease; }

/* El control iba pegado al borde izquierdo de su columna (540 px) mientras el
   telefono, de 264, va centrado: el conjunto quedaba 101 px fuera del eje y se leia
   como algo que sobro. Va centrado con el telefono, y a 28 px —no a 14— porque el
   pie PERTENECE al telefono y el control no: mismo aire para dos relaciones
   distintas es lo que hacia que los tres bloques parecieran sueltos. */
.ciclo-ctrl{ display:flex; justify-content:center; align-items:center; margin-top:28px; }
/* `min-width` al ancho de «Reanudar»: sin el, el boton se encoge al cambiar de etiqueta
   y el control da un brinco lateral justo bajo el dedo que lo acaba de pulsar. */
.ciclo-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
            min-width:112px; font:inherit; font-size:.8125rem;
            font-weight:600; color:var(--dim); background:transparent; border:1px solid transparent;
            border-radius:999px; padding:8px 14px; cursor:pointer;
            transition:background .18s ease, border-color .18s ease, color .18s ease; }
/* La pastilla mide 39 de alto, que es lo que pide el diseno, pero el minimo tactil
   comodo son 44: el pseudo-elemento estira el area que responde al dedo 3 px por arriba
   y 3 por abajo sin tocar como se ve. */
.ciclo-btn{ position:relative; }
.ciclo-btn::after{ content:""; position:absolute; inset:-3px 0; }
.ciclo-btn:hover{ background:var(--panel); border-color:var(--line); color:var(--text); }
.ciclo-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ciclo-btn .ic{ width:11px; height:11px; fill:currentColor; flex-shrink:0; }
.ciclo-btn .ic-r{ display:none; }
.ciclo-btn[aria-pressed="true"] .ic-p{ display:none; }
.ciclo-btn[aria-pressed="true"] .ic-r{ display:block; }

/* Piezas de las vistas del ciclo */
.aviso{ border:1px solid var(--line); border-radius:var(--r-ctl); padding:12px 14px; margin-top:10px; font-size:.875rem; }
.aviso .k{ font-size:.6875rem; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); font-weight:600; margin-bottom:3px; }
.aviso.pro{ border-color:#eddcb8; background:var(--amber-soft); }

/* ══ /prueba — la demo pública (tarea 3.2) ═══════════════════════════════════
   Reutiliza el teléfono del hero a propósito: lo que el profesional ve aquí es
   la MISMA pantalla que representa la app del cliente en la portada, ahora con
   sus ejercicios dentro. Si el teléfono cambia allá, cambia aquí solo. */
.prueba-head{ max-width:760px; margin:0 auto; text-align:center; }
/* .hero h1 va a 15ch, que aquí partía el titular en una palabra por línea. */
.prueba-head h1{ max-width:22ch; margin:0 auto; }
.prueba-head .lead{ max-width:50ch; margin:18px auto 0; }
/* min-height: el alto de la zona de carga. Si la demo está apagada, la caja de
   "no disponible" ocupa menos y el pie subiría de golpe al volver el fetch. */
.prueba-wrap{ max-width:760px; min-height:360px; }

/* Zona de carga */
.dropzone{ background:var(--panel); border:2px dashed #d9d5cc; border-radius:var(--r);
           padding:40px 24px; text-align:center; transition:border-color .18s, background .18s; }
.dropzone.sobre{ border-color:var(--accent); background:var(--accent-soft); }
.dz-ico{ width:34px; height:34px; margin:0 auto 14px; display:block; stroke:var(--accent2);
         fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dz-t{ font-family:var(--font-display); font-weight:700; font-size:1.1875rem; letter-spacing:-.015em; }
.dz-s{ color:var(--dim); font-size:.9375rem; margin-top:7px; }
.dz-acciones{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; }

/* Pegar el texto */
.pegar{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
        padding:20px 18px; margin-top:16px; }
.pegar label{ font-weight:600; font-size:.9375rem; display:block; margin-bottom:10px; }
.pegar textarea{ width:100%; font-family:var(--font-body); font-size:.9375rem; line-height:1.5;
                 color:var(--text); background:var(--bg); border:1px solid var(--line);
                 border-radius:var(--r-ctl); padding:12px 13px; resize:vertical; }
.pegar textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }

/* La nota de confianza: visible, no en letra chica */
.confianza{ display:flex; gap:10px; align-items:flex-start; margin-top:20px;
            color:var(--dim); font-size:.9375rem; line-height:1.5; }
.confianza svg{ flex:none; width:19px; height:19px; margin-top:2px; stroke:var(--accent2);
                fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Leyendo / error: la misma caja centrada */
.estado-caja{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
              padding:44px 24px; text-align:center; box-shadow:var(--sh-sm); }
.estado-caja .lead{ max-width:48ch; margin:12px auto 0; }
.h3{ font-family:var(--font-display); font-size:1.375rem; font-weight:700; letter-spacing:-.02em; }
.h4{ font-family:var(--font-display); font-size:1rem; font-weight:700; letter-spacing:-.015em; }

.cargando{ display:flex; gap:7px; justify-content:center; margin-bottom:20px; }
.cargando span{ width:9px; height:9px; border-radius:50%; background:var(--accent);
                animation:latido 1.1s ease-in-out infinite; }
.cargando span:nth-child(2){ animation-delay:.16s; }
.cargando span:nth-child(3){ animation-delay:.32s; }
@keyframes latido{ 0%,80%,100%{ transform:scale(.62); opacity:.4; } 40%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .cargando span{ animation:none; opacity:1; transform:none; } }

/* Resultado. En móvil el orden es el del HTML —título, teléfono, texto— porque lo
   primero que tiene que ver el profesional es la pantalla, no los botones. En
   escritorio las áreas lo recolocan sin tocar el HTML. */
.res-grid{ display:grid; gap:28px; }
.res-titulo{ margin-bottom:-6px; }
@media(min-width:900px){
  .res-grid{ grid-template-columns:minmax(0,1fr) 320px; column-gap:52px; row-gap:22px;
             align-items:start; grid-template-areas:"titulo visual" "texto visual"; }
  .res-titulo{ grid-area:titulo; margin-bottom:0; }
  .res-texto{ grid-area:texto; }
  .res-visual{ grid-area:visual; }
}
.res-texto .lead{ margin-top:0; }
.res-mas{ color:var(--dim); font-size:.875rem; text-align:center; margin-top:18px; max-width:300px;
          margin-left:auto; margin-right:auto; }
.avisos{ background:var(--amber-soft); border:1px solid #eddcb8; border-radius:var(--r);
         padding:18px 20px; margin-top:24px; }
.avisos ul{ margin:12px 0 0 18px; color:#6b4a12; font-size:.9375rem; }
.avisos li + li{ margin-top:7px; }

/* Bloques agrupados dentro del teléfono (biserie, circuito, EMOM): sin el encabezado,
   una biserie se lee como dos ejercicios que no tienen nada que ver. */
.ph-bloque{ font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
            color:var(--accent2); margin:2px 0 7px; }
.ph-card.en-bloque{ border-left:3px solid var(--accent-soft); }

/* El teléfono de /prueba lleva dentro una lista de largo variable */
/* min-height:0 es obligatorio: un item de flex column con overflow no encoge por
   debajo de su contenido sin el, y en WebKit se queda sin hacer scroll. .ph-cuerpo
   (arriba) ya lo traia; aqui faltaba. */
.ph-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
            scrollbar-width:none;
            /* La última tarjeta se desvanece: se lee como pantalla que sigue, no como
               tarjeta cortada. Es máscara, no un degradado encima, para que funcione
               igual sobre cualquier fondo. */
            -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
                    mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.ph-scroll::-webkit-scrollbar{ display:none; }