/* ==========================================================================
   MANIA — hoja de estilos única y autocontenida.
   No depende de ningún CDN: el sitio funciona sin conexión a internet.

   Contenido:
     1. Fuentes locales (fonts/)
     2. Base / normalización
     3. Utilidades (equivalentes a las clases de Tailwind que usa el sitio)
     4. Tokens y componentes de MANIA
     5. Responsive (sm ≥640px, md ≥768px)
   ========================================================================== */


/* ============================ 1. FUENTES ================================= */

/* IBM Plex Mono 400 */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* IBM Plex Mono 500 */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Inter — fuente variable, un solo archivo cubre de 100 a 900 */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Space Grotesk — fuente variable, de 300 a 700 */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(../fonts/space-grotesk-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(../fonts/space-grotesk-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ============================== 2. BASE ================================== */

*,::before,::after{ box-sizing:border-box; border-width:0; border-style:solid; border-color:currentColor; }
html{ -webkit-text-size-adjust:100%; line-height:1.5; }
body{ margin:0; line-height:inherit; }
h1,h2,h3,h4,h5,h6{ margin:0; font-size:inherit; font-weight:inherit; }
p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:inherit; }
strong,b{ font-weight:bolder; }
img,svg,video,canvas{ display:block; vertical-align:middle; }
img,video{ max-width:100%; height:auto; }
button,input,textarea,select{
  font-family:inherit; font-size:100%; font-weight:inherit; line-height:inherit;
  color:inherit; margin:0; padding:0;
}
button{ background-color:transparent; background-image:none; cursor:pointer; }
button,[type='button'],[type='submit']{ -webkit-appearance:button; }
:disabled{ cursor:default; }
textarea{ resize:vertical; }
::placeholder{ color:var(--text-muted); opacity:.75; }
summary{ display:list-item; }


/* ============================ 3. UTILIDADES ============================== */

/* Display */
.block{display:block}
.inline-block{display:inline-block}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}

/* Posición */
.relative{position:relative}
.absolute{position:absolute}
.sticky{position:sticky}
.inset-0{inset:0}
.top-0{top:0}
.top-5{top:1.25rem}
.top-6{top:1.5rem}
.-top-3{top:-0.75rem}
.bottom-5{bottom:1.25rem}
.left-0{left:0}
.left-8{left:2rem}
.left-1\/2{left:50%}
.right-0{right:0}
.-translate-x-1\/2{transform:translateX(-50%)}
.z-10{z-index:10}
.z-50{z-index:50}
.-z-10{z-index:-10}
.z-\[3\]{z-index:3}
.z-\[6\]{z-index:6}

/* Flex / grid */
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-12{gap:3rem}
.space-y-4>*+*{margin-top:1rem}

/* Tamaño */
.w-full{width:100%}
.h-4{height:1rem}
.h-36{height:9rem}
.h-44{height:11rem}
.h-px{height:1px}
.h-\[2px\]{height:2px}
.max-w-md{max-width:28rem}
.max-w-lg{max-width:32rem}
.max-w-xl{max-width:36rem}
.max-w-3xl{max-width:48rem}
.max-w-6xl{max-width:72rem}
.aspect-\[3\/4\]{aspect-ratio:3/4}
.aspect-\[4\/3\.2\]{aspect-ratio:4/3.2}

/* Márgenes y padding */
.mx-auto{margin-left:auto;margin-right:auto}
.mx-2{margin-left:0.5rem;margin-right:0.5rem}
.mt-1{margin-top:0.25rem}
.mt-3{margin-top:0.75rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.-mt-8{margin-top:-2rem}
.mb-1{margin-bottom:0.25rem}
.mb-1\.5{margin-bottom:0.375rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.p-7{padding:1.75rem}
.p-8{padding:2rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pt-1{padding-top:0.25rem}
.pt-14{padding-top:3.5rem}
.pt-16{padding-top:4rem}
.pb-20{padding-bottom:5rem}
.pb-24{padding-bottom:6rem}

/* Tipografía */
.text-\[9px\]{font-size:9px}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.leading-relaxed{line-height:1.625}
.leading-\[1\.05\]{line-height:1.05}
.tracking-wide{letter-spacing:0.025em}
.tracking-widest{letter-spacing:0.1em}
.tracking-\[0\.2em\]{letter-spacing:0.2em}
.tracking-\[0\.25em\]{letter-spacing:0.25em}
.uppercase{text-transform:uppercase}
.text-center{text-align:center}
.text-left{text-align:left}
.whitespace-nowrap{white-space:nowrap}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Bordes, fondo, varios */
.border{border-width:1px}
.border-b{border-bottom-width:1px}
.border-t{border-top-width:1px}
.border-y{border-top-width:1px;border-bottom-width:1px}
.rounded-lg{border-radius:0.5rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}
.overflow-hidden{overflow:hidden}
.resize-none{resize:none}
.bg-transparent{background-color:transparent}
.transition-colors{
  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:150ms;
}


/* ====================== 4. TOKENS Y COMPONENTES MANIA ==================== */

:root{
  --bg-deep:#05070F;
  --bg-primary:#0A1220;
  --bg-panel:#0D1729;
  --bg-panel-alt:#111D33;
  --gold:#C9A24D;
  --gold-soft:#E8CD8A;
  --cyan:#4FD8E8;
  --violet:#8B6CFF;
  --text-primary:#EAEDF2;
  --text-muted:#8D97AA;
  --border:rgba(201,162,77,0.16);
  --border-cool:rgba(79,216,232,0.18);
}
*{scroll-behavior:smooth;}
body{
  background-color:var(--bg-deep);
  color:var(--text-primary);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
}
.font-display{font-family:'Space Grotesk',system-ui,sans-serif;letter-spacing:-0.02em;}
.font-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}

/* Colores de marca */
.text-muted{color:var(--text-muted);}
.text-gold{color:var(--gold);}
.text-cyan{color:var(--cyan);}
.text-violet{color:var(--violet);}
.text-\[var\(--text-primary\)\]{color:var(--text-primary);}
.text-\[\#05070F\]{color:#05070F;}
.hover\:text-cyan:hover{color:var(--cyan);}
.bg-panel{background-color:var(--bg-panel);}
.bg-panel-alt{background-color:var(--bg-panel-alt);}
.bg-\[var\(--gold\)\]{background-color:var(--gold);}
.border-gold{border-color:var(--border);}

/* ---------- Atmósfera: malla de gradientes + grilla técnica ---------- */
.atmos{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(45rem 30rem at 78% -5%, rgba(79,216,232,0.16), transparent 60%),
    radial-gradient(38rem 26rem at 8% 12%, rgba(139,108,255,0.14), transparent 62%),
    radial-gradient(50rem 34rem at 50% 105%, rgba(201,162,77,0.12), transparent 65%),
    var(--bg-deep);
}
.atmos::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(141,151,170,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141,151,170,0.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 78%);
}
.orb{
  position:fixed; border-radius:9999px; filter:blur(90px); opacity:.35; z-index:-1;
  pointer-events:none; animation:drift 18s ease-in-out infinite alternate;
}
.orb-a{width:26rem;height:26rem;background:var(--cyan);top:-6rem;right:-8rem;}
.orb-b{width:22rem;height:22rem;background:var(--violet);top:38%;left:-10rem;animation-delay:-6s;}
@keyframes drift{ to{ transform:translate3d(-3rem,4rem,0) scale(1.15); } }

/* ---------- Texto y botones ---------- */
.grad-text{
  background:linear-gradient(100deg,var(--gold-soft) 0%,var(--cyan) 45%,var(--violet) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 8s ease-in-out infinite alternate;
}
@keyframes shimmer{ to{ background-position:100% 0; } }

.btn-primary{
  position:relative; overflow:hidden;
  background:linear-gradient(100deg,var(--gold),var(--gold-soft));
  color:#05070F; font-weight:600;
  /* Borde transparente: iguala la altura con .btn-outline, que sí tiene borde */
  border:1px solid transparent;
  transition:transform .2s ease, box-shadow .25s ease;
  box-shadow:0 6px 24px -12px rgba(201,162,77,.7);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -12px rgba(201,162,77,.75); }
.btn-primary::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-primary:hover::after{ left:120%; }

.btn-outline{
  border:1px solid var(--border-cool); color:var(--text-primary);
  background:rgba(79,216,232,0.04);
  transition:border-color .2s ease, color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.btn-outline:hover{
  border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(79,216,232,.25), 0 12px 30px -16px rgba(79,216,232,.8);
}

/* ---------- Cards de vidrio ---------- */
.card{
  position:relative;
  background:linear-gradient(160deg, rgba(17,29,51,.72), rgba(10,18,32,.62));
  border:1px solid var(--border);
  backdrop-filter:blur(12px);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(79,216,232,.4);
  box-shadow:0 24px 60px -30px rgba(79,216,232,.55);
}
/* Borde con gradiente animado — solo para el plan destacado */
.card-highlight{
  position:relative; border-radius:1rem;
  /* Borde transparente de 1px: iguala la geometría de .card para que el
     contenido no quede desfasado respecto de las otras cards de la fila */
  border:1px solid transparent;
  background:linear-gradient(160deg, rgba(17,29,51,.9), rgba(10,18,32,.8));
  backdrop-filter:blur(12px);
  transition:transform .3s ease;
}
.card-highlight:hover{ transform:translateY(-6px); }
.card-highlight::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:conic-gradient(from 0deg, var(--gold), var(--cyan), var(--violet), var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinborder 6s linear infinite;
}
@keyframes spinborder{ to{ filter:hue-rotate(360deg); } }

/* ---------- Automatización incluida en cada paquete ----------
   Se separa del cuerpo con una línea fina para que se lea como
   prestación concreta y no como una frase más de la descripción. */
.auto-incluida{
  border-top:1px solid var(--border);
  padding-top:.9rem;
}
.auto-incluida p{
  color:var(--text-primary);
  font-weight:500;
  line-height:1.45;
}

.divider-line{ height:1px; background:linear-gradient(90deg,transparent,var(--border-cool),var(--border),transparent); }

/* ---------- Tratamiento duotono de las fotos ---------- */
.duo{ position:relative; isolation:isolate; overflow:hidden; }
.duo img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.82);
  transition:transform .8s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
.duo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(140deg,#0A1220 0%,var(--cyan) 55%,var(--gold) 100%);
  mix-blend-mode:color; opacity:.8;
}
.duo::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(5,7,15,.92), rgba(5,7,15,.15) 55%, transparent);
}
.duo:hover img{ transform:scale(1.06); filter:grayscale(.55) contrast(1.15) brightness(.95); }
.duo-flat::before{ background:linear-gradient(to top, rgba(5,7,15,.55), transparent 70%); }
/* Fondo de sección: deja ver la foto sin comerse la legibilidad del formulario */
.duo-bg img{ filter:grayscale(.35) contrast(1.1) brightness(1); }
.duo-bg::after{ opacity:.55; }
.duo-bg::before{
  background:
    radial-gradient(55% 50% at 50% 55%, rgba(5,7,15,.86), rgba(5,7,15,.5) 65%, transparent),
    linear-gradient(to bottom, rgba(5,7,15,.7), rgba(5,7,15,.2) 45%, rgba(5,7,15,.88));
}

/* ---------- HUD del hero: elemento firma ---------- */
.hud{
  position:relative; border-radius:1.25rem; overflow:hidden;
  border:1px solid var(--border-cool);
  box-shadow:0 40px 90px -40px rgba(79,216,232,.5), inset 0 0 60px rgba(5,7,15,.6);
}
.hud-corner{ position:absolute; width:22px; height:22px; border:2px solid var(--gold); z-index:6; }
.hud-corner.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.hud-corner.tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.hud-corner.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.hud-corner.br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.scanline{
  position:absolute; left:0; right:0; height:120px; z-index:5; pointer-events:none;
  background:linear-gradient(to bottom, transparent, rgba(79,216,232,.18), rgba(79,216,232,.5), transparent);
  animation:scan 4.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scan{ 0%{ top:-120px; } 100%{ top:100%; } }
.hud-net{ position:absolute; inset:0; z-index:4; width:100%; height:100%; }
.node{ animation:pulse 3s ease-in-out infinite; }
.node2{ animation-delay:.4s; } .node3{ animation-delay:.8s; } .node4{ animation-delay:1.2s; }
@keyframes pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.link-line{ stroke-dasharray:6 6; animation:flow 3s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-24; } }

/* ---------- Ticker ---------- */
.ticker{ overflow:hidden; white-space:nowrap; }
.ticker-track{ display:inline-flex; animation:slide 32s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- Aparición al hacer scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Varios ---------- */
.step-num{
  font-family:'Space Grotesk',system-ui,sans-serif; font-size:2.75rem; line-height:1; font-weight:700;
  background:linear-gradient(180deg,var(--cyan),rgba(79,216,232,0));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tag{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--border-cool); background:rgba(79,216,232,.06);
  border-radius:9999px; padding:.35rem .85rem;
}
.dot-live{ width:7px; height:7px; border-radius:9999px; background:var(--cyan); box-shadow:0 0 0 0 rgba(79,216,232,.6); animation:ping 2s ease-out infinite; }
@keyframes ping{ 70%{ box-shadow:0 0 0 8px rgba(79,216,232,0); } 100%{ box-shadow:0 0 0 0 rgba(79,216,232,0); } }

details > summary{list-style:none;}
details > summary::-webkit-details-marker{display:none;}
.faq-icon{transition:transform .25s ease;}
details[open] .faq-icon{transform:rotate(45deg);}
input:focus, textarea:focus{
  outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(79,216,232,0.15);
}
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px;
}


/* ============================ 5. RESPONSIVE ============================== */

@media (min-width:640px){
  .sm\:flex-row{flex-direction:row}
  .sm\:text-5xl{font-size:3rem;line-height:1}
}

@media (min-width:768px){
  .md\:block{display:block}
  .md\:flex{display:flex}
  .md\:flex-row{flex-direction:row}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:items-center{align-items:center}
  .md\:justify-between{justify-content:space-between}
  .md\:pt-20{padding-top:5rem}
  .md\:pb-24{padding-bottom:6rem}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-\[3\.4rem\]{font-size:3.4rem}
}

@media (prefers-reduced-motion: reduce){
  .node,.link-line,.scanline,.orb,.ticker-track,.grad-text,.card-highlight::before{ animation:none; }
  .scanline{ display:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}


/* ================= 6. UTILIDADES DE POSICIÓN (última palabra) =============
   En Tailwind las utilidades siempre le ganan a los componentes. Acá el CSS
   es plano y gana la regla que aparece última, así que varios componentes
   (.duo, .card, .hud) pisaban el position de la utilidad y rompían el layout.
   Repetirlas al final devuelve el comportamiento esperado.
   Si agregás un componente que fije "position", dejá este bloque al final. */

.relative{position:relative}
.absolute{position:absolute}
.sticky{position:sticky}

/* El nav es sticky y tapa el destino de los enlaces internos: sin esto,
   al hacer clic en "Agendar llamada" el título queda escondido detrás. */
section[id],header[id]{ scroll-margin-top:5rem; }