/* ==========================================================================
   CREZIR · Tokens del sistema visual y base tipográfica.
   Valores tomados literalmente de CREZIR_tokens.json (Grupo 1 v1.0) y de
   CREZIR_Reticula-y-ritmo-vertical.md (Grupo 2 v1.0).
   Este archivo no inventa un solo valor: si algo no está en los tokens,
   no está aquí.
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------ */
  --crezir-tinta: #121821;
  --crezir-tinta-suave: #2B3440;
  --crezir-azul-profundo: #1C3557;
  --crezir-azul-tenue: #E4E8EF;
  --crezir-acento: #C2410C;
  --crezir-acento-claro: #E4713F;
  --crezir-acento-oscuro: #B03B0A;
  --crezir-acento-tenue: #F6E7DF;
  --crezir-gris-dato: #6B7280;
  --crezir-gris-dato-oscuro: #5A606B;
  --crezir-gris-dato-claro: #9CA3AF;
  --crezir-papel: #E7E5E1;
  --crezir-fondo: #FAFAF8;
  --crezir-filete: #D6D3CD;
  --crezir-filete-fuerte: #B7B3AB;

  /* --- Familias --------------------------------------------------------- */
  --crezir-font-titulares: 'Archivo', 'Archivo Reserva', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --crezir-font-cuerpo: 'Public Sans', 'Public Sans Reserva', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --crezir-font-datos: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;

  /* --- Escala tipográfica · valores de MÓVIL (mobile first) --------------
     Los tamaños de escritorio de los tokens se alcanzan en los puntos de
     quiebre de más abajo. Ningún texto baja de 14 px en ningún quiebre.  */
  --crezir-size-dato-xxl: 72px;
  --crezir-size-dato-xl: 44px;
  --crezir-size-display: 36px;
  --crezir-size-h1: 30px;
  --crezir-size-h2: 25px;
  --crezir-size-h3: 20px;
  --crezir-size-h4: 17px;
  --crezir-size-cuerpo-l: 17px;
  --crezir-size-cuerpo: 16px;
  --crezir-size-cuerpo-s: 14px;
  --crezir-size-etiqueta: 12px;
  --crezir-size-fuente: 11px;

  --crezir-lh-dato-xxl: 0.88;
  --crezir-lh-dato-xl: 0.92;
  --crezir-lh-display: 1.02;
  --crezir-lh-h1: 1.08;
  --crezir-lh-h2: 1.14;
  --crezir-lh-h3: 1.22;
  --crezir-lh-h4: 1.35;
  --crezir-lh-cuerpo-l: 1.58;
  --crezir-lh-cuerpo: 1.65;
  --crezir-lh-cuerpo-s: 1.55;
  --crezir-lh-etiqueta: 1.3;
  --crezir-lh-fuente: 1.45;

  --crezir-tr-dato-xxl: -0.03em;
  --crezir-tr-dato-xl: -0.025em;
  --crezir-tr-display: -0.02em;
  --crezir-tr-h1: -0.018em;
  --crezir-tr-h2: -0.012em;
  --crezir-tr-h3: -0.008em;
  --crezir-tr-etiqueta: 0.10em;
  --crezir-tr-fuente: 0.02em;

  --crezir-medida-linea: 66ch;
  --crezir-medida-linea-max: 72ch;

  /* --- Espaciado · múltiplos de 4 px, ritmo vertical de 8 px ------------- */
  --crezir-space-1: 2px;
  --crezir-space-2: 4px;
  --crezir-space-3: 8px;
  --crezir-space-4: 12px;
  --crezir-space-5: 16px;
  --crezir-space-6: 24px;
  --crezir-space-7: 32px;
  --crezir-space-8: 48px;
  --crezir-space-9: 64px;
  --crezir-space-10: 96px;
  --crezir-space-11: 128px;
  --crezir-space-12: 192px;

  /* Ritmo entre secciones mayores: 96 px en móvil, 128 px en escritorio */
  --crezir-ritmo-seccion: var(--crezir-space-10);

  /* --- Radios · 4 px es el máximo del sistema ---------------------------- */
  --crezir-radius-none: 0;
  --crezir-radius-sm: 2px;
  --crezir-radius-md: 4px;

  /* --- Bordes · el sistema no usa sombras -------------------------------- */
  --crezir-border-hairline: 1px solid var(--crezir-filete);
  --crezir-border-fuerte: 1px solid var(--crezir-filete-fuerte);
  --crezir-border-estructural: 2px solid var(--crezir-azul-profundo);
  --crezir-border-acento: 3px solid var(--crezir-acento);
  --crezir-shadow-none: none;

  /* --- Retícula --------------------------------------------------------- */
  --crezir-grid-columnas: 4;
  --crezir-grid-gutter: 16px;
  --crezir-margen: 20px;
  --crezir-contenido-max: 1180px;

  /* Zona pulsable mínima */
  --crezir-toque-min: 44px;
}

/* --- 600 a 1023 px · 8 columnas ------------------------------------------ */
@media (min-width: 600px) {
  :root {
    --crezir-grid-columnas: 8;
    --crezir-grid-gutter: 24px;
    --crezir-margen: 40px;
    --crezir-size-dato-xxl: 96px;
    --crezir-size-dato-xl: 56px;
    --crezir-size-display: 48px;
    --crezir-size-h1: 36px;
    --crezir-size-h2: 28px;
    --crezir-size-h3: 21px;
    --crezir-size-cuerpo-l: 19px;
  }
}

/* --- 1024 px en adelante · 12 columnas y escala completa de los tokens ---- */
@media (min-width: 1024px) {
  :root {
    --crezir-grid-columnas: 12;
    --crezir-margen: 64px;
    --crezir-ritmo-seccion: var(--crezir-space-11);
    --crezir-size-dato-xxl: 120px;
    --crezir-size-dato-xl: 72px;
    --crezir-size-display: 64px;
    --crezir-size-h1: 44px;
    --crezir-size-h2: 32px;
    --crezir-size-h3: 23px;
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crezir-fondo);
  color: var(--crezir-tinta);
  font-family: var(--crezir-font-cuerpo);
  font-size: var(--crezir-size-cuerpo);
  line-height: var(--crezir-lh-cuerpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ninguna página del sitio produce desplazamiento horizontal. */
html, body { overflow-x: clip; }

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

/* --- Titulares ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--crezir-font-titulares);
  color: var(--crezir-tinta);
  margin: 0 0 var(--crezir-space-6);
  text-wrap: pretty;
}
h1 { font-size: var(--crezir-size-h1); line-height: var(--crezir-lh-h1); font-weight: 700; letter-spacing: var(--crezir-tr-h1); }
h2 { font-size: var(--crezir-size-h2); line-height: var(--crezir-lh-h2); font-weight: 600; letter-spacing: var(--crezir-tr-h2); }
h3 { font-size: var(--crezir-size-h3); line-height: var(--crezir-lh-h3); font-weight: 600; letter-spacing: var(--crezir-tr-h3); }
h4 { font-family: var(--crezir-font-cuerpo); font-size: var(--crezir-size-h4); line-height: var(--crezir-lh-h4); font-weight: 600; letter-spacing: 0; }
h5, h6 { font-family: var(--crezir-font-cuerpo); font-size: var(--crezir-size-cuerpo); font-weight: 600; }

p { margin: 0 0 var(--crezir-space-6); max-width: var(--crezir-medida-linea-max); }
p:last-child { margin-bottom: 0; }

/* --- Enlaces -------------------------------------------------------------- */
a {
  color: var(--crezir-acento);
  text-decoration: none;
  border-bottom: 1px solid var(--crezir-filete);
  transition: color .12s linear, border-color .12s linear;
}
a:hover { color: var(--crezir-tinta); border-bottom-color: var(--crezir-tinta); }

/* Foco visible en todo elemento interactivo: requisito de navegación por teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--crezir-acento);
  outline-offset: 2px;
  border-radius: var(--crezir-radius-sm);
}

/* --- Utilidades de texto -------------------------------------------------- */
.crezir-etiqueta {
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-etiqueta);
  line-height: var(--crezir-lh-etiqueta);
  font-weight: 500;
  letter-spacing: var(--crezir-tr-etiqueta);
  text-transform: uppercase;
  color: var(--crezir-gris-dato-oscuro);
  margin: 0;
}
.crezir-etiqueta--acento { color: var(--crezir-acento); }
.crezir-etiqueta--azul { color: var(--crezir-azul-profundo); }
.crezir-etiqueta--claro { color: var(--crezir-gris-dato-claro); }

.crezir-fuente {
  font-family: var(--crezir-font-datos);
  font-size: var(--crezir-size-fuente);
  line-height: var(--crezir-lh-fuente);
  font-weight: 400;
  letter-spacing: var(--crezir-tr-fuente);
  color: var(--crezir-gris-dato-oscuro);
  margin: 0;
  text-transform: uppercase;
}
.crezir-fuente--claro { color: var(--crezir-gris-dato-claro); }

.crezir-entradilla {
  font-size: var(--crezir-size-cuerpo-l);
  line-height: var(--crezir-lh-cuerpo-l);
  color: var(--crezir-tinta-suave);
  max-width: 56ch;
}

.crezir-cifra { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.crezir-nowrap { white-space: nowrap; }

/* --- Retícula ------------------------------------------------------------- */
.crezir-contenedor {
  width: 100%;
  max-width: calc(var(--crezir-contenido-max) + (var(--crezir-margen) * 2));
  margin-inline: auto;
  padding-inline: var(--crezir-margen);
}

.crezir-reticula {
  display: grid;
  grid-template-columns: repeat(var(--crezir-grid-columnas), minmax(0, 1fr));
  gap: var(--crezir-grid-gutter);
}

/* Reparto canónico: texto en 7 columnas, dato o tabla en 5.
   Entre 600 y 1023 px el dato y el texto se apilan y el bloque de dato va
   primero, como pide la retícula del Grupo 2. Por debajo de 600 px manda el
   titular: la página de inicio tiene que nombrar el problema del comprador
   en los primeros segundos, y en una sola columna estrecha el titular es
   quien lo hace. */
.crezir-reparto { display: grid; gap: var(--crezir-space-7); }
@media (min-width: 600px) and (max-width: 1023px) {
  .crezir-reparto > .crezir-reparto__dato { order: -1; }
}
@media (min-width: 1024px) {
  .crezir-reparto {
    grid-template-columns: 7fr 5fr;
    gap: var(--crezir-space-8);
    align-items: start;
  }
}

/* --- Secciones ------------------------------------------------------------ */
.crezir-seccion { padding-block: var(--crezir-space-8); }
@media (min-width: 1024px) { .crezir-seccion { padding-block: var(--crezir-space-9); } }

.crezir-seccion--apertura { border-bottom: var(--crezir-border-estructural); }
.crezir-seccion--interna { border-bottom: var(--crezir-border-fuerte); }
.crezir-seccion--filete { border-bottom: var(--crezir-border-hairline); }

/* Franja oscura: ancho completo de ventana, contenido dentro de la retícula. */
.crezir-franja--tinta { background: var(--crezir-tinta); color: var(--crezir-fondo); }
.crezir-franja--tinta h1,
.crezir-franja--tinta h2,
.crezir-franja--tinta h3,
.crezir-franja--tinta h4 { color: var(--crezir-fondo); }
.crezir-franja--tinta p { color: var(--crezir-papel); }
.crezir-franja--tinta a { color: var(--crezir-acento-claro); border-bottom-color: var(--crezir-tinta-suave); }
.crezir-franja--tinta a:hover { color: var(--crezir-fondo); border-bottom-color: var(--crezir-fondo); }

.crezir-franja--papel { background: var(--crezir-papel); }
.crezir-franja--azul { background: var(--crezir-azul-profundo); color: var(--crezir-fondo); }

/* --- Accesibilidad -------------------------------------------------------- */
.crezir-oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.crezir-saltar-al-contenido {
  position: absolute;
  left: var(--crezir-space-5);
  top: -100px;
  z-index: 9999;
  background: var(--crezir-azul-profundo);
  color: var(--crezir-fondo);
  padding: var(--crezir-space-4) var(--crezir-space-6);
  font-weight: 600;
  border: 0;
  transition: top .12s linear;
}
.crezir-saltar-al-contenido:focus { top: var(--crezir-space-5); color: var(--crezir-fondo); }

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