/* ============================================================
   VisualWS — base.css
   Tema CLARO (estilo AIR) · variables · tipografía · ui-light/ui-dark
   ============================================================ */

/* Fuente Onest self-hosteada (variable, todos los pesos en un archivo) */
@font-face{
  font-family:"Onest";
  src:url("../assets/fonts/onest/Onest.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Paleta — blanco dominante, como aircenter */
  --paper:      #ffffff;        /* fondo claro */
  --paper-2:    #f3f2ef;
  --ink:        #0a0a0a;        /* texto sobre claro */
  --muted:      #62625b;        /* párrafos secundarios (contraste AA sobre blanco) */
  --line:       rgba(10,10,10,.14);

  --black:      #0a0a0a;        /* fondo de secciones oscuras (mapa/footer) */
  --on-dark:    #f2f1ee;        /* texto sobre oscuro */
  --muted-dark: #b0b0a9;        /* secundario sobre negro, legible */
  --line-dark:  rgba(242,241,238,.16);

  --accent:     #b08d4c;        /* acento metálico, muy puntual */
  --accent-ink: #8a682c;        /* acento para TEXTO sobre fondo claro (legible) */

  /* Variables “temáticas” que cambian con ui-light / ui-dark */
  --bg:   var(--paper);
  --fg:   var(--ink);
  --dim:  var(--muted);
  --hair: var(--line);

  /* Tipografía — Onest (la misma familia que AIR) */
  --font:  "Onest", "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Escala display fluida (titulares enormes a lo ancho) */
  --fs-giant:  clamp(4rem, 15vw, 17rem);   /* letras del intro */
  --fs-huge:   clamp(2.4rem, 8.2vw, 9rem); /* titulares partidos */
  --fs-h2:     clamp(2rem, 5vw, 5rem);
  --fs-h3:     clamp(1.3rem, 2.2vw, 2.2rem);
  --fs-body:   clamp(1rem, 1.05vw, 1.12rem);
  --fs-cap:    clamp(.74rem, .9vw, .86rem);  /* párrafos en mayúsculas centrados */

  --container:   92vw;
  --container-max: 1560px;
  --gutter:      clamp(1rem, 3vw, 2.4rem);
  --pad-section: clamp(6rem, 14vh, 13rem);

  --ease:     cubic-bezier(.25,.74,.22,.99);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --header-h: 88px;
}

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

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  background:var(--paper);
}
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  font-weight:400;
}
body.is-loading{ overflow:hidden; }
body.is-loading #smooth-content{ opacity:0; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--ink); color:var(--paper); }

/* ---------- Sistema de temas por sección ---------- */
.ui-light{ --bg:var(--paper); --fg:var(--ink);     --dim:var(--muted);      --hair:var(--line); background:var(--paper); color:var(--ink); }
.ui-dark { --bg:var(--black); --fg:var(--on-dark);  --dim:var(--muted-dark); --hair:var(--line-dark); background:var(--black); color:var(--on-dark); }
.ui-dark ::selection{ background:var(--on-dark); color:var(--black); }

/* ---------- Tipografía ---------- */
.display{
  font-family:var(--font);
  font-weight:600;
  line-height:.9;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
h1,h2,h3{ font-family:var(--font); font-weight:600; }

/* etiqueta / eyebrow en mayúsculas espaciadas */
.eyebrow{
  font-size:var(--fs-cap);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--dim);
}

/* párrafo centrado en mayúsculas (como AIR) */
.lede{
  font-size:var(--fs-cap);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.7;
  color:var(--dim);
  max-width:34ch;
  text-align:center;
  margin-inline:auto;
}

.container{ width:var(--container); max-width:var(--container-max); margin-inline:auto; }
.section{ position:relative; }
#smooth-content{ overflow-x:clip; }

/* ---------- Botón pill ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.15rem; border-radius:100px;
  border:1px solid var(--fg);
  font-size:.86rem; font-weight:500;
  background:transparent; color:var(--fg);
  transition:background .45s var(--ease), color .45s var(--ease);
}
.pill:hover{ background:var(--fg); color:var(--bg); }
.pill--solid{ background:var(--fg); color:var(--bg); }
.pill--solid:hover{ background:transparent; color:var(--fg); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }