/* 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}
}

/* Rejilla de hub — jerarquía por tamaño
   ====================================
   Octavo principio, tomado de la maqueta del hub: cuando varios elementos no
   valen lo mismo, la rejilla lo tiene que decir antes que el texto. Doce
   columnas con tres tamaños —7, 5 y 4— sitúan las arquitecturas arriba y las
   capacidades debajo sin necesidad de un rótulo que lo explique.
   Cada tarjeta cierra con un verbo distinto («ver flujo», «ver reforma», «ver
   red»): ninguna promete lo mismo que otra, que es lo que evita que el visitante
   sienta que ya hizo clic ahí. */
.hub-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:34px}
.hub-card{position:relative;display:flex;flex-direction:column;gap:12px;min-height:262px;
  padding:28px 28px 62px;border:1px solid var(--line);border-radius:28px;background:#fff;
  overflow:hidden;transition:transform .28s,box-shadow .28s,border-color .28s}
.hub-card:hover{transform:translateY(-5px);box-shadow:0 24px 65px rgba(9,13,16,.10);border-color:var(--ink)}
.hub-card h2,.hub-card h3{margin:0;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:.98;letter-spacing:-.05em}
.hub-card p{margin:0;max-width:46ch;color:var(--muted);font-size:.95rem;line-height:1.5}
.hub-card .tag{position:absolute;left:28px;bottom:24px;font-size:.67rem;font-weight:950;
  letter-spacing:.09em;text-transform:uppercase}
.hub-dato{margin-top:auto;font-size:.82rem;font-weight:800;letter-spacing:-.01em;color:var(--blue-dark)}
.hub-card:after{content:"↗";position:absolute;right:26px;top:22px;font-size:1.3rem;font-weight:900;opacity:.75}
.hub-card.grande{grid-column:span 7;min-height:376px}
.hub-card.media{grid-column:span 5;min-height:376px}
.hub-card.chica{grid-column:span 4}
.hub-card.amarilla{background:#fff4ae;border-color:#efe08e}
.hub-card.humo{background:#e7edf1;border-color:#d6dee4}
.hub-card.tinta{background:var(--ink);color:#fff;border-color:var(--ink)}
.hub-card.tinta p{color:#b9c2c7}
.hub-card.tinta .hub-dato{color:var(--yellow)}
.hub-card.amarilla .hub-dato,.hub-card.humo .hub-dato{color:#3c4a56}
@media(max-width:1000px){
  .hub-card.grande,.hub-card.media{grid-column:span 6;min-height:300px}
  .hub-card.chica{grid-column:span 6}
}
@media(max-width:680px){
  .hub-grid{grid-template-columns:1fr;gap:10px}
  .hub-card,.hub-card.grande,.hub-card.media,.hub-card.chica{grid-column:auto;min-height:0;padding:24px 24px 58px}
}

/* Blueprint de servicio — dos carriles, una columna por paso
   ========================================================
   Noveno principio. Antes había dos rejillas separadas: los cinco pasos del
   ciudadano por un lado y los cinco sistemas por otro. El lector tenía que
   emparejarlos de memoria. Puestos en una sola tabla de dos carriles, cada
   sistema queda justo debajo del paso al que sirve y la correspondencia se ve
   sin explicarla. La etiqueta del carril se queda fija al desplazar en
   horizontal, que es lo que hace legible una tabla ancha en un teléfono. */
.blueprint{display:grid;grid-template-columns:190px repeat(5,minmax(160px,1fr));gap:0;margin-top:24px;
  border:1px solid #cfd7db;border-radius:28px;overflow:auto;background:#fff;
  box-shadow:0 28px 80px rgba(9,13,16,.10);scrollbar-width:thin}
.blueprint .carril{display:contents}
.blueprint .carril-tit{position:sticky;left:0;z-index:4;display:flex;align-items:flex-end;
  min-height:145px;padding:22px 20px;background:var(--ink);color:#fff;font-size:.72rem;
  line-height:1.25;font-weight:950;letter-spacing:.11em;text-transform:uppercase;
  border-right:1px solid rgba(255,255,255,.12)}
.blueprint .persona .carril-tit{background:var(--yellow);color:var(--ink);border-right-color:rgba(9,13,16,.10)}
.blueprint .sistema .carril-tit{background:var(--blue-dark)}
.blueprint .celda{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-width:160px;min-height:145px;padding:23px 19px 20px;border-right:1px solid var(--line);
  text-align:left;color:inherit;transition:background .22s,transform .22s,box-shadow .22s}
.blueprint .persona .celda{background:#fffdf2;border-bottom:1px solid var(--line)}
.blueprint .sistema .celda{background:#f4f7f8}
.blueprint .celda:last-child{border-right:0}
.blueprint .celda:before{content:"";position:absolute;left:19px;top:20px;width:25px;height:4px;
  border-radius:99px;background:var(--yellow)}
.blueprint .sistema .celda:before{background:#748c9f}
.blueprint .celda b{display:block;font-size:.9rem;line-height:1.15;letter-spacing:-.02em}
.blueprint .celda span{display:block;margin-top:8px;color:var(--muted);font-size:.72rem;line-height:1.42}
.blueprint a.celda:hover{z-index:2;background:#fff;transform:translateY(-3px);box-shadow:0 15px 34px rgba(9,13,16,.10)}

/* Décimo principio: el impacto se separa del proceso.
   Qué se hace y para qué sirve son dos lecturas distintas y no deben compartir
   la misma caja. Dos paneles enfrentados —la persona en amarillo, el Estado en
   azul— con la conclusión grande y las consecuencias en fichas sueltas. */
.impacto-par{display:grid;grid-template-columns:1.06fr .94fr;gap:14px;margin-top:20px}
.impacto-lado{position:relative;min-height:250px;padding:30px;border-radius:26px;overflow:hidden;border:1px solid var(--line)}
.impacto-lado:after{content:"";position:absolute;right:-54px;bottom:-74px;width:210px;height:210px;
  border:1px solid currentColor;border-radius:50%;opacity:.11;box-shadow:0 0 0 38px currentColor}
.impacto-lado.persona{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.impacto-lado.estado{background:var(--blue-dark);color:#fff;border-color:var(--blue-dark)}
.impacto-lado small{position:relative;z-index:1;display:block;font-size:.72rem;font-weight:950;
  letter-spacing:.13em;text-transform:uppercase;opacity:.72}
.impacto-lado h3{position:relative;z-index:1;max-width:20ch;margin:34px 0 0;
  font-size:clamp(1.7rem,2.8vw,3rem);line-height:.99;letter-spacing:-.055em}
.fichas-impacto{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px;margin-top:28px}
.fichas-impacto span{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.34);
  border:1px solid rgba(9,13,16,.12);font-size:.67rem;font-weight:900}
.impacto-lado.estado .fichas-impacto span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}

@media(max-width:900px){
  .impacto-par{grid-template-columns:1fr}
  .blueprint{grid-template-columns:150px repeat(5,minmax(150px,1fr))}
}

/* Numeración del paso dentro del carril de la persona.
   El orden del recorrido es información: sin él, las cinco columnas parecen
   opciones en vez de secuencia. Va arriba a la derecha para no pelear con la
   barra de color que marca el carril. */
.blueprint .celda i{position:absolute;right:16px;top:13px;font-style:normal;
  font-size:.66rem;font-weight:950;letter-spacing:.1em;color:#b3bfc8}
.blueprint .sistema .celda i{color:#9aa9b4}
.blueprint-pie{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;
  color:var(--muted);font-size:.76rem;line-height:1.5}
.blueprint-pie b{font-weight:900;color:var(--ink)}

/* Undécimo principio: una cifra sin etiqueta no es un dato, es un adorno.
   Las tarjetas de pieza mostraban 60 · 33 sin decir de qué. La cifra y su
   significado viajan juntos, separados del cuerpo por una línea, para que la
   tarjeta se pueda leer por arriba (de qué va) o por abajo (cuánto pesa). */
.ed-card{position:relative}
.ed-card .ed-card-n{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  align-items:start;gap:12px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.ed-card .ed-card-n span{display:block}
.ed-card .ed-card-n b{display:block;font-size:1.42rem;line-height:1;letter-spacing:-.05em}
.ed-card .ed-card-n em{display:block;margin-top:5px;color:var(--muted);
  font-style:normal;font-size:.7rem;line-height:1.36}
.blueprint-hint{display:none}
@media(max-width:760px){
  .blueprint-hint{display:inline-flex;align-items:center;gap:6px;font-weight:900;color:var(--ink)}
  .blueprint-hint:after{content:"→"}
}

/* Duodécimo principio: la cifra destacada es una puerta, no un adorno.
   En /gestion la tesis de la página es que cada número abre el documento del
   que sale. Si la tarjeta destacada no se puede pulsar, la tesis se pierde en
   el resumen. La flecha aparece al pasar y el pie dice a qué documento lleva. */
a.dato{display:block;color:inherit;padding-bottom:38px;transition:transform .2s,box-shadow .2s,border-color .2s}
a.dato:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 18px 40px rgba(9,13,16,.10)}
a.dato.tinta:hover,a.dato.azul:hover{border-color:var(--yellow)}
a.dato .fuente{position:absolute;left:18px;right:36px;bottom:11px;display:flex;gap:7px;align-items:baseline;
  font-size:.59rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(9,13,16,.34)}
a.dato .fuente b{flex:none}
a.dato .fuente span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.66;font-weight:800}
a.dato.tinta .fuente,a.dato.azul .fuente{color:rgba(255,255,255,.44)}
a.dato:after{content:"↗";position:absolute;right:14px;bottom:9px;font-size:.8rem;font-weight:900;
  opacity:0;transform:translateY(4px);transition:.2s}
a.dato:hover:after{opacity:1;transform:none}
@media(max-width:900px){.datos-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.datos-grid{grid-template-columns:1fr}}

/* Décimotercero: el escenario del explorador admite pruebas al pie.
   Un capítulo de gestión no siempre tiene lista numerada de objetivos; a veces
   lo que hay son tres constancias sueltas (una fecha, una cifra, un acuerdo).
   Van como fichas al pie del escenario, no como párrafo. */
.escenario .pruebas{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14)}
.escenario .pruebas span{display:inline-block;padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.17);
  color:rgba(255,255,255,.9);font-size:.7rem;font-weight:900;transition:.18s}
.escenario .pruebas a{text-decoration:none}
.escenario .pruebas a span{color:var(--yellow);border-color:rgba(246,201,0,.34);background:rgba(246,201,0,.10)}
.escenario .pruebas a:hover span{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.escenario .cierre{margin:18px 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}
.datos-grid.cuatro{grid-template-columns:repeat(4,1fr)}
@media(max-width:1050px){.datos-grid.cuatro{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.datos-grid.cuatro{grid-template-columns:1fr}}