/* TONTRIA Clips — site styles. No framework, no build step. */
: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);
  --grad:linear-gradient(#9f8fff,#9f8fff);
  --grad-d:linear-gradient(#9f8fff,#9f8fff);
  --radius:12px;--radius-sm:8px;--pill:6px;
  --wrap:1120px;--gutter:20px;
  --font:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Tema: todo color que cambia entre oscuro y claro pasa por estas variables. Estos son los del oscuro (el de
     siempre); el claro las redefine más abajo. Lo que es una «pantalla» dentro de una ilustración (el celular, el
     vinilo, la vista previa del editor, la consola de la API, los videos) queda oscuro en los dos temas. */
  --strong:#f1f1f6;--prose:#a9adbf;--line-3:rgba(255,255,255,.22);
  --link:#b9aeff;--link-line:rgba(185,174,255,.3);--accent-text:#b9aeff;--check:#9f8fff;--focus:#9f8fff;
  --bg-panel:#090a12;--bg-panel-2:#10121c;--header-bg:rgba(9,10,18,.88);--banner-bg:#10121c;--featured-bg:#10121c;
  --surface-soft:#10121c;--field-bg:#0d0f18;--track-bg:rgba(255,255,255,.03);
  --code-bg:rgba(255,255,255,.08);--thead-bg:rgba(255,255,255,.03);
  --skeleton:rgba(255,255,255,.1);--skeleton-2:rgba(255,255,255,.14);--mock-dot:rgba(255,255,255,.18);
  --chip-bg:#10121c;--chip-bg-2:#10121c;
  --audio:rgba(233,224,255,.5);--audio-line:rgba(233,224,255,.25);--playhead:#fff;
  --wordmark:rgba(247,249,255,.62);--label-row:rgba(247,249,255,.8);--pv-line:rgba(233,224,255,.18);
  --shadow-menu:0 24px 56px -12px rgb(2 3 12 / .75);--shadow-menu-desk:none;--shadow-dd: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);
  --shadow-mock:none;--shadow-chip:none;
  --shadow-mini:none;--shadow-banner: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);
  --hero-form-shadow:none;
  --ok:#7fc3a2;--ok-dot:#7fc3a2;--ok-bg:rgba(127,195,162,.1);--ok-bg-2:rgba(127,195,162,.08);--ok-line:rgba(127,195,162,.3);
  --warn:#d9a953;--err-line:#e58c84;
  --msg-ok:#7fc3a2;--msg-ok-bg:transparent;--msg-ok-line:rgba(127,195,162,.35);
  --msg-err:#e58c84;--msg-err-bg:transparent;--msg-err-line:rgba(229,140,132,.35);
  --grad-btn:linear-gradient(#f1f1f6,#f1f1f6);--on-acc:#0b1026;--grad-text:linear-gradient(#8c90a4,#8c90a4);
  --ig-1:currentColor;--ig-2:currentColor;--waves-op:0;--orb-op:0;
  --ver-en-oscuro:inline;--ver-en-claro:none;
  /* 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);
  --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;
  color-scheme:dark;
}
/* Tema claro (la paleta de TONTRIA MGMT). Vale si se eligió con el botón luna/sol (clase light en <html>) o, sin
   elección, si el sistema está en claro. Es el MISMO bloque dos veces: si se cambia uno, cambiar el otro.
   Contraste medido (WCAG) sobre el fondo #f4f5fb, las tarjetas blancas y los fondos teñidos de las bandas y avisos:
   texto secundario #4a5079 ≥ 5,4:1 · texto chico #555b84 ≥ 4,6:1 · enlaces y lila #5a3fd6 ≥ 4,7:1 · verde #04694c ≥ 4,6:1.
   El degradé de los botones es una versión más profunda del de la marca para que la letra blanca pase AA (≥ 4,6:1),
   y el del texto con degradé (#2563eb→#7c3aed) es el que se lee sobre blanco. */
: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);--line-3:rgb(11 16 38 / .26);
  --glass:#ffffff;--glass-2:#ffffff;
  --strong:#0b1026;--prose:#3d4157;
  --link:#4a36d9;--link-line:rgb(74 54 217 / .3);--accent-text:#4a36d9;--check:#5440e6;--focus:#5440e6;
  --bg-panel:#f7f7f4;--bg-panel-2:#ffffff;--header-bg:rgb(247 247 244 / .9);--banner-bg:#ffffff;--featured-bg:#ffffff;
  --surface-soft:#ffffff;--field-bg:#ffffff;--track-bg:#ffffff;
  --code-bg:rgb(40 50 130 / .07);--thead-bg:rgb(40 50 130 / .04);
  --skeleton:rgb(40 50 130 / .12);--skeleton-2:rgb(40 50 130 / .16);--mock-dot:rgb(40 50 130 / .22);
  --chip-bg:rgb(255 255 255 / .95);--chip-bg-2:rgb(255 255 255 / .95);
  --audio:rgb(63 47 158 / .45);--audio-line:rgb(63 47 158 / .25);--playhead:#0b1030;
  --wordmark:rgb(11 16 48 / .62);--label-row:rgb(11 16 48 / .8);--pv-line:rgb(40 50 130 / .18);
  --shadow-menu:0 16px 40px -12px rgb(11 16 38 / .14);--shadow-menu-desk:none;--shadow-dd: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);
  --shadow-mock:none;--shadow-chip:none;
  --shadow-mini:none;--shadow-banner: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);
  --hero-form-shadow:none;
  --ok:#2f6b53;--ok-dot:#2f6b53;--ok-bg:rgb(47 107 83 / .08);--ok-bg-2:rgb(47 107 83 / .06);--ok-line:rgb(47 107 83 / .3);
  --warn:#8a5a00;--err-line:#a63d36;
  --msg-ok:#2f6b53;--msg-ok-bg:transparent;--msg-ok-line:rgb(47 107 83 / .35);
  --msg-err:#a63d36;--msg-err-bg:transparent;--msg-err-line:rgb(166 61 54 / .35);
  --grad-btn:linear-gradient(#0b1026,#0b1026);--grad:linear-gradient(#5440e6,#5440e6);--grad-d:linear-gradient(#5440e6,#5440e6);--on-acc:#ffffff;
  --grad-text:linear-gradient(#5c6074,#5c6074);
  --ig-1:currentColor;--ig-2:currentColor;--waves-op:0;--orb-op:0;
  --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);--luz:rgb(84 64 230 / .06);--grano-op:.035;
}
@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);--line-3:rgb(11 16 38 / .26);
    --glass:#ffffff;--glass-2:#ffffff;
    --strong:#0b1026;--prose:#3d4157;
    --link:#4a36d9;--link-line:rgb(74 54 217 / .3);--accent-text:#4a36d9;--check:#5440e6;--focus:#5440e6;
    --bg-panel:#f7f7f4;--bg-panel-2:#ffffff;--header-bg:rgb(247 247 244 / .9);--banner-bg:#ffffff;--featured-bg:#ffffff;
    --surface-soft:#ffffff;--field-bg:#ffffff;--track-bg:#ffffff;
    --code-bg:rgb(40 50 130 / .07);--thead-bg:rgb(40 50 130 / .04);
    --skeleton:rgb(40 50 130 / .12);--skeleton-2:rgb(40 50 130 / .16);--mock-dot:rgb(40 50 130 / .22);
    --chip-bg:rgb(255 255 255 / .95);--chip-bg-2:rgb(255 255 255 / .95);
    --audio:rgb(63 47 158 / .45);--audio-line:rgb(63 47 158 / .25);--playhead:#0b1030;
    --wordmark:rgb(11 16 48 / .62);--label-row:rgb(11 16 48 / .8);--pv-line:rgb(40 50 130 / .18);
    --shadow-menu:0 16px 40px -12px rgb(11 16 38 / .14);--shadow-menu-desk:none;--shadow-dd: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);
    --shadow-mock:none;--shadow-chip:none;
    --shadow-mini:none;--shadow-banner: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);
    --hero-form-shadow:none;
    --ok:#2f6b53;--ok-dot:#2f6b53;--ok-bg:rgb(47 107 83 / .08);--ok-bg-2:rgb(47 107 83 / .06);--ok-line:rgb(47 107 83 / .3);
    --warn:#8a5a00;--err-line:#a63d36;
    --msg-ok:#2f6b53;--msg-ok-bg:transparent;--msg-ok-line:rgb(47 107 83 / .35);
    --msg-err:#a63d36;--msg-err-bg:transparent;--msg-err-line:rgb(166 61 54 / .35);
    --grad-btn:linear-gradient(#0b1026,#0b1026);--grad:linear-gradient(#5440e6,#5440e6);--grad-d:linear-gradient(#5440e6,#5440e6);--on-acc:#ffffff;
    --grad-text:linear-gradient(#5c6074,#5c6074);
    --ig-1:currentColor;--ig-2:currentColor;--waves-op:0;--orb-op:0;
    --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);--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{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 .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;white-space:nowrap;font-family:inherit;text-decoration:none}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:0 8px 30px -8px rgba(124,99,246,.7)}
.btn-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 12px 40px -8px rgba(168,85,247,.8)}
.btn-ghost{background:var(--glass);color:var(--light);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--glass-2);color:var(--strong);border-color:var(--line-3)}
.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{order:2;margin-left:0;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(--bg-panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow-menu);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}
.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}

/* Botón luna/sol (claro u oscuro), igual en todas las apps de TONTRIA. Vive en la barra misma, no dentro del menú:
   en el celular queda al lado de la hamburguesa y en la compu al final de la barra. Muestra el ícono del tema al que se
   pasa (luna en claro, sol en oscuro); los dos íconos están en el HTML y el CSS elige con las variables. */
.boton-tema{order:1;margin-left:auto;display:inline-grid;place-items:center;flex:none;width:40px;height:40px;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;transition:color .2s ease,border-color .2s ease}
.boton-tema:hover{color:var(--strong);border-color:color-mix(in srgb,var(--focus) 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 .tema-luna{display:var(--ver-en-claro)}
.boton-tema .tema-sol{display:var(--ver-en-oscuro)}
/* El logo viene en dos archivos (letras blancas y azul marino): se dibujan los dos y se esconde el que no va. */
.brand img.letters-dark{display:var(--ver-en-oscuro)}
.brand img.letters-light{display:var(--ver-en-claro)}
/* Los íconos de las tarjetas usan un degradé pálido que sobre blanco no se ve: en claro toma uno más profundo. */
#ig stop:first-child{stop-color:var(--ig-1)}
#ig stop:last-child{stop-color:var(--ig-2)}
/* En el celular angosto la barra lleva logo, luna/sol y hamburguesa: se achica el espacio entre ellos y, si igual
   no entran, se esconde la etiqueta «Clips» (antes sólo pasaba por debajo de 350 px). */
@media (max-width:374px){.nav{gap:8px}}
@media (max-width:359px){.brand .tag{display:none}}
/* En la compu angosta (1000–1149 px) la barra ya va justa en francés y alemán: el botón se achica un poco y se
   aprietan los espacios para que todo siga en una línea. */
/* En la compu el menú queda dentro de la barra: la sombra del panel del celular se notaría como una franja en claro. */
@media (min-width:1000px){.nav-menu{box-shadow:var(--shadow-menu-desk)}}
@media (min-width:1000px) and (max-width:1149px){.site-header .nav{gap:8px}.site-header .nav-actions{gap:4px}.boton-tema{width:36px;height:36px}.nav-actions .lang-switch{padding:8px 10px}}

@media (min-width:1000px){
  .nav-toggle{display:none}
  .nav-menu{display:flex!important;position:static;background:none;border:0;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(--bg-panel-2);border:1px solid var(--line-2);box-shadow:var(--shadow-dd);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-actions{margin:0 0 0 auto;padding:0;border:0;flex-wrap:nowrap}
}

/* 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-form{margin-top:30px;display:flex;flex-direction:column;gap:10px;padding:8px;border-radius:14px;background:var(--surface-soft);border:1px solid var(--line-2);box-shadow:var(--hero-form-shadow);max-width:640px}
.hero-form input{flex:1;min-width:0;min-height:52px;border:0;background:transparent;color:var(--strong);font:inherit;font-size:1.02rem;padding:0 18px;border-radius:var(--pill)}
.hero-form input::placeholder{color:var(--faint)}
.hero-form input:focus{outline:none}
.hero-form:focus-within{border-color:rgba(168,85,247,.6)}
.hero-form .btn{min-height:52px}
.hero-note{font-size:.9rem;color:var(--faint);margin-top:14px}
.hero-note a{color:var(--muted)}
@media (min-width:640px){.hero-form{flex-direction:row;border-radius:var(--pill)}}
@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);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-2)}
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(--accent-text)}
.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)}
.steps>li::before{content:counter(step);display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--grad-btn);color:#F7F9FF;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)}

/* Mockups (pure CSS illustrations) */
.mock{position:relative;border-radius:14px;padding:22px;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:var(--shadow-mock),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden}
.mock-bar{display:flex;gap:6px;margin-bottom:16px}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--mock-dot)}
.phone{position:relative;width:min(230px,58%);aspect-ratio:9/16;border-radius:14px;margin:0 auto;overflow:hidden;background:radial-gradient(120% 70% at 50% 30%,#2b3b8f 0%,#1a1f4d 45%,#0d1130 100%);border:3px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(59,130,246,.45)}
.phone .subject{position:absolute;left:50%;top:22%;width:46%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#c9b8ff,#7c5cf0 55%,#3b2a9a 100%);opacity:.9}
.phone .subject::after{content:"";position:absolute;left:50%;top:92%;width:170%;height:120%;transform:translateX(-50%);border-radius:50% 50% 0 0;background:linear-gradient(180deg,#5b47d6,#25205f)}
.phone .face-box{position:absolute;left:24%;top:19%;width:52%;aspect-ratio:1;border:2px solid rgba(255,255,255,.75);border-radius:14px}
.phone .cap{position:absolute;left:8%;right:8%;bottom:20%;text-align:center;font-weight:500;font-size:clamp(.9rem,2.2vw,1.15rem);line-height:1.2;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.6)}
.phone .cap b{color:#fde047;font-weight:500}
.phone .cap em{font-style:normal;background:var(--grad);padding:0 6px;border-radius:6px;text-shadow:none}
.badge-score{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--pill);background:rgba(11,16,38,.75);border:1px solid var(--line-2);font-size:.72rem;font-weight:500;color:#fff}
.badge-score i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}
.float-chip{position:absolute;padding:8px 14px;border-radius:var(--pill);background:var(--chip-bg);border:1px solid var(--line-2);font-size:.8rem;font-weight:500;color:var(--strong);box-shadow:var(--shadow-chip);white-space:nowrap}
.clip-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.clip-list div{height:54px;border-radius:10px;background:linear-gradient(135deg,rgba(59,130,246,.35),rgba(168,85,247,.35));border:1px solid var(--line);position:relative;padding:8px;font-size:.72rem;font-weight:500;color:var(--strong)}
.clip-list div span{position:absolute;right:8px;bottom:6px;color:var(--lavender);font-weight:500}
.vinyl-scene{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:radial-gradient(90% 90% at 30% 50%,#2a2366,#0d1130 70%)}
.vinyl{position:absolute;left:10%;top:50%;width:44%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:repeating-radial-gradient(circle,#15172e 0 2px,#1d2040 2px 4px);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.vinyl::after{content:"";position:absolute;inset:32%;border-radius:50%;background:conic-gradient(from 30deg,#3B82F6,#A855F7,#E9E0FF,#3B82F6)}
.vinyl .shine{position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%)}
.spin{animation:spin 9s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
.lyric-lines{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:42%;font-weight:500;line-height:1.25;font-size:clamp(.85rem,1.6vw,1.1rem)}
.lyric-lines p{margin:0 0 8px;color:rgba(255,255,255,.35)}
.lyric-lines p.on{color:#fff;font-size:1.15em}
.lyric-lines p.on span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.particles{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.5px),radial-gradient(rgba(233,224,255,.35) 1px,transparent 1.5px);background-size:60px 60px,95px 95px;background-position:0 0,30px 40px;opacity:.5}
.assets-grid{display:grid;grid-template-columns:.9fr 1.1fr 1fr;gap:12px;align-items:end}
.asset{border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(160deg,#2a3486,#4b2a8f 60%,#1a1340);border:1px solid var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;text-align:center;color:#F7F9FF}
.asset .cover{width:56%;aspect-ratio:1;border-radius:8px;background:conic-gradient(from 200deg,#3B82F6,#A855F7,#E9E0FF,#3B82F6);box-shadow:0 10px 25px rgba(0,0,0,.4);margin-bottom:10px}
.asset strong{font-size:clamp(.62rem,1.3vw,.82rem);letter-spacing:.06em;line-height:1.15}
.asset small{font-size:.62rem;color:#E9E0FF;margin-top:4px}
.asset.story{aspect-ratio:9/16}.asset.post{aspect-ratio:4/5}.asset.square{aspect-ratio:1}
.asset-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pill-tag{display:inline-block;padding:6px 12px;border-radius:var(--pill);background:var(--glass-2);border:1px solid var(--line);font-size:.78rem;font-weight:500;color:var(--lavender)}
.editor-ui{display:grid;gap:12px}
.editor-top{display:grid;grid-template-columns:1fr 2.2fr;gap:12px}
.editor-panel{border-radius:10px;background:var(--field-bg);border:1px solid var(--line);padding:10px;font-size:.72rem;color:var(--muted)}
.editor-panel b{display:block;color:var(--strong);margin-bottom:6px;font-size:.75rem}
.editor-panel .row{height:8px;border-radius:4px;background:var(--skeleton);margin:6px 0}
.editor-preview{border-radius:10px;background:#070a1a;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;min-height:150px}
.ratio{border-radius:6px;background:linear-gradient(160deg,#30409a,#5a34a8);border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:.62rem;font-weight:500;color:#fff}
.r916{width:46px;aspect-ratio:9/16}.r11{width:64px;aspect-ratio:1}.r45{width:58px;aspect-ratio:4/5}.r169{width:104px;aspect-ratio:16/9}
.timeline{border-radius:10px;background:var(--track-bg);border:1px solid var(--line);padding:10px;display:grid;gap:7px;position:relative}
.track{height:20px;display:flex;gap:4px}
.track i{display:block;height:100%;border-radius:6px}
.t-v i{background:linear-gradient(90deg,#3B82F6,#5b6ef5)}
.t-t i{background:linear-gradient(90deg,#8b5cf6,#A855F7)}
.t-a i{background:repeating-linear-gradient(90deg,var(--audio) 0 2px,transparent 2px 5px);border:1px solid var(--audio-line)}
.playhead{position:absolute;top:4px;bottom:4px;left:46%;width:2px;background:var(--playhead);box-shadow:0 0 10px var(--playhead)}

/* Logo strip */
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 34px;margin-top:22px}
.wordmark{font-weight:500;font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--wordmark);letter-spacing:.02em;transition:color .2s ease;line-height:1}
.wordmark:hover{color:var(--strong)}
.wm-mmg{letter-spacing:.18em}
.wm-bizarro{font-style:italic;letter-spacing:-.02em;text-transform:lowercase}
.wm-marama{letter-spacing:.3em;text-transform:uppercase;font-weight:500}
.wm-reja{text-transform:uppercase;letter-spacing:.04em}
.wm-lne{font-weight:500;letter-spacing:.06em}
.wm-luana{font-weight:400;letter-spacing:.16em;text-transform:lowercase}
.wm-more{font-size:clamp(.95rem,1.8vw,1.1rem);font-weight:500;color:var(--faint)}
.strip-label{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}

/* 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-btn);color:#fff}
.billing-toggle .save{font-size:.75rem;font-weight:500;margin-left:6px;padding:2px 8px;border-radius:var(--pill);background:var(--ok-bg);color:var(--ok)}
.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)}
.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-btn);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:var(--thead-bg)}
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);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);transition:border-color .2s ease,background .2s ease}
.faq details[open]{border-color:var(--line-2);background:var(--glass-2)}
.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}
.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}
.cta-band .hero-form{margin-left:auto;margin-right:auto}
@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(--accent-text);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}
.hero-stack{position:relative}
.hero-stack .mini{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--chip-bg-2);border:1px solid var(--line-2);box-shadow:var(--shadow-mini);font-size:.8rem;font-weight:500;color:var(--strong);z-index:2}
.hero-stack .mini small{display:block;font-weight:500;color:var(--faint);font-size:.72rem}
.hero-stack .mini i{width:34px;height:34px;border-radius:10px;flex-shrink:0;background:conic-gradient(from 200deg,#3B82F6,#A855F7,#E9E0FF,#3B82F6)}
.hero-stack .mini i.round{border-radius:50%;background:repeating-radial-gradient(circle,#15172e 0 2px,#262a52 2px 4px);position:relative}
.hero-stack .mini i.round::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--grad)}
@media (max-width:640px){.hero-stack .mini{display:none}}

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

/* ---------- 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:var(--shadow-mock)}
.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-grid{display:grid;grid-template-columns:1.35fr auto .8fr;gap:12px;align-items:center}
.dp-orig,.dp-vert,.ag-item{position:relative;min-width:0}
.dp-arrow{font-size:1.4rem;font-weight:500;color:var(--accent-text);text-align:center}
.dp-label{display:block;margin-top:8px;font-size:.78rem;font-weight:500;color:var(--muted);text-align:center;line-height:1.3}
.demo-vert-shadow{box-shadow:0 20px 50px -20px rgba(168,85,247,.6)}
.dp-vert .demo-video{box-shadow:0 24px 60px -24px rgba(168,85,247,.7);border:2px solid rgba(255,255,255,.12)}
.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:var(--ok-bg-2);border:1px solid var(--ok-line);color:var(--ok);font-weight:500;font-size:.74rem;letter-spacing:.02em}
.real-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-dot);box-shadow:0 0 8px var(--ok-dot)}
.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 ---------- */
.growth-card h3{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 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 var(--pv-line);margin-bottom:8px;background:var(--navy-3)}
.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-row);font-size:.98rem}
.label-row img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--navy-3)}
.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:var(--shadow-banner);font-size:.95rem}
.lang-banner a{flex:1;color:var(--strong);font-weight:500;text-decoration:none}
.lang-banner a:hover{color:var(--accent-text)}
.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}
.editor-preview{flex-wrap:wrap}
@media (max-width:480px){.editor-top{grid-template-columns:1fr}.r169{width:84px}}

/* ---------- API & Enterprise ---------- */
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;padding:.12em .42em;border-radius:6px;background:var(--code-bg);border:1px solid var(--line);color:var(--lavender);white-space:nowrap}
.api-mock{display:grid;gap:14px}
.api-log{border-radius:14px;background:#070a1a;color:#F7F9FF;border:1px solid var(--line);padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;display:grid;gap:10px}
.api-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.api-m{color:#93c5fd;font-weight:500}
.api-ev{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.api-ok{color:#86efac;font-weight:500}
.api-sig{display:flex;justify-content:space-between;padding-top:10px;border-top:1px dashed var(--line-2);color:#c4b5fd;font-weight:500}
.api-clips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.api-clips div{border-radius:10px;background:var(--field-bg);border:1px solid var(--line);padding:10px}
.api-clips b{display:block;aspect-ratio:9/16;max-height:120px;width:100%;border-radius:8px;margin-bottom:8px;background:linear-gradient(160deg,#30409a,#5a34a8)}
.api-clips i{display:block;height:7px;border-radius:4px;background:var(--skeleton-2);margin-top:6px}
.soon-note{margin-top:22px;padding:14px 18px;border-radius:14px;background:var(--glass);border:1px dashed var(--line-2);color:var(--muted);font-size:.95rem}
.ent-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:32px;padding:24px 28px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(168,85,247,.14));border:1px solid var(--line-2)}
.ent-cta h2{font-size:1.35rem;margin:0 0 6px;letter-spacing:-.01em}
.ent-cta p{margin:0;color:var(--muted)}
.ent-cta>div{flex:1 1 320px;min-width:0}
.ent-cta>.ent-actions{flex:0 1 auto;margin:0}
.ent-price{margin:10px 0 0;color:var(--muted)}
.ent-price strong{color:var(--strong)}
.page-hero .ent-price{margin-top:14px}
.mail-card h3{margin:0 0 8px}
.mail-card .cta-row{margin-top:18px}
.mail-card .form-note{margin-top:14px}
.lead-split{align-items:start}
.lead-card{padding:24px}
@media (min-width:700px){.lead-card{padding:32px}}
.lead-form{margin:0}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;border:0;padding:0;min-width:0}
.field label,.field legend{font-weight:500;font-size:.92rem;color:var(--strong);padding:0;margin-bottom:2px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:14px;border:1px solid var(--line-2);background:var(--field-bg);color:var(--strong);font:inherit;font-size:1rem}
.field textarea{min-height:128px;resize:vertical;line-height:1.5}
.field select option{background:var(--bg-panel-2);color:var(--strong)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(168,85,247,.75);box-shadow:0 0 0 3px rgba(168,85,247,.25)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:var(--err-line)}
.field-row{display:grid;gap:0 16px}
@media (min-width:700px){.field-row{grid-template-columns:1fr 1fr}}
.check-opts{display:flex;flex-wrap:wrap;gap:10px}
.check-opt{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border-radius:var(--pill);border:1px solid var(--line-2);background:var(--glass);cursor:pointer;font-weight:500;font-size:.95rem;color:var(--light)}
.check-opt input{width:18px;height:18px;margin:0;accent-color:#A855F7;flex-shrink:0}
.check-opt:has(input:checked){border-color:rgba(168,85,247,.75);background:rgba(168,85,247,.16)}
.check-opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.turnstile-box{margin:0 0 16px}
.turnstile-box:empty{display:none}
.lead-form .btn{width:100%}
@media (min-width:700px){.lead-form .btn{width:auto;min-width:200px}}
.lead-form .btn[disabled]{opacity:.65;cursor:progress;transform:none}
.form-note{font-size:.85rem;color:var(--faint);margin:14px 0 0}
.form-note a{color:var(--muted)}
.form-status{outline:none}
.form-status:empty{display:none}
.form-status p{margin:16px 0 0;padding:14px 18px;border-radius:14px;font-weight:500}
.form-status .msg-ok{background:var(--msg-ok-bg);border:1px solid var(--msg-ok-line);color:var(--msg-ok)}
.form-status .msg-err{background:var(--msg-err-bg);border:1px solid var(--msg-err-line);color:var(--msg-err)}
.form-status .msg-err a{color:var(--strong)}
.lead-form.sent .lead-fields{display:none}
.lead-form.sent .form-status p{margin-top:0}
h1,h2,h3{overflow-wrap:break-word}
html:lang(de) h1,html:lang(de) h2,html:lang(fr) h1,html:lang(it) h1,html:lang(pt-BR) h1{-webkit-hyphens:auto;hyphens:auto}
/* Desktop nav: keep one line with the "API & Enterprise" item in every language */
@media (min-width:1000px){.nav-links>li>a,.nav-links>li>button,.nav-actions a,.nav-actions .lang-switch{white-space:nowrap}}
@media (min-width:1000px){
  .nav{gap:10px}
  .nav-links{margin-left:6px;gap:0}
  .nav-links>li>a,.nav-links>li>button{padding:10px 9px;font-size:.9rem}
  .lang-switch .lang-name{display:none}
  .nav-actions{gap:6px}
  .login{padding:8px 6px;font-size:.92rem}
  .nav-actions .btn-sm{padding:10px 14px}
}
@media (min-width:1000px) and (max-width:1149px){.brand .tag{display:none}.nav-links>li>a,.nav-links>li>button{padding:10px 7px}}
@media (min-width:1240px){.lang-switch .lang-name{display:inline}}

/* pie con la columna extra de casos de uso (páginas de paginas/, sólo en algunos idiomas) */
@media (min-width:1000px){.footer-grid.has-extra{grid-template-columns:1.4fr repeat(5,1fr)}}

/* ==========================================================================================================
   Sistema de diseño v2 de la familia TONTRIA (~/tontria/DISENO.md). Va al final y pisa lo de arriba: botón
   sólido sin brillo, titulares en 500/400 con tracking negativo y la segunda voz en gris (no en degradé),
   superficies lisas con línea de 1 px, sin auroras, orbes ni ondas de fondo; el degradé de la marca queda en el
   logo y en líneas de 1 px. Las ilustraciones que imitan un video (celular, vinilo, portadas) conservan su color.
   ========================================================================================================== */
body{font-size:16px;line-height:1.625;-moz-osx-font-smoothing:grayscale}
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}
:focus-visible{outline-offset:2px;border-radius:6px}
.grad,.hero h1 .grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--faint);animation:none}
.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;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-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)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
/* Encabezado */
.site-header{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.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)}
.boton-tema svg{width:16px;height:16px}
.nav-toggle{border-radius:8px;border:0;background:none}
.lang-switch{border:0;border-radius:8px}
.dropdown-panel{border-radius:14px;background:var(--navy-2)}
/* Fondos en movimiento: fuera */
.aurora,.waves,.orb,.hero-eq,.particles{display:none!important}
/* Tarjetas y paneles: lisos, línea de 1 px, sin vidrio */
.card,.plan,.faq details,.table-wrap,.lead-card,.mail-card,.growth-card,.post-card{background:var(--navy-2);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.card::before{display:none}
.card:hover,a.card:hover{transform:none}
.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{background:var(--navy-2);border:1px solid var(--line-2)}
.checks li::before{background:var(--check)}
.checks li::after{border-color:var(--on-acc)}
.hero-form{box-shadow:none;border-radius:10px;background:var(--navy-2)}
.hero-form input{border-radius:8px}
.billing-toggle{border-radius:10px;padding:3px}
.billing-toggle button{border-radius:8px}
.billing-toggle button[aria-pressed="true"]{background:var(--navy-3);color:var(--strong)}
.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}
.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-left:0}
.faq .answer{padding-left:0}
.callout,.ent-cta{background:var(--navy-3);border:1px solid var(--line)}
.cta-band{background:var(--navy-3);border:1px solid var(--line)}
.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}
.mock,.demo-pair,.demo-single,.assets-gallery{background:var(--navy-2);border:1px solid var(--line);box-shadow:none}
.clip-list div{background:var(--navy-3)}
.hero-stack .mini i{background:#3b3f8f}
.t-v i{background:#5b52c9}.t-t i{background:#8a6fd6}
.lang-banner{border-radius:14px}
.rv-off{transform:translateY(8px)}
.brand{gap:8px}
.brand img.mark{width:22px;height:22px;border-radius:5px}
.brand img.letters{height:13px}
.brand .tag{display:flex;align-items:center;gap:10px;margin-left:4px;padding:0;border:0;border-radius:0;background:none;font-size:14px;font-weight:400;color:var(--faint);-webkit-text-fill-color:currentColor}
.brand .tag::before{content:"";width:1px;height:16px;background:var(--line-2)}
.steps>li{background:var(--navy-2);box-shadow:none}
.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-weight:500;font-variant-numeric:tabular-nums;margin-bottom:20px;box-shadow:none}
.steps>li::after{display:none}

/* Milo, el editor de video con IA (chat ilustrado): «pantalla» oscura en los dos temas, como el resto de los mocks */
.milo-chat{display:flex;flex-direction:column;gap:12px;border-radius:10px;background:#0d101a;border:1px solid rgba(255,255,255,.08);padding:16px;font-size:.86rem;line-height:1.45}
.milo-bub{margin:0;padding:10px 13px;border-radius:12px;background:#171a26;color:#ecedf2;max-width:88%}
.milo-bub.me{align-self:flex-end;background:#25235a;color:#ecedf2}
.milo-row{display:flex;gap:10px;align-items:flex-start}
.milo-av{flex:none;border-radius:50%}
.milo-survey{margin-left:42px;border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:12px;display:grid;gap:10px}
.milo-chips{display:flex;flex-wrap:wrap;gap:6px}
.milo-chips span{padding:4px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.16);font-size:.74rem;color:#a6aabb}
.milo-chips span.on{border-color:#a5a0ff;color:#ecedf2;background:rgba(165,160,255,.12)}
.milo-go{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.78rem;color:#ecedf2}
.milo-go b{font-weight:500;background:#ecedf2;color:#0b1026;border-radius:7px;padding:6px 12px}
@media (max-width:640px){.milo-survey{margin-left:0}.milo-bub{max-width:100%}}
/* Aviso del código de una campaña (?codigo=FUEGO): arriba del título, con el botón para crear la cuenta. Usa las
   variables del tema, así que se ve bien en claro y en oscuro. Lo arma site.js sólo si el servidor confirma el código. */
.code-banner{display:flex;flex-direction:column;gap:12px;margin:0 0 22px;padding:14px 14px 14px 16px;border-radius:14px;background:var(--ok-bg);border:1px solid var(--ok-line);max-width:640px}
.code-banner p{margin:0;display:flex;flex-direction:column;gap:2px;font-size:.95rem;color:var(--prose)}
.code-banner strong{color:var(--strong);font-weight:500;font-size:1.05rem}
.code-banner .btn{align-self:stretch}
@media (min-width:640px){.code-banner{flex-direction:row;align-items:center;justify-content:space-between}.code-banner .btn{align-self:auto;flex-shrink:0}}

/* ==========================================================================================================
   Sistema de diseño v3 («escenario», ~/tontria/DISENO.md). Va al final y pisa la v2: titulares 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.
   ========================================================================================================== */
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}
p{text-wrap:pretty}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.032em;line-height:1.1}
.lead{font-size:clamp(1.0625rem,1.4vw,1.125rem);line-height:1.65;letter-spacing:-.005em}
.eyebrow,.strip-label{font-size:11px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.site-footer h2,.site-footer h3{letter-spacing:.08em}
thead th{font-family:var(--mono);font-size:11px;line-height:16px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:none}
.steps>li::before{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.price .amt{font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price .per{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
::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;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{box-shadow:var(--canto)}
.btn-ghost:hover{border-color:var(--borde-hover)}
/* Luna/sol: 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:focus-visible{border-radius:8px}
.boton-tema svg{animation:temaGiro .18s var(--curva)}
@keyframes temaGiro{from{opacity:0;transform:rotate(-30deg)}}
.dropdown-panel{border-radius:12px;border-color:var(--line)}
.dropdown-panel a{border-radius:8px}
.lang-banner{border-radius:12px}
/* 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:not(.page-hero):not(.notfound)::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:not(.page-hero):not(.notfound)::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:not(.page-hero):not(.notfound) h1{font-size:clamp(2.75rem,5.8vw,4.75rem);line-height:.98;letter-spacing:-.045em}
@media (min-width:1000px){.hero:not(.page-hero):not(.notfound){padding-top:120px}}
/* El campo de la portada: borde que sube al pasar y, al enfocar, el borde del acento con un anillo plano de 3 px. */
.hero-form{border-radius:12px;box-shadow:var(--canto);transition:border-color .12s var(--curva),box-shadow .12s var(--curva)}
.hero-form:hover{border-color:var(--borde-hover)}
.hero-form:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
/* Superficies: radio 12 y canto de luz arriba (en claro, una sombra mínima). Las que se tocan sólo suben el borde. */
.card,.plan,.table-wrap,.steps>li,.lead-card,.mail-card,.growth-card,.post-card{border-radius:12px;box-shadow:var(--canto)}
.card{transition:border-color .12s var(--curva),background-color .12s var(--curva)}
.card:hover{background:var(--navy-2)}
a.card:hover,a.card:focus-visible{border-color:var(--borde-hover)}
.icon{border-radius:8px;box-shadow:var(--canto)}
.plan.featured{border-color:var(--acento);box-shadow:var(--canto),inset 0 0 0 1px var(--acento)}
.plan .pop,.billing-toggle .save{border-radius:6px}
.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"]{box-shadow:var(--canto)}
tbody tr{transition:background-color .12s var(--curva)}
tbody tr:hover{background:var(--navy-3)}
.faq summary::after{transition:transform .2s var(--curva)}
.cta-band{border-radius:16px;box-shadow:var(--canto)}
.mock,.demo-pair,.demo-single,.assets-gallery{border-radius:16px;box-shadow:var(--canto)}
.rv{transition:opacity .32s var(--curva),transform .32s var(--curva)!important;transition-delay:var(--rd,0ms)!important}