/* base.css — @font-face, reset, elementos base, tipografía y layout genérico.
   Depende de css/tokens.css. No define ningún valor literal propio. */

/* ============ fuentes auto-hospedadas ============
   Subset `latin`, que cubre todos los acentos del español (á é í ó ú ñ ü ¿ ¡).
   Archivo, Inter y Azeret Mono son variables: un archivo cubre todos los
   pesos. Anton (titulares) es de un solo peso.
   Licencia SIL Open Font License — se pueden servir desde este repo. */

@font-face{
  font-family:"Archivo";
  src:url("../assets/fonts/archivo-var.woff2") format("woff2");
  font-weight:300 700;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Anton";
  src:url("../assets/fonts/anton.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Azeret Mono";
  src:url("../assets/fonts/azeret-mono-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ============ reset ============ */

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* el nav es fijo: evita que las anclas queden bajo la barra */
  scroll-padding-top:6rem;
}

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
svg{flex:none}

/* Foco visible. El original no lo tenía: los navegadores lo quitaban
   junto con el outline por defecto y el sitio quedaba innavegable por teclado. */
:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ============ skip link ============ */

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-4rem;
  z-index:var(--z-skip);
  background:var(--green);
  color:var(--on-green);
  padding:var(--pad-btn);
  border-radius:var(--r-btn);
  font-family:var(--mono);
  font-size:var(--fs-tiny);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  transition:top var(--t-fast) var(--ease);

  &:focus{top:1rem}
}

/* ============ tipografía ============ */

h1,h2,h3,h4,h5{
  margin:0;
  text-transform:uppercase;
  line-height:1.05;
}
/* Titulares grandes: Anton, condensada y pesada. Un <span class="accent">
   tiñe de verde la palabra que importa, como en las piezas del gimnasio. */
h1,h2{font-family:var(--display-heavy);font-weight:400;letter-spacing:.015em;line-height:1.02}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
/* Titulares medianos: Archivo ancha, con aire entre letras. */
h3,h4,h5{font-family:var(--display);font-variation-settings:"wdth" var(--wdth-wide);font-weight:500}
h3{font-size:var(--fs-h3);letter-spacing:.04em}
h4{font-size:var(--fs-h4);letter-spacing:-.01em}
h5{font-size:var(--fs-h5);letter-spacing:-.005em}

.eyebrow{
  font-family:var(--mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--green);
  display:inline-block;

  &.muted{color:var(--muted)}
  /* Con una línea fina a cada lado, para bloques centrados. */
  &.eyebrow-rule{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;

    &::before,&::after{content:"";flex:0 0 clamp(2.5rem,10vw,7rem);height:1px;background:var(--line-green)}
  }
}

.lead{font-size:var(--fs-lead);color:var(--off-white);line-height:1.6}
.lead-narrow{max-width:60ch}
.small{font-size:var(--fs-small);color:var(--muted);line-height:1.55}
.tiny{
  font-family:var(--mono);
  font-size:var(--fs-tiny);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.num{
  font-family:var(--mono);
  font-size:var(--fs-label);
  letter-spacing:.12em;
  color:var(--green-dark);
}
.accent{color:var(--green)}

/* Cifras de precio: display estrecho, alineación de tabla. */
.figure{
  font-family:var(--display);
  font-variation-settings:"wdth" var(--wdth-narrow);
  font-weight:400;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* ============ layout ============ */

.container{
  width:100%;
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  padding-block:var(--section-y);

  &.tight{padding-block:var(--section-y-tight)}
}

.grid{display:grid;gap:var(--grid-gap)}

.section-head{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-bottom:clamp(2rem,4vw,3.25rem);

  & h2{margin-top:.85rem}
}
@media(min-width:900px){
  .section-head{grid-template-columns:1.15fr .85fr;align-items:end;gap:3rem}
  .section-head .lead{padding-bottom:.35rem}
}

/* Fila de botones. Sustituye a los `style=` inline del original. */
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn-row-tight{margin-top:1rem;gap:.5rem}

/* Separación vertical estándar. Sustituye a los `style="margin-top"` inline. */
.note{margin-top:1.5rem}

/* Ancho de medida cómodo para párrafos largos. */
.measure{max-width:70ch}

/* ============ reveal ============ */

.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);

  &.in{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition-duration:.01ms!important}
}