/* ═══════════════════════════════════════════════════════════════════════
   DOBLE V — piezas propias de "Capacidades y cifras"

   Se carga DESPUÉS de estilos.css y NO redefine ninguna clase del sistema:
   todo lo de acá parte por .iso-, .escala-, .viz-, .cubo-, .codigo- o .mini-.
   Así otros agentes pueden seguir tocando el sistema sin chocar con esto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Composición isométrica del encabezado ─────────────────────────────
   Paneles flotando sobre un plano, armados solo con transform + perspective.
   Sin imágenes: escala perfecto y no agrega ni un byte de descarga.
   El tamaño de todo se deriva del ancho de la escena (%, em) para que se
   achique junto con la columna en tablet y celular. */
.iso-escena {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .82;
  perspective: 1500px;
  perspective-origin: 50% 46%;
  font-size: clamp(7.5px, 1.05vw, 11px);
}
/* Halo tenue detrás: separa la composición del fondo sin usar una caja. */
.iso-escena::before {
  content: "";
  position: absolute; inset: 8% 4% 6%;
  background: radial-gradient(ellipse at 50% 55%, rgba(127, 187, 140, .10), transparent 68%);
  pointer-events: none;
}

.iso-mundo {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-42deg) scale(.8);
  animation: iso-vaiven 16s ease-in-out infinite;
}
/* El vaivén mueve la escena completa: los paneles conservan su altura
   relativa y la composición nunca se desarma. */
@keyframes iso-vaiven {
  0%, 100% { transform: rotateX(56deg) rotateZ(-42deg) scale(.8) translateZ(0); }
  50%      { transform: rotateX(53deg) rotateZ(-44deg) scale(.8) translateZ(16px); }
}

/* Plano base: la misma retícula de plano técnico del resto del sitio. */
.iso-piso {
  position: absolute; left: 6%; top: 6%; width: 88%; height: 88%;
  border: 1px solid rgba(127, 187, 140, .18);
  background-image:
    linear-gradient(rgba(127, 187, 140, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 187, 140, .10) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}

.iso-panel {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 3px;
  padding: 1.5em;
  box-shadow: -10px 14px 44px rgba(0, 0, 0, .55);
}
.iso-panel-a { left: 8%;  top: 44%; width: 56%; height: 32%; transform: translateZ(26px); }
.iso-panel-b { left: 36%; top: 16%; width: 50%; height: 32%; transform: translateZ(104px); }
.iso-panel-c { left: 10%; top: 4%;  width: 40%; height: 22%; transform: translateZ(182px); }

.iso-titulo {
  font-size: 1em; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave); opacity: .8; margin-bottom: 1.3em;
}
.iso-metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; }
.iso-metrica { border: 1px solid var(--panel-borde); border-radius: 2px; padding: .9em .8em; }
.iso-metrica span { display: block; font-size: .95em; color: var(--tinta-suave); opacity: .75; }
.iso-metrica b { display: block; font-size: 1.7em; font-weight: 500; margin-top: .3em; line-height: 1; }
.iso-metrica i { font-style: normal; font-size: .9em; color: var(--verde-vivo); }

.iso-barras { display: flex; align-items: flex-end; gap: .7em; height: 58%; }
.iso-barras span { flex: 1; background: rgba(127, 187, 140, .28); border-top: 1px solid var(--verde-vivo); }

.iso-chips { display: flex; flex-wrap: wrap; gap: .6em; }
.iso-chip {
  font-size: .95em; padding: .5em .8em; border-radius: 2px;
  border: 1px solid var(--panel-borde); color: var(--tinta-suave);
}
.iso-chip-on { background: var(--verde-tenue); border-color: var(--verde); color: var(--tinta-clara); }

/* Postes finos que "anclan" cada panel al plano: el truco que hace leer la altura. */
.iso-poste {
  position: absolute; width: 1px; background: rgba(127, 187, 140, .35);
  transform-origin: 50% 100%; transform: rotateX(-90deg);
}
.iso-poste-a { left: 12%; top: 76%; height: 26px; }
.iso-poste-b { left: 40%; top: 48%; height: 104px; }
.iso-poste-c { left: 14%; top: 26%; height: 182px; }

@media (prefers-reduced-motion: reduce) { .iso-mundo { animation: none; } }
@media (max-width: 980px) { .iso-escena { max-width: 520px; margin: 0 auto; } }

/* ── Tarjetas de escala técnica ────────────────────────────────────────
   Cifra grande + una mini-visualización que muestra de qué tamaño estamos
   hablando. La visualización nunca inventa un dato: es una representación. */
.escala { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.escala-tarjeta {
  border: 1px solid var(--panel-borde);
  background: var(--panel);
  border-radius: 3px;
  padding: 30px 26px 26px;
  display: flex; flex-direction: column;
}
.escala-cifra {
  font-family: var(--serif); font-size: clamp(40px, 4.6vw, 56px);
  line-height: 1; letter-spacing: -.02em;
}
.escala-rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--verde-vivo); margin-top: 14px;
}
.escala-tarjeta p { font-size: 13px; color: var(--tinta-suave); margin-top: 14px; }
.escala-viz { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--panel-borde); }
.escala-nota {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--tinta-suave); opacity: .55; margin-top: 14px;
}

/* Simulación de líneas de código numeradas. El número lo pone un contador
   CSS, así que agregar o sacar líneas en el HTML no descuadra nada. */
.codigo-sim { counter-reset: linea; display: grid; gap: 7px; }
.codigo-linea { display: flex; align-items: center; gap: 10px; }
.codigo-linea::before {
  counter-increment: linea; content: counter(linea);
  font-size: 9px; color: var(--tinta-suave); opacity: .45;
  width: 16px; text-align: right; flex: none; font-variant-numeric: tabular-nums;
}
.codigo-linea i { display: block; height: 3px; border-radius: 2px; background: rgba(233, 231, 223, .15); }
.codigo-linea.acento i { background: rgba(127, 187, 140, .5); }

/* Grilla de cubos: cada uno representa un grupo de módulos. */
.cubos { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.cubo { aspect-ratio: 1; border: 1px solid var(--panel-borde); border-radius: 1px; }
.cubo-lleno { background: rgba(127, 187, 140, .22); border-color: rgba(127, 187, 140, .45); }

.viz-svg { width: 100%; height: 92px; display: block; }

/* Dos bloques unidos: la integración dibujada, sin logos de terceros. */
.enlace-bloques { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 0; }
.bloque-int {
  border: 1px solid var(--panel-borde); border-radius: 3px;
  padding: 16px 12px; text-align: center;
}
.bloque-int svg { width: 22px; height: 22px; color: var(--verde-vivo); margin: 0 auto 10px; }
.bloque-int b { display: block; font-size: 13px; font-weight: 500; }
.bloque-int small { display: block; font-size: 10.5px; color: var(--tinta-suave); margin-top: 4px; }
.enlace-linea { position: relative; height: 1px; background: var(--panel-borde); }
.enlace-linea::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--verde-vivo);
}

/* Anillo de progreso. Se dibuja al entrar en pantalla, junto con la tarjeta. */
.viz-anillo { width: 118px; height: 118px; display: block; margin: 0 auto; }
.anillo-pista { stroke: var(--panel-borde); }
.anillo-avance { stroke: var(--verde-vivo); stroke-dasharray: 289.03; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .anillo-avance { stroke-dashoffset: 289.03; }
  .revelar.visible .anillo-avance { animation: anillo 1.3s cubic-bezier(.22, .61, .36, 1) .15s forwards; }
}
@keyframes anillo { to { stroke-dashoffset: 0; } }
.anillo-texto { font-family: var(--sans); font-size: 21px; font-weight: 500; fill: var(--tinta-clara); }

/* ── Mini-gráficos de las tarjetas claras ──────────────────────────────
   Son abstractos a propósito: ilustran la forma del indicador, no un valor.
   Poner números acá sería inventar una cifra. */
.mini-grafico { width: 100%; height: 62px; display: block; margin-bottom: 20px; }

/* ── Proceso en versión compacta ───────────────────────────────────────
   Mismos cinco pasos de la portada, sin ícono y con filete superior. */
.pasos-compacto .paso { border-top: 1px solid var(--crema-borde); padding-top: 20px; }
.oscuro .pasos-compacto .paso,
.oscuro-2 .pasos-compacto .paso,
.verde-bloque .pasos-compacto .paso { border-top-color: var(--panel-borde); }
.pasos-compacto .paso h3 { margin-top: 14px; font-size: 17px; }