/* ── La letra (F1-259l, rev. 9.15): propia, en fuentes/, sin Google Fonts. Los @font-face son COPIA de los bloques
     latin de la hoja que el sitio le pedía a Google (Space Grotesk 500–700 e Inter 400–600, display=swap): sólo cambia
     la URL, así el navegador escoge y completa los pesos igual que antes (el texto que pide Inter 700 sigue con la 600).
     Las dos son variables: cada familia es un solo archivo. Licencia OFL: fuentes/OFL-*.txt. _headers las sirve como
     immutable (la versión va en el nombre). ── */
  /* latin */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fuentes/space-grotesk-v22-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fuentes/space-grotesk-v22-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fuentes/space-grotesk-v22-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fuentes/inter-v20-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fuentes/inter-v20-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fuentes/inter-v20-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* ── Las letras de RESPALDO, ajustadas (F1-259l): mientras llegan Inter o Space Grotesk, el texto sale con la del sistema
     (Roboto en Android, Helvetica Neue en iPhone y Mac, Arial en Windows) agrandada lo justo para ocupar lo mismo, así que no
     salta al cambiar (sin ellas, el párrafo de entrada de «¿Es para ti?» y de preguntas ganaba un renglón al llegar Inter: CLS
     0.029 en 4G lento). size-adjust = ancho del texto con la propia / con la del sistema; ascent- y descent-override = las de la
     propia / size-adjust. Medidos en Chromium con handoffs/adjuntos/2026-10-14_F1-259l/servido/respaldo_letra.py (la regular
     contra Inter 400 y Space Grotesk 500; la negrita contra Inter 600 y Space Grotesk 700). Sólo el rango latin: lo demás (→, ⚠,
     los emojis) sigue saliendo de «Helvetica Neue», Arial o sans-serif, como antes. Si local() no encuentra la letra, el
     navegador pasa a la siguiente de la pila (--font-b, --font-d). ── */
  @font-face { font-family: 'Inter R'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 106.95%; ascent-override: 90.69%;
    descent-override: 22.44%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Inter R'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 107.52%; ascent-override: 90.21%;
    descent-override: 22.32%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Inter H'; font-style: normal; font-weight: 400; src: local('Helvetica Neue'), local('HelveticaNeue'); size-adjust: 105.39%; ascent-override: 92.04%;
    descent-override: 22.77%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Inter H'; font-style: normal; font-weight: 700; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'); size-adjust: 100.92%; ascent-override: 96.12%;
    descent-override: 23.78%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Inter A'; font-style: normal; font-weight: 400; src: local('Arial'), local('ArialMT'); size-adjust: 106.00%; ascent-override: 91.51%;
    descent-override: 22.64%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Inter A'; font-style: normal; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 100.85%; ascent-override: 96.18%;
    descent-override: 23.80%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'SG R'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 108.81%; ascent-override: 90.06%;
    descent-override: 26.65%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'SG R'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 107.55%; ascent-override: 91.12%;
    descent-override: 26.97%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'SG H'; font-style: normal; font-weight: 400; src: local('Helvetica Neue'), local('HelveticaNeue'); size-adjust: 107.22%; ascent-override: 91.40%;
    descent-override: 27.05%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'SG H'; font-style: normal; font-weight: 700; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'); size-adjust: 100.94%; ascent-override: 97.08%;
    descent-override: 28.73%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'SG A'; font-style: normal; font-weight: 400; src: local('Arial'), local('ArialMT'); size-adjust: 107.84%; ascent-override: 90.87%;
    descent-override: 26.89%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'SG A'; font-style: normal; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 100.88%; ascent-override: 97.15%;
    descent-override: 28.75%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

  :root {
    --cobalto: #2b59e0;
    --cobalto-prof: #1b34c8;
    --cielo: #4fc3f7;
    --tinta: #16181d;
    --tinta-2: #4b5060;
    --tinta-3: #6b7185;   /* 4.9:1 sobre blanco (antes #7a8094: 3.9:1) */
    --hueso: #f0f0f5;
    --base: #0a0a14;
    --ground: #f7f8fc;
    --surface: #ffffff;
    --line: #d9dce8;
    --line-soft: #e8eaf3;
    --chip: #e9eefc;
    --chip-ink: #1b34c8;
    --wash: #eef3ff;
    --verde: #2f8f4e;
    --verde-bg: #e6f4ea;
    --naranja: #b8620a;
    --naranja-bg: #fff4e5;
    --naranja-line: #f5c98a;
    --g1: #2b59e0;
    --g2: #4fc3f7;
    --shadow: 0 1px 2px rgba(22,24,29,.06), 0 8px 24px rgba(43,89,224,.08);
    --shadow-lg: 0 2px 4px rgba(22,24,29,.05), 0 24px 56px rgba(43,89,224,.16);
    --r: 12px;
    --r-lg: 22px;
    /* F1-259l: detrás de cada letra, sus respaldos ajustados (arriba); después, la pila de siempre */
    --font-d: "Space Grotesk", "SG R", "SG H", "SG A", Inter, "Helvetica Neue", Arial, sans-serif;
    --font-b: Inter, "Inter R", "Inter H", "Inter A", "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--tinta);
    font-family: var(--font-b);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  /* ── fondo vivo: tres luces de marca que respiran muy despacio ───
     SITIO-MEMORIA (rev. 9.15.2): sin el filtro de desenfoque de 90 px ni will-change. En el iPhone cada luz desenfocada era una capa con su bitmap a
     DPR 3 y los búferes del desenfoque, y la página se moría al bajar y subir rápido. Ahora cada luz es el MISMO perfil ya desenfocado,
     pintado con radial-gradient: el degradado de antes (lineal hasta el 68 o 70 % de la esquina, recortado al círculo) convolucionado con
     una gaussiana de σ = 90 px y muestreado cada ¼ de radio (handoffs/adjuntos/2026-10-14_SITIO-MEMORIA/servido/perfil.py). Como σ no
     escala con la luz, el perfil sale distinto en el teléfono (la luz mide su mínimo: 380, 320 y 400 px) y en computadora (medido a
     1280 px): dos juegos de paradas. La caja crece (--k: ×1.3 en computadora, ×1.5 en el teléfono) con el MISMO centro (--s es el
     tamaño de antes) para que quepa lo que el desenfoque regaba alrededor. Ningún desenfoque vuelve aquí: probar.py §11 lo prohíbe. */
  .aura { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
  .aura i { position: absolute; display: block; --k: 1.3; width: calc(var(--k) * var(--s)); height: calc(var(--k) * var(--s)); }
  .aura .a1 { --s: max(46vw, 380px); left: calc(-8vw + (1 - var(--k)) * var(--s) / 2); top: calc(-6vw + (1 - var(--k)) * var(--s) / 2);
    background: radial-gradient(circle closest-side, rgba(79,195,247,.253) 0%, rgba(79,195,247,.227) 19.2%, rgba(79,195,247,.162) 38.5%, rgba(79,195,247,.089) 57.7%, rgba(79,195,247,.035) 76.9%, rgba(79,195,247,.009) 96.2%, rgba(79,195,247,0) 100%); }
  .aura .a2 { --s: max(40vw, 320px); right: calc(-6vw + (1 - var(--k)) * var(--s) / 2); top: calc(18vh + (1 - var(--k)) * var(--s) / 2);
    background: radial-gradient(circle closest-side, rgba(43,89,224,.163) 0%, rgba(43,89,224,.148) 19.2%, rgba(43,89,224,.108) 38.5%, rgba(43,89,224,.063) 57.7%, rgba(43,89,224,.028) 76.9%, rgba(43,89,224,.009) 96.2%, rgba(43,89,224,0) 100%); }
  .aura .a3 { --s: max(52vw, 400px); left: calc(22vw + (1 - var(--k)) * var(--s) / 2); bottom: calc(-18vw + (1 - var(--k)) * var(--s) / 2);
    background: radial-gradient(circle closest-side, rgba(111,216,255,.184) 0%, rgba(111,216,255,.165) 19.2%, rgba(111,216,255,.117) 38.5%, rgba(111,216,255,.064) 57.7%, rgba(111,216,255,.024) 76.9%, rgba(111,216,255,.005) 96.2%, rgba(111,216,255,0) 100%); }
  @media (max-width: 900px) {
    .aura i { --k: 1.5; }
    .aura .a1 { background: radial-gradient(circle closest-side, rgba(79,195,247,.172) 0%, rgba(79,195,247,.159) 16.7%, rgba(79,195,247,.125) 33.3%, rgba(79,195,247,.083) 50%, rgba(79,195,247,.046) 66.7%, rgba(79,195,247,.021) 83.3%, rgba(79,195,247,0) 100%); }
    .aura .a2 { background: radial-gradient(circle closest-side, rgba(43,89,224,.099) 0%, rgba(43,89,224,.093) 16.7%, rgba(43,89,224,.076) 33.3%, rgba(43,89,224,.055) 50%, rgba(43,89,224,.034) 66.7%, rgba(43,89,224,.019) 83.3%, rgba(43,89,224,0) 100%); }
    .aura .a3 { background: radial-gradient(circle closest-side, rgba(111,216,255,.125) 0%, rgba(111,216,255,.115) 16.7%, rgba(111,216,255,.090) 33.3%, rgba(111,216,255,.059) 50%, rgba(111,216,255,.032) 66.7%, rgba(111,216,255,.015) 83.3%, rgba(111,216,255,0) 100%); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .aura .a1 { animation: drift1 34s ease-in-out infinite alternate; }
    .aura .a2 { animation: drift2 44s ease-in-out infinite alternate; }
    .aura .a3 { animation: drift3 52s ease-in-out infinite alternate; }
  }
  @keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9vw, 7vh, 0) scale(1.14); } }
  @keyframes drift2 { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-7vw, 12vh, 0) scale(.92); } }
  @keyframes drift3 { from { transform: translate3d(0,0,0) scale(.96); } to { transform: translate3d(-11vw, -8vh, 0) scale(1.12); } }

  h1, h2, h3, h4 { font-family: var(--font-d); margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
  h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; line-height: 1.1; }
  h3 { font-size: 18px; font-weight: 700; line-height: 1.25; }
  p { margin: 0; }
  a { color: var(--cobalto); }
  .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
  .sec { padding-block: 72px; scroll-margin-top: 84px; }
  .sec.tight { padding-block: 40px; }
  .lead { font-size: 17px; color: var(--tinta-2); max-width: 60ch; }
  .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
  .hl { color: var(--cobalto); }

  /* ── encabezado de sección: UN SOLO patrón en toda la página ─────
     marcador = etiqueta de 1 a 3 palabras · h2 = la idea · lead = apoyo (opcional) */
  .marker {
    display: inline-flex; align-items: center; gap: 9px;
    font: 700 11.5px/1 var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--cobalto-prof);
    background: rgba(255,255,255,.82); border: 1px solid var(--line-soft); border-radius: 999px;
    padding: 6px 15px 6px 6px;   /* SITIO-MEMORIA: sin backdrop-filter (sólo la barra lo lleva); el fondo sube .1 de alfa */
  }
  .marker .ico { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; display: grid; place-items: center; flex: none; }
  .marker .ico svg { width: 13px; height: 13px; }
  .marker b { font-weight: 800; color: var(--cobalto); }
  .head { display: grid; gap: 13px; margin-bottom: 40px; justify-items: start; }
  .head h2 { max-width: 21ch; }
  .head .lead { font-size: 17.5px; }
  .head.center { justify-items: center; text-align: center; }
  .head.center h2 { max-width: 23ch; }
  .head.center .lead { text-align: center; margin-inline: auto; }
  .split .copy > .marker { justify-self: start; }

  /* ── botones ─────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 12px;
    border-radius: 999px; padding: 9px 9px 9px 22px;
    font: 700 16px/1 var(--font-d); text-decoration: none; color: #fff;
    background: var(--cobalto); border: 0; cursor: pointer;
    box-shadow: 0 8px 22px rgba(43,89,224,.26);
  }
  .btn .arr { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--cobalto); display: grid; place-items: center; flex: none; }
  .btn .arr svg { width: 16px; height: 16px; }
  .btn:hover { background: var(--cobalto-prof); }
  .btn:focus-visible, .link:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; }
  /* Sin la píldora de la flecha el botón necesita su propio relleno.
     Va sin flecha justo debajo del carrusel: ahí una flecha apuntando a la
     derecha se lee como «siguiente tarjeta», no como «ir a la lista». */
  .btn.sin-flecha { padding: 15px 28px; }
  .btn.sm { padding: 7px 7px 7px 16px; font-size: 14px; }
  .btn.sm .arr { width: 28px; height: 28px; }
  .btn.wide { width: 100%; justify-content: center; padding: 13px 22px; font-size: 17px; }
  .btn.ghost { background: var(--surface); color: var(--cobalto); border: 1.5px solid var(--line); box-shadow: none; }
  .btn.ghost .arr { background: var(--chip); color: var(--cobalto); }
  .btn.ghost:hover { background: var(--wash); }
  .btn.wa { background: #15803f; box-shadow: 0 8px 22px rgba(21,128,63,.28); }
  .btn.wa .arr { color: #15803f; }
  .btn.wa:hover { background: #116b34; }
  /* ── WhatsApp: el botón oficial (F1-259k, 13-oct-2026). El logo oficial de WhatsApp, sin tocar, en
     blanco sobre el verde de WhatsApp (#25D366): se reconoce a la primera (el de antes, verde oscuro
     con el ícono de chat del sitio, «se ve muy opaco», Gabriel). Solo icono siempre: con texto era un
     segundo CTA compitiendo en cada pantalla con el CTA de la sección; como icono es mueble, no botón.
     Lo que se mueve es el botón (un aro que se abre dos veces cuando sale la invitación) y la
     invitación; el logo nunca se anima, ni se recolorea, ni se combina con otra marca (reglas de marca
     de Meta). 56 px: el tamaño de un botón flotante (antes 48). */
  .wa-float {
    position: fixed; right: 16px; bottom: calc(16px + var(--barra, 0px)); z-index: 60; display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; text-decoration: none;
    box-shadow: 0 8px 20px rgba(7, 54, 26, .26), 0 2px 5px rgba(7, 54, 26, .16);
  }
  .wa-float svg { width: 30px; height: 30px; display: block; }
  .wa-float::before {      /* el aro */
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .5);
  }
  @media (hover: hover) {
    .wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(7, 54, 26, .3), 0 3px 7px rgba(7, 54, 26, .18); }
  }
  .wa-float:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; }
  @media (prefers-reduced-motion: no-preference) {
    .wa-float.llama::before { animation: wa-aro 1.5s ease-out 2; }
  }
  @keyframes wa-aro {
    from { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
    to { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  }
  /* la invitación (F1-259k): un globo blanco arriba del botón, con su colita hacia él. teamon.js le
     pone el texto de la página y la muestra una vez por visita; sin JS no sale. */
  .wa-invita {
    position: fixed; right: 16px; bottom: calc(84px + var(--barra, 0px)); z-index: 61;
    width: max-content; max-width: min(272px, calc(100vw - 32px));
    display: flex; align-items: flex-start; gap: 4px;
    background: #fff; color: var(--tinta); border-radius: 16px; padding: 12px 6px 13px 15px;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .08);
    opacity: 0; transform: translateY(8px) scale(.97); transform-origin: 88% 100%;
    transition: opacity .22s ease, transform .22s ease;
  }
  .wa-invita[hidden] { display: none; }
  .wa-invita.visible { opacity: 1; transform: none; }
  .wa-invita::after {
    content: ""; position: absolute; right: 22px; bottom: -6px; width: 12px; height: 12px;
    background: #fff; border-radius: 2px; transform: rotate(45deg);
  }
  .wa-invita a { position: relative; z-index: 1; color: var(--tinta-2); text-decoration: none; font: 500 14.5px/1.4 var(--font-b); }
  .wa-invita a b { display: block; margin-bottom: 1px; font: 700 15px/1.3 var(--font-d); color: var(--tinta); }
  .wa-invita a:hover span, .wa-invita a:focus-visible span { text-decoration: underline; }
  .wa-invita a:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 4px; border-radius: 6px; }
  .wa-cierra {
    position: relative; z-index: 1; flex: none; display: grid; place-items: center;
    width: 28px; height: 28px; margin: -5px 0 0; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--tinta-3); cursor: pointer;
  }
  .wa-cierra svg { width: 14px; height: 14px; }
  .wa-cierra:hover { background: rgba(22, 24, 29, .06); color: var(--tinta); }
  .wa-cierra:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 1px; }
  @media (prefers-reduced-motion: reduce) {
    .wa-invita { transform: none; transition: opacity .15s linear; }
  }
  .link { display: inline-flex; align-items: center; gap: 6px; font: 600 15px var(--font-b); color: var(--cobalto); text-decoration: none; }
  .link svg { width: 16px; height: 16px; }
  .link:hover { text-decoration: underline; }
  @media (prefers-reduced-motion: no-preference) {
    .btn { transition: transform .15s ease, background .15s ease; }
    .btn:hover { transform: translateY(-1px); }
  }

  /* ── nav de píldora flotante (Ethosphere) ────────────────────── */
  .nav { position: sticky; top: 12px; z-index: 50; padding: 12px 16px 0; max-width: 1152px; margin: 0 auto; }
  .nav-in {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line-soft); border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: var(--shadow);
  }
  .nav .logo { display: inline-flex; align-items: center; gap: 9px; height: 36px; text-decoration: none; }
  .nav .logo .tm-word { height: 19px; width: auto; display: block; }

  /* ══ EL TIMÓN ══ La marca tiene dos lecturas y son la misma pieza.
     EN REPOSO es un BOTÓN DE ENCENDIDO: el aro con su hueco arriba y el vástago.
     EN CUANTO HAY SCROLL es un TIMÓN: el aro cierra el hueco, el vástago deja de
     existir y la rueda —ocho cabillas iguales— gira en el sentido en que vas:
     horario si bajas, antihorario si subes, tan rápido como te muevas.
     AL SOLTAR tiene física de ruleta: conserva la velocidad que le diste y la va
     perdiendo por fricción; ya lenta, sigue de largo hacia el mismo lado hasta
     entrar en la muesca (múltiplo de 45°) frenando parejo. Sólo cuando se detiene
     el aro vuelve a abrir su hueco arriba y la cabilla que quedó hasta arriba
     crece hacia adentro y se convierte en el vástago. Cuál de las ocho es depende
     de hasta dónde llegó. Un empujón muy chico no da vuelta: la muesca lo jala de
     regreso (hasta 12°), como cualquier rueda con retenes.

     Por eso las ocho cabillas son líneas completas de r=7 a r=26.5 y lo que cambia
     es cuánto se dibuja: normalmente sólo el tramo de afuera (r=16→26.5, una
     cabilla); la que queda arriba (.rey) se dibuja entera hasta r=26, que es
     exactamente el vástago del logo. Cero elementos que aparezcan o desaparezcan.

     Capas encimadas sobre el mismo eje: .sway (vaivén perpetuo de ±1.2°),
     .rueda (el giro por scroll, desde JS), .spin (los gestos) y .arranque (el
     asentamiento al cargar).

     Origen de giro: con un viewBox que no arranca en 0 0, `transform-origin` en px
     o en % se resuelve distinto según el motor y el eje queda fuera de la marca.
     Se amarra a la geometría: el círculo .eje (invisible) centra la caja del grupo
     y entonces fill-box + 50% 50% es el centro real en cualquier navegador.

     El degradado de las cabillas va en #gsp, que el JS contragira: así el color de
     la marca se queda quieto aunque la rueda dé vueltas y el vástago siempre tiene
     su color, caiga la cabilla que caiga. */
  /* Sin overflow:visible. El viewBox es -30 -30 60 60 y lo más externo del
     dibujo llega a r=26.5 con trazo 6.2, o sea 29.6: cabe de sobra. Con
     overflow visible, el filtro drop-shadow del estado .lit y los
     transform-box:fill-box de la animación dejaban que Chrome rasterizara
     fuera de la caja del SVG. isolation:isolate le da al filtro su propio
     contexto para que no se desborde. */
  .tm { width: 34px; height: 34px; display: block; flex: none; overflow: hidden; isolation: isolate; }
  .tm .sway, .tm .rueda, .tm .spin, .tm .arranque { transform-box: fill-box; transform-origin: 50% 50%; }
  /* peso de rueda para los gestos: carga hacia atrás, pasa de largo y asienta */
  .tm { --peso: cubic-bezier(.45, -.08, .25, 1.06); }
  @supports (animation-timing-function: linear(0, 1)) {
    .tm { --peso: linear(0, -0.011 3%, -0.03 7%, -0.024 11%, 0.008 15%, 0.075 21%, 0.19 28%, 0.35 35%, 0.53 42%, 0.70 49%, 0.83 56%, 0.92 62%, 0.98 68%, 1.018 75%, 1.03 81%, 1.019 88%, 1.005 94%, 1); }
  }

  /* ── los dos estados de la marca ──────────────────────────────── */
  /* el aro es un círculo con pathLength 360: 1 unidad = 1 grado. En reposo se
     dibujan 270° y el hueco de 90° queda centrado arriba; rodando se cierra. */
  .tm .ring { stroke-dasharray: 270 90; stroke-dashoffset: 45; }
  .tm.rodando .ring { stroke-dasharray: 360 0; stroke-dashoffset: 90; }
  /* cabilla: sólo el tramo de afuera. La de arriba (.rey) se dibuja entera. */
  .tm .sp { stroke-dasharray: 10.5 9; stroke-dashoffset: -9; stroke-width: 5.8; }   /* sólo el tramo de r=16 a r=26.5 */
  .tm .sp.rey { stroke-dasharray: 19 .5; stroke-dashoffset: 0; stroke-width: 6.2; } /* entera, de r=7 a r=26: el vástago */
  .tm .surge, .tm .surge-stem { opacity: 0; stroke: #f4feff; stroke-width: 5.4; }
  .tm .surge-stem { stroke: #a8e9ff; stroke-width: 5.9; }

  @media (prefers-reduced-motion: no-preference) {
    /* el aro cierra rápido (arrancaste) y abre despacio (te detuviste);
       el vástago crece y se retrae con la misma calma */
    .tm .ring { transition: stroke-dasharray .42s ease, stroke-dashoffset .42s ease; }
    .tm.rodando .ring { transition-duration: .18s; }
    .tm .sp { transition: stroke-dasharray .34s cubic-bezier(.2, .9, .3, 1), stroke-dashoffset .34s cubic-bezier(.2, .9, .3, 1), stroke-width .34s ease; }

    /* 1 · encendido al cargar: crece el aro y prenden las cabillas del eje hacia
       afuera; al soltar la animación, la de arriba se estira y sale el vástago.
       Relleno backwards a propósito: al terminar suelta el valor y las
       transiciones de arriba pueden trabajar. */
    .tm .ring { animation: tm-aro .8s cubic-bezier(.4, 0, .2, 1) .1s backwards; }
    .tm .sp { animation: tm-cabilla .4s ease-out backwards; animation-delay: calc(var(--i) * .055s + .42s); }
    .tm .arranque { animation: tm-asienta 1.2s cubic-bezier(.2, .9, .25, 1) .42s both; }
    .logo .tm { animation: tm-flash 1.1s ease-out .75s 1; }

    /* 2 · vaivén perpetuo: el barco fondeado también se mece */
    .tm .sway { animation: tm-vaiven 11s ease-in-out infinite alternate; }

    /* 3 · gestos. Cada uno arranca y termina en el logo canónico. */
    .tm.empujon .spin { animation: tm-empujon 1.15s ease-in-out both; }
    .tm.banda .spin { animation: tm-vuelta 1.6s both; animation-timing-function: var(--peso); }
    .tm.avante .spin { animation: tm-vuelta-doble 2.5s both; animation-timing-function: var(--peso); }

    /* 4 · con el circuito cerrado la corriente da la vuelta entera al aro y, al
       llegar arriba, el hueco se abre y el vástago sale encendido */
    .tm.surge-on .surge { animation: tm-corriente 1.3s cubic-bezier(.35, 0, .35, 1) both; }
    .tm.surge-on .surge-stem { animation: tm-vastago 1.3s ease-out both; }
    .logo .tm.lit { filter: drop-shadow(0 0 5px rgba(79, 195, 247, .7)); }
    .logo .tm { transition: filter .7s ease; }
    .logo:hover .tm, .logo:focus-visible .tm { filter: drop-shadow(0 0 6px rgba(79, 195, 247, .8)); }
  }

  @keyframes tm-aro { from { stroke-dasharray: 0 360; } to { stroke-dasharray: 270 90; } }
  @keyframes tm-cabilla { from { opacity: 0; } to { opacity: 1; } }
  @keyframes tm-asienta { 0% { rotate: -26deg; } 100% { rotate: 0deg; } }
  @keyframes tm-vaiven { from { rotate: -1.2deg; } to { rotate: 1.2deg; } }
  @keyframes tm-flash {
    0%, 40% { filter: drop-shadow(0 0 0 rgba(79,195,247,0)); }
    62% { filter: drop-shadow(0 0 10px rgba(79,195,247,.95)); }
    100% { filter: drop-shadow(0 0 0 rgba(79,195,247,0)); }
  }
  /* empujas una cabilla y la rueda se recentra sola, con su peso */
  @keyframes tm-empujon {
    0% { rotate: 0deg; } 18% { rotate: -21deg; } 42% { rotate: 7deg; }
    62% { rotate: -2.6deg; } 80% { rotate: 1deg; } 100% { rotate: 0deg; }
  }
  @keyframes tm-vuelta { from { rotate: 0deg; } to { rotate: 360deg; } }
  @keyframes tm-vuelta-doble { from { rotate: 0deg; } to { rotate: 720deg; } }
  /* la luz entra arriba (posición 270 de 360), da la vuelta entera y sale arriba */
  @keyframes tm-corriente {
    0% { opacity: 0; stroke-dashoffset: -240; }
    8% { opacity: 1; }
    72% { opacity: 1; stroke-dashoffset: -618; }
    82%, 100% { opacity: 0; stroke-dashoffset: -630; }
  }
  @keyframes tm-vastago { 0%, 80% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .tm .ring, .tm .sp { animation: none; } }
  .nav ul { display: flex; gap: 21px; white-space: nowrap; list-style: none; margin: 0; padding: 0; }
  .nav ul a { font: 500 14.5px var(--font-b); color: var(--tinta-2); text-decoration: none; }
  .nav ul a:hover { color: var(--tinta); }
  .nav .acts { display: flex; gap: 8px; align-items: center; }
  /* Móvil: en la barra mandan las pestañas. El botón de «Anótame» se va porque
     hay uno en el hero justo debajo y otro al pie de cada sección. */
  @media (max-width: 600px) {
    .nav { padding: 8px 12px 0; }
    .nav-in { padding: 6px 6px 6px 14px; gap: 10px; }
    .nav .acts { display: none; }
    .nav ul { gap: 16px; }
    .nav ul a { font-size: 14px; }
  }
  @media (max-width: 390px) {
    .nav .logo .tm-word { height: 16px; }
    .nav .logo { gap: 7px; }
    .nav ul { gap: 12px; }
    .nav ul a { font-size: 13px; }
  }
  @media (max-width: 640px) { .nav .acts .ghost { display: none; } }

  /* ── hero (InStore / Ethosphere: centrado, subtítulo en color, CTA píldora) ── */
  .hero { position: relative; overflow: clip; padding-block: 26px 22px; text-align: center; }
  @media (min-width: 760px) { .hero { padding-block: 40px 30px; } }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(60% 46% at 50% -4%, rgba(79,195,247,.28), transparent 72%),
      radial-gradient(34% 34% at 84% 26%, rgba(43,89,224,.12), transparent 70%),
      radial-gradient(34% 34% at 12% 30%, rgba(79,195,247,.14), transparent 70%);
  }
  .hero .wrap { display: grid; gap: 14px; justify-items: center; }
  .hero .chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--chip); color: var(--chip-ink);
    font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
    padding: 6px 12px 6px 8px; border-radius: 999px;
  }
  .hero .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cobalto); box-shadow: 0 0 0 4px rgba(43,89,224,.18); }
  .hero h1 { font-size: clamp(27px, 5.2vw, 54px); font-weight: 700; line-height: 1.04; letter-spacing: -0.028em; max-width: 21ch; }
  .hero .sub { font: 600 clamp(18px, 2.3vw, 24px)/1.3 var(--font-d); color: var(--cobalto); max-width: 34ch; letter-spacing: -0.01em; }
  .hero .lead { text-align: center; max-width: 64ch; }
  .hero .ctas { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; margin-top: 8px; }

  .hero-media { position: relative; max-width: 1040px; margin: 40px auto 0; padding: 0 16px 28px; }
  .hero-media .arch { position: relative; }
  .hero-media .ph, .hero-media .pic { aspect-ratio: 16 / 10; border-radius: 300px 300px 26px 26px / 220px 220px 26px 26px; }
  .hero-media .ph-tag { left: 50%; transform: translateX(-50%); }
  /* las tres propuestas de foto, encimadas; sólo una está .on */
  .marco { position: relative; }
  .marco .pic { display: block; width: 100%; }
  .marco .pic + .pic { position: absolute; inset: 0; height: 100%; }
  .marco .pic { opacity: 0; }
  .marco .pic.on { opacity: 1; }
  .js .marco .pic { transition: opacity .5s ease; }
  /* comparador temporal */
  .hero-pick { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
  .hp { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); color: var(--tinta-2); }
  .hp svg { width: 13px; height: 13px; }
  .hp:hover { border-color: var(--cobalto); color: var(--cobalto); }
  .hp.next svg { transform: scaleX(-1); }
  .hp-n { font: 500 12.5px var(--font-b); color: var(--tinta-3); }
  .hp-n b { color: var(--tinta-2); font-weight: 700; }
  .hp-n i { font-style: normal; }
  @media (max-width: 640px) { .hero-media .ph, .hero-media .pic { aspect-ratio: 4 / 3; } }

  /* ── avisos flotantes sobre la foto (Ethosphere) ────────────────
     Siete mensajes van rotando por tres ranuras fijas. Las ranuras viven en la
     banda ALTA y la BAJA del arco: ahí las tres fotos tienen techo, cielo o piso.
     Ninguna va al centro, que es donde están las caras. */
  .avisos { position: absolute; inset: 0; pointer-events: none; }
  .float {
    position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 10px;
    background: rgba(255,255,255,.97); border: 1px solid var(--line-soft); border-radius: 15px;
    padding: 10px 14px 10px 10px; box-shadow: var(--shadow-lg);
    font: 500 13.5px/1.35 var(--font-b); color: var(--tinta); text-align: left;
    width: max-content; max-width: min(300px, 40%);
  }
  .float .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--chip); color: var(--cobalto); display: grid; place-items: center; flex: none; }
  .float .dot svg { width: 15px; height: 15px; }
  .float .dot.ok { background: var(--verde-bg); color: var(--verde); }
  .float .dot.warn { background: var(--naranja-bg); color: var(--naranja); }
  .float[data-ranura="1"] { left: 0; top: 11%; }
  .float[data-ranura="2"] { right: 0; top: 20%; }
  .float[data-ranura="3"] { left: 7%; bottom: 6%; }
  .float { opacity: 0; transform: translateY(8px); }
  .float.vis { opacity: 1; transform: none; }
  .js .float { transition: opacity .42s ease, transform .42s cubic-bezier(.2,.85,.3,1); }
  @media (max-width: 760px) {
    .float { font-size: 12px; padding: 8px 12px 8px 8px; gap: 8px; max-width: min(260px, 62%); }
    .float .dot { width: 24px; height: 24px; }
    .float[data-ranura="1"] { top: 5%; }
    .float[data-ranura="2"] { top: 20%; }
  }
  /* En móvil no caben tres sin taparse ni salirse: queda una sola ranura, abajo
     y centrada sobre el piso de la foto, y por ahí pasan los siete mensajes. */
  @media (max-width: 640px) {
    .float[data-ranura="1"], .float[data-ranura="2"] { display: none; }
    .float[data-ranura="3"] { left: 50%; right: auto; bottom: 5%; transform: translateX(-50%) translateY(8px); max-width: 86%; }
    .float[data-ranura="3"].vis { transform: translateX(-50%); }
  }

  /* ── hueco de imagen (placeholder) ───────────────────────────── */
  .ph {
    position: relative; margin: 0; width: 100%; max-width: 100%;
    aspect-ratio: var(--ar, 4 / 3); border-radius: var(--r-lg); overflow: hidden;
    background-color: #eef2ff;
    background-image: repeating-linear-gradient(-45deg, rgba(43,89,224,.075) 0 10px, transparent 10px 24px);
    border: 2px dashed rgba(43,89,224,.5);
    display: grid; place-items: center; text-align: center; color: var(--cobalto-prof);
  }
  .ph-in { display: grid; gap: 5px; justify-items: center; padding: 14px; }
  .ph-ico { width: 46px; height: 46px; opacity: .85; }
  .ph-code { font: 700 15px var(--mono); letter-spacing: .04em; background: var(--cobalto); color: #fff; padding: 4px 11px; border-radius: 6px; }
  .ph-name { font: 500 12.5px var(--font-b); color: var(--tinta-2); }
  .ph-size { font: 500 12px var(--mono); color: var(--tinta-3); }
  .ph-tag {
    position: absolute; top: 12px; left: 12px; font: 700 10.5px var(--font-b); letter-spacing: .08em; text-transform: uppercase;
    color: var(--naranja); background: var(--naranja-bg); border: 1px solid var(--naranja-line); padding: 4px 9px; border-radius: 999px;
  }
  .ph.small .ph-ico { width: 30px; height: 30px; }
  .ph.small .ph-code { font-size: 12.5px; padding: 3px 8px; }
  .ph.small .ph-name { font-size: 11px; }
  .ph.small .ph-size { font-size: 10.5px; }
  .ph.small .ph-tag { top: 8px; left: 8px; font-size: 9px; padding: 3px 7px; }
  .ph.top { place-items: start center; }
  .ph.top .ph-in { padding-top: 48px; }
  .ph.real { background-color: #fff7ec; background-image: repeating-linear-gradient(-45deg, rgba(184,98,10,.09) 0 10px, transparent 10px 24px); border-color: rgba(184,98,10,.55); color: var(--naranja); }
  .ph.real .ph-code { background: var(--naranja); }
  .pic { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; border-radius: var(--r-lg); }

  /* ── franja de beneficios (lo que ganas, no cómo está hecho) ──── */
  .facts { border-block: 1px solid var(--line-soft); background: rgba(255,255,255,.88); }   /* SITIO-MEMORIA: sin backdrop-filter; +.1 de alfa */
  .facts .wrap { display: grid; gap: 18px; padding-block: 30px; }
  .facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 22px; }
  .facts li {
    display: flex; align-items: center; gap: 13px;
    font: 600 15.5px/1.3 var(--font-d); letter-spacing: -0.015em; color: var(--tinta);
  }
  .facts li + li { border-left: 1px solid var(--line-soft); padding-left: 22px; }
  .facts li .ico { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, rgba(43,89,224,.12), rgba(79,195,247,.2)); color: var(--cobalto); display: grid; place-items: center; flex: none; }
  .facts li .ico svg { width: 20px; height: 20px; }
  @media (prefers-reduced-motion: no-preference) {
    .js .facts li { opacity: 0; transform: translateY(10px); }
    .facts.in li { opacity: 1; transform: none; transition: opacity .6s ease var(--d), transform .6s cubic-bezier(.2,.8,.3,1) var(--d); }
  }
  @media (max-width: 900px) {
    .facts ul { grid-template-columns: repeat(2, 1fr); }
    .facts li + li { border-left: 0; padding-left: 0; }
    .facts li:nth-child(even) { border-left: 1px solid var(--line-soft); padding-left: 22px; }
  }
  @media (max-width: 520px) {
    .facts ul { grid-template-columns: 1fr; gap: 14px; }
    .facts li:nth-child(even) { border-left: 0; padding-left: 0; }
  }

  /* ── tarjetas "lo que te dice" (InStore: la cifra/cita es la protagonista) ── */
  .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  @media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
  .card {
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
    padding: 22px 22px 18px; display: grid; gap: 12px; align-content: start; grid-template-rows: auto auto 1fr auto auto;
  }
  .card .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--chip); color: var(--cobalto); display: grid; place-items: center; }
  .card .ico svg { width: 22px; height: 22px; }
  .card q {
    display: block; quotes: "«" "»";
    font: 600 17.5px/1.35 var(--font-d); letter-spacing: -0.01em; color: var(--tinta);
    border-left: 3px solid var(--cobalto); padding-left: 12px;
  }
  .card q::before { content: open-quote; } .card q::after { content: close-quote; }
  .card .why { font-size: 14px; color: var(--tinta-2); }
  .card .src { display: flex; gap: 6px; }
  .src span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; }

  /* ── secciones alternadas texto + medio (InStore "For Retailers") ── */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .split .copy { display: grid; gap: 16px; }
  .split .copy h2 { font-size: clamp(26px, 3.2vw, 36px); }
  .split .media { position: relative; }
  .split.rev .media { order: -1; }
  @media (max-width: 860px) {
    .split { grid-template-columns: 1fr; gap: 28px; }
    .split.rev .media { order: 0; }
  }
  .points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; color: var(--tinta); align-items: start; }
  .points li svg { width: 22px; height: 22px; color: var(--verde); margin-top: 1px; }
  .points li b { font-weight: 600; }

  /* ══ TELÉFONO ══ una sola pieza para toda la página.
     Proporción fija (9 : 19.3) para que nunca se deforme al redimensionar. */
  .fone {
    position: relative; flex: none; aspect-ratio: 9 / 19.3;
    width: var(--fw, min(268px, calc((100vh - 150px) * 0.4663)));
    width: var(--fw, min(268px, calc((100svh - 150px) * 0.4663)));
    background: linear-gradient(155deg, #3a3f52 0%, #12141d 24%, #0a0a14 70%, #22263a 100%);
    border-radius: 38px; padding: 7px;
    box-shadow: 0 2px 3px rgba(22,24,29,.16), 0 26px 60px rgba(10,10,20,.30), 0 0 0 1px rgba(255,255,255,.10) inset;
  }
  .fone .scr {
    position: relative; height: 100%; width: 100%; overflow: hidden; border-radius: 31px;
    display: flex; flex-direction: column; background: #ece5dd; color: var(--tinta);
  }
  .fone .isla { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 30%; height: 17px; background: #06070c; border-radius: 999px; z-index: 6; }
  .fone .isla::after { content: ""; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #1d2333; }

  /* barra de estado */
  .sb { display: flex; align-items: center; gap: 5px; padding: 7px 15px 5px; font: 600 10.5px var(--font-b); color: #fff; flex: none; }
  .sb b { font-weight: 700; letter-spacing: .01em; }
  .sb .sp { flex: 1; }
  .sb .sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; }
  .sb .sig i { display: block; width: 2.5px; background: currentColor; border-radius: 1px; }
  .sb .sig i:nth-child(1) { height: 3px; } .sb .sig i:nth-child(2) { height: 5px; }
  .sb .sig i:nth-child(3) { height: 7px; } .sb .sig i:nth-child(4) { height: 9px; }
  .sb .bat { width: 20px; height: 10px; border: 1.2px solid currentColor; border-radius: 3px; padding: 1.4px; position: relative; }
  .sb .bat::after { content: ""; position: absolute; right: -3px; top: 3px; width: 1.6px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; }
  .sb .bat i { display: block; height: 100%; width: 72%; background: currentColor; border-radius: 1px; }
  .sb .wf { width: 12px; height: 12px; }

  /* ── conversación estilo WhatsApp ─────────────────────────────── */
  .wa .sb { background: #075e54; color: #fff; padding-top: 9px; }
  .wa-top {
    display: flex; align-items: center; gap: 8px; flex: none;
    background: #075e54; color: #fff; padding: 5px 11px 9px;
  }
  .wa-top .bk { width: 15px; height: 15px; flex: none; opacity: .95; }
  .wa-top .av { width: 29px; height: 29px; border-radius: 50%; background: #0a0a14; display: grid; place-items: center; flex: none; }
  .wa-top .av svg { width: 18px; height: 18px; }
  .wa-top .nm { display: grid; line-height: 1.15; min-width: 0; margin-right: auto; }
  .wa-top .nm b { font: 600 13px var(--font-b); letter-spacing: .005em; }
  .wa-top .nm small { font-size: 10px; opacity: .82; }
  .wa-top .ic { width: 16px; height: 16px; flex: none; opacity: .95; }
  .wa-body {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    padding: 12px 8px 9px;
    background-color: #e7dfd6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23cfc4b8' stroke-width='1.1' stroke-linecap='round' opacity='.6'%3E%3Ccircle cx='17' cy='15' r='5'/%3E%3Cpath d='M52 11h11M57.5 5.5v11'/%3E%3Cpath d='M7 47c4.5-7 11-7 15.5 0'/%3E%3Ccircle cx='68' cy='44' r='3.4'/%3E%3Cpath d='M31 70h13M37.5 63.5v13'/%3E%3Cpath d='M67 74c3.5-4.5 8-4.5 11.5 0'/%3E%3Cpath d='M78 26l5 5-5 5-5-5z'/%3E%3C/g%3E%3C/svg%3E");
  }
  .wa-day { flex: none; align-self: center; background: rgba(255,255,255,.86); color: #55606a; font: 600 9px var(--font-b); letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 7px; box-shadow: 0 1px 1px rgba(11,20,26,.08); }
  .b {
    position: relative; align-self: flex-start; max-width: 86%;
    background: #fff; border-radius: 8px; padding: 6px 8px 5px;
    font-size: 11.6px; line-height: 1.38; color: #111b21;
    box-shadow: 0 1px .6px rgba(11,20,26,.14);
  }
  .b::after { content: ""; position: absolute; top: 0; left: -7px; width: 8px; height: 12px; background: #fff; clip-path: polygon(100% 0, 0 0, 100% 100%); }
  .b + .b::after, .b.cont::after { display: none; }
  .b.out { align-self: flex-end; background: #d9fdd3; }
  .b.out::after { left: auto; right: -7px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%); display: block; }
  .b p + p { margin-top: 4px; }
  .b .al { display: inline-block; font: 700 9px var(--font-b); letter-spacing: .07em; text-transform: uppercase; color: #b8620a; margin-bottom: 2px; }
  .b .clip { display: inline-flex; align-items: center; gap: 4px; color: #027eb5; font-weight: 600; }
  .b .clip svg { width: 11px; height: 11px; }
  /* botón de acción (WhatsApp Business permite un CTA con enlace bajo el mensaje) */
  .b .cta-wa { clear: both; display: flex; cursor: default; align-items: center; justify-content: center; gap: 6px;
    margin: 6px -8px -5px; padding: 8px 6px; border-top: 1px solid rgba(17,27,33,.10);
    font: 600 11.5px var(--font-b); color: #027eb5; text-decoration: none; }
  .b .cta-wa svg { width: 13px; height: 13px; }
  .b .t { float: right; display: inline-flex; align-items: center; gap: 2px; margin: 3px 0 0 9px; font-size: 9px; color: rgba(17,27,33,.45); }
  .b .t svg { width: 13px; height: 13px; color: #53bdeb; }
  .wa-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px 9px; background: #e7dfd6; }
  .wa-bar .fld { flex: 1; display: flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px; padding: 6px 10px; box-shadow: 0 1px 1px rgba(11,20,26,.08); }
  .wa-bar .fld svg { width: 15px; height: 15px; color: #8696a0; flex: none; }
  .wa-bar .fld i { flex: 1; font-style: normal; font-size: 11px; color: #a8b3ba; }
  .wa-bar .mic { width: 31px; height: 31px; border-radius: 50%; background: #00a884; display: grid; place-items: center; flex: none; }
  .wa-bar .mic svg { width: 15px; height: 15px; color: #fff; }
  @media (prefers-reduced-motion: no-preference) {
    .b { animation: pop .38s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--n, 0) * .55s + .7s); }
    .b.out { animation-delay: 0s; }
  }
  /* ── lo que cambia: carrusel de tres láminas ilustradas ──────────
     Antes eran tres tarjetas con viñetas que parecían pantallas de la app y
     repetían su registro. Ahora es una lámina a la vez: una ilustración
     vectorial grande manda y el texto se reduce a una frase. Oscuro a
     propósito: la página lleva dos secciones claras seguidas y aquí cambia
     el tono. Avanza solo cada 7 s y se detiene en cuanto alguien toca algo. */
  .carro { position: relative; margin-top: 30px; }
  .carro-v {
    position: relative; overflow: hidden; border-radius: var(--r-lg);
    background: linear-gradient(158deg, #1a1e30 0%, #0e1019 46%, #0a0a14 100%);
    box-shadow: var(--shadow-lg);
  }
  .carro-v::after {
    content: ""; position: absolute; right: -140px; top: -170px; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(79,195,247,.24), rgba(79,195,247,0) 66%); pointer-events: none; z-index: 0;
  }
  .carro-t { display: flex; width: 100%; }
  .js .carro-t { transition: transform .62s cubic-bezier(.32,.8,.32,1); }
  .dia {
    position: relative; z-index: 1; flex: 0 0 100%; min-width: 0;
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    align-items: center; gap: 30px; padding: 26px 32px 28px;
  }
  .dia-art { min-width: 0; }
  .dia-art { align-self: center; }
  .dia-tx { display: grid; gap: 12px; align-content: center; }
  .dia .et { font: 700 11px var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: #6fd8ff; }
  .dia h3 { font-size: clamp(23px, 2.7vw, 34px); line-height: 1.08; letter-spacing: -0.026em; color: #fff; text-wrap: balance; }
  .dia p { font-size: clamp(14.5px, 1.25vw, 16px); line-height: 1.5; color: #a9b1c5; max-width: 32ch; }
  /* controles */
  .carro-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
  .cn {
    width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); color: var(--tinta-2);
    transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .cn svg { width: 16px; height: 16px; }
  .cn:hover { border-color: var(--cobalto); color: var(--cobalto); box-shadow: var(--shadow); }
  .cn:active { transform: scale(.94); }
  .carro-dots { display: flex; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; }
  .carro-dots li { display: flex; }
  .carro-dots button {
    position: relative; overflow: hidden; width: 34px; height: 6px; border-radius: 99px; cursor: pointer;
    background: var(--line); border: 0; padding: 0; transition: width .3s ease, background-color .3s ease;
  }
  .carro-dots button:hover { background: #c3c8db; }
  .carro-dots button[aria-current="true"] { width: 62px; background: var(--line-soft); }
  .carro-dots button i {
    position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
    background: var(--cobalto); border-radius: 99px;
  }
  .carro-dots button[aria-current="true"] i { transform: scaleX(1); }
  .cuenta { font: 600 12px var(--mono); color: var(--tinta-3); letter-spacing: .04em; }
  /* la lámina: ilustración vectorial en su propio panel dentro de la tarjeta.
     Las tres se generaron encadenadas en una sola conversación de Gemini para que
     compartan estilo, grosor de línea, proporción de figura y paleta. Su fondo
     propio (#161c39) es un poco más claro que la tarjeta: por eso lleva esquina
     redonda y un filo de un píxel, para que se lea como panel y no como parche. */
  .dia-art img {
    display: block; width: 100%; height: auto; border-radius: 16px;
    border: 1px solid rgba(255,255,255,.07); box-shadow: 0 18px 40px rgba(5,7,14,.34);
  }
  @media (prefers-reduced-motion: no-preference) {
    .js .dia-art img { opacity: 0; transform: translateY(16px) scale(.985); }
    .dia.is-active .dia-art img { animation: lam-entra .72s cubic-bezier(.2,.85,.3,1) both; }
    @keyframes lam-entra { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
    .carro-dots button[aria-current="true"] i { transform: scaleX(0); }
    .carro.anda .carro-dots button[aria-current="true"] i { animation: dot-avanza 7s linear both; }
    @keyframes dot-avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
  @media (max-width: 900px) {
    .dia { grid-template-columns: 1fr; gap: 16px; padding: 26px 26px 30px; justify-items: center; text-align: center; }
    .dia-art { width: 100%; max-width: 460px; order: -1; }

    .dia p { max-width: 42ch; }
    .dia-tx { justify-items: center; }
  }
  @media (max-width: 560px) {
    .dia { padding: 20px 18px 26px; }

    .carro-nav { gap: 12px; }
    .cn { width: 36px; height: 36px; }
    .carro-dots button { width: 26px; }
    .carro-dots button[aria-current="true"] { width: 48px; }
  }
  .cn.next svg { transform: scaleX(-1); }
  @media (prefers-reduced-motion: reduce) { .js .carro-t { transition: none; } }
  /* ── la hoja del plan semanal: se ve como el PDF que le llega a cada quien ── */
  /* la hoja ya no se encima sobre la foto: va debajo, alineada, en su propia caja */
  .split .media.pila { display: grid; gap: 18px; justify-items: center; }
  .split .media.pila .pic { width: 100%; }
  .split .media.pila .hoja { position: static; left: auto; right: auto; bottom: auto; width: min(100%, 330px); rotate: -1.2deg; }
  @media (max-width: 480px) { .split .media.pila .hoja { rotate: 0deg; margin-top: 0; } }
  /* los números amarran cada bullet con su bloque de la hoja */
  .points.liga-hoja li { grid-template-columns: 26px 1fr; align-items: start; }
  .points .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--chip); color: var(--cobalto-prof); font: 700 12px var(--font-d); margin-top: 1px; }
  .points.liga-hoja li.hot .n { background: var(--cobalto); color: #fff; }
  .points.liga-hoja li { border-radius: 10px; padding: 4px 8px; margin-inline: -8px; transition: background .25s ease; }
  .points.liga-hoja li.hot { background: var(--wash); }
  .pie-liga { font-size: 14px; color: var(--tinta-3); margin-top: 2px; }
  .hoja .bl { border-radius: 8px; transition: background .25s ease, box-shadow .25s ease; }
  .hoja .bl.hot { background: var(--wash); box-shadow: 0 0 0 6px var(--wash), 0 0 0 7.5px var(--chip); }
  .hoja i.n { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%;
    background: var(--cobalto); color: #fff; font: 700 8.5px/1 var(--font-d); font-style: normal; vertical-align: 1px; margin-right: 3px; }
  .split .media .hoja {
    position: absolute; left: -14px; bottom: -9%; width: min(56%, 250px); z-index: 3;
    background: #fff; border: 1px solid var(--line-soft); border-radius: 12px;
    box-shadow: 0 2px 4px rgba(22,24,29,.06), 0 26px 54px rgba(22,24,29,.20);
    padding: 13px 14px 12px; display: grid; gap: 8px; rotate: -2.2deg;
    font-size: 10.5px; line-height: 1.42; color: var(--tinta-2);
  }
  .hoja header { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
  .hoja .mk { height: 13px; width: auto; }
  .hoja .sem { font: 600 8.5px var(--font-b); letter-spacing: .04em; color: var(--tinta-3); }
  .hoja h4 { font: 700 13.5px var(--font-d); letter-spacing: -0.015em; color: var(--tinta); }
  .hoja .tt { display: block; font: 700 8px var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 4px; }
  .hoja .bl { display: grid; gap: 3px; }
  .hoja p { display: grid; grid-template-columns: 13px 1fr; gap: 6px; align-items: start; }
  .hoja p svg { width: 13px; height: 13px; color: var(--verde); margin-top: 1px; flex: none; }
  .hoja p > span { min-width: 0; }
  .hoja b { color: var(--tinta); font-weight: 600; }
  .hoja .cita { border-left: 2.5px solid var(--cielo); padding-left: 8px; font-style: italic; color: var(--tinta); }
  .hoja .cita small { display: block; font-style: normal; font-size: 8.5px; color: var(--tinta-3); margin-top: 2px; }
  .hoja .foco-sem { background: var(--wash); border: 1px solid var(--chip); border-radius: 9px; padding: 8px 9px; }
  .hoja .foco-sem p { grid-template-columns: 1fr; }
  .hoja .rail { position: relative; height: 6px; border-radius: 3px; background: #dde4f7; margin-top: 6px; }
  .hoja .rail i { display: block; height: 100%; width: 40%; border-radius: 3px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
  .hoja .rail .meta { position: absolute; left: 60%; top: -3px; bottom: -3px; width: 1.5px; background: var(--cobalto); font: 700 7px var(--font-b); color: transparent; }
  .hoja .rail .meta::after { content: "meta"; position: absolute; left: 4px; top: -1px; color: var(--cobalto-prof); letter-spacing: .06em; text-transform: uppercase; }
  .hoja footer { border-top: 1px solid var(--line-soft); padding-top: 7px; font-size: 9.5px; color: var(--tinta-3); }
  /* de 860 a 1200 la columna del medio ya no tiene aire a la izquierda */
  @media (max-width: 1200px) { .split .media .hoja { left: 0; } }
  @media (max-width: 860px) { .split .media .hoja { left: auto; right: 2%; bottom: -6%; width: min(70%, 250px); } }
  @media (max-width: 480px) { .split .media .hoja { position: static; width: 100%; rotate: 0deg; margin-top: 14px; } }
  @media (prefers-reduced-motion: no-preference) {
    .js .hoja { opacity: 0; transform: translateY(18px) rotate(-2.2deg) scale(.97); }
    .hoja.in { opacity: 1; transform: none; rotate: -2.2deg; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.9,.3,1); }
    .js .hoja > *:not(header) { opacity: 0; transform: translateY(7px); }
    .hoja.in > *:not(header) { opacity: 1; transform: none; transition: opacity .5s ease var(--d), transform .5s cubic-bezier(.2,.9,.3,1) var(--d); }
    .js .hoja .rail i { width: 0; }
    .hoja.in .rail i { width: 40%; transition: width 1s cubic-bezier(.2,.8,.3,1) 1.1s; }
  }

  /* ── privacidad ──────────────────────────────────────────────── */
  .priv-note { font-size: 13.5px; color: var(--tinta-2); border-top: 1px solid var(--line-soft); padding-top: 14px; }

  /* ── precio + piloto ─────────────────────────────────────────── */
  .offer { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: stretch; }
  @media (max-width: 860px) { .offer { grid-template-columns: 1fr; } }
  .incluye { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 26px; display: grid; grid-template-columns: 1fr 200px; gap: 16px 22px; align-content: start; }
  .incluye .kit { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  @media (max-width: 560px) { .incluye { grid-template-columns: 1fr; } .incluye .kit { grid-column: 1; grid-row: auto; max-width: 260px; } }
  .incluye h3 { font-size: 24px; }
  .incluye .points li { font-size: 14.5px; }
  .espera { position: relative; overflow: hidden; background: var(--base); color: var(--hueso); border-radius: var(--r-lg); padding: 26px; display: grid; gap: 12px; align-content: start; }
  .espera .eyebrow { color: var(--cielo); }
  .espera h3 { font-size: 26px; max-width: 16ch; }
  .espera p { font-size: 15px; opacity: .92; max-width: 40ch; }
  .espera .btn { justify-self: start; margin-top: 6px; background: #fff; color: var(--cobalto-prof); box-shadow: none; }
  .espera .btn .arr { background: var(--cobalto); color: #fff; }
  .espera .btn:hover { background: var(--hueso); }
  .espera::after {
    content: ""; position: absolute; right: -70px; bottom: -90px; width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(79,195,247,.42), rgba(79,195,247,0) 66%); pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) { .espera::after { animation: breathe 7s ease-in-out infinite alternate; } }
  @keyframes breathe { from { transform: scale(.9); opacity: .75; } to { transform: scale(1.12); opacity: 1; } }
  .espera > * { position: relative; z-index: 1; }
  .espera ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
  .espera li { display: flex; gap: 8px; align-items: center; }
  .espera li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cielo); flex: none; }

  /* ── para quién: afirmaciones en tipografía grande, sin ejemplos ── */
  .quien { display: grid; gap: 26px; }
  .ifs { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
  .ifs li {
    display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 18px; align-items: baseline;
    padding: 24px 4px; border-bottom: 1px solid var(--line);
  }
  .ifs .n { font: 700 13px/1 var(--font-d); color: var(--cobalto); opacity: .55; font-variant-numeric: tabular-nums; }
  .ifs p { font: 700 clamp(20px, 2.7vw, 32px)/1.22 var(--font-d); letter-spacing: -0.028em; color: var(--tinta); max-width: 34ch; }
  .ifs .ok { align-self: center; width: 26px; height: 26px; border-radius: 50%; background: var(--chip); color: var(--cobalto); display: grid; place-items: center; }
  .ifs .ok svg { width: 15px; height: 15px; }
  .ifs .hl { background: linear-gradient(180deg, transparent 62%, rgba(79,195,247,.42) 62%); color: inherit; padding-inline: 1px; }
  @media (prefers-reduced-motion: no-preference) {
    .js .ifs li { opacity: 0; transform: translateY(14px); }
    .ifs.in li { opacity: 1; transform: none; transition: opacity .7s ease var(--d), transform .7s cubic-bezier(.2,.8,.3,1) var(--d); }
    .ifs li { transition: background .25s ease; }
    .ifs li:hover { background: rgba(255,255,255,.55); }
  }
  .quien .kicker {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font: 700 clamp(19px, 2.3vw, 25px)/1.25 var(--font-d); letter-spacing: -0.02em; color: var(--cobalto-prof);
  }
  .quien .kicker .tm { width: 30px; height: 30px; }
  @media (max-width: 560px) { .ifs li { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 18px 2px; } .ifs .ok { display: none; } }

  /* ── lista de espera: una pregunta a la vez ─────────────────────
     El formulario dejó de ser una rejilla de ocho campos y pasó a su propia
     sección, con el ritmo del alta de ElevenLabs: una pregunta grande, su
     ayuda corta, y Enter para seguir. Se ve dónde vas y cuánto falta. */
  .anotarme { background: linear-gradient(180deg, var(--wash), var(--ground)); }
  .anotarme .wrap { max-width: 760px; }
  .paso-card {
    scroll-margin-top: 92px;
    position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: 0;
  }
  .barra { height: 3px; background: var(--line-soft); }
  .barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g1), var(--g2)); border-radius: 0 3px 3px 0; }
  .js .barra i { transition: width .5s cubic-bezier(.3,.9,.3,1); }
  .paso-in { padding: 30px 34px 26px; }
  .pf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  .pf-cuenta { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
  .pf-atras { display: inline-flex; align-items: center; gap: 5px; font: 600 13px var(--font-b); color: var(--tinta-3); background: 0; border: 0; padding: 0; cursor: pointer; }
  .pf-atras svg { width: 13px; height: 13px; }
  .pf-atras:hover { color: var(--cobalto); }
  .pf-atras[hidden] { visibility: hidden; display: inline-flex !important; pointer-events: none; }
  .pf-pista { position: relative; min-height: 150px; }
  .pf { display: none; }
  .pf.on { display: grid; gap: 14px; align-content: start; }
  @media (prefers-reduced-motion: no-preference) {
    .pf.on { animation: pf-entra .42s cubic-bezier(.2,.9,.3,1) both; }
    @keyframes pf-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  }
  .pf-q { font: 700 clamp(21px, 2.6vw, 29px)/1.2 var(--font-d); letter-spacing: -0.022em; color: var(--tinta); max-width: 22ch; text-wrap: balance; }
  .pf-h { font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); max-width: 46ch; margin-top: -4px; }
  .pf input[type="text"], .pf input[type="tel"] {
    width: 100%; font: 400 clamp(18px, 2vw, 22px) var(--font-b); color: var(--tinta); background: 0;
    padding: 8px 2px 12px; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; appearance: none;
  }
  .pf input:focus { outline: 0; border-bottom-color: var(--cobalto); }
  .pf input::placeholder { color: #b6bbcb; }
  .pf .pills { gap: 9px; }
  .pf .pill span { padding: 11px 17px; font-size: 14.5px; }
  .pf .err { font: 600 13px var(--font-b); color: var(--naranja); min-height: 18px; }
  .pf-pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
  .pf-pie .enter { font: 500 12.5px var(--font-b); color: var(--tinta-3); }
  .pf-pie .enter b { font-weight: 700; color: var(--tinta-2); background: var(--hueso); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
  .anotarme .fine { margin-top: 14px; font-size: 12.5px; color: var(--tinta-3); text-align: center; }
  .anotarme .fine a { color: var(--tinta-2); }
  @media (max-width: 560px) {
    .paso-in { padding: 24px 20px 22px; }
    .pf-pista { min-height: 150px; }
    .pf-pie { gap: 12px; }
    .pf-pie .enter { display: none; }
    .pf-pie .btn { width: 100%; justify-content: center; }
  }
  /* ── formulario de lista de espera (InStore: dos columnas, etiquetas arriba) ── */
  .lista { background: linear-gradient(180deg, var(--ground), var(--wash)); }
  /* la narrativa de la lista de espera entra cuando llegas desde un CTA */
  @media (prefers-reduced-motion: no-preference) {
    .lista .head.pop h1 { animation: popin .65s cubic-bezier(.2,.9,.3,1) both; }
    .lista .head.pop .lead { animation: popin .65s cubic-bezier(.2,.9,.3,1) .12s both; }
    .form-card.pop { animation: ring 1.5s ease-out .25s both; }
  }
  @keyframes popin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes ring {
    0% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(43,89,224,.45); }
    70% { box-shadow: var(--shadow-lg), 0 0 0 14px rgba(43,89,224,0); }
    100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(43,89,224,0); }
  }
  .lista .grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 28px; align-items: start; }
  @media (max-width: 900px) { .lista .grid { grid-template-columns: 1fr; } }
  .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 26px; }
  .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; }
  .fields .full { grid-column: 1 / -1; }
  @media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
  .field { display: grid; gap: 6px; font: 600 12.5px var(--font-b); color: var(--tinta-2); }
  fieldset.field { min-width: 0; }
  .field input, .field select {
    width: 100%; font: 400 15.5px var(--font-b); color: var(--tinta); background: #fff;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; appearance: none; -webkit-appearance: none;
  }
  .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
  .field input:focus, .field select:focus { outline: 2px solid var(--cielo); outline-offset: 1px; border-color: var(--cobalto); }
  .field input::placeholder { color: #a3a8b8; }
  .pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .pill { position: relative; }
  .pill input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
  .pill span { display: inline-block; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font: 500 13.5px/1.2 var(--font-b); color: var(--tinta); cursor: pointer; background: #fff; }
  .pill input:checked + span { background: var(--chip); border-color: var(--cobalto); color: var(--chip-ink); font-weight: 600; }
  .pill input:focus-visible + span { outline: 2px solid var(--cielo); outline-offset: 2px; }
  .pill span:hover { border-color: var(--cobalto); }
  .pill.chk span { padding-left: 32px; position: relative; }
  .pill.chk span::before {
    content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; border: 1.5px solid var(--line); border-radius: 4px; background: #fff;
  }
  .pill.chk input:checked + span::before { background: var(--cobalto); border-color: var(--cobalto); }
  .pill.chk span::after {
    content: ""; position: absolute; left: 15px; top: 50%; width: 6px; height: 3px; opacity: 0;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-70%) rotate(-45deg);
  }
  .pill.chk input:checked + span::after { opacity: 1; }
  .hint { font: 400 12px var(--font-b); color: var(--tinta-3); margin-top: -1px; }
  legend.lg { padding: 0; margin-bottom: 8px; font: 600 12.5px var(--font-b); color: var(--tinta-2); }
  legend.lg .op { font-weight: 400; color: var(--tinta-3); text-transform: none; letter-spacing: 0; }
  .fine { font-size: 12.5px; color: var(--tinta-3); margin-top: 12px; text-align: center; }
  .fine a { color: var(--tinta-2); }
  .done { display: none; gap: 12px; text-align: center; padding: 20px 8px; }
  .done .ok { width: 56px; height: 56px; border-radius: 50%; background: var(--verde-bg); color: var(--verde); display: grid; place-items: center; margin: 0 auto; }
  .done .ok svg { width: 28px; height: 28px; }
  .done h3 { font-size: 24px; }
  .done p { color: var(--tinta-2); }
  form.sent .fields, form.sent .btn, form.sent .fine { display: none; }
  form.sent .paso-in, form.sent .barra { display: none; }
  .paso-card.sent { padding-block: 10px; }
  form.sent .done { display: grid; }
  .after { display: grid; gap: 18px; }
  .after ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: paso; }
  .after li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; counter-increment: paso; }
  .after li::before { content: counter(paso); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font: 700 13px var(--font-d); color: var(--cobalto); }
  .after li b { display: block; font-weight: 600; }
  .after li span { grid-column: 2; font-size: 14px; color: var(--tinta-2); }
  .founder { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; padding: 12px; }
  .founder .ph, .founder .pic { border-radius: 12px; }
  /* Hueco de IMG-10: mientras no haya foto real de quien contesta, va el símbolo.
     No se pone una cara generada: sería inventar a una persona que no existe. */
  .founder .sello {
    position: relative; width: 96px; aspect-ratio: 1 / 1; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(150deg, var(--cobalto) 0%, var(--cobalto-prof) 52%, #123 100%); color: #fff; overflow: hidden;
  }
  .founder .sello::after {
    content: ""; position: absolute; right: -26px; top: -30px; width: 96px; height: 96px; border-radius: 50%;
    background: radial-gradient(circle, rgba(79,195,247,.5), rgba(79,195,247,0) 68%);
  }
  .founder .sello .sim { width: 40px; height: 40px; }
  .founder .sello .chat { position: absolute; right: 9px; bottom: 9px; width: 17px; height: 17px; color: #9fe1ff; }
  .founder p { font-size: 14px; color: var(--tinta-2); }
  .founder p b { color: var(--tinta); font-weight: 600; display: block; }

  /* ══════════════════════════════════════════════════════════════
     REV 8 · MÓVIL PRIMERO. Todo lo de aquí abajo se escribe para el
     teléfono y crece con min-width. El escritorio es el segundo caso,
     no el primero. Lo anterior a este bloque sigue en max-width: se
     dejó así a propósito, invertir mil líneas ya probadas no cambia
     nada en pantalla y sí rompe cosas.
     ══════════════════════════════════════════════════════════════ */

  /* ── la barra marca en qué página estás ────────────────────────── */
  .nav ul a[aria-current="page"] { color: var(--cobalto); font-weight: 600; }

  /* ── CTA al pie de cada sección ────────────────────────────────── */
  .cierre { display: grid; gap: 12px; justify-items: center; text-align: center; margin-top: 30px; }
  .hero .cierre { margin-top: 14px; }
  .cierre .btn { width: 100%; justify-content: center; }
  .cierre .link { font-size: 14px; }
  @media (min-width: 560px) {
    .cierre { grid-auto-flow: column; justify-content: center; align-items: center; gap: 18px; }
    .cierre .btn { width: auto; }
  }

  /* los tres pasos de «qué pasa después», arriba del formulario */
  .after-3 { list-style: none; counter-reset: q; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
  .after-3 li {
    counter-increment: q; position: relative; display: grid; gap: 2px;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px;
    padding: 14px 16px 14px 50px;
  }
  .after-3 li::before {
    content: counter(q); position: absolute; left: 15px; top: 14px;
    width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
    background: var(--chip); color: var(--cobalto-prof); font: 700 11px var(--font-d);
  }
  .after-3 b { font: 600 15px var(--font-b); color: var(--tinta); }
  .after-3 span { font-size: 13.5px; color: var(--tinta-2); }
  @media (min-width: 760px) {
    .after-3 { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
  }
  /* ── el carrusel del hero: una tarjeta a la vez, se desliza ────── */
  .carril { position: relative; margin-top: 16px; }
  .carril-t {
    display: flex; gap: 12px; list-style: none; margin: 0; padding: 4px 16px 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .carril-t::-webkit-scrollbar { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes cd-empujon {
      0%, 100% { transform: translateX(0); }
      38%      { transform: translateX(-26px); }
      72%      { transform: translateX(5px); }
    }
    .carril.pista .cd { animation: cd-empujon 1.1s cubic-bezier(.32,.72,.3,1) 2; }
  }
  .cd {
    position: relative; flex: 0 0 auto; scroll-snap-align: center;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 20px;
    box-shadow: var(--shadow-lg); overflow: hidden;
  }
  .cd-f { position: relative; display: block; }
  /* La tarjeta se dimensiona por ALTO. Si se dimensiona por ancho, en un teléfono
     bajo el hero mide 1 200 px y el CTA se va tres pantallas abajo. Aquí la foto
     manda su altura y el ancho sale de la proporción 4:5. */
  .cd-f img {
    display: block; width: auto;
    height: clamp(250px, 45vh, 430px);
    height: clamp(250px, 45svh, 430px);
    /* 3:4: la proporción vertical nativa de Flow (no ofrece 4:5). La foto
       entra tal cual, cero recorte — que era todo el problema. */
    aspect-ratio: 3 / 4; object-fit: cover;
  }
  /* el copy va SOBRE la foto, con su velo: así la tarjeta es sólo la imagen */
  .cd-tx {
    position: absolute; left: 0; right: 0; top: 0; z-index: 2; margin: 0;
    padding: 11px 13px 30px; color: #fff; text-align: left; text-wrap: balance;
    font: 600 clamp(13.5px, 3.5vw, 15.5px)/1.3 var(--font-d); letter-spacing: -0.012em;
    text-shadow: 0 1px 12px rgba(6,8,14,.5);
    background: linear-gradient(to bottom, rgba(6,8,14,.92) 22%, rgba(6,8,14,.62) 62%, rgba(6,8,14,0) 100%);
  }
  /* la tarjetita de interfaz encima de la foto */
  .ov {
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
    background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.7); border-radius: 12px;
    box-shadow: 0 2px 4px rgba(22,24,29,.10), 0 12px 26px rgba(22,24,29,.22);
    padding: 7px 9px; font: 500 10px/1.28 var(--font-b); color: var(--tinta); text-align: left;
  }
  .ov.wa { background: #fff; border-radius: 12px 12px 12px 4px; }
  .ov .ovh { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 700 9px var(--font-b); letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3); }
  .ov .ovh svg { width: 12px; height: 12px; color: var(--cobalto); }
  .ov .vivo { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--verde); }
  .ov .vivo i { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
  .ov b { font-weight: 600; }
  .ov ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
  .ov li { display: flex; align-items: center; gap: 6px; }
  .ov li svg { width: 12px; height: 12px; flex: none; color: var(--verde); }
  .ov li.ojo svg { color: var(--naranja); }
  .ov li span { margin-left: auto; font: 700 11px var(--font-d); font-variant-numeric: tabular-nums; }
  .ov .hr { display: block; margin-top: 5px; font-size: 9.5px; color: var(--tinta-3); text-align: right; }
  .ov .env { display: block; margin: 7px -12px -10px; padding: 7px; border-top: 1px solid var(--line-soft);
    font: 600 10.5px var(--font-b); color: #027eb5; text-align: center; }
  .ov .num { display: block; font: 700 18px/1 var(--font-d); color: var(--tinta); margin-bottom: 2px; }
  .carril-n { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 4px; }
  /* El punto mide 8 px pero el área tocable mide 44: es el mínimo de WCAG 2.2
     para un control, y estos puntos son el control principal del carrusel. */
  .carril-n button { position: relative; width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
    cursor: pointer; background: #c3c8db; }
  /* F1-259m: 24 de ancho (WCAG 2.5.8) y 44 de alto que no llegan al botón principal: arriba 22 (entran
     4 px en la orilla de la tarjeta, que no se toca) y abajo 14, lo que hay hasta «Quiero acceso anticipado» */
  .carril-n button::after { content: ""; position: absolute; inset: -22px -8px -14px; }
  .carril-n button[aria-current="true"] { background: var(--cobalto); width: 24px; border-radius: 99px; }
  .js .carril-n button { transition: width .3s ease, background-color .3s ease; }
  /* F1-259l: los puntos vienen en el HTML; sin JavaScript no hacen nada, así que no se ven (la fila queda vacía, como antes) */
  html:not(.js) .carril-n button { display: none; }
  .carril-fl { display: none; }
  @media (min-width: 900px) {
    .carril-t { padding-inline: max(16px, calc((100vw - 1120px) / 2)); gap: 18px; }
    .cd-f img { height: clamp(292px, 44vh, 470px); height: clamp(292px, 44svh, 470px); }
    .ov { font-size: 11.5px; padding: 10px 12px; }
    .carril-fl {
      display: grid; place-items: center; position: absolute; top: calc(50% - 40px); z-index: 3;
      width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
      background: var(--surface); border: 1px solid var(--line); color: var(--tinta-2); box-shadow: var(--shadow);
    }
    .carril-fl:hover { border-color: var(--cobalto); color: var(--cobalto); }
    .carril-fl svg { width: 15px; height: 15px; }
    .carril-fl.izq { left: 10px; } .carril-fl.der { right: 10px; }
    .carril-fl.der svg { transform: scaleX(-1); }
  }

  /* ── ¿Qué hace el sistema? cuatro pasos ilustrados ─────────────── */
  .tuberia { display: grid; gap: 10px; }
  .tb {
    position: relative; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 14px; align-items: start;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; padding: 16px;
  }
  .tb .fig { width: 56px; height: 56px; border-radius: 14px; background: var(--wash); display: grid; place-items: center; }
  .tb .fig svg { width: 34px; height: 34px; }
  .tb .n { font: 700 10px var(--mono); letter-spacing: .12em; color: var(--cobalto); }
  .tb h3 { font-size: 17px; margin-top: 2px; }
  .tb p { font-size: 14px; line-height: 1.5; color: var(--tinta-2); margin-top: 5px; }
  @media (max-width: 759px) {
    /* compacto: la sección entera cabe de un vistazo en un teléfono */
    .tb { grid-template-columns: 40px minmax(0,1fr); gap: 11px; padding: 12px 13px; border-radius: 13px; }
    .tb .fig { width: 40px; height: 40px; border-radius: 10px; }
    .tb .fig svg { width: 24px; height: 24px; }
    .tb h3 { font-size: 15.5px; margin-top: 0; }
    .tb p { font-size: 13px; line-height: 1.4; margin-top: 3px; }
  }
  @media (min-width: 760px) {
    .tuberia { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .tb { grid-template-columns: 1fr; text-align: left; padding: 20px 18px 22px; }
    .tb .fig { width: 64px; height: 64px; }
    .tb .fig svg { width: 38px; height: 38px; }
    .tuberia .tb:not(:last-child)::after {
      content: ""; position: absolute; right: -11px; top: 46px; width: 14px; height: 2px;
      background: var(--line); border-radius: 2px;
    }
  }

  /* ── preguntas frecuentes ──────────────────────────────────────── */
  .faq { display: grid; gap: 10px; max-width: 760px; margin-inline: auto; }
  .faq details {
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden;
  }
  .faq summary {
    list-style: none; cursor: pointer; padding: 16px 44px 16px 18px; position: relative;
    font: 600 15.5px/1.35 var(--font-d); letter-spacing: -0.012em; color: var(--tinta);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; position: absolute; right: 18px; top: 21px; width: 9px; height: 9px;
    border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3);
    transform: rotate(45deg); transform-origin: 70% 70%;
  }
  .faq details[open] summary::after { transform: rotate(-135deg); }
  .faq details[open] summary { color: var(--cobalto-prof); }
  .faq .rp { padding: 0 18px 17px; font-size: 14.5px; line-height: 1.58; color: var(--tinta-2); display: grid; gap: 9px; }
  .faq .rp b { color: var(--tinta); font-weight: 600; }
  .faq .rp ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
  .faq h3.grupo { font: 700 11px var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-top: 18px; }
  .faq h3.grupo:first-child { margin-top: 0; }
  @media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: transform .2s ease; } }

  /* ── cuestionario ¿es para ti? ─────────────────────────────────── */
  .quiz-op { display: grid; gap: 9px; }
  .quiz-op button {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 13px; padding: 14px 15px;
    font: 500 15px/1.35 var(--font-b); color: var(--tinta);
  }
  .quiz-op button:hover { border-color: var(--cobalto); background: var(--wash); }
  .quiz-op button .k {
    width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center;
    background: var(--hueso); border: 1px solid var(--line); font: 700 11px var(--mono); color: var(--tinta-3);
  }
  .quiz-op button:hover .k { background: var(--chip); border-color: var(--chip); color: var(--cobalto-prof); }
  .veredicto { display: none; scroll-margin-top: 92px; }
  .veredicto.on { display: grid; gap: 16px; }
  .ver-si { display: flex; align-items: center; gap: 11px; font: 700 clamp(22px, 5vw, 30px)/1.15 var(--font-d); letter-spacing: -0.022em; color: var(--tinta); }
  .ver-si .ok { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--verde-bg); color: var(--verde); display: grid; place-items: center; }
  .ver-si .ok svg { width: 22px; height: 22px; }
  .ver-pq { display: grid; gap: 9px; }
  .ver-pq li { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
  .ver-pq li svg { width: 20px; height: 20px; color: var(--verde); margin-top: 2px; }
  .ver-pq li b { color: var(--tinta); font-weight: 600; }
  .ver-nota { background: var(--wash); border: 1px solid var(--chip); border-radius: 13px; padding: 14px 15px; font-size: 14.5px; line-height: 1.55; color: var(--tinta-2); }
  .ver-nota b { color: var(--cobalto-prof); }
  /* ── pie ─────────────────────────────────────────────────────── */
  footer { border-top: 1px solid var(--line-soft); background: var(--surface); padding-block: 36px 40px; font-size: 13.5px; color: var(--tinta-2); }
  .foot { display: grid; grid-template-columns: 1fr auto; gap: 20px 32px; align-items: start; }
  @media (max-width: 700px) { .foot { grid-template-columns: 1fr; } }
  .foot .brand { display: grid; gap: 8px; }
  .foot .brand svg { height: 34px; width: auto; }
  .foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .foot nav a { color: var(--tinta-2); text-decoration: none; }
  .foot nav a:hover { color: var(--cobalto); }
  .foot .legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 16px; font-size: 12.5px; color: var(--tinta-3); }

  .btn.sm { white-space: nowrap; }
  /* ── escaparate: seis pestañas + teléfono + tarjeta visual ──────── */
  .show { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
  .stage { position: relative; display: grid; justify-items: center; }
  .stage .fone { z-index: 1;
    /* techo por alto: cabe entero bajo la barra en una laptop de 700px */
    --fw: min(100%, 302px, calc((100vh - 95px) * 0.4663));
    --fw: min(100%, 302px, calc((100svh - 95px) * 0.4663)); }
  @keyframes pop { from { opacity: 0; transform: translateY(9px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
  .b .cierre { color: rgba(17,27,33,.5); }

  .alertas { flex: none; display: flex; flex-direction: column; gap: 6px;
    max-height: 0; overflow: hidden; padding-left: 8px; margin-left: -8px;
    transition: max-height .6s cubic-bezier(.3,.9,.3,1); }
  .alertas .b { animation: none; opacity: 0; transform: translateY(9px) scale(.97);
    transition: opacity .34s ease, transform .34s cubic-bezier(.2,.9,.3,1);
    transition-delay: calc(var(--n, 0) * .48s + .82s); }

  /* el hilo que sale de la pestaña y termina en su línea del mensaje */
  .hilos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
  .hilos .hilo { fill: none; stroke: var(--cobalto); stroke-width: 1.5; stroke-linecap: round;
    opacity: 0; transition: stroke-dashoffset .55s cubic-bezier(.35,0,.2,1), opacity .2s ease; }
  .hilos .hilo-punta { fill: var(--cobalto); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%;
    transform: scale(.2); transition: opacity .25s ease .42s, transform .35s cubic-bezier(.2,1.5,.4,1) .42s; }
  .hilos.on .hilo { opacity: .5; }
  .hilos.on .hilo-punta { opacity: .85; transform: none; }

  /* barras horizontales */
  .hb { display: grid; gap: 7px; }
  .hb div { display: grid; grid-template-columns: 74px 1fr 22px; gap: 8px; align-items: center; font-size: 12.5px; }
  .hb i { display: block; height: 10px; border-radius: 5px; background: var(--wash); overflow: hidden; }
  .hb i::after { content: ""; display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--fill, var(--cobalto)); animation: grow .9s ease both; animation-delay: var(--dl, .2s); }
  .hb b { font: 700 13px var(--font-d); text-align: right; }
  @keyframes grow { from { width: 0; } }

  @media (max-width: 900px) {
    .show { grid-template-columns: 1fr; gap: 18px; }
    .stage .fone { --fw: min(280px, 76vw); }
    .hilos { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .show *, .show *::after, .show *::before { animation: none !important; }
    .hilos { display: none; }
    /* sin animación el mensaje se lee entero, con sus dos alertas ya abajo */
    .alertas { max-height: none !important; }
    .alertas .b { opacity: 1 !important; transform: none !important; }
  }

  /* las tres pantallas viven en el mismo teléfono; sólo una está puesta */
  .pant { display: none; flex: 1; min-height: 0; }
  .pant.is-active { display: flex; flex-direction: column; }

  /* el elemento del que habla el paso: se enciende y los demás se apagan */
  .foco { position: relative; }
  .foco::after {
    content: ""; position: absolute; inset: -7px -9px; border-radius: 13px; pointer-events: none; opacity: 0;
    border: 1.5px solid var(--cobalto); background: rgba(43,89,224,.07);
    box-shadow: 0 0 0 4px rgba(43,89,224,.10), 0 6px 22px rgba(43,89,224,.18);
  }
  @media (prefers-reduced-motion: no-preference) {
    /* señala y se quita: el resto de la pantalla se apaga un momento y vuelve,
       y el aro del elemento entra, se sostiene y se desvanece. Nada queda opacado. */
    .app.enfoca .in > *:not(.foco) { animation: apaga 2.6s ease both; }
    .app.enfoca .foco::after { animation: foco-destello 2.6s ease both; }
  }
  @keyframes apaga { 0% { opacity: 1; } 16%, 46% { opacity: .32; } 100% { opacity: 1; } }
  @keyframes foco-destello {
    0% { opacity: 0; transform: scale(.94); }
    14% { opacity: 1; transform: none; }
    52% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* ── el teléfono de la app, en claro ─────────────────────────────── */
  .fone.app .scr { background: #f4f6fb; color: #16181d; }
  /* la app en vivo (rev. 9.1): el teléfono carga la pantalla real de docs/mockups/pantallas_video,
     con su propia barra de estado. Desde la rev. 9.2 (22-sep) las pantallas miden 1080×2340, la
     proporción del iPhone 14 Pro Max (1290×2796): el marco lleva esa misma proporción para que no queden bandas */
  .fone.viva { aspect-ratio: 1290 / 2796; }
  /* El marco de este teléfono se dibuja con su ancho (--fw, el de su tarjeta: SITIO-TARJETAS) y NO con zoom (F1-259a, 24-sep;
     P141): con zoom en un ancestro, WebKit (Safari, y todo navegador del iPhone) mide el documento del iframe ya reducido pero le
     da innerWidth sin reducir: la pantalla se escalaba de más y se corría arriba a la izquierda, con la hora cortada y franjas
     blancas. Cada medida del marco es la de un teléfono de 280 px por --fw / 280, y la pantalla de adentro se ajusta sola a su
     iframe. El alto va explícito porque WebKit aplica aspect-ratio al alto de contenido y le suma el padding (14 px de más). Lo
     vigila mirar.mjs. */
  .fone.viva { width: var(--fw); height: calc(var(--fw) * 2796 / 1290);
    padding: calc(var(--fw) * 7 / 280); border-radius: calc(var(--fw) * 38 / 280); }
  .fone.viva .scr { border-radius: calc(var(--fw) * 31 / 280); }
  .fone.viva .isla { top: calc(var(--fw) * 8 / 280); height: calc(var(--fw) * 17 / 280); }
  .fone.viva .isla::after { right: calc(var(--fw) * 9 / 280); width: calc(var(--fw) * 5 / 280); height: calc(var(--fw) * 5 / 280); }
  .fone.viva .scr { background: #0a0a14; }
  /* SITIO-TARJETAS-c (rev. 9.21): el teléfono NUNCA se ve negro. Debajo del iframe va una imagen fija de su pantalla en su momento
     (img.quieta, de captura_tarjetas.mjs): se pinta con la tarjeta, antes de que la pantalla viva cargue (0.5–1.5 s en un teléfono). El iframe
     nace transparente e invisible y teamon.js le pone .lista cuando cargó, tiene su letra y ya está armada: se funde en 200 ms encima de la
     imagen, que es la misma pantalla, sin salto. Sin JavaScript se queda la imagen. */
  .fone.viva .quieta { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none;
    user-select: none; -webkit-user-drag: none; }
  .fone.viva iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent;
    opacity: 0; transition: opacity .2s ease; }
  .fone.viva iframe.lista { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .fone.viva iframe { transition: none; } }
  .fone.app .sb { color: #16181d; padding-top: 9px; }
  .app .in { flex: 1; min-height: 0; overflow: hidden; padding: 8px 13px 10px; font-size: 12.5px; line-height: 1.4; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; align-content: start; }
  .app .hd { display: flex; align-items: center; justify-content: space-between; font: 700 13px var(--font-d); color: #16181d; }
  .app .hd .t { display: flex; align-items: center; gap: 6px; } .app .hd svg { width: 18px; height: 18px; color: var(--cobalto); }
  .app .pill { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); background: var(--verde-bg); padding: 3px 8px; border-radius: 999px; }
  .app .pill.live { color: #c62828; background: #fdecea; }
  .app .pill.live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ef5350; }
  .app .pill.new { color: var(--cobalto-prof); background: var(--chip); }
  .app .pulse { font: 700 16.5px/1.2 var(--font-d); color: #16181d; }
  .app .sub { font-size: 11.5px; color: #5b6274; }
  .app .lab { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a92a3; }
  .tabbar { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 7px 8px 11px; background: #fff; border-top: 1px solid #e4e7f0; }
  .tabbar span { display: grid; justify-items: center; gap: 3px; font: 600 9px var(--font-b); color: #9aa2b3; }
  .tabbar svg { width: 17px; height: 17px; }
  .tabbar span.on { color: var(--cobalto); }
  @media (prefers-reduced-motion: no-preference) {
    .js .app:not(.play) .areas i::after { width: 0; }
    .app.play .areas i::after { animation: grow .95s cubic-bezier(.2,.8,.3,1) both; animation-delay: var(--dl, .15s); }
    .js .app .spark polyline { stroke-dasharray: 160; stroke-dashoffset: 160; }
    .app.play .spark polyline { animation: tm-draw 1.3s ease-out .25s forwards; }
    .js .app .fade { opacity: 0; transform: translateY(9px); }
    .app.play .fade { animation: pop .55s cubic-bezier(.2,.9,.3,1) both; animation-delay: var(--dl, .3s); }
    .app.play .pill.live::before { animation: blink 1.4s ease-in-out infinite; }
    .video .cuadro { transition: opacity .5s ease; }
  }
  .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .nums div { background: #fff; border: 1px solid #e4e7f0; border-radius: 12px; padding: 8px 8px 7px; }
  .nums b { display: block; font: 700 20px/1 var(--font-d); color: #16181d; font-variant-numeric: tabular-nums; }
  .nums span { font-size: 10.5px; color: #5b6274; }
  .areas { display: grid; gap: 8px; }
  .areas > div { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 11.5px; color: #5b6274; }
  .areas > div > div { min-width: 0; }
  .areas i { display: block; height: 6px; border-radius: 3px; background: #e4e7f0; overflow: hidden; margin-top: 5px; }
  .areas i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--fill, #43a047); border-radius: 3px; }
  .areas b { color: #16181d; font: 700 13px var(--font-d); text-align: right; }
  /* ── hojas emergentes dentro del teléfono ───────────────────────
     Dos pasos del recorrido no se explican con un botón: el plan de trabajo
     semanal y el reporte del mes. Ahí sí se opaca el resto de la app y la hoja
     sube sobre la pantalla, como cuando la abres de verdad. La del mes lleva
     scroll propio: es larga a propósito y el scroll pasa DENTRO de la hoja. */
  .emerge {
    position: absolute; left: 9px; right: 9px; bottom: 8px; top: 40px; z-index: 5;
    display: none; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #dfe3ef; border-radius: 15px;
    box-shadow: 0 2px 5px rgba(22,24,29,.07), 0 18px 40px rgba(22,24,29,.26);
  }
  .emerge.abierta { display: flex; }
  .emerge .eh { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 9px 11px 8px; border-bottom: 1px solid #edeff7; }
  .emerge .eh .mk { height: 11px; width: auto; }
  .emerge .eh .sem { font: 600 8.5px var(--font-b); letter-spacing: .05em; color: #8a92a3; }
  .emerge .ec { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 11px 12px; display: grid; gap: 8px; align-content: start; }
  .emerge .ec::-webkit-scrollbar { width: 4px; }
  .emerge .ec::-webkit-scrollbar-thumb { background: #d3d8e8; border-radius: 4px; }
  .emerge h5 { margin: 0; font: 700 13px var(--font-d); letter-spacing: -0.015em; color: #16181d; }
  .emerge .tt { font: 700 8px var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: #9aa2b3; margin-top: 2px; }
  .emerge p { font-size: 10.5px; line-height: 1.42; color: #4b5060; }
  .emerge p b { color: #16181d; font-weight: 600; }
  .emerge .bl { display: grid; grid-template-columns: 15px minmax(0,1fr); gap: 7px; align-items: start; }
  .emerge .bl i.n { width: 15px; height: 15px; border-radius: 50%; background: var(--chip); color: var(--cobalto-prof);
    font: 700 9px/15px var(--font-d); font-style: normal; text-align: center; flex: none; }
  .emerge .cita { border-left: 2.5px solid var(--cielo); padding-left: 8px; font-style: italic; color: #16181d; font-size: 10.5px; line-height: 1.4; }
  .emerge .cita small { display: block; font-style: normal; font-size: 8.5px; color: #8a92a3; margin-top: 2px; }
  .emerge .ef { flex: none; display: flex; gap: 7px; padding: 9px 11px; border-top: 1px solid #edeff7; background: #fbfcff; }
  .emerge .ef span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font: 600 10.5px var(--font-b); border-radius: 9px; padding: 7px 8px; }
  .emerge .ef .env { background: var(--cobalto); color: #fff; }
  .emerge .ef .edi { background: #eef1fa; color: var(--cobalto-prof); }
  .emerge .ef svg { width: 12px; height: 12px; }
  /* números grandes del mes */
  .emerge .mnum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .emerge .mnum div { background: #f6f8fd; border: 1px solid #e8ecf7; border-radius: 9px; padding: 7px 6px 6px; }
  .emerge .mnum b { display: block; font: 700 16px/1 var(--font-d); color: #16181d; font-variant-numeric: tabular-nums; }
  .emerge .mnum span { display: block; font-size: 8.5px; color: #8a92a3; margin-top: 2px; }
  .emerge .mnum i { font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--verde); }
  .emerge .mnum i.baja { color: var(--naranja); }
  /* barras mes contra mes */
  .emerge .mbar { display: grid; gap: 6px; }
  .emerge .mbar > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-items: center; font-size: 10px; color: #4b5060; }
  .emerge .mbar em { font-style: normal; display: block; margin-bottom: 3px; }
  .emerge .mbar u { display: block; height: 5px; border-radius: 3px; background: #e9edf8; text-decoration: none; overflow: hidden; }
  .emerge .mbar u::after { content: ""; display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--fill, var(--cobalto)); }
  .emerge .mbar b { font: 700 10.5px var(--font-d); color: #16181d; font-variant-numeric: tabular-nums; }
  .emerge .mbar s { text-decoration: none; font-size: 8.5px; font-weight: 700; color: var(--verde); display: block; }
  .emerge .mbar s.baja { color: var(--naranja); }
  /* filas de persona y de producto */
  .emerge .fila { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 7px; align-items: center; font-size: 10.5px; color: #4b5060; }
  .emerge .fila .av { width: 20px; height: 20px; border-radius: 50%; background: var(--chip); color: var(--cobalto-prof); font: 700 9px/20px var(--font-d); text-align: center; }
  .emerge .fila b { color: #16181d; font-weight: 600; }
  .emerge .fila .dl { font: 700 9.5px var(--font-d); color: var(--verde); }
  .emerge .fila .dl.baja { color: var(--naranja); }
  .emerge .nota { background: var(--wash); border: 1px solid var(--chip); border-radius: 9px; padding: 8px 9px; font-size: 10px; line-height: 1.4; color: #4b5060; }
  .emerge .nota b { color: var(--cobalto-prof); }
  /* el resto de la app se apaga mientras la hoja está arriba */
  .app.conhoja .pant .in { opacity: .26; }
  .app.conhoja .tabbar { opacity: .4; }
  @media (prefers-reduced-motion: no-preference) {
    .app .pant .in, .app .tabbar { transition: opacity .34s ease; }
    .emerge.abierta { animation: sube .44s cubic-bezier(.2,.9,.3,1) both; }
    @keyframes sube { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
  }
  /* ── hora por hora: botones de verdad ─────────────────────────── */
  .hrs { display: flex; gap: 5px; flex-wrap: wrap; }
  .hrs { gap: 4px; }
  .hrs button { font: 600 10px var(--font-b); color: #5b6274; background: #fff; border: 1px solid #e4e7f0; border-radius: 7px; padding: 4px 5.5px; cursor: pointer; }
  .hrs button:hover { border-color: var(--cobalto); color: var(--cobalto); }
  .hrs button.on { color: #fff; background: var(--cobalto); border-color: var(--cobalto); }
  .scrub .kn { transition: left .42s cubic-bezier(.3,.9,.3,1); }
  .mom { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; background: #fff; border: 1px solid #e4e7f0; border-radius: 12px; padding: 7px; }
  .mom .th { position: relative; overflow: hidden; width: 38px; height: 38px; border-radius: 8px; background: linear-gradient(135deg, #1b34c8, #0a0a14 70%); display: grid; place-items: center; color: #fff; }
  .mom .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .mom .th::after { content: ""; position: absolute; inset: 0; background: rgba(10,12,22,.34); }
  .mom .th svg { position: relative; z-index: 1; width: 13px; height: 13px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)); }
  .mom > div { min-width: 0; }
  .mom b, .mom span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mom b { font-size: 12px; color: #16181d; } .mom span { font-size: 11px; color: #5b6274; }
  .momos { display: grid; gap: 7px; }
  .person { display: flex; align-items: center; gap: 10px; }
  .person .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #2b59e0, #4fc3f7); color: #fff; display: grid; place-items: center; font: 700 16px var(--font-d); }
  .person > div { min-width: 0; }
  .person b { display: block; color: #16181d; font: 700 14px var(--font-d); } .person span { font-size: 11px; color: #5b6274; }
  .spark { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; background: #fff; border: 1px solid #e4e7f0; border-radius: 12px; padding: 8px 10px; }
  .spark svg { width: 100%; height: 34px; display: block; }
  .spark b { color: #16181d; font: 700 12px var(--font-d); white-space: nowrap; }
  .quote { border-left: 3px solid; border-image: linear-gradient(45deg, #2b59e0, #4fc3f7) 1; padding-left: 9px; font-size: 12px; color: #16181d; }
  .quote small { display: block; color: #5b6274; font-size: 10.5px; margin-top: 2px; }
  .one { background: var(--naranja-bg); border: 1px solid var(--naranja-line); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--naranja); }
  .one b { color: var(--naranja); }
  .btns { display: flex; flex-wrap: wrap; gap: 6px; }
  .btns span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--cobalto); color: #fff; }
  .btns span.lg { background: var(--verde-bg); color: var(--verde); }
  .btns svg { width: 13px; height: 13px; }
  .video { position: relative; height: 150px; border-radius: 12px; overflow: hidden; background: radial-gradient(80% 60% at 30% 30%, #2a3560, #0b0d16 75%); }
  .video .cuadro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
  .video .cuadro.on { opacity: 1; }
  .video .velo { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(6,8,14,.62) 0%, rgba(6,8,14,0) 42%),
                radial-gradient(120% 100% at 50% 40%, rgba(0,0,0,0) 52%, rgba(6,8,14,.42) 100%); }
  .video .cc { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); border-radius: 8px; padding: 6px 8px; font-size: 11.5px; line-height: 1.3; color: #fff; }
  .video .cc { opacity: 1; }
  .js .video .cc { opacity: 0; }
  .js .video .cc.vis { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) { .video .cc { transition: opacity .22s ease; } }
  .video .cc b { color: #6fd8ff; }
  .video .stamp { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; color: #fff; background: rgba(0,0,0,.45); padding: 2px 6px; border-radius: 6px; }
  .scrub { position: relative; height: 26px; }
  .scrub .ln { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: #e4e7f0; }
  .scrub .kn { position: absolute; top: 4px; left: 27%; width: 16px; height: 16px; border-radius: 50%; background: var(--cobalto); box-shadow: 0 0 0 4px rgba(43,89,224,.18); }
  .scrub-x { display: flex; justify-content: space-between; font-size: 9.5px; color: #8a92a3; }
  .field textarea, .field input.free { width: 100%; font: 400 15.5px var(--font-b); color: var(--tinta); background: #fff; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }

  @media (prefers-reduced-motion: reduce) {
    .paso .bar { display: none; }
    .app.enfoca .in > *:not(.foco) { opacity: 1; }
  }

  @media (max-width: 640px) {
    .sec { padding-block: 56px; }
    .hero { padding-top: 40px; }
    .head { margin-bottom: 28px; }
    .nav { padding-top: 10px; }
    .nav-in { padding: 6px 6px 6px 14px; }
    .nav .logo svg { height: 30px; }
    .btn.sm { padding: 6px 6px 6px 14px; font-size: 13.5px; }
    .ph-ico { width: 34px; height: 34px; }
    .ph-code { font-size: 13px; }
    .ph-name { font-size: 11px; }
    .ph-size { font-size: 10.5px; }
  }

  /* ── remate: el cierre vendedor antes del pie ─────────────────────────── */
  .remate { background: linear-gradient(165deg, #131a30 0%, #0a0a14 78%); }
  .remate-in { display: grid; gap: 13px; justify-items: center; text-align: center; padding-block: 26px; }
  .remate h2 { color: #fff; max-width: 21ch; font-size: clamp(26px, 3.5vw, 42px); text-wrap: balance; }
  .remate p { color: #a9b1c5; font-size: clamp(15px, 1.6vw, 17.5px); }
  .remate .btn { margin-top: 8px; }

  /* ── pie sobrio ───────────────────────────────────────────────────────── */
  .foot .brand svg { height: 24px; width: auto; }

  /* ══ REV 9.4 · pulido con Gabriel (23-sep-2026) ═══════════════════════════ */
  /* sin número de WhatsApp, todo lo de WhatsApp se esconde (teamon.js pone [hidden]) */
  [data-wa][hidden] { display: none !important; }
  /* los enlaces de la barra medían 15 px de alto: el área de toque crece sin mover nada */
  .nav ul a { position: relative; }
  .nav ul a::after { content: ""; position: absolute; inset: -14px -8px; }
  /* los números de teclado del cuestionario no sirven en una pantalla táctil */
  @media (hover: none) { .quiz-op button .k { display: none; } }

  /* cada página tiene su h1 (antes sólo la portada): mismo aspecto que el h2 de sección */
  .head h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; line-height: 1.1; max-width: 21ch; }
  .head.center h1 { max-width: 23ch; }

  /* lista.html: el formulario arriba, «Qué pasa después» abajo */
  .anotarme.lista .head { margin-bottom: 22px; }
  .anotarme .despues { margin: 46px 0 0; text-align: center; font: 700 12px var(--font-b); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
  .anotarme .despues + .after-3 { margin-top: 14px; }
  @media (max-width: 640px) { .sec.anotarme.lista { padding-top: 30px; } }

  /* remate vendedor: titular, tres beneficios y la nota de la espera */
  .remate h2 { max-width: 26ch; }
  .remate-si { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 10px; text-align: left; max-width: 34em; }
  .remate-si li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: #d7dcea; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.45; }
  .remate-si svg { width: 22px; height: 22px; color: var(--cielo); margin-top: 1px; }
  .remate .remate-nota { font-size: 13.5px; color: #8e97ae; }

  @media (max-width: 900px) {
    /* en el teléfono, las tres luces del fondo se quedan quietas: moverlas cuesta cuadros justo mientras se hace scroll
       (y quietas ya no son capas aparte: desde la 9.15.2 no llevan filtro ni will-change) */
    .aura .a1, .aura .a2, .aura .a3 { animation: none; }
  }

  /* ══ REV 9.4 · SIN SATURACIÓN (Gabriel, 23-sep: «el título está muy pegado y ahí
     estorba el menú») ════════════════════════════════════════════════════════════
     Criterios: encabezado parcialmente persistente (NN/g, Sticky Headers: se va al
     bajar, regresa al subir, desliza en ~300 ms, fondo opaco); en el teléfono el
     escenario fijo lleva sólo lo que cambia —teléfono y rueda— y el título se lee al
     entrar y se va (scrollytelling móvil: «mobile is not a smaller desktop»); y el
     espacio agrupa lo que va junto (NN/g, proximidad). */

  /* 1 · la barra: se va al bajar y regresa al subir (teamon.js pone .oculta) */
  .nav { transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
  .nav.oculta { transform: translateY(calc(-100% - 16px)); }
  .nav.oculta:focus-within { transform: none; }            /* con teclado siempre se ve */
  .nav-in { background: rgba(255, 255, 255, .97); }         /* opaca: el texto de abajo ya no se transparenta */
  @media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

  /* el botón flotante de WhatsApp se aparta con el teclado abierto en la lista (.escribiendo) y mientras el «¿Dudas?» de la
     tarjeta de la lista se ve (.dudas-a-la-vista); su invitación (F1-259k) se aparta con él. Hasta la 9.18 también en los
     escenarios de la portada, que la 9.19 retiró. Sube encima de la barra del CTA (--barra, SITIO-TARJETAS) con ella. */
  .wa-float { transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease, bottom .2s ease, visibility 0s linear 0s; }
  .escribiendo .wa-float { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, bottom .2s ease, visibility 0s linear .25s; }
  .dudas-a-la-vista .wa-float { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, bottom .2s ease, visibility 0s linear .25s; }
  .escribiendo .wa-invita, .dudas-a-la-vista .wa-invita { opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s; }
  /* en la lista (rev. 9.4, Gabriel): la salida a WhatsApp va en la tarjeta, junto a «Continuar»,
     donde nace la duda. Mientras se ve, el botón flotante no se duplica encima del formulario. */
  .pf-pie .dudas-wa { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 2px;
    font: 600 14.5px var(--font-b); color: #15803f; text-decoration: none; }
  .pf-pie .dudas-wa svg { width: 18px; height: 18px; flex: none; }
  .pf-pie .dudas-wa:hover { text-decoration: underline; }
  .pf-pie .dudas-wa:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; border-radius: 8px; }
  @media (max-width: 560px) { .pf-pie .dudas-wa { margin: 0 auto; } }

  /* 2 · titulares con aire: interlínea de titular (1.15–1.2) y sin apretar letras en tamaños chicos */
  h2 { line-height: 1.14; }
  @media (max-width: 640px) {
    h2, .head h1 { line-height: 1.18; letter-spacing: -0.012em; }
    .hero h1 { line-height: 1.1; letter-spacing: -0.022em; }
  }

  /* pie: la línea de cookies de Meta (aviso de privacidad 1.1, 24-sep-2026) */
  .foot .legal a { color: var(--tinta-2); }

  /* ══ AVISO DE PRIVACIDAD (rev. 9.5 · F1-259b-1, 25-sep-2026) ═════════════════════════
     aviso.html sale del .md de docs/legal/ (construir.py). Texto legal largo: columna de
     lectura de ~70 caracteres sobre papel blanco y jerarquía clara. Nada puede salirse del
     ancho en el teléfono: el body recorta con overflow-x: clip, así que lo que se saliera
     NO se vería (ni con scroll). Por eso las tablas se apilan en tarjetas en el teléfono
     (cada celda con su encabezado) y las palabras largas se parten. mirar.mjs lo mide. */
  .aviso .wrap { max-width: 860px; }
  .franja-propuesta {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 22px; padding: 13px 16px;
    background: var(--naranja-bg); border: 1px solid var(--naranja-line); border-left: 5px solid var(--naranja);
    border-radius: 12px; font: 600 15px/1.45 var(--font-b); color: #6b3a06;
  }
  .franja-propuesta svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--naranja); }
  .aviso-texto {
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: var(--shadow);
    padding: clamp(20px, 5vw, 52px); font-size: 16px; line-height: 1.65; color: var(--tinta); overflow-wrap: break-word;
  }
  .aviso-texto h1 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; margin: 0 0 22px; }
  .aviso-texto h2 { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.25; margin: 40px 0 14px; scroll-margin-top: 84px; }
  .aviso-texto h3 { font-size: 17.5px; margin: 28px 0 10px; scroll-margin-top: 84px; }
  .aviso-texto p, .aviso-texto ul, .aviso-texto ol, .aviso-texto blockquote, .aviso-texto .tabla { margin: 0 0 14px; }
  .aviso-texto ul, .aviso-texto ol { padding-left: 24px; display: grid; gap: 7px; }
  .aviso-texto li::marker { color: var(--tinta-3); }
  .aviso-texto strong { font-weight: 600; }
  .aviso-texto hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
  .aviso-texto code { font: 14px var(--mono); background: var(--hueso); padding: 1px 5px; border-radius: 5px; }
  .aviso-texto mark.pendiente { background: #fde68a; color: inherit; padding: 1px 4px; border-radius: 4px; }
  /* SITIO-ANALITICA (rev. 9.17): una URL en el texto (la exclusión de Google Analytics, 40 letras sin espacio) se parte donde haga
     falta; si no, ensancha su lista (display: grid) y el aviso desborda a 360 px */
  .aviso-texto a { overflow-wrap: anywhere; }
  .aviso-texto table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
  .aviso-texto th, .aviso-texto td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--line); }
  .aviso-texto th { background: var(--hueso); font-weight: 600; }
  /* las notas para el abogado: otra voz, en otro color, nunca confundibles con el aviso */
  .nota-madrigal {
    margin: 18px 0 24px; padding: 16px 18px; background: var(--wash); border: 1px solid var(--chip);
    border-left: 5px solid var(--cobalto); border-radius: 12px; font-size: 15px; line-height: 1.6; color: #1d2a4d;
  }
  .nota-madrigal > :last-child { margin-bottom: 0; }
  .nota-madrigal ul, .nota-madrigal ol { gap: 5px; }
  @media (max-width: 760px) {
    .aviso-texto { font-size: 15.5px; }
    .aviso-texto table, .aviso-texto tbody, .aviso-texto tr, .aviso-texto td { display: block; width: 100%; }
    .aviso-texto thead { display: none; }   /* cada celda trae su encabezado (data-label) */
    .aviso-texto tr { border: 1px solid var(--line); border-radius: 12px; padding: 2px 14px; margin-bottom: 12px; }
    .aviso-texto td { border: 0; border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
    .aviso-texto td:last-child { border-bottom: 0; }
    .aviso-texto td::before {
      content: attr(data-label); display: block; margin-bottom: 3px;
      font: 700 11px/1.3 var(--font-b); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
    }
    .nota-madrigal { padding: 14px 14px; font-size: 14.5px; }
  }

  /* ══ FORMULARIO 9.4 EN LA NUBE (F1-259b, 25-sep-2026) ═══════════════════════════════
     1 · Sin JavaScript el formulario se ve ENTERO (los pasos los esconde teamon.js vía .js) y
         se envía con el botón de <noscript>; la función responde 303 a #done. */
  html:not(.js) .pf { display: grid; gap: 14px; align-content: start; margin-bottom: 30px; }
  html:not(.js) .pf-top, html:not(.js) #pf-sigue, html:not(.js) .pf-pie .enter { display: none; }
  html:not(.js) .pf input.otro { display: block; }
  html:not(.js) #form-lista:has(#done:target) .paso-in { display: none; }
  html:not(.js) #done:target { display: grid; }

  /* ══ VERSIÓN A · ARREGLOS SIN REDISEÑO (28-sep-2026) ═══════════════════════════════════════
     La 9.5 tal cual, con arreglos puntuales: ni la historia, ni los titulares, ni el orden de las
     secciones cambian. Cada bloque dice qué arregla (F2…F12; F1 está en «cómo funciona»). */

  /* SITIO-BRINCOS (rev. 9.15.1) · lo que le pasaba al dedo en «La app» (Gabriel, 14-oct, desde un anuncio de
     Instagram: «una pantalla del celular se hizo de tamaño completo y ocupó toda la pantalla»).
     · El teléfono de la app es una MUESTRA: sus 7 iframes ya llevan tabindex="-1" y no se manejan. Con el dedo
       encima recibían los toques, y dos toques rápidos hacían el zoom de doble toque del iPhone sobre el teléfono
       hasta llenar la pantalla. Sin eventos de puntero, el dedo nunca se queda dentro de un iframe (y el scroll
       de la página sigue pasando por encima del teléfono).
     · touch-action: manipulation quita el zoom de doble toque de toda la página y deja pellizcar: el zoom sigue
       disponible (WCAG 1.4.4).
     Se quedan en la 9.19 (SITIO-TARJETAS): cada tarjeta trae su teléfono con su pantalla. La rueda de títulos (y su toque)
     ya no existe. */
  .fone iframe { pointer-events: none; }
  html { touch-action: manipulation; }

  /* F6 · La lista de espera. La barra no ofrece «Acceso anticipado» en la página a la que lleva; la
     confirmación no queda bajo la barra que regresa; el título de un paso de opciones recibe el foco
     (para que el lector de pantalla lo anuncie) sin anillo, porque no es un control; y mientras la
     función guarda, el botón dice «Guardando…» y no se puede volver a tocar. */
  body[data-pagina="lista"] .nav .acts { display: none; }
  #done { scroll-margin-top: 96px; }
  .pf-q[tabindex]:focus { outline: none; }
  #pf-sigue:disabled { cursor: progress; opacity: .8; transform: none; }
  #pf-sigue:disabled:hover { background: var(--cobalto); }

  /* F7 · El cuestionario. Al volver con «Atrás», la opción que ya habías elegido se ve marcada
     (aria-pressed, con el mismo estilo del hover). El veredicto recibe el foco en su título. */
  .quiz-op button[aria-pressed="true"] { border-color: var(--cobalto); background: var(--wash); }
  .quiz-op button[aria-pressed="true"] .k { background: var(--chip); border-color: var(--chip); color: var(--cobalto-prof); }
  .ver-si[tabindex]:focus { outline: none; }

  /* F8 · El carrusel del hero en computadora: con 2.5 tarjetas o más a la vista los puntos sobran
     (teamon.js pone [hidden]) y las flechas se apagan en las orillas. En el teléfono no cambia. */
  .carril-n[hidden] { display: none; }
  .carril-fl:disabled { opacity: .35; cursor: default; box-shadow: none; }
  .carril-fl:disabled:hover { border-color: var(--line); color: var(--tinta-2); }

  /* F9 · Con movimiento reducido el scroll no se anima (formularios, enlaces a una sección). Las pantallas de la app se
     cargan ya armadas y quietas: lo hace teamon.js («LA APP EN TARJETAS»). */
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  /* F10 · Letra. Los avisos del carrusel del hero no bajan de 12 px (medían 9 a 11 en el teléfono) y
     la tarjetita crece lo que haga falta. «En línea» va en un verde más oscuro: el de la marca
     (#2f8f4e) da 4.07:1 sobre blanco; #1d7a3d da 5.4:1 (5.0:1 sobre el blanco al 97 % de la
     tarjetita, aun con una foto negra detrás). Las respuestas de Preguntas, en computadora: 16 px y
     renglones de 68 caracteres como máximo. */
  .ov { font-size: 12px; line-height: 1.3; }
  .ov .ovh { font-size: 12px; }
  .ov li span { font-size: 12.5px; }
  .ov .hr, .ov .env { font-size: 12px; }
  .ov .vivo { color: #1d7a3d; }
  @media (min-width: 900px) {
    .ov { font-size: 12.5px; }
    .faq .rp { font-size: 16px; }
    .faq .rp p, .faq .rp ul { max-width: 68ch; }
  }

  /* F14 · Tarjeta 3 del carrusel del hero («Plan de la semana · Karla»), con la foto nueva (F13): la cara de
     Karla queda a la izquierda, a media altura (barbilla al 58 % de la foto), y el aviso le rozaba la barbilla
     en 390×664 y se la tapaba de la nariz para abajo en 844×390. El renglón «Enviar por WhatsApp» sale
     (partes/p-inicio.html) y el aviso se aprieta por dentro: mismo lugar y misma letra (12 px, F10) que los
     demás avisos. Medido en las siete vistas de siempre: la cara completa, con 6 px o más de aire. */
  .ov.plan { padding-block: 6px; line-height: 1.22; }
  .ov.plan .ovh { line-height: 1.1; margin-bottom: 3px; }

  /* F15 · El chat de WhatsApp de #que-te-cuenta en su orden: las alertas de las 4:20 pm y las 11:48 pm son de AYER y van arriba,
     bajo «Ayer»; abajo, «Hoy» y el resumen de las 7:02. Están ahí, como en cualquier chat, y el chat muestra lo último, así que se
     asoman por arriba. Rev. 9.20 (SITIO-TARJETAS-b): una sola tarjeta, con el chat como se abre WhatsApp (el hilo al final) y nada
     encendido. Fuera lo que encendía cada paso de la 9.19 (el renglón del resumen, las alertas y el hilo arriba de la tarjeta 4) y los
     puntitos de «escribiendo», sin HTML desde F15. En la tarjeta única de computadora la centra la regla de la última non (abajo,
     «Las tarjetas»). `git show afd761f:docs/marketing/web/teamon.css` trae lo retirado. */
  .wa-hilo { flex: none; display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
  .alertas { max-height: none; overflow: visible; padding-left: 0; margin-left: 0; transition: none; }
  .alertas .b { opacity: 1; transform: none; }

  /* F16 · Los seis puntos del carrusel del hero se pueden encender en cualquier vista. La tarjeta activa es
     la que está en su lugar: al centro o, si no le alcanza, en la orilla (teamon.js, lugar()). Con el relleno
     de siempre, en la computadora, en el teléfono acostado y en la tableta la primera y la segunda (y las dos
     últimas) quedaban en el mismo scroll y nunca se distinguían: en 1440 los puntos 1 y 6 no se encendían.
     Ahora las orillas son espaciadores (::before y ::after; algunos WebKit ignoran el relleno final de un flex
     con scroll): 16 px, como antes, cuando con eso la segunda tarjeta ya llega al centro a 60 px o más de la
     orilla (teléfono de pie, tableta); si no, crecen a lo que deja a cualquier tarjeta, la primera y la última
     también, al centro: la mitad del carril menos media tarjeta. El «× 1000» vuelve esa comparación un
     escalón (CSS no tiene «si»). --h es el alto de la foto de .cd-f img y la tarjeta mide 3/4 de eso más su
     borde; --g es el gap del carril. */
  .carril-t { padding-inline: 0; --g: 12px; --e: 16px; --h: clamp(250px, 45vh, 430px); }
  @supports (height: 1svh) { .carril-t { --h: clamp(250px, 45svh, 430px); } }
  @media (min-width: 900px) {
    .carril-t { --g: 18px; --e: max(16px, calc((100vw - 1120px) / 2)); --h: clamp(292px, 44vh, 470px); }
    @supports (height: 1svh) { .carril-t { --h: clamp(292px, 44svh, 470px); } }
  }
  .carril-t::before, .carril-t::after {
    content: ""; flex: none; --w: calc(var(--h) * .75 + 2px);
    width: max(0px, calc(var(--e) - var(--g)),
               min(calc(50% - var(--w) / 2 - var(--g)),
                   calc((50% - 1.5 * var(--w) - var(--g) - var(--e) + 60px) * 1000)));
  }

  /* F17 · En pantallas anchas (≥ 800 px) el carrusel arranca alineado con el texto, como antes de F16: la tarjeta
     activa es la de la orilla izquierda (teamon.js, lugar()). El espaciador final mide el carril menos una tarjeta
     y la orilla, para que la última tarjeta también pueda llegar a la orilla y encender su punto. */
  @media (min-width: 800px) {
    .carril-t::before { width: max(0px, calc(var(--e) - var(--g))); }
    .carril-t::after { width: max(0px, calc(100% - var(--w) - var(--e) - var(--g))); }
    .carril-t { scroll-padding-inline: var(--e); }
    .carril-t > .cd { scroll-snap-align: start; }
  }

  /* F18 · En pantallas anchas (≥ 800 px) el carril termina donde termina el texto: el espaciador final mide lo
     mismo que el del principio. El de F17 medía el carril menos una tarjeta, para que la última llegara a la
     orilla y encendiera su punto, y con la última tarjeta a la vista dejaba media pantalla vacía. En esos anchos
     siempre hay 2.4 tarjetas o más a la vista: los puntos no se muestran (teamon.js, F18) y mandan las flechas
     y el dedo. */
  @media (min-width: 800px) {
    /* los espaciadores miden la orilla entera y anulan el gap con margen negativo: con «orilla − gap» (F17),
       entre 900 y 1155 px la orilla (16) es menor que el gap (18), el espaciador se quedaba en 0 y la primera
       tarjeta arrancaba 2 px corrida (y la flecha ← no se apagaba al principio) */
    .carril-t::before, .carril-t::after { width: var(--e); }
    .carril-t::before { margin-right: calc(-1 * var(--g)); }
    .carril-t::after { margin-left: calc(-1 * var(--g)); }
    .carril-n { display: none; }
  }

  /* 29-sep (noche) · el bloque azul del cierre: el titular, una línea y el botón */
  .remate .remate-lead { color: #d7dcea; font-size: clamp(17px, 2vw, 21px); line-height: 1.4; max-width: 30ch; text-wrap: balance; }

  /* 29-sep (noche, revisión independiente) · «Todavía no.» con el aviso en ámbar, no con la palomita verde */
  .ver-si .ok.no { background: #fdf0dc; color: #a15c00; }
  /* y el hero en el teléfono acostado (844×390, 740×360): con la tarjeta de 250 px de alto (188 de ancho) el
     aviso de la 1 partía «Tu local · En línea» en cuatro renglones y el de la 2 le tapaba la cara a Karla. A
     300 px (225 de ancho) caben; el hero ya era más alto que la pantalla, así que no se pierde nada. */
  @media (max-height: 500px) and (orientation: landscape) {
    .carril-t { --h: 300px; }
    .cd-f img { height: 300px; }
  }

  /* ═══ VERSIÓN A2.x · EL CARRUSEL DE A2 CON AVISOS SENCILLOS, Y TRES TITULARES (30-sep-2026) ════════════════════
     Gabriel, 30-sep: el carrusel es el de A2 (la pregunta y la respuesta sobre la foto, con su velo) y los gráficos
     sobre las fotos van simplificados como en A (avisos .ov en HTML, no recortes de la pantalla de la app). Lo que
     cambia entre A2.1, A2.2 y A2.3 es cómo se ve el titular de arriba, con las mismas palabras: «se siente como un
     texto ahí encimado fuera de lugar». Aquí va lo que comparten las tres; el titular de cada una va después
     («A2.1 · …», «A2.2 · …», «A2.3 · …»).
     El carrusel (teamon.js) es el de A tal cual: la cuenta de F16 sale de --h, y la tarjeta mide --h × 3/4 + 2 px.
     --hcard es ese mismo alto, puesto en el hero para que el titular pueda medirse contra las tarjetas. */
  .hero-a2 { --hcard: clamp(300px, calc((84vw - 2px) * 4 / 3), 451px); }
  @media (min-width: 900px) and (max-height: 820px) {
    .hero-a2 { --hcard: clamp(380px, calc(100vh - 312px), 451px); }
    @supports (height: 1svh) { .hero-a2 { --hcard: clamp(380px, calc(100svh - 312px), 451px); } }
  }
  /* F1-259m (rev. 9.16) · «Quiero acceso anticipado» completo en la primera pantalla de las pantallas bajas.
     En el teléfono la foto mide 3:4 del ancho de la tarjeta y, en un iPhone 12–14 dentro de la app de Facebook
     (390 × 700) o en un Android chico (360 × 640), el botón quedaba abajo del pliegue. Ahora la FOTO (--hfoto)
     no pasa de --cabe: el alto visible menos lo que va arriba (barra, titular) y abajo (puntitos, botón y 12 px
     de aire) en el teléfono más ancho (414: el titular más alto). La tarjeta conserva su ancho (sale de --hcard,
     como el carril de F16): la foto se hace más baja y se recorta. Si con eso la foto bajaría de 300 px (iPhone
     SE, 375 × 560), no se recorta: el botón no cabe de todos modos y A2.x lo deja entero abajo del pliegue. El
     «× 1000» vuelve esa comparación un escalón (CSS no tiene «si»). Con 750 px visibles o más ya cabe: queda como
     hoy. Se recorta el pie de la foto (object-position arriba): las caras y el mostrador quedan donde siempre,
     debajo de la pregunta, y lo que se pierde es lo que tapa el recuadro de abajo. En computadora con poco alto
     (laptop 1366 × 768: 657 visibles) el piso de 380 px dejaba el botón 13 px abajo del pliegue: la foto baja
     hasta 340 con poco alto (menos de 692 px visibles); la tarjeta, no. */
  @media (max-width: 899px) {
    /* el alto visible es --vh-fijo (SITIO-BRINCOS): el del primer cuadro, que no cambia cuando la barra de Instagram o de
       Chrome se esconde (svh sí cambia ahí, y la foto, el hero y la página entera brincarían) */
    .hero-a2 { --cabe: calc(var(--vh-fijo, 1vh) * 100 - 295px); --hfoto: min(var(--hcard), max(var(--cabe), calc((300px - var(--cabe)) * 1000))); }
    @supports (height: 1svh) { .hero-a2 { --cabe: calc(var(--vh-fijo, 1svh) * 100 - 295px); } }
  }
  @media (min-width: 900px) and (max-height: 691px) {
    .hero-a2 { --hfoto: clamp(340px, calc(100vh - 312px), 451px); }
    @supports (height: 1svh) { .hero-a2 { --hfoto: clamp(340px, calc(100svh - 312px), 451px); } }
  }
  .hero-a2 .carril-t { --h: var(--hcard); }
  .hero-a2 .cd { width: calc(var(--h) * .75 + 2px); }
  .hero-a2 h1 .clave { white-space: nowrap; }
  .hero-a2 h1 .marca, .hero-a2 h1 .cola { white-space: nowrap; }
  /* el hero es su propio contexto de apilado: lo que va detrás del titular (el escenario de A2.1, la luz de A2.3) queda
     detrás del hero y no detrás de la página, aunque algún día la página o un contenedor tomen fondo */
  .hero.hero-a2 { isolation: isolate; }

  /* la foto entera, en 3:4, como en A2. .cd-f es un contenedor de tamaño: la capa de análisis de la 1 se mide en
     % de la foto */
  .hero-a2 .cd-f { position: relative; overflow: hidden; container-type: size; width: 100%; height: var(--hfoto, var(--h)); }
  .hero-a2 .encuadre { position: absolute; inset: 0; }
  .hero-a2 .encuadre .foto { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 0%; }

  /* la pregunta y la respuesta, sobre la foto con su velo: como en A2 */
  .hero-a2 .cd-tx {
    padding: 13px 15px 46px; font: 500 14px/1.34 var(--font-b); letter-spacing: 0; text-wrap: pretty;
    background: linear-gradient(to bottom, rgba(6,8,14,.9) 0%, rgba(6,8,14,.78) 48%, rgba(6,8,14,.4) 76%, rgba(6,8,14,0) 100%);
  }
  .hero-a2 .cd-tx p { margin: 0; }
  .hero-a2 .cd-q { margin-bottom: 4px; font: 700 16.5px/1.22 var(--font-d); letter-spacing: -0.014em; text-wrap: balance; }
  @media (min-width: 900px) {
    .hero-a2 .cd-tx { padding: 15px 17px 50px; font-size: 14.5px; }
    .hero-a2 .cd-q { font-size: 17.5px; }
  }

  /* los avisos: los de A (.ov), con tres detalles: la hora en minúsculas («4:20 pm»), renglones sin ícono y el
     dato de la derecha («meta 7/10», «+12 %») sin partirse (si falta ancho, el que baja de renglón es el texto) */
  .hero-a2 .ov { z-index: 2; }
  .hero-a2 .ov .ovh .h { text-transform: none; letter-spacing: .02em; }
  .hero-a2 .ov ul.sin-ico li { gap: 4px; }
  .hero-a2 .ov .num { font-size: 22px; }
  .hero-a2 .ov li span { white-space: nowrap; padding-left: 6px; }
  .hero-a2 .ov .hr { margin-top: 3px; }

  /* 1 · la capa de análisis de la toma de la cámara: dos hechos anclados a zonas y momentos (la frase que se
     escuchó y el saludo). La capa es un contenedor de tamaño: las «patas» se miden en cqh (% del alto de la foto) y
     el punto cae en el mismo lugar en cualquier ancho de tarjeta */
  .hero-a2 .capa { position: absolute; inset: 0; z-index: 1; pointer-events: none; text-align: left; container-type: size; }
  .hero-a2 .an {
    position: absolute; left: var(--x); top: var(--y);
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 4px 9px 4px 7px; border-radius: 999px;
    background: rgba(10,14,26,.74); border: 1px solid rgba(255,255,255,.28); color: #fff;
    font: 600 11px/1.1 var(--font-b); letter-spacing: .01em;
    box-shadow: 0 4px 12px rgba(6,8,14,.28);
  }
  .hero-a2 .an .ok { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #34c759; color: #0b2a14; font-size: 9px; font-weight: 800; }
  .hero-a2 .an::before { content: ""; position: absolute; left: var(--px, 50%); top: 100%; width: 1px; height: var(--pata, 0px); background: rgba(255,255,255,.75); }
  .hero-a2 .an::after { content: ""; position: absolute; left: calc(var(--px, 50%) - 3px); top: calc(100% + var(--pata, 0px) - 3px); width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(52,199,89,.45); }
  .hero-a2 .an.sin-pata::before, .hero-a2 .an.sin-pata::after { display: none; }
  .hero-a2 .an.abajo { top: auto; bottom: calc(100% - var(--y)); }
  .hero-a2 .an.arriba::before { top: auto; bottom: 100%; }
  .hero-a2 .an.arriba::after { top: auto; bottom: calc(100% + var(--pata, 0px) - 3px); }
  .hero-a2 .an.frase {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 6px; align-items: center; white-space: normal;
    width: max-content; max-width: var(--max, 58%);
    padding: 6px 9px 6px 7px; border-radius: 12px; background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.6); color: var(--tinta);
    font-weight: 500;
  }
  /* la onda, compacta (19 px) y sólo junto a la frase: así, a 52 % de una foto de 300 px, «¿Le doy la de dos por uno?»
     cabe en dos renglones y «✓ Ofreció la promoción», que va abajo a todo lo ancho, en uno */
  .hero-a2 .an.frase .onda { display: flex; align-items: center; gap: 1.5px; height: 16px; }
  .hero-a2 .an.frase .onda i { width: 2px; border-radius: 2px; background: var(--cobalto); }
  .hero-a2 .an.frase .onda i:nth-child(1) { height: 6px; } .hero-a2 .an.frase .onda i:nth-child(2) { height: 13px; }
  .hero-a2 .an.frase .onda i:nth-child(3) { height: 16px; } .hero-a2 .an.frase .onda i:nth-child(4) { height: 9px; }
  .hero-a2 .an.frase .onda i:nth-child(5) { height: 12px; } .hero-a2 .an.frase .onda i:nth-child(6) { height: 5px; }
  .hero-a2 .an.frase q { font: 500 11.5px/1.25 var(--font-b); quotes: "«" "»"; }
  .hero-a2 .an.frase q b { font-weight: 700; }
  .hero-a2 .an.frase em { grid-column: 1 / -1; font: 700 10.5px/1.2 var(--font-b); font-style: normal; color: #1d7a3d; white-space: nowrap; }
  .hero-a2 .an.frase::before { background: rgba(255,255,255,.85); }

  /* las flechas, a la altura de los avisos (no a media tarjeta, donde están las caras), y en el teléfono el hero
     sube un poco para que los puntos del carrusel queden en la primera pantalla (como en A2) */
  @media (min-width: 900px) { .hero-a2 .carril-fl { top: calc(4px + (100% - 18px) * .78 - 20px); } }
  @media (max-width: 759px) {
    .hero.hero-a2 { padding-top: 18px; }
    .hero-a2 .carril { margin-top: 12px; }
  }
  /* en un teléfono bajo (360 × 640) el botón asomaba 10 px en la orilla de abajo: mejor que quede entero abajo.
     SITIO-BRINCOS (rev. 9.15.1): antes era @media (max-height: 660px). Con la barra del navegador que se esconde y aparece, el
     alto visible cruzaba los 660 px y el hero cambiaba 14 px de alto (medido en 360 × 640 → 700: la página pasaba de 9496 a 9482
     y todo lo de abajo brincaba). Ahora lo decide el alto de la vista AL ABRIR (--vh-fijo), que no cambia después: 28 px si la
     vista mide 660 px o menos, 14 si más (la rampa de ×1000 hace de escalón; a 661 px da 0 y se queda en 14).
     F1-259m (rev. 9.16): desde 595 px visibles la foto se hace más baja y el botón cabe entero (--hfoto, arriba): los 14 px de
     más quedan sólo por debajo de 595, donde la foto no se recorta y el botón va abajo del pliegue. */
  @media (max-width: 759px) { .hero-a2 .cierre { margin-top: clamp(14px, calc(14px + (595px - 100 * var(--vh-fijo, 1svh)) * 1000), 28px); } }

  /* ═══ A2.1 · ESCENARIO ═════════════════════════════════════════════════════════════════════════════════════
     El titular deja de flotar sobre el fondo: va en un escenario azul que sube hasta arriba de la página (el menú
     queda encima, como una píldora blanca), con una luz cielo que baja desde arriba, y las tarjetas del carrusel
     entran al escenario por abajo (lo pisan un tercio de su alto). Así el titular y las tarjetas son una sola pieza.
     El titular va en blanco y más grande; «como si estuvieras ahí» lleva la luz del escenario y «TeamOn» va como
     en el logo, con el «On» en cielo.
     El escenario es el ::before del contenedor del titular: termina debajo del titular, a lo que mida el hueco
     hasta las tarjetas (--esc-hueco) más el 36 % de su alto (--hcard). Para que suba detrás del menú, el hero sólo
     recorta a lo ancho (overflow-x: clip). */
  .hero.hero-a2.v1 { overflow: visible; overflow-x: clip; padding-top: 26px; }
  .hero-a2.v1 { --esc-hueco: 16px; }
  .hero-a2.v1 .titular { position: relative; }
  .hero-a2.v1 .titular::before, .hero-a2.v1 .titular::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; width: 100vw; transform: translateX(-50%);
    top: -260px; bottom: calc(-1 * (var(--esc-hueco) + .36 * var(--hcard)));
    border-radius: 0 0 28px 28px;
  }
  .hero-a2.v1 .titular::before {
    background:
      radial-gradient(60% 55% at 50% 22%, rgba(120,214,255,.42), rgba(79,195,247,0) 72%),
      radial-gradient(36% 50% at 100% 100%, rgba(66,118,255,.5), rgba(66,118,255,0) 72%),
      radial-gradient(40% 55% at 0% 100%, rgba(8,16,70,.5), rgba(8,16,70,0) 72%),
      linear-gradient(176deg, #2350e0 0%, #1c37c4 48%, #142273 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 34px 60px -34px rgba(17,27,94,.62);
  }
  /* un poco de textura: una retícula de puntos muy tenue, que se apaga hacia abajo */
  .hero-a2.v1 .titular::after {
    background: radial-gradient(rgba(255,255,255,.15) 1px, transparent 1.5px) 0 0 / 18px 18px;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 78%); mask-image: linear-gradient(to bottom, #000 30%, transparent 78%);
  }
  .hero-a2.v1 h1 {
    color: #fff; max-width: 21ch; font-size: clamp(27px, 7.2vw, 54px); line-height: 1.04; letter-spacing: -0.032em;
    text-shadow: 0 2px 22px rgba(6,12,60,.35);
  }
  .hero-a2.v1 h1 .clave {
    background: linear-gradient(100deg, #9ee2ff 0%, #e6f7ff 50%, #9ee2ff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  }
  .hero-a2.v1 h1 .marca span { color: #9ee2ff; }
  /* sobre el escenario, el borde de las tarjetas se aclara un poco para que no se pierda contra el azul */
  .hero-a2.v1 .cd { border-color: rgba(255,255,255,.2); }
  @media (min-width: 760px) {
    .hero-a2.v1 { --esc-hueco: 20px; }
    .hero.hero-a2.v1 { padding-top: 40px; }
    .hero-a2.v1 .carril { margin-top: 16px; }
    .hero-a2.v1 h1 { max-width: 30ch; }
    .hero-a2.v1 .titular::before, .hero-a2.v1 .titular::after { border-radius: 0 0 40px 40px; }
  }
  @media (min-width: 900px) and (max-height: 820px) {
    .hero.hero-a2.v1 { padding-top: 30px; }
    .hero-a2.v1 h1 { font-size: clamp(27px, 3.5vw, 44px); max-width: 27ch; }
  }
  @media (max-height: 500px) and (orientation: landscape) {
    .hero-a2.v1 h1 { font-size: clamp(24px, 3.7vw, 34px); max-width: 30ch; }
  }

  /* A2.1 es la finalista (30-sep, noche) · el cierre: «Toma el timón desde donde estés.» y una línea que mide el doble
     que la de antes; a 30ch quedaba en una columna angosta de cuatro renglones, a 40ch va en dos o tres */
  .remate .remate-lead { max-width: 40ch; }

  /* ── CÓMO FUNCIONA con partículas (F1-259h, rev. 9.11, 10-oct-2026) ──────────────────────────
     Lo que se ve (cámara) y lo que se oye (micrófono) entra revuelto a tres capas que hacen de
     algoritmo: ordenan, comparan contra tus estándares y clasifican; lo de cada salida se junta en
     una marca (sin colores: cada salida tiene su trazo) que viaja a su tarjeta y enciende su ícono.
     Afuera sólo el título «Cómo funciona»; adentro no hay rótulos de columna, y el nombre de cada
     entrada va arriba de su ficha.
     Computadora (≥ 1180 px): panel fijo de 1120 px, cinco pistas (192 · 150 · 300 · 118 · 264).
     Teléfono y tableta: cámara · tus estándares · micrófono arriba; tres placas en isométrico; un
     tronco que reparte a lo que te llega.
     Las partículas van en un lienzo (canvas) que pone teamon.js encima del vidrio de las capas; los
     hilos fijos, en el svg. Con «reducir movimiento», un cuadro fijo. Sin JS: tarjetas y capas.
     Capas de pintura: svg de hilos (z 1) · capas y rótulo (z 2) · lienzo (z 3) · fichas y tarjetas (z 4). */
  .cf {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr);
    max-width: 600px; margin-inline: auto; padding: 26px 18px 28px; box-sizing: border-box;
    border-radius: 22px; border: 1px solid rgba(255,255,255,.04);
    background:
      radial-gradient(320px 260px at 100% 0%, rgba(79,195,247,.20), rgba(79,195,247,0) 70%),
      radial-gradient(360px 340px at 0% 100%, rgba(43,89,224,.28), rgba(43,89,224,0) 70%),
      linear-gradient(172deg, #1a1e30 0%, #0e1019 46%, #0a0a14 100%);
    box-shadow: var(--shadow-lg);
    color: #e7ecff;
  }
  .cf::before {            /* retícula de puntos, desvanecida hacia las orillas */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background-image: radial-gradient(circle, rgba(126,165,205,.30) 1px, rgba(126,165,205,0) 1.4px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, #000, rgba(0,0,0,0));
            mask-image: radial-gradient(ellipse 80% 60% at 50% 45%, #000, rgba(0,0,0,0));
  }
  .cf-hilos, .cf-lienzo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
  .cf-hilos { z-index: 1; overflow: visible; }
  .cf-centro { position: relative; z-index: 2; min-width: 0; }
  .cf-lienzo { z-index: 3; }
  .cf-izq, .cf-der { position: relative; z-index: 4; min-width: 0; }
  .cf-sec .head { margin-bottom: 32px; }

  /* tarjetas blancas: tus estándares (computadora) y lo que te llega */
  .cf-fuentes, .cf-sale { list-style: none; margin: 0; padding: 0; }
  .cf-nodo {
    position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; margin: 0;
    background: #fff; color: var(--tinta); border-radius: 14px; box-shadow: 0 10px 28px rgba(3,6,20,.45);
  }
  .cf-ico {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: #eef3ff; color: var(--cobalto);
  }
  .cf-ico.entra { background: #e4f6fd; color: #0b84b8; }
  .cf-ico svg { width: 20px; height: 20px; }
  .cf-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .cf-tx b { font: 600 14.5px/18px var(--font-d); letter-spacing: -0.01em; color: var(--tinta); }
  .cf-tx small { font: 500 9.5px/12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }

  /* 01 · lo que entra: el nombre arriba y su ficha abajo (en teléfono, tres en fila: cámara · tus
     estándares · micrófono, con las fichas alineadas por abajo) */
  .cf-fuentes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 4px; align-items: end; }
  .cf-fuente { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; min-width: 0; }
  .cf-ficha {
    flex: none; display: grid; place-items: center; width: 52px; height: 52px; box-sizing: border-box; border-radius: 16px;
    border: 1px solid rgba(111,216,255,.38); background: linear-gradient(180deg, rgba(27,37,78,.97), rgba(12,16,34,.97));
    box-shadow: 0 12px 30px rgba(3,6,20,.5), inset 0 1px 0 rgba(255,255,255,.08); color: #6fd8ff;
  }
  .cf-ficha svg { width: 22px; height: 22px; }
  .cf-std .cf-ficha { background: #fff; border-color: #fff; color: #0b84b8; box-shadow: 0 12px 30px rgba(3,6,20,.5); }
  .cf-fuente .cf-tx { align-items: center; }
  .cf-fuente .cf-tx b { font-size: 13.5px; line-height: 17px; color: #fff; }
  .cf-fuente .cf-tx small { color: rgba(231,236,255,.55); }

  /* 02 · el filtro */
  .cf-centro { margin-top: 118px; display: flex; flex-direction: column; align-items: center; }
  .cf-compu { display: none; }
  .cf-filtro { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .cf-capas { display: block; overflow: visible; }
  .cf-capas-h { display: none; }
  .cf-capas-v { width: 100%; max-width: 300px; height: auto; }
  .cf-rot {                /* «TEAMON · revisa la atención», chico, debajo de las capas */
    margin: 12px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    font: 400 12.5px/16px var(--font-b); color: rgba(231,236,255,.62);
  }
  .cf-rot span { font: 500 10.5px/14px var(--mono); letter-spacing: .28em; text-transform: uppercase; color: #6fd8ff; }

  /* 03 · lo que te llega: una lista con su tronco a la izquierda */
  /* las tarjetas miden lo que su texto (todas iguales) y el grupo va centrado debajo de las capas, con
     espacio a la izquierda para el tronco y sus marcas (Gabriel, 11-oct: «mucho espacio del lado
     derecho en los contenedores y se sigue sintiendo apretado del lado izquierdo») */
  .cf-der {   /* el canal del tronco: 52 px si caben, menos en teléfonos angostos (nunca menos de 24) */
    margin-top: 68px; padding-left: clamp(24px, calc(100% - 256px), 52px);
    justify-self: center; max-width: 100%; box-sizing: border-box;
  }
  .cf-sale { display: grid; gap: 10px; }
  .cf-sale .cf-nodo { min-height: 60px; padding: 0 20px 0 12px; }

  /* teléfonos angostos */
  @media (max-width: 389px) {
    .cf-std .cf-tx b { font-size: 13px; }
  }
  @media (max-width: 374px) {
    .cf { padding-inline: 12px; }
    .cf-fuente .cf-tx b { font-size: 12.5px; line-height: 16px; }
    .cf-fuente .cf-tx small { font-size: 8.5px; letter-spacing: .06em; }
    .cf-sale .cf-nodo { padding-right: 14px; }
  }

  /* computadora: cinco pistas fijas en un panel de 1120 px */
  @media (min-width: 1180px) {
    .cf {
      width: 1120px; max-width: none; margin-left: calc((100% - 1120px) / 2); margin-right: 0;
      padding: 36px 48px 44px;
      grid-template-columns: 192px 150px 300px 118px 264px;
      background:
        radial-gradient(520px 380px at 96% 0%, rgba(79,195,247,.20), rgba(79,195,247,0) 70%),
        radial-gradient(620px 440px at 0% 100%, rgba(43,89,224,.26), rgba(43,89,224,0) 70%),
        linear-gradient(158deg, #1a1e30 0%, #0e1019 46%, #0a0a14 100%);
    }
    .cf::before {
      -webkit-mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000, rgba(0,0,0,0));
              mask-image: radial-gradient(ellipse 62% 72% at 50% 50%, #000, rgba(0,0,0,0));
    }
    .cf-sec .head { margin-bottom: 40px; }
    .cf-izq { grid-column: 1; }
    .cf-centro { grid-column: 3; margin-top: 0; }
    .cf-der { grid-column: 5; margin-top: 0; padding-left: 0; justify-self: stretch; }
    .cf-tel { display: none; }
    .cf-compu { display: flex; }
    /* las fichas a la izquierda, su nombre arriba; las fichas, a la altura de la primera y la última capa */
    .cf-fuentes { grid-template-columns: minmax(0, 1fr); gap: 0; height: 308px; margin-top: 62px; align-content: space-between; }
    .cf-fuente { align-items: flex-start; text-align: left; gap: 10px; }
    .cf-fuente .cf-tx { align-items: flex-start; }
    .cf-fuente .cf-tx b { font-size: 15px; line-height: 18px; }
    .cf-fuente .cf-tx small { font-size: 10px; line-height: 13px; }
    .cf-ficha { width: 56px; height: 56px; }
    .cf-ico { width: 36px; height: 36px; }
    .cf-ico svg { width: 22px; height: 22px; }
    .cf-tx b { font-size: 15px; }
    .cf-tx small { font-size: 10px; line-height: 13px; }
    /* el filtro: tus estándares arriba; 28 px más abajo, las tres hojas de pie (300 × 240) */
    .cf-estandar { gap: 12px; width: 208px; min-height: 58px; padding: 8px 16px 8px 14px; margin-top: 32px; }
    .cf-filtro { margin-top: 28px; }
    .cf-capas-h { display: block; width: 300px; height: 240px; }
    .cf-capas-v { display: none; }
    .cf-rot { margin-top: 14px; }
    /* lo que te llega: centrado con las hojas */
    .cf-sale { gap: 16px; margin-top: 86px; }
    .cf-sale .cf-nodo { min-height: 64px; padding: 8px 16px 8px 14px; }
  }

  /* ── al llegar su marca, el ícono de la tarjeta se enciende (en cobalto, sin colores aparte) ── */
  @media (prefers-reduced-motion: no-preference) {
    .cf-sale .cf-nodo.recibe .cf-ico { animation: cf-recibe 1.1s ease-out; }
  }
  @keyframes cf-recibe {
    0% { box-shadow: 0 0 0 0 rgba(43,89,224,.45); }
    22% { background: var(--cobalto); color: #fff; }
    100% { box-shadow: 0 0 0 10px rgba(43,89,224,0); background: #eef3ff; color: var(--cobalto); }
  }

  /* ── ¿ES DIFÍCIL INSTALARLO? (F1-259h, 10-oct-2026): tres fotos y tres frases ────────────── */
  .inst-sec .head { margin-bottom: 32px; }
  .inst-sec .lead b { color: var(--tinta); }
  .inst-pasos { list-style: none; margin: 0 auto; padding: 0; max-width: 1088px; display: grid; gap: 28px; }
  .inst-paso { display: grid; gap: 6px; align-content: start; }
  .inst-paso .foto {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px;
    background: #e9eefc; box-shadow: 0 1px 2px rgba(22,24,29,.06), 0 14px 36px rgba(43,89,224,.12); margin-bottom: 12px;
  }
  .inst-num { margin: 0; font: 600 11px/14px var(--mono); letter-spacing: .14em; color: var(--cobalto); }
  .inst-paso h3 { margin: 0; font: 700 20px/1.2 var(--font-d); letter-spacing: -0.01em; color: var(--tinta); }
  .inst-paso p:last-child { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tinta-2); max-width: 34ch; }
  .inst-mas { margin: 28px 0 0; text-align: center; font-size: 15px; }
  .inst-mas a { font-weight: 600; text-decoration: none; }
  @media (max-width: 599px) {
    .inst-paso .foto { aspect-ratio: 3 / 2; }
  }
  @media (min-width: 600px) {
    .inst-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .inst-paso h3 { font-size: 18px; }
    .inst-paso p:last-child { font-size: 14.5px; }
  }
  @media (min-width: 960px) {
    .inst-pasos { gap: 28px; }
    .inst-paso h3 { font-size: 20px; }
    .inst-paso p:last-child { font-size: 15.5px; }
  }

  /* ══ REV 9.16 · ÁREAS DE TOQUE DE 44 PX (F1-259m, 14-oct-2026) ════════════════════════════════════════════
     Todo control suelto se toca en un área de 44 px de alto o más (WCAG 2.5.5 y la guía de Apple) y de 24 de
     ancho o más (WCAG 2.5.8), en todos los tamaños. El área crece con un ::after absoluto e invisible, que no
     ocupa lugar (como el menú de la 9.4 y los puntitos), o con relleno compensado con margen negativo: una sola
     de las dos por control. Exentos: los enlaces dentro de una frase («detalle y cómo excluirte», las URL del
     aviso) y las <label>. Lo mide visual.py (toqueChico) y lo prueba mirar.mjs, vista(). */
  .nav .logo, .nav .btn.sm, .cierre .link, .inst-mas a, .foot nav a { position: relative; }
  .nav .logo::after, .nav .btn.sm::after, .carril-fl::after, .cierre .link::after, .inst-mas a::after, .foot nav a::after {
    content: ""; position: absolute; }
  .nav .logo::after { inset: -4px 0; }                    /* 36 → 44 */
  .nav ul a::after { inset: -15px -8px; }                 /* el menú (9.4): en WebKit medía 43.9 con -14 */
  .nav .btn.sm::after { inset: -2px 0; }                  /* 40–42 → 44–46 */
  .carril-fl::after { inset: -2px; border-radius: 50%; }  /* 40 × 40 → 44 × 44 (ya es absoluta: no se le pone relative) */
  .cierre .link::after { inset: -10px 0 -17px; }          /* 17 → 44; arriba sólo 10: a 12 px está el botón */
  .inst-mas a::after { inset: -13px 0; }                  /* 19 → 45 */
  .foot nav a::after { inset: -12px 0; }                  /* 21 → 45 */
  .pf input[type="text"], .pf input[type="tel"] { min-height: 44px; }   /* el nombre medía 43.6 */
  .pf-pie .dudas-wa { padding-block: 13px; margin-block: -5px; }       /* 34 → 44, en el mismo lugar */

  /* ══ REV 9.19 · «LA APP» Y «¿QUÉ TE CUENTA?» EN TARJETAS, LA BARRA DEL CTA Y EL HERO QUE AVANZA SOLO (SITIO-TARJETAS, 16-oct-2026) ══
     Gabriel, 16-oct, sobre el prototipo de Cowork (handoffs/adjuntos/2026-10-16_SITIO-TARJETAS/prototipo/): la alternativa «2 Tarjetas»,
     el hero que avanza solo y el CTA fijo abajo «como lo hace heyvera.ai pero con nuestro copy». Por qué: Clarity daba 26 % de
     profundidad media en la portada y en las grabaciones la gente se quedaba en el escenario pegado de «La app» (la 9.18 retenía 8
     pantallas de scroll con el mismo cuadro). */

  /* 1 · Las tarjetas. Una columna en el teléfono (hasta 520 px de ancho); dos en computadora (≥ 901 px), la última sola al centro si
     son nones. Cada tarjeta: su título y su línea (los de la rueda de la 9.18, tal cual) y, centrado debajo, su teléfono ENTERO. El
     prototipo lo cortaba por abajo (margen negativo); aquí no: en la tarjeta 3 de WhatsApp el corte tapaba justo el párrafo que se
     enciende («Te pidieron hielo…»), y en las de la app, la parte baja de cada pantalla. */
  .tarjetas { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 14px; max-width: 520px; }
  .tar { display: grid; gap: 10px; justify-items: center; align-content: start; min-width: 0;
    background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow);
    padding: 18px 16px 22px; }
  .tar > h3, .tar > p { justify-self: stretch; }
  .tar > h3 { font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; }
  .tar > p { font-size: 15px; line-height: 1.45; color: var(--tinta-2); }
  .tar > .fone { margin-top: 8px; }
  .tarjetas-sec .cierre { margin-top: 28px; }
  @media (min-width: 901px) {
    .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; }
    .tarjetas > .tar:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
    .tar { padding: 22px 22px 26px; }
    .tar > h3 { font-size: 21px; }
  }

  /* 2 · Los teléfonos, del mismo ancho en las dos secciones: el del prototipo, min(240px, 62vw) (a 360 px de pantalla, 223).
     El de la app dibuja su marco con --fw (ver «el teléfono de la app»); su pantalla, que es un iframe, se ajusta sola. El hueco
     queda reservado desde el HTML (ancho y alto explícitos): cargar la pantalla no mueve nada. */
  .tar .fone.viva { --fw: min(240px, 62vw); }
  /* El de WhatsApp está compuesto a 280 px (letras en px) y se ESCALA entero con zoom: un número, el ancho que se quiere entre 280.
     tan(atan2(a, b)) es a ÷ b como número (CSS no divide longitudes): Safari 15.4+, Chrome 111+, Firefox 108+ (mirar.mjs lo mide en
     WebKit y Chromium). Antes, el respaldo para los que no lo entienden: 0.8 (224 px). Sin iframe adentro, el zoom no le hace daño
     (P141 es de iframes). */
  .tar .fone.wa { --fw: 280px; zoom: .8; zoom: tan(atan2(min(240px, 62vw), 280px)); }

  /* 3 · La barra del CTA, sólo en el teléfono (< 768 px; en computadora no existe, como en heyvera.ai). Fija abajo, de lado a lado,
     con UN botón a todo lo ancho; teamon.js la muestra al pasar lo que marca [data-barra-tras] y entra desde abajo en 200 ms. Fondo
     blanco casi opaco y su línea arriba, SIN desenfoque: desde la 9.15.2 (SITIO-MEMORIA) el único backdrop-filter del sitio es el de la
     barra de arriba (probar.py §11). Queda debajo del botón de WhatsApp (z 55 contra 60), que sube su alto (--barra). El body le deja
     su alto abajo para que el pie no quede tapado: 1 de línea + 12 + 52 del botón + max(12, el área segura). */
  .barra-cta { display: none; }
  @media (max-width: 767px) {
    .barra-cta { display: block; position: fixed; inset: auto 0 0 0; z-index: 55;
      padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
      border-top: 1px solid var(--line-soft); box-shadow: 0 -6px 18px rgba(22, 24, 29, .06);
      transform: translateY(100%); transition: transform .2s ease; }
    .barra-cta[hidden] { display: none; }
    .barra-cta.ve { transform: none; }
    .barra-cta .btn { display: flex; width: 100%; justify-content: center; }
    body:has(> .barra-cta) { padding-bottom: calc(65px + max(12px, env(safe-area-inset-bottom))); }
  }
  @media (prefers-reduced-motion: reduce) { .barra-cta { transition: none; } }

  /* 4 · El hero avanza solo (teamon.js pone .auto en el carril; .pausa fuera de la vista o con la pestaña oculta). El puntito activo
     es la pista y su ::before se llena de cobalto de izquierda a derecha en --cada (4.5 s; el primero, después de --espera, 2 s): una
     animación de transform, sin escribir estilos en cada cuadro. Al terminarse, teamon.js pasa a la siguiente tarjeta. Al tocar el
     carril se quita .auto y el puntito activo vuelve a ser la píldora cobalto de siempre. */
  .carril.auto .carril-n button[aria-current="true"] { background: #c3c8db; }
  .carril-n button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cobalto);
    transform: scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
  .carril.auto .carril-n button.llena::before { opacity: 1; animation: hero-llena var(--cada, 4.5s) linear forwards; }
  .carril.auto .carril-n button.llena.primera::before { animation-delay: var(--espera, 2s); }
  .carril.auto.pausa .carril-n button.llena::before { animation-play-state: paused; }
  @keyframes hero-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }