/* ============================================================
   tokens.css — Design tokens TRIX  ·  Sprint 1
   ------------------------------------------------------------
   Escala tipográfica FLUIDA (clamp), espaciado, colores y radios.
   Objetivo del sprint: que en móvil los títulos bajen de tamaño
   automáticamente (el H1 deja de ocupar toda la pantalla) sin
   tocar el HTML de las secciones ni cambiar el look en desktop.

   Cómo funciona la cascada:
   - Este archivo se carga DESPUÉS de styles/home/utility/icons.
   - Redefine las utilidades de TÍTULO (text-2xl/3xl/4xl) como fluidas
     → afecta a todos los <h2>/<h3> de secciones que las usan.
   - Re-afirma los md:text-* con sus tamaños ORIGINALES de desktop,
     para que de 768px en adelante todo se vea igual que hoy.

   Reversible: borra este archivo y su <link> en
   layouts/_default/baseof.html y queda exactamente como antes.
   ============================================================ */

:root {
  /* ---- Color · alias semánticos sobre la marca ya existente ----
     (la fuente de verdad sigue siendo --brand-* en home.css) */
  --color-primary:        var(--brand-blue-700, #0a3a63);
  --color-primary-strong: var(--brand-blue-900, #082742);
  --color-accent:         var(--brand-blue-500, #2b77e5);
  --color-brand:          var(--brand-blue, #0f4c81);
  --color-red:            var(--brand-red, #d62828);   /* rojo del logo */
  --color-ink:            #1e293b;   /* texto principal  (slate-800) */
  --color-muted:          #475569;   /* texto secundario (slate-600) */
  --color-faint:          #64748b;   /* texto terciario  (slate-500) */
  --color-surface:        #ffffff;
  --color-surface-alt:    #f8fafc;   /* slate-50 */

  /* ---- Radios ---- */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-pill: 9999px;

  /* ---- Escala de espaciado (para ritmo vertical en sprints siguientes) ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  /* Padding vertical de sección, fluido (móvil más compacto, desktop = 4rem) */
  --section-y: clamp(2.5rem, 1.5rem + 4vw, 4rem);

  /* ============================================================
     Tipografía fluida  ·  clamp(MIN_móvil, escalado, MAX_desktop)
     ============================================================ */
  --fs-body: 1rem;
  --fs-lead: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);   /* párrafos guía */

  /* Títulos base (páginas de contenido / Markdown sin clases) */
  --fs-h1: clamp(1.9rem,  1.40rem + 2.20vw, 3rem);      /* 30 → 48 px */
  --fs-h2: clamp(1.6rem,  1.30rem + 1.30vw, 2.25rem);   /* 26 → 36 px */
  --fs-h3: clamp(1.35rem, 1.20rem + 0.70vw, 1.75rem);   /* 22 → 28 px */
  --fs-h4: clamp(1.15rem, 1.05rem + 0.45vw, 1.5rem);    /* 18 → 24 px */
  --fs-h5: clamp(1.05rem, 1.00rem + 0.25vw, 1.25rem);   /* 17 → 20 px */
  --fs-h6: 1rem;

  /* Hero (rango propio y controlado: el H1 ya no llena la pantalla) */
  --fs-hero-h1:         clamp(2rem,    1.20rem + 3.60vw, 3.75rem);  /* 32 → 60 px (máx ~1130px) */
  --fs-hero-h2:         clamp(1.25rem, 0.71rem + 2.40vw, 2.25rem);  /* 20 → 36 px (máx ~1025px) */
  --fs-hero-form-title: clamp(1.25rem, 0.95rem + 1.35vw, 1.875rem); /* 20 → 30 px (máx ~1100px) */

  /* Utilidades de título → versión fluida (mismo MAX que el original) */
  --fs-util-2xl: clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);   /* 20 → 24 px */
  --fs-util-3xl: clamp(1.5rem,  1.25rem + 1.15vw, 1.875rem); /* 24 → 30 px */
  --fs-util-4xl: clamp(1.75rem, 1.40rem + 1.55vw, 2.25rem);  /* 28 → 36 px */
}

/* ============================================================
   1) HEADERS — utilidades de título ahora fluidas
   (solo tamaños de display; text-base/sm/lg/xl quedan intactos)
   ============================================================ */
[class~="text-2xl"] { font-size: var(--fs-util-2xl); }
[class~="text-3xl"] { font-size: var(--fs-util-3xl); }
[class~="text-4xl"] { font-size: var(--fs-util-4xl); }

/* Re-afirmar los breakpoints md: con sus tamaños DESKTOP originales.
   Debe ir DESPUÉS de las clases base para ganar de 768px en adelante,
   así el desktop se ve idéntico a hoy. */
@media (min-width: 768px) {
  [class~="md:text-2xl"] { font-size: 1.5rem; }    /* 24 px */
  [class~="md:text-3xl"] { font-size: 1.875rem; }  /* 30 px */
  [class~="md:text-4xl"] { font-size: 2.25rem; }   /* 36 px */
  [class~="md:text-5xl"] { font-size: 3rem; }      /* 48 px */
  [class~="md:text-6xl"] { font-size: 3.75rem; }   /* 60 px */
}

/* Títulos SIN clases utilitarias (páginas de contenido / Markdown) */
main h1 { font-size: var(--fs-h1); line-height: 1.12; }
main h2 { font-size: var(--fs-h2); line-height: 1.20; }
main h3 { font-size: var(--fs-h3); line-height: 1.25; }
main h4 { font-size: var(--fs-h4); line-height: 1.3; }
/* (cuando el elemento trae text-2xl/3xl/4xl, esas utilidades ganan por
    especificidad y mandan ellas; estas reglas solo aplican a títulos pelados) */

/* ============================================================
   2) HERO — aplicación de los tokens (gana por especificidad,
   no hace falta tocar el HTML del hero)
   ============================================================ */
.trix-hero__copy h1 {
  font-size: var(--fs-hero-h1);
  line-height: 1.1;
  text-wrap: balance;
}
.trix-hero__copy h2 {
  font-size: var(--fs-hero-h2);
  line-height: 1.2;
  text-wrap: balance;
}
.trix-hero__form-title {
  font-size: var(--fs-hero-form-title);
  line-height: 1.2;
}

/* ============================================================
   3) MARCA — acentos "líneas rojas y azules" (colores del logo)
   ============================================================ */
:root {
  --brand-line: linear-gradient(90deg, var(--brand-blue-500), var(--brand-red));
}

/* Franja de marca pegada al borde inferior del header (azul | rojo) */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-blue-500) 0 55%, var(--brand-red) 55% 100%);
}

/* Línea azul→rojo bajo el H1 del hero */
.trix-hero__copy h1::after {
  content: "";
  display: block;
  width: clamp(3.5rem, 12vw, 5rem);
  height: 4px;
  margin-top: 0.7rem;
  border-radius: 999px;
  background: var(--brand-line);
}

/* Línea de marca reutilizable, centrada bajo títulos de sección */
.brand-rule {
  display: block;
  width: 3.5rem;
  height: 4px;
  margin: 0.75rem auto 0;
  border-radius: 999px;
  background: var(--brand-line);
}

/* ============================================================
   4) RITMO VERTICAL — móvil más compacto (Sprint 4)
   Las secciones py-12/py-16 (3–4rem) se sienten muy largas en
   pantallas chicas; aquí se comprimen SOLO en móvil. Desktop intacto.
   ============================================================ */
@media (max-width: 600px) {
  [class~="py-16"] { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  [class~="py-14"] { padding-top: 2.25rem; padding-bottom: 2.25rem; }
  [class~="py-12"] { padding-top: 2rem; padding-bottom: 2rem; }
}