/* ==========================================================================
   FUNDESET: base.css
   Tokens, fuentes autoalojadas, reset, tipografía, textura papel, botones,
   utilidades. El contrato completo del sistema está en DESIGN.md.
   ========================================================================== */

/* ---------- Fuentes (autoalojadas, subconjunto latin) ---------- */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/newsreader-v26-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/newsreader-v26-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/newsreader-v26-latin-600italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-v19-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-v19-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/source-sans-3-v19-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/caveat-v23-latin-600.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Marca (solo rellenos, trazos, cinta y molinillo; nunca texto) */
  --rojo: #D63A2F;
  --rojo-oscuro: #B22A21;
  --amarillo: #F2B705;
  --azul: #2E6FB7;
  --verde: #3E8E5A;

  /* Superficies: una sola familia de papel */
  --papel: #FAF5EC;
  --superficie: #FFFDF8;
  --papel-kraft: #EFE6D8;
  --tinta: #2B2723;

  /* Texto (todos AA sobre papel, superficie y kraft) */
  --texto: var(--tinta);
  --texto-suave: #6B6258;
  --lapiz: #8C857C;          /* solo trazos y líneas decorativas */
  --rojo-texto: #B22A21;
  --ambar-texto: #7F5A00;
  --azul-texto: #245C9A;
  --verde-texto: #2F7247;

  /* Roles */
  --accion: var(--rojo);
  --accion-hover: var(--rojo-oscuro);
  --accion-texto: #FFFFFF;
  --enlace: var(--azul-texto);
  --enlace-hover: var(--tinta);
  --error: var(--rojo-texto);
  --exito: var(--verde-texto);
  --foco: var(--azul);
  --renglon: rgba(46, 111, 183, 0.12);
  --margen-cuaderno: rgba(214, 58, 47, 0.25);

  /* Líneas y bordes */
  --linea: rgba(43, 39, 35, 0.14);
  --linea-fuerte: rgba(43, 39, 35, 0.28);
  --borde-papel: 2.5px solid var(--tinta);

  /* Radios: tres y solo tres */
  --radio-s: 4px;
  --radio-papel: 6px 10px 8px 12px / 10px 6px 12px 8px;
  --radio-pildora: 999px;

  /* Sombra: una receta, tintada a tinta */
  --sombra-papel: 4px 5px 0 rgba(43, 39, 35, 0.12);
  --sombra-papel-hover: 6px 8px 0 rgba(43, 39, 35, 0.14);

  /* Tipografía */
  --f-display: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --f-cuerpo: "Source Sans 3", "Segoe UI", sans-serif;
  --f-mano: "Caveat", "Segoe Print", cursive;

  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.25rem;
  --t-h3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --t-h2: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --t-h1: clamp(2.125rem, 1rem + 2.8vw, 3.25rem);
  --t-cifra: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --t-cita: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  --t-mano: 1.2rem;
  --lh-display: 1.12;
  --lh-tight: 1.3;
  --lh-cuerpo: 1.6;
  --track-display: -0.01em;

  /* Espaciado (base 4px) */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --espacio-seccion: clamp(4.5rem, 10vw, 8rem);
  --espacio-cabecera: clamp(2rem, 5vw, 3.5rem);
  --ancho-max: 1200px;
  --ancho-texto: 36rem;

  /* Capas */
  --z-lapiz: 4;
  --z-cinta: 5;
  --z-grano: 60;
  --z-margen: 90;
  --z-nav: 100;
  --z-skip: 300;
}

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

html {
  scroll-behavior: auto; /* las anclas las anima JS; sin pelear con el pin de ScrollTrigger */
  scroll-padding-top: 5rem;
}

body {
  font-family: var(--f-cuerpo);
  font-size: var(--t-base);
  line-height: var(--lh-cuerpo);
  color: var(--texto);
  background-color: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Textura papel: feTurbulence inline (cero requests). La opacidad va horneada en la matriz. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grano);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0.0225 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; }

p { text-wrap: pretty; }

a { color: var(--enlace); text-underline-offset: 3px; }
a:hover { color: var(--enlace-hover); }

strong { font-weight: 600; }
em { font-style: italic; }

button { font: inherit; cursor: pointer; }

::selection { background: var(--amarillo); color: var(--tinta); }

/* Foco visible: trazo discontinuo en azul (el rojo queda para la acción y el error) */
:focus-visible {
  outline: 3px dashed var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Utilidades ---------- */
.manuscrita {
  font-family: var(--f-mano);
  font-weight: 600;
}

/* Anotación manuscrita sobre un titular: una por cada tres secciones como máximo */
.eyebrow {
  font-family: var(--f-mano);
  font-weight: 600;
  font-size: var(--t-mano);
  color: var(--texto-suave);
  margin-bottom: var(--e-2);
}

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--e-4);
  z-index: var(--z-skip);
  padding: 0.6rem 1.1rem;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 0 0 var(--radio-s) var(--radio-s);
  text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--papel); }

/* Dato pendiente de confirmar: visible, entre corchetes, nunca con aspecto real */
.pendiente {
  display: inline-block;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--texto-suave);
}
.enlace--pendiente {
  opacity: 0.55;
  pointer-events: none;
}

/* Palabra resaltada con subrayado a mano */
.resaltado {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding-bottom: 0.12em;
}
.resaltado .subrayado {
  position: absolute;
  left: -2%;
  bottom: -0.2em;
  width: 104%;
  height: 0.35em;
  overflow: visible;
}

/* ---------- Botones (tres variantes + tamaño) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  font-size: var(--t-base);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radio-s);
  border: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primario {
  background: var(--accion);
  border-color: var(--accion);
  color: var(--accion-texto);
  box-shadow: var(--sombra-papel);
}
.btn--primario:hover {
  background: var(--accion-hover);
  border-color: var(--accion-hover);
  color: var(--accion-texto);
  box-shadow: var(--sombra-papel-hover);
}
.btn--primario:active { box-shadow: 2px 3px 0 rgba(43, 39, 35, 0.12); }

.btn--secundario {
  background: transparent;
  border-color: var(--tinta);
  color: var(--tinta);
}
.btn--secundario:hover { background: var(--papel-kraft); color: var(--tinta); }

.btn--enlace {
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  color: var(--tinta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12 C60 4 120 14 170 8 C220 3 260 12 296 7' fill='none' stroke='%23F2B705' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0.35em;
  transition: background-size 0.25s ease, color 0.2s ease;
}
.btn--enlace:hover { color: var(--tinta); background-size: 100% 0.55em; }

.btn--sm { padding: 0.45rem 1.1rem; font-size: var(--t-sm); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }

@media (max-width: 479px) {
  .btn:not(.btn--enlace):not(.btn--nav) { width: 100%; }
}

/* ---------- Separador tipo costura ---------- */
.costura {
  height: 0;
  max-width: min(86vw, var(--ancho-max));
  margin: 0 auto;
  border-top: 2px dashed var(--lapiz);
  opacity: 0.55;
}

/* ---------- Cinta adhesiva ---------- */
.cinta {
  position: absolute;
  width: 96px;
  height: 28px;
  z-index: var(--z-cinta);
  background: rgba(242, 183, 5, 0.45);
  box-shadow: 0 1px 3px rgba(43, 39, 35, 0.15);
  clip-path: polygon(3% 8%, 97% 0%, 100% 88%, 0% 100%);
  pointer-events: none;
}
.cinta--izq { top: -13px; left: -24px; transform: rotate(-32deg); }
.cinta--der { top: -13px; right: -24px; transform: rotate(28deg); }
.cinta--centro { top: -13px; left: 50%; transform: translateX(-50%) rotate(-4deg); }

@media (max-width: 767px) {
  .cinta--izq, .cinta--der {
    left: 50%;
    right: auto;
    top: -12px;
    transform: translateX(-50%) rotate(-3deg);
  }
}

/* ---------- Cabeceras de sección (a la izquierda; solo la cita va centrada) ---------- */
.seccion-head {
  max-width: var(--ancho-max);
  margin: 0 auto var(--espacio-cabecera);
}
.seccion-head h2 { max-width: 40rem; }
.seccion-head__sub {
  margin-top: var(--e-3);
  color: var(--texto-suave);
  font-size: var(--t-lg);
  max-width: 40rem;
}