/* marca.css — la hoja única de sari-ai.com (2026-10-12).
   Antes los tokens vivían copiados en línea en cada portada (×3 idiomas) y en
   producto.css, y ya habían derivado. Ahora hay UNA hoja para todas las
   páginas (portadas, producto, artículos y legales); se enlaza con ?v=N y se
   sube N en cada cambio, porque nginx la cachea una semana (map de
   conf.d/sari-ai-cache.conf: .css sin hash = max-age 604800).
   Fuera: /voz/ (SvelteKit, sus propios tokens), /glifo/ (otra marca) y
   404.html (pinta con su CSS en línea aunque falle un asset). */

/* ── 1. Fuentes ──────────────────────────────────────────────────────────
   Display: Bricolage Grotesque 700, subconjuntada (ver README).
   Texto: Instrument Sans variable 400–700, subconjunto latino de Fontsource
   (OFL, fonts/instrument-sans-OFL.txt): cubre ñ, tildes, ä ö ü ß.
   Ambas con swap y una cara de reemplazo métrica: el texto se pinta desde el
   primer fotograma en Arial/Liberation/Roboto escalada al ancho medido de la
   fuente final, así el cambio no mueve líneas (CLS 0). Anchos medidos en
   Chromium con una frase de 220 caracteres en ES/EN/DE (2026-10-12):
   Instrument 400 / Arial 400 = 1,017; Instrument 600 / Arial 700 = 0,975;
   Bricolage 700 / Arial 700 = 1,018. */
@font-face{font-family:'Bricolage';src:url('/fonts/bg.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('/fonts/instrument-sans.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Fallback';font-weight:400 500;
  src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica'),local('Roboto');
  size-adjust:101.7%;ascent-override:95.4%;descent-override:24.6%;line-gap-override:0%}
@font-face{font-family:'Instrument Fallback';font-weight:600 700;
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Helvetica Bold'),local('Roboto Bold');
  size-adjust:97.5%;ascent-override:99.5%;descent-override:25.6%;line-gap-override:0%}
@font-face{font-family:'Bricolage Fallback';font-weight:700;
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold'),local('Helvetica Bold'),local('Roboto Bold');
  size-adjust:101.8%;ascent-override:91.4%;descent-override:26.5%;line-gap-override:0%}

/* ── 2. Tokens ───────────────────────────────────────────────────────────
   Contrastes WCAG medidos sobre --fondo / --superficie.
   Un solo acento de marca: el violeta. --violeta es RELLENO (botones,
   símbolos) con texto blanco 6,67:1; como texto o línea sobre oscuro no
   llega (2,78:1): para eso están --violeta-texto (6,17 / 5,35) y
   --violeta-linea (3,85, bordes, íconos y foco).
   --ok y --atencion son SEMÁNTICOS (en vivo, latencia, advertencias): nunca
   decoración ni segundo color de marca. */
:root{
  color-scheme:dark;
  --fondo:#10131D;          /* fondo oscuro de presentación de la identidad */
  --superficie:#1A2131;     /* tinta de la identidad: tarjetas y bandas */
  --texto:#F4F5FA;          /* 18,5:1 */
  --tenue:#A3ACC2;          /* 8,15:1 · 7,07:1 */
  --mudo:#7E8BA9;           /* 5,43:1 · 4,71:1 — solo texto ≥ 14 px */
  --violeta:#602BF4;        /* marca, solo relleno */
  --violeta-hover:#6A38F5;  /* blanco encima 6,01:1 */
  --violeta-texto:#A081F8;  /* mismo matiz 255,8°, más claro */
  --violeta-linea:#7C51F6;  /* 3,85:1, mínimo 3:1 de UI */
  --ok:#2DD4BF;
  --atencion:#FDE047;
  --linea:rgba(163,172,194,.14);
  --linea-fuerte:rgba(163,172,194,.3);

  --f-display:'Bricolage','Bricolage Fallback',ui-sans-serif,system-ui,sans-serif;
  --f-texto:'Instrument Sans','Instrument Fallback',ui-sans-serif,system-ui,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* Escala fluida, de 390 a 1440 px de ancho. Nada de texto corrido por
     debajo de 14 px; 12 px solo en etiquetas en mayúsculas con espaciado. */
  --t-eti:.75rem;                                   /* 12 */
  --t-peq:.875rem;                                  /* 14 */
  --t-pie:.9375rem;                                 /* 15 */
  --t-txt:clamp(1rem,.97rem + .14vw,1.0625rem);     /* 16 → 17 */
  --t-lede:clamp(1.0625rem,1rem + .3vw,1.25rem);    /* 17 → 20 */
  --t-h3:clamp(1.25rem,1.16rem + .4vw,1.5rem);      /* 20 → 24 */
  --t-h2:clamp(1.75rem,1.43rem + 1.35vw,2.625rem);  /* 28 → 42 */
  --t-h1:clamp(2.25rem,1.6rem + 2.75vw,3.875rem);   /* 36 → 62 */
  --t-cifra:clamp(1.375rem,1.2rem + .75vw,1.875rem);/* 22 → 30 */
  --medida:66ch;

  --ancho:76rem;
  /* Cajas con el margen por dentro (barra, pie, cabeceras de producto): mismo
     borde de contenido que las secciones, que lo llevan por fuera. */
  --ancho-caja:calc(var(--ancho) + 2 * var(--margen));
  --margen:clamp(20px,4vw,40px);
  --sec:clamp(56px,2.5rem + 4vw,112px);
  --radio:20px;
  --ease:cubic-bezier(.2,.75,.25,1);
}

/* ── 3. Base ─────────────────────────────────────────────────────────────
   En @layer para que pese menos que cualquier regla de abajo (como hacía el
   preflight de Tailwind que la portada heredó). */
@layer base{
  *,::before,::after{box-sizing:border-box;border:0 solid;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;tab-size:4;
    -webkit-tap-highlight-color:transparent;scroll-padding-top:24px}
  h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
  a{color:inherit;text-decoration:inherit}
  b,strong{font-weight:600}
  ol,ul{list-style:none}
  img,svg,video{display:block;vertical-align:middle}
  img,video{max-width:100%;height:auto}
}
body{background:var(--fondo);color:var(--texto);font-family:var(--f-texto);
  font-size:var(--t-txt);line-height:1.6;font-kerning:normal;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--violeta);color:#fff}
/* Foco: un solo anillo en todo el sitio. */
:focus-visible{outline:2px solid var(--violeta-texto);outline-offset:3px}
/* Enlace de salto: invisible hasta que se navega con teclado. */
.salto{position:absolute;left:16px;top:-100px;z-index:100;padding:12px 18px;border-radius:999px;
  background:var(--violeta);color:#fff;font-weight:600}
.salto:focus{top:16px}
/* Transición entre páginas del sitio: fundido corto, sin JS. */
@view-transition{navigation:auto}

/* ── 4. Navegación principal ─────────────────────────────────────────────
   Igual en todas las páginas: logo, las cuatro secciones, idioma y el CTA.
   En móvil, el CTA se esconde (la portada lo tiene en el hero y el botón
   flotante lo retoma) y las secciones pasan a una fila propia, desplazable
   si un idioma la alarga. Sin menú hamburguesa ni JS. */
.sn{max-width:var(--ancho-caja);margin:0 auto;padding:12px var(--margen) 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;position:relative;z-index:5}
.sn-logo{display:inline-flex;align-items:center;min-height:44px;margin-right:auto}
.sn-logo img{width:148px;height:auto}
.sn-nav ul{display:flex;gap:2px}
.sn-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;
  color:var(--tenue);font-size:var(--t-pie);font-weight:500;white-space:nowrap;position:relative;
  transition:color .18s}
.sn-nav a:hover{color:var(--texto)}
.sn-nav a[aria-current]{color:var(--texto)}
.sn-nav a[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:2px;
  border-radius:2px;background:var(--violeta-linea)}
.sn-idi{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--linea-fuerte)}
.sn-idi a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:32px;
  padding:0 8px;border-radius:999px;font:600 var(--t-eti)/1 var(--f-mono);letter-spacing:.08em;
  color:var(--tenue);transition:color .18s}
.sn-idi a:hover{color:var(--texto)}
.sn-idi a[aria-current]{background:var(--violeta);color:#fff}
.sn-cta{min-height:44px!important;padding:0 18px!important;font-size:var(--t-pie)!important}
@media(max-width:819px){
  .sn{padding-top:8px}
  .sn-logo img{width:132px}
  .sn-cta{display:none!important}
  .sn-nav{order:3;flex:1 0 100%;margin:0 calc(-1 * var(--margen));padding:0 calc(var(--margen) - 12px);
    overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
  .sn-nav::-webkit-scrollbar{display:none}
  /* La fila desplazable recorta lo que sobresale: el anillo va por dentro. */
  .sn-nav a:focus-visible{outline-offset:-3px}
}

/* ── 5. Botones y enlaces de acción ──────────────────────────────────────
   Primario: relleno violeta, texto blanco (6,67:1), ≥ 48 px de alto.
   Secundario: contorno. Terciario: enlace subrayado. */
.hx-b1,.hy-p{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;border-radius:999px;background:var(--violeta);color:#fff;
  font-family:var(--f-texto);font-weight:600;font-size:1rem;line-height:1.2;white-space:nowrap;
  box-shadow:0 12px 32px -14px rgba(96,43,244,.9),inset 0 1px 0 rgba(255,255,255,.16);
  transition:transform .18s var(--ease),background-color .18s,box-shadow .18s}
.hx-b1:hover,.hy-p:hover{background:var(--violeta-hover);transform:translateY(-1px);
  box-shadow:0 16px 38px -14px rgba(96,43,244,1),inset 0 1px 0 rgba(255,255,255,.2)}
.hx-b1{min-height:52px;padding:0 26px;font-size:1.0625rem}
.hx-b2{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:999px;
  border:1px solid var(--linea-fuerte);color:var(--texto);font-weight:500;transition:border-color .18s}
.hx-b2:hover{border-color:var(--violeta-linea)}
.hy-s{display:inline-flex;align-items:center;min-height:44px;color:var(--tenue);font-size:var(--t-pie);
  text-decoration:underline;text-decoration-color:var(--linea-fuerte);text-underline-offset:5px;
  text-decoration-thickness:1px;transition:color .18s,text-decoration-color .18s}
.hy-s:hover{color:var(--texto);text-decoration-color:var(--violeta-linea)}

/* ── 6. Portada: hero ────────────────────────────────────────────────── */
.hx{position:relative;overflow:hidden;color:var(--texto);
  padding:clamp(28px,5vw,72px) var(--margen) clamp(40px,5vw,64px)}
/* Un solo foco de luz, desde la marca, detrás de la operadora. */
.hx-luz{position:absolute;inset:-120px 0 0;pointer-events:none;
  background:radial-gradient(58% 46% at 72% 38%,rgba(96,43,244,.38),transparent 70%)}
.hx-in{position:relative;max-width:var(--ancho);margin:0 auto;display:grid;gap:clamp(28px,5vw,56px);
  grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.hx-in{grid-template-columns:1.15fr .85fr}}
.hx-ojo,.hy-ojo,.hy-rol{font:600 var(--t-eti)/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--violeta-texto);margin:0 0 16px}
.hx h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.25rem,1.45rem + 2.1vw,3.1rem);line-height:1.04;
  letter-spacing:-.045em;margin:0 0 20px;text-wrap:balance}
.hx h1 em{font-style:normal;color:var(--violeta-texto)}
.hx-baja{font-size:var(--t-lede);line-height:1.6;color:var(--tenue);margin:0 0 28px;max-width:36rem}
.hx-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hx-pie{margin:16px 0 0;font-size:var(--t-peq);color:var(--mudo)}

/* La prueba: un turno real, con el tiempo transcurriendo a la vista. */
.hx-demo{margin:28px 0 0;border-left:2px solid var(--violeta-linea);padding-left:18px;
  display:flex;flex-direction:column;gap:8px;min-height:124px}
.hx-t{font-size:var(--t-txt);line-height:1.45;opacity:0}
.hx-t b{font:600 var(--t-eti)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);display:block;margin-bottom:5px}
.hx-vos{color:var(--texto);animation:hx-ap .5s ease-out .3s forwards}
.hx-sari{color:var(--texto);animation:hx-ap .5s ease-out 2.2s forwards}
.hx-mide{display:flex;align-items:center;gap:11px;opacity:0;animation:hx-ap .3s ease-out 1.1s forwards}
.hx-barra{position:relative;height:2px;width:96px;background:var(--linea-fuerte);border-radius:2px;overflow:hidden}
/* Latencia = dato: va en --ok, el color semántico de "medido, en vivo". */
.hx-barra i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--ok);
  animation:hx-llena .6s linear 1.4s forwards}
@keyframes hx-ap{to{opacity:1}}
@keyframes hx-llena{to{transform:scaleX(1)}}

/* La operadora, con el aro de estado del propio producto. */
.hx-orbe{position:relative;justify-self:center;width:min(340px,62vw);aspect-ratio:1;display:grid;place-items:center}
.hx-orbe::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#8C66F7,#3F1BA8 48%,#141A2A 100%);
  box-shadow:0 0 90px rgba(96,43,244,.42),inset 0 0 70px rgba(0,0,0,.5)}
.hx-orbe img{position:relative;width:78%;height:78%;border-radius:50%;object-fit:cover;
  -webkit-mask-image:radial-gradient(circle,#000 86%,transparent 100%);
  mask-image:radial-gradient(circle,#000 86%,transparent 100%)}
.hx-aro{position:absolute;width:78%;height:78%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 3px rgba(160,129,248,.55),0 0 40px 6px rgba(96,43,244,.4)}
.hx-anillo{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(160,129,248,.5);
  opacity:0;animation:hx-pulso 2.8s ease-out infinite}
.hx-anillo:nth-of-type(2){animation-delay:.95s}
.hx-anillo:nth-of-type(3){animation-delay:1.9s}
@keyframes hx-pulso{0%{transform:scale(1);opacity:.45}100%{transform:scale(1.55);opacity:0}}

/* Las cifras, en tipografía de instrumento porque son medidas. */
.hx-cifras{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin:clamp(32px,4vw,52px) auto 0;
  max-width:var(--ancho);padding-top:24px;border-top:1px solid var(--linea);position:relative}
@media(min-width:760px){.hx-cifras{grid-template-columns:repeat(4,auto);justify-content:start;gap:0 56px}}
.hx-c b{display:block;font:700 var(--t-cifra)/1.1 var(--f-mono);color:var(--texto);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hx-c span{display:block;margin-top:6px;font-size:var(--t-peq);line-height:1.4;color:var(--tenue)}

/* Entrada escalonada: la portada se arma en orden de lectura en medio
   segundo. Un solo movimiento orquestado, no cinco efectos sueltos. */
.hx-ojo,.hx h1,.hx-baja,.hx-cta,.hx-demo,.hx-pie,.hx-orbe,.hx-cifras{
  opacity:0;animation:hx-sube .62s var(--ease) forwards}
.hx-ojo{animation-delay:.04s} .hx h1{animation-delay:.11s}
.hx-baja{animation-delay:.2s} .hx-cta{animation-delay:.28s}
.hx-orbe{animation-delay:.16s} .hx-demo{animation-delay:.36s}
.hx-pie{animation-delay:.44s} .hx-cifras{animation-delay:.5s}
@keyframes hx-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hx-orbe::before{animation:hx-late 6s ease-in-out infinite}
@keyframes hx-late{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

/* ── 6b. Portada: anatomía de los 0,6 segundos ─────────────────────────
   La prueba del titular, dibujada como la grabación de una llamada en dos
   canales (Tú / SARI): tu voz termina, hay ~600 ms de silencio con tres pasos
   dentro, suena SARI y, al hablarle encima, se calla. Solo datos del artículo
   de latencia; el reparto por paso no se publica, así que los tramos son
   iguales y la nota lo dice. El contenido es la <ol>; ondas, cifra grande y
   cabezal son decoración (aria-hidden). Sin animación se ve el estado final. */
.an{content-visibility:auto;contain-intrinsic-size:auto 700px}
@media(min-width:640px){.an{contain-intrinsic-size:auto 620px}}
.an .hy-sub{text-wrap:pretty}
.an-fig{position:relative;margin-top:clamp(8px,1.5vw,16px)}
.an-cifra{display:flex;justify-content:center;color:var(--texto)}
.an-cifra b{font:700 clamp(2.75rem,1.6rem + 4.4vw,6.5rem)/.9 var(--f-display);letter-spacing:-.055em;white-space:nowrap}
.an-cifra span{color:var(--violeta-texto);font-size:.5em;letter-spacing:-.02em;margin-left:.08em}
.an-ol{position:relative;z-index:2}
.an-eti{display:block;font:600 var(--t-eti)/1.3 var(--f-mono);letter-spacing:.06em;color:var(--violeta-texto);white-space:nowrap}
.an-ol h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.0625rem,.98rem + .3vw,1.25rem);
  line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.an-ol p{font-size:var(--t-peq);line-height:1.5;color:var(--tenue);margin-top:4px}
.an-nota{margin-top:clamp(14px,2.5vw,28px);font-size:var(--t-peq);line-height:1.5;color:var(--mudo);max-width:46rem}
.an-nota a{display:inline-block;padding:3px 0;color:var(--violeta-texto);text-decoration:underline;
  text-decoration-color:rgba(160,129,248,.45);text-underline-offset:4px}
.an-nota a:hover{text-decoration-color:var(--violeta-texto)}
.an-cab{display:none}

/* Escritorio: partitura horizontal. Columna 1 = nombre del canal; 2–7 = seis
   tramos iguales. La ventana de silencio va de B1 (0 ms) a B4 (~600 ms). */
@media(min-width:900px){
  .an{contain-intrinsic-size:auto 750px}
  .an-fig{display:grid;grid-template-columns:2.75rem repeat(6,minmax(0,1fr));
    grid-template-rows:auto 34px 34px auto;row-gap:6px;overflow:clip}
  .an-fig::before{content:"";grid-column:3/6;grid-row:1/-1;border-inline:1px dashed rgba(124,81,246,.6);
    background:linear-gradient(rgba(96,43,244,.16),rgba(96,43,244,.04) 85%)}
  .an-cifra{grid-column:3/6;grid-row:1;z-index:2;padding:14px 16px 10px}
  .an-pista{grid-column:1/-1;display:grid;grid-template-columns:2.75rem 1fr;align-items:center;z-index:1}
  .an-vos{grid-row:2}.an-sari{grid-row:3}
  .an-nom{font:600 var(--t-eti)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
  .an-onda{width:100%;height:34px;overflow:visible;
    background:linear-gradient(var(--linea-fuerte),var(--linea-fuerte)) center/100% 1px no-repeat}
  .an-onda path{fill:none;stroke:var(--tenue);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .an-sari path{stroke:var(--violeta-texto)}
  .an-ol{grid-column:2/-1;grid-row:4;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding-top:34px}
  .an-ol::before{content:"";position:absolute;top:12px;left:calc(100% / 6);right:0;height:2px;
    background:linear-gradient(90deg,var(--violeta-linea) 60%,var(--linea-fuerte) 60%)}
  .an-ol li{position:relative;padding:0 16px 0 14px;hyphens:auto;hyphenate-limit-chars:10 4 4;overflow-wrap:break-word}
  .an-ol li::before{content:"";position:absolute;top:-27px;left:-6px;width:12px;height:12px;border-radius:50%;
    border:2px solid var(--violeta-linea);background:var(--violeta-linea);box-shadow:0 0 0 4px var(--fondo)}
  .an-ol .an-p5::before{width:16px;height:16px;top:-29px;left:-8px;background:var(--violeta-texto);border-color:var(--violeta-texto);
    box-shadow:0 0 0 4px var(--fondo),0 0 18px 2px rgba(160,129,248,.55)}
  /* Tu turno apunta a la línea de 0 ms: alineado a la derecha y sin punto. */
  .an-ol .an-p1{text-align:end;padding:0 18px 0 0}
  .an-ol .an-p1::before{display:none}
  .an-ol h3{margin-top:6px}
  .an-cab{display:block;grid-column:2/-1;grid-row:1/-1;z-index:1;pointer-events:none;visibility:hidden}
  .an-cab::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;
    background:linear-gradient(var(--violeta-texto),rgba(160,129,248,.15));box-shadow:0 0 16px 2px rgba(160,129,248,.45)}
}

/* Móvil y tableta: línea de tiempo vertical. Los dos canales son columnas de
   barras a la izquierda (::before = Tú, ::after = SARI; tres capas de rayas
   de 14/9/4 px dan barras de largo variable); la hora va en mono a la
   derecha, como en un registro. La cifra grande queda de marca de agua tras
   la ventana de silencio (contenido generado con texto alternativo vacío). */
@media(max-width:899px){
  .an-pista,.an-cifra{display:none}
  .an .hy-sub{margin-bottom:12px}
  .an-fig{display:grid;max-width:40rem}
  .an-ol{grid-area:1/1}
  .an-fig::after{content:attr(data-cifra) / "";grid-area:1/1;align-self:center;justify-self:end;margin-top:-8px;
    padding-right:.08em;white-space:nowrap;font:700 clamp(6rem,4rem + 10vw,9rem)/1 var(--f-display);
    letter-spacing:-.06em;color:rgba(124,81,246,.17)}
  .an-ol li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;padding:5px 2px 5px 46px}
  .an-ol h3{grid-area:1/1}
  .an-ol p{grid-column:1/-1}
  .an-ol .an-eti{grid-area:1/2;padding-top:3px}
  .an-ol::before{content:attr(data-canales) / "";display:block;margin:0 0 6px;padding-left:3px;font:600 var(--t-eti)/1.3 var(--f-mono);letter-spacing:.06em;color:var(--tenue)}
  .an-ol .an-p2,.an-ol .an-p3,.an-ol .an-p4{background:linear-gradient(90deg,rgba(96,43,244,.14),rgba(96,43,244,.02))}
  .an-ol .an-p2,.an-ol .an-p5{border-top:1px dashed rgba(124,81,246,.6)}
  .an-ol li::before,.an-ol li::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:14px;
    --c:var(--tenue);--y:0;--h:0%;background:
    repeating-linear-gradient(var(--c) 0 2px,#0000 2px 15px) 0 var(--y)/14px var(--h) no-repeat,
    repeating-linear-gradient(#0000 0 5px,var(--c) 5px 7px,#0000 7px 10px) 2.5px var(--y)/9px var(--h) no-repeat,
    repeating-linear-gradient(var(--c) 0 2px,#0000 2px 5px) 5px var(--y)/4px var(--h) no-repeat,
    linear-gradient(var(--linea-fuerte),var(--linea-fuerte)) 6.5px 0/1px 100% no-repeat}
  .an-ol li::after{left:21px;--c:var(--violeta-texto)}
  .an-ol .an-p1::before{--h:92%}
  .an-ol .an-p5::after{--y:4px;--h:calc(100% - 4px)}
  /* Barge-in: tu voz entra y la de SARI se apaga poco después. */
  .an-ol .an-p6::before{--y:100%;--h:68%}
  .an-ol .an-p6::after{--h:46%}
}

/* 900–1100 px: la partitura es de seis columnas estrechas; menos relleno y título
   algo menor evitan cortes de palabra feos ("Reconoci-/miento", "Echounterdrü-/ckung"). */
@media(min-width:900px) and (max-width:1100px){
  .an .an-ol li{padding:0 10px}
  .an .an-ol h3{font-size:1rem}
}

/* Movimiento: el cabezal recorre la partitura mientras la figura cruza la
   pantalla (cover 30 % → 62 %), las ondas se revelan a su paso y cada punto
   se enciende cuando el cabezal llega a su línea Bk, en 30 + 32·k/6 %. En
   móvil, cada tramo de los canales se dibuja al cruzar el 60 % de la
   pantalla. Nunca se anima la opacidad ni el color de un texto. */
@supports (animation-timeline:view()){
@media(prefers-reduced-motion:no-preference){
  @media(min-width:900px){
    .an-fig{view-timeline:--an}
    .an-cab{visibility:visible;animation:an-cab linear both;animation-timeline:--an;animation-range:cover 30% cover 62%}
    .an-onda{animation:an-revela linear both;animation-timeline:--an;animation-range:cover 35.33% cover 62%}
    .an-ol li::before{animation:an-punto linear both;animation-timeline:--an}
    .an-ol .an-p2::before{animation-range:cover 35.33% cover 36.5%}
    .an-ol .an-p3::before{animation-range:cover 40.67% cover 41.8%}
    .an-ol .an-p4::before{animation-range:cover 46% cover 47.2%}
    .an-ol .an-p5::before{animation-name:an-punto-g;animation-range:cover 51.33% cover 52.5%}
    .an-ol .an-p6::before{animation-range:cover 56.67% cover 57.8%}
  }
  @media(max-width:899px){
    .an-ol li::before,.an-ol li::after{animation:an-baja linear both;animation-timeline:view(block 0 40%);
      animation-range:entry-crossing 0% entry-crossing 100%}
  }
}}
@keyframes an-cab{0%{transform:translateX(0);opacity:0}6%,94%{opacity:1}100%{transform:translateX(100%);opacity:0}}
@keyframes an-revela{from{clip-path:inset(-4px 83.34% -4px 0)}to{clip-path:inset(-4px 0 -4px 0)}}
@keyframes an-punto{from{background:var(--fondo);transform:scale(.8)}}
@keyframes an-punto-g{from{background:var(--fondo);box-shadow:0 0 0 4px var(--fondo);transform:scale(.8)}}
@keyframes an-baja{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

/* ── 7. Cuerpo común (portada, producto, artículos) ─────────────────── */
.hy{color:var(--texto);padding:0 var(--margen)}
.hy-sec{max-width:var(--ancho);margin:0 auto;padding:var(--sec) 0 0}
.hy h2{font-family:var(--f-display);font-weight:700;font-size:var(--t-h2);line-height:1.08;
  letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance}
.hy-sub{color:var(--tenue);font-size:var(--t-lede);line-height:1.6;margin:0 0 clamp(24px,3vw,40px);max-width:40rem}

.hy-rej{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.hy-rej{grid-template-columns:1fr 1fr;gap:20px}}
.hy-t{position:relative;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);
  padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;transition:border-color .25s}
.hy-t:hover{border-color:rgba(124,81,246,.55)}
.hy-ancha{grid-column:1/-1}
@media(min-width:900px){.hy-ancha{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:start}}
.hy-t h3,.hy-t h2.hy-t-h{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);
  line-height:1.2;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.hy-baja{color:var(--tenue);margin:0 0 14px;line-height:1.55}
.hy-txt{color:var(--tenue);font-size:var(--t-pie);line-height:1.6;margin:0;max-width:var(--medida)}
.hy-txt+.hy-txt{margin-top:10px}
.hy-t ul{display:flex;flex-direction:column;gap:10px;margin:0 0 8px}
.hy-t li{display:flex;gap:10px;font-size:var(--t-pie);line-height:1.55;color:var(--tenue)}
.hy-t li span:first-child{color:var(--violeta-linea);flex:none;font-weight:700}
.hy-t li b{color:var(--texto);font-weight:600}
.hy-star{background:rgba(96,43,244,.13);border-left:2px solid var(--violeta-linea);
  margin:0 -12px;padding:10px 12px;border-radius:0 10px 10px 0}
.hy-star span:first-child{color:var(--violeta-texto)!important}

/* Estado del producto. El texto va siempre en --tenue; el punto lleva el
   color semántico: en vivo = --ok, en desarrollo = --atencion, por
   invitación = la marca. */
.hy-chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font:600 var(--t-eti)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);
  padding:7px 12px;border-radius:999px;margin:0 0 14px;border:1px solid var(--linea-fuerte)}
.hy-punto{width:7px;height:7px;border-radius:50%;background:var(--violeta-linea)}
.hy-vivo .hy-punto{background:var(--ok);box-shadow:0 0 0 3px rgba(45,212,191,.18)}
.hy-dev .hy-punto{background:var(--atencion)}

.hy-acc{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;margin-top:auto;padding-top:18px}
.hy-acc .hy-p{margin-right:4px}

.hy-tres{display:grid;gap:24px;grid-template-columns:1fr}
.hy-tres>div{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;align-items:center}
.hy-tres>div>p{grid-column:1/-1}
@media(min-width:820px){.hy-tres{grid-template-columns:repeat(3,1fr);gap:40px}
  .hy-tres>div{grid-template-columns:1fr;align-items:start}}
.hy-tres h3{font-family:var(--f-display);font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;line-height:1.2}
@media(min-width:820px){.hy-tres h3{margin:8px 0 0}}
.hy-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(96,43,244,.16);border:1px solid rgba(124,81,246,.45);color:var(--violeta-texto)}

/* La compañía: tarjeta del fundador a lo ancho + datos duros. */
.hy-fund{display:grid;gap:16px 24px;grid-template-columns:1fr;align-items:start}
@media(min-width:820px){.hy-fund{grid-template-columns:auto 1fr}}
.hy-ini{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;
  font:700 1.3rem/1 var(--f-display);letter-spacing:-.02em;color:#fff;background:var(--violeta)}
.hy-rol{margin-bottom:8px}
.hy-fund h3{margin-top:0}
.hy-dl{display:grid;gap:14px;grid-template-columns:1fr;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--linea)}
@media(min-width:700px){.hy-dl{grid-template-columns:1fr 1fr;gap:22px 34px}}
.hy-dl-ancha{grid-column:1/-1}
.hy-dl h4{font:600 var(--t-eti)/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 6px}
.hy-dl p{margin:0;color:var(--texto);font-size:var(--t-pie);line-height:1.55}

/* Cierre de la portada. */
.hy-cierre{max-width:var(--ancho);margin:var(--sec) auto 0;padding:clamp(32px,5vw,64px) clamp(20px,4vw,48px);
  border-radius:calc(var(--radio) + 6px);border:1px solid var(--linea);text-align:center;
  background:radial-gradient(90% 140% at 20% 0%,rgba(96,43,244,.32),transparent 70%),var(--superficie)}
.hy-cierre h2{margin-bottom:12px}
.hy-cierre .hy-sub{margin:0 auto 20px}
.hy-cierre .hy-acc{justify-content:center;padding-top:0}
.hy-tel{margin:10px 0 0;color:var(--tenue);font-size:var(--t-pie);line-height:1.5}
.hy-tel a{display:inline-block;padding:10px 2px;color:var(--violeta-texto);font-weight:600;white-space:nowrap}
.hy-tel a:hover{text-decoration:underline;text-underline-offset:4px}

/* ── 8. Pie ───────────────────────────────────────────────────────────
   Cuatro columnas en escritorio (la de Legal ya no cae sola a una segunda
   fila); en móvil, marca a lo ancho, Productos y Legal lado a lado y
   Contacto en dos columnas. Cada enlace mide ≥ 32 px de alto. */
.hy-pie{max-width:var(--ancho-caja);margin:0 auto;padding:var(--sec) var(--margen) 24px;
  display:grid;gap:28px 24px;grid-template-columns:1fr 1fr;
  grid-template-areas:"marca marca" "prod legal" "cont cont"}
.hy-pie>div:nth-child(1){grid-area:marca}
.hy-pie>div:nth-child(2){grid-area:prod}
.hy-pie>div:nth-child(3){grid-area:cont}
.hy-pie>div:nth-child(4){grid-area:legal}
@media(min-width:1000px){.hy-pie{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.9fr);
  grid-template-areas:"marca prod cont legal";gap:40px}}
.hy-pie h3{font:600 var(--t-eti)/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);margin:0 0 8px}
.hy-pie ul{display:flex;flex-direction:column}
.hy-pie>div:nth-child(3) ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
@media(min-width:1000px){.hy-pie>div:nth-child(3) ul{display:flex}}
.hy-pie li a{display:inline-flex;align-items:center;min-height:32px;color:var(--tenue);font-size:var(--t-pie);transition:color .18s}
.hy-pie a:hover{color:var(--texto)}
.hy-marca{font-family:var(--f-display);font-size:1.375rem;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.hy-marca i{font-style:normal;color:var(--violeta-texto)}
.hy-pie .hy-txt{font-size:var(--t-peq);max-width:34rem}
.hy-dir{font-style:normal;margin-top:12px}
.hy-hor{margin-top:10px}
.hy-zona{color:var(--mudo)}
.hy-legal{grid-column:1/-1;padding:20px 0 max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--linea);
  color:var(--mudo);font-size:var(--t-peq)}

/* ── 9. Botón flotante "Habla con SARI" ────────────────────────────────
   Solo en las portadas. Empieza oculto y /cta.js lo muestra cuando NINGÚN
   otro "Habla con SARI" (hero, barra, cierre) ni el pie están a la vista:
   así nunca duplica el CTA ni tapa el pie. Sin JS lo destapa el <noscript>
   del <head>. En móvil es un círculo de 56 px que respeta el área segura. */
.sari-fab{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));
  z-index:60;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 18px;
  border-radius:999px;background:var(--violeta);color:#fff;font-weight:600;
  box-shadow:0 16px 40px -12px rgba(96,43,244,.95),inset 0 1px 0 rgba(255,255,255,.18);
  transition:opacity .25s,transform .3s var(--ease),visibility 0s 0s}
.sari-fab:hover{background:var(--violeta-hover)}
.sari-fab svg{width:22px;height:22px}
.sari-fab[data-oculto]{opacity:0;visibility:hidden;transform:translateY(16px) scale(.94);pointer-events:none;
  transition:opacity .2s,transform .2s,visibility 0s .2s}
.sari-fab::before{content:"";position:absolute;inset:-4px;border-radius:999px;
  border:2px solid rgba(160,129,248,.7);animation:sari-fab-pulso 2.4s ease-out infinite}
@keyframes sari-fab-pulso{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
@media(max-width:640px){
  .sari-fab{width:56px;height:56px;padding:0;justify-content:center;right:max(16px,env(safe-area-inset-right));
    bottom:max(16px,env(safe-area-inset-bottom))}
  .sari-fab-text{display:none}
}

/* ── 10. Páginas de producto y artículos ──────────────────────────────── */
.pp-cab{max-width:var(--ancho-caja);margin:0 auto;padding:clamp(32px,5vw,64px) var(--margen) 0}
.pp-cab h1{font-family:var(--f-display);font-weight:700;font-size:var(--t-h1);line-height:1.05;
  letter-spacing:-.04em;margin:0 0 20px;text-wrap:balance;max-width:20ch}
.pp-cab h1 em{font-style:normal;color:var(--violeta-texto)}
.pp-lede{color:var(--tenue);font-size:var(--t-lede);line-height:1.6;max-width:42rem;margin:0}
.pp-cifras{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;max-width:var(--ancho-caja);
  margin:clamp(28px,4vw,44px) auto 0;padding:24px var(--margen) 0;position:relative}
.pp-cifras::before{content:"";position:absolute;top:0;left:var(--margen);right:var(--margen);border-top:1px solid var(--linea)}
@media(min-width:760px){.pp-cifras{grid-template-columns:repeat(4,1fr)}}
.pp-cifras b{display:block;font:700 var(--t-cifra)/1.1 var(--f-mono);color:var(--texto);letter-spacing:-.02em}
.pp-cifras span{display:block;margin-top:6px;color:var(--tenue);font-size:var(--t-peq);line-height:1.45}
.pp-lista{display:flex;flex-direction:column;gap:12px;max-width:var(--medida)}
.pp-lista li{display:flex;gap:10px;font-size:var(--t-txt);line-height:1.6;color:var(--tenue)}
.pp-lista li span:first-child{color:var(--violeta-linea);flex:none;font-weight:700}
.pp-lista li b{color:var(--texto);font-weight:600}
/* "Lo que X no es hoy": la cruz es una advertencia, no decoración. */
.pp-no li span:first-child{color:var(--atencion)}
.pp-cuerpo a:not(.hy-p):not(.hy-s){color:var(--violeta-texto);text-decoration:underline;
  text-decoration-color:rgba(160,129,248,.45);text-underline-offset:4px;text-decoration-thickness:1px;
  padding:3px 0} /* enlaces dentro de un párrafo: 24 px de caja */
.pp-cuerpo a:not(.hy-p):not(.hy-s):hover{text-decoration-color:var(--violeta-texto)}
.pp-faq{max-width:44rem}
.pp-faq dt{color:var(--texto);font-weight:600;font-size:var(--t-lede);margin:24px 0 6px}
.pp-faq dt:first-child{margin-top:0}
.pp-faq dd{color:var(--tenue);line-height:1.65}
.pp-art .hy-sec{padding-top:clamp(40px,5vw,56px)}
.pp-art p{color:var(--tenue);font-size:var(--t-txt);line-height:1.72;max-width:var(--medida);margin:0 0 16px}
.pp-art p b,.pp-art li b{color:var(--texto);font-weight:600}
.pp-art h2{max-width:var(--medida)}
.pp-art .pp-lista{margin-bottom:16px}
.pp-firma{max-width:var(--ancho-caja);margin:clamp(40px,5vw,56px) auto 0;padding:0 var(--margen);color:var(--tenue);
  font-size:var(--t-pie);line-height:1.6}
.pp-firma b{color:var(--texto);font-weight:600}
.pp-firma a{color:var(--violeta-texto);text-decoration:underline;text-underline-offset:4px;
  display:inline-flex;align-items:center;min-height:24px}

/* ── 11. Legales ────────────────────────────────────────────────────── */
.legal{max-width:calc(46rem + 2 * var(--margen));margin:0 auto;padding:clamp(32px,5vw,64px) var(--margen) 0}
.legal h1{font-family:var(--f-display);font-weight:700;font-size:var(--t-h2);line-height:1.08;
  letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance}
.legal h2{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);line-height:1.2;
  letter-spacing:-.02em;margin:40px 0 10px}
.legal p,.legal li{color:var(--tenue);line-height:1.7;max-width:var(--medida)}
.legal p{margin:0 0 14px}
.legal ul{list-style:disc;padding-left:1.25rem;margin:0 0 14px}
.legal li{margin:0 0 6px}
.legal li::marker{color:var(--violeta-linea)}
.legal a{color:var(--violeta-texto);text-decoration:underline;text-underline-offset:4px;padding:3px 0}
.legal b,.legal strong{color:var(--texto)}
.legal .updated{font-size:var(--t-peq);color:var(--mudo)}
.legal .notice{padding:18px 20px;border:1px solid var(--linea);border-radius:14px;background:var(--superficie)}

/* ── 12. Movimiento reducido ────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .hx-ojo,.hx h1,.hx-baja,.hx-cta,.hx-demo,.hx-pie,.hx-orbe,.hx-cifras{opacity:1;animation:none;transform:none}
  .hx-orbe::before,.sari-fab::before{animation:none}
  .hx-t,.hx-mide{opacity:1;animation:none}
  .hx-barra i{transform:scaleX(1);animation:none}
  .hx-anillo{animation:none;opacity:.25}
  .hx-b1,.hy-p,.sari-fab{transition:none}
  .hx-b1:hover,.hy-p:hover{transform:none}
}

/* ── 13. Móvil compacto (< 640 px) ─────────────────────────────────────
   La portada medía ~8.600 px a 390 de ancho. Sin quitar contenido: menos
   aire entre bloques, detalle de tarjetas a 14 px (el mínimo del sistema
   para texto corrido), orbe más chico y los tres productos en un carrusel
   con desplazamiento nativo y el borde de la siguiente tarjeta a la vista. */
@media(max-width:639px){
  :root{--sec:44px}
  .hx{padding-top:20px;padding-bottom:32px}
  .hx-in{gap:24px}
  .hx-pie{margin-top:12px}
  .hx h1{margin-bottom:14px}
  .hx-baja{margin-bottom:22px}
  .hx-orbe{width:min(184px,48vw)}
  .hx-demo{margin-top:22px;min-height:118px}
  .hx-cifras{margin-top:24px;padding-top:18px;gap:14px 20px}
  .hy-sub{font-size:var(--t-txt);margin-bottom:20px}
  .hy-t{padding:18px}
  .hy-baja{font-size:var(--t-pie);margin-bottom:10px}
  .hy-txt,.hy-t li,.hy-dl p{font-size:var(--t-peq);line-height:1.5}
  .hy-t ul{gap:8px}
  .hy-star{margin:0 -8px;padding:8px}
  .hy-chip{margin-bottom:10px}
  .hy-acc{padding-top:10px}
  .hy-tres{gap:20px}
  .hy-dl{margin-top:14px;padding-top:14px;gap:12px}
  .hy-pie{gap:20px;padding-top:40px}
  .hy-pie .hy-txt{font-size:var(--t-peq)}
  /* El monograma del fundador sube a la esquina en vez de ocupar una fila. */
  .hy-fund{position:relative}
  .hy-ini{position:absolute;top:0;right:0;width:48px;height:48px;border-radius:14px;font-size:1.05rem}
  .hy-rol,.hy-fund h3{padding-right:58px}
  .hy-cierre{padding:28px 20px}
  .hy-carrusel{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:88%;gap:10px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * var(--margen));padding:0 var(--margen) 2px;scroll-padding:0 var(--margen)}
  .hy-carrusel::-webkit-scrollbar{display:none}
  .hy-carrusel .hy-p:focus-visible,.hy-carrusel .hy-s:focus-visible{outline-offset:1px}
  .hy-carrusel>.hy-t{scroll-snap-align:start;grid-column:auto}
}

/* ── 14. Páginas de producto: cabecera, marcos, prueba y ritmo ──────────
   (Parte 3, 2026-10-14.) Solo bajo <main class="pp-prod">: los artículos
   comparten .pp-cab y .hy-sec y no cambian.
   Orden: cabecera (titular + un solo CTA primario) → captura protagonista
   en su marco → franja de cifras → "Así se ve por dentro" (figura y texto
   alternados) → secciones en dos columnas → cierre.
   Marcos en CSS puro: la barra del navegador es el ::before del marco (tres
   puntos en degradados) y la URL, su ::after leído de data-url; ambos con
   texto alternativo vacío, así no llegan al lector de pantalla. */
.pp-prod .pp-cab .hy-acc{padding-top:28px}
@media(min-width:1024px){
  .pp-prod .pp-cab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,72px);align-items:end}
  .pp-prod .pp-cab>*{grid-column:2}
  .pp-prod .pp-cab .hy-ojo{grid-column:1;grid-row:1}
  .pp-prod .pp-cab h1{grid-column:1;grid-row:2/4;margin:0}
  .pp-prod .pp-cab .pp-lede{grid-row:2}
  .pp-prod .pp-cab .hy-acc{grid-row:3;padding-top:24px}
}

/* El marco. Sin imágenes: borde --linea-fuerte, barra de 34 px, sombra
   neutra y un halo de marca bajo la protagonista. */
.pp-mar{position:relative;border-radius:14px;border:1px solid var(--linea-fuerte);background:var(--superficie);
  overflow:hidden;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 40px 80px -44px rgba(0,0,0,.9),0 28px 64px -40px rgba(96,43,244,.55)}
.pp-mar picture,.pp-mar img{display:block;width:100%;height:auto}
.pp-mar::before{content:"" / "";display:block;height:34px;border-bottom:1px solid var(--linea);
  background:radial-gradient(circle at 18px 50%,rgba(163,172,194,.42) 0 4.5px,#0000 5px),
    radial-gradient(circle at 35px 50%,rgba(163,172,194,.42) 0 4.5px,#0000 5px),
    radial-gradient(circle at 52px 50%,rgba(163,172,194,.42) 0 4.5px,#0000 5px),rgba(255,255,255,.025)}
.pp-mar::after{content:attr(data-url) / "";position:absolute;top:7px;left:50%;transform:translateX(-50%);
  max-width:calc(100% - 150px);height:20px;padding:0 14px;border-radius:999px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;background:rgba(16,19,29,.72);border:1px solid var(--linea);
  font:500 var(--t-eti)/18px var(--f-mono);letter-spacing:.01em;color:var(--tenue)}
/* Recorte de un panel (no una ventana): sin barra, el propio panel es el marco. */
.pp-mar-panel{border-radius:16px}
.pp-mar-panel::before,.pp-mar-panel::after{content:none}
@media(max-width:639px){
  .pp-mar{border-radius:10px}
  .pp-mar::before{height:26px;
    background:radial-gradient(circle at 13px 50%,rgba(163,172,194,.42) 0 3.5px,#0000 4px),
      radial-gradient(circle at 26px 50%,rgba(163,172,194,.42) 0 3.5px,#0000 4px),
      radial-gradient(circle at 39px 50%,rgba(163,172,194,.42) 0 3.5px,#0000 4px),rgba(255,255,255,.025)}
  .pp-mar::after{top:4px;height:18px;line-height:16px;padding:0 10px;max-width:calc(100% - 104px);font-size:.6875rem}
}

/* La protagonista: a lo ancho, tras la cabecera, con un foco de marca detrás. */
.pp-hero{position:relative;max-width:var(--ancho-caja);margin:clamp(32px,5vw,56px) auto 0;padding:0 var(--margen)}
.pp-hero::before{content:"";position:absolute;inset:-8% 0 20%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 55%,rgba(96,43,244,.26),transparent 72%)}
.pp-hero .pp-mar{max-width:75rem;margin:0 auto}
.pp-hero figcaption{max-width:75rem;margin:14px auto 0;color:var(--tenue);font-size:var(--t-peq);line-height:1.55}
.pp-hero figcaption span{display:block;max-width:46rem}
/* Héroe de SARI y Sariphone (Parte 4): la captura del demo trae dibujado un
   botón «Empezar a hablar»; el marco entero es un enlace al demo, así ese
   botón hace lo que parece. */
a.pp-mar{display:block;transition:border-color .18s}
a.pp-mar:hover{border-color:var(--violeta-linea)}
a.pp-mar:focus-visible{outline-offset:4px}

/* Una sola entrada primaria por pantalla (Parte 4). La barra no es fija: solo
   se ve en el primer pantallazo, junto a la cabecera. Si la cabecera ya lleva
   "Habla con SARI" (/sari/, /sariphone/), el botón de la barra sobra; si
   lleva otra acción (/sarident/: ver el odontograma), el de la barra baja a
   secundario, con contorno. Sin :has() se ven los dos, como antes. */
body:has(.pp-prod .pp-cab .hy-p[href^="/voz/"]) .sn-cta{display:none!important}
body:has(.pp-prod .pp-cab .hy-p:not([href^="/voz/"])) .sn-cta{background:transparent;color:var(--texto);
  border:1px solid var(--linea-fuerte);box-shadow:none}
body:has(.pp-prod .pp-cab .hy-p:not([href^="/voz/"])) .sn-cta:hover{background:transparent;
  border-color:var(--violeta-linea);box-shadow:none}

/* Cifras: franja tipográfica. Número en Bricolage, unidad en mono. */
.pp-prod .pp-cifras{width:calc(100% - 2 * var(--margen));max-width:var(--ancho);margin:clamp(40px,6vw,80px) auto 0;padding:0;gap:0;
  border-block:1px solid var(--linea)}
.pp-prod .pp-cifras::before{content:none}
.pp-prod .pp-cifras>div{padding:clamp(18px,2.5vw,28px) clamp(14px,2vw,28px) clamp(18px,2.5vw,28px) 0}
.pp-prod .pp-cifras>div:nth-child(even){padding-left:clamp(14px,2vw,28px);border-left:1px solid var(--linea)}
.pp-prod .pp-cifras>div:nth-child(n+3){border-top:1px solid var(--linea)}
@media(min-width:760px){
  .pp-prod .pp-cifras>div+div{padding-left:clamp(16px,2.2vw,32px);border-left:1px solid var(--linea)}
  .pp-prod .pp-cifras>div:nth-child(n+3){border-top:0}
}
.pp-prod .pp-cifras b{font:700 clamp(2.125rem,1.5rem + 2.2vw,3.5rem)/1 var(--f-display);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-prod .pp-cifras b i{font:600 .4em/1 var(--f-mono);font-style:normal;letter-spacing:0;color:var(--violeta-texto);margin-left:.1em}
.pp-prod .pp-cifras span{margin-top:10px}

/* Separador: una línea fina con un tramo de onda del canal de SARI, el
   mismo dibujo de la anatomía de la portada (--violeta-texto), hecho con
   tres capas de rayas: cero bytes de imagen. */
.pp-prod .hy-sec::before{content:"";display:block;height:16px;margin:0 0 clamp(28px,4vw,48px);
  background:
    repeating-linear-gradient(90deg,var(--violeta-texto) 0 2px,#0000 2px 15px) 0 50%/92px 16px no-repeat,
    repeating-linear-gradient(90deg,#0000 0 5px,var(--violeta-texto) 5px 7px,#0000 7px 10px) 0 50%/92px 9px no-repeat,
    repeating-linear-gradient(90deg,var(--violeta-texto) 0 2px,#0000 2px 5px) 0 50%/92px 4px no-repeat,
    linear-gradient(var(--linea-fuerte),var(--linea-fuerte)) 0 50%/100% 1px no-repeat}

/* "Así se ve por dentro": figura y texto alternados en escritorio, apilados
   en móvil. Cada fila se salta el pintado hasta acercarse (sin CLS: el
   tamaño de reserva se recuerda tras el primer pintado). */
.pp-prueba h2{margin-bottom:0}
.pp-fila{display:grid;gap:18px;margin-top:clamp(32px,5vw,72px);content-visibility:auto;contain-intrinsic-size:auto 420px}
.pp-fila figcaption{max-width:34rem}
.pp-n{display:block;font:600 var(--t-eti)/1 var(--f-mono);letter-spacing:.14em;color:var(--violeta-texto);margin:0 0 12px}
.pp-fila h3{font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px}
.pp-fila p{color:var(--tenue);font-size:var(--t-txt);line-height:1.6;margin:0}
@media(min-width:1024px){
  .pp-fila{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:center;column-gap:clamp(40px,5vw,72px);contain-intrinsic-size:auto 520px}
  .pp-fila.pp-inv{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .pp-fila.pp-inv .pp-mar{order:2}
}

/* Carrusel móvil (Parte 4). En < 640 px las capturas apiladas medían 6.500 px
   y a 348 px de ancho no ganaban nada por estar una debajo de otra: la fila 01
   queda completa y las demás (.pp-carr) pasan a una fila deslizable con
   scroll-snap, el borde de la siguiente a la vista y una indicación encima.
   Es región con nombre y foco de teclado (flechas); todo sigue en el DOM. En
   ≥ 640 px .pp-carr es un bloque más y las filas se ven como siempre. */
.pp-desliza{display:none}
@media(max-width:639px){
  .pp-desliza{display:flex;justify-content:space-between;gap:12px;margin:28px 0 0;
    font:600 var(--t-eti)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
  .pp-desliza span:last-child{color:var(--violeta-texto)}
  .pp-carr{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;align-items:start;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:14px calc(-1 * var(--margen)) 0;padding:0 var(--margen) 2px;scroll-padding:0 var(--margen)}
  .pp-carr::-webkit-scrollbar{display:none}
  /* Todas las diapositivas se pintan (el alto del carrusel es el real desde
     el principio: nada crece al deslizar), pero la CAPTURA de las que el
     carrusel recorta lleva content-visibility: mientras no se acerca no se
     pinta ni pide su imagen (sin esto, las tres entraban en la carga
     inicial). Su alto lo reserva aspect-ratio: todas son de 1600x1000. */
  .pp-carr>.pp-fila{margin:0;gap:14px;scroll-snap-align:start;content-visibility:visible}
  .pp-carr>.pp-fila+.pp-fila picture{content-visibility:auto;aspect-ratio:1600/1000}
  .pp-carr .pp-n{margin-bottom:8px}
  .pp-carr h3{font-size:1.125rem;margin-bottom:6px}
  .pp-carr .pp-fila p{font-size:var(--t-peq);line-height:1.55}
  /* Las listas largas ("Qué cubre", "Lo que no es hoy") a 15 px, como el
     detalle de las tarjetas de la portada en móvil. */
  .pp-prod .pp-lista{gap:10px}
  .pp-prod .pp-lista li{font-size:var(--t-pie);line-height:1.55}
}
.pp-carr:focus-visible{outline-offset:-3px;border-radius:12px}

/* Secciones: en escritorio, el título a la izquierda (fijo mientras se lee)
   y el contenido a la derecha; la onda cruza las dos columnas. */
@media(min-width:1024px){
  .pp-prod .pp-cuerpo .hy-sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,80px);align-items:start}
  .pp-prod .pp-cuerpo .hy-sec::before{grid-column:1/-1}
  .pp-prod .pp-cuerpo .hy-sec>*{grid-column:2}
  .pp-prod .pp-cuerpo .hy-sec>h2{grid-column:1;grid-row:2/span 8;position:sticky;top:24px;margin:0}
}
.pp-prod .hy-cierre .hy-acc{padding-top:4px}

/* >= 640 px el carrusel no desplaza: que no sea una parada de tabulación sin función
   (display:contents lo saca del árbol de foco y de la accesibilidad; en móvil sigue siendo región). */
@media(min-width:640px){.pp-carr{display:contents}}

.pp-cuerpo details summary{cursor:pointer;color:var(--violeta-texto);font-weight:600}
@media(max-width:639px){.pp-cab .hy-acc .hy-p{white-space:normal;text-align:center;max-width:100%;box-sizing:border-box}}