/* ==========================================================================
   ChacoNET · Base / Reset / Tipografía
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 62px);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;      /* clip (no hidden) para no romper position:sticky */
  min-height:100vh;
}
body.is-locked{ overflow:hidden; }

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:0; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--cyan-400); outline-offset:3px; border-radius:4px; }

::selection{ background:rgba(122,91,255,.4); color:#fff; }

/* Scrollbar */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.3); background-clip:content-box; }

/* ---------- Tipografía ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:700;
  line-height:var(--lh-snug);
  letter-spacing:var(--tracking-tight);
  text-wrap:balance;
  overflow-wrap:break-word;   /* red de seguridad para palabras muy largas */
}
p{ text-wrap:pretty; }

.display-1{ font-size:var(--fs-display-1); line-height:var(--lh-tight); font-weight:800; letter-spacing:-.045em; }
.display-2{ font-size:var(--fs-display-2); line-height:1.02; font-weight:800; letter-spacing:-.038em; }
.display-3{ font-size:var(--fs-display-3); line-height:1.06; font-weight:700; letter-spacing:-.03em; }
.h1{ font-size:var(--fs-h1); }
.h2{ font-size:var(--fs-h2); }
.h3{ font-size:var(--fs-h3); }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--text-2); font-weight:400; letter-spacing:-.012em; }
.muted{ color:var(--text-2); }
.dim{ color:var(--text-3); }
.tiny{ font-size:var(--fs-xs); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.num{ font-family:var(--font-display); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

.grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.grad-brand-text{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-display);
  font-size:var(--fs-2xs);
  font-weight:700;
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--cyan-300);
}
.eyebrow::before{
  content:""; width:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan-400));
}

/* ---------- Layout ---------- */
.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.shell--wide{ max-width:var(--shell-wide); }
.shell--narrow{ max-width:820px; }

.section{ position:relative; padding-block:var(--section-y); background:var(--bg); color:var(--text); }
.section--tight{ padding-block:clamp(48px,6vw,88px); }
.section--flush-top{ padding-top:0; }
.section--flush-bottom{ padding-bottom:0; }
.section--alt{ background:var(--bg-2); }
.section--deep{ background:radial-gradient(120% 100% at 50% 0%,var(--bg-3) 0%,var(--bg) 62%); }

.stack{ display:flex; flex-direction:column; }
.stack > .btn,.stack > .link-arrow{ align-self:flex-start; }
.stack--center{ align-items:center; }
.stack--center > .btn{ align-self:center; }
.stack--2{ gap:var(--sp-2); } .stack--3{ gap:var(--sp-3); }
.stack--4{ gap:var(--sp-4); } .stack--5{ gap:var(--sp-5); }
.stack--6{ gap:var(--sp-6); } .stack--7{ gap:var(--sp-7); }

.row{ display:flex; align-items:center; }
.row--between{ justify-content:space-between; }
.row--center{ justify-content:center; }
.wrap{ flex-wrap:wrap; }
.gap-2{ gap:var(--sp-2); } .gap-3{ gap:var(--sp-3); } .gap-4{ gap:var(--sp-4); } .gap-5{ gap:var(--sp-5); } .gap-6{ gap:var(--sp-6); }

.grid{ display:grid; gap:var(--sp-5); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--auto{ grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.grid--auto-sm{ grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); }

@media (max-width:960px){
  .grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:minmax(0,1fr); }
}

.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.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;
}
.skip-link{
  position:fixed; top:-100px; left:16px; z-index:var(--z-toast);
  padding:12px 20px; border-radius:var(--r-pill);
  background:var(--brand-500); color:#fff; font-weight:600;
  transition:top var(--d-fast) var(--e-out);
}
.skip-link:focus{ top:16px; }

.divider{ height:1px; background:var(--line); border:0; }
.rule-glow{ height:1px; background:var(--grad-line); border:0; opacity:.5; }

/* Fondo de grano: da cuerpo a los degradados */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.32; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* Resplandores reutilizables */
.glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
.glow--violet{ background:radial-gradient(circle,rgba(122,91,255,.5),transparent 68%); }
.glow--cyan{ background:radial-gradient(circle,rgba(0,212,255,.38),transparent 68%); }
.glow--gold{ background:radial-gradient(circle,rgba(255,201,74,.3),transparent 68%); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}