/* AIFER · base: tokens, reset, tipografía y componentes compartidos.
   Cada sección tiene su propio CSS en assets/css/<seccion>.css. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Color: negro del logo + los tres tonos de su trazo */
  --noche: #000000;
  --noche-2: #0c1311;          /* superficies elevadas sobre negro */
  --linea-oscura: #26332f;     /* bordes sobre negro */
  --niebla: #edf2ef;           /* fondo claro, gris verdoso frío */
  --papel: #fafcfb;            /* tarjetas y campos sobre niebla */
  --grafito: #13201c;          /* texto sobre claro */
  --grafito-suave: #4a5a55;    /* texto secundario sobre claro */
  --linea-clara: #cdd8d3;      /* bordes sobre claro */
  --blanco: #f6faf8;           /* texto sobre negro */
  --gris-oscuro: #9fb0aa;      /* texto secundario sobre negro */
  --lima: #a3e05a;
  --menta: #33e0a1;
  --cian: #16d4e6;
  --pino: #0b6658;             /* acento legible sobre claro (AA) */
  --trazo: linear-gradient(90deg, var(--lima), var(--menta) 50%, var(--cian));
  --error: #b42318;
  --error-oscuro: #ff8a7a;

  /* Tipografía */
  --f-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-texto: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-mega: clamp(3.25rem, 2rem + 6.4vw, 8.5rem);
  --t-1: clamp(2.6rem, 1.7rem + 4vw, 5.5rem);
  --t-2: clamp(2rem, 1.5rem + 2.4vw, 3.6rem);
  --t-3: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  --t-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-base: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  /* Espacio */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --banda-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --ancho: 76rem;

  /* Forma: los extremos redondeados vienen del trazo del logo */
  --r-pill: 999px;
  --r-panel: 6px;
  --r-campo: 4px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 4.5rem;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--grafito);
  background: var(--niebla);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:target { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Foco visible y consistente */
:focus-visible {
  outline: 3px solid var(--menta);
  outline-offset: 3px;
  border-radius: 2px;
}
.banda--clara :focus-visible { outline-color: var(--pino); }

.salto {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  padding: var(--s-3) var(--s-5); background: var(--lima); color: var(--noche);
  font-weight: 600; border-radius: var(--r-pill); text-decoration: none;
}
.salto:focus { top: var(--s-4); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout */
.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.banda { padding-block: var(--banda-y); position: relative; }
.banda--oscura { background: var(--noche); color: var(--blanco); }
.banda--clara { background: var(--niebla); color: var(--grafito); }
.banda--papel { background: var(--papel); color: var(--grafito); }

/* Tipografía */
.display, .titulo-1, .titulo-2 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.display { font-size: var(--t-mega); }
.titulo-1 { font-size: var(--t-1); }
.titulo-2 { font-size: var(--t-2); line-height: 0.98; }
.titulo-3 { font-family: var(--f-texto); font-size: var(--t-3); font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
.entradilla { font-size: var(--t-lead); line-height: 1.5; max-width: 38em; }
.texto-suave { color: var(--grafito-suave); }
.banda--oscura .texto-suave { color: var(--gris-oscuro); }
.medida { max-width: 65ch; }
p + p { margin-top: 0.9em; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 3.25rem; padding: 0.8rem 1.6rem;
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-family: var(--f-texto); font-size: 1.0625rem; font-weight: 650; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.boton:active { transform: translateY(1px); }
/* Principal sobre oscuro: lima del logo */
.boton--principal { background: var(--lima); color: var(--noche); }
.boton--principal:hover { background: #b8ec78; }
/* Principal sobre claro: negro */
.banda--clara .boton--principal, .banda--papel .boton--principal { background: var(--noche); color: var(--blanco); }
.banda--clara .boton--principal:hover, .banda--papel .boton--principal:hover { background: var(--grafito); }
.boton--secundario { background: transparent; color: currentColor; border-color: currentColor; }
.boton--secundario:hover { background: rgba(127, 127, 127, .12); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Enlace de texto */
.enlace { color: var(--pino); font-weight: 600; text-decoration: underline; }
.banda--oscura .enlace { color: var(--menta); }

/* Etiqueta de demostración: obligatoria en cualquier dato ficticio */
.etiqueta-demo {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .2em .7em; border-radius: var(--r-pill);
  font-size: var(--t-micro); font-weight: 600; line-height: 1.4;
  background: #fff2c4; color: #4d3800;
}

/* El trazo: línea con extremos redondeados y punto final, firma visual del logo */
.trazo-linea { height: 4px; border-radius: var(--r-pill); background: var(--trazo); }

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