/* Presentación de datos — principios tomados de las maquetas de referencia
   =======================================================================
   Siete reglas, pensadas para reutilizarse en cualquier página que tenga que
   enseñar cifras. Están aquí y no dentro de la página de la ENIA justamente
   porque el problema se repite: Puntos GOB, gestión, PNI y Estado digital
   presentan datos igual de planos.

   1. Cifra → significado → eje. Tres capas por dato: el número grande, la
      frase que lo explica y una etiqueta pequeña en la esquina que dice a qué
      eje pertenece. Esa tercera capa es la que convierte una lista en sistema.
   2. Ritmo cromático. No todas las tarjetas blancas: una en negro, una en
      amarillo, una en azul. Con la paleta que ya existe, sin inventar color.
   3. Bloque contenido, no sección nueva. Caja con borde y fondo papel, con
      cabecera y pie propios, que vive entre dos secciones sin competir con
      ellas ni exigir su propio titular gigante.
   4. Cabecera a dos aguas: título corto a la izquierda, línea de ejes a la
      derecha. Dice de qué va el bloque antes de que se lea un solo número.
   5. Cuando el dato tiene forma, dibujarla. Metas escalonadas → una pista con
      marcadores. Veinte instituciones → veinte cuadros. Trimestral → T1 a T4.
      Un número que se puede ver deja de tener que leerse.
   6. Explorar en vez de apilar. Cuatro bloques largos uno debajo de otro se
      abandonan al segundo; una lista de botones y un escenario que cambia
      mantiene el foco y cabe en una pantalla.
   7. Doble impacto. Cuando algo sirve a la persona y al Estado, se dice en dos
      fichas gemelas, no en un párrafo que mezcla las dos cosas.
   ===================================================================== */

/* --- 3 y 4 · el bloque contenido y su cabecera --- */
.bloque-datos{margin:22px 0 0;padding:18px;border:1px solid var(--line);border-radius:24px;background:var(--paper)}
.bloque-datos-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:14px;padding:2px 4px}
.bloque-datos-cab h3{margin:0;font-size:1rem;letter-spacing:-.02em}
.bloque-datos-cab p{margin:0;max-width:520px;color:var(--muted);font-size:.78rem;line-height:1.45;text-align:right}
.bloque-datos-pie{display:flex;justify-content:space-between;gap:20px;margin-top:12px;padding:0 4px;color:var(--muted);font-size:.68rem;line-height:1.4}

/* --- 1 y 2 · la cifra de tres capas, con ritmo de color --- */
.datos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dato{position:relative;min-height:128px;padding:17px 18px 30px;border:1px solid rgba(9,13,16,.08);border-radius:16px;background:#fff;overflow:hidden}
.dato .v{margin-bottom:8px;font-size:clamp(1.6rem,3vw,2.5rem);line-height:.9;letter-spacing:-.055em;font-weight:900}
.dato .t{color:var(--muted);font-size:.79rem;line-height:1.38}
.dato .eje{position:absolute;right:14px;bottom:11px;font-size:.59rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:rgba(9,13,16,.34)}
.dato.tinta{background:var(--ink);color:#fff;border-color:var(--ink)}
.dato.amarillo{background:#fff6c7;border-color:#eadc83}
.dato.azul{background:var(--blue-dark);color:#fff;border-color:var(--blue-dark)}
.dato.tinta .v,.dato.azul .v{color:var(--yellow)}
.dato.tinta .t,.dato.azul .t{color:rgba(255,255,255,.76)}
.dato.tinta .eje,.dato.azul .eje{color:rgba(255,255,255,.4)}

/* --- 5 · dibujar la forma del dato --- */
.figura-datos{margin-top:10px;padding:19px 21px 20px;border-radius:19px;background:var(--ink);color:#fff}
.figura-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.figura-cab h4{margin:0;font-size:1rem}
.figura-cab span{color:rgba(255,255,255,.56);font-size:.69rem}
.pista{position:relative;height:50px;margin-top:16px}
.pista:before{content:"";position:absolute;left:0;right:0;top:23px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--yellow) 0 25%,#b9a22b 25% 50%,var(--blue) 50% 70%,rgba(255,255,255,.13) 70%)}
.hito{position:absolute;top:0;transform:translateX(-50%);text-align:center}
.hito b{display:block;color:var(--yellow);font-size:.78rem}
.hito i{display:block;width:11px;height:11px;margin:8px auto 0;border-radius:50%;background:#fff;border:3px solid var(--yellow)}
.figura-datos > small{display:block;margin-top:6px;color:rgba(255,255,255,.58);font-size:.68rem;line-height:1.4}
.figuras-par{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;margin-top:10px}
.figura-clara{padding:19px;border:1px solid var(--line);border-radius:19px;background:#fff}
.figura-clara h4{margin:0 0 4px;font-size:1rem}
.figura-clara p{margin:0;color:var(--muted);font-size:.72rem}
.cuadros{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin-top:17px;max-width:420px}
.cuadros i{aspect-ratio:1;border-radius:5px;background:var(--yellow)}
.trimestres{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:18px}
.trimestres div{padding:10px 5px;text-align:center;background:var(--paper);border-top:3px solid var(--blue-dark);border-radius:0 0 9px 9px;font-size:.65rem;font-weight:900}

/* --- 6 · explorador: lista de botones + escenario --- */
.explorador{display:grid;grid-template-columns:.72fr 1.28fr;gap:14px;margin-top:20px}
.explorador-nav{display:grid;gap:8px;align-content:start}
.explorador-btn{width:100%;padding:15px 16px;text-align:left;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;transition:.18s}
.explorador-btn small{display:block;margin-bottom:4px;color:var(--blue-dark);font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.explorador-btn b{font-size:1rem;letter-spacing:-.02em;line-height:1.2}
.explorador-btn:hover{border-color:var(--ink)}
.explorador-btn[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.explorador-btn[aria-selected="true"] small{color:var(--yellow)}
.escenario{padding:32px;border-radius:24px;background:var(--ink);color:#fff}
.escenario-cab{display:grid;grid-template-columns:132px 1fr;gap:28px;align-items:center}
.anillo{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:50%}
.anillo:before,.anillo:after{content:"";position:absolute;border:1px dashed rgba(244,196,0,.45);border-radius:50%}
.anillo:before{inset:18%}
.anillo:after{inset:34%}
.anillo span{z-index:2;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:1.1rem;font-weight:950}
.escenario small{color:var(--yellow);font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.escenario h3{margin:9px 0 11px;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;letter-spacing:-.04em}
.escenario > p,.escenario-cab p{margin:0;color:rgba(255,255,255,.7);font-size:.95rem}
.escenario ol{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:8px;border-top:1px solid rgba(255,255,255,.13);padding-top:20px}
.escenario ol li{display:grid;grid-template-columns:46px 1fr;gap:14px;font-size:.9rem;color:rgba(255,255,255,.82);line-height:1.45}
.escenario ol b{color:var(--yellow);font-variant-numeric:tabular-nums}
.escenario [hidden]{display:none}

/* --- 7 · doble impacto --- */
.doble-impacto{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.doble-impacto div{padding:11px 12px;border-radius:10px;background:var(--paper);font-size:.72rem;line-height:1.4;color:var(--muted)}
.doble-impacto b{display:block;margin-bottom:3px;color:var(--ink)}

@media(max-width:900px){
  .explorador,.figuras-par{grid-template-columns:1fr}
  .bloque-datos-cab{display:block}
  .bloque-datos-cab p{margin-top:7px;text-align:left}
  .datos-grid{grid-template-columns:repeat(2,1fr)}
  .escenario-cab{grid-template-columns:1fr}
  .anillo{max-width:150px}
}
@media(max-width:520px){
  .datos-grid{grid-template-columns:1fr}
  .bloque-datos{padding:12px;border-radius:18px}
  .escenario{padding:22px}
  .escenario ol li{grid-template-columns:38px 1fr;gap:10px}
}