/* Tokens y marca vienen de design-system.css (--sf-*), la marca con
     respaldo (var(--brand,var(--sf-brand))). Las sombras también, desde el
     26-09-2026: --s2 y --s3 son --sf-sombra-flota y --sf-sombra-maqueta, para
     que el recorrido dibuje con las mismas; --s1 no la usaba nadie. */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:var(--sf-font);color:var(--sf-ink);background:var(--sf-paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:var(--brand-600,var(--sf-brand-600));text-decoration:none}
  h1,h2,h3,h4{line-height:1.12;letter-spacing:-.027em;margin:0}
  p{margin:0}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
  .kicker{color:var(--acc-700,var(--sf-acc-700));font-weight:700;font-size:var(--sf-fs-12-5);letter-spacing:.12em;text-transform:uppercase}

  /* ============ cabecera y pie ============
     NAV-1b: la cabecera, el selector de idioma y el pie son el componente único (`src/portal/cabecera_y_pie.ts`);
     las anclas de la portada van en su segunda línea. Acá no queda CSS de nav, de menú ni de pie. */
  /* Los botones son `.sf-btn`/`.sf-grande` (44px: la medida de ESTA página).
     `.btn-a` sigue acá: el acento relleno no tiene variante en la hoja común.
     Con `.sf-btn` adelante y el borde transparente: si no, el magenta llevaba
     el borde gris del secundario, y al pasar el mouse el de la marca. */
  .sf-btn.btn-a{background:var(--acc,var(--sf-acc));color:var(--acc-text,var(--sf-paper));border-color:transparent}
  .sf-btn.btn-a:hover{filter:brightness(1.07);border-color:transparent}
  .respaldo{display:none;align-items:center;gap:12px;margin-top:22px;padding:10px 16px 10px 12px;border:1px solid var(--sf-line);background:var(--sf-paper);border-radius:var(--sf-r);font-size:var(--sf-fs-14);color:var(--sf-ink);max-width:560px}
  .respaldo[data-hay]{display:inline-flex}
  .respaldo img{height:24px;max-width:96px;object-fit:contain}

  /* ============ hero ============ */
  .hero{position:relative;padding:70px 0 92px;overflow:hidden;
    background:
      radial-gradient(680px 420px at 88% 8%, var(--sf-brand-50), transparent 62%),
      radial-gradient(520px 400px at 4% 0%, var(--sf-hero-azul), transparent 60%),
      linear-gradient(180deg,var(--sf-hero-tope),var(--sf-paper) 80%)}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(var(--sf-line) 1px, transparent 1px);background-size:26px 26px;opacity:.5;
    mask-image:linear-gradient(180deg,var(--sf-negro),transparent 65%)}
  .hero .wrap{position:relative;z-index:1;display:grid;gap:52px;grid-template-columns:1fr}
  @media(min-width:1000px){.hero .wrap{grid-template-columns:1fr 1.04fr;align-items:center;gap:56px}}
  .hero h1{font-size:var(--sf-fs-hero);font-weight:800;max-width:15ch}
  .hero h1 em{font-style:normal;position:relative;white-space:nowrap}
  .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.34em;background:var(--acc,var(--sf-acc));opacity:.22;border-radius:var(--sf-r-s);z-index:-1}
  .hero .lead{font-size:var(--sf-fs-lead);color:var(--sf-mut);max-width:52ch;margin-top:22px}
  .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
  .nota{margin-top:18px;font-size:var(--sf-fs-13-5);color:var(--sf-mut);display:flex;align-items:center;gap:8px}
  .nota svg{width:16px;height:16px;stroke:var(--acc,var(--sf-acc));fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

  /* ============ maqueta ============
     La barra de la ventana, los globos y los eventos son de la hoja común
     (`sf-ventana`, `sf-card sf-flota`, `sf-evento`) desde el 26-09-2026: el
     recorrido dibuja su bloque de la API con las mismas piezas. Acá queda lo
     que es de esta página: dónde va cada cosa y cómo se inclina. */
  .maq{position:relative;perspective:1400px;padding:34px 10px 46px}
  .doc{background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:var(--sf-r-l);box-shadow:var(--sf-sombra-maqueta);
       padding:26px 26px 30px;transform:rotateY(-7deg) rotateX(3deg);transform-origin:left center}
  @media(max-width:999px){.doc{transform:none}}
  .ln{height:9px;border-radius:var(--sf-r-s);background:var(--sf-trazo);margin-bottom:11px}
  .campo{border:2px dashed var(--amber,var(--sf-dot));background:var(--sf-ambar-50);border-radius:var(--sf-r-s);padding:8px 11px;
         font-size:var(--sf-fs-13);font-weight:600;color:var(--sf-ambar-700);display:inline-flex;align-items:center;gap:8px;margin:3px 6px 9px 0}
  .campo i{font-style:normal;font-size:var(--sf-fs-10);background:var(--amber,var(--sf-dot));color:var(--sf-ambar-900);border-radius:var(--sf-r-s);padding:1px 5px;font-weight:800;letter-spacing:.04em}
  .rubrica{margin-top:18px;padding-top:16px;border-top:1px dashed var(--sf-line);display:flex;align-items:center;gap:14px;justify-content:flex-end;text-align:right}
  .rubrica svg{width:74px;height:34px;fill:none;stroke-width:5.4;stroke-linecap:round;stroke-linejoin:round}
  .rubrica small{color:var(--sf-mut);font-size:var(--sf-fs-12)}

  .flot{position:absolute}
  .flot-firmantes{right:-8px;top:-28px;width:236px}
  .flot-evid{left:-40px;bottom:-30px;width:230px}
  @media(max-width:1180px){.flot-firmantes{right:0;top:-20px}.flot-evid{left:0}}
  @media(max-width:560px){.flot{position:static;width:auto!important;margin-top:14px}}
  .firm{display:flex;align-items:center;gap:10px;padding:5px 0}
  .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:var(--sf-fs-11);font-weight:700;color:var(--sf-paper);flex:none}
  .firm b{font-weight:600;font-size:var(--sf-fs-13);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .est{font-size:var(--sf-fs-10-5);font-weight:700;padding:2px 8px;border-radius:var(--sf-r-pill);white-space:nowrap}
  .est.ok{background:var(--acc-50,var(--sf-acc-50));color:var(--acc-700,var(--sf-acc-700))}
  .est.esp{background:var(--sf-neutro-50);color:var(--sf-mut)}

  /* ============ tira de acreditadores ============ */
  .tira{border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line);background:var(--sf-soft);padding:26px 0}
  .tira .wrap{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap;justify-content:center}
  .tira span.et{font-size:var(--sf-fs-12-5);color:var(--sf-mut);font-weight:600}
  .acr{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:var(--sf-fs-15);color:var(--brand,var(--sf-brand));opacity:.82}
  .acr small{font-weight:500;color:var(--sf-mut);font-size:var(--sf-fs-12)}

  /* ============ bandas ============ */
  .band{padding:92px 0}
  .band.soft{background:var(--sf-soft);border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line)}
  .sechead{max-width:62ch;margin-bottom:48px}
  .sechead h2{font-size:var(--sf-fs-h2);font-weight:800;margin-top:12px}
  .sechead p{color:var(--sf-mut);margin-top:16px;font-size:var(--sf-fs-17-5)}
  .sechead.centro{margin-left:auto;margin-right:auto;text-align:center}

  .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(282px,1fr))}
  /* .sf-card trae fondo/borde/radio; acá el padding propio (30px). Que se
     levante al pasar el mouse es `sf-levanta`, y la pastilla de arriba
     (ícono o número) es `sf-ico`: las dos, de la hoja común desde el
     26-09-2026, porque el recorrido las usa igual. */
  .cols .sf-card{padding:30px}
  .cols .sf-card h3{font-size:var(--sf-fs-19-5);font-weight:700;margin-bottom:11px}
  .cols .sf-card p{color:var(--sf-mut);font-size:var(--sf-fs-15)}

  /* ============ split ============ */
  .split{display:grid;gap:48px;align-items:center;grid-template-columns:1fr}
  @media(min-width:940px){.split{grid-template-columns:1fr 1fr;gap:64px}.split.inv .txt{order:2}}
  .split h2{font-size:var(--sf-fs-h2-split);font-weight:800;margin-top:12px}
  .split p.d{color:var(--sf-mut);margin-top:16px;font-size:var(--sf-fs-16-5)}
  .lista{list-style:none;padding:0;margin:26px 0 0}
  .lista li{position:relative;padding-left:32px;margin-bottom:15px;color:var(--sf-mut);font-size:var(--sf-fs-15-5)}
  .lista li b{color:var(--sf-ink);font-weight:600}
  .lista li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:var(--sf-r-s);background:var(--acc-50,var(--sf-acc-50))}
  .lista li::after{content:"";position:absolute;left:6px;top:8px;width:8px;height:4.5px;border-left:2px solid var(--acc-700,var(--sf-acc-700));border-bottom:2px solid var(--acc-700,var(--sf-acc-700));transform:rotate(-45deg)}

  /* ============ camino ============ */
  .camino{background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:var(--sf-r-l);padding:30px;box-shadow:var(--sf-sombra-flota)}
  .camino h4{font-size:var(--sf-fs-12);letter-spacing:.1em;text-transform:uppercase;color:var(--sf-mut);font-weight:700;margin-bottom:20px}
  .nodo{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .nodo .av{width:30px;height:30px;font-size:var(--sf-fs-12)}
  .nodo b{font-size:var(--sf-fs-14);font-weight:600;flex:1}
  .rama{margin-left:15px;padding-left:24px;border-left:2px dashed var(--sf-line)}
  .flechita{margin:2px 0 2px 14px;color:var(--sf-line)}

  /* ============ registro de evidencia ============ */
  .exp{background:var(--brand,var(--sf-brand));border-radius:var(--sf-r-l);padding:26px;box-shadow:var(--sf-sombra-maqueta);color:var(--sf-evid-texto)}
  .exp h4{color:var(--sf-paper);font-size:var(--sf-fs-13);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:20px;opacity:.7}
  .expit{display:grid;grid-template-columns:14px 1fr;gap:12px;padding-bottom:18px;position:relative}
  .expit:last-child{padding-bottom:0}
  .expit .l{position:relative}
  .expit .l::before{content:"";position:absolute;left:4px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--acc,var(--sf-acc))}
  .expit:not(:last-child) .l::after{content:"";position:absolute;left:7px;top:14px;bottom:-10px;width:1.5px;background:var(--sf-blanco-14)}
  .expit b{display:block;color:var(--sf-paper);font-size:var(--sf-fs-13-5);font-weight:600}
  .expit span{font-size:var(--sf-fs-12);font-family:var(--sf-mono-sistema);opacity:.72}

  /* ============ pasos ============ */
  .pasos{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
  .paso{position:relative;padding-top:22px}
  .paso .n{position:absolute;top:0;left:0;font-size:var(--sf-fs-52);font-weight:800;color:var(--brand-50,var(--sf-brand-50));line-height:.8;letter-spacing:-.05em}
  .paso h3{font-size:var(--sf-fs-17);font-weight:700;margin-bottom:8px;position:relative}
  .paso p{color:var(--sf-mut);font-size:var(--sf-fs-14-5);position:relative}

  /* ============ comparación ============ */
  .comp{display:grid;gap:20px;grid-template-columns:1fr}
  @media(min-width:900px){.comp{grid-template-columns:repeat(3,1fr)}}
  .colcomp{border:1px solid var(--sf-line);border-radius:var(--sf-r-l);padding:28px;background:var(--sf-paper)}
  .colcomp.nuestra{border-color:var(--brand,var(--sf-brand));box-shadow:var(--sf-sombra-flota);position:relative}
  .colcomp .quien{font-size:var(--sf-fs-12);letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sf-mut);margin-bottom:6px}
  .colcomp.nuestra .quien{color:var(--acc-700,var(--sf-acc-700))}
  .colcomp h3{font-size:var(--sf-fs-19);font-weight:700;margin-bottom:18px}
  .colcomp ul{list-style:none;padding:0;margin:0}
  .colcomp li{position:relative;padding-left:28px;margin-bottom:13px;font-size:var(--sf-fs-14-5);color:var(--sf-mut);line-height:1.5}
  .colcomp li::before{position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:var(--sf-r-s);display:grid;place-items:center;font-size:var(--sf-fs-12);font-weight:800}
  .colcomp li.si::before{content:"✓";background:var(--acc-50,var(--sf-acc-50));color:var(--acc-700,var(--sf-acc-700))}
  .colcomp li.no::before{content:"–";background:var(--sf-neutro-50);color:var(--sf-neutro-400)}
  .comp-nota{margin-top:26px;font-size:var(--sf-fs-13);color:var(--sf-mut);max-width:70ch}

  /* L9-INICIO */
  /* ============ nota del sandbox, las diez preguntas, entradas y tecnología (L9) ============
     Primero el teléfono: una columna, objetivos de 44 px; dos columnas desde 940.
     ⚠ `test/product_tour.test.ts` fija el resto de este <style> contra su línea base y
     recorta lo que está entre L9-INICIO y L9-FIN: lo nuevo se revisa en
     `la_portada_por_las_diez_preguntas.test.ts`. */
  .hero-cat{margin-bottom:14px}
  .sbx{border-top:1px solid var(--sf-line);border-bottom:1px solid var(--sf-line);background:var(--sf-soft);padding:22px 0}
  .sbx h2{font-size:var(--sf-fs-19);font-weight:700}
  .sbx p{color:var(--sf-ink);margin-top:8px;max-width:70ch;font-size:var(--sf-fs-15)}
  .sbx a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
  .band.corta{padding:64px 0}
  .preguntas{display:grid;gap:16px;grid-template-columns:1fr;list-style:none;padding:0;margin:0}
  @media(min-width:940px){.preguntas{grid-template-columns:1fr 1fr}}
  .preguntas > li{margin:0}
  .pq{height:100%;padding:24px;border:1px solid var(--sf-line);border-radius:var(--sf-r-l);background:var(--sf-paper)}
  .pq h3{font-size:var(--sf-fs-17);font-weight:700}
  .pq h3 span{color:var(--acc-700,var(--sf-acc-700));margin-inline-end:8px}
  .pq p{color:var(--sf-mut);margin-top:8px;font-size:var(--sf-fs-15)}
  .pq .enlaces{display:flex;flex-wrap:wrap;gap:0 18px;list-style:none;padding:0;margin:8px 0 0}
  .pq .enlaces a,.entradas a,.tec a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
  .pq .gris{color:var(--sf-mut);font-size:var(--sf-fs-14);display:flex;align-items:flex-start;gap:8px}
  .pq .gris .vd-punto{margin-top:8px}
  .entradas{display:grid;gap:16px;grid-template-columns:1fr;list-style:none;padding:0;margin:0}
  @media(min-width:940px){.entradas{grid-template-columns:repeat(4,1fr)}}
  .entradas > li{padding:20px;border:1px solid var(--sf-line);border-radius:var(--sf-r-l);background:var(--sf-paper)}
  .entradas p{color:var(--sf-mut);font-size:var(--sf-fs-14-5);margin-top:6px}
  .tec p{color:var(--sf-mut);max-width:70ch}
  .tec ul{padding-inline-start:20px;margin:12px 0 0}
  /* L9-FIN */

  /* ============ cierre ============ */
  .cierre{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand-700,var(--sf-brand-700)),var(--brand,var(--sf-brand)) 55%,var(--sf-marca-azul));
          color:var(--sf-paper);border-radius:var(--sf-r-l);padding:66px 40px;text-align:center}
  .cierre::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle,var(--sf-turquesa-34),transparent 68%);top:-220px;right:-140px}
  .cierre > *{position:relative}
  .cierre h2{font-size:var(--sf-fs-cierre);font-weight:800}
  .cierre p{color:var(--sf-cierre-texto);margin:16px auto 0;max-width:50ch;font-size:var(--sf-fs-17-5)}
  .cierre .cta{justify-content:center}

  @media (prefers-reduced-motion:no-preference){
    .js .rev{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
    .js .rev.on{opacity:1;transform:none}
  }