/* Variables del diseño "Opción J · Multicolor vivo". Todo el sitio lee de aquí. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-latin.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colores */
  --black: #000000;
  --white: #ffffff;
  --turquoise: #00aec7; /* Pantone 3125 C */
  --green: #00d166;
  --yellow: #ffd400;
  --red: #e8112d;
  --gray: #5f6368;
  --gray-light: #eeeff0;
  --line-dark: #2a2a2a; /* bordes sobre negro */
  --text-soft: #333333;
  --text-muted: #555555;
  --text-on-dark-muted: #a6a6a6;

  /* Tipografía */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Tamaños fluidos (320 px → 1440 px; el diseño original es de 1440 px) */
  --fs-hero: clamp(2.75rem, 1rem + 8.6vw, 8.75rem); /* 140 px */
  --fs-credenciales: clamp(2.75rem, 1.6rem + 5vw, 6rem); /* 96 px */
  --fs-h2: clamp(2.5rem, 1.9rem + 3.9vw, 5.5rem); /* 88 px */
  --fs-num: clamp(3rem, 2.2rem + 3.5vw, 4.5rem); /* 72 px */
  --fs-h3-big: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem); /* 56 px */
  --fs-h2-sm: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); /* 48 px */
  --fs-card-title: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); /* 34 px */
  --fs-band: clamp(1.25rem, 0.8rem + 1.6vw, 2.125rem); /* 34 px */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 20 px */
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 18 px */

  /* Espacios y estructura */
  --gutter: clamp(1rem, 4.45vw, 4rem); /* 64 px a 1440 px */
  --container-max: 1440px;
  --section-space: clamp(3.5rem, 2rem + 5vw, 7rem);
  --header-h: 4.5rem;
  --logo-h: 2.75rem;
  --crop: 0.5rem; /* distancia de las marcas de corte */
  --stroke-w: 1.5px;
  --reveal-distance: 1.5rem; /* cuánto se desplazan los elementos al aparecer */

  /* Patrones de media tinta */
  --dots-dark: radial-gradient(circle, rgb(0 0 0 / 0.13) 1.2px, transparent 1.6px);
  --dots-soft: radial-gradient(circle, rgb(0 0 0 / 0.09) 1.2px, transparent 1.6px);
  --dots-on-black: radial-gradient(circle, rgb(255 255 255 / 0.08) 1.2px, transparent 1.6px);
  --dots-on-red: radial-gradient(circle, rgb(255 255 255 / 0.16) 1.2px, transparent 1.6px);
}

@media (min-width: 768px) {
  :root {
    --crop: 1.125rem; /* 18 px */
    --stroke-w: 2px;
    --reveal-distance: 3rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-h: 6rem; /* 96 px */
    --logo-h: 3.875rem; /* 62 px */
  }
}