@font-face{font-family:"Outfit";src:url(/static/fuentes/outfit-300-800.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/static/fuentes/jetbrains-mono-400-600.woff2) format("woff2");font-weight:400 600;font-display:swap}

/* ═══════════ TOKENS ═══════════ */
:root{
  color-scheme:dark;
  --bg:#0e0e10; --c1:#161618; --c2:#1d1d20; --c3:#27272b; --pozo:#111113;
  --line:#232327; --line2:#303036; --line3:rgba(255,255,255,.18);
  --tx:#f4f4f5; --tx2:#b8b8c0; --mu:#8b8b94; --gris:#74747e;
  --blanco:#f4f4f5; --negro:#0e0e10;
  --ok:#34d399; --ok-2:#22a877; --ok-3:#176c4e; --ok-4:#10412f; --ok-w:rgba(52,211,153,.10);
  --bad:#f07565; --wa:#25D366;
  --r-t:24px; --r-p:16px; --r-pill:999px;
  --f:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --m:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --fs-mini:12.5px; --fs-sm:14.5px; --fs-base:17px; --fs-md:19px; --fs-lg:22px;
  --fs-xl:clamp(24px,2.4vw,32px); --fs-h2:clamp(32px,4.6vw,56px); --fs-display:clamp(42px,6.8vw,86px);
  --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:28px; --s6:40px; --s7:64px; --s8:104px;
  --max:1220px;
  --ghl-bg:#0e0e10; --ghl-tx:#f4f4f5; --ghl-lh:1.6;
  --ghl-f:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--tx); overflow-x:hidden;
  font-family:var(--f); font-size:var(--fs-base); line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--tx); outline-offset:3px; border-radius:10px}
::selection{background:var(--tx); color:var(--negro)}
.saltar{
  position:absolute; left:-9999px; top:8px; z-index:1000; background:var(--blanco); color:var(--negro);
  padding:10px 16px; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600;
}
.saltar:focus{left:16px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--s5)}
section{padding:var(--s8) 0; position:relative}
.banda{background:var(--pozo); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ═══════════ TIPOGRAFÍA ═══════════ */
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600}
h1{font-size:var(--fs-display); line-height:1; letter-spacing:-.04em; font-weight:700}
h2{font-size:var(--fs-h2); line-height:1.04; letter-spacing:-.035em; font-weight:700}
h3{font-size:var(--fs-lg); line-height:1.22; letter-spacing:-.02em}
h4{font-size:var(--fs-md); line-height:1.3; letter-spacing:-.015em}
p{margin:0; text-wrap:pretty}
.gris{color:var(--gris)}
.bajada{font-size:var(--fs-md); color:var(--tx2); line-height:1.6; max-width:64ch; margin-top:var(--s4)}
.mono{font-family:var(--m); font-variant-numeric:tabular-nums}
/* la palabra clave, en una píldora blanca */
.clave{
  background:var(--blanco); color:var(--negro); border-radius:.26em; padding:0 .16em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; white-space:nowrap;
}
@media(max-width:330px){.clave{white-space:normal}}
.rotulo{
  font-family:var(--m); font-size:var(--fs-mini); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mu); display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s5);
}
.rotulo b{color:var(--tx); font-weight:500; border:1px solid var(--line2); border-radius:var(--r-pill); padding:4px 10px; letter-spacing:.06em}
.rotulo::after{content:""; flex:1; height:1px; background:var(--line)}
.sub-rotulo{
  font-family:var(--m); font-size:var(--fs-mini); letter-spacing:.12em; text-transform:uppercase;
  color:var(--mu); margin:var(--s7) 0 var(--s4); display:flex; align-items:center; gap:var(--s3);
}
.sub-rotulo::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-w); flex:none}

/* ═══════════ PIEZAS ═══════════ */
.tj{background:var(--c1); border:1px solid var(--line); border-radius:var(--r-t); position:relative; min-width:0}
.pozo{background:var(--pozo); border:1px solid var(--line); border-radius:var(--r-p)}
.chip{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--m); font-size:11.5px; font-weight:500;
  letter-spacing:.02em; line-height:1; padding:6px 10px; border:1px solid var(--line2); border-radius:var(--r-pill);
  color:var(--tx2); white-space:nowrap;
}
/* en un celular chico una etiqueta larga («Distribuidora de informática · Argentina») no entra
   en un renglón y desbordaba 20 px a 320: ahí se deja partir */
@media(max-width:420px){.chip{white-space:normal; line-height:1.35; max-width:100%}}
.chip.ok{border-color:rgba(52,211,153,.4); color:var(--ok); background:var(--ok-w)}
.chip.blanco{background:var(--blanco); border-color:var(--blanco); color:var(--negro)}
.pildora{
  display:inline-flex; align-items:center; gap:10px; padding:8px 15px 8px 12px; margin-bottom:var(--s5);
  border:1px solid var(--line2); border-radius:var(--r-pill); background:var(--c1);
  color:var(--tx2); font-size:var(--fs-sm); font-weight:500; line-height:1.3;
}
.pildora i{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-w); flex:none}
.avales{list-style:none; margin:var(--s6) 0 0; padding:0; display:flex; gap:var(--s2); flex-wrap:wrap}
.avales li{
  font-family:var(--m); font-size:12.5px; color:var(--tx2); line-height:1.3;
  border:1px solid var(--line); background:var(--c1); border-radius:var(--r-pill); padding:8px 13px;
}

/* ═══════════ BOTONES: la píldora blanca manda ═══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); text-align:center;
  min-height:52px; padding:0 var(--s5); border-radius:var(--r-pill); border:1px solid var(--line2);
  background:var(--c2); color:var(--tx); font:600 var(--fs-base)/1.15 var(--f); letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform .15s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{background:var(--c3); border-color:var(--line3)}
.btn:active{transform:scale(.97)}
.btn-blanco{background:var(--blanco); border-color:var(--blanco); color:var(--negro); box-shadow:0 12px 34px rgba(244,244,245,.10)}
.btn-blanco:hover{background:#fff; border-color:#fff; box-shadow:0 16px 44px rgba(244,244,245,.18)}
.btn-linea{background:transparent; border-color:var(--line3)}
.btn-linea:hover{background:var(--c1)}
.btn-sm{min-height:42px; padding:0 var(--s4); font-size:var(--fs-sm)}
@media(max-width:520px){.btn{white-space:normal; padding:14px 20px}}
.enlace{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; color:var(--tx);
  border-bottom:1px solid var(--line3); transition:border-color .2s var(--ease);
}
.enlace:hover{border-color:var(--tx)}
.enlace i{font-style:normal; transition:transform .3s var(--ease)}
.enlace:hover i{transform:translateX(3px)}

/* «Últimos lugares»: el único rojo de la página, arriba de cada botón de acceder */
.cta-aviso{display:inline-flex; flex-direction:column; align-items:flex-start; gap:10px}
.ultimos{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--m); font-size:12.5px;
  font-weight:500; letter-spacing:.02em; color:var(--bad); line-height:1.3;
}
.ultimos::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--bad); flex:none; animation:latido 2.4s ease-out infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(240,117,101,.5)}70%{box-shadow:0 0 0 8px rgba(240,117,101,0)}100%{box-shadow:0 0 0 0 rgba(240,117,101,0)}}

/* ═══════════ LA CABECERA ═══════════ */
header{
  position:sticky; top:0; z-index:100; background:rgba(14,14,16,.74);
  -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
}
@media (prefers-reduced-transparency:reduce){header{background:var(--bg); backdrop-filter:none}}
.nav{display:flex; align-items:center; gap:var(--s4); height:66px}
.marca{display:flex; align-items:center; gap:11px; min-height:44px; min-width:44px; margin-right:auto; font-weight:600; letter-spacing:-.01em}
.marca img{width:34px; height:34px; border-radius:10px; border:1px solid var(--line2); flex:none}
.marca span{font-size:var(--fs-base)}
.marca span em{font-style:normal; color:var(--mu)}
@media(max-width:420px){.marca span{display:none}}
.nav-links{display:flex; gap:var(--s1)}
.nav-links a{
  font-size:var(--fs-sm); color:var(--tx2); min-height:40px; padding:0 14px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-links a:hover{color:var(--tx); background:var(--c1)}
@media(max-width:820px){.nav-links{display:none}}

/* ═══════════ EL HERO ═══════════ */
.hero{padding:var(--s7) 0; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 0%, rgba(244,244,245,.07), transparent 70%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 20%, #000, transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 20%, #000, transparent 75%);
}
.hero .wrap{position:relative; z-index:1}
.hero-ctas{display:flex; gap:var(--s4); align-items:flex-end; flex-wrap:wrap; margin-top:var(--s6)}
.hero-ctas .btn-blanco{min-height:60px; padding:0 var(--s6); font-size:var(--fs-md); font-weight:700}
.hero-ctas .btn-linea{min-height:52px}
@media(max-width:620px){
  .hero-ctas{flex-direction:column; align-items:stretch; gap:var(--s3)}
  .hero-ctas .cta-aviso, .hero-ctas .btn{width:100%}
  .hero-ctas .btn-blanco{min-height:58px}
}

/* ═══════════ EL BOTÓN DE WHATSAPP ═══════════ */
.wa-flotante{
  position:fixed; right:20px; bottom:20px; z-index:500; width:58px; height:58px; border-radius:50%;
  background:var(--wa); display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(37,211,102,.32), 0 2px 8px rgba(0,0,0,.45);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wa-flotante:hover{transform:scale(1.06)}
.wa-flotante:active{transform:scale(.95)}
.wa-flotante svg{width:31px; height:31px; fill:#fff}
.wa-flotante::after{content:""; position:absolute; inset:0; border-radius:50%; animation:wa-latido 2.8s ease-out infinite}
@keyframes wa-latido{0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(max-width:520px){.wa-flotante{right:12px; bottom:76px; width:50px; height:50px}.wa-flotante svg{width:26px; height:26px}}

/* ═══════════ EL PIE ═══════════ */
footer{border-top:1px solid var(--line); padding:var(--s5) 0 var(--s6); color:var(--mu)}
.pie{display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; align-items:center}
.pie small{font-size:var(--fs-sm)}
.pie nav{display:flex; gap:var(--s1) var(--s4); flex-wrap:wrap}
.pie nav a{font-size:var(--fs-sm); color:var(--mu); min-height:44px; display:inline-flex; align-items:center; transition:color .2s var(--ease)}
.pie nav a:hover{color:var(--tx)}

/* ═══════════ MOVIMIENTO (transitions.dev: entra con la curva, sale más rápido) ═══════════ */
.reveal{opacity:0; transform:translateY(12px); will-change:opacity,transform}
.reveal.visible{
  opacity:1; transform:none; transition:opacity .6s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 50ms);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .reveal.visible{transition:opacity .2s ease; transition-delay:0ms}
  *{animation:none!important}
  .btn:active,.wa-flotante:active{transform:none}
}

/* ═══════════ MÓVIL ═══════════ */
@media(max-width:760px){:root{--s8:68px}}
@media(max-width:560px){
  :root{--s5:20px; --s6:28px; --s7:44px}
  h1{font-size:clamp(34px,9.6vw,46px); line-height:1.04; letter-spacing:-.035em}
  h2{font-size:clamp(28px,7.6vw,38px); line-height:1.08}
  .pildora{font-size:13px}
}
@media(max-width:360px){:root{--s5:16px} h1{font-size:33px}}

[hidden]{display:none!important}
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:64px}
.firma{display:flex; align-items:center; gap:11px; font-weight:600; letter-spacing:-.01em; min-height:44px}
.firma img{width:32px; height:32px; border-radius:9px; border:1px solid var(--line2); flex:none}
.firma em{font-style:normal; color:var(--mu)}
@media(max-width:420px){.firma em{display:none}}

.rec{padding:var(--s7) 0 var(--s8); overflow:hidden}
.rec::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 45% at 30% 0%, rgba(244,244,245,.06), transparent 70%)}
.rec .wrap{position:relative; z-index:1}
/* en compu: el título y lo de adentro a la izquierda, el formulario a la derecha; en el celu el formulario va
   antes de lo de adentro (si queda después de las cuatro tarjetas, casi nadie llega) */
.rec-grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  grid-template-areas:"intro lado" "adentro lado"; column-gap:var(--s7); align-items:start}
.intro{grid-area:intro} .lado{grid-area:lado} .adentro{grid-area:adentro}
/* «Tu sistema operativo» entra en un renglón: la píldora no se parte y con 72px quedaba «Tu» solo */
.rec h1{font-size:clamp(34px,4.6vw,62px); line-height:1.04}
.chips{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s5)}
.adentro{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
.adentro li{padding:var(--s4); background:var(--c1); border:1px solid var(--line); border-radius:var(--r-p)}
.adentro .n{font-family:var(--m); font-size:var(--fs-mini); letter-spacing:.08em; color:var(--ok)}
.adentro b{display:block; font-weight:600; font-size:var(--fs-md); margin-top:6px; letter-spacing:-.01em}
.adentro span{display:block; color:var(--tx2); font-size:var(--fs-sm); line-height:1.5; margin-top:4px}

/* la columna del formulario: las hojas asomando arriba de la tarjeta */
.lado{position:sticky; top:24px}
.hojas{position:relative; width:100%; max-width:440px; aspect-ratio:44/30; margin:0 auto -64px; z-index:0}
.hojas img{position:absolute; left:50%; top:0; width:50%; height:auto; border-radius:10px; border:1px solid var(--line2);
  box-shadow:0 26px 60px rgba(0,0,0,.6); transition:transform .6s var(--ease)}
.hojas img:nth-child(1){transform:translateX(-96%) rotate(-8deg) translateY(26px)}
.hojas img:nth-child(2){transform:translateX(-4%) rotate(7deg) translateY(22px)}
.hojas img:nth-child(3){transform:translateX(-50%)}
.hojas:hover img:nth-child(1){transform:translateX(-104%) rotate(-10deg) translateY(18px)}
.hojas:hover img:nth-child(2){transform:translateX(4%) rotate(9deg) translateY(14px)}
.form-tj{position:relative; z-index:1; padding:var(--s5); box-shadow:0 -30px 50px rgba(14,14,16,.9)}
.form-tj .et, .et-oferta{font-family:var(--m); font-size:var(--fs-mini); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ok); display:flex; align-items:center; gap:9px}
.form-tj .et::before, .et-oferta::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-w)}
.form-tj h2{font-size:var(--fs-xl); letter-spacing:-.025em; margin-top:var(--s3)}
.form-tj .sub{color:var(--tx2); margin-top:6px}
.letra-chica{font-family:var(--m); font-size:12px; color:var(--mu); margin-top:var(--s3); line-height:1.5}

/* el formulario */
.form{margin-top:var(--s4); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); position:relative}
.lbl{font-family:var(--m); font-size:var(--fs-mini); letter-spacing:.12em; text-transform:uppercase; color:var(--mu)}
.form input[type=email]{min-height:54px; border-radius:var(--r-pill); border:1px solid var(--line2); background:var(--c2);
  color:var(--tx); padding:0 22px; font:500 var(--fs-base)/1 var(--f); width:100%}
.form input[type=email]::placeholder{color:var(--mu)}
.form input[type=email]:focus{outline:none; border-color:var(--line3); background:var(--c3)}
.acepto{display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:var(--fs-sm); color:var(--tx2); line-height:1.45; padding:6px 0}
.acepto input{appearance:none; -webkit-appearance:none; flex:none; width:22px; height:22px; margin:0; border-radius:7px;
  border:1px solid var(--line3); background:var(--c2); display:grid; place-items:center; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease)}
.acepto input:checked{background:var(--blanco); border-color:var(--blanco)}
.acepto input:checked::after{content:""; width:10px; height:6px; border-left:2px solid var(--negro); border-bottom:2px solid var(--negro);
  transform:translateY(-1px) rotate(-45deg)}
.acepto input:focus-visible{outline:2px solid var(--tx); outline-offset:3px}
.trampa{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.form .btn{width:100%; min-height:56px; font-weight:700}
.form .btn:disabled{opacity:.6; cursor:wait}
.error{font-family:var(--m); font-size:12.5px; color:var(--bad); line-height:1.5}

/* cómo se usa */
.uso{padding:var(--s7) 0 var(--s8); border-top:1px solid var(--line)}
.pasos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); margin-top:var(--s5)}
.paso{padding:var(--s5)}
.paso .num{width:36px; height:36px; border-radius:50%; background:var(--blanco); color:var(--negro); display:grid; place-items:center; font:600 var(--fs-sm)/1 var(--m)}
.paso h3{margin-top:var(--s4); font-size:var(--fs-md)}
.paso p{color:var(--tx2); margin-top:6px; font-size:var(--fs-sm)}
code{font-family:var(--m); font-size:.92em; background:var(--pozo); border:1px solid var(--line2); border-radius:8px; padding:3px 8px; color:var(--tx); white-space:nowrap}

/* listo: el PDF ya se abrió en otra pestaña y acá queda la propuesta */
.listo{padding:var(--s7) 0 var(--s8)}
.recibido{display:inline-flex; align-items:center; gap:10px; font-family:var(--m); font-size:var(--fs-mini); letter-spacing:.14em; text-transform:uppercase; color:var(--ok); margin-bottom:var(--s5)}
.recibido i{width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 5px var(--ok-w)}
.listo h1{font-size:clamp(36px,5.2vw,70px); line-height:1.04}
.listo-cta{margin-top:var(--s5); display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center}
.listo-cta small{font-family:var(--m); font-size:12.5px; color:var(--mu)}
.propuesta{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:var(--s3); margin-top:var(--s7)}
.propuesta.sola{grid-template-columns:minmax(0,1fr)}
.oferta{padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); align-items:flex-start;
  background:linear-gradient(180deg, rgba(244,244,245,.035), transparent 60%), var(--c1)}
.oferta h2{font-size:clamp(28px,3.4vw,44px); line-height:1.08}
.oferta p{color:var(--tx2); max-width:58ch}
.oferta .btn{min-height:58px; padding:0 var(--s6); font-size:var(--fs-md); font-weight:700}
.web{padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start}
.web .et{font-family:var(--m); font-size:var(--fs-mini); letter-spacing:.12em; text-transform:uppercase; color:var(--mu)}
.web p{color:var(--tx2)}
.web .btn{margin-top:auto}

@media(max-width:900px){
  .rec-grid{grid-template-columns:1fr; grid-template-areas:"intro" "lado" "adentro"; row-gap:var(--s6)}
  .lado{position:static; max-width:560px}
  .adentro{margin-top:0}
  .propuesta{grid-template-columns:1fr}
}
@media(max-width:820px){.pasos{grid-template-columns:1fr}}
@media(max-width:560px){
  .adentro{grid-template-columns:1fr}
  .rec h1{font-size:clamp(33px,9.4vw,46px)}
  .listo h1{font-size:clamp(32px,9vw,44px)}
  .hojas{margin-bottom:-48px}
  .form-tj{padding:var(--s4)}
  .oferta{padding:var(--s5)}
  .oferta .btn{width:100%}
  code{white-space:normal}
}
@media (prefers-reduced-motion:reduce){.hojas img{transition:none}}