/* ============================================================================
   Saelyx · sx.css — Sistema de diseño premium (dark-first, autocontenido)
   Lenguaje visual de Saelyx Studio (app Mac) + landing editorial casa enekui:
   acento CYAN del orbe #5CDBFC (v3 · el periwinkle leía como "morado de IA")
   + specular ámbar quirúrgico sobre dark cálido por capas y hairlines al 8%.
   Tipografía sans Inter, techo duro 56px. Movimiento rápido = lujo.
   ============================================================================ */

/* ----------------------------- 1. TOKENS ----------------------------------- */
:root {
  color-scheme: dark;

  /* COLOR — dark por capas (no negro plano).
     RETOKENIZADO 2026-06-10 a la paleta CANÓNICA de la app Mac (SXColor.swift,
     saelyx-mac/SaelyxUI). La web ES Saelyx Studio: mismos hex, cero drift de marca.
     bg-elev-4 no existe en la app (la web necesita un nivel más para menús sobre
     sheets): derivado un paso por encima de elev-3, misma temperatura. */
  /* NEGRO DE VERDAD (pedido founder 2026-06-10): base = #000 puro (OLED Apple:
     pixel apagado = premium, contraste máximo). Las superficies elevadas SÍ se
     levantan sobre la temperatura cálida de SXColor para conservar jerarquía por
     capas (no un plano muerto). Divergencia documentada vs SXColor.bgBase #0B0E10:
     si el founder valida en la web, la app aplica el mismo true-black en SXColor. */
  --bg-base:   #000000;   /* true black — fondo raíz */
  --bg-elev-1: #0B0E10;   /* SXColor.bgBase como 1ª elevación (tarjetas) */
  --bg-elev-2: #13171A;   /* SXColor.bgElev1 — superficies */
  --bg-elev-3: #1B2125;   /* SXColor.bgElev2 — elevadas, sheets */
  --bg-elev-4: #252D32;   /* SXColor.bgElev3 — controles destacados, menús */

  --scrim:      rgba(8,11,13,0.62);   /* SXColor.scrim (#080B0D @ .60≈.62 web) */
  --scrim-soft: rgba(8,11,13,0.35);

  /* Acento de la WEB · ESMERALDA de confianza (v3 2026-06-10).
     SINCRONIZACIÓN con saelyx.app (página de descargas): allí el VERDE-menta
     #45D98C es el color de confianza (badge "Firmado y notarizado por Apple") y
     el botón primario es el GRADIENTE AURORA del orbe (cyan→violeta→ámbar). El
     periwinkle sólido #6E8BFF leía como "morado de IA" → fuera de acento.
     Aquí: el esmeralda es el acento de UI (pill, dots, focus, bordes, links) y
     el botón primario usa el gradiente aurora (--grad-aurora abajo). El violeta
     queda RELEGADO a la aurora ambiente y al gradiente del botón, nunca plano. */
  --accent:        #45D98C;                  /* esmeralda de confianza (= saelyx.app) */
  --accent-bright: #6FE7AB;                  /* lighten para hover/links/serif */
  --accent-dim:    #2BA876;                  /* esmeralda profundo (hover/pressed/bordes · = enekui --atlantic) */
  --accent-deep:   #0E1A14;                  /* fondo teñido de acento (verde muy oscuro · = saelyx.app badge bg) */
  --accent-glow:      rgba(69,217,140,0.30);
  --accent-glow-soft: rgba(69,217,140,0.12);
  --ink-on-accent:    #0B0E10;               /* tinta near-black sobre acento/gradiente aurora */

  /* Gradiente AURORA del orbe · botón primario idéntico a saelyx.app. */
  --grad-aurora:      linear-gradient(135deg, #5CDBFC 0%, #8C66F2 55%, #F2B179 100%);
  --grad-aurora-glow: rgba(92,219,252,0.26);

  /* Specular: ámbar (uso quirúrgico) */
  --warm:      #F2B179;
  --warm-glow: rgba(242,177,121,0.30);

  /* ORBE — paleta canónica única de marca (idéntica a SXOrb en iPhone/Mac/Watch).
     Mesh aurora arcoíris: cyan/violeta/magenta-rosa/ámbar + núcleo casi blanco.
     NO inventar matices: estos hex son la fuente de verdad compartida con la app. */
  --orb-cyan:   #5CDBFC;   /* azul-cyan luminoso  */
  --orb-violet: #8275F7;   /* violeta iris        */
  --orb-pink:   #F76EC9;   /* magenta-rosa        */
  --orb-peach:  #FCC766;   /* ámbar cálido (specular) */
  --orb-core:   #EAF0FF;   /* centro luminoso casi blanco */

  /* Texto — jerarquía por opacidad */
  --text-primary:   rgba(255,255,255,0.90);
  --text-secondary: rgba(255,255,255,0.62);
  --text-tertiary:  rgba(255,255,255,0.55);
  --text-disabled:  rgba(255,255,255,0.30);
  --text-accent:    var(--accent-bright);

  /* Bordes / hairlines */
  --stroke-hairline: rgba(255,255,255,0.08);
  --stroke-soft:     rgba(255,255,255,0.12);
  --stroke-strong:   rgba(255,255,255,0.18);
  --stroke-accent:   rgba(69,217,140,0.40);
  --stroke-aurora:   rgba(92,219,252,0.42);   /* hover tarjeta · aurora (spot NO-semántico) */

  /* Semánticos desaturados */
  --success: #3DD68C;
  --warning: #F2B179;
  --error:   #FF6B6B;

  /* TIPOGRAFÍA — techo 56px (regla dura) */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  /* Serif editorial SOLO de acento, en cuerpo pequeño e itálica (jamás display).
     Sin woff2 extra (CSP font-src 'self'): serif del sistema, 0 requests. */
  --font-serif: ui-serif, Georgia, "Times New Roman", "Iowan Old Style", serif;

  --fs-display: clamp(40px, 5.2vw, 56px);
  --fs-h1:      clamp(32px, 4vw, 44px);
  --fs-h2:      clamp(26px, 3vw, 34px);
  --fs-h3:      25px;
  --fs-title:   20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-callout: 15px;
  --fs-label:   14px;
  --fs-caption: 13px;
  --fs-micro:   12px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  --tracking-display: -0.03em;
  --tracking-head:    -0.02em;
  --tracking-body:    -0.005em;
  --tracking-label:   0.04em;

  /* ESPACIADO */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px; --sp-32: 128px;

  --section-y: clamp(80px, 12vh, 160px);
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 48px);

  /* RADIOS */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* SOMBRAS */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-card: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 32px -12px rgba(0,0,0,0.55);

  /* GLASS */
  --glass-blur: 20px;
  --glass-bg: rgba(15,16,20,0.62);
  --glass-border: rgba(255,255,255,0.10);

  /* MOTION */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.12, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --dur-reveal: 440ms;   /* scroll-reveal lento y mantecoso (ref. craft enekui.io) */
  --dur-orb:  7000ms;

  /* z-index */
  --z-orb-bg: 1; --z-content: 10; --z-grain: 15; --z-nav: 100; --z-popover: 200; --z-modal: 300;
}

/* ----------------------------- 2. BASE / RESET ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* El atributo `hidden` del HTML lo pisa cualquier `display` de página (es una regla de
   agente de usuario, la más débil de todas). Sin esto, un bloque con `display:grid` y
   `hidden` se ve igual: la pantalla del código enseñaba el segundo factor y el enlace de
   recuperación a todo el mundo, tuviera o no tuviera. Ocultar tiene que ser ocultar. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; padding: 0; }
:where(h1,h2,h3,h4) { font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

::selection { background: var(--accent-dim); color: var(--text-primary); }

/* Scrollbar fina */
* { scrollbar-width: thin; scrollbar-color: var(--orb-cyan) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--orb-cyan); border-radius: 999px; border: 3px solid var(--bg-base); }
::-webkit-scrollbar-track { background: transparent; }

/* Focus rings dobles (solo teclado) */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent), 0 0 16px var(--accent-glow);
  border-radius: var(--r-sm);
}

/* Skip link */
.sx-skip {
  position: absolute; left: -9999px; top: var(--sp-2); z-index: var(--z-modal);
  background: var(--bg-elev-3); color: var(--text-primary);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
  box-shadow: 0 0 0 1px var(--stroke-soft);
}
.sx-skip:focus { left: var(--sp-4); }

/* Grano anti-banding — encima de gradientes y glows */
.sx-grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------- 3. LAYOUT ----------------------------------- */
.sx-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sx-narrow { max-width: var(--container-narrow); margin-inline: auto; }
.sx-section { padding-block: var(--section-y); position: relative; }
.sx-section--alt { background: var(--bg-elev-1); }
@supports (content-visibility: auto) {
  .sx-cv { content-visibility: auto; contain-intrinsic-size: auto 600px; }
}

/* ----------------------------- 4. TYPE HELPERS ----------------------------- */
.t-eyebrow {
  display: inline-block; font-size: var(--fs-micro); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent);
}
.t-display { font-size: var(--fs-display); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-display); line-height: var(--lh-tight); color: var(--text-primary); }
.t-h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-head); line-height: var(--lh-tight); }
.t-h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-head); }
.t-h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-head); }
.t-lede { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-secondary); }
.t-sec { color: var(--text-secondary); }
/* Titulares/ledes: reparto de línea moderno (revisión FE 2026-07-23 · cero huérfanos). */
.t-display, .t-h1, .t-h2, .t-h3 { text-wrap: balance; }
.t-lede, .manifesto p { text-wrap: pretty; }
.t-ter { color: var(--text-tertiary); }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.t-accent { color: var(--text-accent); }
.t-warm { color: var(--warm); }
.t-center { text-align: center; }

/* ----------------------------- 5. BOTONES ---------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 44px; padding: 0 var(--sp-6); border-radius: var(--r-md);
  font-weight: var(--fw-semibold); font-size: var(--fs-callout); letter-spacing: var(--tracking-body);
  white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn--lg { height: 52px; padding: 0 var(--sp-8); font-size: var(--fs-body); }
/* Botón primario = GRADIENTE AURORA del orbe (idéntico a saelyx.app).
   Tinta near-black sobre el degradado claro; el glow cyan refuerza la marca. */
.btn--primary {
  color: var(--ink-on-accent); background: var(--grad-aurora);
  box-shadow: 0 8px 24px -8px var(--grad-aurora-glow);
}
.btn--primary:hover { transform: translateY(-1px); filter: brightness(1.04);
  box-shadow: 0 12px 34px -8px var(--grad-aurora-glow); }
.btn--ghost { color: var(--text-primary); background: transparent; box-shadow: inset 0 0 0 1px var(--stroke-soft); }
.btn--ghost:hover { background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--stroke-strong); }
.btn--glyph { font-variant: normal; }

/* ----------------------------- 6. GLASS / CARD ----------------------------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), var(--shadow-lg);
  border: 1px solid var(--glass-border); border-radius: var(--r-xl);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--bg-elev-2); }
}
.card {
  position: relative; background: var(--bg-elev-2);
  border: 1px solid var(--stroke-hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: var(--sp-8);
  transition: transform var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out);
}
.card:hover { transform: translateY(-4px); border-color: var(--stroke-aurora); box-shadow: var(--shadow-lg); }
/* Cards de auth (login/registro/solicitar): contenedor de formulario NO clicable ->
   matamos el hover-lift heredado de .card para no prometer un click inexistente. */
.auth-card:hover { transform: none; }
/* Spotlight cursor-follow */
.card--spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--accent-glow-soft), transparent 42%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.card--spot:hover::before { opacity: 1; }

/* ---- Cards clicables → modal (firma del usuario) --------------------------
   Affordance: invitan al click sin parecer un botón vulgar. Cursor, micro-
   elevación extra al hover/focus y un hint "Saber más" que aparece con suavidad.
   El padding inferior deja sitio al hint sin saltos de layout. */
.card--modal { cursor: pointer; padding-bottom: calc(var(--sp-8) + 18px); }
.card--modal:hover { border-color: var(--stroke-aurora); }
.card--modal:focus-visible {
  outline: none; border-color: var(--stroke-accent);
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
}
.card-more {
  position: absolute; left: var(--sp-8); bottom: var(--sp-6);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-caption); font-weight: var(--fw-medium); letter-spacing: 0.01em;
  color: var(--text-accent);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card-more::after {
  content: "→"; display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.card--modal:hover .card-more,
.card--modal:focus-visible .card-more { opacity: 1; transform: translateY(0); }
.card--modal:hover .card-more::after { transform: translateX(3px); }
/* En táctil (sin hover real) el hint se ve siempre, atenuado: la card debe
   invitar al toque también en móvil. */
@media (hover: none) {
  .card-more { opacity: 0.78; transform: none; }
}

/* Iconos SVG de marca (reemplazan glifos unicode frágiles que no renderizan
   en todas las fuentes/SO). Heredan currentColor del contenedor (.t-accent). */
.sx-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto; }
.sx-ico--fill { fill: currentColor; stroke: none; }
.ico-cap { font-size: 24px; line-height: 1; display: inline-flex; color: var(--accent-bright); }

/* ----------------------------- 7. BADGE / CHIP ----------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: 0.02em;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  color: var(--accent-bright); background: var(--accent-glow-soft);
  box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
.badge--warm { color: var(--warm); background: var(--warm-glow); box-shadow: inset 0 0 0 1px rgba(242,177,121,0.4); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-caption); color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  background: var(--bg-elev-3); box-shadow: inset 0 0 0 1px var(--stroke-hairline);
}

/* ----------------------- 7b. STUDIO LIST / STUDIO ROW ---------------------- */
/* compartido: studio-row — fila estilo Saelyx Studio (app Mac): icono en tile
   redondeado + título + descripción secundaria + control a la derecha (chevron,
   valor o badge). El grupo .studio-list es la tarjeta contenedora con divisores
   hairline, como las listas de ajustes de la app. Reutilizable en toda la web
   (landing, descargar, cuenta, dashboard). */
.studio-list {
  display: grid; background: var(--bg-elev-1);
  border: 1px solid var(--stroke-hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.studio-row {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 64px; padding: var(--sp-3) var(--sp-4);
  text-align: left; width: 100%; color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out);
}
.studio-row + .studio-row { border-top: 1px solid var(--stroke-hairline); }
a.studio-row:hover, button.studio-row:hover { background: rgba(255,255,255,0.03); }
a.studio-row:focus-visible, button.studio-row:focus-visible {
  outline: none; border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.studio-row-tile {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); color: var(--accent-bright);
  background: var(--bg-elev-3); box-shadow: inset 0 0 0 1px var(--stroke-hairline);
}
.studio-row-tile .sx-ico { width: 20px; height: 20px; }
.studio-row-tile--num { font-family: var(--font-mono); font-size: var(--fs-callout); }
.studio-row-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.studio-row-title { font-size: var(--fs-body); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-head); line-height: 1.25; color: var(--text-primary); }
.studio-row-desc { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.35; }
.studio-row-end { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--text-tertiary); font-size: var(--fs-callout); }
.studio-row-chevron { width: 16px; height: 16px; color: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
a.studio-row:hover .studio-row-chevron, button.studio-row:hover .studio-row-chevron {
  transform: translateX(2px); color: var(--text-secondary); }

/* ----------------------------- 8. NAV STICKY GLASS ------------------------- */
.nav-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  /* FONDO CASI OPACO de fallback que NO depende del repintado de backdrop-filter.
     En WebKit/Safari iOS, position:sticky + backdrop-filter NO repinta de forma
     fiable: el blur no se aplica y la barra quedaba a 62% translúcida (--glass-bg)
     → el contenido se transparentaba y chocaba con el logo al hacer scroll.
     Base opaca al 94% garantizada SIEMPRE (también con backdrop-filter "soportado");
     el blur es solo un extra que, si pinta, suaviza un poco más.
     Afinado al true-black base: casi negro, sin leerse como banda gris. */
  background: rgba(5,7,9,0.94);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-bottom-color: var(--stroke-hairline);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -16px rgba(0,0,0,0.6);
}
.nav-row { display: flex; align-items: center; gap: var(--sp-6); height: 64px; }
.nav-brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-semibold);
  font-size: var(--fs-body); letter-spacing: var(--tracking-head); }
.nav-links { display: flex; align-items: center; gap: var(--sp-6); margin-left: auto; }
.nav-link { color: var(--text-secondary); font-size: var(--fs-callout); transition: color var(--dur-fast) var(--ease-out); }
.nav-link:hover { color: var(--text-primary); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Mobile nav — toggle 44px (área táctil) con cruz al abrir */
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--stroke-soft);
  position: relative; z-index: calc(var(--z-modal) + 1); }
.nav-toggle .nav-toggle-bars, .nav-toggle .nav-toggle-x { display: block; }
.nav-toggle .nav-toggle-x { display: none; }
.nav-sheet { display: none; }

@media (max-width: 860px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }

  /* SHEET FULL-SCREEN, FONDO SÓLIDO OPACO (estilo Apple). Cubre toda la pantalla;
     enlaces grandes y aireados. Nada de transparencias que dejan ver el contenido. */
  .nav-sheet {
    position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column;
    /* ALTURA EXPLÍCITA A VIEWPORT COMPLETO. `inset:0` por sí solo NO basta en
       Safari iOS: cuando el header `.nav.scrolled` activa `backdrop-filter`, ese
       ancestro se convierte en el bloque contenedor de los hijos `position:fixed`
       (regla CSS: filter/backdrop-filter/transform crean containing block), así
       que `inset:0` se resolvía contra la franja de 64px del header y la hoja
       colapsaba dejando ver la página por detrás. Damos altura/anchura reales
       (100dvh con fallback 100vh) y neutralizamos el filtro del header al abrir
       (más abajo) para que la hoja vuelva a referenciar el viewport. */
    width: 100vw; width: 100dvw;
    height: 100vh; height: 100dvh;
    padding: calc(64px + env(safe-area-inset-top)) var(--gutter) calc(var(--sp-12) + env(safe-area-inset-bottom));
    background: var(--bg-base);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out),
                visibility var(--dur-base);
  }
  /* halo pastel sutil de marca en la esquina del overlay, sin restar legibilidad */
  .nav-sheet::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(60% 38% at 82% 8%, rgba(130,117,247,0.16) 0%, transparent 70%),
      radial-gradient(54% 34% at 12% 96%, rgba(92,219,252,0.10) 0%, transparent 72%);
  }
  .nav-sheet > * { position: relative; z-index: 1; }
  .nav-sheet.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

  /* Eyebrow de sección dentro del sheet */
  .nav-sheet-eyebrow {
    font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--tracking-label);
    text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--sp-2);
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .nav-sheet.open .nav-sheet-eyebrow { opacity: 1; transform: none; }

  .nav-sheet-nav { display: flex; flex-direction: column; }

  /* Cada fila: icono en chip + título + descripción corta (jerarquía premium) */
  .nav-sheet-nav > a {
    display: flex; align-items: center; gap: var(--sp-4); min-height: 64px;
    padding: var(--sp-3) 0; color: var(--text-primary);
    border-bottom: 1px solid var(--stroke-hairline);
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
  }
  .nav-sheet-nav > a:active { background: rgba(255,255,255,0.04); }
  .nav-sheet.open .nav-sheet-nav > a { opacity: 1; transform: none; }
  .nav-sheet.open .nav-sheet-nav > a:nth-child(1) { transition-delay: 50ms; }
  .nav-sheet.open .nav-sheet-nav > a:nth-child(2) { transition-delay: 90ms; }
  .nav-sheet.open .nav-sheet-nav > a:nth-child(3) { transition-delay: 130ms; }
  .nav-sheet.open .nav-sheet-nav > a:nth-child(4) { transition-delay: 170ms; }

  .nav-sheet-ico {
    flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md); color: var(--accent-bright);
    background: var(--accent-glow-soft); box-shadow: inset 0 0 0 1px var(--stroke-accent);
  }
  .nav-sheet-ico .sx-ico { width: 22px; height: 22px; }
  .nav-sheet-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .nav-sheet-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-head);
    line-height: 1.15; color: var(--text-primary); }
  .nav-sheet-desc { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.3; }

  /* Pie del sheet: CTA grande + nota, pegado abajo pero sin un vacío gigante
     (el grupo de navegación ocupa su espacio natural arriba). */
  .nav-sheet-foot {
    margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3);
  }
  .nav-sheet-foot .btn {
    width: 100%; height: 54px; font-size: var(--fs-body);
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--dur-base) var(--ease-out) 210ms, transform var(--dur-base) var(--ease-out) 210ms,
                background var(--dur-base) var(--ease-out);
  }
  .nav-sheet.open .nav-sheet-foot .btn { opacity: 1; transform: none; }
  .nav-sheet-note {
    text-align: center; font-size: var(--fs-caption); color: var(--text-tertiary);
    opacity: 0; transition: opacity var(--dur-base) var(--ease-out) 280ms;
  }
  .nav-sheet.open .nav-sheet-note { opacity: 1; }

  /* morph hamburguesa -> X mientras el sheet está abierto */
  body.nav-open .nav-toggle .nav-toggle-bars { display: none; }
  body.nav-open .nav-toggle .nav-toggle-x { display: block; }
  body.nav-open { overflow: hidden; }
  /* el header (y por tanto el botón de cierre) debe quedar SOBRE el sheet */
  body.nav-open .nav { z-index: calc(var(--z-modal) + 2); }
  /* EL ASPA TIENE QUE PODER TOCARSE (regresión 2026-06-10 · arreglada 2026-07-28).
     `.nav-row` lleva la clase `sx-container`, y esa clase recibe `position:relative;
     z-index:10` para ir por encima de la aurora. Eso encierra al botón en un contexto
     que vale 10: su propio `z-index:301` no puede escapar de ahí, así que la hoja (300)
     le pasaba por encima y el aspa dejaba de responder al dedo. En un teléfono no hay
     Escape, así que la única salida era tocar un enlace o recargar.
     Subir la FILA —no el botón— es lo que lo saca del pozo. */
  body.nav-open .nav-row { z-index: calc(var(--z-modal) + 1); }
  /* FIX BUG MENÚ TRANSPARENTE (Safari iOS, reportado tras scroll en /manifiesto/).
     Root cause: con la página scrolleada `.nav.scrolled` activa `backdrop-filter`,
     y un ancestro con backdrop-filter/filter/transform se convierte en el bloque
     contenedor de sus descendientes `position:fixed`. Así `.nav-sheet` (hija del
     `.nav`) resolvía su `inset:0` contra la franja de 64px del header en vez de
     contra el viewport → la hoja colapsaba y se veía la página por detrás.
     Al abrir el menú neutralizamos el filtro del header: el fondo ya es opaco al
     94% (no se pierde nada visual) y el `.nav` deja de ser containing block, de
     modo que `.nav-sheet` vuelve a referenciar el viewport completo. */
  body.nav-open .nav,
  body.nav-open .nav.scrolled {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ----------------------------- 9. ORBE + MESH ------------------------------ */
@property --orb-x { syntax: "<percentage>"; inherits: false; initial-value: 38%; }
@property --orb-y { syntax: "<percentage>"; inherits: false; initial-value: 32%; }
@property --mesh-a { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --mesh-b { syntax: "<percentage>"; inherits: false; initial-value: 80%; }

.orb-wrap { position: relative; display: grid; place-items: center; isolation: isolate; }
.orb-wrap::after { /* grano local sobre el orbe */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orb {
  --orb-warm: 0.10;   /* mezcla del núcleo hacia el ámbar (sube al hablar/aprender, baja al pensar) */
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  position: relative; isolation: isolate;
  /* ORBE AURORA · misma anatomía que SXOrb (MeshGradient 3×3) aproximada con
     radial-gradients apilados: cyan arriba, violeta a los lados, magenta-rosa
     abajo-izquierda, ámbar-melocotón izquierda y núcleo casi blanco al centro.
     Sobre el cuerpo: rim Fresnel (borde luminoso) y specular cálido. NUNCA verde. */
  background:
    /* specular ámbar arriba-izquierda (materia, no PNG) */
    radial-gradient(26% 26% at 33% 28%,
      rgba(252,199,102, calc(0.40 + var(--orb-warm) * 0.5)) 0%,
      rgba(255,255,255,0.20) 38%, rgba(255,255,255,0) 62%),
    /* núcleo luminoso casi blanco, entibiado hacia el ámbar según --orb-warm */
    radial-gradient(46% 44% at 42% 40%,
      color-mix(in srgb, var(--orb-core), var(--orb-peach) calc(var(--orb-warm) * 45%)) 0%,
      rgba(234,240,255,0) 58%),
    /* nodos del mesh aurora (replica de meshColors: violet/cyan/peach/pink) */
    radial-gradient(60% 60% at  8%  6%, var(--orb-violet) 0%, rgba(130,117,247,0) 58%),
    radial-gradient(58% 58% at 58%  4%, var(--orb-cyan)   0%, rgba(92,219,252,0) 56%),
    radial-gradient(56% 56% at 98% 12%, var(--orb-cyan)   0%, rgba(92,219,252,0) 58%),
    radial-gradient(62% 62% at  2% 52%, var(--orb-peach)  0%, rgba(252,199,102,0) 60%),
    radial-gradient(58% 58% at 100% 56%, var(--orb-violet) 0%, rgba(130,117,247,0) 60%),
    radial-gradient(64% 64% at  6% 98%, var(--orb-pink)   0%, rgba(247,110,201,0) 62%),
    radial-gradient(60% 60% at 52% 100%, var(--orb-pink)  0%, rgba(247,110,201,0) 60%),
    radial-gradient(58% 58% at 98% 98%, var(--orb-cyan)   0%, rgba(92,219,252,0) 60%),
    /* base que tiñe los huecos para que ningún sector quede plano */
    radial-gradient(120% 120% at 50% 50%, var(--orb-violet) 0%, var(--orb-cyan) 100%);
  filter: saturate(1.0);
  box-shadow:
    /* volumen de esfera: sombra inferior + luz superior */
    inset 0 -30% 60px -22px rgba(30,18,58,0.50),
    inset 0 26% 54px -26px rgba(255,255,255,0.30),
    /* rim Fresnel: aro luminoso interno en el borde (orbCore) */
    inset 0 0 0 2.5px rgba(234,240,255,0.42),
    inset 0 0 22px -2px rgba(234,240,255,0.30),
    /* glow exterior aurora */
    0 0 90px -14px rgba(130,117,247,0.42);
  animation: orb-breathe calc(var(--dur-orb) * 1.1) var(--ease-in-out) infinite;
}
.orb-halo { /* atmósfera aurora difusa detrás (anillo arcoíris que respira) */
  position: absolute; inset: -20%; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 215deg at 50% 50%,
    rgba(92,219,252,0.50), rgba(130,117,247,0.50), rgba(247,110,201,0.46),
    rgba(252,199,102,0.42), rgba(92,219,252,0.50));
  filter: blur(54px); opacity: 0.72;
  animation: orb-breathe calc(var(--dur-orb) * 1.3) var(--ease-in-out) infinite;
}
@keyframes orb-breathe { 0%,100% { transform: scale(0.985); opacity: 0.90; } 50% { transform: scale(1.05); opacity: 1; } }

/* Estados del orbe (turn-taking) · modelan la app SIN hue-rotate global:
   variamos --orb-warm (entibiar/enfriar el núcleo, igual que `warm` en SXOrb) y
   la cadencia de respiración (igual que `speed`). Nada de matices inventados. */
/* listening (escuchando) · running=true en la app: warm 0.18, respiración rápida */
.orb[data-state="listening"] { --orb-warm: 0.18; filter: saturate(1.0) brightness(1.06);
  animation-duration: calc(var(--dur-orb) * 0.45); }
/* thinking (pensando) · la app ENFRÍA: warm baja, núcleo más violeta/frío, cadencia media */
.orb[data-state="thinking"]  { --orb-warm: 0.04; filter: saturate(0.94) brightness(0.97);
  animation-duration: calc(var(--dur-orb) * 0.7); }
/* speaking (hablando) · la app ENTIBIA hacia el ámbar: warm alto, glow rosa-ámbar */
.orb[data-state="speaking"]  { --orb-warm: 0.30; filter: saturate(1.06) brightness(1.08);
  animation-duration: calc(var(--dur-orb) * 0.5);
  box-shadow:
    inset 0 -30% 60px -22px rgba(30,18,58,0.46),
    inset 0 26% 54px -26px rgba(255,255,255,0.34),
    inset 0 0 0 2.5px rgba(234,240,255,0.46),
    inset 0 0 22px -2px rgba(234,240,255,0.34),
    0 0 120px -10px rgba(247,110,201,0.50); }
/* memorizing/learning · warm alto, oleaje rápido (speed 90 en la app) */
.orb[data-state="memorizing"]{ --orb-warm: 0.30; filter: saturate(1.02) brightness(1.04);
  animation-duration: calc(var(--dur-orb) * 0.4); }

/* Mesh gradient de fondo (hero / CTA) */
.mesh {
  position: absolute; inset: 0; z-index: var(--z-orb-bg); pointer-events: none; overflow: hidden;
}
.mesh::before, .mesh::after {
  content: ""; position: absolute; inset: -20%;
  filter: blur(60px); opacity: 0.55;
}
.mesh::before {
  --mesh-a: 22%; --mesh-b: 30%;
  background:
    radial-gradient(40% 40% at var(--mesh-a) var(--mesh-b), rgba(130,117,247,0.50) 0%, transparent 70%),
    radial-gradient(36% 36% at 78% 24%, rgba(92,219,252,0.40) 0%, transparent 72%);
  animation: mesh-drift-1 18s var(--ease-in-out) infinite alternate;
}
.mesh::after {
  --mesh-a: 70%; --mesh-b: 75%;
  background:
    radial-gradient(30% 30% at var(--mesh-a) var(--mesh-b), rgba(252,199,102,0.38) 0%, transparent 70%),
    radial-gradient(46% 46% at 30% 80%, rgba(247,110,201,0.36) 0%, transparent 70%);
  opacity: 0.45;
  animation: mesh-drift-2 22s var(--ease-in-out) infinite alternate;
}
.mesh::before, .mesh::after { will-change: transform; }
@keyframes mesh-drift-1 { to { --mesh-a: 36%; --mesh-b: 44%; transform: translate3d(4%, 3%, 0) scale(1.08); } }
@keyframes mesh-drift-2 { to { --mesh-a: 58%; --mesh-b: 62%; transform: translate3d(-4%, -3%, 0) scale(1.05); } }
.mesh--cta::before { opacity: 0.5; }

/* Scrim para legibilidad sobre mesh */
.mesh-scrim { position: absolute; inset: 0; z-index: calc(var(--z-orb-bg) + 1); pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%, transparent 0%, var(--bg-base) 78%); }

/* ----------------------------- 10. MOTION ---------------------------------- */
/* JS-GATE: el estado oculto SOLO aplica cuando sx.js ha añadido .sx-anim a <html>.
   Sin JS (o si falla) el contenido queda VISIBLE por defecto — nunca web en blanco. */
.sx-anim .reveal { opacity: 0; transform: translateY(18px);
  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; }

/* Scroll-driven progress line (cómo funciona) — nativo donde haya soporte */
.progress-track { position: relative; width: 2px; background: var(--stroke-hairline); border-radius: 999px; }
.progress-fill { position: absolute; inset: 0 0 auto 0; width: 100%; height: 0;
  background: linear-gradient(var(--accent-bright), var(--accent-dim)); border-radius: 999px; }
@supports (animation-timeline: scroll()) {
  .progress-fill { height: 100%; transform-origin: top; scale: 1 0;
    animation: fill-line linear both; animation-timeline: view(); animation-range: cover 5% cover 85%; }
  @keyframes fill-line { to { scale: 1 1; } }
}

/* ===========================================================================
   10b. ESTÉTICA EDITORIAL · lenguaje enekui.io (misma casa)
   Fondo negro casi puro + AURORA difusa INFERIOR (no sol central) con los hex
   del orbe TENUES + blueprint de líneas finas + acentos mono/serif quirúrgicos.
   El acento periwinkle se usa con cuentagotas (CTA, estado, dot).
   =========================================================================== */

/* Aurora ambiente: difusa, multicolor SUTIL (cyan→violeta→magenta→ámbar del
   orbe), enmascarada por un radial para fundirse con el negro. NUNCA un blob
   morado saturado ni un sol central. Patrón enekui.io: vive en la mitad baja,
   detrás del contenido. `.sx-aurora` (default) = banda inferior absoluta dentro
   de su contenedor (hero / CTA). El contenedor debe ser position:relative. */
.sx-aurora {
  position: absolute; inset: auto 0 -10% 0; z-index: 0; pointer-events: none;
  height: clamp(360px, 60%, 620px); overflow: hidden;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 100%, #000 0%, rgba(0,0,0,0.5) 44%, transparent 82%);
  mask-image: radial-gradient(130% 110% at 50% 100%, #000 0%, rgba(0,0,0,0.5) 44%, transparent 82%);
}
.sx-aurora::before, .sx-aurora::after {
  content: ""; position: absolute; left: 50%; bottom: -28%;
  width: min(1280px, 124vw); aspect-ratio: 1.7 / 1; border-radius: 50%;
  transform: translateX(-50%); will-change: transform, opacity;
}
/* Capa cálida-fría base: cyan a un lado, ámbar al otro, violeta al centro.
   Opacidades MUY bajas (0.10–0.18) — es atmósfera, no protagonista. */
.sx-aurora::before {
  background:
    radial-gradient(38% 60% at 24% 68%, rgba(92,219,252,0.22) 0%, transparent 70%),
    radial-gradient(42% 66% at 50% 76%, rgba(130,117,247,0.26) 0%, transparent 72%),
    radial-gradient(36% 58% at 77% 70%, rgba(247,110,201,0.18) 0%, transparent 72%),
    radial-gradient(30% 50% at 91% 82%, rgba(252,199,102,0.13) 0%, transparent 70%);
  filter: blur(64px); opacity: 0.95;
  animation: sx-aurora-drift-a 26s var(--ease-in-out) infinite alternate;
}
/* Capa superior tenue que deriva en contra, da vida sin saturar. */
.sx-aurora::after {
  width: min(980px, 104vw); bottom: -18%;
  background:
    radial-gradient(42% 60% at 38% 74%, rgba(110,139,255,0.20) 0%, transparent 72%),
    radial-gradient(38% 56% at 68% 68%, rgba(92,219,252,0.14) 0%, transparent 72%);
  filter: blur(76px); opacity: 0.8;
  animation: sx-aurora-drift-b 34s var(--ease-in-out) infinite alternate;
}
@keyframes sx-aurora-drift-a {
  0%   { transform: translateX(-52%) scale(1);     opacity: 0.82; }
  100% { transform: translateX(-48%) scale(1.06);  opacity: 0.96; }
}
@keyframes sx-aurora-drift-b {
  0%   { transform: translateX(-46%) scale(1.02); }
  100% { transform: translateX(-54%) scale(1.08); }
}

/* Blueprint de líneas finas (estructura el fondo, estilo Vercel/enekui). */
.sx-gridlines {
  position: fixed; inset: -64px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 100% 86% at 50% 26%, #000 0%, transparent 88%);
  mask-image: radial-gradient(ellipse 100% 86% at 50% 26%, #000 0%, transparent 88%);
}
@keyframes sx-grid-drift { 0% { background-position: 0 0; } 100% { background-position: 64px 64px; } }

/* El contenido vive por encima de aurora+grid (el grano sigue en su z propio). */
.sx-container, .nav, .footer { position: relative; z-index: var(--z-content); }

/* Eyebrow MONO en mayúsculas con guiones laterales (firma editorial enekui). */
.t-eyebrow-mono {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-bright);
}
.t-eyebrow-mono::before, .t-eyebrow-mono::after {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6;
}
.t-eyebrow-mono--start::after { display: none; }

/* Acento serif itálico PEQUEÑO (≤ tamaño del titular que lo contiene).
   NO color de marca plano (leía como "IA"): degradado aurora MUY sutil
   cyan→ámbar sobre casi-blanco, como un reflejo del orbe. Fallback a casi-blanco
   cálido donde no haya background-clip (CSP/WebKit antiguos quedan legibles). */
.t-serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  letter-spacing: -0.01em;
  color: #EAF0FF;
  background: linear-gradient(102deg, #EAF6FF 0%, #9CEBFF 42%, #FCD9A0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Si el navegador no soporta clip de texto, mantenemos el color sólido (arriba). */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .t-serif { background: none; -webkit-text-fill-color: currentColor; }
}

/* Pill superior del hero (badge mono + texto + flecha). */
.hero-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 14px 5px 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.03); box-shadow: inset 0 0 0 1px var(--stroke-soft);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-size: var(--fs-caption); color: var(--text-secondary);
  transition: box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.hero-pill:hover { box-shadow: inset 0 0 0 1px var(--stroke-strong); background: rgba(255,255,255,0.05); }
.hero-pill .pill-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #0B0E10; background: var(--accent);
  padding: 3px 8px; border-radius: var(--r-pill);
}
.hero-pill .arr { color: var(--text-tertiary); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast); }
.hero-pill:hover .arr { transform: translateX(3px); color: var(--text-primary); }

/* Fila de confianza bajo el hero (mono, dots esmeralda quirúrgicos). */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.hero-trust > span, .hero-trust > a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero-trust a { transition: color var(--dur-fast) var(--ease-out); }
.hero-trust a:hover { color: var(--text-primary); }
.trust-dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto;
  background: var(--orb-cyan); box-shadow: 0 0 8px rgba(92,219,252,0.30); }

/* Banda de stats (números grandes + caption mono + borde izquierdo). */
.stats-band {
  border-top: 1px solid var(--stroke-hairline); border-bottom: 1px solid var(--stroke-hairline);
  background: rgba(255,255,255,0.012);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.stats-band-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6);
  max-width: var(--container); margin-inline: auto;
}
.stat-cell { padding-left: var(--sp-4); }
.stat-num { font-size: clamp(30px, 3.6vw, 40px); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-head); line-height: 1; color: var(--text-primary);
  font-variant-numeric: tabular-nums; }
.stat-num .unit { font-family: var(--font-serif); font-style: italic; font-weight: 500;
  color: var(--accent-bright); font-size: 0.66em; }
.stat-label { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-tertiary); margin-top: var(--sp-2); line-height: 1.4; }
@media (max-width: 760px) { .stats-band-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-4); } }

/* Aurora/grid: en móvil bajamos coste GPU (blur menor, sin animación de la 2ª capa). */
@media (max-width: 768px) {
  .sx-aurora::before { filter: blur(48px); }
  .sx-aurora::after  { animation: none; filter: blur(54px); opacity: 0.55; }
  .sx-gridlines { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-aurora::before, .sx-aurora::after, .sx-gridlines { animation: none !important; }
}

/* ----------------------------- 11. SECCIONES ------------------------------- */
/* Hero — editorial, texto-primero (FUERA el orbe gigante central). */
.hero { position: relative; padding-block: clamp(72px, 13vh, 150px) var(--section-y); overflow: hidden; }
.hero::before { /* vignette superior para limpiar la zona del titular */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg-base) 0%, rgba(0,0,0,0.25) 32%, transparent 58%);
}
.hero-inner { position: relative; z-index: var(--z-content); display: grid; justify-items: center; text-align: center; gap: var(--sp-5, 20px); max-width: 880px; margin-inline: auto; }
.hero .orb-wrap { width: clamp(220px, 38vw, 380px); margin-bottom: var(--sp-4); }
.hero .t-display { max-width: 16ch; }
.hero .t-lede { max-width: 60ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-2); }

/* Social proof */
.proof { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 6vw, 72px); }
.proof-item { text-align: center; }
.proof-num { font-size: clamp(28px, 4vw, 40px); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-head); color: var(--text-primary); }
.proof-label { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* Features zig-zag */
.feat { display: grid; gap: clamp(32px, 6vw, 80px); align-items: center; grid-template-columns: 1fr 1fr; }
.feat + .feat { margin-top: clamp(64px, 10vh, 128px); }
.feat--rev .feat-media { order: -1; }
.feat-copy .t-h2 { margin-bottom: var(--sp-3); }
.feat-copy .t-lede { max-width: 46ch; }
.feat-media { min-height: 280px; display: grid; place-items: center; padding: var(--sp-8); }
@media (max-width: 820px) {
  /* minmax(0,1fr) y no 1fr, por lo mismo que .hero-inner (ver más abajo): con `1fr`
     el tamaño mínimo del ítem es su min-content, así que un hijo que no se encoge
     —un botón con `nowrap`, una tabla, una palabra larga— ESTIRA LA COLUMNA ENTERA
     fuera del viewport. Y como el body lleva `overflow-x: hidden`, lo que sobresale
     no genera scroll: desaparece sin que el usuario pueda recuperarlo.
     Pasó el 28/07/2026 con un botón de 330 px: a 320 px se perdían 20 px de la
     columna, y con ella el párrafo y la tarjeta de dispositivos. */
  .feat { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .feat > * { min-width: 0; max-width: 100%; }
  .feat--rev .feat-media { order: 0; }
}

/* Memoria visual (chips shimmer) */
.mem-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; }
.mem-grid .chip { animation: mem-shimmer 4s var(--ease-in-out) infinite; }
.mem-grid .chip:nth-child(2n) { animation-delay: 0.8s; }
.mem-grid .chip:nth-child(3n) { animation-delay: 1.6s; }
@keyframes mem-shimmer { 0%,100% { box-shadow: inset 0 0 0 1px var(--stroke-hairline); }
  50% { box-shadow: inset 0 0 0 1px var(--stroke-accent), 0 0 16px -6px var(--accent-glow); } }

/* Mini orbe estados (feature turnos) */
.feat-orb { width: clamp(120px, 22vw, 180px); }
.state-legend { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-6); }
.state-legend li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-callout); color: var(--text-secondary); }
.state-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.state-dot--listen { background: var(--accent-bright); }
.state-dot--think { background: var(--accent-dim); }
.state-dot--speak { background: var(--warm); }

/* Cómo funciona — sticky scroll */
.howto { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 80px); }
.howto-steps { display: grid; gap: var(--sp-12); }
.howto-sticky { position: sticky; top: 96px; height: fit-content; display: grid; grid-template-columns: 2px 1fr; gap: var(--sp-6); align-items: start; }
.howto-visual { display: grid; place-items: center; }
.howto-visual .orb-wrap { width: clamp(200px, 30vw, 300px); }
.step { display: grid; gap: var(--sp-2); }
.step-n { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-accent); }
@media (max-width: 900px) {
  .howto { grid-template-columns: 1fr; }
  .howto-sticky { position: static; order: -1; grid-template-columns: 1fr; }
  .progress-track { display: none; }
}

/* Demo */
.demo-frame { position: relative; padding: var(--sp-3); }
.demo-screen { border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elev-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); aspect-ratio: 16/9; display: grid; place-items: center; gap: var(--sp-4);
  padding: var(--sp-8); text-align: center; }
.wave { display: flex; align-items: center; gap: 4px; height: 48px; }
.wave span { width: 4px; border-radius: 999px; background: linear-gradient(var(--accent-bright), var(--accent-dim));
  animation: wave 1.1s var(--ease-in-out) infinite; }
.wave span:nth-child(2){animation-delay:.1s}.wave span:nth-child(3){animation-delay:.2s}
.wave span:nth-child(4){animation-delay:.3s}.wave span:nth-child(5){animation-delay:.15s}
.wave span:nth-child(6){animation-delay:.25s}.wave span:nth-child(7){animation-delay:.05s}
@keyframes wave { 0%,100%{height:30%}50%{height:100%} }

/* Pricing teaser */
.price-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1);
  border-radius: var(--r-pill); background: var(--bg-elev-2); box-shadow: inset 0 0 0 1px var(--stroke-hairline); }
.price-toggle button { padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-callout);
  color: var(--text-secondary); transition: color var(--dur-base) var(--ease-out); position: relative; z-index: 1; }
.price-toggle button[aria-pressed="true"] { color: #0B0E10; }
.price-toggle { position: relative; }
.price-thumb { position: absolute; top: var(--sp-1); bottom: var(--sp-1); left: var(--sp-1); width: calc(50% - var(--sp-1));
  border-radius: var(--r-pill); background: var(--accent); z-index: 0;
  transition: transform var(--dur-base) var(--ease-spring); }
.price-toggle[data-period="annual"] .price-thumb { transform: translateX(100%); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-12); }
.plan { display: grid; gap: var(--sp-3); }
.plan--feat { border-color: var(--stroke-accent); box-shadow: var(--shadow-card), 0 0 60px -16px var(--accent-glow); }
.plan-price { font-size: clamp(28px, 3.4vw, 38px); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-head); }
.plan-price small { font-size: var(--fs-callout); color: var(--text-tertiary); font-weight: var(--fw-regular); }
.plan-meta { font-size: var(--fs-callout); color: var(--text-secondary); }
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; } }

/* Manifiesto */
.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); }

/* CTA final */
.cta { position: relative; overflow: hidden; text-align: center; border-radius: var(--r-2xl);
  padding: clamp(48px, 8vw, 96px) var(--gutter); margin-inline: auto; max-width: var(--container);
  box-shadow: var(--shadow-lg); }
.cta-inner { position: relative; z-index: var(--z-content); display: grid; justify-items: center; gap: var(--sp-4); }
.cta .orb-wrap { width: clamp(140px, 20vw, 200px); margin-bottom: var(--sp-2); }

/* Footer */
.footer { background: var(--bg-base); border-top: 1px solid var(--stroke-hairline); padding-block: var(--sp-16) var(--sp-12); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-12); }
.footer h4 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--text-tertiary); margin-bottom: var(--sp-4); }
.footer li { margin-bottom: var(--sp-2); }
.footer a { color: var(--text-secondary); font-size: var(--fs-callout); transition: color var(--dur-fast) var(--ease-out); }
.footer a:hover { color: var(--text-primary); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
  margin-top: var(--sp-16); padding-top: var(--sp-6); border-top: 1px solid var(--stroke-hairline);
  font-size: var(--fs-caption); color: var(--text-tertiary); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* Underline link grow-from-center */
.ulink { background-image: linear-gradient(var(--orb-cyan), var(--orb-cyan)); background-size: 0 1px;
  background-position: 50% 100%; background-repeat: no-repeat; transition: background-size var(--dur-base) var(--ease-out); color: var(--text-primary); }
.ulink:hover { background-size: 100% 1px; }

/* Section heading block */
.sec-head { display: grid; gap: var(--sp-3); max-width: 60ch; margin-bottom: var(--sp-12); }
.sec-head--center { justify-items: center; text-align: center; margin-inline: auto; }

/* ----------------------------- 11b. REFINAMIENTO MÓVIL (nivel Apple) -------
   Cada sección = capítulo autocontenido: ritmo vertical generoso y CONSISTENTE,
   contenido centrado con max-width, cero regiones muertas, áreas táctiles ≥44px,
   cero overflow horizontal. Texto-primero; el orbe es acento, no protagonista.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Ritmo de sección uniforme — el hueco entre capítulos es igual y con propósito */
  :root { --section-y: 72px; }
  .sx-section { padding-block: var(--section-y); }
  .sec-head { margin-bottom: var(--sp-8); }

  /* Tipografía: titulares protagonistas pero contenidos; nada diminuto ni gigante */
  :root {
    --fs-display: clamp(34px, 9vw, 40px);
    --fs-h1: clamp(28px, 7.6vw, 34px);
    --fs-h2: clamp(24px, 6.6vw, 28px);
    --fs-body-lg: 17px;
  }
  /* salvaguarda anti-overflow en titulares largos */
  .t-display, .t-h1, .t-h2, .t-h3 { overflow-wrap: anywhere; }

  /* HERO — texto primero, orbe acento debajo, padding aireado y equilibrado */
  .hero { padding-block: clamp(28px, 8vh, 56px) var(--section-y); }
  /* grid de 1 columna con minmax(0,1fr): los hijos NO pueden empujar el ancho
     más allá del viewport → adiós overflow/clipping del titular y los chips */
  .hero-inner { gap: var(--sp-5, 20px); width: 100%; grid-template-columns: minmax(0, 1fr); }
  .hero-inner > * { max-width: 100%; justify-self: center; }
  .hero-inner [role="list"] { max-width: 100% !important; }
  .hero .orb-wrap { width: clamp(132px, 40vw, 168px); margin-bottom: var(--sp-2); }
  .hero .t-display { max-width: 18ch; }
  .hero-ctas { width: 100%; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
  .hero-ctas .btn { width: 100%; }
  /* la fila de chips "ve+oye+actúa" nunca debe desbordar */
  .hero-inner [role="list"] { gap: var(--sp-2) !important; }

  /* SOCIAL PROOF — grid 2x2 sólido, cifras grandes, labels legibles, sin overflow */
  .proof {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
    max-width: 420px; margin-inline: auto;
  }
  .proof-item {
    background: var(--bg-elev-2); border: 1px solid var(--stroke-hairline);
    border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-3);
    box-shadow: var(--shadow-card);
  }
  .proof-num { font-size: 34px; line-height: 1.05; }
  .proof-label { font-size: var(--fs-caption); line-height: 1.35; margin-top: var(--sp-1); }

  /* TRES ENTRADAS — apila en columna, sin cards cortadas, flecha discreta */
  #tres-a-la-vez .card { flex: 1 1 100% !important; min-width: 0 !important; }
  #tres-a-la-vez [aria-hidden="true"][style*="font-size:32px"] { transform: rotate(90deg); font-size: 24px !important; }

  /* FEATURES — el media/orbe es compacto e integrado; cero orbe flotando solo.
     Limitamos altura, reducimos padding y juntamos el ritmo de cada feature. */
  .feat { gap: var(--sp-6); }
  .feat + .feat { margin-top: var(--sp-12); }
  .feat-media {
    min-height: 0; padding: var(--sp-6); max-width: 460px; margin-inline: auto; width: 100%;
  }
  .feat-orb { width: clamp(104px, 28vw, 132px); margin-inline: auto; }
  /* tarjetas de orbe: orbe + caption juntos y centrados, sin vacío vertical */
  .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);
  }
  .feat-media .orb-wrap + p { margin-top: var(--sp-2) !important; }

  /* CAPACIDADES — grid de 1 columna cómodo; icono + texto alineados */
  #capacidades [style*="grid-template-columns:repeat(auto-fill"] { grid-template-columns: 1fr !important; }
  /* tarjeta hero de capacidades: orbe contenido al lado del texto */
  #capacidades .card[style*="grid-template-columns:auto 1fr"] { gap: var(--sp-4) !important; }
  .ico-cap { font-size: 22px; }

  /* CARDS — padding un punto menor en móvil para densidad premium */
  .card { padding: var(--sp-6); }

  /* CTA final — orbe acento, no protagonista */
  .cta .orb-wrap { width: clamp(108px, 26vw, 140px); }
  .cta { padding: clamp(40px, 10vw, 64px) var(--gutter); }

  /* MANIFIESTO — line-length cómodo */
  .manifesto p { font-size: clamp(17px, 4.6vw, 20px); }

  /* DEMO — proporción menos panorámica en móvil para que no quede una franja vacía */
  .demo-screen { aspect-ratio: 4/3; padding: var(--sp-6); }
  .demo-screen .orb-wrap { width: 80px !important; }
}

/* Móvil estrecho (≤390px): apretar gutters útiles sin perder aire */
@media (max-width: 390px) {
  :root { --gutter: 18px; }
}

/* ----------------------------- 11c. RENDIMIENTO MÓVIL (GPU) ----------------
   Safari iOS real sufría jank con halos blur(54-60px) + multi-radial del orbe +
   grano con mix-blend overlay. Bajo ≤768px ALIGERAMOS lo caro SIN tocar la
   paleta canónica del orbe (los hex --orb-* no se modifican): menos blur, menos
   capas atmosféricas, grano estático con menos coste de composición. La marca
   se mantiene; solo cae el coste de pintar por frame. */
@media (max-width: 768px) {
  /* Halo del orbe: mantenemos su blur grande (envuelve el orbe y oculta el
     bounding-box del gradiente) pero recortamos un punto la opacidad. El ahorro
     real de GPU en móvil viene del grano, el mesh, el contain y el hover, no de
     crujir este halo (reducirlo dejaba ver el borde cuadrado del orbe). */
  .orb-halo { opacity: 0.66; }

  /* Mesh de fondo: un blur menor y opacidad algo más baja; sigue leyéndose */
  .mesh::before, .mesh::after { filter: blur(44px); }

  /* Grano global: sin mix-blend overlay (caro de componer en WebKit) y opacidad
     ligeramente menor. Queda como textura estática barata anti-banding. */
  .sx-grain { mix-blend-mode: normal; opacity: 0.035; }
  .orb-wrap::after { mix-blend-mode: normal; opacity: 0.05; }

  /* Pista a la GPU: el orbe y su halo se animan; promociónalos a su propia capa
     de composición para que la respiración no obligue a repintar el documento.
     NOTA: NO usar contain:paint en .orb-wrap — recorta el halo (inset -20%) a la
     caja del wrap y deja ver el borde CUADRADO del bounding-box del orbe. */
  .orb, .orb-halo { will-change: transform; transform: translateZ(0); }
}

/* Equipos sin hover fino (táctil): el spotlight cursor-follow no aporta y
   ahorra trabajo de composición; el hover-lift de cards tampoco aplica. */
@media (hover: none) {
  .card--spot::before { display: none; }
  .card:hover { transform: none; }
}

/* ----------------------------- 12. MODAL DE CAPACIDADES -------------------- */
/* Patrón card → modal (firma del usuario). Apertura suave scale+fade,
   cierre con Escape + click fuera + botón discreto. Móvil = sheet casi a
   pantalla completa que sube desde abajo. Construido por sx.js (mejora
   progresiva: sin JS las cards siguen siendo contenido legible). */
.modal-scrim {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(6, 6, 10, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.modal-scrim.is-in { opacity: 1; }

.modal-root {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 1);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
}
.modal-dialog {
  position: relative; width: min(560px, 100%);
  max-height: min(86vh, 760px); overflow-y: auto;
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke-soft); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg), 0 0 80px -28px var(--accent-glow);
  padding: var(--sp-12) var(--sp-12) var(--sp-8);
  /* estado inicial de la animación de entrada */
  opacity: 0; transform: scale(0.97) translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  outline: none;
}
/* AURORA ANIMADA alrededor del modal (pedido founder): un anillo cónico aurora
   difuminado que rota lento por DETRÁS del borde y se funde hacia fuera. No es
   un borde sólido coloreado — es un halo vivo, multicolor del orbe, muy suave.
   Vive en un wrapper sin overflow para no recortarse contra el scroll interno. */
.modal-aura {
  position: relative; width: min(560px, 100%); isolation: isolate;
}
.modal-aura::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--r-2xl) + 3px);
  background: conic-gradient(from var(--aura-rot, 0deg),
    #5CDBFC, #8C66F2, #F76EC9, #FCC766, #45D98C, #5CDBFC);
  filter: blur(16px); opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  animation: modal-aura-spin 18s linear infinite;
  will-change: transform;
}
@property --aura-rot { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes modal-aura-spin { to { --aura-rot: 360deg; } }
.modal-root.is-in .modal-aura::before { opacity: 0.5; }
.modal-root.is-out .modal-aura::before { opacity: 0; }
/* El diálogo dentro del wrapper ocupa el 100% del wrapper. */
.modal-aura > .modal-dialog { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .modal-aura::before { animation: none; }
}
.modal-root.is-in .modal-dialog { opacity: 1; transform: scale(1) translateY(0); }
.modal-root.is-out .modal-dialog { opacity: 0; transform: scale(0.98) translateY(6px);
  transition-duration: var(--dur-base); }
.modal-dialog:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent); }

.modal-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill); color: var(--text-tertiary);
  background: var(--bg-elev-3); box-shadow: inset 0 0 0 1px var(--stroke-hairline);
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.modal-close:hover { color: var(--text-primary); background: var(--bg-elev-4);
  box-shadow: inset 0 0 0 1px var(--stroke-soft); transform: scale(1.05); }
.modal-close:focus-visible { outline: none; color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--stroke-soft), 0 0 0 2px var(--accent); }

.modal-hero { display: flex; align-items: center; gap: var(--sp-6); margin-bottom: var(--sp-6); }
.modal-orb.orb-wrap { width: 72px; flex: 0 0 72px; }
.modal-head { min-width: 0; }
.modal-kicker {
  font-size: var(--fs-micro); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent);
  margin-bottom: var(--sp-2);
}
.modal-title { font-size: var(--fs-h2); letter-spacing: var(--tracking-head);
  line-height: var(--lh-tight); color: var(--text-primary); }
.modal-lead { font-size: var(--fs-body-lg); line-height: var(--lh-body);
  color: var(--text-secondary); margin-bottom: var(--sp-8); }
.modal-h { font-size: var(--fs-label); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-tertiary); margin: var(--sp-6) 0 var(--sp-3); }
.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;
}

/* Capturas de pantalla reales en modales */
.modal-screenshot-container {
  margin: var(--sp-6) 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Marco macOS minimalista */
.mac-window-frame {
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
}
.mac-window-header {
  height: 28px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  padding-left: 12px;
}
.mac-window-dots {
  display: flex;
  gap: 6px;
}
.mac-window-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mac-window-dot--red { background: #FF5F56; }
.mac-window-dot--yellow { background: #FFBD2E; }
.mac-window-dot--green { background: #27C93F; }

.mac-window-content {
  position: relative;
  width: 100%;
  line-height: 0;
}
.mac-window-content img {
  width: 100%;
  height: auto;
  display: block;
}

/* Marco iPhone vertical minimalista */
.iphone-frame {
  background: #09090b;
  border: 4px solid #1c1c1e;
  border-radius: 28px;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  width: 100%;
  max-width: 240px;
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 19.5;
}
.iphone-island {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 14px;
  background: #000;
  border-radius: 10px;
  z-index: 2;
  box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.05);
}
.iphone-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.iphone-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Móvil: sheet que sube desde abajo, casi a pantalla completa. */
@media (max-width: 600px) {
  .modal-root { padding: 0; align-items: flex-end; }
  .modal-dialog {
    width: 100%; max-height: 92vh;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    border-bottom: none;
    padding: var(--sp-12) var(--sp-6) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
    transform: translateY(16px); /* el sheet entra deslizando, sin scale */
  }
  .modal-root.is-in .modal-dialog { transform: translateY(0); }
  .modal-root.is-out .modal-dialog { transform: translateY(24px); }
  .modal-hero { flex-direction: column; align-items: flex-start; text-align: left; gap: var(--sp-4); }
  .modal-orb.orb-wrap { width: 64px; flex-basis: 64px; }
}
/* Efectos GPU caros del orbe ya se atenúan bajo (max-width:768px) en su bloque;
   en el modal mantenemos el orbe pero con menos blur heredado de ese media. */

/* ----------------------------- 13. REDUCED MOTION -------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .orb, .orb-halo, .mesh::before, .mesh::after, .mem-grid .chip, .wave span { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  /* El modal sigue apareciendo, pero sin desplazamiento ni escala. */
  .modal-dialog { transform: none !important; }
  .card-more { opacity: 0.78; transform: none; }
}

/* ----------------------------- 14. REDISEÑO PREMIUM & BENTO GRID (CALIDAD APPLE) ------------------ */
/* Degradados de texto fluidos */
.t-gradient {
  background: linear-gradient(135deg, #FFFFFF 30%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.t-gradient-accent {
  background: linear-gradient(135deg, #FFFFFF 22%, #9CEBFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Fallback: sin background-clip:text el texto quedaría transparente (invisible). */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .t-gradient, .t-gradient-accent {
    background: none; -webkit-text-fill-color: currentColor; color: var(--text-primary);
  }
}

/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  max-width: var(--container);
  margin-inline: auto;
}
.bento-card {
  position: relative;
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke-hairline);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              border-color var(--dur-slow) var(--ease-out),
              box-shadow var(--dur-slow) var(--ease-out);
}
.bento-card:hover {
  transform: translateY(-4px);
  border-color: var(--stroke-accent);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.65), 0 0 32px -10px var(--accent-glow);
}
.bento-card--large {
  grid-column: span 2;
  min-height: 280px;
}
/* Card destacada con AURA aurora sutil alrededor (como la card destacada de la
   web hermana). overflow:hidden de .bento-card recorta pseudos internos, así que
   el aura va como capa exterior en un wrapper sin overflow: usamos un ::after
   posicionado FUERA via un offset negativo y un box-shadow multicolor difuso. */
.bento-card--aura {
  border-color: var(--stroke-accent);
  box-shadow:
    0 0 0 1px var(--stroke-accent),
    0 24px 60px -20px rgba(0,0,0,0.7),
    0 0 48px -14px rgba(69,217,140,0.22),
    0 0 70px -22px rgba(92,219,252,0.18);
}
.bento-card--aura:hover {
  box-shadow:
    0 0 0 1px var(--stroke-accent),
    0 30px 70px -20px rgba(0,0,0,0.75),
    0 0 60px -12px rgba(69,217,140,0.28),
    0 0 90px -20px rgba(140,102,242,0.18);
}
.bento-card--full {
  grid-column: span 3;
  min-height: 300px;
}
.bento-card-header {
  margin-bottom: var(--sp-4);
}
.bento-card-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-head);
  color: var(--text-primary);
  margin-top: var(--sp-2);
}
.bento-card-desc {
  font-size: var(--fs-callout);
  color: var(--text-secondary);
  margin-top: var(--sp-1);
}
.bento-card-visual {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-4);
  width: 100%;
}

/* Gráfico de Convergencia */
.visual-convergencia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  width: 100%;
  max-width: 420px;
  position: relative;
}
.convergencia-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-elev-3);
  border: 1px solid var(--stroke-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-bright);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 2;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.bento-card:hover .convergencia-node {
  border-color: var(--stroke-accent);
  transform: scale(1.05);
}
.convergencia-lines {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.convergencia-line-svg {
  width: 100%;
  height: 100%;
  stroke: var(--stroke-hairline);
  stroke-dasharray: 4 4;
  animation: line-dash 20s linear infinite;
}
.bento-card:hover .convergencia-line-svg {
  stroke: var(--stroke-accent);
}
@keyframes line-dash {
  to {
    stroke-dashoffset: -40;
  }
}
.convergencia-center {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.convergencia-center .orb {
  width: 100%;
  height: 100%;
}

/* Gráfico de Teleprompter (Reunión) */
.visual-teleprompter {
  background: rgba(10, 10, 14, 0.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;
}
.teleprompter-scroller {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  animation: teleprompter-scroll 10s linear infinite;
}
.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);
}
.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); }
}

/* Gráfico de Dictado (Whisper) */
.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;
}
.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; }
}

/* Simulador de Ventana de Mac OS ("Velo funcionar") */
.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, 0.7);
  overflow: hidden;
  width: 100%;
  max-width: 820px;
  margin: var(--sp-8) auto 0;
  display: flex;
  flex-direction: column;
}
.sim-header {
  background: rgba(25, 25, 30, 0.4);
  border-bottom: 1px solid var(--stroke-hairline);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.sim-dots {
  display: flex;
  gap: 6px;
}
.sim-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.sim-dot--red { background: #FF5F56; }
.sim-dot--yellow { background: #FFBD2E; }
.sim-dot--green { background: #27C93F; }
.sim-title {
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.sim-image-container {
  position: relative;
  width: 100%;
  line-height: 0;
  background: #000;
}
.sim-real-screenshot {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Demo de voz EL en vivo (reemplaza el screenshot estático · demo-bot.js) ── */
.demo-stage {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  /* top mayor que abajo: el halo del orbe bleedea -20% y debajo hay texto+CTA+
     fineprint; asimetría corregida dando aire arriba para que el orbe respire. */
  padding: clamp(var(--sp-12), 9vw, 76px) var(--sp-6) clamp(var(--sp-8), 6vw, var(--sp-12));
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(69, 217, 140, 0.08) 0%, rgba(0, 0, 0, 0) 60%),
    #0A0B0E;
  min-height: 340px;
  text-align: center;
}
.demo-stage .demo-orb.orb-wrap {
  width: clamp(120px, 22vw, 168px);
}
.demo-status {
  margin: 0;
  min-height: 1.4em;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  max-width: 42ch;
}
.demo-timer {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h3);
  color: var(--text-accent);
  letter-spacing: 0.04em;
  line-height: 1;
}
.demo-cta {
  min-width: 220px;
}
/* Estado en vivo: el botón pasa a "Terminar" (rojo suave · no es el verde de acción). */
.demo-cta--live {
  background: rgba(255, 95, 86, 0.16) !important;
  border-color: rgba(255, 95, 86, 0.5) !important;
  color: #FF8B84 !important;
  box-shadow: none !important;
}
.demo-cta--live:hover {
  background: rgba(255, 95, 86, 0.26) !important;
}
.demo-cta:disabled {
  opacity: 0.6;
  cursor: progress;
}
.demo-fineprint {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  max-width: 44ch;
}
@media (max-width: 560px) {
  .demo-stage { min-height: 280px; }
  .demo-cta { width: 100%; }
}

@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .bento-card--large, .bento-card--full {
    grid-column: span 1;
  }
}

/* Collage de dispositivos en Feature Multiplataforma (Estilo Apple) */
.device-collage-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(92, 219, 252, 0.05) 0%, transparent 70%);
}
.device-collage {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 280px;
}
.device-img {
  position: absolute;
  border-radius: var(--r-md);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid var(--stroke-hairline);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}
.device-img--mac {
  width: 250px;
  left: 20px;
  top: 10px;
  z-index: 1;
  filter: brightness(0.85) contrast(1.05);
}
.device-img--iphone {
  width: 120px;
  right: 10px;
  top: 40px;
  z-index: 3;
  border-radius: var(--r-lg);
}
.device-watch-ultra {
  position: absolute;
  width: 76px;
  height: 92px;
  left: -15px;
  bottom: 15px;
  z-index: 4;
  transition: transform var(--dur-slow) var(--ease-spring);
}
.watch-case {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d1d1d6 0%, #a2a2a6 50%, #8e8e93 100%);
  border-radius: 18px;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.6), 
              inset 0 1px 1px rgba(255, 255, 255, 0.4),
              inset 0 -1px 2px rgba(0, 0, 0, 0.4);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c7c7cc;
}
.watch-screen {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
  border: 1px solid #1c1c1e;
}
.watch-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.watch-crown {
  position: absolute;
  right: -5px;
  top: 22px;
  width: 6px;
  height: 18px;
  background: linear-gradient(to bottom, #8e8e93, #d1d1d6, #555);
  border-radius: 2px 3px 3px 2px;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
  border-left: 2px solid #ff453a;
  z-index: -1;
}
.watch-button {
  position: absolute;
  right: -3px;
  top: 46px;
  width: 4px;
  height: 22px;
  background: #a2a2a6;
  border-radius: 1px 2px 2px 1px;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
  z-index: -1;
  border: 1px solid #8e8e93;
}
.watch-action-button {
  position: absolute;
  left: -3px;
  top: 32px;
  width: 4px;
  height: 26px;
  background: #ff9f0a;
  border-radius: 2px 1px 1px 2px;
  box-shadow: -1px 2px 4px rgba(0,0,0,0.4);
  z-index: -1;
  border: 1px solid #ffb340;
}
/* Efecto interactivo en hover */
.device-collage-container:hover .device-img--mac {
  transform: scale(1.02) translate3d(-3px, -3px, 0);
  filter: brightness(1.0);
  border-color: var(--stroke-soft);
}
.device-collage-container:hover .device-img--iphone {
  transform: scale(1.04) translate3d(3px, -3px, 0);
  border-color: var(--stroke-accent);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 0 16px -4px var(--accent-glow);
}
.device-collage-container:hover .device-watch-ultra {
  transform: scale(1.08) translate3d(-6px, 6px, 0);
}

@media (max-width: 600px) {
  .device-collage-container {
    min-height: 280px;
  }
  .device-collage {
    transform: scale(0.85);
    height: 220px;
  }
}

/* ----------------------------- 15. LA CARA DE SAELYX (avatar en vivo) ------ */
/* Split héroe: iPhone con el vídeo de la cara + tres pruebas verificables.
   Va sobre true-black (sin --alt) para que el marco y el halo aurora recorten.
   Reusa: .feat / .feat-media / .feat-copy / .iphone-frame / .iphone-island /
   .iphone-content / .sx-ico / .state-dot / tokens SXColor. */

/* La sección es más alta que el intrínseco por defecto de .sx-cv (600px):
   subimos el contain-intrinsic-size solo aquí para evitar micro-saltos de scroll. */
@supports (content-visibility: auto) {
  .sx-face.sx-cv { contain-intrinsic-size: auto 860px; }
}

/* Escenario: iPhone flotando con halo aurora contenido dentro de su columna. */
.face-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); width: 100%; }
.face-glow {
  position: absolute; z-index: 0; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: min(340px, 92%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%,
    rgba(92, 219, 252, 0.22) 0%,   /* --orb-cyan */
    rgba(130, 117, 247, 0.15) 36%, /* --orb-violet */
    rgba(247, 110, 201, 0.09) 58%, /* --orb-pink */
    transparent 72%);
  filter: blur(6px);
}

/* iPhone en escala de héroe: override LOCAL del max-width 240px global
   (no tocar la regla .iphone-frame, la usan otros bloques). */
.face-phone { position: relative; z-index: 1; max-width: clamp(240px, 26vw, 296px); }

/* Vídeo + poster comparten encuadre exacto: cara y cabecera "te ve y te escucha"
   de protagonistas arriba; el leve scale anclado al borde superior empuja el pie
   de la captura (área de notas) fuera del recorte cover. */
.iphone-content .face-poster,
.iphone-content .face-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  transform: scale(1.06); transform-origin: 50% 0;
  display: block;
}
.iphone-content .face-poster { z-index: 0; }
.iphone-content .face-video  { z-index: 1; }

.face-live { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-caption); }

/* Columna de pruebas verificables (lo que el vídeo demuestra a su lado). */
.face-points { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.face-point  { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.face-point-ico {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--accent-bright);
  background: var(--bg-elev-3); box-shadow: inset 0 0 0 1px var(--stroke-hairline);
}
.face-point-ico .sx-ico { width: 20px; height: 20px; }
.face-point h3 { font-size: var(--fs-title); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-head); margin-bottom: 3px; }
.face-point p  { color: var(--text-secondary); font-size: var(--fs-callout); line-height: var(--lh-body); }

/* Responsive: 1 columna con la cara arriba (el orden del DOM ya la pone primera). */
@media (max-width: 820px) {
  .face-phone  { max-width: 240px; }
  .face-points { margin-top: var(--sp-4); }
}
/* Móvil estrecho (375px): que el marco no desborde la columna. */
@media (max-width: 400px) {
  .face-phone { max-width: min(240px, 80vw); }
  .face-point-ico { width: 36px; height: 36px; }
  .face-point-ico .sx-ico { width: 18px; height: 18px; }
}

/* prefers-reduced-motion (regla del fundador): sin reproducción; la cara queda
   congelada en el poster —mismo encuadre bello, cero movimiento—. El bloque global
   ya neutraliza reveals/orbe; aquí solo hay que ocultar el <video> para que
   emerja el poster (única capa restante). */
@media (prefers-reduced-motion: reduce) {
  .iphone-content .face-video { display: none; }
}

/* Clusters de capacidades (revisión FE · agrupa las bento en Percibe/Recuerda/Actúa/Confía). */
.bento-cluster { margin-top: var(--sp-16); }
.bento-cluster:first-of-type { margin-top: 0; }
.bento-cluster-head { margin-bottom: var(--sp-6); display: grid; gap: var(--sp-2); }
.bento-cluster-sub { max-width: 52ch; }

/* Cluster Confia (solo 2 tarjetas): rejilla de 2 centrada; evita 3a columna vacia.
   Solo >=901px porque en movil .bento-grid ya colapsa a 1 columna (@media max-width:900px). */
@media (min-width: 901px) {
  .bento-grid--pair { grid-template-columns: repeat(2, 1fr); max-width: 780px; }
}
/* Los eyebrow-mono de CLÚSTER (Percibe/Recuerda/Actúa/Confía) son un SUBnivel del
   eyebrow-mono de SECCIÓN ("Capacidades"): sin guiones laterales y en tono apagado,
   para no colapsar la jerarquía. La firma editorial con guiones + acento se reserva
   al nivel de sección. */
.bento-cluster-head .t-eyebrow-mono { color: var(--text-tertiary); letter-spacing: 0.2em; }
.bento-cluster-head .t-eyebrow-mono::before,
.bento-cluster-head .t-eyebrow-mono::after { display: none; }

/* ── Foco de teclado en botones (WCAG 2.4.7 · el reset global :focus-visible de
   L184 quita el outline y .btn no lo reponía) ─────────────────────────────── */
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Banda dedicada · voz en el navegador (mercado no-Mac · /app/voz/) ─────── */
.voz-band {
  position: relative; display: grid; grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(28px, 5vw, 56px); border-radius: var(--r-2xl);
  background: radial-gradient(130% 150% at 16% 28%, var(--accent-glow-soft), transparent 58%), var(--bg-elev-1);
  box-shadow: inset 0 0 0 1px var(--stroke-accent), 0 30px 80px -34px rgba(0,0,0,0.72), 0 0 64px -26px var(--accent-glow);
}
.voz-orb { display: grid; place-items: center; }
.voz-copy { display: grid; gap: var(--sp-4); align-content: start; }
.voz-copy .plat-meta { margin-top: 0; }
.voz-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.voz-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }

@media (max-width: 820px) {
  .voz-band { grid-template-columns: 1fr; text-align: center; padding: clamp(26px, 7vw, 44px); }
  .voz-copy { justify-items: center; }
  .voz-copy .t-lede { margin-inline: auto; }
  .voz-copy .plat-meta { width: max-content; max-width: 100%; margin-inline: auto; }
  .voz-tags, .voz-ctas { justify-content: center; }
}


/* ── #4 Jerarquía iOS (/app/ios/) · rejilla FIJA de capacidades ────────────────
   "Cámara en la mano" (el diferenciador que la propia lede destaca) sube a bloque
   LEAD con el patrón .feat; el resto de capacidades vive en esta rejilla FIJA de
   3 (desktop) / 2 (tablet) / 1 (móvil), reemplazando el auto-fill inline que
   igualaba las cards como misma estructura y dejaba hueco irregular en la última
   fila. No reuso .bento-grid porque colapsa 3→1 sin escalón de 2 (tablet). */
.ios-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 900px) {
  .ios-cap-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
}
@media (max-width: 560px) {
  .ios-cap-grid { grid-template-columns: 1fr; }
}


/* ============ BLOG · tipografia de prosa ============
   Anadido 2026-07-25. Bloque ESTRICTAMENTE ADITIVO: solo selectores nuevos
   (.blog-*, .sx-crumbs, .sx-article-*, .sx-prose*). No modifica ni una sola
   regla anterior de este fichero, y ningun selector de arriba lo alcanza.

   Por que existe: sx.css es un sistema de LANDING (secciones, cards, rejillas).
   El reset global de la seccion 2 hace `* { margin: 0 }`, `ul { list-style: none;
   padding: 0 }` y `a { color: inherit; text-decoration: none }`. Para una landing
   es correcto; para un articulo largo significa cero ritmo vertical, listas sin
   vineta y enlaces invisibles dentro del texto. Este bloque repone exactamente
   eso, y solo dentro de .sx-prose, para no tocar el resto de la web.

   Cero hex nuevos: todo color sale de los tokens de :root. Cero fuentes nuevas.
   Medida de lectura 68ch (dentro del optimo 65-75). No usa --sp-5 ni --sp-10:
   NO EXISTEN en :root (hay 3 usos en este fichero, uno de ellos sin fallback).
   =================================================================== */

/* --- B.1 Indice del blog · rejilla de tarjetas --------------------------- */
/* 3 / 2 / 1 columnas. No reuso .bento-grid porque colapsa 3->1 sin escalon de
   2 en tablet; sigo el patron ya probado de .ios-cap-grid y sus breakpoints. */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }

/* La tarjeta hereda .card (position:relative, hover-lift, spotlight opcional).
   El padding inferior deja hueco al .card-more, que es absolute bottom. */
.blog-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding-bottom: calc(var(--sp-8) + 18px);
}
.blog-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.blog-card-title {
  font-size: var(--fs-title); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-head); line-height: var(--lh-snug);
  color: var(--text-primary); text-wrap: balance;
}
.blog-card-sum { font-size: var(--fs-callout); color: var(--text-secondary); line-height: var(--lh-body); }

/* Enlace estirado: toda la tarjeta es clicable sin una sola linea de JS
   (CSP script-src 'self' prohibe el onclick). El <a> real sigue siendo el
   titular, asi que el lector de pantalla anuncia el destino correcto. */
.blog-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* El anillo global de :focus-visible se dibujaria sobre el texto del titular,
   no sobre la tarjeta: lo movemos al contenedor (ver 7.3 del sistema). */
.blog-card-link:focus-visible { outline: none; box-shadow: none; }
.blog-card:has(.blog-card-link:focus-visible) {
  border-color: var(--stroke-accent);
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
}
.blog-card:hover .card-more,
.blog-card:has(.blog-card-link:focus-visible) .card-more { opacity: 1; transform: translateY(0); }
.blog-card:hover .card-more::after { transform: translateX(3px); }
/* Sin :has() el foco se quedaria sin ninguna marca visible: lo devolvemos al <a>. */
@supports not selector(:has(*)) {
  .blog-card-link:focus-visible { box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent); }
}

/* --- B.2 Migas de pan --------------------------------------------------- */
.sx-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.sx-crumbs li { display: inline-flex; align-items: center; margin: 0; }
.sx-crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--text-tertiary); }
.sx-crumbs a { color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease-out); }
.sx-crumbs a:hover { color: var(--text-secondary); }
.sx-crumbs [aria-current="page"] { color: var(--text-secondary); }

/* --- B.3 Cabecera de articulo ------------------------------------------- */
.sx-article-head { max-width: 68ch; display: grid; justify-items: start; gap: var(--sp-4); }
.sx-article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.sx-article-meta > span { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* --- B.4 Cuerpo de prosa ------------------------------------------------ */
.sx-prose {
  max-width: 68ch;
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  overflow-wrap: break-word;   /* URLs largas no desbordan en movil */
}
.sx-prose > * + * { margin-top: var(--sp-4); }
.sx-prose p { text-wrap: pretty; }
.sx-prose strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.sx-prose em { font-style: italic; }

/* Titulares: reponen el margen que `* { margin: 0 }` elimina.
   scroll-margin-top evita que el nav sticky tape el titular al saltar al ancla. */
.sx-prose h2 {
  font-size: var(--fs-h2); color: var(--text-primary);
  letter-spacing: var(--tracking-head); line-height: var(--lh-snug); text-wrap: balance;
  margin-top: var(--sp-12); margin-bottom: var(--sp-4); scroll-margin-top: 88px;
}
.sx-prose h3 {
  font-size: var(--fs-h3); color: var(--text-primary);
  letter-spacing: var(--tracking-head); line-height: var(--lh-snug); text-wrap: balance;
  margin-top: var(--sp-8); margin-bottom: var(--sp-3); scroll-margin-top: 88px;
}
.sx-prose h4 {
  font-size: var(--fs-title); color: var(--text-primary);
  letter-spacing: var(--tracking-head); line-height: var(--lh-snug);
  margin-top: var(--sp-6); margin-bottom: var(--sp-2);
}
/* Numeracion mono opcional dentro del titular (firma editorial de las legales) */
.sx-prose h2 .sx-prose-n, .sx-prose h3 .sx-prose-n {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--text-accent); margin-right: var(--sp-3);
}

/* Enlaces en prosa: el reset los deja indistinguibles del texto. */
.sx-prose a:not(.btn) {
  color: var(--text-accent);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--stroke-accent);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
.sx-prose a:not(.btn):hover { color: var(--accent-bright); text-decoration-color: var(--accent-bright); }

/* Listas: el reset quita vineta y padding, los reponemos con ::before.
   Los calc() alinean el marcador con la primera linea a cualquier tamano de
   fuente: la altura de linea es un numero, asi que escala con el texto. */
.sx-prose ul, .sx-prose ol { display: grid; gap: var(--sp-2); }
.sx-prose li { position: relative; padding-left: var(--sp-6); line-height: var(--lh-body); }
.sx-prose ul > li::before {
  content: ""; position: absolute; left: 0;
  top: calc((1em * var(--lh-body) - 6px) / 2);
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.sx-prose ol { counter-reset: sx-ol; }
.sx-prose ol > li { counter-increment: sx-ol; }
.sx-prose ol > li::before {
  content: counter(sx-ol) "."; position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 0.82em;
  line-height: calc(var(--lh-body) / 0.82);   /* iguala la caja de linea del <li> */
  color: var(--text-accent);
}
.sx-prose li > ul, .sx-prose li > ol { margin-top: var(--sp-2); }

/* Cita editorial · unico sitio donde el serif crece (es su rol: acento). */
.sx-prose blockquote {
  margin-top: var(--sp-8); margin-bottom: var(--sp-8);
  padding-left: var(--sp-6); border-left: 2px solid var(--stroke-accent);
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h3);
  line-height: var(--lh-snug); color: var(--text-primary);
}
.sx-prose blockquote p + p { margin-top: var(--sp-3); }
.sx-prose blockquote cite {
  display: block; margin-top: var(--sp-3);
  font-family: var(--font-mono); font-style: normal; font-size: var(--fs-caption);
  letter-spacing: 0.04em; color: var(--text-tertiary);
}

/* Callout · patron .legal-callout de /privacidad/, promovido al sistema. */
.sx-prose-callout {
  margin-top: var(--sp-8); margin-bottom: var(--sp-8);
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--accent-glow-soft); box-shadow: inset 0 0 0 1px var(--stroke-accent);
}
.sx-prose-callout > * { color: var(--text-primary); }
.sx-prose-callout > * + * { margin-top: var(--sp-3); }
.sx-prose-callout--warm { background: var(--warm-glow); box-shadow: inset 0 0 0 1px var(--warm-glow); }

/* Codigo · monocromo a proposito: resaltar sintaxis exigiria una libreria
   externa y script-src 'self' la prohibe (ademas de pesar). */
.sx-prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--bg-elev-3); box-shadow: inset 0 0 0 1px var(--stroke-hairline);
  color: var(--text-primary);
}
.sx-prose pre {
  margin-top: var(--sp-6); margin-bottom: var(--sp-6);
  padding: var(--sp-6); border-radius: var(--r-lg);
  background: var(--bg-elev-1); box-shadow: inset 0 0 0 1px var(--stroke-hairline);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-family: var(--font-mono); font-size: var(--fs-caption); line-height: 1.6;
  color: var(--text-secondary); tab-size: 2;
}
.sx-prose pre code { padding: 0; background: none; box-shadow: none; font-size: inherit; color: inherit; }

/* Figuras */
.sx-prose figure { margin-top: var(--sp-12); margin-bottom: var(--sp-12); }
.sx-prose figure img {
  width: 100%; height: auto; border-radius: var(--r-lg);
  border: 1px solid var(--stroke-hairline); box-shadow: var(--shadow-card);
}
.sx-prose figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-caption);
  color: var(--text-tertiary); line-height: 1.45; text-wrap: pretty;
}

/* Tablas · SIEMPRE dentro de .sx-prose-table. El min-width fuerza el scroll
   DENTRO del envoltorio en movil, que es lo que impide que la pagina entera
   coja scroll horizontal. */
.sx-prose-table {
  margin-top: var(--sp-6); margin-bottom: var(--sp-6);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sx-prose table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-callout); }
.sx-prose th, .sx-prose td {
  text-align: left; padding: var(--sp-3); vertical-align: top;
  border-bottom: 1px solid var(--stroke-hairline); color: var(--text-secondary);
}
.sx-prose th {
  color: var(--text-primary); font-weight: var(--fw-semibold);
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tracking-label);
  white-space: nowrap;
}
.sx-prose td.t-num, .sx-prose th.t-num { font-variant-numeric: tabular-nums; }

/* Separador editorial */
.sx-prose hr {
  margin-top: var(--sp-16); margin-bottom: var(--sp-16); margin-inline: auto;
  width: 64px; height: 1px; border: none; background: var(--stroke-soft);
}

/* --- B.5 Responsive · reusa los escalones ya existentes del fichero ------ */
@media (max-width: 600px) {
  .sx-prose { font-size: var(--fs-body); }
  .sx-prose h2 { margin-top: var(--sp-8); }
  .sx-prose blockquote { font-size: var(--fs-title); padding-left: var(--sp-4); }
  .sx-prose pre { padding: var(--sp-4); }
  .sx-prose figure { margin-top: var(--sp-8); margin-bottom: var(--sp-8); }
  .sx-prose hr { margin-top: var(--sp-12); margin-bottom: var(--sp-12); }
}

/* ============ MANIFIESTO · muestras de la paleta del orbe ============
   Sólo se usan en /manifiesto/. Bloque estrictamente aditivo: selectores
   nuevos y tokens ya definidos arriba. El color de cada muestra llega por
   la variable --c en línea, para que los hex vivan en el HTML junto al
   nombre y no haya que mantenerlos en dos sitios. */
.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);
}

/* ============ VISOR DE CAPTURAS (ampliar al pulsar) ============
   Bloque estrictamente aditivo. Permite ver una captura del producto a tamaño
   completo sin salir de la página. Sin dependencias y sin JS en línea: la CSP
   del sitio es script-src 'self'. */
.sim-real-screenshot { cursor: zoom-in; }
.sx-visor {
  position: fixed; inset: 0; z-index: 200; display: none;
  place-items: center; padding: clamp(16px, 4vw, 56px);
  background: rgba(6, 8, 10, 0.88); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .22s var(--ease-in-out, ease);
}
.sx-visor[data-abierto] { display: grid; }
.sx-visor[data-abierto].is-visible { opacity: 1; }
.sx-visor img {
  max-width: min(1500px, 100%); max-height: 88vh; width: auto; height: auto;
  border-radius: var(--radius-lg, 14px);
  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);
}
.sx-visor.is-visible img { transform: scale(1); }
.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;
}
.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;
}
.sx-visor-cerrar:hover { color: var(--text-primary); border-color: var(--stroke-strong); }
@media (prefers-reduced-motion: reduce) {
  .sx-visor, .sx-visor img { transition: none; }
}

/* ============ VÍDEO DEL PRODUCTO ============
   Mismo encaje que .sim-real-screenshot, para que el marco de ventana de Mac
   sirva igual con imagen o con vídeo. Bloque aditivo. */
.sim-real-video { width: 100%; height: auto; display: block; border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .sim-real-video { display: none; } }

/* ============ DEMO DEL HERO ============
   El vídeo del producto sube a la portada, bajo la píldora de confianza.
   Ancho contenido para que no compita con el titular. Bloque aditivo. */
.hero-demo { margin-top: clamp(var(--sp-10), 6vw, var(--sp-16)); width: 100%; }
/* El video ya trae la barra de titulo de la app: aqui NO se le pone otra
   ventana encima, solo el borde y la sombra que lo asientan en la pagina. */
.hero-demo-marco {
  max-width: 960px; margin-inline: auto; overflow: hidden;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--stroke-hairline);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.85);
}

/* ── Par de estados del orbe (reposo · despierta) ────────────────────────────
   El fundador quiso que se vieran LAS DOS: el orbe apagado es bonito, pero solo
   se entiende al lado del encendido. Mismo encuadre, misma app, dos momentos.
   Sin marco: las capturas ya traen la ventana y su sombra (ver 2026-07-28). */
.sx-par-estados { display: grid; gap: var(--sp-5); }
.sx-par-estados figure { margin: 0; }
.sx-par-estados figcaption {
  margin-top: var(--sp-2);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tertiary, rgba(255,255,255,.45));
}
/* Apiladas, no en paralelo: son tiras anchas y bajas (el recorte de la tarjeta del
   orbe). En dos columnas el orbe salía diminuto y la comparación no se leía. */