/* ============================================================================
 * sitio.css — el sistema del landing v2 (rediseño 2026-09-25).
 *
 * La misma línea de marca que el panel: crema, tinta, UN verde, una
 * superfamilia (Instrument Sans + Instrument Serif), nada por debajo de 15 px,
 * [v3, 2026-09-27: la home añade movimiento con condiciones — ver el bloque
 * «v3 · movimiento» y LANDING-DIRECCION §3, enmienda.]
 * Teo pixel como único movimiento, cero video, cero gradientes de fondo, cero
 * sombras con matiz, cero reveal-on-scroll.
 *
 * Los VALORES salen de /assets/marca.css (generado desde telos-app
 * lib/marca/tokens.json: el panel y el landing leen la misma fuente). Aquí sólo
 * hay componentes. Si un color no está en marca.css, no se usa.
 *
 * Componentes: .envoltura · .nav (+ menú móvil) · .boton / .boton-sec / .enlace
 * · .seccion · .tres · .plan · .teo · .telefono (conversación) · .preguntas ·
 * .pie (footer con h2).
 * ========================================================================== */

@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/instrument-sans-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic-latin.woff2) format("woff2")}

:root{
  --ancho:1120px;
  --gutter:20px;
  --curva:cubic-bezier(0.23,1,0.32,1);
  --r-s:8px; --r-m:16px; --r-l:24px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
.v2,.v2 *,.v2 *::before,.v2 *::after{box-sizing:border-box}
body.v2{margin:0;background:var(--telos-papel);color:var(--telos-tinta);font-family:var(--telos-familia);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.v2) a{color:inherit} /* especificidad CERO: si no, le gana a .boton y .enlace (contraste 1,42:1 cazado por contraste-gate) */
.v2 h1,.v2 h2,.v2 h3{font-family:var(--telos-serif);font-weight:400;letter-spacing:-0.02em;line-height:1.08;margin:0;text-wrap:balance}
.v2 p{margin:0;text-wrap:pretty}
.v2 img{max-width:100%;height:auto}
.envoltura{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.salto{position:absolute;left:-9999px;top:0;background:var(--telos-tinta);color:var(--telos-papel);padding:12px 16px;border-radius:var(--r-s);font-size:16px;z-index:50}
.salto:focus{left:16px;top:16px}
.v2 :focus-visible{outline:2px solid var(--telos-verde-tinta);outline-offset:3px;border-radius:4px}

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:40;background:var(--telos-papel);border-bottom:1px solid var(--telos-linea)}
.nav .envoltura{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--telos-serif);font-size:26px;line-height:1;letter-spacing:-0.02em}
.marca img{width:26px;height:26px}
.nav-enlaces{display:none;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-enlaces a{text-decoration:none;font-size:16px;color:var(--telos-tinta-2);transition:color 150ms ease}
.nav-enlaces a:hover,.nav-enlaces a[aria-current="page"]{color:var(--telos-tinta)}
.nav-derecha{display:flex;align-items:center;gap:12px}
.idioma{font-size:15px;color:var(--telos-tinta-3);text-decoration:none}
.idioma:hover{color:var(--telos-tinta)}
.menu-boton{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--telos-linea);border-radius:var(--r-s);background:var(--telos-superficie);color:var(--telos-tinta);cursor:pointer}
.menu-boton svg{width:20px;height:20px}
.menu-movil{border-top:1px solid var(--telos-linea);background:var(--telos-papel)}
.menu-movil[hidden]{display:none}
.menu-movil ul{list-style:none;margin:0;padding:8px var(--gutter) 20px}
.menu-movil li a{display:block;padding:14px 0;border-bottom:1px solid var(--telos-linea);font-size:18px;text-decoration:none}
@media (min-width:900px){
  .nav-enlaces{display:flex}
  .menu-boton{display:none}
  .menu-movil{display:none}
}

/* ── botones ──────────────────────────────────────────────────────────── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--telos-verde-hondo);color:var(--telos-papel);text-decoration:none;font-size:17px;font-weight:600;padding:14px 22px;border-radius:var(--r-s);border:1px solid var(--telos-verde-hondo);transition:transform 160ms var(--curva),background-color 200ms ease}
.boton:hover{background:var(--telos-tinta);border-color:var(--telos-tinta)}
.boton:active{transform:scale(0.97)}
.boton svg{width:18px;height:18px;flex:none}
.boton-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--telos-superficie);color:var(--telos-tinta);text-decoration:none;font-size:16px;font-weight:600;padding:10px 16px;border-radius:var(--r-s);border:1px solid var(--telos-linea);transition:transform 160ms var(--curva),border-color 200ms ease}
.boton-sec:hover{border-color:var(--telos-tinta-3)}
.boton-sec:active{transform:scale(0.97)}
.enlace{color:var(--telos-verde-tinta);font-weight:600;text-underline-offset:4px;text-decoration-color:var(--telos-linea);transition:text-decoration-color 150ms ease}
.enlace:hover{text-decoration-color:var(--telos-verde-tinta)}

/* ── secciones ────────────────────────────────────────────────────────── */
.seccion{padding:88px 0;border-top:1px solid var(--telos-linea)}
@media (min-width:900px){.seccion{padding:128px 0}}
.seccion h2{font-size:36px;max-width:18ch}
@media (min-width:900px){.seccion h2{font-size:48px}}
.entrada{margin-top:16px;font-size:18px;color:var(--telos-tinta-2);max-width:52ch}
.acota{font-size:15px;color:var(--telos-tinta-3)}

/* héroe */
.heroe{display:grid;gap:40px;padding-top:40px;padding-bottom:72px;align-items:center}
@media (min-width:900px){.heroe{grid-template-columns:1.05fr 0.95fr;gap:64px;padding-top:72px;padding-bottom:112px}}
.heroe h1{font-size:44px}
@media (min-width:900px){.heroe h1{font-size:64px}}
.heroe .sub{margin-top:18px;font-size:20px;color:var(--telos-tinta-2);max-width:30ch}
.acciones{margin-top:32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* La demo como principal (27-oct): el botón lleva debajo una línea chica que dice lo que cuesta probarla
 * («3 días, sin crear cuenta»). Va en un grupo propio para que la línea quede bajo SU botón, no bajo la fila. */
.cta-demo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px}
.cta-nota{font-size:15px;line-height:1.3;color:var(--telos-tinta-3)}
.acciones:has(>.cta-demo){align-items:flex-start}

/* tres verbos: filas editoriales, no tres tarjetas iguales */
.tres{list-style:none;margin:56px 0 0;padding:0}
.tres li{display:grid;gap:8px;padding:28px 0;border-top:1px solid var(--telos-linea)}
.tres li:last-child{border-bottom:1px solid var(--telos-linea)}
@media (min-width:900px){.tres li{grid-template-columns:320px 1fr;gap:48px;align-items:baseline}}
.tres h3{font-size:32px}
@media (min-width:900px){.tres h3{font-size:40px}}
.tres p{font-size:18px;color:var(--telos-tinta-2);max-width:48ch}

/* ── Teo ──────────────────────────────────────────────────────────────── */
/* Tres estados y nada más: reposo (respira), parpadeo (aplasta un instante; el
   sprite no tiene fotograma de ojos cerrados) y reacción (sprite de celebrar). */
.teo-escena{display:flex;align-items:flex-end;gap:14px}
.teo-respira{animation:respira 3.6s var(--curva) infinite alternate}
.teo{display:block;width:120px;height:120px;background:url(/assets/teo/teo-idle.webp) center/contain no-repeat;image-rendering:pixelated;transform-origin:50% 100%;transition:transform 140ms var(--curva)}
.teo.parpadea{transform:scaleY(0.82) translateY(4px)}
.teo[data-estado="celebra"]{background-image:url(/assets/teo/teo-celebrate.webp);animation:salto 620ms var(--curva) 2}
.teo.chico{width:88px;height:88px}
@keyframes respira{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes salto{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}}

/* ── la conversación de ejemplo ───────────────────────────────────────── */
.telefono{background:var(--telos-superficie);border:1px solid var(--telos-linea);border-radius:var(--r-l);overflow:hidden;max-width:440px;width:100%;justify-self:center}
.telefono-cabeza{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--telos-linea);background:var(--telos-hoja)}
.avatar{width:40px;height:40px;border-radius:12px;background:var(--telos-papel) url(/assets/teo/teo-idle.webp) center/80% no-repeat;image-rendering:pixelated;border:1px solid var(--telos-linea);flex:none}
.telefono-cabeza strong{display:block;font-size:16px;line-height:1.3}
.telefono-cabeza span{display:block;font-size:15px;color:var(--telos-tinta-3);line-height:1.3}
.etiqueta-ejemplo{margin-left:auto;font-size:15px;color:var(--telos-tinta-3);border:1px solid var(--telos-linea);border-radius:var(--r-s);padding:2px 10px;background:var(--telos-superficie)}
.hilo{list-style:none;margin:0;padding:20px 16px 16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:10px 14px;border-radius:14px;font-size:16px;line-height:1.45;position:relative}
.msg.cliente{align-self:flex-start;background:var(--telos-superficie);border:1px solid var(--telos-linea);border-bottom-left-radius:4px}
.msg.teo-dice{align-self:flex-end;background:var(--telos-verde-suave);border-bottom-right-radius:4px}
.msg .quien{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sello{align-self:center;display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--telos-verde-tinta);background:var(--telos-superficie);border:1px solid var(--telos-linea);border-radius:var(--r-s);padding:6px 12px;margin-top:4px}
.sello i{width:8px;height:8px;border-radius:2px;background:var(--telos-verde);flex:none}
.pie-telefono{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 18px 16px;font-size:15px;color:var(--telos-tinta-3)}
.repetir{font:inherit;font-size:15px;color:var(--telos-tinta-2);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;visibility:hidden}
/* Con JS y movimiento permitido, la conversación AVANZA. Cada mensaje ocupa su
   sitio desde el principio (opacidad 0): aparece en su lugar y nada salta. */
.anima .hilo>li{opacity:0;transform:translateY(6px);transition:opacity 260ms var(--curva),transform 260ms var(--curva)}
.anima .hilo>li.visto{opacity:1;transform:none}
.anima .msg.teo-dice .texto{opacity:0;transition:opacity 200ms ease}
.anima .msg.teo-dice.listo .texto{opacity:1}
.escribe{position:absolute;left:14px;top:50%;translate:0 -50%;display:none;gap:4px}
.anima .msg.teo-dice.visto:not(.listo) .escribe{display:inline-flex}
.escribe b{width:6px;height:6px;border-radius:50%;background:var(--telos-verde-tinta);opacity:.35;animation:punto 900ms ease-in-out infinite}
.escribe b:nth-child(2){animation-delay:150ms}.escribe b:nth-child(3){animation-delay:300ms}
@keyframes punto{50%{opacity:1}}
.anima .repetir{visibility:visible}

/* ── el panel (maqueta) ───────────────────────────────────────────────── */
.dia{display:grid;gap:40px;margin-top:48px;align-items:start}
@media (min-width:900px){.dia{grid-template-columns:0.9fr 1.1fr;gap:64px}}
.panel{background:var(--telos-superficie);border:1px solid var(--telos-linea);border-radius:var(--r-m);overflow:hidden}
.panel-cabeza{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--telos-linea)}
.panel-cabeza h3{font-family:var(--telos-familia);font-size:20px;font-weight:600;letter-spacing:0}
.panel-cabeza span{font-size:15px;color:var(--telos-tinta-3)}
.cola{list-style:none;margin:0;padding:0}
.cola li{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-bottom:1px solid var(--telos-linea)}
.cola li:last-child{border-bottom:0}
.cola .marca-fila{width:10px;height:10px;border-radius:3px;margin-top:8px;flex:none;background:var(--telos-tinta-3)}
.cola .alerta .marca-fila{background:var(--telos-coral)}
.cola .cuerpo{flex:1;min-width:0}
.cola strong{display:block;font-size:16px;font-weight:600;line-height:1.4}
.cola .detalle{display:block;font-size:15px;color:var(--telos-tinta-3);line-height:1.4;margin-top:2px}
.cola .accion{font-size:15px;font-weight:600;color:var(--telos-verde-tinta);white-space:nowrap;margin-top:1px}
.explica{display:grid;gap:18px;font-size:18px;color:var(--telos-tinta-2)}
.explica strong{color:var(--telos-tinta);font-weight:600}

/* ── planes ───────────────────────────────────────────────────────────── */
.planes{display:grid;gap:16px;margin-top:48px}
@media (min-width:900px){.planes{grid-template-columns:repeat(3,1fr);gap:20px}}
.plan{display:flex;flex-direction:column;background:var(--telos-superficie);border:1px solid var(--telos-linea);border-radius:var(--r-m);padding:28px}
.plan h3{font-family:var(--telos-familia);font-size:18px;font-weight:600;letter-spacing:0;color:var(--telos-tinta-2)}
.precio{margin-top:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.precio .cifra{font-family:var(--telos-serif);font-size:52px;line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.precio .periodo{font-size:16px;color:var(--telos-tinta-3)}
.plan .cupo{margin-top:16px;padding-top:16px;border-top:1px solid var(--telos-linea);font-size:16px;color:var(--telos-tinta-2)}
.condiciones{margin-top:32px;display:grid;gap:10px;font-size:17px;color:var(--telos-tinta-2);max-width:62ch}
.meta-linea{color:var(--telos-tinta);font-weight:600}
/* variante `contratar` (precios): el botón al pie de cada tarjeta, y el despliegue de los Max */
.plan .cupo{flex:1}
.plan-cta{margin-top:24px;align-self:stretch}
.mas-planes{margin-top:24px}
.mas-planes>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:17px;font-weight:600;color:var(--telos-tinta);padding:8px 0;text-decoration:underline;text-underline-offset:4px}
.mas-planes>summary::-webkit-details-marker{display:none}
.mas-planes>summary::before{content:"+";font-weight:400;text-decoration:none;display:inline-block;width:1ch}
.mas-planes[open]>summary::before{content:"\2212"}
.mas-planes .mas-iva{font-weight:400;color:var(--telos-tinta-3);text-decoration:none}
.mas-planes>.planes{margin-top:24px}

/* ── páginas de detalle: sin hero, abren decidiendo (canon §20) ───────── */
.cabeza{padding-top:56px;padding-bottom:8px}
@media (min-width:900px){.cabeza{padding-top:88px;padding-bottom:8px}}
.cabeza h1{font-size:44px;max-width:16ch}
@media (min-width:900px){.cabeza h1{font-size:64px}}
.cabeza .sub{margin-top:18px;font-size:20px;color:var(--telos-tinta-2);max-width:44ch}
main > .cabeza:last-child{padding-bottom:96px}
.incluye{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0}
@media (min-width:900px){.incluye{grid-template-columns:repeat(2,1fr);column-gap:48px}}
.incluye li{padding:20px 0;border-top:1px solid var(--telos-linea);font-size:17px;color:var(--telos-tinta-2)}
.incluye strong{display:block;color:var(--telos-tinta);font-weight:600;margin-bottom:4px}
.resuelve{display:grid;gap:40px;margin-top:40px}
.resuelve .incluye{grid-template-columns:1fr;margin-top:16px}
.resuelve h3,.resuelve h2{font-family:var(--telos-familia);font-size:24px;font-weight:600;letter-spacing:-.01em}
@media (min-width:900px){.resuelve{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}}
.arranque{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0;counter-reset:paso;max-width:760px}
.arranque li{counter-increment:paso;display:grid;grid-template-columns:40px 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--telos-linea);font-size:17px;color:var(--telos-tinta-2)}
.arranque li::before{content:counter(paso);font-family:var(--telos-serif);font-size:28px;line-height:1;color:var(--telos-verde-tinta)}
.arranque strong{color:var(--telos-tinta);font-weight:600}
.duda{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:48px;padding:28px;border:1px solid var(--telos-linea);border-radius:var(--r-m);background:var(--telos-superficie)}
.duda .teo{width:72px;height:72px}
.duda p{flex:1;min-width:220px;font-size:18px;color:var(--telos-tinta-2)}
.duda strong{display:block;color:var(--telos-tinta);font-size:20px;font-weight:600;margin-bottom:2px}

/* ── formulario (lista de espera): el contrato lo pone site.js §7 ──────── */
.espera{display:grid;gap:40px;margin-top:40px;align-items:center}
@media (min-width:900px){.espera{grid-template-columns:1.1fr 0.9fr;gap:64px}}
.espera .teo-escena{justify-content:center}
.forma{display:grid;gap:18px;padding:28px;border:1px solid var(--telos-linea);border-radius:var(--r-m);background:var(--telos-superficie)}
.campo{display:grid;gap:6px;font-size:16px;font-weight:600;color:var(--telos-tinta)}
.campo .opcional{font-weight:400;color:var(--telos-tinta-3)}
.campo input{font:inherit;font-size:17px;font-weight:400;padding:12px 14px;border:1px solid var(--telos-linea);border-radius:var(--r-s);background:var(--telos-papel);color:var(--telos-tinta)}
.campo input:focus-visible{outline:2px solid var(--telos-verde-hondo);outline-offset:1px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.forma .nota{font-size:15px;color:var(--telos-tinta-3)}
.forma .boton{justify-self:start}
.boton[disabled]{opacity:0.6;cursor:default}
.forma .exito{padding:14px 16px;border-radius:var(--r-s);background:var(--telos-verde-suave);color:var(--telos-tinta);font-size:16px;font-weight:600}
.forma .fallo{padding:14px 16px;border-radius:var(--r-s);border:1px solid var(--telos-coral);color:var(--telos-tinta);font-size:16px}

/* ── contacto: dos canales, los dos por escrito ───────────────────────── */
.canales{display:grid;gap:16px;margin-top:40px}
@media (min-width:900px){.canales{grid-template-columns:repeat(2,1fr);gap:20px}}
.canal{display:flex;flex-direction:column;gap:10px;padding:28px;border:1px solid var(--telos-linea);border-radius:var(--r-m);background:var(--telos-superficie)}
.canal h2{font-size:28px}
.canal p{font-size:17px;color:var(--telos-tinta-2);flex:1}
.canal .boton,.canal .boton-sec{align-self:flex-start;margin-top:8px}

/* ── aviso de página (salud: todavía no disponible) ───────────────────── */
.aviso{margin-top:0;margin-bottom:28px;padding:16px 20px;border:1px solid var(--telos-linea);border-left:3px solid var(--telos-coral);border-radius:var(--r-s);background:var(--telos-superficie);font-size:16px;color:var(--telos-tinta-2);max-width:62ch}
.aviso strong{color:var(--telos-tinta);font-weight:600}

/* ── legal: canon, sólo se viste. El contenido de <main> no lleva clases ── */
.legal{max-width:calc(72ch + 2 * var(--gutter));padding-top:56px;padding-bottom:96px}
@media (min-width:900px){.legal{padding-top:88px}}
.legal > p:first-child{font-size:15px;font-weight:600;color:var(--telos-verde-tinta)}
.legal h1{margin-top:8px;font-size:40px}
@media (min-width:900px){.legal h1{font-size:56px}}
.legal h1 + p{margin-top:12px;font-size:15px;color:var(--telos-tinta-3)}
.legal h2{margin-top:48px;font-family:var(--telos-familia);font-size:22px;font-weight:600;letter-spacing:0;color:var(--telos-tinta)}
.legal h3{margin-top:28px;font-size:18px;font-weight:600;color:var(--telos-tinta)}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--telos-tinta-2)}
.legal p{margin-top:16px}
.legal ul{margin:12px 0 0;padding-left:22px;display:grid;gap:8px}
.legal strong{color:var(--telos-tinta);font-weight:600}
.legal a{color:var(--telos-verde-tinta);text-decoration:underline;text-decoration-color:var(--telos-linea);text-underline-offset:3px}
.legal a:hover{text-decoration-color:var(--telos-verde-tinta)}
.legal svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.legal > div:last-child{margin-top:64px;padding-top:24px;border-top:1px solid var(--telos-linea)}

/* ── preguntas: sin cajas, una línea entre cada una ───────────────────── */
.preguntas{margin-top:40px;max-width:760px}
.preguntas details{border-bottom:1px solid var(--telos-linea)}
.preguntas details:first-child{border-top:1px solid var(--telos-linea)}
.preguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:19px;font-weight:600}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary::after{content:"+";font-weight:400;font-size:26px;line-height:1;color:var(--telos-tinta-3);flex:none}
.preguntas details[open] summary::after{content:"\2212"}
.preguntas details p{padding:0 0 24px;font-size:17px;color:var(--telos-tinta-2);max-width:60ch}

/* ── cierre ───────────────────────────────────────────────────────────── */
.cierre{padding:96px 0 104px;border-top:1px solid var(--telos-linea);text-align:center}
.cierre .teo-escena{justify-content:center}
.cierre h2{margin-top:20px;font-size:36px}
@media (min-width:900px){.cierre h2{font-size:48px}}
.cierre .enlace{display:inline-block;margin-top:18px;font-size:19px}

/* ── pie: con h2 por grupo (Codex C2) ─────────────────────────────────── */
.pie{border-top:1px solid var(--telos-linea);padding:56px 0 40px;font-size:15px;color:var(--telos-tinta-2)}
.pie-grupos{display:grid;gap:32px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.pie-grupos{grid-template-columns:1.4fr repeat(3,1fr)}}
.pie h2{font-family:var(--telos-familia);font-size:15px;font-weight:600;letter-spacing:0;color:var(--telos-tinta);margin:0 0 12px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pie a{text-decoration:none;color:var(--telos-tinta-2)}
.pie a:hover{color:var(--telos-tinta);text-decoration:underline;text-underline-offset:3px}
.pie-marca p{margin-top:12px;max-width:32ch}
.pie-legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--telos-linea);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:var(--telos-tinta-3)}

/* ── v3 · movimiento (2026-09-27) ─────────────────────────────────────────
 * Diego: la home se sentía «muy básica: sin animaciones». Enmienda al canon
 * (docs/LANDING-DIRECCION.md §3 · 2026-09-27): se permiten entradas al hacer
 * scroll CON la razón del «cero reveal» intacta — el contenido está en el HTML
 * y se ve sin JS, nada visible al cargar se esconde, y con reduced-motion (o
 * ?shot=1) todo queda quieto. Sólo transform y opacity; curvas fuertes; hover
 * sólo con puntero fino. El comportamiento vive en sitio.js §4-§7.
 * ------------------------------------------------------------------------ */
:root{--curva-sale:cubic-bezier(0.23,1,0.32,1);--curva-mueve:cubic-bezier(0.77,0,0.175,1)}

/* barra de lectura: CSS puro (scroll-driven), sin JS; sin soporte, no existe */
.progreso{display:none}
@supports (animation-timeline:scroll()){
  .progreso{display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--telos-verde);transform-origin:0 50%;transform:scaleX(0);animation:progreso linear both;animation-timeline:scroll(root)}
  @keyframes progreso{to{transform:scaleX(1)}}
}
.nav{transition:border-color 200ms ease,background-color 200ms ease}
.nav.con-scroll{border-bottom-color:var(--telos-tinta-3)}

/* ── héroe: una idea por pantalla, y Teo DE PIE sobre el teléfono ───── */
/* v3.2: en móvil, Teo y el primer mensaje caben en la primera pantalla (390×844):
   titular a 40px, menos aire arriba, los dos CTA en una fila y el teléfono con
   Teo parado en su borde de arriba. El borde de arriba no se mueve cuando la
   conversación crece, así que Teo tampoco. */
[data-page="home-v2"] .heroe{min-height:calc(100svh - 64px);padding-top:24px;gap:28px;align-items:start}
@media (min-width:900px){[data-page="home-v2"] .heroe{padding-top:48px;padding-bottom:64px;align-items:center}}
[data-page="home-v2"] .heroe h1{font-size:40px}
[data-page="home-v2"] .heroe .sub{margin-top:14px;font-size:18px}
[data-page="home-v2"] .heroe .acciones{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
[data-page="home-v2"] .heroe .acciones>a{padding:14px 12px;font-size:16px;white-space:nowrap;min-height:52px}
@media (min-width:600px){[data-page="home-v2"] .heroe .acciones{display:flex;gap:12px}[data-page="home-v2"] .heroe .acciones>a{padding:14px 22px}}
/* En móvil la demo ocupa su propia fila, a todo lo ancho; los dos secundarios van debajo, uno junto al otro. */
[data-page="home-v2"] .heroe .acciones>.cta-demo{grid-column:1/-1}
[data-page="home-v2"] .heroe .cta-demo>.boton{width:100%;padding:14px 12px;font-size:16px;white-space:nowrap;min-height:52px}
@media (min-width:600px){[data-page="home-v2"] .heroe .cta-demo>.boton{width:auto;padding:14px 22px}}
@media (min-width:900px){[data-page="home-v2"] .heroe h1{font-size:80px;letter-spacing:-0.03em}[data-page="home-v2"] .heroe .sub{margin-top:18px;font-size:20px}[data-page="home-v2"] .heroe .acciones{margin-top:32px}}
.escenario{position:relative;justify-self:center;width:100%;max-width:440px;perspective:1200px;padding-top:76px}
@media (min-width:900px){.escenario{padding-top:100px}}
.escenario .telefono{position:relative;transform-style:preserve-3d;transition:transform 600ms var(--curva-sale),box-shadow 600ms var(--curva-sale);will-change:transform}
.teo-heroe{position:absolute;z-index:2;top:0;right:22px;pointer-events:auto;cursor:pointer}
.teo-heroe .teo{width:80px;height:80px;transition:transform 140ms var(--curva-sale)}
@media (min-width:900px){.teo-heroe{right:28px}.teo-heroe .teo{width:104px;height:104px}}
/* Mirar: el giro va en el CONTENEDOR; en .teo-respira lo pisaría la animación de respirar. */
.teo-heroe{transition:transform 400ms var(--curva-sale)}
.teo-heroe[data-mira="izq"]{transform:scaleX(-1)}
.teo-heroe.habla .teo-respira{animation-duration:900ms}
.escenario .pie-telefono{justify-content:flex-end}
/* La conversación no reserva alto vacío: con la demo en marcha, lo que aún no
   llegó NO ocupa sitio (display:none), y la tarjeta crece hacia abajo. Sin JS o
   con movimiento reducido no hay .anima: se ve entera desde el principio. */
/* Pasado un minuto sin que nadie pida más (sitio.js §2), lo infinito se pausa. */
.duerme .teo-respira,.duerme .escribe b{animation-play-state:paused}
.anima .hilo>li:not(.visto){display:none}
.anima .hilo>li.visto{animation:llega 320ms var(--curva-sale) both}
@keyframes llega{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* entrada del héroe al cargar: escalonada, corta, desde casi-visible */
@keyframes entra-carga{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-page="home-v2"] .heroe h1,[data-page="home-v2"] .heroe .sub,[data-page="home-v2"] .heroe .acciones,[data-page="home-v2"] .escenario{animation:entra-carga 700ms var(--curva-sale) both}
[data-page="home-v2"] .heroe .sub{animation-delay:90ms}
[data-page="home-v2"] .heroe .acciones{animation-delay:180ms}
[data-page="home-v2"] .escenario{animation-delay:260ms}

/* ── entradas al hacer scroll (sólo si sitio.js puso .con-entradas) ──── */
.con-entradas .entra{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--curva-sale),transform 700ms var(--curva-sale);transition-delay:calc(var(--i,0) * 70ms)}
.con-entradas .entra.visible{opacity:1;transform:none}

/* ── una idea por pantalla (escritorio): cada sección ocupa la ventana ─ */
@media (min-width:900px){
  [data-page="home-v2"] .seccion{min-height:min(100svh,940px);display:flex;flex-direction:column;justify-content:center}
  [data-page="home-v2"] .seccion>.envoltura{width:100%}
}

/* ── lo que hace Teo: el día de Teo como línea de tiempo ────────────── *
 * contesta → agenda → te avisa. Un nodo con icono por paso, una línea que se
 * llena al bajar (CSS scroll-driven; sin soporte, la línea está entera) y a la
 * derecha un EJEMPLO con texto que ya está en la página, marcado «Ejemplo».
 * Nada de cifras: los ejemplos son los de la demo y del panel. */
[data-page="home-v2"] .tres{position:relative;margin-top:48px}
[data-page="home-v2"] .tres li{grid-template-columns:44px minmax(0,1fr);align-items:start;grid-template-areas:"nodo titulo" "nodo texto" "nodo vineta";column-gap:18px;row-gap:8px;padding:0 0 44px;border:0;position:relative}
[data-page="home-v2"] .tres li:last-child{border:0;padding-bottom:0}
[data-page="home-v2"] .tres li>h3{grid-area:titulo}
[data-page="home-v2"] .tres li>p{grid-area:texto}
[data-page="home-v2"] .tres::before,[data-page="home-v2"] .tres::after{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;border-radius:2px;background:var(--telos-linea)}
[data-page="home-v2"] .tres::after{background:var(--telos-verde);transform-origin:50% 0}
.nodo{grid-area:nodo;position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--telos-superficie);border:1px solid var(--telos-linea);color:var(--telos-tinta-2);transition:background-color 400ms ease,color 400ms ease,border-color 400ms ease,transform 400ms var(--curva-sale)}
.nodo svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tres li.activa .nodo{background:var(--telos-verde-hondo);border-color:var(--telos-verde-hondo);color:var(--telos-papel);transform:scale(1.08)}
.vineta{grid-area:vineta;margin-top:10px;display:grid;justify-items:start;gap:8px}
.vineta .etiqueta-ejemplo{margin:0}
.vineta p{margin:0;font-size:16px;line-height:1.45;color:var(--telos-tinta);max-width:34ch}
.vineta-msg{padding:10px 14px;border-radius:14px;border-bottom-right-radius:4px;background:var(--telos-verde-suave)}
.vineta p.vineta-sello{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--telos-linea);border-radius:var(--r-s);background:var(--telos-superficie);color:var(--telos-verde-tinta)}
.vineta-sello i{width:8px;height:8px;border-radius:2px;background:var(--telos-verde);flex:none}
.vineta-aviso{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--telos-linea);border-left:3px solid var(--telos-coral);border-radius:var(--r-s);background:var(--telos-superficie);font-weight:600}
@media (min-width:900px){
  [data-page="home-v2"] .tres li{grid-template-columns:56px minmax(0,1fr) minmax(0,360px);grid-template-areas:"nodo titulo vineta" "nodo texto vineta";column-gap:40px;min-height:30vh;align-content:center;padding:0 0 32px}
  [data-page="home-v2"] .tres h3{font-size:64px}
  [data-page="home-v2"] .tres::before,[data-page="home-v2"] .tres::after{left:27px}
  .nodo{width:56px;height:56px}.nodo svg{width:26px;height:26px}
  .vineta{margin-top:0;align-self:center}
}
/* La línea se llena con el scroll de la sección; el icono se dibuja al entrar. */
@supports (animation-timeline:view()){
  [data-page="home-v2"] .tres::after{transform:scaleY(0);animation:llena linear both;animation-timeline:view();animation-range:entry 40% cover 70%}
  @keyframes llena{to{transform:scaleY(1)}}
}
.con-entradas .tres li .nodo path,.con-entradas .tres li .nodo rect{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--curva-sale) 200ms}
.con-entradas .tres li.visible .nodo path,.con-entradas .tres li.visible .nodo rect{stroke-dashoffset:0}
.con-entradas .tres .vineta{opacity:0;transform:translateX(18px);transition:opacity 600ms var(--curva-sale) 250ms,transform 600ms var(--curva-sale) 250ms}
.con-entradas .tres li.visible .vineta{opacity:1;transform:none}
/* Sólo el TITULAR del verbo inactivo se aclara (texto grande); el párrafo conserva
   su color: atenuar el texto de lectura le quitaría contraste. */
.con-foco .tres li:not(.activa) h3{color:var(--telos-tinta-3)}
.con-foco .tres li.activa h3{color:var(--telos-verde-tinta)}
.tres h3{transition:color 400ms ease}

/* ── tu día: la cola llega fila a fila; la alerta late UNA vez ──────── */
.con-entradas .cola li{opacity:0;transform:translateX(16px);transition:opacity 500ms var(--curva-sale),transform 500ms var(--curva-sale);transition-delay:calc(var(--i,0) * 110ms + 150ms)}
.con-entradas .panel.visible .cola li{opacity:1;transform:none}
@keyframes late{0%,100%{transform:scale(1)}45%{transform:scale(1.9)}}
.panel.visible .alerta .marca-fila{animation:late 700ms var(--curva-sale) 900ms 2}

/* ── botones: responden al puntero, al dedo y al teclado ───────────── */
.boton svg,.boton-sec svg{transition:transform 220ms var(--curva-sale)}
.boton-sec svg{width:18px;height:18px;flex:none}
.boton:active,.boton-sec:active{transform:scale(0.97)}
.boton,.boton-sec,.plan,.repetir{-webkit-tap-highlight-color:transparent}
.boton-sec{transition:transform 160ms var(--curva-sale),border-color 200ms ease,background-color 200ms ease,box-shadow 220ms var(--curva-sale)}
/* Foco de teclado: el anillo llega desde fuera y se asienta (220 ms). */
@keyframes foco{from{outline-offset:8px;outline-color:transparent}to{outline-offset:3px}}
.boton:focus-visible,.boton-sec:focus-visible,.enlace:focus-visible,.repetir:focus-visible{animation:foco 220ms var(--curva-sale)}
@media (hover:hover) and (pointer:fine){
  .boton:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
  .boton:hover svg{transform:translateX(3px)}
  .boton:active{transform:translateY(0) scale(0.97);box-shadow:none}
  .boton-sec:hover{transform:translateY(-2px);border-color:var(--telos-tinta-3);box-shadow:0 10px 24px -16px rgba(0,0,0,.35)}
  .boton-sec:hover svg{transform:rotate(-8deg) scale(1.06)}
  .boton-sec:active{transform:translateY(0) scale(0.97);box-shadow:none}
  .plan{transition:transform 260ms var(--curva-sale),border-color 200ms ease,box-shadow 260ms var(--curva-sale)}
  .plan:hover{transform:translateY(-6px);border-color:var(--telos-tinta-3);box-shadow:0 18px 40px -24px rgba(0,0,0,.35)}
  .teo-heroe:hover .teo{transform:translateY(-4px) rotate(-3deg)}
  .enlace{transition:text-decoration-color 150ms ease,color 150ms ease}
}

/* ── preguntas: se abren con altura real, no de golpe ───────────────── */
:root{interpolate-size:allow-keywords}
.preguntas details::details-content{block-size:0;overflow:hidden;transition:block-size 320ms var(--curva-sale),content-visibility 320ms allow-discrete}
.preguntas details[open]::details-content{block-size:auto}
.preguntas summary::after{transition:transform 260ms var(--curva-sale)}
.preguntas details[open] summary::after{content:"+";transform:rotate(45deg)}
@media (hover:hover) and (pointer:fine){.preguntas summary{transition:color 150ms ease}.preguntas summary:hover{color:var(--telos-verde-tinta)}}

/* ── cierre: el mismo destino que el héroe, ahora como botón ────────── */
.cierre .boton{margin-top:24px}
.cierre .cierre-acciones{justify-content:center;margin-top:24px}
.cierre .cierre-acciones .boton{margin-top:0}
.cierre .cta-demo{align-items:center}
[data-page="home-v2"] .cierre{padding:128px 0 136px}
@media (min-width:900px){[data-page="home-v2"] .cierre h2{font-size:64px}}

/* ── CTA fijo en móvil: aparece al dejar atrás los del héroe, discreto ─ *
 * Sólo < 900 px. Se esconde con visibility (no se enfoca oculto) y se va cuando
 * el cierre, que ya trae su botón, entra en pantalla. Sin JS no aparece nunca:
 * los CTA del héroe y del cierre siguen en su sitio. */
.cta-fijo{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--telos-papel);border-top:1px solid var(--telos-linea);transform:translateY(110%);visibility:hidden;transition:transform 320ms var(--curva-sale),visibility 0s linear 320ms}
.cta-fijo .boton{width:100%;padding:12px 16px;font-size:16px}
.cta-fijo.ve{transform:none;visibility:visible;transition:transform 320ms var(--curva-sale),visibility 0s}
@media (min-width:900px){.cta-fijo{display:none}}

@media (prefers-reduced-motion:reduce){
  .con-entradas .entra,.con-entradas .cola li,.con-entradas .tres .vineta{opacity:1;transform:none}
  .con-entradas .tres li .nodo path,.con-entradas .tres li .nodo rect{stroke-dashoffset:0}
  [data-page="home-v2"] .tres::after{animation:none;transform:none}
  .con-foco .tres li:not(.activa) h3{color:inherit}
  .escenario .telefono{transform:none!important}
  .teo-heroe[data-mira="izq"]{transform:none}
  .progreso{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .v2 *,.v2 *::before,.v2 *::after{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}
}