/* TONTRIA — tontria.com styles. No framework, no build step. Based on the TONTRIA Clips site styles. */
@font-face{font-family:"Satoshi";src:url(/fonts/satoshi-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(/fonts/satoshi-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(/fonts/satoshi-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Tema. Las variables oscuras van en :root (el sitio nació oscuro y así sigue si no se elige otra cosa).
   El tema claro pisa las mismas variables. Se aplica si se eligió con el botón luna/sol (clase `light` en el
   <html>, que pone el script de <head> leyendo localStorage «tontria-tema») o, sin elección, si el sistema
   está en claro. Por eso el bloque claro está dos veces: una para la clase y otra para el sistema
   (`:not(.dark)` = «no eligió oscuro»). Si se cambia uno, cambiar el otro: build.py se niega a generar si no
   son iguales. Paleta clara = la de TONTRIA MGMT (apps/mgmt/src/app/globals.css), para que todos los
   productos se vean igual. Contraste medido contra los fondos reales (página, tarjetas, aurora, maquetas):
   --faint es un poco más oscuro que el gris 4 de MGMT porque acá va encima de los resplandores del héroe. */
:root{
  --navy:#090a12;--navy-2:#10121c;--navy-3:#171a27;
  --cobalt:#3B82F6;--violet:#A855F7;--lavender:#cfcbff;--light:#f1f1f6;
  --text:#f1f1f6;--muted:#a9adbf;--faint:#8c90a4;
  --line:rgba(255,255,255,.075);--line-2:rgba(255,255,255,.14);
  --glass:#10121c;--glass-2:rgba(255,255,255,.05);--glass-hover:#171a27;
  --grad:linear-gradient(#9f8fff,#9f8fff);
  --grad-d:linear-gradient(#9f8fff,#9f8fff);
  /* Texto: --strong es el blanco de los títulos chicos y negritas; --prose/--soft/--soft-2/--label son los
     grises claros que ya tenía cada bloque (se conservan tal cual en oscuro; en claro pasan al gris 2). */
  --strong:#f1f1f6;--prose:#a9adbf;--soft:#c9cbd6;--soft-2:#dfe0e8;--label:#a9adbf;
  --link:#b9aeff;--link-line:rgba(185,174,255,.3);--lilac:#b9aeff;--check:#9f8fff;--focus:#9f8fff;
  --strike:rgba(140,144,164,.5);
  /* Degradés: el de texto y el de fondos con letra blanca son el de la marca en oscuro; en claro, una versión
     más profunda para que se lean sobre blanco. */
  --on-acc:#0b1026;--grad-text:linear-gradient(#8b8fa1,#8b8fa1);
  --grad-shimmer:linear-gradient(#8b8fa1,#8b8fa1);
  --grad-solid:linear-gradient(#f1f1f6,#f1f1f6);
  --grad-btn:linear-gradient(#f1f1f6,#f1f1f6);
  --on-grad:#0b1026;
  /* Superficies */
  --header-bg:rgba(9,10,18,.88);--menu-bg:#090a12;--panel:#10121c;--banner-bg:#10121c;--pop-bg:#171a27;
  --ghost-hover:#171a27;--featured-bg:#10121c;--ph:#171a27;
  /* Canales RGB para usar con distintas transparencias: --well = fondo de las ventanas de las maquetas,
     --ink = velos y pistas (blanco sobre oscuro, azul tinta sobre claro), --lila = bordes lila sueltos. */
  --well-rgb:13 15 24;--ink-rgb:255 255 255;--lila-rgb:255 255 255;--wave-rgb:159 143 255;
  /* Estados: verde (listo, en vivo), violeta (acceso anticipado), azul, ámbar (aviso) y rojo (conflicto). */
  --ok-rgb:127 195 162;--ok-text:#7fc3a2;--early-text:#cfcbff;--info-text:#b9aeff;
  --warn-rgb:217 169 83;--warn:#d9a953;--warn-text:#d9a953;
  --err-rgb:229 140 132;--err-text:#e58c84;
  --played:linear-gradient(#9f8fff,#9f8fff);
  --ig-1:currentColor;--ig-2:currentColor;
  /* Resplandores, ondas y sombras: en claro mucho más suaves, si no ensucian el blanco. */
  --aur-1:transparent;--aur-2:transparent;--aur-3:transparent;
  --orb-op:0;--waves-op:0;
  --sh-50:rgba(0,0,0,.35);--sh-60:rgba(0,0,0,.35);--sh-70:rgba(0,0,0,.35);--sh-80:rgba(0,0,0,.35);
  --card-sh:none;
  /* En escritorio el menú es parte de la barra: en oscuro conserva la sombra de siempre; en claro esa sombra
     dibujaba un rectángulo claro detrás de los enlaces, así que no va. */
  --nav-sh-desk:none;
  /* Qué se ve en cada tema (logo, ícono del botón luna/sol). */
  --ver-en-oscuro:inline;--ver-en-claro:none;
  --radius:12px;--radius-sm:8px;--pill:6px;
  /* v3 («escenario», DISENO.md): acento con vida, botón principal sólido en el acento, canto de luz arriba de
     lo que está sobre el lienzo, elevación teñida de navy para lo que flota, una sola luz de escena en la portada. */
  --acento:#9f8fff;--acento-suave:rgb(159 143 255 / .14);
  --primario:#6250f5;--primario-hover:#6b5afb;--on-primario:#ffffff;
  --tecla:inset 0 1px 0 rgb(255 255 255 / .16),0 1px 0 rgb(2 3 12 / .5);
  --canto:inset 0 1px 0 rgb(255 255 255 / .05);
  --borde-hover:rgba(255,255,255,.2);
  --elev:0 0 0 1px rgb(255 255 255 / .06),0 2px 4px rgb(2 3 12 / .4),0 24px 56px -12px rgb(2 3 12 / .75);
  --luz:rgb(159 143 255 / .12);--grano-op:.05;
  --curva:cubic-bezier(.2,.8,.2,1);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --wrap:1120px;--gutter:20px;
  --font:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:dark;
}
/* TEMA CLARO (elegido). Si se cambia este bloque, cambiar el de abajo igual. */
:root.light{
    color-scheme:light;
    --navy:#f7f7f4;--navy-2:#ffffff;--navy-3:#f0f0ec;
    --lavender:#3a33a8;--light:#0b1026;
    --text:#0b1026;--muted:#3d4157;--faint:#5c6074;
    --line:rgb(11 16 38 / .09);--line-2:rgb(11 16 38 / .16);
    --glass:#ffffff;--glass-2:rgb(11 16 38 / .035);--glass-hover:#f0f0ec;
    --strong:#0b1026;--prose:#3d4157;--soft:#3d4157;--soft-2:#3d4157;--label:#3d4157;
    --link:#4a36d9;--link-line:rgb(74 54 217 / .3);--lilac:#4a36d9;--check:#5440e6;--focus:#5440e6;
    --strike:rgba(92,96,116,.5);
    --grad:linear-gradient(#5440e6,#5440e6);--grad-d:linear-gradient(#5440e6,#5440e6);--on-acc:#ffffff;--grad-text:linear-gradient(#5c6074,#5c6074);
    --grad-shimmer:linear-gradient(#5c6074,#5c6074);
    --grad-solid:linear-gradient(#0b1026,#0b1026);
    --grad-btn:linear-gradient(#0b1026,#0b1026);
    --on-grad:#ffffff;
    --header-bg:rgb(247 247 244 / .9);--menu-bg:#f7f7f4;--panel:#ffffff;--banner-bg:#ffffff;--pop-bg:#ffffff;
    --ghost-hover:#f0f0ec;--featured-bg:#ffffff;--ph:#f0f0ec;
    --well-rgb:255 255 255;--ink-rgb:11 16 38;--lila-rgb:11 16 38;--wave-rgb:84 64 230;
    --ok-rgb:47 107 83;--ok-text:#2f6b53;--early-text:#3a33a8;--info-text:#4a36d9;
    --warn-rgb:138 90 0;--warn:#8a5a00;--warn-text:#8a5a00;
    --err-rgb:166 61 54;--err-text:#a63d36;
    --played:linear-gradient(#5440e6,#5440e6);
    --ig-1:currentColor;--ig-2:currentColor;
    --aur-1:transparent;--aur-2:transparent;--aur-3:transparent;
    --orb-op:0;--waves-op:0;
    --sh-50:rgb(11 16 38 / .1);--sh-60:rgb(11 16 38 / .1);--sh-70:rgb(11 16 38 / .1);--sh-80:rgb(11 16 38 / .1);
    --card-sh:none;
    --nav-sh-desk:none;
    --ver-en-oscuro:none;--ver-en-claro:inline;
    --acento:#5440e6;--acento-suave:rgb(84 64 230 / .08);--primario:#5440e6;--primario-hover:#4a36d9;--tecla:inset 0 1px 0 rgb(255 255 255 / .16),0 1px 2px rgb(11 16 38 / .18);--canto:0 1px 2px rgb(11 16 38 / .04);--borde-hover:rgb(11 16 38 / .24);--elev:0 0 0 1px rgb(11 16 38 / .05),0 2px 4px rgb(11 16 38 / .04),0 24px 56px -16px rgb(24 22 80 / .18);--luz:rgb(84 64 230 / .06);--grano-op:.035;
}
/* TEMA CLARO (sistema en claro y sin elección). Mismo bloque que el de arriba. */
@media (prefers-color-scheme:light){
  :root:not(.dark){
      color-scheme:light;
      --navy:#f7f7f4;--navy-2:#ffffff;--navy-3:#f0f0ec;
      --lavender:#3a33a8;--light:#0b1026;
      --text:#0b1026;--muted:#3d4157;--faint:#5c6074;
      --line:rgb(11 16 38 / .09);--line-2:rgb(11 16 38 / .16);
      --glass:#ffffff;--glass-2:rgb(11 16 38 / .035);--glass-hover:#f0f0ec;
      --strong:#0b1026;--prose:#3d4157;--soft:#3d4157;--soft-2:#3d4157;--label:#3d4157;
      --link:#4a36d9;--link-line:rgb(74 54 217 / .3);--lilac:#4a36d9;--check:#5440e6;--focus:#5440e6;
      --strike:rgba(92,96,116,.5);
      --grad:linear-gradient(#5440e6,#5440e6);--grad-d:linear-gradient(#5440e6,#5440e6);--on-acc:#ffffff;--grad-text:linear-gradient(#5c6074,#5c6074);
      --grad-shimmer:linear-gradient(#5c6074,#5c6074);
      --grad-solid:linear-gradient(#0b1026,#0b1026);
      --grad-btn:linear-gradient(#0b1026,#0b1026);
      --on-grad:#ffffff;
      --header-bg:rgb(247 247 244 / .9);--menu-bg:#f7f7f4;--panel:#ffffff;--banner-bg:#ffffff;--pop-bg:#ffffff;
      --ghost-hover:#f0f0ec;--featured-bg:#ffffff;--ph:#f0f0ec;
      --well-rgb:255 255 255;--ink-rgb:11 16 38;--lila-rgb:11 16 38;--wave-rgb:84 64 230;
      --ok-rgb:47 107 83;--ok-text:#2f6b53;--early-text:#3a33a8;--info-text:#4a36d9;
      --warn-rgb:138 90 0;--warn:#8a5a00;--warn-text:#8a5a00;
      --err-rgb:166 61 54;--err-text:#a63d36;
      --played:linear-gradient(#5440e6,#5440e6);
      --ig-1:currentColor;--ig-2:currentColor;
      --aur-1:transparent;--aur-2:transparent;--aur-3:transparent;
      --orb-op:0;--waves-op:0;
      --sh-50:rgb(11 16 38 / .1);--sh-60:rgb(11 16 38 / .1);--sh-70:rgb(11 16 38 / .1);--sh-80:rgb(11 16 38 / .1);
      --card-sh:none;
      --nav-sh-desk:none;
      --ver-en-oscuro:none;--ver-en-claro:inline;
    --acento:#5440e6;--acento-suave:rgb(84 64 230 / .08);--primario:#5440e6;--primario-hover:#4a36d9;--tecla:inset 0 1px 0 rgb(255 255 255 / .16),0 1px 2px rgb(11 16 38 / .18);--canto:0 1px 2px rgb(11 16 38 / .04);--borde-hover:rgb(11 16 38 / .24);--elev:0 0 0 1px rgb(11 16 38 / .05),0 2px 4px rgb(11 16 38 / .04),0 24px 56px -16px rgb(24 22 80 / .18);--luz:rgb(84 64 230 / .06);--grano-op:.035;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--strong)}
p a,li a,td a{text-decoration:underline;text-decoration-color:var(--link-line);text-underline-offset:3px}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.025em;margin:0 0 .5em;font-weight:500}
h1{font-size:clamp(2.4rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:1.3rem;font-weight:500;letter-spacing:-.01em;line-height:1.25}
p{margin:0 0 1em}
ul,ol{padding-left:1.2em}
strong{color:var(--strong);font-weight:500}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--strong);color:var(--navy);padding:8px 16px;border-radius:var(--pill)}
.skip:focus{left:12px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:820px}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--lavender);margin-bottom:16px}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--grad)}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:44em}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Buttons */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:var(--pill);font-weight:500;font-size:1rem;line-height:1;border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background-position .6s ease,background-color .2s ease,border-color .2s ease;white-space:nowrap;font-family:inherit;text-decoration:none}
.btn-primary{background:var(--grad-btn) 0 0/200% 100%;color:#fff;box-shadow:0 8px 30px -8px rgba(124,99,246,.7)}
.btn-primary:hover{color:#fff;background-position:100% 0;box-shadow:0 12px 40px -8px rgba(168,85,247,.85)}
.btn-primary::before{content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;background:conic-gradient(from var(--ba,0deg),#3B82F6,#A855F7,#7dd3fc,#c084fc,#3B82F6);filter:blur(12px);opacity:0;transition:opacity .3s ease}
.btn-primary:hover::before,.btn-primary:focus-visible::before{opacity:.8;animation:bspin 3.5s linear infinite}
@property --ba{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes bspin{to{--ba:360deg}}
.btn-ghost{background:var(--glass);color:var(--light);border-color:var(--line-2)}
.btn-ghost:hover{background:linear-gradient(var(--ghost-hover),var(--ghost-hover)) padding-box,var(--grad-d) border-box;color:var(--strong);border-color:transparent}
.btn-sm{min-height:40px;padding:10px 18px;font-size:.92rem}
.btn-block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.center .cta-row{justify-content:center}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--strong);flex-shrink:0}
.brand img.mark{width:32px;height:32px;border-radius:9px}
.brand img.letters{width:auto;height:17px}
.brand .tag{font-size:.75rem;font-weight:500;padding:3px 10px;border-radius:var(--pill);border:1px solid var(--line-2);color:var(--lavender);line-height:1.3}
.nav-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--glass);color:var(--strong);cursor:pointer}
.nav-toggle .bars{display:block;width:18px;height:2px;background:var(--strong);border-radius:2px;position:relative}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--strong);border-radius:2px}
.nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px}
.nav-menu{display:none;position:absolute;top:68px;left:0;right:0;background:var(--menu-bg);border-bottom:1px solid var(--line);box-shadow:0 30px 60px var(--sh-50);padding:12px var(--gutter) 24px;max-height:calc(100vh - 68px);overflow-y:auto}
.nav-open .nav-menu{display:block}
.nav-menu ul{list-style:none;margin:0;padding:0}
.nav-links>li>a,.nav-links>li>button{display:flex;width:100%;align-items:center;justify-content:space-between;padding:12px 4px;color:var(--light);font-weight:500;background:none;border:0;font:inherit;font-weight:500;cursor:pointer;text-align:left}
.dropdown-panel{padding:0 0 8px 12px}
.nav-links .dropdown-panel{display:grid;grid-template-rows:0fr;padding:0;transition:grid-template-rows .3s ease}
.nav-links .has-dropdown.open>.dropdown-panel{grid-template-rows:1fr}
.nav-links .dd-in{overflow:hidden;min-height:0;padding-left:8px}
.nav-links .has-dropdown.open .dd-in{padding-bottom:10px}
.has-dropdown>button .caret{transition:transform .25s ease}
.has-dropdown.open>button .caret{transform:rotate(-135deg) translateY(-2px)}
.mega-item{display:flex!important;align-items:center;gap:12px;padding:8px 4px!important}
.mega-item .icon{width:34px;height:34px;border-radius:10px;margin:0;flex-shrink:0}
.mega-item .icon svg{width:17px;height:17px}
.mi-txt{display:block;min-width:0}
.mi-name{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;color:var(--strong);font-weight:500;font-size:.95rem;line-height:1.3}
.mi-badge{font-size:.64rem;font-weight:500;padding:2px 7px;border-radius:var(--pill);letter-spacing:.02em;line-height:1.3}
.mi-live{background:rgb(var(--ok-rgb) / .12);color:var(--ok-text);border:1px solid rgb(var(--ok-rgb) / .3)}
.mi-early{background:rgba(168,85,247,.14);color:var(--early-text);border:1px solid rgba(168,85,247,.35)}
.mega-foot{display:grid;gap:2px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.mega-foot a{padding:8px 4px!important;font-size:.92rem}
.mega-foot a span{color:var(--faint);font-weight:400}
.mega-foot .mega-all{color:var(--lilac)!important;font-weight:500}
.dropdown-panel a{display:block;padding:9px 4px;color:var(--muted)}
.dropdown-panel a:hover{color:var(--strong)}
.dropdown-panel .dd-desc{display:none}
.caret{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:8px;opacity:.7}
.nav-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding-top:16px;border-top:1px solid var(--line)}
.lang-switch{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--pill);border:1px solid var(--line);color:var(--muted);font-size:.9rem;font-weight:500}
.lang-switch:hover{color:var(--strong);border-color:var(--line-2)}
.login{color:var(--light);font-weight:500;padding:8px 10px}

/* El logo viene en dos archivos (letras blancas y azul marino): se dibujan los dos y se esconde el que no va. */
.solo-oscuro{display:var(--ver-en-oscuro)}
.solo-claro{display:var(--ver-en-claro)}
/* Íconos de producto: el degradé del trazo depende del tema (en claro, más profundo para que se vea). */
.ig1{stop-color:var(--ig-1)}.ig2{stop-color:var(--ig-2)}

/* El botón luna/sol: igual en todas las apps y sitios de TONTRIA. Muestra el tema al que se pasa
   (luna en claro, sol en oscuro). Va en la barra, también en el celular, para que no quede escondido en el menú. */
.boton-tema{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin-left:auto;padding:0;border-radius:9999px;border:1px solid var(--line-2);background:var(--glass);color:var(--muted);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;font:inherit;transition:color .2s ease,border-color .2s ease}
.boton-tema:hover{color:var(--strong);border-color:color-mix(in srgb,var(--violet) 55%,transparent)}
.boton-tema:active{transform:translateY(1px)}
.boton-tema:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:9999px}
.boton-tema svg{display:block}
.boton-tema .tema-luna{display:var(--ver-en-claro)}
.boton-tema .tema-sol{display:var(--ver-en-oscuro)}
.boton-tema + .nav-toggle{margin-left:0}

@media (min-width:1000px){
  .nav-toggle{display:none}
  .nav-menu{display:flex!important;position:static;background:none;border:0;box-shadow:var(--nav-sh-desk);padding:0;align-items:center;flex:1;max-height:none;overflow:visible}
  .nav-links{display:flex;align-items:center;gap:4px;margin-left:18px}
  .nav-links>li{position:relative}
  .nav-links>li>a,.nav-links>li>button{padding:10px 14px;border-radius:var(--pill);font-size:.95rem;color:var(--muted)}
  .nav-links>li>a:hover,.nav-links>li>button:hover,.nav-links>li>a[aria-current="page"]{color:var(--strong);background:var(--glass)}
  .dropdown-panel{position:absolute;top:calc(100% + 8px);left:-10px;width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line-2);box-shadow:0 30px 60px -20px var(--sh-60);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
  .dropdown-panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
  .has-dropdown:hover .dropdown-panel,.has-dropdown:focus-within .dropdown-panel,.has-dropdown.open .dropdown-panel{opacity:1;visibility:visible;transform:none}
  .dropdown-panel a{padding:10px 12px;border-radius:14px;color:var(--strong);font-weight:500;font-size:.95rem}
  .dropdown-panel a:hover{background:var(--glass-2)}
  .dropdown-panel .dd-desc{display:block;font-weight:400;font-size:.82rem;color:var(--faint);margin-top:2px;line-height:1.35}
  .nav-links .dropdown-panel{display:block;padding:12px}
  .nav-links .dd-in{display:grid;grid-template-columns:1fr 1fr;gap:4px;overflow:visible;padding:0!important}
  .mega-panel{width:min(780px,calc(100vw - 48px))!important;left:-24px!important}
  .mega-panel .dd-in{display:block}
  .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .mega-item{padding:12px!important;align-items:flex-start}
  .mega-item .icon{width:38px;height:38px}
  .mega-item:hover .icon{border-color:rgba(168,85,247,.5);box-shadow:0 0 18px -4px rgba(168,85,247,.6)}
  .mega-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px;padding:10px 0 0}
  .mega-foot a{padding:8px 12px!important}
  .has-dropdown:hover .mega-item,.has-dropdown.open .mega-item,.has-dropdown:focus-within .mega-item{animation:megaIn .35s cubic-bezier(.2,.8,.2,1) backwards}
  .mega-item:nth-child(2){animation-delay:.03s!important}.mega-item:nth-child(3){animation-delay:.06s!important}.mega-item:nth-child(4){animation-delay:.09s!important}
  .mega-item:nth-child(5){animation-delay:.12s!important}.mega-item:nth-child(6){animation-delay:.15s!important}.mega-item:nth-child(7){animation-delay:.18s!important}.mega-item:nth-child(8){animation-delay:.21s!important}
  @keyframes megaIn{from{opacity:0;transform:translateY(6px)}}
  .nav-actions{margin:0 0 0 auto;padding:0;border:0;flex-wrap:nowrap}
  .boton-tema{order:1;width:40px;height:40px;margin-left:0}
}
/* Con el botón luna/sol la barra de escritorio queda justa en algunos idiomas (es, fr, ja): los enlaces no se
   parten en dos renglones y se aprietan un poco. Entre 1000 y 1179 px, además, el selector de idioma muestra
   solo el globo (el nombre del idioma sigue en su etiqueta para lectores de pantalla). */
@media (min-width:1000px){
  .nav-links>li>a,.nav-links>li>button,.nav-actions>*{white-space:nowrap}
  .nav-links>li>a,.nav-links>li>button{padding:10px 12px}
}
@media (min-width:1000px) and (max-width:1179px){
  .nav{gap:10px}
  .nav-links{margin-left:4px;gap:0}
  .nav-links>li>a,.nav-links>li>button{padding:10px 8px;font-size:.9rem}
  .nav-actions{gap:4px}
  .lang-switch{padding:8px 10px}
  .lang-switch .lang-name{display:none}
  .login{padding:8px 6px}
  .nav-actions .btn-sm{padding:10px 14px}
}

/* Waves */
.waves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.waves svg{position:absolute;left:50%;width:2000px;max-width:none;transform:translateX(-50%);opacity:var(--waves-op)}
.waves .w-glow{filter:blur(18px);opacity:.75}
.waves .drift-a{animation:drift 18s ease-in-out infinite alternate}
.waves .drift-b{animation:drift 24s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translateX(-60px)}to{transform:translateX(60px)}}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--orb-op);pointer-events:none;z-index:0}
.orb-blue{background:#3B82F6}.orb-violet{background:#A855F7}

/* Sections */
section{position:relative}
.section{padding:88px 0}
.section-sm{padding:56px 0}
.section-head{max-width:760px;margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto}
.divider{border-top:1px solid var(--line)}

/* Hero */
.hero{position:relative;padding:72px 0 40px;overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:48px;align-items:center}
.hero h1{margin-bottom:20px}
.hero-note{font-size:.9rem;color:var(--faint);margin-top:14px}
.hero-note a{color:var(--muted)}
@media (min-width:1000px){.hero{padding:100px 0 64px}.hero-grid{grid-template-columns:1.1fr .9fr}}
.page-hero{padding:56px 0 40px}
@media (min-width:1000px){.page-hero{padding:72px 0 56px}}

/* Breadcrumbs */
.breadcrumbs{font-size:.88rem;color:var(--faint);margin-bottom:22px}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.breadcrumbs a{color:var(--muted);text-decoration:none}
.breadcrumbs a:hover{color:var(--strong)}

/* Cards & grids */
.grid{display:grid;gap:20px}
@media (min-width:700px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;padding:28px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--line);box-shadow:var(--card-sh);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .2s ease,transform .2s ease,background .2s ease}
.card:hover{border-color:var(--line-2);background:var(--glass-hover)}
a.card{display:block;color:inherit;text-decoration:none}
a.card:hover{transform:translateY(-3px)}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);margin-bottom:0}
.card .more{display:inline-block;margin-top:16px;font-weight:500;color:var(--lilac)}
.icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;background:linear-gradient(135deg,rgba(59,130,246,.25),rgba(168,85,247,.25));border:1px solid var(--line-2)}
.icon svg{width:22px;height:22px}
.glow-card{background:linear-gradient(var(--navy-2),var(--navy-2)) padding-box,var(--grad-d) border-box;border:1px solid transparent}

/* Steps */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:20px}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps>li{counter-increment:step;padding:28px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--line);box-shadow:var(--card-sh)}
.steps>li::before{content:counter(step);display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad-solid);color:var(--on-grad);font-weight:500;margin-bottom:16px}
.steps h3{margin-bottom:8px}
.steps p{color:var(--muted);margin:0}
.howto{counter-reset:h;list-style:none;padding:0;margin:0 0 1em}
.howto>li{counter-increment:h;position:relative;padding:0 0 22px 56px}
.howto>li::before{content:counter(h);position:absolute;left:0;top:-2px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:500;background:var(--glass-2);border:1px solid var(--line-2)}
.howto>li strong{display:block;margin-bottom:4px}
.howto>li p{margin:0;color:var(--muted)}

/* Feature split */
.split{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.split{grid-template-columns:1fr 1fr;gap:72px}.split.rev .split-media{order:-1}}
.checks{list-style:none;padding:0;margin:20px 0 0}
.checks li{position:relative;padding-left:32px;margin-bottom:12px;color:var(--muted)}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;background:var(--grad) ;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10'/%3E%3C/svg%3E");}
.checks li::after{content:"";position:absolute;left:7px;top:9px;width:6px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.checks li strong{color:var(--strong)}

/* Pricing */
.billing-toggle{display:inline-flex;padding:5px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--line-2);gap:4px;margin:4px auto 36px}
.billing-toggle button{min-height:42px;padding:8px 20px;border-radius:var(--pill);border:0;background:none;color:var(--muted);font:inherit;font-weight:500;cursor:pointer}
.billing-toggle button[aria-pressed="true"]{background:var(--grad-solid);color:#fff}
.billing-toggle .save{font-size:.75rem;font-weight:500;margin-left:6px;padding:2px 8px;border-radius:var(--pill);background:rgb(var(--ok-rgb) / .15);color:var(--ok-text)}
.plans{display:grid;gap:20px}
@media (min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{display:flex;flex-direction:column;padding:28px 24px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--line);box-shadow:var(--card-sh)}
.plan.featured{background:linear-gradient(var(--featured-bg),var(--featured-bg)) padding-box,var(--grad-d) border-box;border:1.5px solid transparent;box-shadow:0 30px 70px -30px rgba(168,85,247,.55)}
.plan h3{font-size:1.25rem;margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan .pop{font-size:.7rem;font-weight:500;padding:3px 10px;border-radius:var(--pill);background:var(--grad-solid);color:#fff;letter-spacing:.04em}
.plan .for{color:var(--faint);font-size:.9rem;min-height:2.6em;margin-bottom:14px}
.price{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.price .cur{font-size:.95rem;color:var(--muted);font-weight:500}
.price .amt{font-size:2.6rem;font-weight:500;letter-spacing:-.03em;line-height:1}
.price .per{color:var(--muted);font-size:.9rem}
.price-note{font-size:.82rem;color:var(--faint);min-height:1.4em;margin-bottom:18px}
.plan ul{list-style:none;padding:0;margin:18px 0 0;font-size:.94rem}
.plan .inherits{margin:18px 0 0;font-size:.94rem;font-weight:600;color:var(--strong)}
.plan ul.has-inherits{margin-top:10px}
.plan li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--muted)}
.plan li::before{content:"";position:absolute;left:2px;top:6px;width:6px;height:11px;border-right:2px solid var(--check);border-bottom:2px solid var(--check);transform:rotate(45deg)}
.plan li strong{color:var(--strong)}
.plan .btn{margin-top:auto}
.plan .btn-wrap{margin-top:22px}
.credits-box{margin-top:28px;display:grid;gap:20px}
@media (min-width:900px){.credits-box{grid-template-columns:1fr 1fr}}

/* Tables */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--glass);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:620px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--lavender);background:rgb(var(--ink-rgb) / .03)}
tbody th{font-weight:500;color:var(--strong)}
td{color:var(--muted)}
tr:last-child td,tr:last-child th{border-bottom:0}
.yes{color:var(--ok-text);font-weight:500}
.partial{color:var(--warn);font-weight:500}

/* FAQ */
.faq{display:grid;gap:12px}
.faq details{border-radius:14px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--card-sh);transition:border-color .2s ease,background .2s ease}
.faq details[open]{border-color:var(--line-2);background:var(--glass-hover)}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 24px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:1.08rem;font-weight:500;line-height:1.4;letter-spacing:0}
.faq summary::after{content:"";position:absolute;right:26px;top:26px;width:9px;height:9px;border-right:2px solid var(--lavender);border-bottom:2px solid var(--lavender);transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq .answer{padding:0 24px 22px;color:var(--muted)}
.faq .answer p:last-child{margin-bottom:0}

/* Prose (long-form pages & blog) */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:2em}
.prose h3{margin-top:1.6em}
.prose p,.prose li{color:var(--prose)}
.prose li{margin-bottom:.5em}
.prose blockquote{margin:1.5em 0;padding:16px 22px;border-left:3px solid var(--violet);background:var(--glass);border-radius:0 16px 16px 0;color:var(--lavender)}
.callout{padding:22px 24px;border-radius:14px;background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(168,85,247,.12));border:1px solid var(--line-2);margin:1.6em 0}
.callout p:last-child{margin:0}
.draft-banner{padding:14px 18px;border-radius:14px;background:rgb(var(--warn-rgb) / .1);border:1px solid rgb(var(--warn-rgb) / .35);color:var(--warn-text);margin-bottom:28px;font-size:.95rem}
.post-meta{color:var(--faint);font-size:.92rem;margin-bottom:12px}
.toc{padding:20px 24px;border-radius:14px;background:var(--glass);border:1px solid var(--line);margin:1.5em 0 2em}
.toc strong{display:block;margin-bottom:8px}
.toc ol{margin:0;color:var(--muted)}

/* CTA band */
.cta-band{position:relative;overflow:hidden;isolation:isolate;border-radius:14px;padding:64px 24px;text-align:center;background:linear-gradient(135deg,rgba(59,130,246,.22),rgba(168,85,247,.22));border:1px solid var(--line-2)}
.cta-band .waves{z-index:-1;opacity:.7}
@media (min-width:900px){.cta-band{padding:88px 48px}}

/* Footer */
.site-footer{margin-top:40px;border-top:1px solid var(--line);padding:56px 0 36px;background:linear-gradient(180deg,transparent,rgba(59,130,246,.05))}
.footer-grid{display:grid;gap:32px;grid-template-columns:repeat(2,1fr)}
.footer-brand{grid-column:1/-1}
@media (min-width:900px){.footer-grid{grid-template-columns:1.6fr repeat(4,1fr)}.footer-brand{grid-column:auto}}
.footer-brand p{color:var(--muted);font-size:.95rem;margin-top:14px;max-width:26em}
.site-footer h2{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:9px}
.site-footer li a{color:var(--muted);font-size:.95rem;text-decoration:none}
.site-footer li a:hover{color:var(--strong)}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:var(--faint);font-size:.88rem}

/* Blog */
.post-card h3{font-size:1.3rem}
.post-card .kicker{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--lilac);margin-bottom:10px;display:block}

/* 404 */
.notfound{min-height:60vh;display:grid;place-items:center;text-align:center}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.crumbs-bar{padding-top:24px;position:relative;z-index:2}
.crumbs-bar + .hero.page-hero{padding-top:8px}
.crumbs-bar .breadcrumbs{margin-bottom:0}
.nav-menu a,.site-footer a,.dropdown-panel a,.brand,.btn,.lang-switch,.login{text-decoration:none}
@media (max-width:350px){.brand .tag{display:none}.brand img.letters{height:15px;width:auto}.nav{gap:10px}}
@media (max-width:999px){.hero .waves{opacity:.55}}
.cta-band .cta-row{justify-content:center}
@media (max-width:640px){.hero-stack .mini{display:none}}

.site-header.nav-open{background:var(--menu-bg)}

/* ---------- Round 2: real demos ---------- */
.demo-pair,.demo-single,.assets-gallery{margin:0;padding:18px;border-radius:14px;background:linear-gradient(160deg,rgba(59,130,246,.14),rgba(168,85,247,.10) 60%,rgba(255,255,255,.02));border:1px solid var(--line-2);box-shadow:0 40px 80px -40px var(--sh-70)}
.demo-video{display:block;width:100%;height:auto;border-radius:14px;background:#05070f;object-fit:cover}
.demo-video.is-h{aspect-ratio:16/9}
.demo-video.is-v{aspect-ratio:9/16}
.dp-label{display:block;margin-top:8px;font-size:.78rem;font-weight:500;color:var(--muted);text-align:center;line-height:1.3}
.demo-cap{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.84rem;color:var(--muted)}
.real-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--pill);background:rgb(var(--ok-rgb) / .12);border:1px solid rgb(var(--ok-rgb) / .3);color:var(--ok-text);font-weight:500;font-size:.74rem;letter-spacing:.02em}
.real-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:rgb(var(--ok-rgb));box-shadow:0 0 8px rgb(var(--ok-rgb))}
.demo-single.ds-v{max-width:340px;margin-left:auto;margin-right:auto}
.ag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ag-grid img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:10px;background:#05070f}
@media (max-width:420px){.dp-grid{gap:8px}.demo-pair,.demo-single,.assets-gallery{padding:12px;border-radius:14px}.dp-label{font-size:.7rem}}

/* ---------- Growth content ---------- */

/* ---------- Social proof (marquee) ---------- */
.proof{overflow:hidden}
.proof-title{font-size:clamp(1.3rem,2.6vw,1.9rem);margin-bottom:28px}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:30px;flex-shrink:0;list-style:none;margin:0;padding:0 15px;animation:marquee 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
.pv{display:flex;flex-direction:column;align-items:center;width:112px;text-align:center}
.pv img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgb(var(--lila-rgb) / .18);margin-bottom:8px;background:var(--ph)}
.pv-name{font-size:.82rem;font-weight:500;color:var(--strong);line-height:1.25}
.pv-num{font-size:.75rem;color:var(--faint);margin-top:2px}
.label-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;list-style:none;padding:0;margin:34px 0 0}
.label-row li{display:flex;align-items:center;gap:10px;font-weight:500;color:var(--label);font-size:.98rem}
.label-row img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--ph)}
.proof-note{margin:18px 0 0;font-size:.78rem;color:var(--faint)}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none;justify-content:center}
  .marquee-track{flex-wrap:wrap;justify-content:center;flex-shrink:1;row-gap:20px;animation:none}
  .marquee-dup{display:none}
}

/* ---------- Language selector & banner ---------- */
.lang-dd{position:relative}
.lang-dd .lang-switch{background:none;font:inherit;font-size:.9rem;cursor:pointer}
.lang-dd .lang-switch .caret{margin-left:4px}
.lang-panel{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 0}
.lang-panel a{padding:6px 12px!important;border-radius:var(--pill);border:1px solid var(--line);color:var(--muted);font-size:.88rem}
.lang-panel a[aria-current="true"]{border-color:var(--violet);color:var(--strong)}
.lang-dd:not(.open) .lang-panel{display:none}
@media (min-width:1000px){
  .lang-dd:not(.open) .lang-panel{display:grid}
  .lang-panel{left:auto!important;right:0;width:230px!important;grid-template-columns:1fr!important;gap:2px!important;padding:8px!important}
  .lang-panel a{border:0;border-radius:10px;font-weight:500!important;color:var(--muted)!important;padding:9px 12px!important}
  .lang-panel a:hover{color:var(--strong)!important}
  .lang-panel a[aria-current="true"]{color:var(--strong)!important;background:var(--glass-2)}
}
.footer-langs{columns:2;column-gap:16px}
.lang-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:440px;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;border-radius:14px;background:var(--banner-bg);border:1px solid var(--line-2);box-shadow:0 24px 60px -20px var(--sh-70);font-size:.95rem}
.lang-banner a{flex:1;color:var(--strong);font-weight:500;text-decoration:none}
.lang-banner a:hover{color:var(--lilac)}
.lang-banner button{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:var(--glass);color:var(--strong);font-size:1.1rem;line-height:1;cursor:pointer}
@media (min-width:700px){.lang-banner{left:auto}}

/* ---------- Scripts: CJK & Devanagari ---------- */
:lang(zh) body,body:lang(zh){font-family:"Satoshi","PingFang SC","Hiragino Sans GB","Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif}
:lang(ja) body,body:lang(ja){font-family:"Satoshi","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif}
:lang(ko) body,body:lang(ko){font-family:"Satoshi","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;word-break:keep-all}
:lang(hi) body,body:lang(hi){font-family:"Satoshi","Kohinoor Devanagari","Noto Sans Devanagari","Nirmala UI","Mangal",sans-serif}
html:lang(zh) h1,html:lang(zh) h2,html:lang(zh) h3,html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3,html:lang(ko) h1,html:lang(ko) h2,html:lang(ko) h3{letter-spacing:0;line-height:1.25}
html:lang(ja) body{line-break:strict}
html:lang(hi) h1,html:lang(hi) h2,html:lang(hi) h3{letter-spacing:0;line-height:1.4}
html:lang(hi) body{line-height:1.75}
html:lang(zh) .eyebrow,html:lang(ja) .eyebrow,html:lang(ko) .eyebrow,html:lang(hi) .eyebrow{letter-spacing:.04em}
.split>*,.hero-grid>*,.grid>*{min-width:0}

/* =================== tontria.com components =================== */
.mt-12{margin-top:12px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-28{margin-top:28px}.pt-8{padding-top:8px}
.h-sm{font-size:1.6rem}.h3{font-size:1.3rem;font-weight:500;letter-spacing:-.01em;line-height:1.25;margin-bottom:10px}
.ext{display:inline-block;width:12px;height:12px;flex-shrink:0;opacity:.85}
.i-inline{display:inline-block;vertical-align:-2px;flex-shrink:0}
.narrow-box{max-width:820px;margin:0 auto}
.narrow-box .checks{max-width:680px;margin-left:auto;margin-right:auto}
.narrow-box .icon{margin-left:auto;margin-right:auto}
@media (min-width:1000px){.grid-5{grid-template-columns:repeat(5,1fr)}}
@media (min-width:700px) and (max-width:999px){.grid-5{grid-template-columns:repeat(2,1fr)}}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--pill);font-size:.74rem;font-weight:500;letter-spacing:.02em;line-height:1.3;margin-bottom:12px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%}
.badge-live{background:rgb(var(--ok-rgb) / .12);border:1px solid rgb(var(--ok-rgb) / .32);color:var(--ok-text)}
.badge-live::before{background:rgb(var(--ok-rgb));box-shadow:0 0 8px rgb(var(--ok-rgb))}
.badge-early{background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.4);color:var(--early-text)}
.badge-early::before{background:#c084fc;box-shadow:0 0 8px #c084fc}
.badge-soon{background:rgb(var(--lila-rgb) / .06);border:1px solid var(--line-2);color:var(--muted)}
.badge-soon::before{background:var(--faint)}
.card .icon+.badge{position:absolute;top:28px;right:24px;margin:0}

/* Product cards */
.product-card{display:flex!important;flex-direction:column}
.product-card .checks{margin-bottom:8px}
.product-card .more{margin-top:auto;padding-top:12px}
.card-mod{padding:22px 20px}
.card-mod h3{font-size:1.05rem}
.card-mod p{font-size:.92rem}
.card-mod .icon{width:40px;height:40px;border-radius:10px;margin-bottom:14px}
.trust-card h3{font-size:1.12rem}
.level-card:last-child{background:linear-gradient(var(--navy-2),var(--navy-2)) padding-box,var(--grad-d) border-box;border:1px solid transparent}

/* Example question chips */
.chips-label{text-align:center;font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:-16px 0 18px}
.chips{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px}
.chips li{display:inline-flex;align-items:flex-start;gap:9px;padding:11px 18px;border-radius:var(--pill);background:var(--glass);border:1px solid var(--line-2);color:var(--soft-2);font-weight:500;font-size:.98rem;line-height:1.35;max-width:100%}
.chips li svg{color:var(--lilac);margin-top:2px}
.chips li:nth-child(3n+1){border-color:rgba(59,130,246,.35)}
.chips li:nth-child(3n+2){border-color:rgba(168,85,247,.35)}

/* Ask TONTRIA mock */
.ask-mock{margin:0;border-radius:14px;background:linear-gradient(160deg,rgba(59,130,246,.16),rgba(168,85,247,.12) 60%,rgba(255,255,255,.02));border:1px solid var(--line-2);box-shadow:0 40px 80px -40px var(--sh-80),0 0 60px -30px rgba(168,85,247,.5);overflow:hidden}
.ask-top{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgb(var(--well-rgb) / .5);font-size:.92rem}
.ask-dot{width:10px;height:10px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px rgba(168,85,247,.9)}
.ask-tag{margin-left:auto;font-size:.72rem;font-weight:500;padding:3px 10px;border-radius:var(--pill);border:1px dashed rgb(var(--lila-rgb) / .4);color:var(--lavender);text-transform:uppercase;letter-spacing:.08em}
.ask-body{padding:18px}
.ask-q{margin:0 0 16px auto;max-width:88%;width:fit-content;padding:11px 16px;border-radius:14px 18px 4px 18px;background:var(--grad-solid);color:#fff;font-weight:500;font-size:.96rem;line-height:1.4}
.ask-a{display:flex;gap:10px;align-items:flex-start}
.ask-av{width:28px;height:28px;border-radius:8px;flex-shrink:0}
.ask-a>div{flex:1;min-width:0;padding:14px 16px;border-radius:4px 18px 18px 18px;background:rgb(var(--well-rgb) / .6);border:1px solid var(--line);font-size:.93rem;line-height:1.5}
.ask-a p{margin:0 0 8px;color:var(--soft)}
.ask-a ul{margin:0 0 10px;padding-left:1.1em;color:var(--muted)}
.ask-a li{margin-bottom:4px}
.ask-src{font-size:.78rem!important;color:var(--faint)!important}
.ask-acts{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.ask-act{font-size:.78rem;font-weight:500;padding:6px 11px;border-radius:var(--pill);background:var(--glass-2);border:1px solid var(--line-2);color:var(--strong)}
.ask-act-ext{border-style:dashed}
.ask-ok{display:flex;align-items:center;gap:6px;font-size:.8rem!important;color:var(--ok-text)!important;margin:0!important}
.ask-note{padding:10px 18px 14px;font-size:.76rem;color:var(--faint);text-align:center}

/* MGMT mock */
.mg-mock{margin:0;border-radius:14px;padding:18px;background:linear-gradient(160deg,rgba(59,130,246,.14),rgba(168,85,247,.10) 60%,rgba(255,255,255,.02));border:1px solid var(--line-2);box-shadow:0 40px 80px -40px var(--sh-80)}
.mock-bar{display:flex;gap:6px;margin-bottom:14px}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:rgb(var(--ink-rgb) / .18)}
.mg-ui{display:grid;grid-template-columns:auto 1fr;gap:12px}
.mg-nav{list-style:none;margin:0;padding:10px;border-radius:14px;background:rgb(var(--well-rgb) / .55);border:1px solid var(--line);font-size:.8rem;color:var(--faint);display:flex;flex-direction:column;gap:4px}
.mg-nav li{padding:6px 10px;border-radius:9px;white-space:nowrap}
.mg-nav li.on{background:var(--glass-2);color:var(--strong);font-weight:500}
.mg-main{min-width:0;padding:14px;border-radius:14px;background:rgb(var(--well-rgb) / .55);border:1px solid var(--line)}
.mg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mg-head small{display:block;font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.mg-head strong{font-size:.98rem;line-height:1.3;display:block;margin-top:2px}
.mg-pct{font-weight:500;font-size:1.1rem;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.mg-bar{height:6px;border-radius:6px;background:rgb(var(--ink-rgb) / .08);margin:10px 0 12px;overflow:hidden}
.mg-bar span{display:block;height:100%;border-radius:6px;background:var(--grad);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mg-list{list-style:none;margin:0;padding:0;font-size:.86rem;color:var(--muted)}
.mg-list li{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid var(--line)}
.mg-list li:last-child{border-bottom:0}
.mg-list i{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line-2);flex-shrink:0;position:relative}
.mg-list li.done{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--strike)}
.mg-list li.done i{background:var(--grad);border-color:transparent}
.mg-list li.done i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.mg-ask{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:linear-gradient(90deg,rgba(59,130,246,.18),rgba(168,85,247,.18));border:1px solid var(--line-2);font-size:.82rem;color:var(--strong);display:flex;gap:7px;align-items:center}
@media (max-width:520px){.mg-nav{display:none}.mg-ui{grid-template-columns:1fr}}

/* Heads-ups */
.heads{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.heads li{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;background:var(--glass);border:1px solid var(--line-2);font-weight:500}
.heads li svg{width:18px;height:18px;color:var(--warn)}
.heads li:nth-child(2n){margin-left:24px}
@media (max-width:520px){.heads li:nth-child(2n){margin-left:0}}

/* Misc blocks */
.connect{padding:36px 28px}
.connect .section-head{margin-bottom:0}
.mission{text-align:center;padding:44px 28px}
.mission .lead{margin:0 auto}
.facts{min-width:0}
.facts th{width:34%}
.demo-single{max-width:340px;margin-left:auto;margin-right:auto}
.demo-video{aspect-ratio:9/16}
.card .btn-sm{gap:6px}
.site-footer .small a{color:var(--muted)}
.hero .hero-note{font-size:.9rem;color:var(--faint);margin-top:16px}
.page-hero .hero-note{font-size:.9rem;color:var(--faint);margin-top:16px}
@media (max-width:420px){
  .btn{white-space:normal;text-align:center;line-height:1.2}
  .chips li{font-size:.92rem;padding:10px 14px}
  .card{padding:24px 20px}
  .card .icon+.badge{position:static;margin:0 0 12px}
}
.plans{text-align:left}
html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3{word-break:auto-phrase}

/* =================== Motion & product family (round 3) =================== */
/* Aurora background (transform-only animation, no filters) */
.aurora{position:absolute;inset:-10% -10% 0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{position:absolute;left:-15%;top:-25%;width:70vmax;height:70vmax;max-width:1100px;max-height:1100px;border-radius:50%;background:radial-gradient(closest-side,var(--aur-1),rgba(59,130,246,0));will-change:transform;animation:aur1 24s ease-in-out infinite alternate}
.aurora i:nth-child(2){left:auto;right:-20%;top:-35%;background:radial-gradient(closest-side,var(--aur-2),rgba(168,85,247,0));animation-name:aur2;animation-duration:28s}
.aurora i:nth-child(3){left:25%;top:20%;width:50vmax;height:50vmax;background:radial-gradient(closest-side,var(--aur-3),rgba(56,189,248,0));animation-name:aur3;animation-duration:32s}
@keyframes aur1{to{transform:translate3d(22%,12%,0) scale(1.15)}}
@keyframes aur2{to{transform:translate3d(-18%,16%,0) scale(1.2)}}
@keyframes aur3{0%{transform:translate3d(-10%,0,0) scale(.9)}100%{transform:translate3d(14%,-12%,0) scale(1.15)}}
.aurora-soft{opacity:.6}
.hero h1 .grad{background-image:var(--grad-shimmer);background-size:300% 100%;animation:shimmer 12s linear infinite}
@keyframes shimmer{to{background-position:300% 0}}
.hero-home{padding-bottom:92px}
@media (min-width:1000px){.hero-home{padding-bottom:120px}}

/* Waveform motif */
.eq{display:flex;align-items:flex-end;gap:3px}
.eq span{flex:1;min-width:2px;height:100%;border-radius:3px;background:linear-gradient(180deg,#c4b5fd,#3B82F6);transform-origin:bottom;transform:scaleY(var(--h));animation:eqb var(--t,1s) ease-in-out var(--d,0s) infinite alternate}
@keyframes eqb{from{transform:scaleY(calc(var(--h) * .22))}to{transform:scaleY(var(--h))}}
.hero-eq{position:absolute;left:0;right:0;bottom:0;height:72px;opacity:.3;z-index:0;padding:0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
@media (max-width:700px){.hero-eq{gap:2px;height:52px}}

/* Capabilities ticker */
.ticker{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgb(var(--ink-rgb) / .015);overflow:hidden}
.tk .marquee-track{gap:0;padding:0;animation-duration:55s}
.tk li{display:inline-flex;align-items:center;gap:12px;padding:0 22px;white-space:nowrap;font-weight:500;color:var(--lavender);font-size:1rem}
.tk-dot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(168,85,247,.8);flex-shrink:0}
@media (prefers-reduced-motion:reduce){.tk li{padding:4px 12px;font-size:.9rem}}

/* Stats (real facts only) */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:900px){.stats{grid-template-columns:repeat(4,1fr);gap:18px}}
.stats li{padding:24px 18px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--line);box-shadow:var(--card-sh);text-align:center}
.stat-num{display:inline-block;font-size:clamp(2.5rem,6vw,3.6rem);font-weight:500;line-height:1;letter-spacing:-.03em;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat-label{display:block;margin-top:10px;color:var(--muted);font-size:.95rem;line-height:1.35}

/* Cards: cursor-following glow, tilt */
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s ease;background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(168,85,247,.17),rgba(59,130,246,.07) 40%,transparent 70%)}
.card:hover::before{opacity:1}
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.tilting{transition:transform .08s linear,border-color .2s ease,background .2s ease!important}

/* Product family bento */
.bento{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.t-xl,.t-wide,.t-full{grid-column:span 2}}
@media (min-width:1000px){.bento{grid-template-columns:repeat(4,minmax(0,1fr))}.t-xl{grid-column:span 2;grid-row:span 2}.t-wide{grid-column:span 2}.t-full{grid-column:1/-1}}
.tile{display:flex!important;flex-direction:column;gap:20px;overflow:hidden;padding:24px}
.tile:hover{border-color:rgba(168,85,247,.45)}
.tile-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tile .icon{margin:0}
.tile .badge{margin:0;position:static!important}
.tile h3{margin:16px 0 8px}
.tile p{font-size:.95rem}
.tile .more{margin-top:12px}
.tile-vis{margin-top:auto;min-width:0}
.t-xl .tile-vis{margin:auto 0}
@media (min-width:1000px){
  .t-wide,.t-full{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;gap:24px}
  .t-wide .tile-vis,.t-full .tile-vis{align-self:center;margin:0}
  .t-full{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}

/* Mockups — shared */
.mock{margin:0;position:relative;min-width:0}
figure.mock{padding:16px;border-radius:14px;background:linear-gradient(160deg,rgba(59,130,246,.15),rgba(168,85,247,.11) 60%,rgba(255,255,255,.02));border:1px solid var(--line-2);box-shadow:0 40px 80px -40px var(--sh-80),0 0 60px -30px rgba(168,85,247,.45)}
.mock-note{padding:12px 4px 0;font-size:.76rem;color:var(--faint);text-align:center}
.mock-win{border-radius:14px;background:rgb(var(--well-rgb) / .62);border:1px solid var(--line);padding:14px;font-size:.86rem;line-height:1.4}
.mw-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 10px;margin-bottom:12px;flex-wrap:wrap}
.mw-head small,.mock-card small{display:block;font-size:.66rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.mw-head strong{display:block;font-size:.95rem;line-height:1.3;margin-top:2px}
.mock-card{padding:12px;border-radius:10px;background:rgb(var(--ink-rgb) / .04);border:1px solid var(--line);min-width:0}
.mock-card strong{display:block}
.mock-ai{margin:10px 0 0;padding:9px 12px;border-radius:10px;background:linear-gradient(90deg,rgba(59,130,246,.18),rgba(168,85,247,.18));border:1px solid var(--line-2);font-size:.8rem;color:var(--strong);display:flex;gap:7px;align-items:flex-start}
.mock-ai svg{margin-top:2px}
.is-mini .mock-win{padding:12px;font-size:.8rem}
.is-mini .mock-bar{display:none}
.ck,.lb-list i,.an-tips i{position:relative;width:16px;height:16px;border-radius:5px;flex-shrink:0;box-shadow:inset 0 0 0 1.5px rgb(var(--lila-rgb) / .3)}
.lb-list i::before,.an-tips i::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad)}
.lb-list i::after,.an-tips i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}

/* Clips: a horizontal video becomes vertical clips */
.cm-stage{position:relative;aspect-ratio:4/3.15}
.cm-wide{position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line-2)}
.cm-scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(55% 85% at 28% 0%,rgba(59,130,246,.6),transparent 62%),radial-gradient(50% 85% at 74% 0%,rgba(168,85,247,.6),transparent 62%),linear-gradient(180deg,#151b40,#070b1c)}
.cm-fig{position:absolute;bottom:14%;left:50%;width:12%;height:52%;transform:translateX(-50%)}
.cm-fig::before{content:"";position:absolute;left:28%;top:0;width:44%;aspect-ratio:1;border-radius:50%;background:#dcd6ff}
.cm-fig::after{content:"";position:absolute;left:4%;right:4%;top:30%;bottom:0;border-radius:42% 42% 8px 8px;background:linear-gradient(#6d5bd0,#2a2466)}
.cm-fig.f1{left:22%;height:42%;opacity:.5}.cm-fig.f3{left:78%;height:45%;opacity:.5}
.cm-eq{position:absolute;left:0;right:0;bottom:0;height:15%;display:flex;align-items:flex-end;gap:2px;padding:0 6px;opacity:.55}
.cm-eq span{flex:1;height:100%;border-radius:2px;background:linear-gradient(#c4b5fd,#3B82F6);transform-origin:bottom;transform:scaleY(var(--h));animation:eqb 1.1s ease-in-out infinite alternate}
.cm-eq span:nth-child(3n){animation-delay:-.4s;animation-duration:.9s}.cm-eq span:nth-child(3n+1){animation-delay:-.75s;animation-duration:1.3s}
.cm-tag{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;font-size:.64rem;font-weight:500;padding:3px 8px;border-radius:var(--pill);background:rgba(7,11,28,.75);color:#fff}
.cm-crop{position:absolute;top:0;bottom:0;left:34.2%;width:31.6%;border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 999px rgba(7,11,28,.5);animation:crop 9s ease-in-out infinite}
.cm-crop em{position:absolute;top:6px;left:50%;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-size:.58rem;font-weight:500;padding:2px 7px;border-radius:var(--pill);background:var(--grad);color:#fff}
@keyframes crop{0%{transform:translateX(-85%)}22%{transform:translateX(55%)}40%,100%{transform:none}}
.cm-phones{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4%}
.cm-phone{position:relative;width:22%;aspect-ratio:9/16;border-radius:10px;overflow:hidden;border:2px solid rgba(233,224,255,.4);box-shadow:0 18px 40px -12px rgba(0,0,0,.85);animation:phone 9s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--p) * .16s)}
.cm-phone .cm-fig{width:58%;height:44%;bottom:30%}
.cm-phone:nth-child(2) .cm-scene{background-position:30% 0,60% 0,0 0;filter:hue-rotate(25deg)}
.cm-phone:nth-child(3) .cm-scene{filter:hue-rotate(-25deg)}
.cm-chip{position:absolute;top:6px;left:6px;font-size:.52rem;font-weight:500;padding:2px 6px;border-radius:var(--pill);background:rgba(7,11,28,.7);color:#fff}
.cm-cap{position:absolute;left:5%;right:5%;bottom:9%;text-align:center;font-size:.6rem;font-weight:500;line-height:1.15;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.cm-cap b{font-weight:500;animation:kara 9s linear infinite;animation-delay:calc(3.8s + var(--w) * .38s)}
@keyframes kara{0%,4%{color:#fde047}7%,100%{color:#fff}}
@keyframes phone{0%,26%{opacity:0;transform:translateY(-62%)}38%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(6%)}}
.cm-ready{position:absolute;right:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;font-size:.64rem;font-weight:500;padding:3px 9px;border-radius:var(--pill);background:rgba(74,222,128,.18);border:1px solid rgba(74,222,128,.4);color:#bbf7d0;animation:pop9 9s ease infinite}
@keyframes pop9{0%,40%{opacity:0;transform:translateY(4px)}46%,88%{opacity:1;transform:none}100%{opacity:0}}

/* Ask TONTRIA mini (bento) */
.ai-mini{display:flex;flex-direction:column;gap:8px;font-size:.82rem;line-height:1.4}
.am-q{margin:0 0 0 auto;max-width:88%;padding:9px 13px;border-radius:14px 14px 4px 14px;background:var(--grad-solid);color:#fff!important;font-weight:500;animation:amIn 9s ease infinite}
.am-a{position:relative;padding:10px 13px;border-radius:4px 14px 14px 14px;background:rgb(var(--well-rgb) / .62);border:1px solid var(--line);max-width:94%;min-height:40px}
.am-a ul{margin:0;padding-left:1.1em;color:var(--muted)}
.am-a li{margin:2px 0;animation:amLi 9s ease infinite}
.am-a li:nth-child(2){animation-name:amLi2}
.am-dots,.ask-typing{display:flex;gap:4px;opacity:0;pointer-events:none}
.am-dots{position:absolute;left:13px;top:16px;animation:amDots 9s infinite}
.am-dots i,.ask-typing i{width:6px;height:6px;border-radius:50%;background:var(--lavender);animation:dot 1s ease-in-out infinite}
.am-dots i:nth-child(2),.ask-typing i:nth-child(2){animation-delay:.15s}.am-dots i:nth-child(3),.ask-typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.am-ok{margin:0!important;font-size:.74rem!important;color:var(--ok-text)!important;display:flex;gap:6px;align-items:center;animation:amOk 9s ease infinite}
@keyframes amIn{0%{opacity:0;transform:translateY(6px)}5%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes amDots{0%,7%{opacity:0}9%,21%{opacity:1}23%,100%{opacity:0}}
@keyframes amLi{0%,23%{opacity:0;transform:translateY(4px)}27%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes amLi2{0%,31%{opacity:0;transform:translateY(4px)}35%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes amOk{0%,40%{opacity:0}45%,94%{opacity:1}100%{opacity:0}}

/* Ask TONTRIA hero chat: played by site.js (typing, thinking dots). Without JS it fades in once. */
.ask-a{position:relative}
.ask-typing{position:absolute;left:38px;top:0;padding:13px 15px;border-radius:4px 18px 18px 18px;background:rgb(var(--well-rgb) / .6);border:1px solid var(--line);transition:opacity .2s ease}
.ask-typing.on{opacity:1}
[data-seq] [data-s]{animation:seqIn .5s ease 1.3s backwards}
[data-seq] [data-s=think]{animation:none}
@keyframes seqIn{from{opacity:0;transform:translateY(6px)}}
[data-seq] li[data-s=tick]{animation:none}
[data-seq] li[data-s=tick] i,[data-seq] li[data-s=tick] i::after{animation:seqIn .3s ease calc(1.1s + var(--k) * .35s) backwards}
.seq-armed [data-s],.seq-armed li[data-s=tick] i,.seq-armed li[data-s=tick] i::after{animation:none}
.seq-armed [data-s]{transition:opacity .35s ease,transform .35s ease}
.seq-armed .s-off{opacity:0;transform:translateY(6px)}
.seq-armed li[data-s=tick]{transition:color .3s ease}
.seq-armed .mg-list li i{transition:background .25s ease,border-color .25s ease}
.tw-on{color:transparent!important}
.tw-on :not(.tw-o){color:transparent!important}
.tw-o{position:absolute;inset:0;pointer-events:none;white-space:pre-wrap;overflow:hidden}
.tw-o::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;background:currentColor;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mg-list li.next i{border-color:var(--check);animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(168,85,247,.6)}80%,100%{box-shadow:0 0 0 7px rgba(168,85,247,0)}}
.mg-ask.glow{box-shadow:0 0 0 1px rgba(168,85,247,.5),0 0 24px -4px rgba(168,85,247,.7)}
.mg-ask{transition:box-shadow .5s ease,opacity .35s ease,transform .35s ease}

/* Labels: delivery checklist */
.lb-ready{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:500;padding:4px 9px;border-radius:var(--pill);background:rgb(var(--ok-rgb) / .14);border:1px solid rgb(var(--ok-rgb) / .35);color:var(--ok-text);animation:lbReady 8s ease infinite}
@keyframes lbReady{0%,36%{opacity:0;transform:translateY(4px)}42%,92%{opacity:1;transform:none}100%{opacity:0}}
.lb-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lb-list li{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:10px;background:rgb(var(--ink-rgb) / .035);border:1px solid var(--line);color:var(--soft)}
.lb-list i::before,.lb-list i::after{animation:fillIn 8s ease infinite;animation-delay:calc(var(--i) * .45s)}
@keyframes fillIn{0%,6%{opacity:0;transform:translateY(4px)}12%,92%{opacity:1}100%{opacity:0}}
.lb-list i::after{animation-name:checkIn}
@keyframes checkIn{0%,8%{opacity:0}14%,92%{opacity:1}100%{opacity:0}}
.lb-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
@media (max-width:520px){.lb-row{grid-template-columns:1fr}}
.lb-row strong{font-size:.86rem;margin:2px 0 6px}
.lb-demos,.lb-src{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.lb-demos li{display:flex;align-items:center;gap:7px}
.lb-play{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--glass-2);color:var(--strong);flex-shrink:0}
.lb-play svg{width:10px;height:10px}
.lb-wave{flex:1;height:16px;background:repeating-linear-gradient(90deg,rgb(var(--wave-rgb) / .75) 0 2px,transparent 2px 4px);-webkit-mask:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent);mask:linear-gradient(180deg,transparent 0,#000 20%,#000 80%,transparent);opacity:.6;animation:wpulse 2.4s ease-in-out infinite;animation-delay:calc(var(--s) * -.8s)}
@keyframes wpulse{50%{opacity:1;transform:scaleY(.7)}}
.lb-src li{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--muted)}
.lb-src li span:first-child{flex:0 0 46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-meter{flex:1;height:6px;border-radius:6px;background:rgb(var(--ink-rgb) / .08);overflow:hidden}
.lb-meter b{display:block;height:100%;background:var(--grad);transform-origin:left;animation:meter 8s ease infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes meter{0%{transform:scaleX(0)}30%,92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* Management: unified calendar + settlement */
.cal-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;font-size:.62rem;color:var(--faint);font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,28px);gap:5px 4px;padding:5px 0;border-radius:10px;background:repeating-linear-gradient(90deg,rgb(var(--ink-rgb) / .03) 0 calc(20% - 2px),transparent calc(20% - 2px) 20%)}
.ev{grid-column:var(--c);grid-row:var(--r);display:flex;align-items:center;padding:0 6px;border-radius:7px;font-size:.64rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;animation:evIn 8s ease infinite;animation-delay:calc(var(--i) * .35s)}
.ev-show{background:linear-gradient(90deg,#2563eb,#4f46e5)}.ev-live{background:linear-gradient(90deg,#be185d,#9333ea)}
.ev-release{background:linear-gradient(90deg,#7c3aed,#a855f7)}.ev-post{background:linear-gradient(90deg,#0e7490,#0891b2)}
.ev-brand{background:linear-gradient(90deg,#b45309,#d97706)}
@keyframes evIn{0%,3%{opacity:0;transform:translateY(4px)}9%,92%{opacity:1;transform:none}100%{opacity:0}}
.mg-settle{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;margin-top:10px}
.mg-settle strong{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-top:2px}
.mg-settle .muted{font-size:.72rem}
.mg-shared{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:500;padding:5px 10px;border-radius:var(--pill);background:rgb(var(--ok-rgb) / .12);border:1px solid rgb(var(--ok-rgb) / .3);color:var(--ok-text);animation:pop9 8s ease infinite}

/* Studio: waveform with comments */
.st-tabs{display:flex;gap:4px;flex-wrap:wrap}
.st-tabs span{font-size:.64rem;font-weight:500;padding:3px 8px;border-radius:var(--pill);border:1px solid var(--line);color:var(--faint)}
.st-tabs .on{background:var(--glass-2);color:var(--strong);border-color:var(--line-2)}
.st-wave{position:relative;height:70px;margin:46px 0 12px}
.is-mini .st-wave{height:56px;margin-top:42px}
.st-bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.st-bars span{flex:1;min-width:1px;height:100%;border-radius:2px;background:rgb(var(--lila-rgb) / .2);transform:scaleY(var(--h))}
.st-played span{background:var(--played)}
.st-played{clip-path:inset(0 42% 0 0);animation:played 10s linear infinite}
@keyframes played{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.st-head{position:absolute;top:-4px;bottom:-4px;left:0;width:100%;pointer-events:none;transform:translateX(58%);animation:head 10s linear infinite}
.st-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--strong);box-shadow:0 0 8px var(--strong)}
@keyframes head{from{transform:translateX(0)}to{transform:translateX(100%)}}
.st-pin{position:absolute;left:calc(var(--x) * 100%);bottom:-8px;z-index:2}
.st-pin em{animation:pin 10s ease calc(var(--x) * 10s) infinite backwards}
.st-pin b{position:absolute;left:-14px;bottom:0;font-size:.56rem;font-weight:500;padding:1px 5px;border-radius:var(--pill);background:#fde047;color:#1f1300}
.st-pin em{position:absolute;bottom:84px;left:-16px;width:max-content;max-width:190px;font-style:normal;font-size:.68rem;line-height:1.3;padding:6px 9px;border-radius:10px 10px 10px 3px;background:var(--pop-bg);border:1px solid var(--line-2);color:var(--soft);box-shadow:0 10px 24px -10px var(--sh-80)}
.is-mini .st-pin em{bottom:68px;max-width:150px}
.st-pin + .st-pin em{left:auto;right:-16px;border-radius:10px 10px 3px 10px}
.st-pin em strong{color:var(--strong)}
@keyframes pin{0%{opacity:0;transform:translateY(6px)}4%,30%{opacity:1;transform:none}36%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.st-pin:not(.st-pin + .st-pin) em{display:none}}
.st-foot{display:flex;flex-wrap:wrap;gap:6px}
.st-link,.st-plays{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:500;padding:4px 9px;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--glass);color:var(--lavender)}
.st-plays{color:var(--info-text);animation:pop9 10s ease infinite}

/* Producers: beats, sends, placements */
.pr-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pr-list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;border-radius:10px;background:rgb(var(--ink-rgb) / .035);border:1px solid var(--line)}
.pr-list li.on{border-color:rgba(168,85,247,.45);background:rgba(168,85,247,.08)}
.pr-play{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--glass-2);color:var(--strong);flex-shrink:0}
.pr-play svg{width:12px;height:12px}
.on .pr-play{background:var(--grad);color:#fff}
.pr-name{flex:1;min-width:0}
.pr-name strong{display:block;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-name small{display:block;font-size:.66rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-eq{display:none;gap:2px;align-items:flex-end;height:14px}
.on .pr-eq{display:flex}
.pr-eq i{width:3px;height:100%;border-radius:2px;background:#c084fc;transform-origin:bottom;animation:eqs .8s ease-in-out infinite alternate}
.pr-eq i:nth-child(2){animation-delay:-.3s}.pr-eq i:nth-child(3){animation-delay:-.55s}.pr-eq i:nth-child(4){animation-delay:-.15s}
@keyframes eqs{from{transform:scaleY(.25)}}
.pr-st{font-size:.64rem;font-weight:500;padding:3px 8px;border-radius:var(--pill);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.pr-sent{background:rgba(59,130,246,.16);color:var(--info-text)}
.pr-sent b{color:var(--strong);display:inline-block;animation:bump 3s ease infinite}
@keyframes bump{0%,100%{transform:none}}
.pr-hold{background:rgb(var(--warn-rgb) / .12);color:var(--warn-text)}
.pr-placed{background:rgb(var(--ok-rgb) / .14);color:var(--ok-text);animation:pop9 8s ease infinite}
.pr-split{margin-top:10px}
.pr-bar{display:flex;gap:3px;height:8px;margin-top:8px}
.pr-bar b{flex:1;border-radius:4px;background:var(--grad);transform-origin:left;animation:meter 8s ease infinite}
.pr-bar b+b{background:linear-gradient(90deg,#A855F7,#ec4899);animation-delay:.4s}
.is-mini .pr-name small{display:none}

/* Law: contract review with flagged clauses */
.lw-chip{font-size:.64rem;font-weight:500;padding:3px 9px;border-radius:var(--pill);white-space:nowrap;align-self:flex-start;background:rgb(var(--warn-rgb) / .12);color:var(--warn-text)}
.lw-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.lw-list li{--c:var(--warn-text);--cr:var(--warn-rgb);padding:9px 11px;border-radius:10px;background:rgb(var(--ink-rgb) / .035);border:1px solid var(--line);border-left:3px solid var(--c);animation:lwIn 9s ease infinite;animation-delay:calc(.3s + var(--i) * .55s)}
.lw-list li.lw-hi{--c:var(--err-text);--cr:var(--err-rgb)}
@keyframes lwIn{0%,4%{opacity:0;transform:translateY(6px)}10%,94%{opacity:1;transform:none}100%{opacity:0}}
.lw-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lw-top small{font-size:.62rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.lw-tag{font-size:.64rem;font-weight:500;padding:2px 8px;border-radius:var(--pill);white-space:nowrap;background:rgb(var(--cr) / .14);color:var(--c)}
.lw-q{margin:5px 0 0;font-size:.78rem;line-height:1.5;color:var(--muted)}
.lw-q mark{color:var(--strong);background:rgb(var(--cr) / .2);padding:1px 3px;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lw-fix{margin-top:10px;animation:pop9 9s ease infinite;animation-delay:.4s}
.lw-fix small{display:flex;align-items:center;gap:5px;color:var(--info-text)}
.lw-fix strong{font-size:.82rem;line-height:1.4;margin:5px 0 4px}
.lw-src{font-size:.66rem;color:var(--faint)}
.is-mini .lw-q{font-size:.72rem}

/* Publishers: registrations by territory */
.pb-legend{display:flex;gap:10px;font-size:.66rem;color:var(--muted)}
.pb-legend span{display:inline-flex;align-items:center;gap:5px}
.pb-legend .pb-c{width:9px;height:9px;animation:none}
.pb-table{display:grid;gap:7px}
.pb-row{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(5,minmax(0,1fr));align-items:center;gap:4px}
.pb-head span{font-size:.6rem;font-weight:500;color:var(--faint);text-align:center;letter-spacing:.06em}
.pb-w{font-size:.78rem;font-weight:500;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-c{justify-self:center;display:inline-block;width:14px;height:14px;border-radius:50%}
.pb-reg{background:rgb(var(--ok-rgb));box-shadow:0 0 8px rgb(var(--ok-rgb) / .55);animation:reg 9s ease infinite;animation-delay:calc(var(--i) * .1s)}
.pb-pend{box-shadow:inset 0 0 0 2px var(--warn)}
.pb-conf{background:rgb(var(--err-rgb));animation:conf 1.6s ease-out infinite}
@keyframes reg{0%,5%{background:transparent;box-shadow:inset 0 0 0 2px var(--warn)}12%,92%{background:rgb(var(--ok-rgb));box-shadow:0 0 8px rgb(var(--ok-rgb) / .55)}100%{background:transparent;box-shadow:inset 0 0 0 2px var(--warn)}}
@keyframes conf{0%{box-shadow:0 0 0 0 rgb(var(--err-rgb) / .7)}80%,100%{box-shadow:0 0 0 8px rgb(var(--err-rgb) / 0)}}
.pb-conflict{margin:12px 0 0;padding:8px 10px;border-radius:10px;background:rgb(var(--err-rgb) / .1);border:1px solid rgb(var(--err-rgb) / .3);color:var(--err-text);font-size:.76rem;display:flex;gap:6px;align-items:center}
.pb-writers{margin:6px 0 0;font-size:.74rem;color:var(--muted)}

/* Analytics: catalog health + YouTube */
.an-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.an-grid{grid-template-columns:minmax(0,1fr)}}
.an-ring{position:relative;width:96px;height:96px;margin:10px auto}
.an-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.an-track{fill:none;stroke:rgb(var(--ink-rgb) / .08);stroke-width:10}
.an-val{fill:none;stroke:url(#ig);stroke-width:10;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--v));animation:gauge 8s ease infinite}
@keyframes gauge{0%{stroke-dashoffset:100}30%,92%{stroke-dashoffset:calc(100 - var(--v))}100%{stroke-dashoffset:calc(100 - var(--v));opacity:.4}}
.an-ring>span{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.an-ring strong{font-size:1.7rem;font-weight:500;line-height:1}
.an-ring small{font-size:.58rem;color:var(--faint);text-transform:none;letter-spacing:0;font-weight:500}
.an-issues{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.72rem;color:var(--warn-text)}
.an-issues li{display:flex;gap:6px;align-items:baseline;animation:seqIn .4s ease backwards;animation-delay:calc(1s + var(--i) * .3s)}
.an-issues li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn);flex-shrink:0;transform:translateY(-1px)}
.an-thumbs{display:flex;gap:6px;margin:8px 0 10px}
.an-th{flex:1;aspect-ratio:16/9;border-radius:7px;position:relative;overflow:hidden;background:linear-gradient(135deg,#1e3a8a,#6d28d9)}
.an-th.b{background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 0 0 2px rgb(var(--ok-rgb));animation:winner 8s ease infinite}
@keyframes winner{0%,40%{box-shadow:0 0 0 2px transparent}48%,92%{box-shadow:0 0 0 2px rgb(var(--ok-rgb))}100%{box-shadow:0 0 0 2px transparent}}
.an-th b{position:absolute;left:5px;right:5px;bottom:5px;height:4px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.an-th b::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform-origin:left;transform:scaleX(.42);animation:thA 8s ease infinite}
.an-th.b b::after{transform:scaleX(.78);animation-name:thB}
@keyframes thA{0%{transform:scaleX(0)}35%,92%{transform:scaleX(.42)}100%{transform:scaleX(.42)}}
@keyframes thB{0%{transform:scaleX(0)}38%,92%{transform:scaleX(.78)}100%{transform:scaleX(.78)}}
.an-tips{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.72rem;color:var(--soft)}
.an-tips li{display:flex;gap:7px;align-items:flex-start}
.an-tips i{width:14px;height:14px;margin-top:1px}
.an-tips i::after{left:4px;top:1px;width:4px;height:7px}
.an-tips i::before,.an-tips i::after{animation:fillIn 8s ease infinite;animation-delay:calc(1.2s + var(--i) * .5s)}
.an-tips i::after{animation-name:checkIn}
.an-yt small svg{vertical-align:-2px}

/* Example questions next to product features */
.ask-stack{padding:22px;border-radius:14px;background:linear-gradient(160deg,rgba(59,130,246,.13),rgba(168,85,247,.10));border:1px solid var(--line-2)}
.as-label{display:flex;align-items:center;gap:10px;font-weight:500;margin:0 0 14px}
.ask-stack ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ask-stack li{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:14px 18px 18px 4px;background:rgb(var(--well-rgb) / .6);border:1px solid var(--line);color:var(--soft-2);font-weight:500;line-height:1.4}
.ask-stack li:nth-child(2n){margin-left:24px;border-radius:14px 18px 4px 18px}
.ask-stack li svg{color:var(--lilac);margin-top:3px}

/* Footer */
.footer-ext{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px}
.footer-ext li{margin:0}
.footer-ext a{font-size:.88rem!important}

/* Scroll reveal (only below-the-fold elements are hidden, by site.js) */
.rv{transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)!important;transition-delay:var(--rd,0ms)!important}
.rv-off{opacity:0;transform:translateY(28px)}
.rv-off.rv-scale{transform:translateY(20px)}

/* Pause looping animations while off screen */
.anim-paused,.anim-paused *,.anim-paused ::before,.anim-paused ::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .rv-off{opacity:1;transform:none}
  [data-tilt]{transform:none!important}
  .btn-primary::before{display:none}
}
.tw-on{position:relative}

/* ==========================================================================================================
   Sistema de diseño v2 (DISENO.md): silencioso, preciso, caro. Este bloque va al final y pisa lo de arriba:
   botón sólido sin brillo, títulos en 500/400 con tracking negativo, superficies lisas con línea de 1 px, el
   degradé de la marca sólo en el logo y en líneas de 1 px, sin auroras, ondas ni orbes de fondo.
   ========================================================================================================== */
body{font-size:16px;line-height:1.625;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4{font-weight:500}
h1{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.07;letter-spacing:-.035em}
h2{font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.1;letter-spacing:-.03em;font-weight:400}
h3{font-size:1.125rem;line-height:1.45;letter-spacing:-.015em}
strong{font-weight:500}
:focus-visible{outline-offset:2px;border-radius:6px}
::selection{background:color-mix(in srgb,var(--focus) 24%,transparent)}
.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--faint);animation:none!important}
.eyebrow{font-size:11px;line-height:16px;letter-spacing:.06em;color:var(--faint);gap:0}
.eyebrow::before{display:none}
.lead{font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.6;max-width:36em}
.narrow{max-width:720px}
/* Botones */
.btn{min-height:44px;padding:0 20px;border-radius:10px;font-size:15px;line-height:1.1;letter-spacing:-.005em;transform:none!important;transition:background-color .15s cubic-bezier(.2,.7,.2,1),border-color .15s,color .15s}
.btn-primary,.btn-primary:hover{background:var(--strong);color:var(--navy);box-shadow:none}
.btn-primary:hover{background:color-mix(in srgb,var(--strong) 88%,var(--navy))}
.btn-primary::before{display:none}
.btn-ghost{background:var(--navy-2);color:var(--strong);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--navy-3);border-color:var(--line-2);color:var(--strong)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.cta-row{margin-top:32px}
/* Encabezado: casi opaco, logo a 22 px, producto en gris */
.site-header{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav{height:64px}
.brand{gap:8px}
.brand img.mark{width:22px;height:22px;border-radius:0}
.brand img.letters{height:13px}
.brand img.logo{width:auto;height:22px}
.brand .tag{display:flex;align-items:center;gap:10px;margin-left:4px;padding:0;border:0;border-radius:0;font-size:14px;font-weight:400;color:var(--faint)}
.brand .tag::before{content:"";width:1px;height:16px;background:var(--line-2)}
.nav-toggle{width:36px;height:36px;border-radius:8px;border:0;background:none}
.nav-toggle:hover{background:var(--navy-3)}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{width:16px;height:1.5px}
.nav-menu{top:64px;box-shadow:none}
.boton-tema{width:32px;height:32px;border-radius:8px;border:0;background:none;color:var(--faint);backdrop-filter:none;-webkit-backdrop-filter:none}
.boton-tema:hover{color:var(--strong);background:var(--navy-3);border-color:transparent}
.boton-tema:active{transform:none}
.boton-tema:focus-visible{border-radius:8px}
.boton-tema svg{width:16px;height:16px}
.lang-switch{border:0;padding:0 10px;min-height:32px;border-radius:8px;color:var(--faint);font-weight:400;font-size:14px}
.lang-switch:hover{background:var(--navy-3)}
.login{color:var(--muted);font-size:14px;border-radius:8px}
.login:hover{color:var(--strong);background:var(--navy-3)}
@media (min-width:1000px){
  .nav-links>li>a,.nav-links>li>button{border-radius:8px;font-size:14px;font-weight:400;padding:6px 10px}
  .nav-links>li>a:hover,.nav-links>li>button:hover,.nav-links>li>a[aria-current="page"]{background:var(--navy-3)}
  .dropdown-panel{border-radius:14px;background:var(--navy-2);box-shadow:0 1px 2px rgb(0 0 0 / .2),0 16px 40px -12px var(--sh-60)}
  .dropdown-panel a{border-radius:8px}
  .mega-item:hover .icon{border-color:var(--line-2);box-shadow:none}
  .boton-tema{width:32px;height:32px}
}
/* Fondos en movimiento: fuera */
.aurora,.waves,.orb,.hero-eq{display:none!important}
/* Secciones */
.section{padding:96px 0}
@media (max-width:700px){.section{padding:64px 0}}
.section-head{max-width:640px}
.hero{padding:64px 0 48px}
@media (min-width:1000px){.hero{padding:96px 0 72px}.hero-grid{grid-template-columns:1fr 1fr;gap:64px}}
/* Tarjetas: superficie lisa, línea de 1 px, radio 14, sin sombra ni vidrio */
.card,.steps>li,.plan,.faq details,.table-wrap{background:var(--navy-2);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.card{padding:24px}
.card::before{display:none}
a.card:hover{transform:none}
.card .more{color:var(--link)}
.icon{width:36px;height:36px;border-radius:10px;margin-bottom:20px;background:var(--navy-3);border:1px solid var(--line);color:var(--strong)}
.icon svg{width:18px;height:18px}
.glow-card,.level-card:last-child{background:var(--navy-2);border:1px solid var(--line-2)}
.steps>li::before{content:counter(step,decimal-leading-zero);display:block;width:auto;height:auto;border-radius:0;background:none;color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums;margin-bottom:20px}
.howto>li::before{background:none;border:1px solid var(--line-2);font-size:13px;color:var(--muted);width:28px;height:28px}
.checks li{padding-left:26px}
.checks li::before{left:4px;top:7px;width:5px;height:10px;border-radius:0;background:none;-webkit-mask:none;mask:none;border-right:1.5px solid var(--check);border-bottom:1.5px solid var(--check);transform:rotate(45deg)}
.checks li::after{display:none}
.plan li::before{border-right-width:1.5px;border-bottom-width:1.5px}
/* Precios */
.billing-toggle{padding:3px;border-radius:10px;gap:2px;background:var(--navy-2)}
.billing-toggle button{min-height:34px;padding:0 14px;border-radius:8px;font-size:14px}
.billing-toggle button[aria-pressed="true"]{background:var(--navy-3);color:var(--strong)}
.billing-toggle .save{background:none;border:1px solid rgb(var(--ok-rgb) / .32);font-size:11px;padding:1px 6px}
.plan.featured{background:var(--navy-2);border:1px solid var(--focus);box-shadow:none}
.plan .pop{background:none;color:var(--focus);border:1px solid color-mix(in srgb,var(--focus) 40%,transparent);font-size:11px;padding:1px 6px}
.price .amt{font-size:2.5rem;font-variant-numeric:tabular-nums}
thead th{font-size:12px;letter-spacing:0;text-transform:none;color:var(--faint);background:none}
/* Preguntas: renglones separados por una línea */
.faq{gap:0;border-top:1px solid var(--line)}
.faq details,.faq details[open]{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.faq summary{padding:20px 40px 20px 0}
.faq summary h3{font-size:1rem}
.faq summary::after{right:6px;width:7px;height:7px;border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint)}
.faq .answer{padding:0 0 20px}
/* Paneles y cierre */
.callout{background:var(--navy-3);border:1px solid var(--line)}
.cta-band{background:var(--navy-3);border:1px solid var(--line);border-radius:14px}
.cta-band::before{content:"";position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,#3B82F6,#6D6AF8,#A855F7);opacity:.8;z-index:1}
.site-footer{background:none}
.site-footer h2,.site-footer h3{font-size:11px;line-height:16px;letter-spacing:.06em;font-weight:500;color:var(--faint)}
/* Maquetas: lisas, sin resplandores */
.demo-pair,.demo-single,.assets-gallery,.ask-mock,.mg-mock,figure.mock,.ask-stack{background:var(--navy-2);border:1px solid var(--line);box-shadow:none}
.mg-ask,.mock-ai{background:var(--navy-3);border:1px solid var(--line)}
.ev-show{background:#4f46d8}.ev-live{background:#8a4b7a}.ev-release{background:#5b52c9}.ev-post{background:#2f6b6b}.ev-brand{background:#8a5a00}
.pr-bar b+b{background:var(--ok-text)}
.eq span,.cm-eq span{background:var(--focus)}
.an-th{background:#2a2f55}.an-th.b{background:#3b3f8f}
.rv-off.rv-scale{transform:translateY(8px)}
.hero h1 .grad{background:none;animation:none}
.stat-num,.mg-pct{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--strong)}
.ask-q,.am-q{background:var(--navy-3);color:var(--strong)!important;border:1px solid var(--line)}
.cm-crop em,.on .pr-play{color:var(--on-acc)}
.ask-dot,.tk-dot{box-shadow:none}
.mi-early{background:none;color:var(--early-text);border:1px solid color-mix(in srgb,var(--early-text) 32%,transparent)}
.mi-live{background:none}

/* ==========================================================================================================
   Sistema de diseño v3 («escenario», DISENO.md). Va al final y pisa la v2: títulos en 700 apretados, el botón
   principal sólido en el acento con un canto de luz (parece una tecla, no brilla), superficies con una luz de
   1 px arriba en oscuro, elevación teñida de navy para lo que flota, datos en letra de máquina, y una sola luz
   de escena quieta arriba de la portada. Sin brillos, sin texto en degradé, sin manchas desenfocadas.
   ========================================================================================================== */
/* Letra: contraste de escala. Titulares 700, apretados; texto 400 aireado. */
h1,h2{font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.02;letter-spacing:-.04em}
h2{font-size:clamp(1.875rem,4vw,3.25rem);line-height:1.04;letter-spacing:-.04em}
h3{letter-spacing:-.015em}
p{text-wrap:pretty}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.032em;line-height:1.1}
.h-sm{letter-spacing:-.032em}
.lead{font-size:clamp(1.0625rem,1.4vw,1.125rem);line-height:1.65;letter-spacing:-.005em}
/* Sobretítulos: Satoshi 500 en mayúsculas, chicos y separados (la letra de máquina queda para los datos). */
.eyebrow,.chips-label,.post-card .kicker{font-size:11px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.site-footer h2,.site-footer h3{letter-spacing:.08em;text-transform:uppercase}
/* Datos en letra de máquina: encabezados de tabla, numeración de pasos, fechas, rótulos de las maquetas. */
thead th{font-family:var(--mono);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.steps>li::before{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.post-meta,.mw-head small,.mock-card small,.mg-head small,.cal-days,.pb-head span{font-family:var(--mono);letter-spacing:.06em}
.price .amt,.stat-num{font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
::selection{background:color-mix(in srgb,var(--acento) 28%,transparent)}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* Botones: radio 8, al apretar bajan 1 px y se achican a .98 (120 ms, curva única). */
.btn{border-radius:8px;font-weight:500;transition:background-color .12s var(--curva),border-color .12s var(--curva),color .12s var(--curva),box-shadow .12s var(--curva),transform .12s var(--curva)}
.btn:active{transform:translateY(1px) scale(.98)!important}
.btn-primary,.btn-primary:hover{background:var(--primario);color:var(--on-primario);border-color:transparent;box-shadow:var(--tecla)}
.btn-primary:hover{background:var(--primario-hover)}
.btn-ghost{background:var(--navy-2);color:var(--strong);border-color:var(--line-2);box-shadow:var(--canto)}
.btn-ghost:hover{background:var(--navy-3);border-color:var(--borde-hover)}
.btn-sm{border-radius:8px}

/* Barra: luna/sol de 32 px; el ícono gira 30° y aparece al cambiar de tema. */
.boton-tema{transition:background-color .12s var(--curva),color .12s var(--curva),transform .12s var(--curva)}
.boton-tema:active{transform:translateY(1px) scale(.96)}
.boton-tema svg{animation:temaGiro .18s var(--curva)}
@keyframes temaGiro{from{opacity:0;transform:rotate(-30deg)}}
.nav-toggle,.lang-switch,.login{transition:background-color .12s var(--curva),color .12s var(--curva)}
.brand .tag{color:var(--faint)}
@media (min-width:1000px){
  .nav-links>li>a,.nav-links>li>button{transition:background-color .12s var(--curva),color .12s var(--curva)}
  .dropdown-panel{border-radius:12px;border-color:var(--line);box-shadow:var(--elev);transition:opacity .2s var(--curva),transform .2s var(--curva),visibility .2s}
  .dropdown-panel a{transition:background-color .12s var(--curva),color .12s var(--curva)}
}
.lang-banner{border-radius:12px;border-color:var(--line);box-shadow:var(--elev)}
.lang-banner button{border-radius:8px}

/* La portada: una sola luz quieta arriba del titular, el grano casi invisible y una línea de 1 px con el
   degradé de la marca en el canto de arriba. No se mueve ni se repite en otras secciones. */
.hero-home{isolation:isolate}
.hero-home::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,#3B82F6 22%,#6D6AF8 50%,#A855F7 78%,transparent) 50% 0/min(1120px,92%) 1px no-repeat,
    radial-gradient(64% 60% at 28% -6%,var(--luz),transparent 72%)}
.hero-home::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:var(--grano-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.hero-home h1{font-size:clamp(2.75rem,5.8vw,4.75rem);line-height:.98;letter-spacing:-.045em}
.hero-home .lead{font-size:clamp(1.0625rem,1.5vw,1.1875rem)}
@media (min-width:1000px){.hero-home{padding-top:120px}}

/* Superficies: radio 12, canto de luz arriba (en claro, una sombra mínima). Las que se tocan sólo suben el borde. */
.card,.steps>li,.plan,.table-wrap,.stats li,.heads li,.toc{border-radius:12px;box-shadow:var(--canto)}
.card,.tile{transition:border-color .12s var(--curva),background-color .12s var(--curva)}
.card:hover,.tile:hover{border-color:var(--line-2);background:var(--navy-2)}
a.card:hover,a.tile:hover,a.card:focus-visible{border-color:var(--borde-hover)}
.icon{border-radius:8px;box-shadow:var(--canto)}
.card-mod .icon{border-radius:8px}
.badge,.mi-badge,.real-badge,.plan .pop,.billing-toggle .save{border-radius:6px}
.badge-live::before,.badge-early::before,.real-badge::before{box-shadow:none}
.chips li{border-color:var(--line-2)!important;box-shadow:var(--canto)}
.callout{border-radius:12px}
.cta-band{border-radius:16px;box-shadow:var(--canto)}
.plan.featured{border-color:var(--acento);box-shadow:var(--canto),0 0 0 1px var(--acento) inset}
.plan .pop{color:var(--acento);border-color:color-mix(in srgb,var(--acento) 40%,transparent)}
.billing-toggle{border-radius:8px;box-shadow:var(--canto)}
.billing-toggle button{border-radius:6px;transition:background-color .12s var(--curva),color .12s var(--curva)}
.billing-toggle button[aria-pressed="true"]{background:var(--navy-3);color:var(--strong);box-shadow:var(--canto)}
tbody tr{transition:background-color .12s var(--curva)}
tbody tr:hover{background:var(--navy-3)}
.faq summary{transition:color .12s var(--curva)}
.faq summary:hover h3{color:var(--strong)}
.faq summary::after{transition:transform .2s var(--curva)}
/* Maquetas: vista grande con radio 16 y canto; sin resplandores. */
.demo-pair,.demo-single,.assets-gallery,.ask-mock,.mg-mock,figure.mock,.ask-stack{border-radius:16px;box-shadow:var(--canto)}
.mock-win,.mg-main,.mg-nav{border-radius:12px}
.mg-ask.glow{box-shadow:0 0 0 1px var(--acento)}
.st-head::before{box-shadow:none}
.ask-dot,.tk-dot{background:var(--acento)}

/* Movimiento: aparecer con la curva única, corto y sin rebote. */
.rv{transition:opacity .32s var(--curva),transform .32s var(--curva)!important;transition-delay:var(--rd,0ms)!important}
.rv-off{transform:translateY(8px)}
/* Calculadora de pago por stream (blog) */
.calc{margin:1.6em 0;padding:24px}
.calc h3{margin-top:0}
.calc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.calc-field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--lavender)}
.calc-field input{font:inherit;font-size:1rem;color:inherit;background:rgb(var(--ink-rgb) / .04);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;min-height:44px;width:100%}
.calc-field input:focus{outline:2px solid var(--cobalt);outline-offset:1px}
.calc-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 0}
.calc-out div{padding:14px;border-radius:12px;border:1px solid var(--line)}
.calc-out dt{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--lavender)}
.calc-out dd{margin:6px 0 0;font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.calc-note{font-size:.85rem;opacity:.8;margin:14px 0 0}
@media (max-width:640px){.calc-grid,.calc-out{grid-template-columns:1fr}}