/* ============================================================
   ICOB 2026 — /icob
   La pantalla es una cuadrícula de 10x7 placas blancas (2x35 en móvil)
   con mecánica split-flap REAL (Solari, reloj de aeropuerto): cae la
   mitad superior sobre el eje, la mitad inferior sigue y aterriza con
   un rebote. La portada, las letras, las tarjetas de pilar y la ficha
   de ciudad usan el MISMO mecanismo a otra escala. icob.js arma las capas.

   Orden del archivo: base y tablero → mecanismo → portada → ficha →
   navegación → reduced motion.
   ============================================================ */

/* El reloj del flap: base para las celdas; las placas grandes lo ralentizan */
:root {
  --flap-top-dur: 180ms;
  --flap-bot-dur: 300ms;
  --flap-bot-delay: 165ms;
}

/* Nunca hay desbordamiento horizontal: si algo asoma (placas escaladas,
   portada), iOS ensancha el viewport de layout y se ve una franja "más allá
   de la página". Y sin "font boosting": todos los tamaños son deliberados. */
html, body { overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---------- Fondo de polvo (canvas) detrás de TODO ---------- */
.fondo { position: fixed; inset: 0; z-index: 0; background: #f6f7f9; }
.fondo canvas, .marquee__lienzo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }

/* ---------- Estadio y tablero ---------- */
.estadio {
  position: relative; z-index: 1;
  height: 100vh; height: 100dvh;
  padding: clamp(20px, 3.2vh, 38px) clamp(24px, 3.4vw, 52px);
  background: transparent;
  overflow: hidden;
}
.board {
  position: relative;
  width: 100%; height: 100%;
  touch-action: none;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 0;
  box-shadow: 0 0 0 0.5px rgba(19, 50, 71, 0.35), 0 24px 70px rgba(19, 50, 71, 0.12);
  /* Los flaps plegados (rotateX(90°) + perspective) PROYECTAN unos px más
     allá de su celda. Recortar; WebKit sólo respeta el recorte sobre hijos
     3D si el contenedor está composificado. */
  overflow: hidden; overflow: clip;
  transform: translateZ(0);
}
@media (orientation: portrait) {
  .board { grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(10, 1fr); }
}
/* Móvil: tablero a sangre, 2 columnas, scroll vertical; el flip es por tap */
@media (max-width: 700px) {
  .estadio { height: auto; padding: 0; overflow: visible; }
  .board {
    height: auto; touch-action: pan-y; box-shadow: none;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(35, calc(100dvh / 7));
  }
}

/* ---------- Mini nav: el tucán, arriba a la izquierda, siempre ---------- */
.mini-nav {
  position: fixed; top: 10px; left: 12px; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
}
.mini-nav__icono {
  width: 20px; height: 22px; display: block;
  background: var(--primary-950, #133247);
  -webkit-mask: url(/assets/tukan_logos/logo.svg) no-repeat center / contain;
  mask: url(/assets/tukan_logos/logo.svg) no-repeat center / contain;
  transition: background-color 0.15s ease;
}
.mini-nav:hover .mini-nav__icono, .mini-nav:focus-visible .mini-nav__icono { background: var(--primary-700, #1c6088); }
@media (min-width: 701px) {
  .mini-nav {
    /* el CENTRO del cuadro cae en la esquina del tablero (= padding del .estadio) */
    top: clamp(20px, 3.2vh, 38px); left: clamp(24px, 3.4vw, 52px);
    transform: translate(-50%, -50%);
    width: 54px; height: 54px;
    background: #fff; border: 1.5px solid var(--primary-700, #1c6088);
    border-radius: 14px; box-shadow: 0 4px 14px rgba(19, 50, 71, 0.12);
    transition: box-shadow 0.15s ease;
  }
  .mini-nav:hover { box-shadow: 0 6px 18px rgba(19, 50, 71, 0.2); }
  .mini-nav__icono { width: 28px; height: 30px; }
}

/* ============================================================
   EL MECANISMO: mitades, capas, eje, caída
   ============================================================ */
.celda {
  position: relative; display: block; min-height: 0; min-width: 0;
  perspective: 620px;
  opacity: 0;
}
/* Placa de respaldo: sangra 0.5px para tapar las grietas de subpíxel del grid */
.celda::before { content: ""; position: absolute; inset: -0.5px; z-index: 0; background: #fff; }
.board.is-drawn .celda { opacity: 1; transition: opacity 0.35s ease var(--d, 0ms); }
.board.is-instant .celda { opacity: 1; transition: none; }

/* Mitades: ventanas de media placa; la cara vive adentro a doble altura */
.half {
  position: absolute; left: 0; right: 0; height: 50%;
  overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.half--top { top: 0; transform-origin: 50% 100%; }
.half--bot { top: 50%; transform-origin: 50% 0%; }
.cara { position: absolute; left: 0; right: 0; height: 200%; background: #fff; }
.half--top .cara { top: 0; }
.half--bot .cara { top: -100%; }
.cara--blanca, .cara--ciudad, .cara--letra, .cara--intro, .cara--pilarcard {
  box-shadow: inset 0 0 0 0.5px rgba(19, 50, 71, 0.45);
}

/* Capas */
.lay-next { z-index: 1; }                            /* mitad sup. nueva, fija detrás */
.lay-old  { z-index: 3; }                            /* mitad sup. vieja: cae primero */
.lay-base { z-index: 1; }                            /* mitad inf. vieja, base */
.lay-drop { z-index: 2; transform: rotateX(90deg); } /* mitad inf. nueva, plegada arriba */
/* La plegada NO se pinta hasta que el flap arranca: a 90° es invisible pero
   su proyección sobresale de la celda y en iOS eso ensanchaba la página. */
.lay-drop { display: none; }
.is-flip .lay-drop { display: block; }

/* El eje (la varilla del mecanismo) */
.eje {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px; z-index: 4;
  transform: translateY(-0.5px);
  background: rgba(19, 50, 71, 0.08);
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* La caída: 1) la mitad superior vieja cae acelerando (gravedad) y se
   oscurece; 2) al pasar el eje, la inferior nueva sigue y aterriza con
   un rebote corto (overshoot -7° → +4° → 0°) */
.is-flip .lay-old { animation: flap-top var(--flap-top-dur) cubic-bezier(0.55, 0, 1, 0.45) forwards; }
.is-flip .lay-drop { animation: flap-bot var(--flap-bot-dur) cubic-bezier(0.3, 0, 0.4, 1) var(--flap-bot-delay) forwards; }
@keyframes flap-top {
  0%   { transform: rotateX(0); filter: brightness(1); }
  100% { transform: rotateX(-90deg); filter: brightness(0.5); }
}
@keyframes flap-bot {
  0%   { transform: rotateX(90deg); filter: brightness(0.55); }
  62%  { transform: rotateX(-7deg); filter: brightness(1); }
  80%  { transform: rotateX(4deg); }
  100% { transform: rotateX(0); filter: brightness(1); }
}

/* El reloj escala con el TAMAÑO de la placa: una placa grande cae más lento */
.marquee .letra { --flap-top-dur: 260ms; --flap-bot-dur: 440ms; --flap-bot-delay: 240ms; }
.fila-pilares .letra { --flap-top-dur: 300ms; --flap-bot-dur: 520ms; --flap-bot-delay: 280ms; }
.marquee .placa-intro { --flap-top-dur: 380ms; --flap-bot-dur: 660ms; --flap-bot-delay: 350ms; }
.placa-reveal { --flap-top-dur: 460ms; --flap-bot-dur: 780ms; --flap-bot-delay: 420ms; }

/* ============================================================
   LA CARA DE CIUDAD (placa del tablero)
   ============================================================ */
.cara--ciudad { padding: 7% 5% 0 6%; text-align: left; transition: background-color 0.18s ease; }
.cara__head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cara__num {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(8px, 0.95vw, 11px); color: var(--text-muted, #5c6f7c);
}
.cara__ciudad {
  font-family: var(--font-sans); font-weight: 600; text-transform: uppercase;
  /* el tamaño se deriva del largo del nombre (--n) para caber en una línea */
  font-size: min(9.5px, calc(7.4vw / (var(--n, 10) * 0.72)));
  line-height: 1.4; letter-spacing: 0.06em; white-space: nowrap;
  color: var(--text-overline, #1b3a4b);
}
/* Regla de categoría: el color de la categoría vive sólo aquí */
.cara__hr { display: block; height: 1.2px; margin: 7px 2% 0 0; }
.cat-a .cara__hr { background: #87d012; }
.cat-b .cara__hr { background: #57aed9; }
.cat-c .cara__hr { background: #9fb0bb; }
.cat-d .cara__hr { background: #e0a13c; }
.cat-e .cara__hr { background: #f57b5e; }
/* Cuadros de pilar bajo la regla */
.cara__pilares { display: flex; gap: 4px; margin-top: 6px; }
.cara__pilar { width: 7px; height: 7px; border-radius: 1.5px; display: block; }
/* Medidor de score: track gris, tick en 50 */
.cara__medidor {
  position: absolute; bottom: 10%; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.medidor__track {
  position: relative; width: clamp(44px, 5.5vw, 84px); height: 8px;
  background: rgba(19, 50, 71, 0.07); border-radius: 4px;
}
.medidor__tick {
  position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1.5px;
  transform: translateX(-50%); background: rgba(90, 106, 117, 0.75); z-index: 2;
}
.medidor__seg { position: absolute; top: 0; bottom: 0; box-sizing: border-box; }
.medidor__seg--fill { border-radius: 0 4px 4px 0; }
.celda .medidor__seg--out { border-radius: 4px 0 0 4px; border: 1.5px solid; background: #fff; }
.medidor__num {
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(9px, 1vw, 12px); color: #4a5b66;
  font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right;
}
.cat-a .medidor__seg { background: #87d012; border-color: #87d012; }
.cat-b .medidor__seg { background: #57aed9; border-color: #57aed9; }
.cat-c .medidor__seg { background: #9fb0bb; border-color: #9fb0bb; }
.cat-d .medidor__seg { background: #e0a13c; border-color: #e0a13c; }
.cat-e .medidor__seg { background: #f57b5e; border-color: #f57b5e; }
/* Hover sobre una placa girada: lavado de su categoría (es un link, lo anuncia) */
.cat-a.is-flip:hover .cara--ciudad, .cat-a.is-flip:focus-visible .cara--ciudad { background: #f2f9e0; }
.cat-b.is-flip:hover .cara--ciudad, .cat-b.is-flip:focus-visible .cara--ciudad { background: #e9f3fa; }
.cat-c.is-flip:hover .cara--ciudad, .cat-c.is-flip:focus-visible .cara--ciudad { background: #eff2f4; }
.cat-d.is-flip:hover .cara--ciudad, .cat-d.is-flip:focus-visible .cara--ciudad { background: #fcf2df; }
.cat-e.is-flip:hover .cara--ciudad, .cat-e.is-flip:focus-visible .cara--ciudad { background: #fbeae4; }
.celda:focus-visible { outline: 3px solid #87d012; outline-offset: -3px; z-index: 5; }
@media (max-width: 700px) {
  .cara--ciudad { padding: 6% 4% 0 5%; }
  .cara__num { font-size: 13px; }
  .cara__ciudad { font-size: min(12.5px, calc(26vw / (var(--n, 10) * 0.72))); letter-spacing: 0.05em; }
  .cara__hr { height: 1px; margin: 5px 2% 0 0; }
  .cara__pilares { gap: 5px; }
  .cara__medidor { bottom: 8%; gap: 7px; }
  .medidor__track { width: 84px; height: 10px; border-radius: 5px; }
  .medidor__seg--fill { border-radius: 0 5px 5px 0; }
  .medidor__seg--out { border-radius: 5px 0 0 5px; }
  .medidor__num { font-size: 13px; }
}

/* Tooltip de los cuadros de pilar */
.tablero-tip {
  position: fixed; left: 50%; top: 0; z-index: 60; pointer-events: none;
  transform: translate(-50%, -100%);
  background: var(--primary-950, #133247); color: #fff;
  padding: 4px 9px; border-radius: 5px;
  font-family: var(--font-mono); font-size: 11px; white-space: nowrap;
  opacity: 0; transition: opacity 0.12s ease;
}
.tablero-tip.is-on { opacity: 1; }

/* ============================================================
   LA PORTADA: placas gigantes sobre el polvo
   ============================================================ */
.letra { position: absolute; perspective: 900px; z-index: 8; }
.cara--letra {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; color: #133247; line-height: 1;
}
.marquee {
  position: fixed; inset: 0; z-index: 40;
  background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px;
  overflow: hidden;
  transform: translateZ(0);
  transition: opacity 0.45s ease;
}
.marquee.is-out { opacity: 0; pointer-events: none; }
/* lavado central para que las placas respiren sobre el polvo */
.marquee--portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 62% 48% at 50% 52%, rgba(246, 247, 249, 0.9) 25%, rgba(246, 247, 249, 0.35) 60%, transparent 85%);
}
.marquee__row, .marquee .intro-cap, .marquee__anio, .marquee__hint { position: relative; z-index: 1; }
.marquee__row { display: flex; gap: clamp(6px, 1vw, 12px); transition: box-shadow 0.45s ease, background-color 0.45s ease; }
.marquee .letra { position: relative; width: clamp(64px, 11vw, 128px); height: clamp(92px, 15.5vw, 180px); background: #fff; }
.intro-cap {
  text-align: center; z-index: 9;
  font-family: var(--font-sans); font-weight: 600; text-transform: uppercase;
  font-size: clamp(9px, 1.1vw, 12px); letter-spacing: 0.15em;
  color: var(--text-overline, #1b3a4b);
  opacity: 0; transition: opacity 0.4s ease;
  pointer-events: none;
}
.intro-cap.is-in { opacity: 1; }
.marquee__anio {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.3em; padding-left: 0.3em;
  font-size: clamp(12px, 1.4vw, 16px); color: var(--primary-700, #1c6088);
  opacity: 0; transition: opacity 0.4s ease;
}
.marquee__anio.is-in { opacity: 1; }
.marquee__hint {
  position: absolute; bottom: 6%; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted, #5c6f7c);
  opacity: 0; transition: opacity 0.5s ease;
}
.marquee__hint.is-in { opacity: 1; animation: hint-breathe 2.4s ease-in-out 0.6s infinite; }
@keyframes hint-breathe { 50% { opacity: 0.4; } }

/* Fusión: las 4 placas se vuelven UNA sola entidad */
.marquee .letra .cara { transition: box-shadow 0.45s ease; }
.marquee__row.is-fundida { background: #fff; box-shadow: inset 0 0 0 0.5px rgba(19, 50, 71, 0.4); }
.marquee__row.is-fundida .letra .cara { box-shadow: none; }
/* durante el escalado el contorno se adelgaza para compensar el estirón */
.marquee__row.is-escalando { box-shadow: inset 0 0 0 0.25px rgba(19, 50, 71, 0.35); }
.letra.is-escalando .cara--blanca { box-shadow: inset 0 0 0 0.22px rgba(19, 50, 71, 0.4); transition: box-shadow 0.3s ease; }

/* La placa de texto (gigante) */
.marquee .placa-intro { position: relative; z-index: 2; width: min(92vw, 780px); height: min(78vh, 620px); background: #fff; }
.cara--intro { text-align: left; }
/* mitades del contenido: nada pisa el eje (50%) */
.mintro__arriba {
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  padding: 6% 7% 26px; display: flex; flex-direction: column; justify-content: flex-start;
}
.mintro__arriba .mintro__p { margin-top: auto; margin-bottom: 0; }
.mintro__abajo { position: absolute; top: 50%; left: 0; right: 0; bottom: 0; padding: 24px 7% 6%; }
.mintro__eyebrow {
  display: block; font-family: var(--font-sans); font-weight: 600;
  text-transform: uppercase; font-size: 12px; letter-spacing: 0.15em;
  color: var(--primary-700, #1c6088); margin-bottom: 12px;
}
.mintro__titulo {
  display: block; font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(18px, 2.3vw, 26px); line-height: 1.15;
  color: var(--text-heading, #1b3a4b); margin-bottom: 26px;
}
.mintro__p {
  display: block; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.55;
  color: var(--text-body, #3d5565); margin-bottom: 12px; max-width: 60ch;
}
.mintro__p b, .mintro__p strong { color: var(--text-heading, #1b3a4b); }
.mintro__p a { color: var(--primary-700, #1c6088); font-weight: 600; text-decoration: underline; }

/* Las tarjetas de pilar */
.fila-pilares { display: flex; }
.fila-pilares .letra { background: #fff; }
.cara--pilarcard { text-align: left; }
.pcard__arriba {
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  padding: 7% 9% 16px; display: flex; flex-direction: column;
  justify-content: flex-start; gap: 10px; overflow: hidden;
}
.pcard__head { display: flex; align-items: center; gap: 8px; }
.pcard__dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; display: block; }
.pcard__name {
  font-family: var(--font-sans); font-weight: 600; text-transform: uppercase;
  font-size: clamp(10px, 0.95vw, 12px); letter-spacing: 0.1em; line-height: 1;
  color: var(--text-overline, #1b3a4b); white-space: nowrap;
}
.pcard__desc i { font-size: clamp(9.5px, 0.82vw, 11px); line-height: 1.5; color: var(--text-body, #3d5565); }
.pcard__abajo {
  position: absolute; top: 50%; left: 0; right: 0; bottom: 0;
  padding: 16px 9% 9%; display: flex; flex-direction: column; gap: 6px;
}
.pcard__subt {
  font-family: var(--font-sans); font-weight: 600; text-transform: uppercase;
  font-size: 8.5px; letter-spacing: 0.14em; color: var(--text-muted, #5c6f7c); margin-bottom: 2px;
}
.pcard__ind {
  border-left: 2px solid; padding-left: 8px;
  font-size: clamp(9.5px, 0.85vw, 10.5px); line-height: 1.4; color: var(--text-body, #3d5565);
}
.pcard__fuente {
  margin-top: auto; padding-top: 6px;
  font-size: clamp(8px, 0.72vw, 9.5px); line-height: 1.35; color: var(--text-muted, #5c6f7c);
}
/* Estandarte del acto de pilares: cuelga como pestaña del borde superior del
   tablero que ya se asoma tras la portada; sale de la línea y se retrae tras ella */
.pilares-cap {
  position: absolute; top: clamp(20px, 3.2vh, 38px); left: 0; right: 0; z-index: 9;
  display: flex; justify-content: center;
  overflow: hidden; text-align: center; pointer-events: none;
}
.pilares-cap__placa {
  transform: translateY(-105%);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  background: #fff; box-shadow: inset 0 0 0 0.5px rgba(19, 50, 71, 0.35);
  border-radius: 0 0 10px 10px; padding: 8px 24px 9px;
}
.pilares-cap.is-in .pilares-cap__placa { transform: translateY(0); }
.pilares-cap__placa .mintro__eyebrow { margin-bottom: 0; }

@media (max-width: 700px) {
  /* la placa a sangre completa; la portada deja sitio abajo al hint */
  .marquee { padding-top: 52px; padding-bottom: 40px; }
  .marquee__hint { bottom: 12px; }
  .marquee .placa-intro { width: 100%; height: min(80vh, 620px); }
  .mintro__arriba { padding: 6% 6% 12px; }
  .mintro__abajo { padding: 12px 6% 6%; }
  .mintro__eyebrow { font-size: 10px; margin-bottom: 8px; }
  .mintro__titulo { font-size: 16px; margin-bottom: 10px; }
  .mintro__p { font-size: 11.5px; line-height: 1.45; margin-bottom: 8px; }
  .fila-pilares { flex-wrap: wrap; justify-content: center; }
  .pcard__arriba { padding: 6% 7% 12px; gap: 6px; }
  .pcard__dot { width: 8px; height: 8px; }
  .pcard__name { font-size: 8.5px; letter-spacing: 0.06em; }
  .pcard__desc i { font-size: 8px; line-height: 1.4; }
  .pcard__abajo { padding: 10px 7% 7%; gap: 4px; }
  .pcard__subt { font-size: 6.5px; }
  .pcard__ind { font-size: 7.5px; }
  .pcard__fuente { font-size: 6.5px; padding-top: 3px; }
  .pilares-cap { top: 0; }
  .pilares-cap__placa { padding: 7px 16px 8px; max-width: 88vw; border-radius: 0 0 8px 8px; }
  .pilares-cap__placa .mintro__eyebrow { font-size: 9px; }
}

/* ============================================================
   LA FICHA: una hoja editorial sobre el tablero
   ============================================================ */
.board.es-hoja .celda { opacity: 0; transition: opacity 0.4s ease; }
.hoja {
  position: absolute; inset: 0; z-index: 8;
  background: #fff; overflow: hidden; /* cabe en una página */
  padding: clamp(32px, 3.6vh, 44px) clamp(48px, 5vw, 96px) clamp(12px, 1.5vw, 22px) clamp(28px, 3.2vw, 52px);
  opacity: 0; transition: opacity 0.45s ease;
}
.hoja.is-in { opacity: 1; }
/* Revelado: el tablero entero es UNA placa que flapea a la ficha (o de una
   ficha a la vecina). La copia impresa en su cara no se anima. */
.placa-reveal { position: absolute; inset: 0; z-index: 12; background: #fff; perspective: 1700px; }
.cara--hoja .hoja { position: absolute; inset: 0; opacity: 1; transition: none; }

.dato__eyebrow {
  display: block; font-family: var(--font-sans); font-weight: 600; text-transform: uppercase;
  font-size: clamp(8px, 0.85vw, 11px); letter-spacing: 0.12em;
  color: var(--text-muted, #5c6f7c); line-height: 1.3;
}
.hoja__head {
  display: flex; align-items: flex-end; gap: clamp(16px, 2.2vw, 34px);
  padding-bottom: 8px; border-bottom: 2px solid var(--primary-700, #1c6088);
}
.hoja__id { flex: 1; min-width: 0; }
.hoja__id .dato__eyebrow { color: #7e878c; letter-spacing: 0.16em; }
.hoja__nombre {
  margin: 4px 0; font-family: var(--font-sans); font-weight: 700; color: #133247;
  font-size: clamp(22px, 2.5vw, 36px); line-height: 1.02; letter-spacing: -0.025em;
}
.hoja__entidad { display: block; color: #69747a; font-size: 12px; font-weight: 400; line-height: 1.25; }
.hoja__score { flex: 0 0 auto; margin-left: auto; text-align: right; padding-bottom: 2px; }
.ptit__score {
  display: block; font-family: var(--font-sans); font-weight: 700; line-height: 1;
  font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.04em; color: var(--primary-700, #1c6088);
  font-variant-numeric: tabular-nums;
}
.ptit__nota {
  display: block; margin-top: 3px; font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(9px, 0.78vw, 11px); color: #536773;
}

/* Banda de KPIs */
.hoja__kpis { display: flex; margin: 8px 0 10px; background: #f0f4fa; }
.hoja__kpi { flex: 1; display: flex; flex-direction: column; padding: 10px 12px; text-align: center; }
.kpi__val {
  font-family: var(--font-sans); font-weight: 700; color: #133247; margin-bottom: 3px;
  font-size: clamp(15px, 1.3vw, 19px); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.kpi__lab {
  font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: clamp(7.5px, 0.65vw, 9px); line-height: 1.2; color: #77838a;
}

/* Dos columnas: tabla de indicadores y gráficas */
.hoja__cols {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(380px, 0.82fr);
  gap: clamp(20px, 2.4vw, 36px); align-items: start;
}
.hoja__col--graficas { display: flex; flex-direction: column; gap: 30px; margin-top: 4px; }
.mercado-chart, .swarm-chart { width: 100%; max-width: 470px; }
.mercado-chart > .dato__eyebrow { margin-bottom: 8px; }
@media (min-width: 701px) and (max-width: 1180px) {
  .hoja__cols { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); }
}

/* Tabla de indicadores continua (como la impresa) */
.tind { display: flex; flex-direction: column; border-top: 1px solid rgba(19, 50, 71, 0.18); }
.tind__row { display: flex; align-items: center; gap: 7px; padding: 3.5px 5px; border-bottom: 1px solid rgba(19, 50, 71, 0.15); }
.tind__row--head { min-height: 28px; background: #eee; border-bottom-color: rgba(19, 50, 71, 0.25); }
.tind__row--head span {
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;
  font-size: 8.5px; letter-spacing: 0.1em; color: #535353;
}
.tind__row--head .tind__scorecol { justify-content: center; }
.tind__nom { flex: 1; color: #111; font-size: clamp(9px, 0.78vw, 11.5px); line-height: 1.15; }
.tind__val {
  flex: 0 0 58px; text-align: right; font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(9.5px, 0.82vw, 12px); color: #133247; font-variant-numeric: tabular-nums;
}
.tind__scorecol { flex: 0 0 96px; display: flex; align-items: center; gap: 6px; }
.tind__num, .tind__pos { font-family: var(--font-sans); font-size: clamp(9px, 0.75vw, 11px); color: #5e5e5e; font-variant-numeric: tabular-nums; }
.tind__pos { flex: 0 0 28px; text-align: right; }
.tind__bar { position: relative; flex: 1; height: 9px; border-radius: 3px; background: rgba(19, 50, 71, 0.065); }
.tind__tick { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(90, 106, 117, 0.7); }
.tind__seg { position: absolute; top: 0; bottom: 0; border-radius: 0 3px 3px 0; }
.tind__seg--out { background: #fff; border: 1.2px solid; border-radius: 3px 0 0 3px; box-sizing: border-box; }
.tind__grupo {
  display: flex; align-items: center; gap: 7px; min-height: 29px; padding: 3px 5px;
  background: #f4f4f4; border-bottom: 1px solid rgba(19, 50, 71, 0.15);
}
.tind__gdot { width: 4px; height: 14px; border-radius: 2px; }
.tind__gnom { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; font-size: clamp(9px, 0.8vw, 11.5px); letter-spacing: 0.06em; }
.tind__gsub { font-size: clamp(8px, 0.72vw, 10.5px); color: #858585; }
/* cada fila elige el indicador del enjambre */
.tind__row[data-indicador] { cursor: pointer; transition: background-color 0.15s ease; }
.tind__row[data-indicador]:hover { background: #f5f7f8; }
.tind__row[data-indicador].is-selected { background: #eef4f7; box-shadow: inset 3px 0 0 #1c6088; }
.tind__row[data-indicador]:focus-visible { outline: 2px solid #87d012; outline-offset: -2px; }

/* Mercado: barras apiladas (svg con d3; .mrow es el respaldo sin d3) */
.mercado-chart__svg, .swarm-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.market-track { fill: #eef1f3; }
.market-seg { cursor: crosshair; stroke: #fff; stroke-width: 0.8px; shape-rendering: crispEdges; transition: opacity 0.12s ease; }
.market-label, .market-total, .market-legend text { fill: #111; font: 11px var(--font-sans); }
.market-total { transition: fill 0.12s ease; }
.market-total.is-filtered { fill: #133247; }
.market-share { pointer-events: none; font: 10px var(--font-sans); transition: opacity 0.12s ease; }
.market-legend { cursor: pointer; transition: opacity 0.12s ease; }
.mrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mrow__lab { flex: 0 0 21%; font-size: 10px; color: var(--text-body, #3d5565); line-height: 1.2; }
.mrow__bar { flex: 1; display: flex; height: 15px; border-radius: 2px; overflow: hidden; background: #eef1f3; }
.mrow__seg { display: inline-flex; align-items: center; justify-content: center; height: 100%; }
.mrow__pct { font-family: var(--font-mono); font-size: 8.5px; color: rgba(255, 255, 255, 0.92); }
.mrow__tot { flex: 0 0 17%; text-align: right; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted, #5c6f7c); }

/* Enjambre: las 70 metrópolis en el indicador elegido */
.swarm-zone { fill: rgba(19, 50, 71, 0.045); }
.swarm-grid line { stroke: #d7dcdf; stroke-width: 1; }
.swarm-median { stroke: #6f777c; stroke-width: 1.5; stroke-dasharray: 4 3; }
.swarm-favor { fill: #536773; font: 500 11px var(--font-sans); }
.swarm-points circle { stroke: #fff; stroke-width: 0.8; cursor: pointer; }
.swarm-points circle:hover { stroke: #111; stroke-width: 1.5; }
.swarm-points circle.is-current { stroke: #111; stroke-width: 2; cursor: default; }
.swarm-current-label text {
  paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round;
  fill: #111; font: 600 11px var(--font-sans);
}
.swarm-axis path { stroke: #8e979c; }
.swarm-axis line { stroke: #d0d5d8; }
.swarm-axis text { fill: #536773; font: 11px var(--font-sans); font-variant-numeric: tabular-nums; }
.swarm-title { fill: #111; font: 600 11px var(--font-sans); }

/* Móvil: la ficha es un documento con scroll; el tablero se retira */
@media (max-width: 700px) {
  .board.es-hoja { display: block; height: auto; }
  .board.es-hoja .celda { display: none; }
  .hoja { position: relative; min-height: 100dvh; overflow: visible; padding: 60px 18px 96px; }
  .hoja__id > .dato__eyebrow { position: absolute; top: 24px; right: 18px; font-size: 9px; }
  .placa-reveal { inset: auto; top: 0; left: 0; right: 0; height: 100dvh; }
  .hoja__head { flex-wrap: wrap; gap: 12px; }
  .hoja__nombre { font-size: 26px; }
  .hoja__entidad { font-size: 12.5px; }
  .ptit__score { font-size: 34px; }
  .ptit__nota { font-size: 10.5px; }
  .hoja__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #dfe6ef; margin: 12px 0 18px; }
  .hoja__kpi { background: #f0f4fa; padding: 10px 6px; }
  .kpi__val { font-size: 15px; }
  .kpi__lab { font-size: 8px; }
  .hoja__cols { grid-template-columns: 1fr; gap: 26px; }
  .hoja__col--graficas { gap: 26px; }
  .mercado-chart, .swarm-chart { max-width: none; }
  .dato__eyebrow { font-size: 10px; }
  .tind__row { padding: 6px 4px; }
  .tind__row--head span { font-size: 9px; }
  .tind__nom { font-size: 12px; line-height: 1.2; }
  .tind__val { font-size: 12px; flex-basis: 62px; }
  .tind__scorecol { flex-basis: 84px; }
  .tind__num, .tind__pos { font-size: 11px; }
  .tind__gnom { font-size: 11px; }
  .tind__gsub { font-size: 10px; }
}

/* ---------- Navegación entre fichas: pill fija abajo ---------- */
.ficha-nav {
  position: fixed; left: 50%; bottom: 14px; z-index: 30;
  display: grid; grid-template-columns: minmax(124px, 1fr) auto minmax(124px, 1fr);
  align-items: stretch; min-height: 42px; overflow: hidden;
  transform: translate(-50%, 12px);
  border: 1px solid rgba(19, 50, 71, 0.18); border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 28px rgba(19, 50, 71, 0.18);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ficha-nav.is-in { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.ficha-nav.is-busy { pointer-events: none; opacity: 0.65; }
.ficha-nav button {
  min-width: 0; padding: 0 16px; border: 0; background: transparent; cursor: pointer;
  color: #536773; font: 500 11px/1.2 var(--font-sans); white-space: nowrap;
}
.ficha-nav button:hover { background: var(--primary-50, #f0f4fa); }
.ficha-nav button:focus-visible { outline: 2px solid #87d012; outline-offset: -3px; }
.ficha-nav button:disabled { opacity: 0.25; cursor: default; }
.ficha-nav__vecino { position: relative; text-align: center; }
.ficha-nav__num { color: var(--primary-700, #1c6088); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.ficha-nav__flecha { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; }
.ficha-nav__vecino--ant .ficha-nav__flecha { left: 14px; }
.ficha-nav__vecino--sig .ficha-nav__flecha { right: 14px; }
.ficha-nav__vecino:disabled .ficha-nav__flecha { display: none; }
.ficha-nav__centro {
  border-right: 1px solid rgba(19, 50, 71, 0.14) !important;
  border-left: 1px solid rgba(19, 50, 71, 0.14) !important;
  color: #fff !important; font-weight: 600 !important;
  background: var(--primary-950, #133247) !important;
}
.ficha-nav__centro:hover { background: var(--primary-800, #1b4a67) !important; }
@media (max-width: 700px) {
  .ficha-nav { bottom: 10px; grid-template-columns: 84px auto 84px; min-height: 40px; }
  .ficha-nav button { padding: 0 14px; font-size: 12px; }
  .ficha-nav__vecino--ant .ficha-nav__flecha { left: 12px; }
  .ficha-nav__vecino--sig .ficha-nav__flecha { right: 12px; }
}

/* ============================================================
   REDUCED MOTION: todo estático, nada cae ni flota
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .celda, .board.is-drawn .celda { opacity: 1; transition: none; }
  .is-flip .lay-old { animation: none; display: none; }
  .is-flip .lay-drop { animation: none; transform: rotateX(0); }
  .cara--ciudad, .intro-cap, .marquee__anio, .marquee__hint, .hoja, .ficha-nav, .pilares-cap__placa { transition: none; }
  .marquee__hint.is-in { animation: none; }
  .placa-reveal { display: none; }
}