:root{
  color-scheme: dark;
  --bg:#0B1426; --bg-2:#101C32; --surf:#16243D; --surf-2:#1B2C49;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16); --field-line:rgba(255,255,255,.34);
  --text:#EEF1F6; --muted:#A8B1C2; --muted-2:#8E97A8;
  --acc:#2B6BFF; --acc-hi:#6098FF;
  --acc-dim:rgba(43,107,255,.14); --acc-line:rgba(43,107,255,.42);
  --lt-bg:#F3F6FC; --lt-text:#101A2D; --lt-muted:#53617A; --lt-line:rgba(16,26,45,.14);
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --t-xs:.6875rem; --t-sm:.8125rem; --t-base:1rem; --t-lg:1.1875rem;
  --t-xl:1.4375rem; --t-2xl:1.75rem;
  --t-3xl:clamp(1.9rem,2.6vw,2.35rem);
  --t-4xl:clamp(2.2rem,4vw,3.15rem);
  --t-5xl:clamp(2.75rem,6.6vw,5.25rem);
  --t-6xl:clamp(3.25rem,9vw,7rem);
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-xl:20px;
  --fast:140ms; --dur:260ms; --slow:520ms;
  --out:cubic-bezier(.16,1,.3,1); --io:cubic-bezier(.65,0,.35,1);
  --pad:clamp(20px,5vw,64px);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:var(--t-base);line-height:1.6;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-variant-numeric:tabular-nums;font-weight:500;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--acc);flex:none}
section{position:relative}
.sec{padding-block:clamp(72px,11vw,150px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- reveal ----------
   Tres grados: el bloque entero (.rv), sus hijos en cascada (.seq)
   y el titular que sube desde debajo de su propia linea (.mask). */
.rv{opacity:0;transform:translateY(8px);
  transition:opacity var(--slow) var(--out),transform var(--slow) var(--out)}
.rv.in{opacity:1;transform:none}

.rv.seq{opacity:1;transform:none;transition:none}
.rv.seq > *{opacity:0;transform:translateY(18px);
  transition:opacity var(--slow) var(--out),transform var(--slow) var(--out)}
.rv.seq.in > *{opacity:1;transform:none}
.rv.seq.in > *:nth-child(2){transition-delay:90ms}
.rv.seq.in > *:nth-child(3){transition-delay:180ms}
.rv.seq.in > *:nth-child(4){transition-delay:270ms}
.rv.seq.in > *:nth-child(5){transition-delay:360ms}
.rv.seq.in > *:nth-child(n+6){transition-delay:450ms}

.mask{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.mask > span{display:block;transform:translateY(105%);
  transition:transform 880ms var(--out)}
.rv.in .mask > span{transform:none}
.rv.in .mask > span:nth-child(2){transition-delay:110ms}
.rv.in .mask > span:nth-child(3){transition-delay:220ms}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);background:rgba(8,9,12,.62);
  border-bottom:1px solid transparent;transition:border-color var(--dur) var(--out),background var(--dur) var(--out)}
.nav.small{border-bottom-color:var(--line);background:rgba(8,9,12,.86)}
.nav .inner{display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  min-height:68px;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{filter:invert(1)}
.brand .m{height:26px;width:auto}
.brand .w{height:15px;width:auto;opacity:.92}
.nav > .inner > nav{display:none;margin-left:auto}
.nav ul{display:flex;gap:clamp(14px,2vw,28px);align-items:center}
.nav a.lnk{font-size:var(--t-sm);color:var(--muted);text-decoration:none;
  padding:6px 2px;position:relative;transition:color var(--fast) var(--out)}
.nav a.lnk:hover{color:var(--text)}
/* el HTML marca la pagina actual con aria-current="page", no "true" */
.nav a.lnk[aria-current]{color:var(--text)}
.nav a.lnk[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--acc)}
.nav a.lnk.iaw[aria-current]::after{background:linear-gradient(90deg,#6FA0FF,#A78BFA)}

/* ---------- "Asistente IA" ----------
   El unico texto del sitio que cambia de color: el azul de la marca viaja hacia
   el morado y vuelve. Es la senal de que detras hay un modelo, y por eso no se
   usa en ningun otro enlace — si estuviera en todos, no diria nada. */
.iaw{background-image:linear-gradient(100deg,
       #6FA0FF 0%,#8F9DFF 18%,#A78BFA 34%,#C9A9FF 50%,#A78BFA 66%,#8F9DFF 82%,#6FA0FF 100%);
  background-size:240% 100%;background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:iaFlow 7s linear infinite}
@keyframes iaFlow{to{background-position:-240% 50%}}
.nav a.lnk.iaw:hover,.menu a:hover .iaw{filter:brightness(1.2) saturate(1.1)}
/* navegadores sin recorte de fondo sobre el texto: morado plano, no texto invisible */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .iaw{color:#A78BFA;-webkit-text-fill-color:#A78BFA}
}
/* sin movimiento el degradado se queda quieto, pero sigue siendo azul y morado */
@media(prefers-reduced-motion:reduce){.iaw{animation:none;background-position:50% 50%}}
.nav .cta{margin-left:auto}
@media(min-width:880px){.nav > .inner > nav{display:block}.nav .cta{margin-left:0}}
@media(max-width:879px){.nav .cta{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:var(--t-sm);font-weight:500;letter-spacing:-.01em;
  padding:11px 20px;border-radius:var(--r-md);text-decoration:none;cursor:pointer;
  border:1px solid transparent;white-space:nowrap;
  transition:transform var(--fast) var(--out),background var(--dur) var(--out),
             border-color var(--dur) var(--out),color var(--dur) var(--out)}
.btn:active{transform:translateY(1px)}
.btn-1{background:var(--acc);color:#fff}
.btn-1:hover{background:var(--acc-hi)}
.btn-2{background:rgba(255,255,255,.045);color:var(--text);border-color:var(--line-2)}
.btn-2:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.26)}
.btn-lg{padding:14px 26px;font-size:var(--t-base)}
.btn .arw{transition:transform var(--dur) var(--out)}
.btn:hover .arw{transform:translateX(3px)}

a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--acc-hi);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--acc);color:#fff;
  padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{left:var(--pad)}

/* ---------- hero ---------- */
/* La portada cabe en una pantalla: titulo, subtitulo, botones y asistente a la
   vez. Por eso la altura manda tanto como el ancho — el tamano del titular se
   mide contra vh, y el relleno se encoge en pantallas bajas. */
.hero{position:relative;overflow:hidden;isolation:isolate;text-align:left;
  display:grid;align-content:center;
  min-height:calc(100vh - 69px);min-height:calc(100svh - 69px);
  padding-block:clamp(36px,5.5vh,84px)}
.hero canvas.shader{position:absolute;inset:0;width:100%;height:100%;z-index:-3;
  display:block;opacity:0;transition:opacity 1200ms var(--out)}
.ready .hero canvas.shader{opacity:1}
.hero .scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 72% 62% at 50% 34%, rgba(11,20,38,.18), rgba(11,20,38,.62) 72%),
    linear-gradient(180deg, rgba(11,20,38,.42) 0%, rgba(11,20,38,.18) 26%, rgba(11,20,38,.62) 76%, #0B1426 100%)}
/* CSS fallback si no hay WebGL */
.hero .aura{display:none;position:absolute;left:50%;top:-360px;width:min(1500px,150vw);height:900px;
  transform:translateX(-50%);pointer-events:none;z-index:-3;
  background:radial-gradient(ellipse 46% 52% at 50% 50%, rgba(43,107,255,.55), transparent 68%),
             radial-gradient(ellipse 78% 62% at 50% 46%, rgba(43,107,255,.20), transparent 72%);
  filter:blur(6px)}
.no-webgl .hero .aura{display:block}
/* sin WebGL el pie del hero lo cerraba un casi-negro heredado; la tinta de la
   casa es #0B1426 y ademas es con lo que empalma el fundido de la seccion
   siguiente, asi que el corte no reaparece en los equipos sin lienzo */
.no-webgl .hero .scrim{background:linear-gradient(180deg,transparent 60%,var(--bg) 100%)}

.tag{display:inline-flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums;font-weight:500;
  font-size:var(--t-sm);letter-spacing:0;color:var(--muted);
  border:1px solid var(--line-2);background:rgba(255,255,255,.035);
  padding:7px 14px;border-radius:var(--r-sm)}
.hero h1{font-size:clamp(2.4rem,min(8.6vw,11.2vh),6.5rem);margin-top:0;letter-spacing:-.045em;
  line-height:.94;max-width:15ch;overflow-wrap:normal}
.hero h1 em{font-style:normal;color:var(--muted-2)}
.hero h1 .wd{display:inline-block;white-space:nowrap}
.hero h1 .ch{position:relative;display:inline-block}
.hero h1.type .ch{opacity:0}
.hero h1.type .ch.on{opacity:1}
.hero h1 .ch.cur::after{content:"";position:absolute;left:100%;top:.12em;bottom:.16em;
  width:.05em;min-width:2px;background:var(--acc);border-radius:1px}
.hero h1 .ch.cur.blink::after{animation:caretBlink .85s steps(1,end) 3 forwards}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.hero .sub{margin:26px 0 0;max-width:44ch;font-size:var(--t-lg);color:var(--muted)}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
@media(min-width:1000px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
    column-gap:clamp(32px,4.5vw,64px);row-gap:clamp(16px,4vh,52px);align-items:end}
  .hero h1{grid-column:1;grid-row:1}
  .hero .sub{grid-column:2;grid-row:1;margin:0 0 6px;max-width:38ch}
  .hero .acts{grid-column:1/-1;grid-row:2}
}
.fine{margin-top:16px;font-variant-numeric:tabular-nums;font-size:var(--t-sm);color:var(--muted-2);
  letter-spacing:0}

/* ---------- pildora del compositor (hero + asistente) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.pill{position:relative;display:flex;align-items:center;gap:10px;min-height:64px;
  padding:8px 8px 8px 24px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(4,9,20,.18),0 12px 28px rgba(4,9,20,.24);
  transition:box-shadow var(--dur) var(--out),transform var(--dur) var(--out)}
.pill:hover{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(4,9,20,.2),0 16px 34px rgba(4,9,20,.28)}
.pill:focus-within{transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 3px var(--acc-dim),0 16px 34px rgba(4,9,20,.3)}
/* ---------- haz del borde ----------
   Un punto de luz azul y morada recorre el contorno de la pildora: el mismo par
   de colores que "Asistente IA", para que se lea sin decirlo que ahi contesta un
   modelo. El anillo es un conico que gira, recortado a 2px por dos mascaras.
   Acelera al escribir y mas aun mientras piensa. */
@property --beam{syntax:"<angle>";initial-value:0turn;inherits:false}
.pill{--beam:0turn}
.pill::after{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:3px;
  pointer-events:none;z-index:1;opacity:.95;
  /* sobre blanco los pasteles desaparecen: el haz va en azul y morado saturados
     y lleva su propio halo, que es lo que lo hace luz y no una raya */
  filter:drop-shadow(0 0 7px rgba(99,102,241,.6));
  background:conic-gradient(from var(--beam),
    transparent 0 62%, rgba(43,107,255,.28) 69%, #2B6BFF 78%,
    #7C4DFF 86%, #A78BFA 90%, rgba(167,139,250,.28) 95%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:beam 5.5s linear infinite;
  transition:opacity var(--dur) var(--out)}
@keyframes beam{to{--beam:1turn}}
.pill:focus-within::after{opacity:1;animation-duration:3.2s}
.ia-room.thinking .pill::after{opacity:1;animation-duration:1.5s}
@media(prefers-reduced-motion:reduce){.pill::after{animation:none;opacity:.6}}

.pill input{flex:1 1 auto;width:100%;min-width:0;border:0;outline:0;background:transparent;color:#151A22;
  font:500 clamp(1rem,1.5vw,1.1875rem)/1.3 var(--sans);letter-spacing:-.02em;padding:0}
.pill input::placeholder{color:#616B7D;opacity:1;font-weight:400}
.pill-send{display:grid;place-items:center;width:48px;height:48px;flex:none;align-self:center;
  border:0;border-radius:50%;background:#0F1523;color:#fff;padding:0;cursor:pointer;
  transition:background var(--fast) var(--out),transform var(--fast) var(--out)}
.pill-send:hover{background:#000;transform:scale(1.05)}
.pill-send:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pill-send[disabled]{cursor:progress;background:#5A6373;transform:none}
.pill-send[disabled] svg{animation:pulseSend 1s var(--io) infinite}
@keyframes pulseSend{0%,100%{opacity:1}50%{opacity:.35}}

.hero-chat{margin-top:32px;max-width:470px}
@media(min-width:1000px){.hero-chat{grid-column:2;grid-row:2;margin-top:26px;align-self:center}
  .hero .acts{grid-column:1;grid-row:2;align-self:center}}
@media(max-width:999px){.hero-chat{margin-top:28px}.hero .acts{margin-top:24px}}

/* ---------- pagina del asistente ---------- */
/* La sala no lleva fondo propio: deja pasar la reticula fija del sitio, asi que
   el asistente vive en el mismo plano que el resto de las paginas. */
.ia-room{display:flex;flex-direction:column;min-height:calc(100dvh - 69px)}
.ia-stage{flex:1 1 auto;display:flex;align-items:center;
  padding:clamp(40px,7vh,88px) 0 clamp(20px,3vh,34px)}
/* al hablar, la conversacion crece hacia arriba desde el compositor: asi no
   queda un hueco entre el ultimo mensaje y la pildora cuando hay poco texto */
.ia-room.talking .ia-stage{align-items:flex-end}
.ia-stage>.wrap,.ia-dock>.wrap{width:100%;max-width:760px}

.ia-intro h1{margin-top:14px;font-size:var(--t-4xl);letter-spacing:-.035em;line-height:1.04}
.ia-lead{margin-top:18px;max-width:54ch;color:var(--muted);font-size:var(--t-lg)}
.ia-room.talking .ia-intro{display:none}

/* Sin caja con scroll propio: la conversacion es la pagina. El compositor se
   queda pegado abajo y el log pasa por debajo con un desvanecido. */
.ia-log{display:none;grid-template-columns:1fr;gap:26px}
.ia-room.talking .ia-log{display:grid}
.ia-turn{display:grid;gap:8px;max-width:100%;animation:iaIn var(--slow) var(--out) both}
@keyframes iaIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ia-turn .who{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2);font-weight:600}
.ia-turn p{font-size:var(--t-base);line-height:1.68;margin:0}
.ia-turn.you{justify-items:end;text-align:right}
.ia-turn.you p{max-width:44ch;border-radius:var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  background:var(--surf-2);border:1px solid var(--field-line);padding:12px 16px;color:var(--text)}
.ia-turn.ia p{max-width:60ch;border-left:2px solid var(--acc);padding-left:16px;color:var(--text)}
.ia-turn.ia.wait p{color:var(--muted)}
.ia-turn.ia.wait p::after{content:"";display:inline-block;width:7px;height:7px;margin-left:7px;
  border-radius:50%;background:var(--acc-hi);vertical-align:middle;animation:iaDot 1.1s var(--io) infinite}
/* el cursor solo aparece mientras el texto llega: es la prueba de que se escribe */
.ia-turn.ia.stream p::after{content:"";display:inline-block;width:2px;height:1.02em;margin-left:3px;
  background:var(--acc-hi);vertical-align:-.16em;animation:iaCaret .9s steps(1,end) infinite}
.ia-turn.ia.fail p{border-left-color:#E0705F;color:var(--muted)}
@keyframes iaDot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@keyframes iaCaret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* salida hacia el contacto: aparece cuando la respuesta ya nombro un plan */
.ia-exit{justify-self:start;margin-left:18px;display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--acc-line);border-radius:999px;background:var(--acc-dim);
  color:var(--acc-hi);font:500 var(--t-xs)/1 var(--sans);padding:10px 16px;text-decoration:none;
  transition:border-color var(--fast) var(--out),background var(--fast) var(--out),color var(--fast) var(--out)}
.ia-exit::after{content:"";width:14px;height:1px;background:currentColor;
  transition:width var(--fast) var(--out)}
.ia-exit:hover{border-color:var(--acc);background:rgba(43,107,255,.16);color:#fff}
.ia-exit:hover::after{width:22px}
.ia-exit:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.ia-dock{position:sticky;bottom:0;z-index:20;
  padding:clamp(18px,3vh,28px) 0 clamp(18px,3vh,30px);
  background:linear-gradient(180deg,rgba(11,20,38,0) 0%,var(--bg) 26%,var(--bg) 100%)}
.ia-composer{margin:0}
.ia-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ia-chips button{border:1px solid var(--field-line);border-radius:999px;background:transparent;
  color:var(--muted);font:500 var(--t-xs)/1 var(--sans);padding:9px 14px;cursor:pointer;
  animation:iaChip 420ms var(--out) both;animation-delay:calc(var(--i,0)*70ms);
  transition:border-color var(--fast) var(--out),color var(--fast) var(--out),background var(--fast) var(--out)}
@keyframes iaChip{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ia-chips button:hover{border-color:var(--acc-line);color:var(--text);background:var(--acc-dim)}
.ia-chips button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ia-room.thinking .ia-chips{opacity:.35;pointer-events:none;transition:opacity var(--dur) var(--out)}

.ia-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;margin-top:16px}
.ia-note{margin:0;max-width:56ch;color:var(--muted-2);font-size:var(--t-xs);line-height:1.55}
.ia-note a{color:var(--acc-hi);text-underline-offset:3px}
.ia-reset{border:0;background:transparent;padding:0;cursor:pointer;color:var(--muted-2);
  font:500 var(--t-xs)/1.55 var(--sans);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--field-line);transition:color var(--fast) var(--out)}
.ia-reset:hover{color:var(--text)}
.ia-reset:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---------- visuales reactivos del compositor ---------- */
/* hilo de avance: crece con lo que se escribe y avisa del limite de 500 */
.pill{position:relative}
/* el hilo va por dentro, alineado con el texto y despejando el boton: pegado al
   borde caeria en la curva de la pildora y pareceria un descuadre */
.pill::before{content:"";position:absolute;left:24px;right:70px;bottom:11px;height:2px;z-index:2;
  background:var(--acc);border-radius:2px;opacity:0;
  transform:scaleX(var(--fill,0));transform-origin:left center;
  transition:transform 180ms var(--out),opacity var(--fast) var(--out),background var(--fast) var(--out)}
.pill.on::before{opacity:.9}
.pill.full::before{background:#E0705F}
/* el boton se enciende cuando ya hay algo que enviar */
.pill.on .pill-send{background:var(--acc)}
.pill.on .pill-send:hover{background:var(--acc-hi)}

/* ---------- cerebro (icono Lucide animado) ---------- */
.brain{overflow:visible}
.brain path{stroke-dasharray:1;stroke-dashoffset:0}
.brain .sp{opacity:0}
@keyframes bDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bSpark{0%,72%{opacity:0;transform:scale(.7)}
  80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
/* al pasar por encima se dibuja una vez */
.pill-send:hover .brain path,
.pill-send:focus-visible .brain path{animation:bDraw 760ms var(--out) both}
/* mientras piensa, se dibuja en bucle y saltan las dos chispas */
.ia-room.thinking .pill-send .brain path{animation:bDraw 1500ms var(--io) infinite}
.ia-room.thinking .pill-send .brain .sp{opacity:1;transform-origin:center;
  animation:bSpark 1500ms var(--io) infinite}
.brain .b1{animation-delay:0ms}   .brain .b2{animation-delay:60ms}
.brain .b3{animation-delay:120ms} .brain .b4{animation-delay:180ms}
.brain .b5{animation-delay:240ms} .brain .b6{animation-delay:300ms}
.brain .b7{animation-delay:360ms} .brain .b8{animation-delay:420ms}
.brain .sp-l{animation-delay:480ms} .brain .sp-r{animation-delay:560ms}
/* con el cerebro dentro, el boton no se apaga en gris: se queda encendido
   y es el propio icono el que cuenta que esta pensando */
.ia-dock .pill-send[disabled]{cursor:progress;background:var(--acc);transform:none}
.ia-dock .pill-send[disabled] svg{animation:none}

@media(max-width:700px){
  .ia-foot{flex-direction:column;align-items:flex-start;gap:8px}
  .ia-exit{margin-left:18px}
}
@media(prefers-reduced-motion:reduce){
  .pill,.pill-send,.pill::before{transition:none}
  .pill-send:hover{transform:none}
  .ia-turn,.ia-chips button{animation:none}
  .ia-turn.ia.wait p::after,.ia-turn.ia.stream p::after,
  .pill-send[disabled] svg,.brain path,.brain .sp{animation:none}
  .ia-room.thinking .pill-send .brain .sp{opacity:1}
}

/* ---------- section head ---------- */
.head{display:grid;gap:18px;margin-bottom:clamp(34px,5vw,56px)}
.head h2{font-size:var(--t-4xl);max-width:20ch}
.head p{color:var(--muted);max-width:56ch;font-size:var(--t-lg)}
@media(min-width:900px){
  .head{grid-template-columns:1fr 1fr;align-items:end;gap:28px}
  .head .hl{grid-column:1}
  .head p{grid-column:2;justify-self:end}
  .head.simple{grid-template-columns:1fr;gap:12px}
  .head.simple p{grid-column:1;justify-self:start}
}
.head.simple h2{font-size:var(--t-3xl);max-width:24ch}
.head.simple p{font-size:var(--t-base);max-width:48ch}
.sec.tight .wrap{max-width:900px}

/* ---------- indice de servicios ----------
   Filas numeradas a filo de linea, no tarjetas redondeadas. El barrido de color
   entra desde la izquierda al pasar el cursor: la fila responde entera. */
.svc{border-top:1px solid var(--line-2)}
.svc > li{border-bottom:1px solid var(--line)}
.svc a,.svc .st{position:relative;isolation:isolate;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:0 clamp(16px,3vw,34px);
  align-items:start;padding:clamp(26px,3.6vw,42px) 0;
  text-decoration:none;color:inherit;
  transition:padding-inline var(--slow) var(--out)}
.svc .sw{position:absolute;inset:0 100% 0 0;z-index:-1;background:var(--acc-dim);
  transition:inset var(--slow) var(--out)}
.svc a:hover .sw,.svc a:focus-visible .sw{inset:0}
.svc .k{font-variant-numeric:tabular-nums;font-weight:500;font-size:var(--t-xs);
  letter-spacing:.14em;color:var(--muted-2);padding-top:.85em;
  transition:color var(--dur) var(--out)}
.svc .t{display:block;font-size:var(--t-3xl);font-weight:600;letter-spacing:-.035em;
  line-height:1.04;transition:color var(--dur) var(--out)}
.svc .d{display:block;margin-top:13px;max-width:54ch;color:var(--muted);
  font-size:var(--t-sm);line-height:1.62}
/* Las etiquetas van separadas por <i>/</i> sin espacios alrededor, asi que en
   linea el navegador las trata como una sola palabra larguisima: a 390px
   "Tipografia/Iconografia" no cabia y empujaba la pagina 3px de ancho. En flex
   cada etiqueta es un item y rompe entera, nunca por la mitad. */
.svc .tg{grid-column:2;display:flex;flex-wrap:wrap;align-items:baseline;
  margin-top:17px;font-size:var(--t-xs);
  letter-spacing:.11em;text-transform:uppercase;line-height:2;color:var(--muted-2)}
.svc .tg i{font-style:normal;padding:0 .6em;color:var(--acc);opacity:.75}
.svc .go{display:none}
.svc a:hover .t,.svc a:focus-visible .t,
.svc a:hover .k,.svc a:focus-visible .k{color:var(--acc-hi)}
@media(min-width:1000px){
  .svc a{grid-template-columns:auto minmax(0,1.3fr) minmax(0,.78fr) auto;
    gap:0 clamp(24px,3.4vw,52px)}
  .svc .st{grid-template-columns:auto minmax(0,1.3fr) minmax(0,.78fr);
    gap:0 clamp(24px,3.4vw,52px)}
  .svc a:hover,.svc a:focus-visible{padding-inline:clamp(14px,1.7vw,26px)}
  .svc .tg{grid-column:3;margin-top:.5em}
  .svc .go{display:block;font-size:var(--t-xl);line-height:1;color:var(--muted-2);
    padding-top:.25em;
    transition:transform var(--dur) var(--out),color var(--dur) var(--out)}
  .svc a:hover .go,.svc a:focus-visible .go{transform:translateX(7px);color:var(--acc-hi)}
}
@media(prefers-reduced-motion:reduce){
  .svc a,.svc .sw,.svc .go{transition:none}
  .svc a:hover,.svc a:focus-visible{padding-inline:0}
}

/* tarjetas: se conservan por compatibilidad, sin el aire de plantilla */
.bento{display:grid;gap:1px;grid-template-columns:1fr;background:var(--line);
  border:1px solid var(--line)}
.card{position:relative;overflow:hidden;border:0;border-radius:0;
  background:var(--bg);
  padding:clamp(24px,3.4vw,38px);display:flex;flex-direction:column;gap:14px;
  transition:background var(--dur) var(--out)}
.card h3{font-size:var(--t-2xl)}
.card p{color:var(--muted)}
.card ul{display:flex;flex-wrap:wrap;gap:0 14px;margin-top:auto;padding-top:14px;
  font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2)}
.card li{padding:3px 0}
@media(min-width:900px){
  .bento{grid-template-columns:repeat(5,1fr)}
  .card.wide{grid-column:span 3}
  .card.half{grid-column:span 2}
}

/* ---------- proceso ---------- */
.proc{display:grid;gap:clamp(30px,5vw,64px)}
@media(min-width:960px){.proc{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
  .proc .left{position:sticky;top:110px}}
.steps{border-top:1px solid var(--line-2)}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:14px clamp(18px,3.2vw,38px);
  padding-block:clamp(26px,3.4vw,40px);border-bottom:1px solid var(--line);align-items:start}
/* numeral calado: da escala sin anadir un objeto mas */
.step .k{font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--t-3xl);
  letter-spacing:-.04em;line-height:.9;color:var(--muted-2);opacity:.45;
  transition:opacity var(--dur) var(--out),color var(--dur) var(--out)}
@supports(-webkit-text-stroke:1px currentColor){
  .step .k{color:transparent;opacity:1;-webkit-text-stroke:1px var(--line-2);
    transition:-webkit-text-stroke-color var(--dur) var(--out),color var(--dur) var(--out)}
  .step:hover .k{-webkit-text-stroke-color:var(--acc-hi);color:transparent}
}
.step:hover .k{color:var(--acc-hi);opacity:1}
.step h3{font-size:var(--t-xl);margin-bottom:9px;transition:color var(--dur) var(--out)}
.step:hover h3{color:var(--acc-hi)}
.step p{color:var(--muted);font-size:var(--t-sm);max-width:56ch}
.step .when{grid-column:2;font-variant-numeric:tabular-nums;font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.14em;color:var(--acc-hi);margin-top:14px}

/* ---------- work index ---------- */
.idx{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:auto 1fr;gap:6px clamp(14px,3vw,28px);
  align-items:baseline;padding-block:clamp(22px,3.2vw,34px);border-bottom:1px solid var(--line);
  position:relative;transition:padding-inline var(--dur) var(--out)}
.row .k{font-variant-numeric:tabular-nums;font-weight:500;font-size:var(--t-xs);color:var(--muted-2);letter-spacing:.14em}
.row .t{font-size:var(--t-3xl);font-weight:600;letter-spacing:-.03em;
  overflow-wrap:break-word;min-width:0;transition:color var(--dur) var(--out)}
.row .meta{font-variant-numeric:tabular-nums;font-size:var(--t-sm);color:var(--muted-2);letter-spacing:0;
  grid-column:2}
@media(min-width:620px){
  .row{grid-template-columns:auto 1fr auto}
  .row .meta{grid-column:3;text-align:right}
}
/* una fila con caso publicado es un enlace; hereda todo menos el azul de sistema */
a.row{color:inherit;text-decoration:none}
.row:hover .t,a.row:focus-visible .t{color:var(--acc-hi)}
a.row:focus-visible .bar{width:100%}
.row .bar{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--acc);
  transition:width var(--slow) var(--out)}
.row:hover .bar{width:100%}
.note{margin-top:26px;font-size:var(--t-sm);color:var(--muted-2);
  border-left:2px solid var(--acc-line);padding-left:14px;line-height:1.8}

/* ---------- light inverted section ---------- */
.lt{background:var(--lt-bg);color:var(--lt-text)}
.lt .eyebrow{color:var(--lt-muted)}
.lt .head p{color:var(--lt-muted)}
.lt .note{color:var(--lt-muted);border-left-color:rgba(43,107,255,.5)}
/* citas colgadas: filete arriba y comilla grande, sin tarjeta blanca */
.quotes{display:grid;gap:clamp(30px,4.4vw,52px);border-top:1px solid var(--lt-line)}
/* Estaban a dos columnas dentro de un ancho de 900: cada cita quedaba en unos
   330px con tipo de 28px, o sea 19 caracteres por linea. Una cita de verdad a
   ese ancho se lee a tropezones. Van una debajo de otra, con la firma en una
   columna al margen: la cita recupera medida y la atribucion no le roba sitio. */
@media(min-width:840px){
  .quotes .q{display:grid;grid-template-columns:minmax(0,1fr) 180px;
    gap:clamp(26px,3vw,44px);align-items:start}
  .quotes .q+.q{border-top:1px solid var(--lt-line);
    margin-top:clamp(34px,4vw,54px);padding-top:clamp(34px,4vw,54px)}
  .quotes .q blockquote{grid-column:1}
  .quotes .q figcaption{grid-column:2;margin-top:.4em}
}
.q{margin:0;position:relative;padding-top:clamp(30px,3.6vw,46px);
  display:flex;flex-direction:column;gap:20px}
.q::before{content:"”";position:absolute;top:.1em;left:-.04em;z-index:0;
  font-size:6.5rem;line-height:.8;color:var(--acc);opacity:.16;pointer-events:none}
/* en el movil la cita se queda en una columna de 350px: a 28px fijos serian 25
   caracteres por linea, asi que el cuerpo baja con el ancho y no al reves */
.q blockquote{margin:0;position:relative;z-index:1;
  font-size:clamp(1.2rem,.92rem + 1.15vw,1.75rem);
  font-weight:500;letter-spacing:-.03em;line-height:1.28;
  text-wrap:pretty;color:var(--lt-text)}
.q blockquote::before{content:"«"}
.q blockquote::after{content:"»"}
.q figcaption,.q .who{margin-top:auto;font-size:var(--t-sm)}
.q figcaption b,.q .who b{display:block;font-weight:600}
.q figcaption span,.q .who span{display:block;color:var(--lt-muted)}

/* ---------- pricing ---------- */
.plans{border-top:1px solid var(--line-2)}
.phead{display:none}
.plan{border-bottom:1px solid var(--line);padding-block:24px;
  display:grid;gap:16px;align-items:start;
  transition:background var(--dur) var(--out)}
.plan .pn{display:flex;gap:12px;align-items:baseline}
.plan .num{font-size:var(--t-sm);color:var(--muted-2);font-variant-numeric:tabular-nums;
  letter-spacing:.14em;flex:none;padding-top:2px}
.plan h3,.plan h2{font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em;line-height:1.2;
  transition:color var(--dur) var(--out)}
.plan .desc{color:var(--muted);font-size:var(--t-sm);margin-top:5px}
.inc{display:flex;flex-wrap:wrap;gap:7px}
.inc li{font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-2);padding:2px 0}
.inc li+li::before{content:"/";padding-right:7px;color:var(--acc);opacity:.7}
.plan .price{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.plan .price small{display:block;font-size:var(--t-sm);font-weight:400;color:var(--muted-2);
  letter-spacing:0;margin-bottom:6px}
.plan .go{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:500;
  color:var(--acc-hi);text-decoration:none;white-space:nowrap;
  transition:color var(--fast) var(--out)}
.plan .go .arw{transition:transform var(--dur) var(--out)}
.plan:hover .go .arw,.plan .go:focus-visible .arw{transform:translateX(3px)}
@media(min-width:960px){
  .phead,.plan{grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) 130px 168px;
    gap:28px;align-items:center}
  .phead{display:grid;padding-bottom:12px;font-size:var(--t-sm);color:var(--muted-2)}
  .phead .r{text-align:right}
  .plan{padding-block:26px}
  .plan .price{text-align:right}
  .plan .act{justify-self:end}
  .plan:hover h3,.plan:hover h2{color:var(--acc-hi)}
}
@media(min-width:960px){.plan .foot{display:contents}}
@media(max-width:959px){
  .plan .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
    flex-wrap:wrap}
}

/* incluido en todos los planes */
.always{margin-top:clamp(34px,4vw,54px);border-top:1px solid var(--line);
  padding-top:clamp(20px,2.6vw,30px)}
.always > p{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:20px}
.always ul{display:grid;gap:14px}
@media(min-width:680px){.always ul{grid-template-columns:repeat(2,1fr);gap:14px 28px}}
@media(min-width:1000px){.always ul{grid-template-columns:repeat(4,1fr)}}
.always li{position:relative}
.ft{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;width:100%;
  font-family:inherit;font-size:var(--t-sm);line-height:1.45;color:var(--muted);text-align:left;
  background:none;border:0;padding:0;cursor:help;transition:color var(--fast) var(--out)}
.ft:hover,.ft:focus-visible{color:var(--text)}
.ft:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:2px}
.ft svg{margin-top:3px;flex:none;color:var(--acc-hi)}
.ft .lb{border-bottom:1px dashed var(--line-2)}
.tip{position:absolute;left:0;bottom:calc(100% + 10px);z-index:20;
  width:max-content;max-width:min(260px,70vw);
  background:var(--surf-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:10px 13px;font-size:var(--t-xs);line-height:1.55;color:var(--text);letter-spacing:0;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity var(--fast) var(--out),transform var(--fast) var(--out),visibility 0s linear var(--fast)}
.ft:hover+.tip,.ft:focus-visible+.tip{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.tip{transition:none;transform:none}}

.pcta{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.pcta p{font-size:var(--t-sm);color:var(--muted-2);max-width:52ch}

/* ---------- marquesina ----------
   Una sola vez por pagina, antes del cierre. Se detiene al pasar el cursor. */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(14px,1.9vw,24px);background:var(--bg-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-t{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq-t span{display:block;flex:none;white-space:nowrap;
  font-size:var(--t-4xl);font-weight:600;letter-spacing:-.04em;line-height:1.1;
  color:var(--muted-2);opacity:.6}
.mq-t i{font-style:normal;color:var(--acc);opacity:.85;padding-inline:.12em}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-t{animation:none}}

/* ---------- final cta ---------- */
.final{position:relative;overflow:hidden;isolation:isolate;text-align:left;
  padding-block:clamp(88px,13vw,164px);border-top:1px solid var(--line)}
.final h2{font-size:var(--t-4xl);letter-spacing:-.045em;line-height:1;max-width:18ch;margin-inline:0}
.final p{margin:0;max-width:48ch;color:var(--muted);font-size:var(--t-lg)}
.final .acts{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;margin-top:32px}
.final .fine{margin-top:20px;font-size:var(--t-sm);color:var(--muted-2)}
.fin-g{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:960px){
  .fin-g{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;
    gap:clamp(32px,5vw,80px)}
  .final h2{font-size:clamp(2.6rem,4.2vw,3.9rem);max-width:none;line-height:.98}
  .fin-b{padding-bottom:6px}
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding-block:44px 30px}
.fgrid{display:grid;gap:30px}
@media(min-width:760px){.fgrid{grid-template-columns:1.4fr 1fr 1fr}}
footer img{filter:invert(1);height:17px;width:auto;opacity:.9}
footer .blurb{margin-top:16px;color:var(--muted-2);font-size:var(--t-sm);max-width:34ch}
footer .fh{font-variant-numeric:tabular-nums;font-weight:500;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);font-weight:400;margin-bottom:14px}
footer li+li{margin-top:9px}
footer a{color:var(--muted);text-decoration:none;font-size:var(--t-sm);
  transition:color var(--fast) var(--out)}
footer a:hover{color:var(--text)}
.fbot{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-size:var(--t-sm);color:var(--muted-2);letter-spacing:0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .rv.seq > *{opacity:1;transform:none}
  .mask{overflow:visible}
  .mask > span{transform:none}
  .hero .aura{opacity:1}
}

/* ==========================================================================
   Multipagina — anadidos
   ========================================================================== */

/* ---------- nav: menu movil ---------- */
.nav .inner{position:relative}
.burger{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin-left:auto;font-family:var(--sans);font-size:var(--t-sm);font-weight:500;
  color:var(--text);background:rgba(255,255,255,.045);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:9px 14px;cursor:pointer;
  transition:background var(--dur) var(--out),border-color var(--dur) var(--out)}
.burger:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.26)}
.burger .bars{display:grid;gap:4px;width:15px}
.burger .bars i{display:block;height:1.5px;background:currentColor;border-radius:1px;
  transition:transform var(--dur) var(--out),opacity var(--fast) var(--out)}
.burger[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.menu{position:fixed;inset:68px 0 0;z-index:55;background:var(--bg);
  border-top:1px solid var(--line);padding:clamp(24px,6vw,48px) var(--pad) 40px;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--out),transform var(--dur) var(--out),
             visibility 0s linear var(--dur)}
.menu[data-open="true"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu ul{display:grid;gap:2px;border-top:1px solid var(--line)}
.menu li{border-bottom:1px solid var(--line)}
.menu a{display:flex;align-items:baseline;gap:16px;padding-block:18px;text-decoration:none;
  font-size:var(--t-3xl);letter-spacing:-.03em;font-weight:600;color:var(--text)}
.menu a .n{font-size:var(--t-xs);letter-spacing:.14em;color:var(--muted-2);
  font-variant-numeric:tabular-nums;flex:none;min-width:2ch}
.menu a[aria-current="page"]{color:var(--acc-hi)}
.menu a[aria-current="page"] .n{color:var(--acc-hi)}
.menu .mcta{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.menu .mmail{margin-top:26px;font-size:var(--t-sm);color:var(--muted-2)}
.menu .mmail a{font-size:var(--t-sm);font-weight:400;color:var(--muted);
  letter-spacing:0;display:inline;padding:0}
body.locked{overflow:hidden}
@media(min-width:880px){.burger{display:none}.menu{display:none}}

/* ---------- hero de pagina interior ---------- */
.phero{padding-block:clamp(52px,8vw,104px) clamp(34px,5vw,58px);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--acc),transparent 42%)}
.phero h1{font-size:clamp(2.2rem,5.4vw,4.1rem);letter-spacing:-.04em;line-height:1;max-width:none;margin-top:18px}
.phero p{margin-top:22px;max-width:52ch;font-size:var(--t-lg);color:var(--muted)}
@media(min-width:1000px){
  .phero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(26px,3.4vw,46px) clamp(30px,5vw,72px);align-items:end}
  .phero .hl{grid-column:1/-1}
  .phero h1{margin-top:16px;font-size:clamp(2.4rem,5vw,4.5rem);letter-spacing:-.045em}
  .phero p{grid-column:2;margin:0 0 6px}
}

/* ---------- tarjetas de servicio (mejora) ---------- */
.card{padding-top:clamp(20px,2.8vw,30px)}
.card .top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.card .n{font-variant-numeric:tabular-nums;font-size:var(--t-xs);letter-spacing:.14em;
  color:var(--muted-2);flex:none}
.card .tick{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);flex:none}
.card:hover .n,.card:hover .tick{color:var(--acc-hi)}
.card .lk{margin-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-sm);font-weight:500;color:var(--acc-hi);text-decoration:none}
.card .lk .arw{transition:transform var(--dur) var(--out)}
.card:hover .lk .arw,.card .lk:focus-visible .arw{transform:translateX(3px)}

/* ---------- indice de proyectos (mejora) ---------- */
.row{transition:background var(--dur) var(--out)}
.row .tags{grid-column:2;display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.row .tags span{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 9px}
.row .go{grid-column:2;margin-top:12px;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-sm);font-weight:500;color:var(--acc-hi);text-decoration:none}
.row .go .arw{transition:transform var(--dur) var(--out)}
.row:hover .go .arw{transform:translateX(3px)}
@media(min-width:620px){
  .row{grid-template-columns:auto 1fr auto;align-items:start}
  .row .t{grid-column:2}
  .row .tags{grid-column:2}
  .row .meta{grid-column:3;grid-row:1;text-align:right;padding-top:.5em}
  .row .go{grid-column:3;grid-row:2;justify-self:end;margin-top:14px}
}
.row[data-soon="true"]{opacity:.62}

/* ---------- FAQ (acordeon) ---------- */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq .it{border-bottom:1px solid var(--line)}
.faq .tg{width:100%;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  background:none;border:0;padding:clamp(18px,2.4vw,24px) 0;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-lg);font-weight:500;letter-spacing:-.02em;
  line-height:1.35;color:var(--text);text-align:left;
  transition:color var(--fast) var(--out)}
.faq .tg:hover{color:var(--acc-hi)}
.faq .tg .ic{flex:none;width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;color:var(--muted);
  transition:transform var(--dur) var(--out),color var(--dur) var(--out),
             border-color var(--dur) var(--out)}
.faq .tg[aria-expanded="true"] .ic{transform:rotate(180deg);color:var(--acc-hi);
  border-color:var(--acc-line)}
.faq .a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur) var(--io)}
.faq .it[data-open="true"] .a{grid-template-rows:1fr}
.faq .a > div{overflow:hidden}
.faq .a p{color:var(--muted);max-width:62ch;padding-bottom:clamp(20px,2.6vw,26px)}
.faq .a p + p{padding-top:14px}
@media(prefers-reduced-motion:reduce){.faq .a{transition:none}}

/* ---------- formulario de contacto ---------- */
.cwrap{display:grid;gap:clamp(36px,6vw,80px)}
@media(min-width:960px){.cwrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.cinfo h2{font-size:var(--t-3xl);max-width:22ch;margin-top:16px}
.cinfo p{color:var(--muted);margin-top:18px;max-width:40ch}
.cinfo dl{margin:30px 0 0;border-top:1px solid var(--line)}
.cinfo dt{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);padding-top:18px}
.cinfo dd{margin:6px 0 18px;font-size:var(--t-base);border-bottom:1px solid var(--line);
  padding-bottom:18px}
.cinfo dd a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--acc-line);
  transition:color var(--fast) var(--out)}
.cinfo dd a:hover{color:var(--acc-hi)}
.cinfo dd span{color:var(--muted)}

.form{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surf);
  padding:clamp(22px,3.4vw,38px)}
.fields{display:grid;gap:18px}
@media(min-width:620px){.fields{grid-template-columns:1fr 1fr}.f.full{grid-column:1/-1}}
.f{display:grid;gap:8px;min-width:0}
.f label{font-size:var(--t-sm);font-weight:500;color:var(--text)}
.f label .opt{font-weight:400;color:var(--muted-2)}
.f input,.f select,.f textarea{
  font-family:var(--sans);font-size:var(--t-base);color:var(--text);
  background:var(--bg);border:1px solid var(--field-line);border-radius:var(--r-md);
  padding:12px 14px;width:100%;min-width:0;
  transition:border-color var(--fast) var(--out),background var(--fast) var(--out)}
.f textarea{min-height:132px;resize:vertical;line-height:1.55}
.f select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px}
.f input::placeholder,.f textarea::placeholder{color:var(--muted-2)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:rgba(255,255,255,.46)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{
  outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.f .hint{font-size:var(--t-xs);color:var(--muted-2);letter-spacing:0;line-height:1.6}
/* campo que llega ya elegido desde el asistente: se marca para que se note
   que no lo eligio el visitante y pueda cambiarlo sin buscarlo */
.f.prefilled select{border-color:var(--acc-line);background-color:var(--acc-dim)}
.f.prefilled label::after{content:"elegido en el asistente";margin-left:10px;
  font-size:var(--t-xs);font-weight:400;letter-spacing:.02em;color:var(--acc-hi)}
.f.chk{grid-template-columns:auto 1fr;gap:12px;align-items:start}
.f.chk input{width:17px;height:17px;margin-top:3px;accent-color:var(--acc);padding:0}
.f.chk label{font-size:var(--t-sm);font-weight:400;color:var(--muted);line-height:1.6}
.f.chk label a{color:var(--text)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fsend{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.fsend .fine{margin-top:0}
.setup{margin-top:20px;font-size:var(--t-sm);color:var(--muted-2);line-height:1.75;
  border-left:2px solid var(--acc-line);padding-left:14px}
.setup code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;color:var(--text)}

/* ---------- misc multipagina ---------- */
.final .fine{margin-inline:0}
.crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  font-size:var(--t-sm);color:var(--muted-2)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--text)}
.nxt{border-top:1px solid var(--line);padding-block:clamp(30px,4vw,44px)}
.nxt .wrap{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;
  justify-content:space-between}
.nxt p{color:var(--muted)}

/* ---------- adelanto de precios (portada) ---------- */
.tease{border-top:1px solid var(--line-2)}
.tease a{display:grid;grid-template-columns:auto 1fr auto;gap:8px 20px;align-items:baseline;
  padding-block:clamp(15px,2vw,19px);border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:color var(--dur) var(--out)}
.tease .n{font-variant-numeric:tabular-nums;font-size:var(--t-xs);letter-spacing:.14em;
  color:var(--muted-2)}
.tease .t{font-size:var(--t-lg);font-weight:500;letter-spacing:-.02em;min-width:0}
.tease .p{font-variant-numeric:tabular-nums;font-size:var(--t-lg);font-weight:600;
  letter-spacing:-.02em;white-space:nowrap;text-align:right}
.tease a:hover{color:var(--acc-hi)}
.tease a:hover .n{color:var(--acc-hi)}

/* ---------- dirección más luminosa ----------
   Los bloques claros no son un segundo acento: son el plano de trabajo del estudio.
   El azul queda reservado para acciones y estados interactivos. */
.paper{background:var(--lt-bg);color:var(--lt-text);color-scheme:light}
.paper .eyebrow,.paper .card .n,.paper .card .tick,.paper .tease .n,
.paper .plan .num,.paper .plan .desc,.paper .plan .price small{color:var(--lt-muted)}
.paper .eyebrow::before{background:var(--acc)}
.paper .head p,.paper .card p,.paper .step p,.paper .note,.paper .pcta p{color:var(--lt-muted)}
.paper .card{background:rgba(255,255,255,.72);border-color:var(--lt-line)}
.paper .card:hover{background:#fff;border-color:var(--acc-line);transform:translateY(-3px)}
.paper .card .top,.paper .card li,.paper .steps,.paper .step,.paper .tease,
.paper .tease a,.paper .plans,.paper .plan,.paper .idx,.paper .row,
.paper .svc,.paper .svc > li{border-color:var(--lt-line)}
/* indice de servicios sobre papel: el azul baja a #245BE0 para mantener 4.5:1 */
.paper .bento{background:var(--lt-line);border-color:var(--lt-line)}
.paper .card{background:#fff}
.paper .svc .k,.paper .svc .tg,.paper .svc .go{color:var(--lt-muted)}
.paper .svc .d{color:var(--lt-muted)}
.paper .svc .tg i{color:#245BE0}
.paper .svc .sw{background:rgba(43,107,255,.075)}
.paper .svc a:hover .t,.paper .svc a:focus-visible .t,
.paper .svc a:hover .k,.paper .svc a:focus-visible .k,
.paper .svc a:hover .go,.paper .svc a:focus-visible .go{color:#245BE0}
.paper .step .k{color:var(--lt-muted)}
@supports(-webkit-text-stroke:1px currentColor){
  .paper .step .k{color:transparent;-webkit-text-stroke-color:rgba(16,26,45,.28)}
  .paper .step:hover .k{-webkit-text-stroke-color:#245BE0}
}
.paper .step:hover .k,.paper .step:hover h3{color:#245BE0}
.paper .card li,.paper .row .tags span{color:var(--lt-muted);background:rgba(16,26,45,.025);border-color:var(--lt-line)}
.paper .inc li{color:var(--lt-muted);background:none;border:0}
.paper .inc li+li::before{color:#245BE0}
.paper .lk,.paper .plan .go,.paper .row:hover .t,.paper .tease a:hover{color:#245BE0}
.paper .steps .when,.paper .step .when{color:#245BE0}
.paper .always{background:none;border-color:var(--lt-line)}
.paper .ft{color:var(--lt-muted)}
.paper .ft:hover,.paper .ft:focus-visible{color:var(--lt-text)}
.paper .tip{background:#fff;color:var(--lt-text);border-color:var(--lt-line)}
.paper .plan:hover{background:rgba(43,107,255,.055)}
.paper .plan:hover h2,.paper .plan:hover h3{color:#245BE0}
.paper .form{background:#fff;border-color:var(--lt-line);box-shadow:none}
.paper .f label,.paper .cinfo dd a{color:var(--lt-text)}
.paper .setup{color:var(--lt-muted);border-left-color:rgba(36,91,224,.35)}
.paper .setup code{color:var(--lt-text);background:rgba(16,26,45,.05);
  padding:1px 5px;border-radius:4px}
.paper .f input,.paper .f select,.paper .f textarea{background-color:#F8FAFE;color:var(--lt-text);border-color:rgba(16,26,45,.28)}
.paper .f input:hover,.paper .f select:hover,.paper .f textarea:hover{border-color:rgba(16,26,45,.48)}
.paper .f input::placeholder,.paper .f textarea::placeholder,.paper .f .hint,.paper .f.chk label{color:var(--lt-muted)}
.paper .f select{background-image:linear-gradient(45deg,transparent 50%,var(--lt-muted) 50%),linear-gradient(135deg,var(--lt-muted) 50%,transparent 50%)}
.paper .fsend,.paper .cinfo dl,.paper .cinfo dd{border-color:var(--lt-line)}
.paper .f.chk label a{color:var(--lt-text)}

/* Respuesta inmediata: la web se siente presente al tocarla, no ornamental. */
.card:hover{background:var(--bg-2)}
.paper .card:hover{background:rgba(43,107,255,.05);border-color:transparent;transform:none}
.btn:active{transform:translateY(1px) scale(.985)}
.tease a{position:relative}
.tease a::after{content:"";position:absolute;inset:0 0 0 auto;width:0;z-index:-1;
  background:linear-gradient(90deg,rgba(43,107,255,.14),rgba(43,107,255,.02));
  transition:width var(--dur) var(--out)}
.paper .tease a::after{background:linear-gradient(90deg,rgba(36,91,224,.11),rgba(36,91,224,.015))}
.tease a:hover::after,.tease a:focus-visible::after{width:100%}
@media(prefers-reduced-motion:reduce){.card:hover{transform:none}.tease a::after{transition:none}}

/* ==========================================================================
   Capa de arte — cuatro gestos que se repiten en las seis paginas.
   1. el plano    un solo fondo continuo: reticula de taller, grano y luz rasante
   2. la luz      las filas y tarjetas responden al cursor
   3. la profundidad  el scroll separa los planos
   4. el filete   cada seccion se abre dibujando una linea
   Ninguno es un adorno suelto: los cuatro son sistema.
   ========================================================================== */

/* ---------- 1. el plano ---------- */
.weave{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;
  opacity:0;transition:opacity 1600ms var(--out)}
.ready .weave{opacity:1}
.weave i{position:absolute;display:block}

/* la reticula: papel de taller, no decoracion. Se apaga hacia abajo. */
.weave .grid{inset:-2px;
  background-image:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 100%),
    repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 100%);
  background-size:clamp(58px,7vw,94px) clamp(58px,7vw,94px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.42) 52%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.42) 52%,transparent 92%)}

/* luz rasante: una banda recta que cruza el papel segun avanza la lectura.
   Banda, no mancha: el borde es recto y la direccion es unica. */
.weave .rake{inset:-40vh -60vw;
  background:linear-gradient(104deg,
    transparent 26%,
    rgba(43,107,255,.115) 42%,
    rgba(96,152,255,.075) 50%,
    rgba(43,107,255,.045) 57%,
    transparent 74%);
  transform:translate3d(calc(var(--sy,0) * 34vw - 17vw),calc(var(--sy,0) * -14vh + 7vh),0)}

/* grano: le quita el acabado plastico a todo lo demas */
.weave .grain{inset:0;opacity:.05;mix-blend-mode:overlay;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E")}

/* vineta: mantiene los bordes en calma para que mande el contenido */
.weave .vig{inset:0;background:radial-gradient(118% 78% at 50% 34%,transparent 46%,rgba(5,10,20,.55) 100%)}

/* el hero conserva su propio fondo: la capa no se cuela por detras del shader */
.hero{background:var(--bg)}

/* el papel es opaco y tapa la capa fija, asi que lleva el mismo plano en tinta.
   background-attachment:fixed alinea la reticula con la de las zonas oscuras,
   de modo que la cuadricula es una sola y continua de arriba abajo del sitio. */
.paper{
  background-image:
    repeating-linear-gradient(90deg,rgba(16,26,45,.045) 0 1px,transparent 1px 100%),
    repeating-linear-gradient(0deg,rgba(16,26,45,.045) 0 1px,transparent 1px 100%),
    linear-gradient(104deg,transparent 28%,rgba(36,91,224,.055) 45%,rgba(36,91,224,.02) 56%,transparent 72%);
  background-size:
    clamp(58px,7vw,94px) clamp(58px,7vw,94px),
    clamp(58px,7vw,94px) clamp(58px,7vw,94px),
    auto;
  background-attachment:fixed,fixed,fixed;
  background-color:var(--lt-bg)}
/* grano tambien sobre papel: sin el, el blanco se ve plastico */
.paper{position:relative}
.paper::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E")}
.paper > *{position:relative;z-index:1}

/* ---------- 2. la luz ---------- */
/* .tease conserva su barrido lateral: no se le anade luz encima */
.svc a,.row,.plan,.card,.faq .it,.form,.q{position:relative;isolation:isolate}
.svc a::after,.row::after,.plan::after,.card::after,
.faq .it::after,.form::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(clamp(180px,26vw,380px) 190px at var(--lx,50%) var(--ly,50%),
    rgba(96,152,255,.15),rgba(43,107,255,.05) 46%,transparent 72%);
  transition:opacity var(--slow) var(--out)}
.svc a:hover::after,.row:hover::after,.plan:hover::after,.card:hover::after,
.faq .it:hover::after,.form:focus-within::after,
.svc a:focus-visible::after{opacity:1}
/* sobre papel la luz es sombra de tinta, no brillo */
.paper .svc a::after,.paper .row::after,.paper .plan::after,.paper .card::after,
.paper .faq .it::after,.paper .form::after{
  background:radial-gradient(clamp(180px,26vw,380px) 190px at var(--lx,50%) var(--ly,50%),
    rgba(36,91,224,.09),transparent 70%)}

/* ---------- 3. la profundidad ---------- */
.par{transform:translate3d(0,var(--pty,0px),0);will-change:transform}

/* firma calada al pie de cada pagina: escala sin anadir un objeto mas */
.final::before{content:"AVADEMA";position:absolute;left:50%;bottom:-.26em;z-index:-1;
  font-size:clamp(4.6rem,19vw,16.5rem);font-weight:700;letter-spacing:-.065em;line-height:.78;
  white-space:nowrap;pointer-events:none;user-select:none;color:transparent;
  -webkit-text-stroke:1px var(--line-2);
  transform:translate3d(-50%,var(--pty,0px),0)}
.paper.final::before{-webkit-text-stroke-color:rgba(16,26,45,.13)}

/* ---------- 4. el filete ---------- */
.head{position:relative;padding-bottom:clamp(19px,2.5vw,28px)}
.head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--acc) 0%,var(--line-2) 26%,var(--line) 100%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1200ms var(--out) 140ms}
.head.in::after,.rv.in .head::after{transform:scaleX(1)}
.paper .head::after{background:linear-gradient(90deg,#245BE0 0%,var(--lt-line) 30%,rgba(16,26,45,.07) 100%)}

/* el bloque entra con mas recorrido: se nota que algo pasa */
.rv{transform:translateY(15px)}

/* ---------- transicion entre paginas ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut 220ms var(--io) both}
::view-transition-new(root){animation:vtIn 440ms var(--out) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;clip-path:inset(0 0 100% 0)}
  to{opacity:1;clip-path:inset(0 0 0 0)}}

/* ---------- barra de lectura ---------- */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:3;
  background:linear-gradient(90deg,var(--acc),var(--acc-hi));
  transform:scaleX(var(--rp,0));transform-origin:0 50%;opacity:.9}

@media(prefers-reduced-motion:reduce){
  .weave .rake{transform:none}
  .par,.final::before{transform:none}
  .final::before{transform:translateX(-50%)}
  .head::after{transform:scaleX(1);transition:none}
  .svc a::after,.row::after,.plan::after,.card::after,
  .faq .it::after,.form::after{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ==========================================================================
   El plano de trabajo pasa a tinta
   --------------------------------------------------------------------------
   Los bloques .paper y .lt eran papel claro. Sobre una marca que es azul
   marino de arriba abajo, esa banda blanca cortaba la pagina en dos y se
   comia el plano fijo (reticula, grano, luz rasante) que da continuidad al
   sitio. Asi que el papel deja de ser blanco y pasa a ser un plano de marino
   apenas levantado sobre el fondo: sigue siendo una superficie distinta —se
   nota el escalon, y por eso el ritmo de secciones se conserva— pero ya no
   es un cambio de tema, solo un cambio de altura.
   Se redefinen los cuatro tokens, y debajo solo lo que estaba escrito en
   duro (#fff, #245BE0, tintas al 16,26,45) y que por tanto no los sigue.
   ========================================================================== */
:root{
  --lt-bg:#0E1B33; --lt-text:#EAF1FF; --lt-muted:#94A6C6; --lt-line:rgba(150,184,255,.15);
}
.paper,.lt{color-scheme:dark}
/* el escalon se lee por el filo, no por el color */
.paper,.lt{border-top:1px solid rgba(150,184,255,.11);
  border-bottom:1px solid rgba(150,184,255,.11)}
.paper+.paper,.lt+.paper,.paper+.lt{border-top:0}

/* --- tarjetas y superficies --- */
.paper .card{background:rgba(255,255,255,.035)}
.paper .card:hover{background:rgba(43,107,255,.075);border-color:transparent;transform:none}
.paper .bento{background:rgba(255,255,255,.055)}
.paper .card li,.paper .row .tags span{background:rgba(255,255,255,.04)}
.paper .tip{background:var(--surf);color:var(--lt-text)}
.paper .form{background:rgba(255,255,255,.03)}
.paper .setup code{background:rgba(255,255,255,.07)}
.paper .f input,.paper .f select,.paper .f textarea{
  background-color:rgba(255,255,255,.035);border-color:var(--field-line)}
.paper .f input:hover,.paper .f select:hover,.paper .f textarea:hover{
  border-color:rgba(255,255,255,.5)}

/* --- el azul sube: sobre tinta manda #6098FF, no el #245BE0 de papel --- */
.paper .svc .tg i,.paper .inc li+li::before,
.paper .lk,.paper .plan .go,.paper .row:hover .t,.paper .tease a:hover,
.paper .steps .when,.paper .step .when{color:var(--acc-hi)}
.paper .svc a:hover .t,.paper .svc a:focus-visible .t,
.paper .svc a:hover .k,.paper .svc a:focus-visible .k,
.paper .svc a:hover .go,.paper .svc a:focus-visible .go{color:var(--acc-hi)}
.paper .step:hover .k,.paper .step:hover h3{color:var(--acc-hi)}
.paper .plan:hover h2,.paper .plan:hover h3{color:var(--acc-hi)}
.paper .svc .sw{background:rgba(96,152,255,.09)}
.paper .setup{border-left-color:rgba(96,152,255,.4)}
@supports(-webkit-text-stroke:1px currentColor){
  .paper .step .k{color:transparent;-webkit-text-stroke-color:rgba(255,255,255,.2)}
  .paper .step:hover .k{-webkit-text-stroke-color:var(--acc-hi)}
}
.paper .tease a::after{background:linear-gradient(90deg,rgba(43,107,255,.14),rgba(43,107,255,.02))}
.paper .head::after{background:linear-gradient(90deg,var(--acc) 0%,var(--line-2) 26%,var(--line) 100%)}
.paper.final::before{-webkit-text-stroke-color:var(--line-2)}

/* --- el plano continuo: la reticula del papel se dibuja en luz, no en tinta,
       para que sea la misma cuadricula que la del resto de la pagina --- */
.paper{
  background-image:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 100%),
    repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 100%),
    linear-gradient(104deg,transparent 28%,rgba(43,107,255,.075) 45%,rgba(43,107,255,.025) 56%,transparent 72%);
  background-color:var(--lt-bg)}
/* el grano sobre tinta se suma, no se multiplica */
.paper::after{mix-blend-mode:overlay;opacity:.05}
/* y la luz del cursor vuelve a ser luz */
.paper .svc a::after,.paper .row::after,.paper .plan::after,.paper .card::after,
.paper .faq .it::after,.paper .form::after{
  background:radial-gradient(clamp(180px,26vw,380px) 190px at var(--lx,50%) var(--ly,50%),
    rgba(96,152,255,.15),rgba(43,107,255,.05) 46%,transparent 72%)}

/* ==========================================================================
   Un solo plano, de arriba abajo
   --------------------------------------------------------------------------
   El paso anterior quito el blanco, pero .paper seguia siendo una superficie
   propia: color distinto, reticula propia y un filo arriba y abajo. Eso es
   justo el marco que se veia. Aqui .paper y .lt dejan de tener fondo: el
   plano fijo (reticula, grano, luz rasante) pasa por detras sin cortarse, y
   la pagina entera queda sobre el mismo fondo que el hero.
   Se conserva todo lo demas de .paper —el azul claro, los bordes de las
   tarjetas, el contraste del texto— porque eso no era el marco.
   ========================================================================== */
.paper,.lt{background:none;background-color:transparent;
  border-top:0;border-bottom:0}
.paper::after{content:none}

/* Se probo dejar el hero sin fondo para que el plano fijo pasara por detras.
   Medido: no pasa. El hero tiene isolation:isolate, asi que su lienzo —que es
   opaco— vive en su propia capa y tapa el plano igual. La regla no hacia nada
   salvo quitarle el respaldo al hero cuando no hay WebGL, asi que vuelve a ser
   opaco y el corte se arregla mas abajo, por donde de verdad se ve. */
.hero{background:var(--bg)}
/* el plano estaba cortado arriba para no estorbar al hero; ya no hace falta */
.weave .grid{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.46) 34%,rgba(0,0,0,.4) 64%,transparent 96%);
             mask-image:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.46) 34%,rgba(0,0,0,.4) 64%,transparent 96%)}

/* Medido: el hero termina exactamente en #0B1426 y justo debajo el plano fijo
   suma su luz rasante y sube a ~#111E39. Ese salto de golpe es la raya. No se
   puede llevar el plano por detras del hero —ahi manda el shader, que es
   opaco— asi que se hace al reves: la seccion que sigue empieza tapada con el
   mismo #0B1426 con el que acaba el hero, y lo suelta poco a poco. El plano
   entra, no aparece. */
.hero + .sec{position:relative}
.hero + .sec::before{content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(160px,30vh,340px);z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    var(--bg) 0%,rgba(11,20,38,.88) 26%,rgba(11,20,38,.55) 56%,
    rgba(11,20,38,.22) 80%,transparent 100%)}

/* ==========================================================================
   Pasada de movil
   --------------------------------------------------------------------------
   Todo lo de abajo esta medido a 390x844 (iPhone 14/15) con el navegador en
   modo tactil, no a ojo. Dos problemas reales y ninguno se ve en el escritorio:

   1. Areas de toque. La guia de Apple pide 44px y la WCAG 2.5.8 exige 24px
      como minimo. El burger daba 35, "Pedir presupuesto" 21, los botones de
      "incluido en todos los planes" 20, los enlaces del pie 15 y la casilla
      del formulario 17x17. Se arregla con relleno transparente: el dibujo no
      cambia ni un pixel, solo crece la zona que responde al dedo.
   2. Letra pequena. --t-xs son 11px y --t-sm 13px. En una pantalla de 34mm de
      ancho eso se lee con esfuerzo, asi que suben a 12 y 14 solo aqui.

   El corte es 879px, el mismo en el que ya aparece el menu hamburguesa, para
   no inventar un breakpoint nuevo.
   ========================================================================== */
@media(max-width:879px){

  :root{--t-xs:.75rem; --t-sm:.875rem}

  /* --- nav --- */
  .brand{padding-block:9px}
  .burger{min-height:44px;padding-block:0}

  /* --- precios: el CTA de cada plan --- */
  /* El enlace se queda igual de discreto; lo que crece es el hueco que ocupa. */
  .plan .go{min-height:44px;padding-block:0}

  /* --- precios: incluido en todos los planes --- */
  /* El gap de la lista se convierte en relleno de cada boton: la separacion
     que se ve es casi la misma y cada fila pasa de 20px a 44px de alto. */
  .always ul{gap:2px}
  .ft{padding-block:12px}
  .tip{bottom:calc(100% - 2px)}

  /* --- contacto --- */
  /* El margen negativo devuelve el espacio que suma el relleno, asi que la
     ficha mide lo mismo que antes y el enlace se toca sin apuntar. */
  .cinfo dd a{display:inline-block;padding-block:10px;margin-block:-10px}
  .f.chk input{width:24px;height:24px;margin-top:0}
  .f.chk label{padding-block:3px}
  .f input,.f select,.f textarea{min-height:44px}

  /* --- asistente y hero: la pildora --- */
  /* El campo medía 21px dentro de una pildora de 70, asi que tocar el hueco de
     arriba o de abajo no hacia nada. Estirado ocupa el alto del boton. */
  .pill input{align-self:stretch;min-height:44px}
  .ia-chips button{min-height:40px}

  /* --- pie --- */
  /* Los 9px de margen entre enlaces pasan a ser relleno del propio enlace. */
  footer li+li{margin-top:0}
  footer a{display:inline-block;padding-block:12px;line-height:1.45}
  .fbot{font-size:var(--t-sm)}
}