/* ═══════════════════════════════════════════════════════════════════════
   PORTADA iCC
   ═══════════════════════════════════════════════════════════════════════

   El mapa está FIJO al fondo de la ventana y el texto se desplaza por
   encima. Cada sección .escena ocupa una pantalla y, al entrar en cuadro,
   ordena al mapa una transformación. De ahí que el color del texto tenga
   que sostenerse sobre una imagen que cambia: el velo de gradiente que hay
   entre el mapa y el contenido es lo que garantiza la legibilidad.

   A partir de .solido el fondo se vuelve opaco y el mapa deja de verse: el
   argumento pasa de la demostración a la explicación.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --fondo:        #060b16;
  --fondo-2:      #0a1120;
  --panel:        rgba(14, 21, 38, 0.72);
  --borde:        rgba(148, 163, 184, 0.16);
  --borde-fuerte: rgba(148, 163, 184, 0.32);
  --texto:        #f1f5f9;
  --texto-tenue:  #cbd5e1;
  --texto-debil:  #7d8ba1;
  --acento:       #38bdf8;
  --acento-2:     #a78bfa;
  --calor:        #f97316;
  --ok:           #34d399;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(56, 189, 248, 0.28); }

/* ─────────────────────────────────────────────────────── escenario ── */

.escenario {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#mapa-portada { position: absolute; inset: 0; }
#mapa-portada canvas { outline: none; }

/* Sin este velo, el titular se pierde sobre las zonas claras del mapa.
   Es más denso a la izquierda, que es donde vive el texto. */
.velo-escenario {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(6, 11, 22, 0.52) 0%,
      rgba(6, 11, 22, 0.50) 34%,
      rgba(6, 11, 22, 0.14) 62%,
      rgba(6, 11, 22, 0.25) 100%),
    radial-gradient(120% 90% at 50% 110%, rgba(6, 11, 22, 0.85), transparent 62%);
  transition: opacity 0.9s ease;
}
/* En el héroe el mapa ES el argumento: el velo solo protege la banda de texto
   con un degradado vertical, y deja la ciudad a la vista arriba y abajo. */
body.centrado-hero .velo-escenario {
  background:
    linear-gradient(180deg,
      rgba(6, 11, 22, 0.62) 0%,
      rgba(6, 11, 22, 0.30) 14%,
      rgba(6, 11, 22, 0.33) 34%,
      rgba(6, 11, 22, 0.33) 62%,
      rgba(6, 11, 22, 0.34) 84%,
      rgba(6, 11, 22, 0.33) 100%);
}

/* Un grano finísimo evita el bandeado de los degradados grandes */
.grano {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ──────────────────────────────────────────────────────────── barra ── */

.barra {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 28px;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
body.barra-solida .barra {
  background: rgba(6, 11, 22, 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--borde);
}

.marca-icc { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.marca-icc .escudo {
  width: 36px; height: 36px;
  display: block;
}
.marca-icc span span, .marca-icc > span { display: flex; flex-direction: column; line-height: 1.15; }
.marca-icc b { font-size: 15px; letter-spacing: -0.01em; }
.marca-icc i { font-style: normal; font-size: 10.5px; color: var(--texto-debil); }

.barra-enlaces { display: flex; align-items: center; gap: 8px; }
.barra-enlaces > a {
  padding: 8px 13px;
  font-size: 12.5px;
  color: var(--texto-tenue);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.16s, background 0.16s;
}
.barra-enlaces > a:hover { color: var(--texto); background: rgba(148, 163, 184, 0.1); }

.boton-entrar {
  color: #fff !important;
  background: linear-gradient(135deg, #0284c7, #4f46e5);
  font-weight: 500;
}
.boton-entrar:hover { filter: brightness(1.14); background: linear-gradient(135deg, #0284c7, #4f46e5) !important; }

.idiomas {
  display: flex; gap: 1px; padding: 2px; margin-right: 6px;
  background: rgba(148, 163, 184, 0.1);
  border-radius: 7px;
}
/* Con tres idiomas el conmutador se estrecha para no comerse la barra */
/* Interruptor de animaciones. Vive junto a los idiomas porque es lo mismo: una
   preferencia de cómo se ve la página, no una función del producto. */
.mov-boton {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, .04);
  color: var(--texto-2);
  border-radius: 8px;
  padding: 5px 8px;
  font: inherit; font-size: 11px; line-height: 1;
  cursor: pointer;
  margin-right: 6px;
  white-space: nowrap;
}
.mov-boton:hover { color: var(--texto); border-color: var(--texto-3); }
.mov-boton[aria-pressed="false"] { opacity: .55; }
.mov-boton i { font-style: normal; font-size: 12px; line-height: 1; }
/* Girando despacio cuando está encendido: el propio control demuestra lo que
   hace, que en un botón de dos estados sin rótulo es lo único que lo explica. */
.mov-boton[aria-pressed="true"] i { animation: giro-mov 6s linear infinite; }
@keyframes giro-mov { to { transform: rotate(360deg); } }
.sin-movimiento .mov-boton i { animation: none; }
@media (max-width: 640px) {
  .mov-boton span { display: none; }
  .mov-boton { padding: 5px 7px; margin-right: 4px; }
}

.idiomas button {
  padding: 5px 8px;
  font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--texto-debil);
  background: none; border: 0; border-radius: 5px;
  cursor: pointer;
}
.idiomas button.activo { color: var(--texto); background: rgba(148, 163, 184, 0.18); }

/* ────────────────────────────────────────────────────────── escenas ── */

main { position: relative; z-index: 10; }

.escena {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 120px 28px 90px;
}
.escena[data-escena="portada"] { justify-content: center; text-align: center; }

/* Igual que el bloque: el contenedor ya no se mueve, se mueve lo que lleva
   dentro. Ver «revelado por elemento» al final de esta hoja. */
.contenido { width: min(560px, 100%); }
.contenido.centrado { width: min(880px, 100%); }

.antetitulo {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--acento);
  margin-bottom: 22px;
}

.titular {
  text-shadow: 0 2px 34px rgba(6, 11, 22, 0.85);
  font-family: var(--serif);
  font-size: clamp(33px, 5.9vw, 64px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin-bottom: 24px;
}
.titular em {
  font-style: italic;
  background: linear-gradient(100deg, #7dd3fc 10%, #c4b5fd 55%, #fbbf24 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.entradilla {
  text-shadow: 0 1px 18px rgba(6, 11, 22, 0.8);
  font-size: clamp(14.5px, 1.6vw, 17px);
  line-height: 1.62;
  color: var(--texto-tenue);
  max-width: 610px;
  margin: 0 auto;
}

.cifras-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 44px auto 0;
  max-width: 700px;
  padding: 20px 0;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.cifras-hero div { display: flex; flex-direction: column; gap: 5px; }
.cifras-hero b {
  font-family: var(--mono);
  font-size: clamp(17px, 2.5vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cifras-hero div:last-child b { color: var(--ok); }
.cifras-hero span {
  font-size: 10.5px; line-height: 1.35;
  color: var(--texto-debil);
  padding: 0 6px;
}

.pie-hero {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin-top: 42px;
  font-size: 11.5px; color: var(--texto-debil);
}
.desliza {
  width: 19px; height: 30px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 11px;
  position: relative;
}
.desliza i {
  position: absolute; left: 50%; top: 6px;
  width: 3px; height: 6px; margin-left: -1.5px;
  background: var(--acento);
  border-radius: 2px;
  animation: rueda 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes rueda {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55%      { transform: translateY(11px); opacity: 0.15; }
}

.marca-escena {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--acento);
  margin-bottom: 16px;
}

.escena h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin-bottom: 20px;
}
.escena p {
  font-size: 14.5px; line-height: 1.68;
  color: var(--texto-tenue);
  margin-bottom: 15px;
}
.escena p b { color: var(--texto); font-weight: 600; }
.apostilla { font-size: 12.5px !important; color: var(--texto-debil) !important; }

.lista-marca { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.lista-marca li {
  position: relative;
  padding-left: 21px;
  font-size: 13.5px; line-height: 1.5;
  color: var(--texto-tenue);
}
.lista-marca li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px;
  background: var(--acento);
  border-radius: 2px;
  transform: rotate(45deg);
}
.lista-marca b { color: var(--texto); font-weight: 600; }

.rampa-demo {
  height: 9px; border-radius: 5px; margin: 26px 0 8px;
  position: relative;
  background: linear-gradient(90deg,
    #1e3a8a 0%, #1d4ed8 8%, #0284c7 16%, #0891b2 24%, #14b8a6 32%,
    #4ade80 42%, #a3e635 52%, #facc15 62%, #fb923c 73%, #f97316 82%,
    #ef4444 91%, #b91c1c 100%);
}
.rampa-demo span {
  position: absolute; top: -4px; left: 26.7%;
  width: 2px; height: 17px;
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}
.rampa-pies {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  color: var(--texto-debil);
  margin-bottom: 20px;
}

/* ────────────────────────────────────────────────── cuerpo sólido ── */

/* EL CUERPO DE ABAJO YA NO TAPA EL MAPA.
   Llevaba `background: var(--fondo)`, opaco, y a partir de la última escena la
   ciudad desaparecía: la mitad inferior parecía otra página. Ahora es un velo
   translúcido y el mapa sigue vivo por debajo hasta el pie.

   El velo NO es uniforme: se aclara en el centro de cada bloque y se cierra en
   las juntas. Así la ciudad asoma donde hay hueco y se retira donde hay
   párrafo, que es la única forma de que un texto largo siga leyéndose sobre
   algo que se mueve. */
.solido {
  position: relative;
  z-index: 20;
  background: linear-gradient(180deg,
    rgba(6, 11, 22, 0.92) 0%,
    rgba(6, 11, 22, 0.42) 5%,
    rgba(6, 11, 22, 0.15) 50%,
    rgba(6, 11, 22, 0.44) 95%,
    rgba(6, 11, 22, 0.92) 100%);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -40px 90px rgba(6, 11, 22, 0.95);
}

/* Cada bloque pone su propia sombra bajo el texto. Es un degradado y no un
   color plano: en los márgenes laterales —donde no hay nada escrito— la ciudad
   se ve casi limpia. */
.solido .bloque {
  position: relative;
}
.solido .bloque::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1;
  background: radial-gradient(84% 60% at 38% 50%,
    rgba(6, 11, 22, 0.50) 0%, rgba(6, 11, 22, 0.14) 58%, transparent 100%);
}
.bloque + .bloque { border-top: 1px solid rgba(148, 163, 184, 0.14); }

.bloque {
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 28px;
}


.titulo-bloque {
  font-family: var(--serif);
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 400; line-height: 1.14; letter-spacing: -0.022em;
  margin-bottom: 22px;
  max-width: 780px;
}
.parrafo-ancho {
  font-size: 15px; line-height: 1.7;
  color: var(--texto-tenue);
  max-width: 690px;
  margin-bottom: 18px;
}
.parrafo-ancho b { color: var(--texto); font-weight: 600; }

/* ── hallazgos ── */

.rejilla-hallazgos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 1px;
  margin-top: 44px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: 14px;
  overflow: hidden;
}
.rejilla-hallazgos article {
  padding: 28px 24px 30px;
  background: var(--fondo);
  transition: background 0.25s;
}
.rejilla-hallazgos article:hover { background: var(--fondo-2); }
.cifra-hallazgo {
  display: block;
  font-family: var(--mono);
  font-size: 38px; font-weight: 600; letter-spacing: -0.035em;
  background: linear-gradient(140deg, #7dd3fc, #a78bfa);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}
.rejilla-hallazgos h3 {
  font-size: 14.5px; font-weight: 600; line-height: 1.32;
  margin-bottom: 9px;
}
.rejilla-hallazgos p { font-size: 12.5px; line-height: 1.62; color: var(--texto-debil); }

/* ── ecuación viva ── */

.ecuacion-viva {
  margin-top: 46px;
  padding: 40px 32px 34px;
  background: linear-gradient(165deg, rgba(14, 21, 38, 0.9), rgba(10, 17, 32, 0.6));
  border: 1px solid var(--borde);
  border-radius: 16px;
}
.eq-linea {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  font-family: var(--serif);
  font-size: clamp(19px, 2.7vw, 30px);
  padding-bottom: 34px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 28px;
}
.eq-icc {
  font-weight: 600; letter-spacing: -0.01em;
  background: linear-gradient(120deg, #7dd3fc, #c4b5fd);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eq-igual, .eq-mul { color: var(--texto-debil); }
.eq-frac { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.eq-barra { width: 100%; height: 1px; background: var(--texto-debil); }
.eq-num, .eq-den { padding: 0 9px; white-space: nowrap; }
.eq-unidad {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--texto-debil);
  align-self: center;
  padding-left: 6px;
}

/* Los términos aparecen uno a uno al desplazarse */
[data-eq] {
  opacity: 0.14;
  filter: blur(1.4px);
  transition: opacity 0.55s ease, filter 0.55s ease, color 0.55s ease;
}
[data-eq].encendido { opacity: 1; filter: none; }

.eq-glosa { list-style: none; counter-reset: g; display: flex; flex-direction: column; gap: 13px; }
.eq-glosa li {
  counter-increment: g;
  display: grid;
  grid-template-columns: 26px 190px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 13px; line-height: 1.55;
  color: var(--texto-debil);
}
.eq-glosa li::before {
  content: counter(g);
  font-family: var(--mono); font-size: 10.5px;
  color: var(--acento);
  border: 1px solid var(--borde);
  border-radius: 5px;
  text-align: center;
  padding: 2px 0;
}
.eq-glosa b { color: var(--texto); font-weight: 600; font-size: 13px; }

/* ── pilares ── */

.rejilla-pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.pilar {
  padding: 24px 20px 26px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-top: 2px solid var(--c);
  border-radius: 13px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s;
}
.pilar:hover { transform: translateY(-4px); border-color: var(--c); }
.pilar .glifo { font-size: 22px; display: block; margin-bottom: 13px; }
.pilar h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: var(--c); }
.pilar p { font-size: 12.5px; line-height: 1.6; color: var(--texto-debil); }

/* ── los siete motores ──
   Mismo lenguaje que los pilares —tarjeta con filo de color arriba— pero con
   ordinal en lugar de glifo, porque aqui lo que se lee es que son SIETE y que
   forman una serie. La octava tarjeta, la del reloj, se distingue a proposito:
   no es un motor mas, es la dimension que atraviesa a los otros siete. */

.rejilla-motores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.motor {
  position: relative;
  padding: 22px 20px 24px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-top: 2px solid var(--c);
  border-radius: 13px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s;
}
.motor:hover { transform: translateY(-4px); border-color: var(--c); }
.motor .num-motor {
  display: block;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--c);
  opacity: 0.75;
  margin-bottom: 12px;
}
.motor h3 { font-size: 14.5px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.motor p { font-size: 12.5px; line-height: 1.62; color: var(--texto-debil); }

.motor.reloj-motor {
  background: linear-gradient(158deg, rgba(226, 232, 240, 0.07), rgba(148, 163, 184, 0.02));
  border-style: dashed;
}
.motor.reloj-motor .num-motor { font-size: 15px; opacity: 1; }

/* Con seis hallazgos, dejarlos al flujo automatico da una fila de cuatro y
   otra de dos. Tres y tres se lee mucho mejor. */
@media (min-width: 900px) {
  .rejilla-hallazgos { grid-template-columns: repeat(3, 1fr); }
}

/* ── comparativa ── */

.tabla-comparativa { margin-top: 38px; overflow-x: auto; }
.tabla-comparativa table {
  width: 100%; min-width: 660px;
  border-collapse: collapse;
  font-size: 13px;
}
.tabla-comparativa th, .tabla-comparativa td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--borde);
}
.tabla-comparativa thead th {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-debil);
}
.tabla-comparativa tbody th {
  font-weight: 500; color: var(--texto-tenue); width: 165px;
}
.tabla-comparativa td { color: var(--texto-debil); }
.tabla-comparativa .destacada {
  background: rgba(56, 189, 248, 0.06);
  color: var(--texto);
  font-weight: 500;
}
.tabla-comparativa thead .destacada {
  color: var(--acento);
  font-size: 14px; letter-spacing: 0;
  text-transform: none;
}

/* ── captadores ── */

.rejilla-captadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.captador {
  position: relative;
  padding: 30px 26px;
  background: linear-gradient(165deg, var(--fondo-2), rgba(10, 17, 32, 0.4));
  border: 1px solid var(--borde);
  border-radius: 15px;
}
.sello-swiss {
  position: absolute; top: 20px; right: 20px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: #fca5a5;
  padding: 4px 9px;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 20px;
}
.captador h3 {
  font-family: var(--mono);
  font-size: 25px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--acento);
  margin-bottom: 4px;
}
.tipo-captador {
  font-size: 11px !important;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--texto-debil) !important;
  margin-bottom: 16px !important;
}
.captador p { font-size: 13px; line-height: 1.65; color: var(--texto-tenue); margin-bottom: 16px; }
.captador ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.captador li {
  position: relative; padding-left: 19px;
  font-size: 12px; color: var(--texto-debil);
}
.captador li::before {
  content: '+'; position: absolute; left: 0;
  font-family: var(--mono); color: var(--acento);
}

/* ── principio ── */

.principio { text-align: center; }
.principio blockquote { max-width: 760px; margin: 0 auto; }
.principio p {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 31px);
  line-height: 1.32; letter-spacing: -0.02em;
  margin-bottom: 22px;
}
.principio footer {
  font-size: 13px; line-height: 1.65;
  color: var(--texto-debil);
  max-width: 560px; margin: 0 auto;
}

/* ── cierre ── */

.cierre { text-align: center; padding-bottom: 76px; }
.cierre h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4.4vw, 46px);
  font-weight: 400; letter-spacing: -0.026em;
  margin-bottom: 15px;
}
.cierre p {
  font-size: 14.5px; line-height: 1.65;
  color: var(--texto-tenue);
  max-width: 520px; margin: 0 auto 32px;
}
.botones-cierre { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.cta {
  padding: 13px 24px;
  font-size: 13.5px; font-weight: 500;
  color: var(--texto-tenue);
  text-decoration: none;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  transition: border-color 0.18s, color 0.18s, filter 0.18s;
}
.cta:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.cta.primario {
  color: #fff;
  background: linear-gradient(135deg, #0284c7, #4f46e5);
  border-color: transparent;
}
.cta.primario:hover { filter: brightness(1.14); }

/* ── pie ── */

.pie-portada {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 28px 46px;
  border-top: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: 12px;
}
.pie-marca { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pie-marca > b { font-size: 16px; }
.pie-marca span { font-size: 12px; color: var(--texto-debil); }
.pie-marca span b { color: var(--texto-tenue); }
.pie-portada > p { font-size: 11px; line-height: 1.7; color: var(--texto-debil); max-width: 720px; }
.pie-portada b { font-weight: 600; }

/* LOS ENLACES DEL PIE, EN EL TONO DEL PIE Y SIN SUBRAYAR.
   Sin esta regla salían con el azul por omisión del navegador —#0000EE— sobre
   fondo casi negro: ilegible. Un enlace obligatorio por licencia que no se lee
   no cumple nada.
   Ningún enlace de la portada va subrayado, y éstos tampoco: se distinguen por
   ser más claros que el texto que los rodea, y al pasar por encima se aclaran
   del todo. */
.pie-portada a {
  color: var(--texto-tenue);
  text-decoration: none;
}
.pie-portada a:hover { color: var(--texto); }

/* ──────────────────────────────────────────────────────── pantallas ── */

@media (max-width: 900px) {
  .cifras-hero { grid-template-columns: repeat(2, 1fr); gap: 20px 4px; }
  .eq-glosa li { grid-template-columns: 26px 1fr; }
  .eq-glosa li span { grid-column: 2; }
}

@media (max-width: 640px) {
  .barra { padding: 11px 14px; }
  .idiomas { margin-right: 4px; }
  .idiomas button { padding: 5px 6px; font-size: 10px; }
  .marca-icc i { display: none; }
  .barra-enlaces > a:not(.boton-entrar) { display: none; }
  .escena { padding: 100px 18px 70px; min-height: 92vh; }
  .bloque { padding: 66px 18px; }
  .velo-escenario {
    background: linear-gradient(180deg,
      rgba(6, 11, 22, 0.9) 0%, rgba(6, 11, 22, 0.66) 40%, rgba(6, 11, 22, 0.9) 100%);
  }
}

/* Quien apaga las animaciones recibe la página entera sin movimiento: el
   contenido no depende de ella para entenderse.

   Va por CLASE y no por `@media (prefers-reduced-motion)` a propósito. Con la
   media query, estas reglas obedecían al ajuste del teléfono aunque el visitante
   hubiera encendido las animaciones con el botón: el sol se movía y los bloques
   seguían apareciendo de golpe, medio encendido y medio apagado. La clase la
   pone `portada.js`, que es quien conoce las dos cosas —el ajuste del sistema y
   la elección de quien mira— y decide una sola vez. */
html.sin-movimiento { scroll-behavior: auto; }
.sin-movimiento [data-eq] { opacity: 1; filter: none; }
.sin-movimiento .desliza i { animation: none; }
.sin-movimiento .pilar:hover { transform: none; }

/* Sin WebGL —equipos antiguos, escritorios remotos, algunas salas— la página
   se sirve entera con un fondo degradado en vez de quedarse en blanco. */
.escenario.sin-mapa #mapa-portada {
  background:
    radial-gradient(90% 70% at 18% 12%, rgba(56, 189, 248, 0.14), transparent 58%),
    radial-gradient(80% 60% at 82% 78%, rgba(167, 139, 250, 0.13), transparent 60%),
    linear-gradient(170deg, #071022 0%, #060b16 55%, #0a1120 100%);
}

/* Mientras la geometría no ha llegado, el mapa entra con una transición suave
   en vez de aparecer de golpe a media carga. */
#mapa-portada { opacity: 0; transition: opacity 1.1s ease; }
body.mapa-listo #mapa-portada, .escenario.sin-mapa #mapa-portada { opacity: 1; }

/* El bloque ya NO se revela como una pieza: lo hace cada elemento de dentro.
   Superponer los dos daba un doble arranque —la sección subiendo y el título
   barriéndose a la vez— que emborronaba los dos gestos. */
.bloque { opacity: 1; transform: none; }

/* ── acceso a la cuenta ──
   Va con marco e icono de persona, y no como un enlace de texto mas.
   El motivo: al lado hay un boton azul grande que dice «Entrar en la
   aplicacion», y un enlace que ponia «Acceder» se perdia entre «Dossier» y
   «Mi calle». La gente pulsaba el boton grande buscando el login. Dos mandos
   que suenan igual necesitan verse distintos, y el de la cuenta se reconoce
   por el icono antes que por la palabra. */
.boton-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 9px;
  color: var(--texto-2, #cbd5e1);
  text-decoration: none;
  font-size: 13.5px;
  transition: border-color .2s, color .2s, background .2s;
}
.boton-cuenta svg { flex: 0 0 auto; opacity: .85; }
.boton-cuenta:hover {
  color: #fff;
  border-color: rgba(148, 163, 184, .62);
  background: rgba(255, 255, 255, .05);
}
@media (max-width: 720px) {
  .boton-cuenta span { display: none; }
  .boton-cuenta { padding: 7px 9px; }
}

/* ── arco solar ──
   No es un adorno: es lo que convierte «esta cubierta produce 1.520 kWh/kWp»
   en algo que se entiende sin leer la cifra. El sol recorre su arco y los
   tejados cambian de color con él; a las dos de la tarde el mapa entero está
   encendido y a las siete se apaga, que es exactamente lo que hay que ver
   antes de que la escena siguiente hable de coincidencia con la demanda. */
.arco-solar {
  margin-top: 26px;
  padding: 16px 18px 12px;
  background: rgba(14, 21, 38, 0.6);
  border: 1px solid var(--borde);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 300px;
}
.arco-solar svg { display: block; overflow: visible; }
.arco-solar .via {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1.6;
  stroke-dasharray: 3 4;
}
.arco-solar .recorrido {
  stroke: url(#g-sol);
  stroke: #fbbf24;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.55;
}
.arco-solar .suelo { stroke: rgba(148, 163, 184, 0.3); stroke-width: 1; }
.arco-solar .sol {
  fill: #fde68a;
  filter: drop-shadow(0 0 9px rgba(251, 191, 36, 0.9));
  transition: none;
}
.lectura-solar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
}
.lectura-solar b {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.lectura-solar span {
  font-size: 12px;
  color: var(--calor);
  font-variant-numeric: tabular-nums;
}
/* Sin movimiento el sol NO se oculta: se queda quieto en el mediodía, que es lo
   que lo hace entender. Un arco punteado y vacío parece un fallo de carga, y
   quien lo ve concluye que la página está rota — no que ha pedido menos
   animación. Lo coloca `solQuieto()` en portada.js. */

/* ══════════════════════════════════════════════════════════════════════════
   REVELADO POR ELEMENTO
   ══════════════════════════════════════════════════════════════════════════

   Antes la portada se revelaba por bloques: una sección entera subía de golpe
   y dentro no pasaba nada más. El efecto se agotaba en las tres primeras
   pantallas y el resto de la página parecía otra página.

   Ahora entra cada pieza por su cuenta y con el gesto que le corresponde: un
   título se descubre como se descubre un rótulo —de izquierda a derecha—, una
   cifra crece desde su centro, una tarjeta se levanta desde su borde inferior,
   una tabla cae como una cortina. Son ocho gestos, no ocho variaciones del
   mismo, y eso es lo que hace que la página no se vuelva monótona al bajar.

   TRES REGLAS QUE NO SE SALTAN

   1. Solo `transform`, `opacity` y `clip-path`. Son las tres propiedades que
      el navegador resuelve en la tarjeta gráfica sin volver a maquetar la
      página. `filter: blur()` se usa en cuatro sitios contados, porque en un
      teléfono cuesta caro y con veinte elementos a la vez se nota.
   2. Nada se oculta hasta que el JavaScript dice que está listo, mediante la
      clase `con-revelado` en <html>. Si el módulo fallara, la página se ve
      entera y sin animar en vez de quedarse en blanco — que es exactamente lo
      que pasa cuando se pone `opacity: 0` en el CSS y se confía en que algún
      día alguien lo devuelva a 1.
   3. Todo obedece a `.sin-movimiento`, el interruptor de la barra.
*/

.con-revelado [data-ent]:not(.dentro) { opacity: 0; }
.con-revelado [data-ent].dentro {
  animation-duration: var(--dur, .82s);
  animation-delay: var(--d, 0ms);
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: both;
}

/* 1 · barrido — títulos. Se descubren de izquierda a derecha, como un rótulo
      que se destapa, con un empujón vertical mínimo para que no sea plano. */
.con-revelado [data-ent="barrido"].dentro { animation-name: ent-barrido; }
@keyframes ent-barrido {
  from { opacity: 0; clip-path: inset(0 100% -30% 0); transform: translateY(9px); }
  60%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 -2% -30% 0); transform: none; }
}

/* 2 · alzar — párrafos y entradillas. El gesto sobrio, el que más se repite. */
.con-revelado [data-ent="alzar"].dentro { animation-name: ent-alzar; }
@keyframes ent-alzar {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* 3 · naipe — tarjetas. Se levantan desde su borde inferior con una pizca de
      perspectiva: se lee como que la tarjeta estaba tumbada y se incorpora. */
.con-revelado [data-ent="naipe"].dentro { animation-name: ent-naipe; }
@keyframes ent-naipe {
  from { opacity: 0; transform: perspective(900px) rotateX(11deg) translateY(28px) scale(.975); }
  to   { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0) scale(1); }
}

/* 4 · cifra — números. Crecen desde su propio centro, que es como se lee un
      dato que aparece: primero está y luego se afirma. */
.con-revelado [data-ent="cifra"].dentro { animation-name: ent-cifra; }
@keyframes ent-cifra {
  from { opacity: 0; transform: scale(.62); }
  55%  { opacity: 1; transform: scale(1.045); }
  to   { opacity: 1; transform: scale(1); }
}

/* 5 · brote — antetítulos y rótulos en versalita. La letra llega apretada y
      se abre hasta su interletraje final. Es el único gesto tipográfico y por
      eso se reserva a los rótulos, que es donde se nota. */
.con-revelado [data-ent="brote"].dentro { animation-name: ent-brote; }
@keyframes ent-brote {
  from { opacity: 0; letter-spacing: -.02em; transform: translateY(7px); }
  /* `letter-spacing` NO se repite en el 100 % a propósito: así la animación
     termina en el interletraje que tenga cada elemento —0,16em el rótulo de
     escena, 0,18em el antetítulo— en vez de imponerles uno. Al escribirlo
     aquí, los rótulos largos salían más anchos de lo diseñado y se partían en
     dos líneas. Una animación no debe decidir la tipografía. */
  to   { opacity: 1; transform: none; }
}

/* 6 · cortina — tablas y bloques anchos. Caen de arriba abajo descubriéndose,
      que es como se lee una tabla: por filas. */
.con-revelado [data-ent="cortina"].dentro { animation-name: ent-cortina; --dur: 1s; }
@keyframes ent-cortina {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 -4% 0); }
}

/* 7 · foco — la ecuación y el titular. Entran desenfocados y se afinan.
      Es el gesto caro; por eso está en cuatro sitios y no en veinte. */
.con-revelado [data-ent="foco"].dentro { animation-name: ent-foco; --dur: 1.05s; }
@keyframes ent-foco {
  from { opacity: 0; filter: blur(13px); transform: scale(1.035); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* 8 · giro — glifos e iconos. Un cuarto de vuelta corto al aparecer. */
.con-revelado [data-ent="giro"].dentro { animation-name: ent-giro; --dur: .7s; }
@keyframes ent-giro {
  from { opacity: 0; transform: rotate(-38deg) scale(.5); }
  to   { opacity: 1; transform: none; }
}

/* El subrayado de los títulos de bloque se dibuja solo, después del barrido.
   No es un noveno gesto: es el mismo título terminando la frase. */
.con-revelado .titulo-bloque { position: relative; }
.con-revelado .titulo-bloque::after {
  content: ''; position: absolute; left: 0; bottom: -9px;
  height: 2px; width: clamp(48px, 12%, 96px); border-radius: 2px;
  background: linear-gradient(90deg, var(--acento), transparent);
  transform: scaleX(0); transform-origin: left center;
}
.con-revelado .titulo-bloque.dentro::after {
  animation: ent-subrayado .7s cubic-bezier(.22,1,.36,1) calc(var(--d, 0ms) + .34s) both;
}
@keyframes ent-subrayado { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* El interruptor manda sobre todo lo anterior. */
.sin-movimiento [data-ent],
.sin-movimiento [data-ent].dentro {
  opacity: 1 !important; animation: none !important; clip-path: none !important;
  transform: none !important; filter: none !important; letter-spacing: inherit;
}
.sin-movimiento .titulo-bloque::after { transform: scaleX(1); animation: none; }

/* ── gestos de la mitad inferior ───────────────────────────────────────────
   Los ocho primeros bastaban para las escenas del mapa, donde el fondo ya se
   mueve solo. De la rejilla de motores hacia abajo el fondo es liso y hace
   falta más: la pieza tiene que traer su propio movimiento o la sección entera
   parece estática. Estos cinco son para eso. */

/* 9 · filo — el borde de color de una tarjeta se dibuja de izquierda a derecha
      antes de que llegue el contenido. Es lo primero que se ve de la tarjeta y
      lo que hace que se lea como ocho piezas distintas y no como una rejilla. */
.con-revelado .motor { position: relative; }
.con-revelado .motor::before {
  content: ''; position: absolute; inset: -1px -1px auto -1px; height: 2px;
  border-radius: 14px 14px 0 0;
  background: currentColor; opacity: .9;
  transform: scaleX(0); transform-origin: left center;
}
.con-revelado .motor.dentro::before {
  animation: ent-filo .55s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) + .1s) both;
}
@keyframes ent-filo { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 10 · ficha — el número de orden de cada motor gira sobre su eje vertical,
       como una ficha que se voltea. Solo son nueve elementos: el coste de la
       perspectiva se paga una vez y se nota mucho. */
.con-revelado [data-ent="ficha"].dentro { animation-name: ent-ficha; --dur: .78s; }
@keyframes ent-ficha {
  from { opacity: 0; transform: perspective(600px) rotateY(-88deg); }
  to   { opacity: 1; transform: perspective(600px) rotateY(0); }
}

/* 11 · vaiven — los pilares entran alternando el lado. Que no vengan todos del
       mismo sitio es lo que convierte cuatro tarjetas iguales en una secuencia. */
.con-revelado [data-ent="vaiven"].dentro { animation-name: ent-vaiven; }
.con-revelado [data-ent="vaiven"]:nth-child(even).dentro { animation-name: ent-vaiven-der; }
@keyframes ent-vaiven {
  from { opacity: 0; transform: translateX(-46px) rotate(-1.6deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes ent-vaiven-der {
  from { opacity: 0; transform: translateX(46px) rotate(1.6deg); }
  to   { opacity: 1; transform: none; }
}

/* 12 · fila — las filas de una tabla caen una detrás de otra. La cortina
       descubría la tabla entera de golpe; esto la lee. */
.con-revelado [data-ent="fila"].dentro { animation-name: ent-fila; --dur: .6s; }
@keyframes ent-fila {
  from { opacity: 0; transform: translateY(16px) scaleY(.92); }
  to   { opacity: 1; transform: none; }
}

/* 13 · latido — el reloj y el bloque del principio. Entran y dan un pulso, una
       sola vez: es el gesto que dice «esto no es una tarjeta más». */
.con-revelado [data-ent="latido"].dentro { animation-name: ent-latido; --dur: 1.15s; }
@keyframes ent-latido {
  0%   { opacity: 0; transform: scale(.9); }
  55%  { opacity: 1; transform: scale(1.028); }
  74%  { transform: scale(.992); }
  100% { opacity: 1; transform: none; }
}

/* El resplandor que recorre una tarjeta al aparecer. Va en un pseudoelemento
   propio para no tocar el fondo de la tarjeta, y se limpia solo al terminar
   —`pointer-events` y `overflow` no se quedan alterados. */
.con-revelado .motor.dentro::after,
.con-revelado .pilar.dentro::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: ent-brillo 1.15s ease-out calc(var(--d,0ms) + .22s) both;
}
@keyframes ent-brillo {
  from { background-position: 210% 0; opacity: 1; }
  to   { background-position: -60% 0; opacity: 0; }
}
.con-revelado .pilar { position: relative; }

.sin-movimiento .motor::before { transform: scaleX(1); animation: none; }
.sin-movimiento .motor::after,
.sin-movimiento .pilar::after { display: none; }

/* La barra entra una sola vez, al cargar, y desde arriba. */
.con-revelado .barra.entra-barra { animation: ent-barra .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes ent-barra { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.sin-movimiento .barra.entra-barra { animation: none; }

/* ══════════════════════════════════════════════════════════════════════════
   DIAGRAMAS DE LOS MOTORES
   ══════════════════════════════════════════════════════════════════════════
   El trazo se dibuja solo con `stroke-dashoffset`. La longitud se mide en el
   navegador y se escribe en `--l`: un número fijo no vale porque cada curva
   mide lo suyo, y si sobra, el trazo arranca ya empezado. */

.dibujo-motor {
  display: block;
  width: 100%; max-width: 132px; height: auto;
  margin-bottom: 14px;
  color: var(--c, var(--acento));
}
.dibujo-motor .tenue { stroke: var(--texto-debil); opacity: .32; }

/* Estado de partida: nada dibujado. Solo cuando el JavaScript está listo. */
.con-revelado .dibujo-motor .trazo,
.con-revelado .dibujo-motor .calor,
.con-revelado .dibujo-motor .barras path,
.con-revelado .dibujo-motor .parcelas rect,
.con-revelado .dibujo-motor .rayos path {
  stroke-dasharray: var(--l, 200);
  stroke-dashoffset: var(--l, 200);
}
.con-revelado .dibujo-motor .relleno,
.con-revelado .dibujo-motor .sombra,
.con-revelado .dibujo-motor .sol-dib { opacity: 0; }
.con-revelado .dibujo-motor .llena { fill: var(--c); fill-opacity: 0; }

/* Y al entrar la tarjeta, se traza. */
.con-revelado .motor.dentro .dibujo-motor .trazo,
.con-revelado .motor.dentro .dibujo-motor .calor,
.con-revelado .motor.dentro .dibujo-motor .rayos path {
  animation: dib-trazar 1.15s cubic-bezier(.45,.05,.25,1) calc(var(--d,0ms) + .18s) both;
}
@keyframes dib-trazar { to { stroke-dashoffset: 0; } }

/* Las barras del índice de ciudad crecen una tras otra, de izquierda a
   derecha, que es como se lee un ranking. */
.con-revelado .motor.dentro .dibujo-motor .barras path {
  animation: dib-trazar .5s cubic-bezier(.22,1,.36,1) both;
}
.dibujo-motor .barras path:nth-child(1) { animation-delay: .30s; }
.dibujo-motor .barras path:nth-child(2) { animation-delay: .38s; }
.dibujo-motor .barras path:nth-child(3) { animation-delay: .46s; }
.dibujo-motor .barras path:nth-child(4) { animation-delay: .54s; }
.dibujo-motor .barras path:nth-child(5) { animation-delay: .62s; }
.dibujo-motor .barras path:nth-child(6) { animation-delay: .70s; }
.dibujo-motor .barras path:nth-child(7) { animation-delay: .78s; }

/* Las parcelas aparecen de una en una y las vacantes se rellenan después. */
.con-revelado .motor.dentro .dibujo-motor .parcelas rect {
  animation: dib-trazar .45s ease-out both;
}
.con-revelado .motor.dentro .dibujo-motor .parcelas .llena {
  animation: dib-trazar .45s ease-out both, dib-rellenar .5s ease-out .55s both;
}
@keyframes dib-rellenar { to { fill-opacity: .34; } }
.dibujo-motor .parcelas rect:nth-child(n) { animation-delay: .3s; }
.dibujo-motor .parcelas rect:nth-child(2) { animation-delay: .36s; }
.dibujo-motor .parcelas rect:nth-child(3) { animation-delay: .42s; }
.dibujo-motor .parcelas rect:nth-child(4) { animation-delay: .48s; }
.dibujo-motor .parcelas rect:nth-child(5) { animation-delay: .54s; }
.dibujo-motor .parcelas rect:nth-child(6) { animation-delay: .60s; }
.dibujo-motor .parcelas rect:nth-child(7) { animation-delay: .66s; }
.dibujo-motor .parcelas rect:nth-child(8) { animation-delay: .72s; }

/* El área bajo la curva de demanda entra después del trazo, no a la vez. */
.con-revelado .motor.dentro .dibujo-motor .relleno {
  animation: dib-velar .8s ease-out 1.0s both;
}
@keyframes dib-velar { to { opacity: .17; } }

/* El sol y la sombra del árbol. */
.con-revelado .motor.dentro .dibujo-motor .sol-dib {
  animation: dib-salir .7s cubic-bezier(.22,1,.36,1) .9s both;
}
@keyframes dib-salir { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.dibujo-motor .sol-dib { transform-box: fill-box; transform-origin: center; }
.con-revelado .motor.dentro .dibujo-motor .sombra {
  animation: dib-sombra .9s ease-out .95s both;
}
@keyframes dib-sombra { from { opacity: 0; transform: scaleX(.2); } to { opacity: .22; transform: none; } }
.dibujo-motor .sombra { transform-box: fill-box; transform-origin: 20% center; }

/* Movimiento continuo, solo mientras la tarjeta está a la vista: el eje de la
   vía se desplaza y las agujas del reloj giran. Son dos elementos en toda la
   página, de modo que no hay coste apreciable. */
/* El eje de la vía y el caudal del conducto conservan sus rayas y se desplazan:
   son los dos únicos movimientos continuos de la página. */
.con-revelado .dibujo-motor .eje,
.con-revelado .dibujo-motor .flujo { opacity: 0; }
.con-revelado .motor.dentro .dibujo-motor .eje,
.con-revelado .pilar.dentro .dibujo-motor .flujo {
  animation: dib-aparecer .5s ease-out .9s both, dib-circular 1.1s linear 1.2s infinite;
}
@keyframes dib-aparecer { to { opacity: 1; } }
@keyframes dib-circular { to { stroke-dashoffset: -14; } }

.dibujo-motor .agujas { transform-box: fill-box; transform-origin: center; }
.con-revelado .motor.dentro .dibujo-motor .minuto {
  transform-box: fill-box; transform-origin: 0% 50%;
  animation: dib-girar 3.2s linear 1.2s infinite;
}
.con-revelado .motor.dentro .dibujo-motor .hora {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: dib-girar 38s linear 1.2s infinite;
}
@keyframes dib-girar { to { transform: rotate(360deg); } }

.sin-movimiento .dibujo-motor * { animation: none !important; stroke-dashoffset: 0 !important; }
.sin-movimiento .dibujo-motor .relleno { opacity: .17; }
.sin-movimiento .dibujo-motor .sombra { opacity: .22; }
.sin-movimiento .dibujo-motor .sol-dib { opacity: 1; }
.sin-movimiento .dibujo-motor .llena { fill-opacity: .34; }


/* Los diagramas de los pilares comparten todo con los de los motores: misma
   clase, mismo trazado. Solo cambian los elementos propios. */
.con-revelado .dibujo-motor .mercurio,
.con-revelado .dibujo-motor .onda,
.con-revelado .dibujo-motor .motas path {
  stroke-dasharray: var(--l, 200); stroke-dashoffset: var(--l, 200);
}
.con-revelado .pilar.dentro .dibujo-motor .trazo,
.con-revelado .pilar.dentro .dibujo-motor .mercurio,
.con-revelado .pilar.dentro .dibujo-motor .onda {
  animation: dib-trazar 1.1s cubic-bezier(.45,.05,.25,1) calc(var(--d,0ms) + .2s) both;
}
.con-revelado .pilar.dentro .dibujo-motor .motas path {
  animation: dib-trazar .4s ease-out both;
}
.dibujo-motor .motas path:nth-child(1) { animation-delay: .9s; }
.dibujo-motor .motas path:nth-child(2) { animation-delay: 1.02s; }
.dibujo-motor .motas path:nth-child(3) { animation-delay: 1.14s; }
.dibujo-motor .motas path:nth-child(4) { animation-delay: 1.26s; }
.pilar .dibujo-motor { max-width: 96px; margin-bottom: 10px; }
.sin-movimiento .dibujo-motor .eje,
.sin-movimiento .dibujo-motor .flujo { opacity: 1; }


/* Las tarjetas sí necesitan fondo propio: llevan texto pequeño y encima el mapa
   se mueve. Translúcido pero suficiente, y con desenfoque de fondo, que es lo
   que separa un texto de una ciudad en movimiento sin ocultarla. */
.solido .motor,
.solido .pilar,
.solido .captador,
.solido .rejilla-hallazgos > article,
.solido .tabla-comparativa,
.solido .principio blockquote {
  background: rgba(11, 18, 32, 0.62);
  backdrop-filter: blur(11px) saturate(125%);
  -webkit-backdrop-filter: blur(11px) saturate(125%);
}

/* En pantallas estrechas se retira el desenfoque de fondo: sobre un mapa que
   se mueve, en un teléfono, es el efecto que más cuesta de toda la página, y
   se nota en los fotogramas. El fondo se hace más opaco para compensar. */
/* NOTA DE MANTENIMIENTO — aquí vivía un segundo @media (max-width: 900px) que
   repetía estas mismas reglas con otros valores. Como tenía la misma
   especificidad y aparecía ANTES, no hacía nada: ganaba el de más abajo. Lo
   peligroso no era el peso muerto, era que invitaba a editarlo y a concluir que
   el fichero no se había subido. Sus reglas útiles se han llevado al bloque
   único que queda, más abajo. */


/* Sobre una ciudad en movimiento el texto necesita su propio respaldo. La
   sombra pesa cero y permite bajar el velo lo suficiente para que la ciudad se
   vea de verdad — que es el motivo de haberla puesto ahí. */
.solido .titulo-bloque,
.solido .parrafo-ancho,
.solido .marca-escena,
.solido .apostilla,
.solido .cierre h2,
.solido .cierre p {
  text-shadow: 0 1px 16px rgba(6, 11, 22, 0.95), 0 0 34px rgba(6, 11, 22, 0.75);
}


/* ── BRILLO DEL MAPA BAJO LOS BLOQUES ──────────────────────────────────────
   Cuando el mapa es el protagonista —las ocho escenas de arriba— se ve tal
   cual. Bajo los bloques se ve A TRAVÉS DE UN VELO, y eso le come contraste:
   hay que devolvérselo o queda una mancha que solo se intuye.

   El filtro va sobre el lienzo entero y lo resuelve el compositor: cuesta lo
   mismo que mover una caja, y por eso se puede pedir sin miedo en un móvil. */
.en-bloques #mapa-portada {
  filter: brightness(1.42) saturate(1.2) contrast(1.08);
  transition: filter .9s ease;
}

/* En el teléfono hace falta MUCHO más, y no por capricho: la pantalla es más
   pequeña, el mapa se ve a un tercio del tamaño y el velo era casi el doble de
   denso para proteger el texto. Con el filtro alto se puede aligerar el velo
   sin perder legibilidad, que es lo que de verdad hace visible la ciudad. */
@media (max-width: 900px) {
  .en-bloques #mapa-portada {
/*    filter: brightness(2.45) saturate(1.5) contrast(1.18); */
    filter: brightness(1.88) saturate(1.00) contrast(1.00); /* mtz jose */
  }
  .solido { background: rgba(6, 11, 22, 0.05); }
  .solido .bloque::before {
    background: radial-gradient(84% 58% at 50% 50%,
      rgba(6, 11, 22, 0.30) 0%, rgba(6, 11, 22, 0.06) 62%, transparent 100%);
  }
  .solido .motor, .solido .pilar, .solido .captador,
  .solido .rejilla-hallazgos > article, .solido .tabla-comparativa,
  .solido .principio blockquote {
    /* Sin desenfoque de fondo en el teléfono: sobre un mapa en movimiento es
       el efecto más caro de la página y se nota en los fotogramas. Se compensa
       con un fondo algo más opaco. */
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(11, 18, 32, 0.77);
  }
}

/* ── SOMBRA BAJO EL TEXTO DE LAS ESCENAS ───────────────────────────────────
   Aligerado el velo general, el mapa se ve mucho mejor — y sobre una carretera
   clara o una parcela ámbar el párrafo se perdía. Medido: en la escena de
   tráfico el contraste caía a 1,9:1, cuando lo mínimo legible es 4,5:1.

   La solución NO es volver a subir el velo, porque eso apagaría otra vez toda
   la imagen para proteger una columna. Es poner la sombra donde hace falta:
   un charco suave detrás del texto, que se desvanece antes de llegar a la
   mitad derecha. El mapa sigue igual de luminoso allí donde no hay nada
   escrito, que es casi toda la pantalla. */
.escena .contenido { position: relative; }
.escena .contenido::before {
  content: '';
  position: absolute;
  inset: -30px -70px -34px -48px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(76% 64% at 26% 50%,
      rgba(6, 11, 22, 0.90) 0%,
      rgba(6, 11, 22, 0.62) 46%,
      rgba(6, 11, 22, 0.20) 78%,
      transparent 100%);
}

/* Y la sombra tipográfica, que cuesta cero y salva las esquinas donde el
   degradado ya se ha desvanecido. */
.escena .contenido h1,
.escena .contenido h2,
.escena .contenido p,
.escena .marca-escena,
.escena .antetitulo {
  text-shadow: 0 1px 14px rgba(6, 11, 22, 0.92), 0 0 30px rgba(6, 11, 22, 0.7);
}


/* La versión, junto a la marca del pie. Discreta: informa a quien la busca y no
   compite con nada. */
.version-icc {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--texto-debil);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}