/* ==========================================================================
   Grupo Impresor Arcos · División de campañas políticas
   base.css — sistema compartido por las tres landings
   Paleta: base neutra institucional + dispositivo cromático multipartidista.
   Ningún color de partido es color de marca. El color de acción es la tinta.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Base institucional */
  --tinta:        #0F1419;
  --tinta-90:     #0F1419e6;
  --tinta-60:     #0F141999;
  --tinta-30:     #0F14194d;
  --tinta-12:     #0F14191f;
  --tinta-06:     #0F14190f;
  --papel:        #F6F4EF;
  --papel-2:      #EEEBE3;
  --papel-3:      #E3DFD4;
  --prensa:       #6B7280;
  --prensa-2:     #9AA1AC;
  --blanco:       #FFFFFF;

  /* Dispositivo multipartidista — peso idéntico, nunca color de marca */
  --p1: #A4123F;  /* guinda  */
  --p2: #0B4DA2;  /* azul    */
  --p3: #00843D;  /* verde   */
  --p4: #CE1126;  /* rojo    */
  --p5: #F26B21;  /* naranja */
  --p6: #F2C200;  /* amarillo*/
  /* Variantes legibles sobre papel: los tonos puros de naranja, amarillo y
     verde no alcanzan contraste AA en texto pequeño, así que para TEXTO se
     usan estas versiones oscurecidas y el tono puro queda para las barras. */
  --p1-txt: #A4123F;  /* 7.0:1 */
  --p2-txt: #0B4DA2;  /* 8.1:1 */
  --p3-txt: #00662F;  /* 6.2:1 */
  --p4-txt: #B00E20;  /* 6.1:1 */
  --p5-txt: #A8460A;  /* 5.6:1 */
  --p6-txt: #7A6200;  /* 6.0:1 */

  --franja: linear-gradient(90deg,
    var(--p1) 0 16.666%, var(--p2) 0 33.333%, var(--p3) 0 50%,
    var(--p4) 0 66.666%, var(--p5) 0 83.333%, var(--p6) 0 100%);

  /* Superficies semánticas — cada tema las redefine */
  --fondo:        var(--papel);
  --fondo-2:      var(--papel-2);
  --fondo-3:      var(--papel-3);
  --texto:        var(--tinta);
  --texto-suave:  var(--tinta-60);
  --borde:        var(--tinta-12);
  --borde-fuerte: var(--tinta-30);
  --accion:       var(--tinta);
  --accion-texto: var(--papel);

  /* Tipografía — máximo dos familias */
  --fuente:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --titulo:  "Archivo", var(--fuente);
  --ancho-hero: 125;   /* Archivo Expanded en hero  */
  --ancho-titulo: 100; /* Archivo normal en el resto */

  /* Escala tipográfica fluida */
  --t-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm:   clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --t-base: clamp(0.97rem, 0.93rem + 0.20vw, 1.07rem);
  --t-lg:   clamp(1.12rem, 1.04rem + 0.36vw, 1.34rem);
  --t-xl:   clamp(1.34rem, 1.18rem + 0.74vw, 1.86rem);
  --t-2xl:  clamp(1.70rem, 1.40rem + 1.46vw, 2.84rem);
  --t-3xl:  clamp(2.15rem, 1.58rem + 2.74vw, 4.24rem);
  --t-4xl:  clamp(2.65rem, 1.62rem + 5.00vw, 6.40rem);

  /* Ritmo y medidas */
  --gut:   clamp(1.15rem, 0.80rem + 1.70vw, 2.40rem);
  --bahia: clamp(3.40rem, 2.30rem + 5.20vw, 7.20rem);
  --ancho: 1280px;
  --ancho-angosto: 720px;
  --radio: 3px;
  --radio-lg: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accion); outline-offset: 3px; border-radius: 2px; }

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

/* ---------- 3. Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-variation-settings: "wdth" var(--ancho-titulo);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); letter-spacing: -0.01em; }
p  { text-wrap: pretty; }

.hero-titulo {
  font-variation-settings: "wdth" var(--ancho-hero);
  font-weight: 800;
  font-size: var(--t-4xl);
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.ojo {            /* kicker / etiqueta de sección */
  font-family: var(--fuente);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.entrada { font-size: var(--t-lg); color: var(--texto-suave); max-width: 58ch; }
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 4. Layout ---------- */
.env { width: min(100% - var(--gut) * 2); margin-inline: auto; max-width: var(--ancho); }
.env-angosto { max-width: var(--ancho-angosto); }
.seccion { padding-block: var(--bahia); }
.rejilla { display: grid; gap: var(--gut); }
@media (min-width: 720px) {
  .rejilla-2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) { .rejilla-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 5. Franja multipartidista ---------- */
.franja { height: 4px; background: var(--franja); border: 0; }
.franja--gruesa { height: 8px; }

/* Chips de filtro: los seis colores con peso idéntico */
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: var(--t-sm); font-weight: 500;
  background: transparent;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.chip:hover { border-color: var(--borde-fuerte); background: var(--tinta-06); }
.chip::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--chip-color, var(--prensa)); flex: none;
}
/* El color se asigna por la posición del ELEMENTO DE LISTA, no del chip:
   cada chip es hijo único de su <li>, así que contar chips los pintaría todos
   del mismo color y se perdería el peso idéntico entre los seis. */
.chips > *:nth-child(6n+1) .chip, .chip:nth-child(6n+1) { --chip-color: var(--p1); }
.chips > *:nth-child(6n+2) .chip, .chip:nth-child(6n+2) { --chip-color: var(--p2); }
.chips > *:nth-child(6n+3) .chip, .chip:nth-child(6n+3) { --chip-color: var(--p3); }
.chips > *:nth-child(6n+4) .chip, .chip:nth-child(6n+4) { --chip-color: var(--p4); }
.chips > *:nth-child(6n+5) .chip, .chip:nth-child(6n+5) { --chip-color: var(--p5); }
.chips > *:nth-child(6n+6) .chip, .chip:nth-child(6n+6) { --chip-color: var(--p6); }

/* ---------- 6. Botones ---------- */
.btn {
  --btn-bg: var(--accion);
  --btn-fg: var(--accion-texto);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radio);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -10px var(--tinta-60); }
.btn:active { transform: translateY(0); }
.btn--linea { --btn-bg: transparent; --btn-fg: var(--texto); border-color: var(--borde-fuerte); }
.btn--linea:hover { border-color: var(--accion); background: var(--tinta-06); }
.btn--wa { --btn-bg: #1FA855; --btn-fg: #fff; border-color: #1FA855; }
.btn--grande { padding: 18px 34px; font-size: var(--t-base); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- 7. Tarjetas ---------- */
.tarjeta {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.tarjeta:hover { border-color: var(--borde-fuerte); transform: translateY(-3px); }
.tarjeta__medio { margin: calc(-1 * clamp(1.2rem, 2.4vw, 1.9rem)); margin-bottom: 1.2rem; }
.tarjeta__medio img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
}

/* Dato / métrica */
.dato__cifra {
  font-family: var(--titulo);
  font-variation-settings: "wdth" 112;
  font-weight: 800; font-size: var(--t-2xl); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dato__pie { font-size: var(--t-sm); color: var(--texto-suave); margin-top: 6px; }

/* ---------- 8. Utilidades ---------- */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.regla { border: 0; border-top: 1px solid var(--borde); }
.pila { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }