/* SX-2026 · PÁGINAS INTERIORES — hoja puente entre la portada y el vocabulario antiguo
   Se carga DESPUÉS de sx-2026.css y solo actúa bajo `body.pagina`. Las ~80 páginas públicas
   (manifiesto, precios, login, legales, blog…) conservan su marcado y sus <style> en línea,
   escritos contra el vocabulario de sx.css (.sx-section, .t-h1, .card, .btn--primary,
   .studio-row…); esta hoja da a ese vocabulario los tokens, la tipografía y el acabado de la portada.
   Regla de mantenimiento: si la portada cambia un token o un componente, esta hoja lo hereda;
   aquí solo vive lo que la portada no tiene.
   Especificidad: lo que NO choca con un nombre de la portada va con `:where(body.pagina)` (cero)
   para que el <style> de cada página, que viene después, gane siempre. Lo que SÍ choca (.hero,
   .plan, .btn, .pausa, el `em` global) lleva `body.pagina` o `:where()` según haga falta y se
   explica en su sitio.
   Contenido: 1 tokens · 2 marco · 3 tipografía · 4 botones · 5 superficies · 6 revelado ·
   7 colisiones con sx-2026.css · 8 formularios · 9 legales, acceso, descarga · 10 móvil ·
   11-19 prosa del blog, tablas, código, figuras, .cta y .sx-crumbs · 20-22 ajustes tras las
   capturas y la revisión del 30-oct · 23 páginas de producto (/app/, /app/mac/, /app/ios/ y sus EN) ·
   24 visor de capturas. */

/* ---- 1. ALIAS DE TOKENS ---- */
/* En `body.pagina` y no en :root: así la portada no ve ni un token nuevo. Los colores apuntan al
   equivalente de la portada; tamaños, pesos, sombras, easings, duraciones y z-index salen de
   sx.css (L20-210). */
body.pagina{
  /* colores → portada */
  --bg-base:var(--bg-elev-1);
  --text-accent:var(--accent-bright);
  --glass-border:var(--stroke-soft);
  --stroke-aurora:var(--stroke-accent);
  --grad-aurora:linear-gradient(135deg,var(--orb-cyan) 0%,var(--orb-violet) 40%,var(--orb-pink) 60%,var(--orb-peach) 88%);
  --grad-aurora-glow:rgba(92,219,252,.26);
  --warm-glow:rgba(252,199,102,.30);          /* el --warm de la portada (#FCC766) a 30 % */
  --c-text-2:var(--text-secondary);           /* sin definir en ninguna hoja: fallaba en silencio */
  --c-text-3:var(--text-tertiary);

  /* tipografía (sx.css L130-170) */
  --fs-h1:clamp(32px,4vw,44px);
  --fs-body-lg:18px; --fs-lg:var(--fs-lede);
  --fs-callout:15px; --fs-label:14px; --fs-caption:13px; --fs-micro:12px;
  /* --fs-h3 existe en la portada (hasta 34 px); en cuerpo legal y cabeceras de acceso era 25 px.
     Se acota para que los h2 de las legales no pesen como un titular de portada. */
  --fs-h3:clamp(22px,2.3vw,28px);
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --lh-tight:1.05;
  --tracking-body:-.005em; --tracking-label:.04em;

  /* espacio y radios que la portada no tiene */
  --sp-5:20px; --sp-10:40px;
  --container-narrow:760px;
  --r-2xl:32px;

  /* sombras (sx.css L180-185) */
  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow-md:0 4px 16px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 16px 48px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.3);
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px -12px rgba(0,0,0,.55);

  /* movimiento (sx.css L195-205) */
  --ease-spring:cubic-bezier(.34,1.12,.64,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:360ms; --dur-reveal:440ms;

  /* capas (sx.css L208) */
  --z-orb-bg:1; --z-content:10; --z-grain:15; --z-nav:100; --z-popover:200; --z-modal:300;
}

/* ---- 2. MARCO DE PÁGINA ---- */
/* La nav es fija y estas páginas no la compensan (el hero de la portada sí). Se compensa en el
   body, no en el <main>: /bot/ y /microsoft-365/aprobado/ ponen su propio `padding` abreviado al
   <main> y una regla sobre `main` lo pisaba y dejaba el titular bajo la barra. Los ajustes
   compactos de `.auth-body` en cada página de acceso siguen valiendo. */
body.pagina{padding-top:var(--nav-h)}

/* Capas antiguas que el fondo vivo sustituye. Se ocultan, no se borran: están en 80 páginas.
   Con `body.pagina` real para que ni un `display` en línea las reviva. */
body.pagina :is(.sx-grain,.sx-gridlines,.mesh,.mesh-scrim,.sx-aurora){display:none}
:where(body.pagina) .nav-sentinel{display:block;height:0}

/* Salto al contenido: copia de .salto (sx-2026.css L122-123) */
:where(body.pagina) .sx-skip{position:fixed;left:var(--sp-4);top:var(--sp-4);z-index:var(--z-nav);padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-sm);background:var(--accent);color:var(--ink-on-accent);font-weight:600;transform:translateY(-200%)}
:where(body.pagina) .sx-skip:focus{transform:none}

/* Contenedores y secciones: sin fondo opaco, el lienzo del fondo vivo debe verse */
:where(body.pagina) .sx-container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}
:where(body.pagina) .sx-narrow{max-width:var(--container-narrow);margin-inline:auto}
:where(body.pagina) .sx-section{position:relative;padding-block:var(--section-y)}
:where(body.pagina) .sx-section--alt{background:color-mix(in srgb,var(--bg-elev-2) 35%,transparent);border-top:1px solid var(--stroke-hairline)}
:where(body.pagina) .sx-cv{content-visibility:auto;contain-intrinsic-size:auto 600px}

/* Respaldo sin WebGL o sin JS: la aurora de la portada (sx-2026.css L583-605, mismos
   degradados), fija en la parte alta del <main>. Una sola capa estática; no anima. */
body.pagina main::before{content:"";display:none;position:absolute;inset:0 0 auto 0;z-index:-1;height:clamp(360px,60vh,620px);pointer-events:none;
  background:
    radial-gradient(38% 60% at 24% 32%,rgba(92,219,252,.22) 0%,transparent 70%),
    radial-gradient(42% 66% at 50% 24%,rgba(130,117,247,.26) 0%,transparent 72%),
    radial-gradient(36% 58% at 77% 30%,rgba(247,110,201,.18) 0%,transparent 72%),
    radial-gradient(30% 50% at 91% 18%,rgba(252,199,102,.13) 0%,transparent 70%),
    radial-gradient(42% 60% at 38% 26%,rgba(110,139,255,.20) 0%,transparent 72%),
    radial-gradient(38% 56% at 68% 32%,rgba(92,219,252,.14) 0%,transparent 72%);
  filter:blur(64px);
  -webkit-mask-image:radial-gradient(130% 110% at 50% 0%,#000 0%,rgba(0,0,0,.5) 44%,transparent 82%);
  mask-image:radial-gradient(130% 110% at 50% 0%,#000 0%,rgba(0,0,0,.5) 44%,transparent 82%)}
html.sin-webgl body.pagina main::before{display:block}
@media (scripting:none){body.pagina main::before{display:block}}

/* ---- 3. TIPOGRAFÍA ---- */
/* sx.css L279-293, L876, L1138, L1143 */
:where(body.pagina) :is(.t-eyebrow,.t-eyebrow-mono){display:inline-flex;align-items:center;gap:var(--sp-3);
  font:500 var(--fs-mono)/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-tertiary)}
:where(body.pagina) :is(.t-eyebrow,.t-eyebrow-mono)::before{content:"";width:var(--sp-6);height:1px;background:var(--stroke-strong)}

:where(body.pagina) :is(.t-display,.t-h1){font-size:var(--fs-hero);font-weight:600;line-height:var(--lh-display);
  letter-spacing:var(--tracking-display);color:var(--text-primary);text-wrap:balance;overflow-wrap:break-word}
:where(body.pagina) .t-h2{font-size:clamp(28px,3.4vw,44px);font-weight:600;line-height:var(--lh-snug);
  letter-spacing:var(--tracking-head);text-wrap:balance;overflow-wrap:break-word}
:where(body.pagina) .t-h3{font-size:var(--fs-h3);font-weight:600;line-height:var(--lh-snug);letter-spacing:var(--tracking-head);text-wrap:balance}
:where(body.pagina) .t-lede{font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--text-secondary);max-width:60ch;text-wrap:pretty}
:where(body.pagina) .t-sec{color:var(--text-secondary)}
:where(body.pagina) .t-ter{color:var(--text-tertiary);font-size:var(--fs-small)}

/* El serif de acento: el mismo aspecto que el `em` global de la portada (sx-2026.css L115) */
:where(body.pagina) .t-serif{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--accent-pale);letter-spacing:-.01em}
:where(body.pagina) :is(.t-display,.t-h1,.t-h2) :is(.t-serif,em){font-size:1.08em}
/* El `em` global es serif de acento, pensado para titulares. En texto corrido es énfasis
   normal: cursiva del cuerpo, sin color ni tamaño propios. Los `em` de títulos no cambian. */
:where(body.pagina) :where(p,li,td,th,figcaption,.t-lede,.lede) em{font-family:inherit;font-style:italic;font-weight:inherit;
  color:inherit;letter-spacing:inherit;font-size:inherit}

/* Enlace subrayado en línea */
:where(body.pagina) .ulink{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--stroke-strong);
  text-underline-offset:.18em;transition:color var(--dur-2) var(--ease),text-decoration-color var(--dur-2) var(--ease)}
:where(body.pagina) .ulink:hover{color:var(--accent-bright);text-decoration-color:currentColor}

:where(body.pagina) .sec-head{display:grid;gap:var(--sp-3);max-width:60ch;margin-bottom:var(--sp-12)}
:where(body.pagina) .sec-head--center{justify-items:center;text-align:center;margin-inline:auto}

/* ---- 4. BOTONES Y ENLACES ---- */
/* .btn (portada: 48 px) se acepta tal cual. Aquí los alias del vocabulario antiguo. */
:where(body.pagina) .btn--primary{background:var(--accent);color:var(--ink-on-accent);position:relative;overflow:hidden;isolation:isolate}
:where(body.pagina) .btn--primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--orb-core))}
/* brillo que barre al entrar el puntero (sx-2026.css §13.2; @keyframes btn-brillo es global) */
:where(body.pagina) .btn--primary::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%)}
@media (hover:hover) and (pointer:fine){
  :where(body.pagina) .btn--primary:hover::after{animation:btn-brillo 700ms var(--ease-out) both}
}
:where(body.pagina) .btn--ghost{border-color:var(--stroke-soft);color:var(--text-primary);background:transparent}
:where(body.pagina) .btn--ghost:hover{border-color:var(--stroke-accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
:where(body.pagina) .btn--lg{min-height:56px;padding:0 var(--sp-8);font-size:var(--fs-title)}
/* En bloque el rótulo puede partirse: a 390 px una etiqueta larga no desborda la tarjeta */
:where(body.pagina) .btn--block{width:100%;white-space:normal;padding-block:var(--sp-3);line-height:1.25;text-align:center}
:where(body.pagina) .btn[disabled],:where(body.pagina) .btn[aria-disabled=true]{cursor:not-allowed}
:where(body.pagina) .btn[disabled]:hover{transform:none}
/* Los CTA de las páginas van centrados bajo su titular (así los definía sx.css) */
:where(body.pagina) .hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-2)}

/* ---- 5. SUPERFICIES ---- */
/* Ficha de la portada (.tarjeta, sx-2026.css L413-422), sin elevarse al pasar el puntero:
   muchas .card son contenedores de formulario y no deben prometer un clic. */
:where(body.pagina) .card{position:relative;padding:clamp(var(--sp-6),4vw,var(--sp-8));border-radius:var(--r-lg);
  background:var(--bg-elev-2);border:1px solid var(--stroke-hairline);box-shadow:inset 0 1px 0 var(--brillo);
  transition:border-color var(--dur-2) var(--ease)}
:where(body.pagina) a.card:hover,:where(body.pagina) .card--spot:hover{border-color:var(--stroke-accent)}

/* Foco de luz bajo el puntero: --mx/--my los pone sx-2026-paginas.js (patrón de sx-2026.css §13.1) */
:where(body.pagina) .card--spot{isolation:isolate}
@media (hover:hover) and (pointer:fine){
  :where(body.pagina) .card--spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),var(--accent-glow-soft),transparent 42%),
               radial-gradient(160px circle at var(--mx,50%) var(--my,0%),rgba(145,167,255,.08),transparent 70%);
    transition:opacity var(--dur-3) var(--ease)}
  :where(body.pagina) .card--spot:hover::before{opacity:1}
}
/* Como en la portada (sx-2026.css §13.1): el foco se apaga con «Pausar animaciones» y con movimiento reducido. */
html[data-pausa] body.pagina .card--spot::before{opacity:0!important}
@media (prefers-reduced-motion:reduce){body.pagina .card--spot::before{display:none}}

:where(body.pagina) .glass{background:var(--glass-bg);border:1px solid var(--stroke-soft);border-radius:var(--r-xl);
  box-shadow:inset 0 1px 0 var(--brillo);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :where(body.pagina) .glass{background:var(--bg-elev-2)}
}

/* Píldoras mono pequeñas (sx.css L420-436) */
:where(body.pagina) :is(.badge,.chip){display:inline-flex;align-items:center;gap:var(--sp-2);min-height:28px;padding:0 var(--sp-3);
  border-radius:var(--r-pill);font:500 var(--fs-mono)/1 var(--font-mono);letter-spacing:var(--tracking-mono)}
:where(body.pagina) .badge{color:var(--accent-bright);background:var(--accent-glow-soft);border:1px solid var(--stroke-accent)}
:where(body.pagina) .badge--warm{color:var(--warm);background:var(--warm-glow);border-color:color-mix(in srgb,var(--warm) 40%,transparent)}
:where(body.pagina) .chip{color:var(--text-secondary);background:var(--bg-elev-3);border:1px solid var(--stroke-hairline)}
:where(body.pagina) .sx-ico{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Filas tipo ajustes de Saelyx Studio (sx.css L438-476) */
:where(body.pagina) .studio-list{display:grid;overflow:hidden;background:var(--bg-elev-2);border:1px solid var(--stroke-hairline);
  border-radius:var(--r-lg);box-shadow:inset 0 1px 0 var(--brillo)}
:where(body.pagina) .studio-row{display:flex;align-items:center;gap:var(--sp-4);width:100%;min-height:64px;padding:var(--sp-3) var(--sp-4);
  text-align:left;color:var(--text-primary);transition:background var(--dur-1) var(--ease)}
:where(body.pagina) .studio-row+.studio-row{border-top:1px solid var(--stroke-hairline)}
:where(body.pagina) :is(a,button).studio-row:hover{background:var(--brillo)}
:where(body.pagina) :is(a,button).studio-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
:where(body.pagina) .studio-row-tile{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--r-md);color:var(--accent-bright);background:var(--bg-elev-3);border:1px solid var(--stroke-hairline)}
:where(body.pagina) .studio-row-tile .sx-ico{width:20px;height:20px}
:where(body.pagina) .studio-row-tile--num{font:500 var(--fs-small)/1 var(--font-mono)}
:where(body.pagina) .studio-row-txt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
:where(body.pagina) .studio-row-title{font-size:var(--fs-body);font-weight:600;line-height:1.25;letter-spacing:var(--tracking-head);color:var(--text-primary)}
:where(body.pagina) .studio-row-desc{font-size:var(--fs-small);line-height:1.4;color:var(--text-secondary)}
:where(body.pagina) .studio-row-end{flex:none;display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-small);color:var(--text-tertiary)}

/* Rejilla de tarjetas (sx.css L1552-1570, L1931-1938, L2164) */
:where(body.pagina) .bento-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);max-width:var(--container);margin-inline:auto}
:where(body.pagina) .bento-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:260px;
  padding:var(--sp-8);overflow:hidden;border-radius:var(--r-xl);background:var(--bg-elev-2);border:1px solid var(--stroke-hairline);
  box-shadow:inset 0 1px 0 var(--brillo);transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
:where(body.pagina) .bento-card:hover{border-color:var(--stroke-accent);transform:translateY(-1px)}
:where(body.pagina) .bento-card--large{grid-column:span 2;min-height:280px}
:where(body.pagina) .bento-card--full{grid-column:span 3;min-height:300px}
:where(body.pagina) .bento-card-title{margin-top:var(--sp-2);font-size:var(--fs-title);font-weight:600;letter-spacing:var(--tracking-head);color:var(--text-primary)}
:where(body.pagina) .bento-card-desc{margin-top:var(--sp-1);font-size:var(--fs-callout);color:var(--text-secondary)}
@media (min-width:901px){:where(body.pagina) .bento-grid--pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px}}
@media (max-width:900px){
  :where(body.pagina) .bento-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  :where(body.pagina) :is(.bento-card--large,.bento-card--full){grid-column:span 1}
}

/* ---- 6. REVELADO ---- */
/* Regla de sx.css L792-796 con el recorrido de la portada. La clase `sx-anim` solo existe con JS
   (sx-2026-paginas.js), así que sin JS todo queda visible. */
.sx-anim .reveal{opacity:0;transform:translateY(var(--rev-dist));
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
  transition-delay:calc(min(var(--i,0),5) * 45ms);will-change:opacity,transform}
.sx-anim .reveal.in{opacity:1;transform:none;will-change:auto}
@media (prefers-reduced-motion:reduce){
  .sx-anim .reveal{opacity:1;transform:none;transition:none;will-change:auto}
}
html[data-pausa] .sx-anim .reveal{transition:none}

/* ---- 7. COLISIONES CON sx-2026.css ---- */
/* .hero: en la portada es la pantalla entera (rejilla, 100svh, entrada animada); en estas
   páginas es una sección normal con su titular centrado (sx.css L1008-1017). */
:where(body.pagina) .hero{display:block;grid-template-columns:none;min-height:0;overflow:visible;isolation:auto;
  padding-block:clamp(72px,13vh,150px) var(--section-y)}
:where(body.pagina) .hero-inner{position:relative;z-index:var(--z-content);display:grid;justify-items:center;text-align:center;
  gap:var(--sp-5);max-width:880px;margin-inline:auto}
body.pagina .hero :is(h1 span,.lede,.hero-ctas,.hero__ctas,.hero__datos){animation:none}
/* La portada pone cada línea del h1 en bloque; aquí un <span> dentro del titular es en línea */
body.pagina .hero h1 span{display:inline}
body.pagina .hero .lede{margin-top:0}
/* Fila de confianza bajo el titular (sx.css L936-945) */
:where(body.pagina) .hero-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-4);
  font:400 var(--fs-micro)/1.4 var(--font-mono);letter-spacing:.04em;color:var(--text-secondary)}
:where(body.pagina) .hero-trust>:is(span,a){display:inline-flex;align-items:center;gap:var(--sp-2)}
:where(body.pagina) .hero-trust a{transition:color var(--dur-1) var(--ease)}
:where(body.pagina) .hero-trust a:hover{color:var(--text-primary)}
:where(body.pagina) .trust-dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--orb-cyan);box-shadow:0 0 8px rgba(92,219,252,.30)}

/* .plan: en la portada es una columna flex con su propio contenedor; en /precios es una tarjeta
   en rejilla (sx.css L1100-1105) y el <style> de la página fija `align-content:start`. Sin
   `container-type`, que aislaba el tamaño y partía las dos columnas de .plans a 390 px. */
:where(body.pagina) .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);margin-top:var(--sp-12)}
@media (max-width:820px){:where(body.pagina) .plans{grid-template-columns:minmax(0,1fr)}}
:where(body.pagina) .plan{container-type:normal;display:grid;gap:var(--sp-3);min-width:0}
:where(body.pagina) .plan--feat{border-color:var(--stroke-accent);box-shadow:inset 0 1px 0 var(--brillo),0 0 60px -16px var(--accent-glow)}
/* El foco de la portada sobre .plan no recibe --mx/--my (solo .card--spot los tiene): se apaga */
body.pagina .plan:not(.card--spot)::before{display:none}
/* En la portada el botón se pega al fondo; aquí va tras el texto, a todo el ancho de la columna */
body.pagina .plan .btn{margin-top:var(--sp-2);align-self:auto}
:where(body.pagina) .plan-price{font-size:clamp(28px,3.4vw,38px);font-weight:600;letter-spacing:var(--tracking-head)}
:where(body.pagina) .plan-price small{font-size:var(--fs-callout);font-weight:400;color:var(--text-tertiary)}
:where(body.pagina) .plan-meta{font-size:var(--fs-callout);color:var(--text-secondary)}

/* .pausa nació para el hero (sx-2026.css L149-155); aquí vive en el pie y hereda su color.
   Oculto sin JS, visible con él: la misma lógica de la portada. */
body.pagina .pie .pausa{margin:0;visibility:hidden;color:inherit}
html[data-js] body.pagina .pie .pausa{visibility:visible}
body.pagina .pie .pausa:hover{color:var(--text-primary)}
html[data-pausa] body.pagina .pie .pausa{color:var(--accent-bright)}

/* La portada quita viñetas y numeración a toda lista. sx.css hacía lo mismo con `ul`, no con `ol`:
   las listas numeradas de contenido (sin clase) recuperan su numeración. `figure{margin:0}` y
   el resto del reinicio coinciden con sx.css, no hay nada que restituir. */
:where(body.pagina) main ol:not([class]){list-style:decimal;padding-left:1.4em}
:where(body.pagina) main ol:not([class]) li{padding-left:.2em}

/* ---- 8. FORMULARIOS Y ESTADOS ---- */
/* Línea base de especificidad CERO: el <style> de login, registro, soporte… gana siempre.
   El anillo de foco no se repite: el `:focus-visible` global de la portada ya lo cubre. */
:where(body.pagina) :where(input:not([type=checkbox],[type=radio],[type=hidden],[type=submit],[type=button],[type=range],[type=file]),textarea,select){
  font:inherit;color:var(--text-primary);background:var(--bg-elev-2);border:1px solid var(--stroke-soft);
  border-radius:var(--r-md);padding:12px 14px}
:where(body.pagina) :where(input,textarea)::placeholder{color:var(--text-disabled)}
:where(body.pagina) label{color:var(--text-secondary);font-size:var(--fs-small)}
:where(body.pagina) .form-message{min-height:1.2em;margin:0;font-size:var(--fs-small);color:var(--text-secondary)}
:where(body.pagina) .form-message--error{color:var(--error)}
:where(body.pagina) .form-message--ok{color:var(--success)}

/* ---- 9. LEGALES, ACCESO, DESCARGA, BOT, M365 ---- */
/* Con los alias de §1 sus <style> en línea funcionan. Medido leyéndolos: `.legal-toc` sticky ya
   fija `top:88px` (nav 64 + 24), `.gate` ya trae `min-height:calc(100dvh - 64px)` y centra su
   tarjeta, y `.legal-hero` no depende de `.mesh`. Solo falta lo que añade el pie: */
:where(body.pagina) .pie__nota{font:400 var(--fs-mono)/1.7 var(--font-mono);letter-spacing:var(--tracking-mono);color:var(--text-tertiary)}

/* ---- 10. MÓVIL ---- */
/* `.sx-container` ya usa --gutter (§2). Los titulares rompen palabra larga y la página nunca
   scrollea en horizontal: `clip` no crea contenedor de scroll, así que `position:sticky` sigue. */
body.pagina{overflow-x:clip}
@media (max-width:520px){
  :where(body.pagina) :is(.t-display,.t-h1){font-size:clamp(34px,10.5vw,44px)}
  :where(body.pagina) .hero-ctas>.btn{flex:1 1 100%}
  :where(body.pagina) .studio-row{padding-inline:var(--sp-3);gap:var(--sp-3)}
}

/* ====== PROSA, BLOG Y LEGALES (secciones 11-19) ====== */
/* --- 11. Prosa .sx-prose ------------------------------------------------- */
/* La portada pone margin:0 a h1-h3, p, ul, ol y figure: el ritmo vertical de
   un artículo largo se restituye aquí, solo dentro de la prosa. */
body.pagina .sx-prose {
  max-width: min(100%, 68ch);               /* max-width: /precios/ la amplía con .sx-prose--ancha */
  color: var(--text-primary);               /* la prosa larga se lee en primario */
  font-size: var(--fs-body-lg, 18px);
  line-height: 1.7;
  overflow-wrap: break-word;                /* URLs largas no desbordan en móvil */
}
body.pagina .sx-prose > * + * { margin-top: var(--sp-4); }
body.pagina .sx-prose p { text-wrap: pretty; }
body.pagina .sx-prose strong { color: var(--text-primary); font-weight: 600; }

body.pagina .sx-prose h2 {
  margin-top: var(--sp-16);
  margin-bottom: var(--sp-4);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text-primary);
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-h) + 24px);   /* la nav fija no tapa el ancla */
}
body.pagina .sx-prose h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text-primary);
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
body.pagina .sx-prose h4 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text-primary);
}

/* Número de sección en mono: 22 artículos usan .prose-n y otros .sx-prose-n. */
body.pagina .sx-prose h2 .sx-prose-n,
body.pagina .sx-prose h2 .prose-n,
body.pagina .sx-prose h3 .sx-prose-n,
body.pagina .sx-prose h3 .prose-n {
  margin-right: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--accent-bright);
  vertical-align: .22em;                    /* baja el mono al centro óptico del titular */
}

/* Listas: la portada las deja sin viñeta ni sangría. */
body.pagina .sx-prose ul,
body.pagina .sx-prose ol { padding-left: 1.25em; }
body.pagina .sx-prose ul { list-style: disc; }
body.pagina .sx-prose ol { list-style: decimal; }
body.pagina .sx-prose li { padding-left: .25em; }
body.pagina .sx-prose li + li { margin-top: .4em; }
body.pagina .sx-prose li::marker { color: var(--accent); }
body.pagina .sx-prose li > ul,
body.pagina .sx-prose li > ol { margin-top: .4em; }

/* Enlaces de la prosa sin clase: sx.css (L2339-2346) los pintaba y el reset de la portada los dejaba
   como el texto (8 artículos y la plantilla). Los .ulink conservan su regla del marco. */
body.pagina .sx-prose a:not(.btn,.ulink) { color: var(--accent-bright); text-decoration: underline;
  text-decoration-color: var(--stroke-accent); text-underline-offset: .18em; }
body.pagina .sx-prose a:not(.btn):hover { color: var(--accent-bright); text-decoration-color: currentColor; }

body.pagina .sx-prose hr {
  height: 1px;
  margin: var(--sp-12) 0;
  border: 0;
  background: var(--stroke-hairline);
}

/* Firma «— Adianny» y su línea de presentación. */
body.pagina .sx-prose .t-ter,
body.pagina .sx-prose hr + p { color: var(--text-tertiary); }
body.pagina .sx-prose hr + p { font-size: var(--fs-small); line-height: var(--lh-body); }
body.pagina .sx-prose hr + p strong { color: var(--text-secondary); }

/* --- 12. Código ---------------------------------------------------------- */
body.pagina .sx-prose code,
body.pagina .sx-prose kbd {
  padding: .12em .4em;
  border: 1px solid var(--stroke-hairline);
  border-radius: var(--r-sm);
  background: var(--bg-elev-3);
  font-family: var(--font-mono);
  font-size: .9em;
  color: var(--text-primary);
}
body.pagina .sx-prose kbd { border-bottom-width: 2px; }
body.pagina .sx-prose pre {
  margin-block: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--stroke-hairline);
  border-radius: var(--r-md);
  background: var(--bg-elev-2);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-secondary);
  tab-size: 2;
}
body.pagina .sx-prose pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  color: inherit;
}

/* --- 13. Citas y avisos -------------------------------------------------- */
body.pagina .sx-prose blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-left: 2px solid var(--accent);
  color: var(--text-primary);
}
body.pagina .sx-prose blockquote p + p { margin-top: var(--sp-3); }
body.pagina .sx-prose blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-style: normal;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
}

body.pagina .sx-prose-callout {
  margin-block: var(--sp-8);
  padding: var(--sp-6);
  border: 1px solid var(--stroke-accent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
body.pagina .sx-prose-callout > * { color: var(--text-primary); }
body.pagina .sx-prose-callout > * + * { margin-top: var(--sp-3); }
body.pagina .sx-prose-callout--warm {
  border-color: color-mix(in srgb, var(--warm) 45%, transparent);
  background: color-mix(in srgb, var(--warm) 10%, transparent);
}

/* --- 14. Tablas ---------------------------------------------------------- */
/* Siempre dentro de .sx-prose-table: el min-width obliga a que el scroll sea
   del envoltorio y no de la página entera en móvil. Las tablas legales traen
   su .legal-table en línea y no pasan por aquí. */
body.pagina .sx-prose-table {
  margin-block: var(--sp-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.pagina .sx-prose-table table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
body.pagina .sx-prose-table th,
body.pagina .sx-prose-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--stroke-hairline);
  text-align: left;
  vertical-align: top;
  color: var(--text-secondary);
}
body.pagina .sx-prose-table th {
  border-bottom-color: var(--stroke-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-secondary);
}
/* Cabecera de fila: texto normal y en primario, no eyebrow. */
body.pagina .sx-prose-table th[scope="row"] {
  border-bottom-color: var(--stroke-hairline);
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--text-primary);
}
body.pagina .sx-prose-table td.t-num,
body.pagina .sx-prose-table th.t-num { font-variant-numeric: tabular-nums; }
body.pagina .sx-prose-table tbody tr { transition: background-color var(--dur-1) var(--ease); }
body.pagina .sx-prose-table tbody tr:hover { background: color-mix(in srgb, var(--text-primary) 4%, transparent); }

/* --- 15. Figuras --------------------------------------------------------- */
body.pagina .sx-prose figure { margin: var(--sp-12) 0; }
body.pagina .sx-prose figure svg {
  display: block;
  max-width: 100%;
  height: auto;
}
body.pagina .sx-prose figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--stroke-hairline);
  border-radius: var(--r-md);
}
body.pagina .sx-prose figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.5;
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
  text-wrap: pretty;
}

/* --- 16. Cabecera de artículo -------------------------------------------- */
body.pagina .sx-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
}
body.pagina .sx-crumbs li { display: inline-flex; align-items: center; }
body.pagina .sx-crumbs li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--text-disabled);
}
body.pagina .sx-crumbs a {
  color: var(--text-secondary);
  transition: color var(--dur-1) var(--ease);
}
body.pagina .sx-crumbs a:hover { color: var(--text-primary); }
body.pagina .sx-crumbs [aria-current="page"] { color: var(--text-primary); }

body.pagina .sx-article-head {
  display: grid;
  justify-items: start;
  gap: var(--sp-5, 20px);
  max-width: 820px;
}
body.pagina .sx-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
}
body.pagina .sx-article-meta > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Punto de color de la fecha: el mismo cian del orbe que llevaba el sistema antiguo. */
body.pagina .sx-article-meta .trust-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orb-cyan);
  box-shadow: 0 0 8px color-mix(in srgb, var(--orb-cyan) 40%, transparent);
}

/* --- 17. CTA final del artículo ------------------------------------------ */
/* Sin fondo propio: el canvas vivo se ve detrás. Solo una línea hairline arriba. */
body.pagina .cta {
  position: relative;
  width: min(100% - 2 * var(--gutter), 720px);
  margin-inline: auto;
  padding-block: var(--section-y);
  border-top: 1px solid var(--stroke-hairline);
  text-align: center;
}
body.pagina .cta-inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
}
body.pagina .cta-inner .t-lede { margin-inline: auto; }
/* El orbe del cierre: un .orb-wrap sin modificador es un elemento de rejilla centrado y sin ancho
   (0 px; sx.css le daba 140-200 px). Mide lo que el orbe final de la portada (sx-2026.css,
   .disp__cab>.orbe-boton: 72 px, y 120 px desde 860 px). */
body.pagina .cta .orb-wrap { width: 72px; }
@media (min-width: 860px) { body.pagina .cta .orb-wrap { width: 120px; } }
body.pagina .cta .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* --- 18. Índice del blog ------------------------------------------------- */
body.pagina .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5, 20px);
}
@media (max-width: 1024px) { body.pagina .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { body.pagina .blog-grid { grid-template-columns: 1fr; } }

/* La ficha la define el marco (.card); aquí solo la composición interna.
   position:relative por si el marco no la fija: el enlace estirado la necesita. */
body.pagina .blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 220px;
}
body.pagina .blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--text-tertiary);
}
body.pagina .blog-card-title {
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-head);
  color: var(--text-primary);
  text-wrap: balance;
}
body.pagina .blog-card-sum {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
/* Enlace estirado: toda la ficha es clicable sin JS (la CSP no admite onclick).
   El <a> real sigue siendo el titular, así que el lector de pantalla anuncia bien. */
body.pagina .blog-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* El anillo de foco se dibujaría sobre el titular: se pasa a la ficha entera. */
body.pagina .blog-card-link:focus-visible { outline: none; }
body.pagina .blog-card:has(.blog-card-link:focus-visible) {
  border-color: var(--stroke-accent);
  box-shadow: 0 0 0 2px var(--accent);
}
@supports not selector(:has(*)) {
  body.pagina .blog-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
}

body.pagina .card-more {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent-bright);
}
body.pagina .card-more::after {
  content: "\2192";
  display: inline-block;
  margin-left: var(--sp-2);
  transition: transform var(--dur-1) var(--ease);
}
body.pagina .blog-card:hover .card-more::after,
body.pagina .blog-card:has(.blog-card-link:focus-visible) .card-more::after { transform: translateX(2px); }

/* --- 19. Movimiento reducido --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.pagina .sx-prose-table tbody tr,
  body.pagina .sx-crumbs a,
  body.pagina .card-more::after { transition: none; }
  body.pagina .blog-card:hover .card-more::after,
  body.pagina .blog-card:has(.blog-card-link:focus-visible) .card-more::after { transform: none; }
}

/* --- 20. Ajustes posteriores a la concatenación ------------------------------ */
/* /precios/ pone `sx-prose sx-prose--ancha` en sus tablas (precios/index.html:72): la medida de
   lectura de 68ch no vale ahí y la regla de la página perdía por especificidad. */
body.pagina .sx-prose.sx-prose--ancha{max-width:none}

/* --- 21. Lo que faltaba tras la primera ronda de capturas (30-oct) --------------- */
/* sx.css L218 escondía de verdad lo que lleva `hidden`; sx-2026.css no lo trae y cualquier
   `display` de autor lo pisaba: los cinco estados de /descargar/ salían a la vez y los botones
   SSO ocultos de /login/ se veían. El !important es el mismo de la hoja antigua. */
[hidden]{display:none !important}

/* sx-2026.css L1726-1732 pone a .plan `grid-template-rows:subgrid; grid-row:span 5` desde 860 px
   para las dos tarjetas de la portada; en /precios/ .plans no tiene esas filas y los hijos se
   apilaban en la última. */
@media (min-width:860px){
  body.pagina .plan{grid-template-rows:none;grid-row:auto;grid-template-columns:none}
  body.pagina .plan>ul{grid-auto-rows:auto}
}

/* Clases de /manifiesto/, /quienes/ y /capacidades/ que solo definía sx.css (L1109-1113, L2461-2476,
   L1367-1380): copiadas tal cual; sus tokens salen de los alias de la sección 1. */
.manifesto { text-align: center; }
.manifesto p { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.5; color: var(--text-secondary); letter-spacing: var(--tracking-body); }
.manifesto p + p { margin-top: var(--sp-6); }
.manifesto strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.manifesto .sign { margin-top: var(--sp-8); font-size: var(--fs-callout); color: var(--text-tertiary); font-family: var(--font-mono); }
.sx-swatches {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.sx-swatch {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border: 1px solid var(--stroke-hairline); border-radius: 999px;
  background: var(--bg-elev-1);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--text-secondary); letter-spacing: 0.04em;
}
.sx-swatch i {
  width: 18px; height: 18px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}
.modal-list { display: grid; gap: var(--sp-3); }
.modal-list li { position: relative; padding-left: 26px; font-size: var(--fs-callout);
  line-height: 1.5; color: var(--text-secondary); }
.modal-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent-glow-soft);
  box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
.modal-list li::after {
  content: "✓"; position: absolute; left: 0; top: 2px; width: 18px; text-align: center;
  color: var(--accent-bright); font-size: 11px; font-weight: 700; line-height: 18px;
}

/* Un botón de llamada a la acción con texto largo («Already have an account? Log in») no cabe en
   342 px con el nowrap de .btn (sx-2026.css) y desbordaba /en/pricing/ a 390 px: en pantallas
   estrechas el botón puede partir el texto y crecer de alto. */
@media (max-width:520px){
  :where(body.pagina) main .btn{max-width:100%;white-space:normal;height:auto;
    padding-block:var(--sp-3);line-height:1.3;text-align:center}
}

/* --- 22. Tras la revisión del HTML (30-oct) ------------------------------------------------ */
/* Páginas de acceso: .auth-shell sigue en min-height:100svh (su <style>), pero la cabecera ya no
   va dentro y el body lleva el padding de la barra: sin esto la página siempre tenía 64 px de
   scroll de más. */
body.pagina .auth-shell{min-height:calc(100svh - var(--nav-h))}
/* Sin guion (las 3 páginas de Microsoft 365) el botón de pausa del pie no se ve pero ocupaba su
   fila de 44 px: sin `data-js` no existe. */
html:not([data-js]) body.pagina .pie .pausa{display:none}
/* Página actual en la cabecera (lo pone sx-2026-paginas.js): la portada no lo necesita porque sus
   enlaces van a secciones; aquí el enlace de la sección en la que estás se ve en primer plano. */
:where(body.pagina) :is(.nav__enlaces,.menu__panel) a[aria-current]{color:var(--text-primary)}
/* La figura «Cómo nació Saelyx» (blog) dibuja su troncal con <line class="rail">: la portada esconde su
   raíl de escenas con .rail{display:none} por debajo de 1344 px y se llevaba esa línea por delante. */
body.pagina svg .rail{display:inline}
/* Subrayado de la sección actual, como el data-activo de la portada (sx-2026.css §16.2). */
:where(body.pagina) .nav__enlaces a[aria-current]::after{transform:scaleX(1)}

/* ---- 23. PÁGINAS DE PRODUCTO (/app/, /app/mac/, /app/ios/ y sus EN) ---- */
/* Vocabulario de sx.css que solo usan estas seis páginas: el bloque copia + medio alternado (.feat), el
   marco de ventana de Mac de las capturas (.sim-*), la rejilla fija de capacidades del iPhone
   (.ios-cap-grid), tres utilidades (.t-accent, .t-center, .ico-cap) y, de /app/mac/, la leyenda de
   estados (.state-*) y los gráficos del teleprompter y del dictado (.visual-*). Portado de sx.css
   (L295-297, L417, L1026-1060, L1151-1222, L1697-1731, L1783-1808, L1813-1870, L2207-2217) con
   `:where(body.pagina)`: el <style> de cada página sigue ganando. El `!important` de `.orb-wrap + p`
   (600 px) sí hace falta: los <p> de /app/ios/ llevan `margin-top` en línea. */
:where(body.pagina) .t-accent{color:var(--text-accent)}
:where(body.pagina) .t-center{text-align:center}
:where(body.pagina) .ico-cap{font-size:24px;line-height:1;display:inline-flex;color:var(--accent-bright)}
:where(body.pagina) .feat{display:grid;gap:clamp(32px,6vw,80px);align-items:center;grid-template-columns:1fr 1fr}
:where(body.pagina) .feat+.feat{margin-top:clamp(64px,10vh,128px)}
:where(body.pagina) .feat--rev .feat-media{order:-1}
:where(body.pagina) .feat-copy .t-h2{margin-bottom:var(--sp-3)}
:where(body.pagina) .feat-copy .t-lede{max-width:46ch}
:where(body.pagina) .feat-media{min-height:280px;display:grid;place-items:center;padding:var(--sp-8)}
:where(body.pagina) .feat-orb{width:clamp(120px,22vw,180px)}
:where(body.pagina) .sim-window{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:0 32px 64px -16px rgba(0,0,0,.7);overflow:hidden;width:100%;max-width:820px;margin:var(--sp-8) auto 0;display:flex;flex-direction:column}
:where(body.pagina) .sim-header{background:rgba(25,25,30,.4);border-bottom:1px solid var(--stroke-hairline);padding:var(--sp-3) var(--sp-4);display:flex;align-items:center;gap:var(--sp-2)}
:where(body.pagina) .sim-dots{display:flex;gap:6px}
:where(body.pagina) .sim-dot{width:12px;height:12px;border-radius:50%}
:where(body.pagina) .sim-dot--red{background:#FF5F56}
:where(body.pagina) .sim-dot--yellow{background:#FFBD2E}
:where(body.pagina) .sim-dot--green{background:#27C93F}
:where(body.pagina) .sim-title{margin-inline:auto;font-size:var(--fs-caption);color:var(--text-tertiary);font-weight:var(--fw-medium);letter-spacing:.02em}
:where(body.pagina) .sim-image-container{position:relative;width:100%;line-height:0;background:#000}
:where(body.pagina) .sim-real-screenshot{width:100%;height:auto;display:block}
:where(body.pagina) .ios-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
/* Leyenda de estados y gráficos del teleprompter y del dictado de /app/mac/ (sx.css L1055-1060, L1697-1731,
   L1783-1808). La pausa del pie los para como a todo (sx-2026.css: html[data-pausa] * {animation:none}). */
:where(body.pagina) .state-legend{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-6)}
:where(body.pagina) .state-legend li{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-callout);color:var(--text-secondary)}
:where(body.pagina) .state-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
:where(body.pagina) .state-dot--listen{background:var(--accent-bright)}
:where(body.pagina) .state-dot--think{background:var(--accent-dim)}
:where(body.pagina) .state-dot--speak{background:var(--warm)}
:where(body.pagina) .visual-teleprompter{background:rgba(10,10,14,.7);border:1px solid var(--stroke-hairline);border-radius:var(--r-md);padding:var(--sp-3);width:100%;max-width:380px;font-family:var(--font-sans);height:120px;overflow:hidden;position:relative}
:where(body.pagina) .teleprompter-scroller{display:flex;flex-direction:column;gap:var(--sp-2);animation:teleprompter-scroll 10s linear infinite}
:where(body.pagina) .teleprompter-line{font-size:var(--fs-caption);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);background:var(--bg-elev-3);color:var(--text-secondary);border-left:2px solid var(--accent)}
:where(body.pagina) .teleprompter-line--highlight{border-left-color:var(--warm);background:var(--warm-glow);color:var(--text-primary);font-weight:var(--fw-medium)}
@keyframes teleprompter-scroll{0%,100%{transform:translateY(0)}50%{transform:translateY(-40px)}}
:where(body.pagina) .visual-whisper{width:100%;max-width:320px;background:var(--bg-elev-3);border:1px solid var(--stroke-hairline);border-radius:var(--r-md);padding:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-secondary);text-align:left;height:90px;position:relative;overflow:hidden}
:where(body.pagina) .whisper-cursor{display:inline-block;width:6px;height:14px;background:var(--accent);margin-left:2px;animation:blink 1s step-end infinite;vertical-align:middle}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){:where(body.pagina) .teleprompter-scroller,:where(body.pagina) .whisper-cursor{animation:none}}
@media (max-width:900px){:where(body.pagina) .ios-cap-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}}
@media (max-width:820px){
  :where(body.pagina) .feat{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
  :where(body.pagina) .feat>*{min-width:0;max-width:100%}
  :where(body.pagina) .feat--rev .feat-media{order:0}
}
@media (max-width:600px){
  :where(body.pagina) .feat{gap:var(--sp-6)}
  :where(body.pagina) .feat+.feat{margin-top:var(--sp-12)}
  :where(body.pagina) .feat-media{min-height:0;padding:var(--sp-6);max-width:460px;margin-inline:auto;width:100%}
  :where(body.pagina) .feat-orb{width:clamp(104px,28vw,132px);margin-inline:auto}
  :where(body.pagina) .feat-media:not(:has(.mem-grid)){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding-block:var(--sp-8)}
  :where(body.pagina) .feat-media .orb-wrap+p{margin-top:var(--sp-2)!important}
  :where(body.pagina) .ico-cap{font-size:22px}
}
@media (max-width:560px){:where(body.pagina) .ios-cap-grid{grid-template-columns:1fr}}

/* ---- 24. VISOR DE CAPTURAS ---- */
/* Pulsar una captura del producto (img.sim-real-screenshot, hoy solo en /app/mac/ y su gemela EN) la
   abre a tamaño completo. El cuadro lo construye sx-2026-paginas.js (§3) y cuelga de <body>, por eso
   `body.pagina` lo alcanza. Portado de sx.css L2478-2515; por encima del cromo (.nav va a z-index 50). */
:where(body.pagina) .sim-real-screenshot{cursor:zoom-in}
:where(body.pagina) .sx-visor{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(6,8,10,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .22s var(--ease-in-out,ease)}
:where(body.pagina) .sx-visor[data-abierto]{display:grid}
:where(body.pagina) .sx-visor[data-abierto].is-visible{opacity:1}
:where(body.pagina) .sx-visor img{max-width:min(1500px,100%);max-height:88vh;width:auto;height:auto;border-radius:var(--r-lg);border:1px solid var(--stroke-soft);box-shadow:0 40px 120px -30px rgba(0,0,0,.9);transform:scale(.985);transition:transform .22s var(--ease-in-out,ease)}
:where(body.pagina) .sx-visor.is-visible img{transform:scale(1)}
:where(body.pagina) .sx-visor-pie{position:absolute;left:50%;bottom:clamp(12px,3vh,28px);transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-tertiary);letter-spacing:.04em;text-align:center;max-width:84vw}
:where(body.pagina) .sx-visor-cerrar{position:absolute;top:clamp(12px,3vh,26px);right:clamp(12px,3vw,26px);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--stroke-soft);background:var(--bg-elev-1);color:var(--text-secondary);font-size:19px;line-height:1;cursor:pointer}
:where(body.pagina) .sx-visor-cerrar:hover{color:var(--text-primary);border-color:var(--stroke-strong)}
@media (prefers-reduced-motion:reduce){:where(body.pagina) .sx-visor,:where(body.pagina) .sx-visor img{transition:none}}