/* Tokens de Diego Cifuentes · Diseño de marca (dirección H, «Propuesta»).
   Todo lo demás (componentes y secciones) usa estas variables y nada más.
   Paleta: tinta, amarillo eléctrico y grises. El resto del color lo ponen las marcas de los casos. */
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  /* Color · base */
  --tinta: #0F0F10;
  --tinta-2: #1E1E21;
  --tinta-3: #2E2E33;
  --amarillo: #FFE600;
  --amarillo-2: #F2DA00;       /* hover del amarillo */
  --amarillo-texto: #4B4600;   /* texto secundario sobre amarillo · 7,9:1 */
  --papel: #FFFFFF;
  --fondo-claro: #F7F7F7;
  --gris-c: #E9E9EA;
  --gris-c-2: #DCDCDE;
  --gris: #5E5E63;             /* texto secundario · 6,3:1 sobre blanco, 5,2:1 sobre --gris-c */
  --filete: #E2E2E4;
  --exito: #1F7A4D;
  --error: #B42318;

  /* Color · roles */
  --fondo: var(--fondo-claro);
  --superficie: var(--papel);
  --superficie-2: var(--gris-c);
  --texto: var(--tinta);
  --texto-2: var(--gris);
  --foco: var(--tinta);
  --foco-halo: var(--papel);

  /* Tipografía · Manrope, display apretada */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-meta: 13px;
  --t-chico: 15px;
  --t-cuerpo: 17px;
  --t-lede: clamp(18px, 1.5vw, 22px);
  --t-titulo: clamp(22px, 1.8vw, 28px);
  --t-h2: clamp(52px, 6vw, 88px);
  --t-h1: clamp(64px, 9.6vw, 140px);
  --t-precio: clamp(64px, 6.4vw, 96px);
  --t-cifra: clamp(48px, 5vw, 76px);
  --peso-normal: 450;
  --peso-medio: 600;
  --peso-fuerte: 700;
  --tracking-display: -0.06em;
  --tracking-titulo: -0.03em;

  /* Espacio · de 4 en 4 */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-24: 96px;
  --hueco: 14px;
  --margen: clamp(16px, 3.3vw, 48px);
  --relleno: clamp(22px, 2.2vw, 32px);
  --seccion: clamp(88px, 9vw, 120px);
  --ancho-max: 1440px;

  /* Forma */
  --radio: 24px;
  --radio-chico: 14px;
  --radio-pildora: 999px;

  /* Movimiento (curvas de animate · Emil Kowalski) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --rapido: 160ms;
  --medio: 240ms;
  --lento: 420ms;
}

/* Superficie oscura: los mismos roles, invertidos. */
.oscuro {
  --fondo: var(--tinta);
  --superficie: var(--tinta-2);
  --superficie-2: var(--tinta-3);
  --texto: var(--papel);
  --texto-2: #B5B5BA;
  --filete: #34343A;
  --foco: var(--amarillo);
  --foco-halo: var(--tinta);
}
/* Superficie amarilla. */
.amarilla {
  --fondo: var(--amarillo);
  --superficie: var(--amarillo);
  --texto: var(--tinta);
  --texto-2: var(--amarillo-texto);
  --filete: rgba(15, 15, 16, .16);
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0ms; --medio: 0ms; --lento: 0ms; }
}