/* Ears: sistema de diseno «Signal». Un cobalto (tono 264) con sus neutros, una senal amarilla (tono 86) para la accion y campos de color por seccion.
   Capas: reset, tokens, base, layout, components, fields, motion, print. Los componentes solo leen roles (--bg, --fg, --action...); cada campo (.f-*) los redefine.
   Sin degradados, sin sombras, sin lineas finas: las superficies se separan por un escalon de tono. Reglas completas en docs/DESIGN.md. */
@layer reset,tokens,base,layout,components,fields,motion,print;
@font-face{font-family:"Archivo";src:url("/fonts/archivo.woff2") format("woff2");font-weight:400 800;font-stretch:62% 100%;font-display:swap}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  :where(h1,h2,h3,p,ul,ol,dl,figure,pre){margin:0}
  :where(ul,ol){padding:0;list-style:none}
  img,svg{display:block;max-width:100%}
  button,input,summary{font:inherit;color:inherit}
}

@layer tokens{
  :root{
    --h:264;
    /* primitivas: neutros con el tinte del cobalto */
    --ink-950:oklch(.15 .028 var(--h));--ink-900:oklch(.195 .03 var(--h));--ink-800:oklch(.245 .034 var(--h));--ink-700:oklch(.31 .04 var(--h));--ink-600:oklch(.37 .045 var(--h));
    --paper-50:oklch(.975 .006 var(--h));--paper-100:oklch(.95 .011 var(--h));--paper-200:oklch(.918 .016 var(--h));--paper-300:oklch(.875 .022 var(--h));--paper-400:oklch(.835 .026 var(--h));
    --bone:oklch(.965 .01 var(--h));
    /* cobalto: un solo tono, pasos de luminosidad (el navegador recorta el croma a la gama de cada pantalla) */
    --cobalt-950:oklch(.2 .09 var(--h));--cobalt-900:oklch(.265 .15 var(--h));--cobalt-800:oklch(.34 .2 var(--h));--cobalt-700:oklch(.42 .24 var(--h));--cobalt-600:oklch(.49 .26 var(--h));
    --cobalt-400:oklch(.66 .2 var(--h));--cobalt-300:oklch(.77 .14 var(--h));--cobalt-200:oklch(.86 .075 var(--h));--cobalt-100:oklch(.93 .038 var(--h));--cobalt-50:oklch(.965 .016 var(--h));
    /* senal: el color de la accion */
    --signal:oklch(.845 .172 86);--signal-hi:oklch(.885 .17 90);--signal-lo:oklch(.8 .17 84);--signal-deep:oklch(.42 .09 80);--gold:oklch(.74 .16 82);
    /* estados y codigo */
    --mint-300:oklch(.82 .13 165);--mint-700:oklch(.45 .12 160);--coral-400:oklch(.72 .17 28);--coral-700:oklch(.5 .19 27);

    /* roles que cambian con el tema: light-dark() lee el color-scheme del elemento que los usa, asi que un campo oscuro los resuelve en oscuro */
    --bg:light-dark(var(--paper-50),var(--ink-950));--bg-1:light-dark(var(--paper-100),var(--ink-900));--bg-2:light-dark(var(--paper-200),var(--ink-800));--bg-3:light-dark(var(--paper-300),var(--ink-700));
    --sel:light-dark(var(--cobalt-100),var(--cobalt-900));
    --fg:light-dark(var(--ink-950),var(--bone));--fg-2:light-dark(oklch(.33 .035 var(--h)),oklch(.87 .02 var(--h)));--fg-3:light-dark(oklch(.44 .04 var(--h)),oklch(.8 .028 var(--h)));
    --link:light-dark(var(--cobalt-700),var(--cobalt-300));--mark:light-dark(var(--cobalt-600),var(--cobalt-300));--ring:light-dark(var(--cobalt-600),var(--signal));
    --action:var(--signal);--action-hi:var(--signal-hi);--action-fg:var(--ink-950);--sel-bg:var(--signal);--sel-fg:var(--ink-950);
    --wave:light-dark(var(--gold),var(--signal));--wave-idle:light-dark(var(--paper-300),var(--ink-700));
    --viz:light-dark(var(--cobalt-600),var(--cobalt-400));--ok:light-dark(var(--mint-700),var(--mint-300));--err:light-dark(var(--coral-700),var(--coral-400));
    --k-fn:light-dark(var(--cobalt-700),var(--signal));--k-key:var(--fg-3);--k-str:light-dark(var(--mint-700),var(--mint-300));--k-var:light-dark(var(--signal-deep),var(--signal));
    --n-in:light-dark(var(--cobalt-100),var(--cobalt-800));--n-in-fg:light-dark(var(--cobalt-900),var(--cobalt-50));--n-out:light-dark(var(--ink-950),var(--ink-800));--n-out-fg:var(--bone);
    --user:var(--cobalt-600);--user-fg:var(--bone);

    /* escalas: cinco tamanos de texto, espacio de 4 en 4, curvas de movimiento */
    --t-display:clamp(3.6rem,.2rem + 12.6vw,14.5rem);--t-head:clamp(2.6rem,1rem + 5.4vw,6rem);--t-lead:clamp(1.45rem,1.1rem + .85vw,1.8rem);--t-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);--t-small:.875rem;
    --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;
    --m:clamp(1rem,2.4vw,2.25rem);--g:clamp(.75rem,1.6vw,1.5rem);--ctl:3.25rem;--ctl-sm:2.75rem;--r-pill:999px;
    --ease-out:cubic-bezier(.23,1,.32,1);
    --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
    color-scheme:light dark;
  }
  :root[data-theme="light"]{color-scheme:light}
  :root[data-theme="dark"]{color-scheme:dark}
  @media (prefers-contrast:more){:root{--fg-3:var(--fg-2)}}
}

@layer base{
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem;scrollbar-color:var(--fg-3) var(--bg)}
  body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t-body)/1.55 var(--font);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word;accent-color:var(--action);caret-color:var(--ring)}
  ::selection{background:var(--sel-bg);color:var(--sel-fg)}
  a{color:inherit;text-decoration-thickness:.08em;text-underline-offset:.22em;transition:color .15s ease,text-decoration-color .15s ease}
  :focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:2px}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .skip{position:absolute;left:var(--s-4);top:-4rem;z-index:50;background:var(--signal);color:var(--ink-950);padding:.7rem 1.1rem;border-radius:var(--r-pill);font-weight:650;text-decoration:none}
  .skip:focus{top:var(--s-4)}
  body:not([data-view=site]){min-height:100svh;display:flex;flex-direction:column}
  body:not([data-view=site])>main{flex:1}
  .mu{color:var(--fg-3)}
  .fine{font-size:var(--t-small);color:var(--fg-3)}
  .label{font-size:var(--t-small);color:var(--fg-3);margin-bottom:var(--s-3)}
  .mono,:where(code,pre,kbd){font-family:var(--mono);font-size:var(--t-small)}
  /* titulares: Archivo condensada; el tracking justo y un espacio de palabra algo mayor para que se lean */
  .h1{font-size:var(--t-display);line-height:.88;font-weight:800;font-stretch:62%;letter-spacing:-.012em;word-spacing:.04em;text-wrap:balance}
  .h2{font-size:var(--t-head);line-height:.94;font-weight:800;font-stretch:62%;letter-spacing:-.018em;word-spacing:.09em;text-wrap:balance}
  .lead{font-size:var(--t-lead);line-height:1.28;font-weight:500;text-wrap:pretty;max-width:30ch}
  .line{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
  .line-in{display:block}
}

@layer layout{
  .wrap{padding-inline:var(--m);container:sec/inline-size}
  .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g)}
  .sec{padding-block:clamp(4.5rem,10vw,10rem)}
  .split{row-gap:var(--s-6)}
  .split>.h2,.split>.side-t{grid-column:1 / span 5;position:sticky;top:5.5rem;align-self:start}
  .split>.body{grid-column:6 / -1;display:flex;flex-direction:column;gap:2.25rem;container:body/inline-size}
  .hero{min-height:calc(min(100svh,62rem) - 4.6rem);display:flex;flex-direction:column}
  .hero-main{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(1.75rem,3.6vw,3.25rem);padding-block:clamp(1.5rem,4vw,3.5rem) clamp(2.5rem,5vw,4.5rem)}
  .hero-body{align-items:start;row-gap:var(--s-6)}
  .hero-copy{grid-column:1 / span 5;display:flex;flex-direction:column;gap:1.75rem;align-self:start}
  .deck-wrap{grid-column:6 / -1;container:deck/inline-size}
  /* en una pantalla estrecha (o una columna estrecha) todo pasa a una sola columna; va despues de las reglas que redefine */
  @container sec (max-width:60rem){
    .split>.h2,.split>.side-t,.split>.body{grid-column:1 / -1}
    .split>.h2,.split>.side-t{position:static}
    .hero-copy,.deck-wrap{grid-column:1 / -1}
  }
  .works{padding-block:1.4rem 2rem}
  .works p{max-width:70ch}
  .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem}
  /* paginas de aplicacion y legales */
  .app{max-width:44rem;margin:0 auto;padding:clamp(2rem,6vw,5rem) var(--m) clamp(3rem,8vw,6rem)}
  .prose{max-width:46rem;margin:0 auto;padding:clamp(2rem,6vw,5rem) var(--m) clamp(3rem,8vw,6rem)}
  .docs-layout{display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);padding:clamp(2rem,5vw,4rem) var(--m) clamp(3rem,8vw,6rem);max-width:84rem;margin:0 auto}
  @media (max-width:60rem){.docs-layout{grid-template-columns:1fr}}
}

@layer components{
  /* cabecera */
  .nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);padding:var(--s-4) var(--m);background:var(--bg);color:var(--fg)}
  .brand{display:inline-flex;align-items:baseline;gap:.04em;font-size:var(--t-lead);font-weight:800;font-stretch:78%;letter-spacing:-.005em;line-height:1;color:var(--fg);text-decoration:none}
  .brand svg{width:.6em;height:.6em;flex:none;transform:translateY(.02em)}
  .m-ring{stroke:var(--fg)}
  .m-wave{fill:var(--wave)}
  .nav-links{display:flex;gap:clamp(1rem,2.4vw,2rem);margin-right:auto;margin-left:clamp(0rem,3vw,2rem);font-weight:500}
  .nav-links a{text-decoration:none;padding:.5rem 0}
  .nav-links a:hover{text-decoration:underline}
  .nav-end{display:flex;align-items:center;gap:var(--s-3);margin-left:auto}
  .nav-links+.nav-end{margin-left:0}
  .theme{display:inline-grid;place-items:center;width:var(--ctl-sm);height:var(--ctl-sm);border:0;border-radius:50%;background:transparent;cursor:pointer;color:var(--fg);transition:background-color .15s ease,transform .16s var(--ease-out)}
  .theme:hover{background:color-mix(in oklab,var(--fg) 12%,transparent)}
  .theme:active{transform:scale(.94)}
  .theme svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  .theme .i-sun{display:none}
  :root[data-theme="dark"] .theme .i-sun{display:block}
  :root[data-theme="dark"] .theme .i-moon{display:none}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .i-sun{display:block}:root:not([data-theme="light"]) .theme .i-moon{display:none}}
  @media (max-width:60rem){.nav-links a:not(.keep){display:none}}
  @media (max-width:34rem){.nav{gap:var(--s-2)}.nav-end .btn{padding-inline:.95rem}}

  /* botones: capsula o nada; una altura de control y una respuesta a pulsar */
  .btn{--_bg:var(--bg-1);--_fg:var(--fg);display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--ctl);padding:0 1.7rem;border:0;border-radius:var(--r-pill);background:var(--_bg);color:var(--_fg);font-weight:650;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,transform .16s var(--ease-out)}
  .btn:hover{background:color-mix(in oklab,var(--_bg),var(--fg) 10%)}
  .btn:active{transform:scale(.97)}
  .btn-primary{--_bg:var(--action);--_fg:var(--action-fg)}
  .btn-primary:hover{background:var(--action-hi)}
  .btn-sm{min-height:var(--ctl-sm);padding-inline:1.25rem}
  .nav.f-cobalt .btn-primary{--_bg:var(--bone);--_fg:var(--ink-950)}
  .nav.f-cobalt .btn-primary:hover{background:var(--cobalt-50)}
  .btn-text{display:inline-flex;align-items:center;gap:.45em;min-height:var(--ctl);font-weight:600;text-decoration:none}
  .btn-text span{border-bottom:.09em solid currentColor;padding-bottom:.05em}
  .btn-text svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
  .btn-text:hover svg{transform:translate(.15em,-.15em)}
  form.inline{display:inline}

  /* reproductor de la muestra */
  .deck{display:flex;flex-direction:column;gap:var(--s-5);padding:clamp(1rem,2vw,1.75rem);background:var(--bg-1)}
  .deck-top{display:flex;align-items:center;gap:var(--s-4)}
  .play{flex:none;display:inline-grid;place-items:center;width:3.75rem;height:3.75rem;border:0;border-radius:50%;background:var(--action);color:var(--action-fg);cursor:pointer;transition:background-color .15s ease,transform .16s var(--ease-out)}
  .play:hover{background:var(--action-hi)}
  .play:active{transform:scale(.95)}
  .play svg{width:1.5rem;height:1.5rem;fill:currentColor}
  .play .i-pause{display:none}
  .play[aria-pressed="true"] .i-play{display:none}
  .play[aria-pressed="true"] .i-pause{display:block}
  .deck-title{font-weight:650;line-height:1.25;text-wrap:balance}
  .clock{margin-left:auto;font-size:var(--t-small);font-variant-numeric:tabular-nums;color:var(--fg-3);white-space:nowrap}
  .wave{position:relative;height:6.5rem;cursor:pointer;touch-action:none}
  .wave-layer{position:absolute;inset:0;display:flex;align-items:center;gap:1px}
  .wave-on{clip-path:inset(0 var(--rest,100%) 0 0)}
  .bar{flex:1 1 0;min-width:0;height:calc(var(--h)*1%);min-height:3px;border-radius:var(--r-pill);background:var(--wave-idle)}
  .wave-on .bar{background:var(--action)}
  .cues{display:flex;flex-direction:column;gap:.15rem}
  .cue{display:grid;grid-template-columns:3.4rem 1fr;gap:.9rem;padding-block:.4rem}
  .ts{font-size:var(--t-small);font-variant-numeric:tabular-nums;color:var(--fg-3);padding-top:.28rem}
  .cue-t{line-height:1.45;color:var(--fg-3)}
  .w{transition:color .12s ease}
  .w.on{color:var(--fg)}
  @container deck (max-width:30rem){.cue{grid-template-columns:3rem 1fr;gap:.6rem}.wave{height:5.25rem}}
  .tool{line-height:1.65;color:var(--fg-2);background:var(--bg-2);padding:var(--s-4) 1.15rem;white-space:pre-wrap;overflow-wrap:anywhere}
  /* codigo: tres tonos con significado (orden, argumento, texto) y el resto atenuado */
  .k-fn{color:var(--k-fn);font-weight:600}
  .k-key,.k-pun{color:var(--k-key)}
  .k-str{color:var(--k-str)}
  .k-var{color:var(--k-var)}
  .k-num{color:var(--fg)}

  /* diagrama: entrada (cobalto claro), proceso (senal), salida (tinta) */
  .steps{display:flex;flex-direction:column;gap:var(--s-5);max-width:44rem}
  .steps strong{display:block;font-size:var(--t-lead);line-height:1.15;font-weight:700;font-stretch:78%;letter-spacing:-.005em;margin-bottom:var(--s-1)}
  .steps p{color:var(--fg-3)}
  .flow{display:grid;grid-template-columns:minmax(0,1fr) 3.5rem minmax(0,1.35fr) 3.5rem minmax(0,1fr);align-items:stretch;gap:var(--s-2)}
  .node{--nb:var(--n-in);display:flex;flex-direction:column;justify-content:center;gap:.35rem;background:var(--nb);color:var(--n-in-fg);padding:1.4rem 1.3rem;min-height:9.5rem}
  .node b{font-size:var(--t-lead);line-height:1;font-weight:800;font-stretch:72%;letter-spacing:-.005em}
  .node span{font-size:var(--t-small);line-height:1.4;color:color-mix(in oklab,currentColor 82%,var(--nb))}
  .node.hot{--nb:var(--signal);color:var(--ink-950)}
  .node.out{--nb:var(--n-out);color:var(--n-out-fg)}
  .mini-wave{display:flex;align-items:center;gap:2px;height:1.7rem;margin-top:.9rem}
  .mini-wave b{flex:0 0 3px;height:calc(var(--h)*1%);min-height:2px;border-radius:var(--r-pill);background:var(--viz)}
  .mini-text{display:flex;flex-direction:column;gap:.38rem;margin-top:.9rem}
  .mini-text b{height:.46rem;border-radius:var(--r-pill);background:var(--signal)}
  .mini-text b:nth-child(2){width:82%}.mini-text b:nth-child(3){width:56%}
  .link{align-self:center;width:100%;height:auto;overflow:visible}
  .dg-line{fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 8}
  .dg-head{fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  @container body (max-width:34rem){.flow{grid-template-columns:1fr;gap:.25rem}.link{width:2.5rem;transform:rotate(90deg);margin-block:.9rem;justify-self:center}.node{min-height:0}}

  /* conversacion de ejemplo: el usuario en cobalto, el resultado de la herramienta en verde, la respuesta sobre el campo */
  .chat{display:flex;flex-direction:column;gap:var(--s-4);max-width:44rem}
  .msg{padding:1.1rem 1.3rem;line-height:1.5}
  .msg-user{background:var(--user);color:var(--user-fg);align-self:flex-start}
  .msg-tool{font-family:var(--mono);font-size:var(--t-small);color:var(--ok);padding:.3rem 0 .3rem 1.3rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
  .msg-tool svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .msg-bot{padding-inline:1.3rem}
  .msg-bot ul{margin-top:.6rem;display:flex;flex-direction:column;gap:.4rem}
  .msg-bot li{padding-left:1.2rem;position:relative}
  .msg-bot li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:var(--r-pill);background:var(--mark)}

  /* usos: una banda por caso; la frase de ejemplo es lo que dices, asi que va en cobalto */
  .uses{display:flex;flex-direction:column;gap:var(--s-2)}
  .use{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--g);row-gap:.4rem;padding:1.5rem;align-items:baseline;background:var(--bg-1)}
  .use h3{font-size:var(--t-lead);line-height:1.1;font-weight:700;font-stretch:78%;letter-spacing:-.005em}
  .use p{color:var(--fg-3);max-width:52ch}
  .use code{display:block;margin-top:var(--s-3);padding:.65rem .9rem;background:var(--user);color:var(--user-fg);font-family:var(--font);font-size:var(--t-small);line-height:1.45}
  @container body (max-width:34rem){.use{grid-template-columns:1fr}}

  /* precios */
  .packs{margin-top:clamp(3rem,7vw,6.5rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);row-gap:var(--s-6)}
  .pack{display:flex;flex-direction:column;gap:.3rem}
  .num{font-size:var(--t-display);line-height:.86;font-weight:800;font-stretch:62%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .unit{font-size:var(--t-lead);font-weight:600;font-stretch:78%;line-height:1.1;margin-top:.7rem}
  .price{font-size:var(--t-lead);font-weight:800;font-stretch:78%;margin-top:.9rem}
  .per{color:var(--fg-3);font-size:var(--t-small)}
  .calc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-5);margin-top:clamp(2.5rem,5vw,4rem);padding:1.4rem;background:var(--bg-1)}
  .calc label{font-weight:650}
  .field{background:var(--bg-2);color:var(--fg);border:0;border-radius:var(--r-pill);min-height:var(--ctl);padding:0 1.2rem;width:min(100%,9rem);font-variant-numeric:tabular-nums;font-weight:650}
  .field:focus-visible{outline-offset:2px}
  .calc output{font-size:var(--t-lead);font-weight:800;font-stretch:78%;line-height:1.1;font-variant-numeric:tabular-nums}
  .calc output small{display:block;font-size:var(--t-small);font-weight:400;font-stretch:100%;color:var(--fg-3);margin-top:.15rem}
  .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4) var(--g);margin-top:clamp(2.5rem,5vw,4rem);font-weight:500}
  .facts li{max-width:22ch}
  @container sec (max-width:60rem){.packs{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}}
  @container sec (max-width:34rem){.facts{grid-template-columns:1fr}}

  /* privacidad */
  .statements{display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,2rem)}
  .statements p{font-size:var(--t-lead);line-height:1.25;font-weight:500;max-width:34ch;text-wrap:pretty}
  .statements p.fine{font-size:var(--t-small);font-weight:400}
  .statements a{color:var(--link)}
  .gone{display:flex;align-items:center;gap:2px;height:6rem;margin-top:var(--s-6)}
  .gone i{flex:1 1 0;min-width:0;height:calc(var(--h)*1%);min-height:3px;border-radius:var(--r-pill);background:var(--viz)}

  /* preguntas: bandas llenas, la abierta toma el tono de seleccion */
  .faq{display:flex;flex-direction:column;gap:var(--s-2)}
  .faq details{background:var(--bg-1);transition:background-color .2s ease}
  .faq details:hover{background:color-mix(in oklab,var(--bg-1),var(--fg) 6%)}
  .faq details[open]{background:var(--sel)}
  .faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);padding:1.25rem 1.5rem;list-style:none;cursor:pointer;font-size:var(--t-lead);line-height:1.15;font-weight:700;font-stretch:78%;letter-spacing:-.005em}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";flex:none;width:1.1rem;height:1.1rem;background:linear-gradient(var(--mark),var(--mark)) center/100% 2px no-repeat,linear-gradient(var(--mark),var(--mark)) center/2px 100% no-repeat;transition:transform .25s var(--ease-out)}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details>div{padding:0 1.5rem 1.5rem;max-width:62ch;color:var(--fg-2)}
  .faq details>div p+p{margin-top:.8rem}
  .faq code{background:var(--bg-2);padding:.1em .4em;color:var(--fg)}

  /* cierre y pie */
  .closer{padding-block:clamp(3.5rem,8vw,7rem) 0;overflow:hidden}
  .closer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-6)}
  .closer .lead{max-width:22ch}
  .mega{display:flex;align-items:baseline;justify-content:flex-start;margin-top:clamp(1rem,3vw,2.5rem);margin-inline:calc(var(--m)*-.5);font-size:clamp(9rem,50vw,64rem);font-weight:800;font-stretch:78%;line-height:.74;letter-spacing:-.01em;color:var(--fg);user-select:none;white-space:nowrap;height:.6em;overflow:hidden}
  .mega svg{width:.55em;height:.55em;flex:none;transform:translateY(.01em)}
  .foot{padding-block:1.75rem 2.25rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;font-size:var(--t-small);background:var(--bg);color:var(--fg)}
  .foot nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
  .foot a{text-decoration:none;display:inline-block;padding:.5rem 0}
  .foot a:hover{text-decoration:underline}
  .foot .mu{margin-left:auto}
  @media (max-width:34rem){.foot .mu{margin-left:0}}

  /* paginas de aplicacion (clave, compra, gracias, permiso) y textos legales */
  :is(.app,.prose) h1{font-size:var(--t-head);line-height:.94;font-weight:800;font-stretch:62%;letter-spacing:-.015em;word-spacing:.08em;text-wrap:balance;margin-bottom:1.25rem}
  :is(.app,.prose) h2{font-size:var(--t-lead);line-height:1.12;font-weight:700;font-stretch:78%;letter-spacing:-.005em;margin:2.25rem 0 .6rem}
  :is(.app,.prose) p,.prose li{max-width:62ch}
  :is(.app,.prose) p+p{margin-top:.9rem}
  .err{color:var(--err)}
  :is(.app,.prose) a:not(.btn){color:var(--link);text-decoration-color:color-mix(in oklab,var(--link),transparent 55%)}
  :is(.app,.prose) a:not(.btn):hover{text-decoration-color:currentColor}
  :is(.app,.prose) pre{line-height:1.6;background:var(--bg-1);padding:var(--s-4) 1.15rem;overflow-x:auto;margin-block:var(--s-4);white-space:pre-wrap;overflow-wrap:anywhere}
  :is(.app,.prose) :not(pre)>code{background:var(--bg-1);padding:.1em .4em}
  :is(.app,.prose) pre code{background:none;padding:0}
  .app form{margin-block:var(--s-5);display:grid;gap:var(--s-4);justify-items:start}
  .app form p{margin:0;width:100%}
  .app input[type=text],.app input:not([type]),.prose input{background:var(--bg-1);color:var(--fg);border:0;border-radius:var(--r-pill);min-height:var(--ctl);padding:0 1.2rem;width:100%}
  :is(.app,.prose) button:not(.copy,.buy-opt){display:inline-flex;align-items:center;justify-content:center;min-height:var(--ctl);padding:0 1.7rem;border:0;border-radius:var(--r-pill);background:var(--action);color:var(--action-fg);font-weight:650;cursor:pointer;transition:background-color .15s ease,transform .16s var(--ease-out)}
  :is(.app,.prose) button:not(.copy,.buy-opt):hover{background:var(--action-hi)}
  :is(.app,.prose) button:not(.copy,.buy-opt):active{transform:scale(.97)}
  .prose ul{list-style:disc;padding-left:1.3rem;margin-block:.8rem;display:flex;flex-direction:column;gap:.4rem}
  .prose ol{list-style:decimal;padding-left:1.3rem;margin-block:.8rem;display:flex;flex-direction:column;gap:.4rem}
  .keybox{position:relative;margin-block:1.25rem}
  .keybox pre{font-size:var(--t-body);padding:1.2rem 5.5rem 1.2rem 1.3rem;margin:0}
  .keybox button.copy{top:50%;transform:translateY(-50%)}
  .keybox button.copy:active{transform:translateY(-50%) scale(.95)}
  .buy{display:grid;gap:var(--s-3);margin-block:var(--s-5)}
  .buy form{margin:0}
  .buy-opt{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:.8rem;min-height:4.5rem;padding:.9rem 1.5rem;background:var(--bg-1);color:var(--fg);text-align:left;border:0;cursor:pointer;transition:background-color .15s ease,transform .16s var(--ease-out)}
  .buy-opt:hover{background:var(--action);color:var(--action-fg)}
  .buy-opt:active{transform:scale(.99)}
  .b-num{font-size:var(--t-lead);line-height:1;font-weight:800;font-stretch:62%;font-variant-numeric:tabular-nums}
  .b-unit{color:color-mix(in oklab,currentColor 75%,var(--bg-1))}
  .b-price{font-size:var(--t-lead);font-weight:800;font-stretch:78%}

  /* documentacion */
  .side{position:sticky;top:1.5rem;align-self:start;display:flex;flex-direction:column;gap:.15rem;font-size:var(--t-small)}
  .side a{text-decoration:none;padding:.5rem .9rem;margin-inline:-.9rem;border-radius:var(--r-pill);color:var(--fg-3);transition:background-color .15s ease,color .15s ease}
  .side a:hover{background:var(--bg-1);color:var(--fg)}
  .side a[aria-current="true"]{color:var(--fg);background:var(--sel);font-weight:600}
  .docs h1{font-size:var(--t-head);line-height:.92;font-weight:800;font-stretch:62%;letter-spacing:-.015em;word-spacing:.08em;text-wrap:balance;margin-bottom:1.25rem}
  .docs .intro{font-size:var(--t-lead);line-height:1.3;font-weight:500;max-width:34ch;margin-bottom:var(--s-7);text-wrap:pretty}
  .docs section{padding-top:var(--s-7);scroll-margin-top:1.5rem}
  .docs h2{font-size:var(--t-lead);line-height:1;font-weight:800;font-stretch:66%;letter-spacing:-.01em;word-spacing:.06em;margin-bottom:var(--s-4);padding-bottom:var(--s-2)}
  .docs h3{font-weight:700;font-stretch:84%;margin:1.8rem 0 .5rem}
  .docs p,.docs li{max-width:66ch}
  .docs p+p,.docs p+ol,.docs p+ul,.docs ol+p,.docs ul+p{margin-top:.9rem}
  .docs ol,.docs ul.dl{padding-left:1.3rem;list-style:decimal;display:flex;flex-direction:column;gap:var(--s-2);margin-top:.8rem}
  .docs ul.dl{list-style:disc}
  .docs li::marker{color:var(--mark)}
  .docs a{color:var(--link)}
  .docs :not(pre)>code{background:var(--bg-1);padding:.12em .4em}
  .code{position:relative;margin-block:var(--s-4)}
  .code pre{margin:0;padding:var(--s-4) 4.5rem var(--s-4) 1.15rem;line-height:1.6;background:var(--bg-1);overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
  button.copy{display:none}.js button.copy{display:inline-flex;align-items:center}
  button.copy{position:absolute;top:.55rem;right:.55rem;min-height:2.25rem;padding:0 .95rem;border:0;border-radius:var(--r-pill);background:var(--bg-3);color:var(--fg);font-size:var(--t-small);font-weight:600;font-stretch:100%;cursor:pointer;transition:background-color .15s ease,color .15s ease,transform .16s var(--ease-out)}
  button.copy:hover{background:var(--action);color:var(--action-fg)}
  button.copy:active{transform:scale(.95)}
  .tbl{width:100%;border-collapse:collapse;margin-block:var(--s-4);font-size:var(--t-small)}
  .tbl th,.tbl td{text-align:left;padding:.8rem 1rem;vertical-align:top}
  .tbl th{font-weight:650;color:var(--fg-3)}
  .tbl tbody tr:nth-child(odd){background:var(--bg-1)}
  .tbl code{white-space:nowrap}
  .note{background:var(--sel);padding:var(--s-4) 1.15rem;margin-block:1.2rem;max-width:66ch}
  @media (max-width:60rem){
    .side{position:static;flex-direction:row;flex-wrap:wrap;gap:.25rem var(--s-2);margin-bottom:var(--s-4)}
    .side a{margin-inline:0;padding:.5rem .9rem;background:var(--bg-1)}
  }
}

@layer fields{
  /* campos de color: cada seccion fija su fondo y redefine los roles; los componentes no saben en cual estan */
  .f-base{background:var(--bg);color:var(--fg)}
  .f-alt{--bg:light-dark(var(--paper-100),var(--ink-900));--bg-1:light-dark(var(--paper-200),var(--ink-800));--bg-2:light-dark(var(--paper-300),var(--ink-700));--bg-3:light-dark(var(--paper-400),var(--ink-600));background:var(--bg);color:var(--fg)}
  .f-ink{color-scheme:dark;background:var(--bg);color:var(--fg)}
  .f-navy{color-scheme:dark;--bg:var(--cobalt-900);--bg-1:var(--cobalt-800);--bg-2:var(--cobalt-700);--bg-3:var(--cobalt-600);--sel:var(--cobalt-700);--fg:var(--bone);--fg-2:var(--cobalt-100);--fg-3:oklch(.88 .06 var(--h));--link:var(--bone);--mark:var(--cobalt-300);--ring:var(--signal);--wave:var(--signal);--wave-idle:var(--cobalt-600);--viz:var(--cobalt-400);--ok:var(--mint-300);--k-fn:var(--signal);--k-key:var(--cobalt-200);--k-str:var(--mint-300);--k-var:var(--signal);background:var(--bg);color:var(--fg)}
  .f-cobalt{color-scheme:dark;--bg:var(--cobalt-600);--bg-1:var(--cobalt-900);--bg-2:var(--cobalt-950);--bg-3:var(--cobalt-700);--sel:var(--cobalt-700);--fg:var(--bone);--fg-2:var(--cobalt-100);--fg-3:oklch(.88 .06 var(--h));--link:var(--bone);--mark:var(--cobalt-200);--ring:var(--signal);--wave:var(--signal);--wave-idle:var(--cobalt-600);--viz:var(--cobalt-300);--ok:var(--mint-300);--k-fn:var(--signal);--k-key:var(--cobalt-200);--k-str:var(--mint-300);--k-var:var(--signal);background:var(--bg);color:var(--fg)}
  .f-signal{color-scheme:light;--bg:var(--signal);--bg-1:var(--signal-lo);--bg-2:oklch(.76 .165 82);--bg-3:oklch(.72 .16 80);--sel:var(--signal-lo);--fg:var(--ink-950);--fg-2:oklch(.28 .05 80);--fg-3:oklch(.38 .07 80);--link:var(--ink-950);--mark:var(--ink-950);--ring:var(--ink-950);--action:var(--ink-950);--action-hi:var(--ink-800);--action-fg:var(--signal);--sel-bg:var(--ink-950);--sel-fg:var(--signal);--wave:var(--ink-950);--wave-idle:oklch(.7 .15 80);--viz:var(--ink-950);background:var(--bg);color:var(--fg)}
  .f-cobalt .m-wave,.f-navy .m-wave{fill:var(--signal)}
  /* navegadores sin light-dark() (Safari < 17.5, Firefox < 120): tema claro fijo y los campos oscuros con sus valores */
  @supports not (color:light-dark(black,white)){
    :root{--bg:var(--paper-50);--bg-1:var(--paper-100);--bg-2:var(--paper-200);--bg-3:var(--paper-300);--sel:var(--cobalt-100);--fg:var(--ink-950);--fg-2:oklch(.33 .035 var(--h));--fg-3:oklch(.44 .04 var(--h));--link:var(--cobalt-700);--mark:var(--cobalt-600);--ring:var(--cobalt-600);--wave:var(--gold);--wave-idle:var(--paper-300);--viz:var(--cobalt-600);--ok:var(--mint-700);--err:var(--coral-700);--k-fn:var(--cobalt-700);--k-str:var(--mint-700);--k-var:var(--signal-deep);--n-in:var(--cobalt-100);--n-in-fg:var(--cobalt-900);--n-out:var(--ink-950)}
    .f-alt{--bg:var(--paper-100);--bg-1:var(--paper-200);--bg-2:var(--paper-300);--bg-3:var(--paper-400)}
    .f-ink{--bg:var(--ink-950);--bg-1:var(--ink-900);--bg-2:var(--ink-800);--bg-3:var(--ink-700);--sel:var(--cobalt-900);--fg:var(--bone);--fg-2:oklch(.87 .02 var(--h));--fg-3:oklch(.8 .028 var(--h));--link:var(--cobalt-300);--mark:var(--cobalt-300);--ring:var(--signal);--wave:var(--signal);--wave-idle:var(--ink-700);--viz:var(--cobalt-400);--ok:var(--mint-300);--k-fn:var(--signal);--k-str:var(--mint-300);--k-var:var(--signal)}
  }
}

@layer motion{
  /* entradas al hacer scroll: solo con JS (clase js); sin JS o con movimiento reducido todo queda visible */
  .js .line-in{transform:translateY(108%);animation:line-in .95s var(--ease-out) forwards;animation-delay:calc(var(--n,0)*100ms + .12s)}
  @keyframes line-in{to{transform:none}}
  .js .bar{transform:scaleY(.04);animation:bar-in .7s var(--ease-out) forwards;animation-delay:calc(var(--i)*6ms + .45s)}
  @keyframes bar-in{to{transform:none}}
  .js .gone i{transform:scaleY(.04)}
  .js .gone.in i{transform:none;transition:transform .8s var(--ease-out);transition-delay:calc(var(--i)*11ms)}
  .js .chat [data-step]{opacity:0;transform:translateY(12px)}
  .js .chat.in [data-step]{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--s)*650ms)}
  .js [data-reveal]{opacity:0;transform:translateY(18px)}
  .js [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0ms)}
  .js [data-reveal]:not(.in){animation:show .01s 3s forwards}
  @keyframes show{to{opacity:1;transform:none}}
  .js .statements [data-reveal]{--d:calc(var(--s,0)*90ms)}
  @media (prefers-reduced-motion:no-preference){.dg-line{animation:flow 1.4s linear infinite}@keyframes flow{to{stroke-dashoffset:-22}}}
  /* cambio de tema: un circulo que sale del boton (View Transitions); sin soporte o con movimiento reducido cambia al instante */
  ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
    .js .line-in,.js .bar,.js .gone i,.js [data-reveal],.js .chat [data-step]{opacity:1!important;transform:none!important}
  }
}

@layer print{
  @media print{
    .nav,.skip,.theme,.copy,.foot nav,.cta-row{display:none!important}
    :root{color-scheme:light}
    body{background:#fff;color:#000}
    a{text-decoration:underline}
  }
  @media (forced-colors:active){
    .btn,.theme,.play,.field,button.copy,.buy-opt{border:1px solid ButtonText}
    .bar{background:CanvasText}.wave-on .bar{background:Highlight}
    .node,.deck,.use,.faq details,.msg-user{border:1px solid CanvasText}
  }
}