/* ═══════════════════════════════════════════════════════════════════════
   PORTADA · PREVISIO
   ═══════════════════════════════════════════════════════════════════════

   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: volar al término, encender el frente
   de llama, anegar el barranco. El fondo no es una captura ni un vídeo: es
   Leaflet con la misma tesela que usa la aplicación, de modo que la portada
   es ya la primera demostración del producto.

   El velo de degradado que hay entre el mapa y el contenido es lo que
   garantiza que el texto se lea sobre una imagen que cambia. Sin él, el
   titular desaparece en cuanto el mapa vuela sobre una zona clara.

   El mapa sigue vivo HASTA EL PIE de la página. A partir de .solido cambia el
   registro —de la demostración a la explicación— y el territorio pasa a
   segundo plano: el bloque es translúcido y el mapa se desenfoca por detrás,
   pero la cámara sigue recorriendo el término y la simulación sigue ardiendo
   y anegando a un rescoldo. Estuvo opaco y media página se quedaba sin
   territorio debajo.

   Propiedad intelectual y desarrollo por INTELLIGENTIA (intelligentia.dev)
   ══════════════════════════════════════════════════════════════════════ */

: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;

  /* Los dos módulos tienen color propio en toda la aplicación y la portada
     lo respeta: el fuego es ámbar y el agua es cian. Que el visitante llegue
     al simulador reconociendo ya los dos colores. */
  --fuego:        #f97316;
  --fuego-claro:  #fbbf24;
  --agua:         #38bdf8;
  --agua-claro:   #7dd3fc;
  --acento:       #38bdf8;
  --ok:           #34d399;
  --alarma:       #ef4444;

  --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); }

a { color: var(--agua-claro); }

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

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

/* EL z-index DE AQUÍ NO ES DECORATIVO, no lo quites.
   Leaflet da z-index propio a sus paneles —200 a las teselas, 400 a las
   capas— y esos números NO se quedan dentro del mapa si su contenedor no
   crea contexto de apilamiento: suben al de `.escenario` y se pintan por
   encima de lo que venga después, que es justamente el lienzo de la
   simulación. El fuego y el agua se dibujaban perfectamente y el mapa los
   tapaba enteros. Con `z-index:0` el contenedor crea su propio contexto y
   los paneles se quedan dentro. */
#mapaPortada {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 100% at 50% 30%, #12203a 0%, var(--fondo) 70%);
}
/* Leaflet se pinta con su propio fondo blanco mientras no llega la tesela.
   En una portada oscura ese destello es muy visible, así que se fuerza. */
#mapaPortada .leaflet-container { background: var(--fondo); outline: none; }

/* La tesela oscura de CARTO ya viene con el valor que necesita la portada y
   no se toca. El apagado de abajo es solo para la reserva. */

/* Reserva: si la firma de CARTO no llegara, el mapa cae a la ortofoto de
   Esri, que viene con la luz del mediodía y sobre la que no se lee un titular
   blanco. Entonces —y solo entonces— hay que apagarla. Va en su propio panel
   para no arrastrar con ella al límite municipal, que debe seguir viéndose. */
body.base-ortofoto .leaflet-baseOscura-pane {
  filter: brightness(0.34) saturate(0.42) contrast(1.14);
}

/* El límite del IGN llega como una línea ocre de un píxel. Se le da un punto
   de separación contra el mapa y nada más: probamos a realzarlo con brillo y
   halo ámbar y el resultado era una línea amarilla que se comía el titular y
   cruzaba las cifras. Es contexto, no es el asunto. */
.leaflet-limite-pane {
  opacity: 0.5;
  filter: drop-shadow(0 0 2px rgba(6, 11, 22, 0.85));
}
/* Sobre la ortofoto, mucho más ruidosa, la línea necesita ceder todavía más. */
body.base-ortofoto .leaflet-limite-pane { opacity: 0.42; }

/* El lienzo del fuego y del agua vive por encima del mapa y por debajo del
   velo: así el velo también atenúa las brasas, que si no deslumbran. */
#fxPortada { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Aviso de que lo que se mueve sobre el mapa es una ilustración. Discreto
   pero legible: no es letra pequeña para cubrirse, es una aclaración. */
.marca-ilustracion {
  position: absolute; left: 26px; bottom: 20px; z-index: 5;
  margin: 0; padding: 5px 10px; border-radius: 7px;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--texto-debil);
  background: rgba(6, 11, 22, 0.55);
  border: 1px solid var(--borde);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.5s ease;
}
@media (max-width: 640px) {
  .marca-ilustracion { left: 14px; bottom: 12px; font-size: 9.5px; padding: 4px 8px; }
}

/* Sin este velo el titular se pierde sobre las zonas claras del mapa. */
.velo-escenario {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(6, 11, 22, 0.60) 0%,
      rgba(6, 11, 22, 0.54) 34%,
      rgba(6, 11, 22, 0.16) 62%,
      rgba(6, 11, 22, 0.28) 100%),
    radial-gradient(120% 90% at 50% 110%, rgba(6, 11, 22, 0.88), transparent 62%);
  transition: opacity 0.9s ease, background 0.9s ease;
}
/* En el héroe el mapa ES el argumento: el velo solo protege la banda de
   texto, y deja el territorio a la vista arriba y abajo. */
body.centrado-hero .velo-escenario {
  background:
    /* Mancha central suave bajo el titular y las cifras. Con la tesela oscura
       basta con esto: la ciudad sigue leyéndose alrededor, que es el asunto. */
    radial-gradient(64% 52% at 50% 46%, rgba(6, 11, 22, 0.52), transparent 78%),
    linear-gradient(180deg,
      rgba(6, 11, 22, 0.62) 0%,
      rgba(6, 11, 22, 0.26) 15%,
      rgba(6, 11, 22, 0.28) 46%,
      rgba(6, 11, 22, 0.32) 84%,
      rgba(6, 11, 22, 0.44) 100%);
}
/* La ortofoto tiene mucho más detalle y traga el texto pequeño: con ella el
   velo tiene que apretar bastante más. */
body.base-ortofoto.centrado-hero .velo-escenario {
  background:
    radial-gradient(64% 52% at 50% 46%, rgba(6, 11, 22, 0.80), transparent 76%),
    linear-gradient(180deg,
      rgba(6, 11, 22, 0.70) 0%,
      rgba(6, 11, 22, 0.44) 15%,
      rgba(6, 11, 22, 0.46) 46%,
      rgba(6, 11, 22, 0.50) 84%,
      rgba(6, 11, 22, 0.60) 100%);
}

/* Un grano finísimo evita el bandeado de los degradados grandes. */
.grano {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0.15;
  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;
  gap: 14px; padding: 14px 26px;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}
body.barra-solida .barra {
  background: rgba(6, 11, 22, 0.84);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--borde);
}

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
/* El escudo es 254x432: alto, no cuadrado. Fijar solo la altura y dejar
   que el ancho se deduzca evita que se ensanche. */
.marca .escudo { height: 34px; width: auto; display: block; border-radius: 5px; object-fit: contain; }
.marca > span { display: flex; flex-direction: column; line-height: 1.16; }
.marca b { font-size: 15px; letter-spacing: -0.01em; font-weight: 700;
           text-shadow: 0 1px 12px rgba(6, 11, 22, 0.9); }
.marca i { font-style: normal; font-size: 10.5px; color: var(--texto-tenue);
           text-shadow: 0 1px 10px rgba(6, 11, 22, 0.95); }

.barra-enlaces { display: flex; align-items: center; gap: 7px; }
.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; font-weight: 600;
  background: linear-gradient(135deg, #ea580c, #0284c7);
}
.boton-entrar:hover {
  filter: brightness(1.15);
  background: linear-gradient(135deg, #ea580c, #0284c7) !important;
}

/* Interruptor de animaciones. Vive junto a los enlaces 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(148, 163, 184, 0.08);
  color: var(--texto-debil); font: inherit; font-size: 11.5px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  transition: color 0.16s, border-color 0.16s;
}
.mov-boton:hover { color: var(--texto-tenue); border-color: var(--borde-fuerte); }
.mov-boton[aria-pressed="true"] i { color: var(--agua); }
.mov-boton i { font-style: normal; transition: color 0.2s; }
.mov-boton[aria-pressed="false"] i { color: var(--texto-debil); }

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

.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(--agua); margin-bottom: 22px;
}

.titular {
  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;
  text-shadow: 0 2px 34px rgba(6, 11, 22, 0.85);
}
/* El degradado del titular recorre los dos módulos: arranca en el ámbar del
   fuego y termina en el cian del agua. Es la tesis de la plataforma dicha
   en color. */
.titular em {
  font-style: italic;
  background: linear-gradient(100deg, #fbbf24 4%, #fb923c 34%, #7dd3fc 78%, #38bdf8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.entradilla {
  font-size: clamp(15px, 1.65vw, 18.5px);
  line-height: 1.62; color: var(--texto-tenue);
  max-width: 62ch; margin-inline: auto;
  text-shadow: 0 1px 18px rgba(6, 11, 22, 0.7);
}
.escena:not([data-escena="portada"]) .entradilla { margin-inline: 0; }

/* La independencia va en el pie, a petición del cliente. Para que no se
   pierda entre los créditos cartográficos lleva un filete lateral y un punto
   más de contraste que el resto de la letra pequeña: se lee sin buscarla. */
.pie-portada .nota-independencia {
  font-size: 12px; line-height: 1.55;
  color: var(--texto-tenue);
  border-left: 2px solid var(--borde-fuerte);
  padding-left: 13px;
  margin-bottom: 14px;
}
.pie-portada .nota-independencia b { color: var(--texto); font-weight: 600; }

.marca-escena {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--texto-debil); margin-bottom: 14px;
}
.escena h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.5vw, 40px); line-height: 1.16;
  letter-spacing: -0.02em; margin-bottom: 18px;
  text-shadow: 0 2px 30px rgba(6, 11, 22, 0.85);
}
.escena p {
  font-size: 15.5px; line-height: 1.68; color: var(--texto-tenue);
  margin-bottom: 14px;
  text-shadow: 0 1px 16px rgba(6, 11, 22, 0.72);
}
.escena p b { color: var(--texto); font-weight: 600; }
.apostilla {
  font-size: 13.5px !important; color: var(--texto-debil) !important;
  border-left: 2px solid var(--borde-fuerte); padding-left: 14px;
}

/* ── cifras del héroe ── */

.cifras-hero {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 34px; margin: 34px 0 30px;
}
.cifras-hero > div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cifras-hero b {
  font-family: var(--serif); font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 400; line-height: 1; color: var(--texto);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 20px rgba(6, 11, 22, 0.9);
}
.cifras-hero span {
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--texto-tenue); max-width: 15ch; text-align: center; line-height: 1.35;
  text-shadow: 0 1px 10px rgba(6, 11, 22, 0.95);
}

.pie-hero {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 11.5px; color: var(--texto-tenue); letter-spacing: 0.04em;
  text-shadow: 0 1px 10px rgba(6, 11, 22, 0.95);
}
.desliza {
  width: 20px; height: 32px; border: 1px solid var(--borde-fuerte);
  border-radius: 11px; position: relative; display: inline-block;
}
.desliza i {
  position: absolute; left: 50%; top: 7px; width: 3px; height: 6px;
  margin-left: -1.5px; border-radius: 2px; background: var(--agua);
  animation: caer 1.9s ease-in-out infinite;
}
@keyframes caer {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  45%      { transform: translateY(11px); opacity: 1; }
}
body.sin-animacion .desliza i { animation: none; opacity: 0.8; }

/* ── rampa de intensidad, en la escena del fuego ── */

.rampa-demo {
  height: 12px; border-radius: 7px; margin: 20px 0 7px;
  border: 1px solid var(--borde);
  background: linear-gradient(90deg, #1e3a5f, #0891b2, #65a30d, #facc15, #f97316, #dc2626, #7f1d1d);
  position: relative; overflow: hidden;
}
.rampa-demo span {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: #fff; box-shadow: 0 0 9px rgba(255, 255, 255, 0.9);
  left: 0; transition: left 0.5s linear;
}
.rampa-pies {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; color: var(--texto-debil);
  margin-bottom: 16px;
}

.lista-marca { list-style: none; margin: 18px 0 6px; }
.lista-marca li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: 14.5px; color: var(--texto-tenue); line-height: 1.55;
}
.lista-marca li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--agua); box-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
}
.lista-marca b { color: var(--texto); font-weight: 600; }

/* ── reloj de episodio, en la escena del agua ── */

.hidrograma { margin: 20px 0 8px; }
.hidrograma svg { width: 100%; height: 96px; display: block; }
.hidrograma .eje { stroke: var(--borde-fuerte); stroke-width: 1; }
.hidrograma .curva { fill: none; stroke: var(--agua); stroke-width: 2; }
.hidrograma .relleno { fill: rgba(56, 189, 248, 0.16); }
.hidrograma .punta { fill: var(--agua-claro); }
.lectura-hidro {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--texto-debil);
}
.lectura-hidro b { color: var(--agua-claro); font-weight: 600; }

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

/* A partir de aquí el mapa deja de verse. El fondo opaco es lo que marca
   el cambio de registro: se acabó la demostración, empieza la explicación. */
/* El cuerpo sólido ya no es opaco: deja pasar el mapa.
 *
 * Era negro entero y ahí se acababa la demostración, con media página sin
 * territorio debajo. Ahora el mapa sigue vivo hasta el pie, y lo que
 * garantiza que el texto se lea es que el mapa se DESENFOCA por detrás
 * (ver `body.mapa-al-fondo`), no que se tape. El desenfoque va sobre el mapa
 * y no como `backdrop-filter` de este bloque a propósito: un backdrop-filter
 * sobre un elemento de seis mil píxeles de alto se recalcula en cada
 * desplazamiento y arrastra la página.
 */
.solido {
  position: relative; z-index: 10;
  background: rgba(6, 11, 22, 0.80);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -40px 80px rgba(6, 11, 22, 0.95);
}

/* Mientras el cuerpo sólido está en cuadro, el mapa pasa a segundo plano:
   desenfocado y apagado. Se sigue moviendo —que es lo que se quería— pero
   no compite con una tabla comparativa ni con un párrafo largo. */
body.mapa-al-fondo #mapaPortada,
body.mapa-al-fondo #fxPortada {
  filter: blur(5px) brightness(0.86) saturate(0.9);
  transition: filter 0.8s ease;
}
#mapaPortada, #fxPortada { transition: filter 0.8s ease; }

.bloque { padding: 96px 28px; max-width: 1180px; margin: 0 auto; }
.bloque + .bloque { border-top: 1px solid rgba(148, 163, 184, 0.09); }

.titulo-bloque {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(27px, 3.6vw, 42px); line-height: 1.14;
  letter-spacing: -0.022em; margin-bottom: 20px; max-width: 20ch;
}
.parrafo-ancho {
  font-size: 16px; line-height: 1.68; color: var(--texto-tenue);
  max-width: 68ch; margin-bottom: 34px;
}
.parrafo-ancho b { color: var(--texto); font-weight: 600; }
.bloque .marca-escena { margin-bottom: 12px; }

/* ── los motores ── */

.rejilla-motores {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.motor {
  position: relative; padding: 22px 20px 20px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 13px;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.motor::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(90deg, var(--c), transparent 82%);
}
.motor:hover { border-color: var(--borde-fuerte); transform: translateY(-3px); }
.num-motor {
  font-family: var(--mono); font-size: 11px; color: var(--c);
  letter-spacing: 0.08em; display: block; margin-bottom: 9px;
}
.motor h3 { font-size: 15.5px; font-weight: 650; margin-bottom: 8px; letter-spacing: -0.01em; }
.motor p { font-size: 13.5px; line-height: 1.6; color: var(--texto-debil); }

/* ── hallazgos ── */

.rejilla-hallazgos {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.rejilla-hallazgos article {
  padding: 24px 21px; border-radius: 13px;
  background: linear-gradient(170deg, rgba(20, 30, 51, 0.8), rgba(10, 17, 32, 0.6));
  border: 1px solid var(--borde);
}
.cifra-hallazgo {
  display: block; font-family: var(--serif); font-size: 40px;
  line-height: 1; font-weight: 400; margin-bottom: 12px;
  background: linear-gradient(120deg, #fbbf24, #38bdf8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.rejilla-hallazgos h3 { font-size: 15px; font-weight: 650; margin-bottom: 9px; line-height: 1.35; }
.rejilla-hallazgos p { font-size: 13.5px; line-height: 1.62; color: var(--texto-debil); }

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

.ecuacion-viva {
  padding: 32px 26px; border-radius: 15px;
  background: linear-gradient(160deg, rgba(20, 30, 51, 0.72), rgba(10, 17, 32, 0.5));
  border: 1px solid var(--borde);
}
.eq-linea {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px; font-family: var(--serif);
  font-size: clamp(19px, 2.6vw, 29px); margin-bottom: 26px;
}
/* Cada término arranca apagado y se enciende cuando le toca, para que se
   lea la ecuación por partes y no como un bloque indescifrable. */
.eq-linea > *, .eq-frac > * { opacity: 0.3; transition: opacity 0.5s, color 0.5s; }
.eq-linea .encendido, .eq-frac .encendido { opacity: 1; }
.eq-simbolo { color: var(--fuego-claro); font-style: italic; opacity: 1 !important; }
.eq-igual { color: var(--texto-debil); }
.eq-frac { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.eq-barra { height: 1px; width: 100%; background: var(--texto-debil); }
.eq-num, .eq-den { font-size: 0.78em; padding: 0 8px; }
.eq-unidad { font-family: var(--mono); font-size: 0.5em; color: var(--texto-debil); }
.eq-glosa { list-style: none; counter-reset: g; display: grid; gap: 11px; }
.eq-glosa li {
  counter-increment: g; position: relative; padding-left: 30px;
  font-size: 13.5px; line-height: 1.58; color: var(--texto-debil);
  opacity: 0.42; transition: opacity 0.5s;
}
.eq-glosa li.encendido { opacity: 1; }
.eq-glosa li::before {
  content: counter(g); position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(56, 189, 248, 0.14); color: var(--agua);
  font-family: var(--mono); font-size: 10.5px;
  display: grid; place-items: center;
}
.eq-glosa b { display: block; color: var(--texto); font-weight: 600; font-size: 13.5px; }

/* ── comparativa ── */

.tabla-comparativa { overflow-x: auto; border-radius: 13px; border: 1px solid var(--borde); }
.tabla-comparativa table { width: 100%; border-collapse: collapse; min-width: 620px; }
.tabla-comparativa th, .tabla-comparativa td {
  padding: 13px 15px; text-align: left; font-size: 13.3px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}
.tabla-comparativa thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-debil); font-weight: 600;
  background: rgba(148, 163, 184, 0.05);
}
.tabla-comparativa tbody th {
  font-weight: 600; color: var(--texto-tenue); font-size: 13px;
  width: 24%; background: rgba(148, 163, 184, 0.03);
}
.tabla-comparativa td { color: var(--texto-debil); }
.tabla-comparativa .destacada {
  background: rgba(56, 189, 248, 0.07); color: var(--texto);
  border-left: 1px solid rgba(56, 189, 248, 0.2);
  border-right: 1px solid rgba(56, 189, 248, 0.2);
}
.tabla-comparativa thead .destacada { color: var(--agua); }
.tabla-comparativa tbody tr:last-child td, .tabla-comparativa tbody tr:last-child th { border-bottom: 0; }

/* ── informes ── */

.rejilla-informes {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.informe {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 18px 17px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--borde);
}
.informe .glifo { font-size: 21px; line-height: 1; flex: none; }
.informe h3 { font-size: 14px; font-weight: 650; margin-bottom: 5px; }
.informe p { font-size: 12.8px; line-height: 1.55; color: var(--texto-debil); }

/* ── principio ── */

.principio blockquote {
  max-width: 74ch; margin: 0 auto; text-align: center;
  padding: 12px 0;
}
.principio blockquote p {
  font-family: var(--serif); font-size: clamp(21px, 2.9vw, 31px);
  line-height: 1.36; letter-spacing: -0.018em; margin-bottom: 22px;
}
.principio blockquote footer {
  font-size: 14.5px; line-height: 1.68; color: var(--texto-debil);
}
.principio blockquote footer b { color: var(--texto-tenue); font-weight: 600; }

/* ── cierre ── */

.cierre { text-align: center; }
.cierre h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.cierre > p {
  font-size: 16px; line-height: 1.66; color: var(--texto-tenue);
  max-width: 60ch; margin: 0 auto 32px;
}
.botones-cierre { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta {
  padding: 13px 24px; border-radius: 10px; font-size: 14px; font-weight: 600;
  text-decoration: none; color: var(--texto-tenue);
  border: 1px solid var(--borde-fuerte);
  transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
}
.cta:hover { color: var(--texto); border-color: var(--texto-debil); transform: translateY(-2px); }
.cta.primario {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #ea580c, #0284c7);
}
.cta.primario:hover { filter: brightness(1.15); }

/* ── pie ── */

.pie-portada {
  padding: 40px 28px 52px; max-width: 1180px; margin: 0 auto;
  border-top: 1px solid rgba(148, 163, 184, 0.09);
  font-size: 12.5px; color: var(--texto-debil); line-height: 1.7;
}
.pie-marca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pie-marca b { color: var(--texto); font-size: 14px; }
.version-mp {
  font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 5px;
  background: rgba(148, 163, 184, 0.1); color: var(--texto-debil);
}
.pie-portada a { color: var(--texto-tenue); }

/* ══════════════════════════════════════════════════ revelado al entrar ══

   El contenedor no se mueve: se mueven sus hijos, uno detrás de otro. Mover
   la sección entera hace que el navegador recalcule la altura del documento
   a mitad de desplazamiento, y eso da tirones en cuanto hay un mapa vivo
   por debajo consumiendo su parte del hilo principal.
   ═══════════════════════════════════════════════════════════════════════ */

.revelable { opacity: 0; transform: translateY(16px); }
body:not(.sin-animacion) .revelable {
  transition: opacity 0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.revelable.visible { opacity: 1; transform: none; }

/* Con las animaciones apagadas nada puede quedarse invisible: el contenido
   no depende de que el observador llegue a dispararse. */
body.sin-animacion .revelable { opacity: 1; transform: none; transition: none; }

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

@media (max-width: 900px) {
  .bloque { padding: 72px 22px; }
  .escena { padding: 104px 22px 76px; }
  .tabla-comparativa tbody th { width: 30%; }
}

@media (max-width: 640px) {
  .barra { padding: 11px 15px; gap: 8px; }
  /* En un móvil la barra no tiene sitio para todo: se queda la marca, el
     interruptor en icono y el botón de entrar, que es lo que se pulsa. */
  .barra-enlaces > a:not(.boton-entrar) { display: none; }
  .mov-boton span { display: none; }
  .mov-boton { padding: 6px 8px; }
  .marca i { display: none; }
  .cifras-hero { gap: 12px 22px; }
  .cifras-hero span { max-width: 12ch; font-size: 9.5px; }
  .escena { min-height: auto; padding: 92px 18px 64px; }
  .escena[data-escena="portada"] { min-height: 100vh; }
  .bloque { padding: 58px 18px; }
  .botones-cierre .cta { width: 100%; }
}

/* Quien pide no ver movimiento en su sistema recibe la portada quieta. El
   interruptor de la barra puede devolvérselo, que para eso está. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ============================================================
   VOLVER ARRIBA
   Discreto y translucido: el mapa y el texto se leen por detras.
   ============================================================ */
.ir-arriba {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(6, 11, 22, 0.34);
  border: 1px solid var(--borde);
  color: var(--texto-tenue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  backdrop-filter: blur(9px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s,
              color .18s, border-color .18s, background .18s;
  z-index: 90;
}

.ir-arriba svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ir-arriba.visible {
  opacity: 0.5;
  visibility: visible;
  transform: translateY(0);
}

.ir-arriba:hover,
.ir-arriba:focus-visible {
  opacity: 1;
  color: var(--texto);
  border-color: var(--borde-fuerte);
  background: rgba(6, 11, 22, 0.62);
}

@media (prefers-reduced-motion: reduce) {
  .ir-arriba { transition: opacity .2s, color .2s; }
}


/* ══════════════════════════════════════════ servicios y aportación ══
 *
 * La filosofía de precios, en el mismo lenguaje que el resto de la
 * portada: fondo de panel translúcido para que el mapa siga latiendo
 * por detrás, titulares en serif y el ámbar y el cian de los módulos
 * como únicos acentos. Nada compite con el territorio.
 * ═══════════════════════════════════════════════════════════════════ */

.rejilla-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
  align-items: stretch;
}

.tarjeta-servicio {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color .2s, transform .2s;
}
.tarjeta-servicio:hover { border-color: var(--borde-fuerte); transform: translateY(-3px); }

.tarjeta-servicio.destacada {
  border-color: rgba(56, 189, 248, 0.42);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.10), 0 18px 44px rgba(2, 8, 20, 0.55);
}

.cinta-servicio {
  position: absolute; top: -1px; right: 18px;
  transform: translateY(-50%);
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
  color: #04121f; font-weight: 700;
  background: linear-gradient(135deg, var(--agua-claro), var(--agua));
}

.etiqueta-servicio {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 6px;
  border: 1px solid currentColor; margin-bottom: 14px;
}
.etiqueta-servicio.verde { color: var(--ok); }
.etiqueta-servicio.azul  { color: var(--agua); }
.etiqueta-servicio.ambar { color: var(--fuego-claro); }

.tarjeta-servicio h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 23px; line-height: 1.2; letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.precio-servicio {
  display: flex; align-items: baseline; gap: 7px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.precio-servicio b {
  font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: var(--texto);
}
.precio-servicio i {
  font-style: normal; font-size: 12.5px; color: var(--texto-debil);
}

.desc-servicio {
  font-size: 14px; line-height: 1.6; color: var(--texto-tenue);
  margin-bottom: 18px;
}

.lista-servicio { list-style: none; margin-bottom: 22px; }
.lista-servicio li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5; color: var(--texto-tenue);
  padding: 6px 0;
}
.lista-servicio svg {
  flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px;
  fill: none; stroke: var(--ok); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Empuja la accion al fondo: con tres tarjetas de texto desigual los
   botones se alinean igualmente en una sola linea. */
.accion-servicio {
  margin-top: auto; display: flex; flex-direction: column;
  align-items: stretch; gap: 9px;
}
.accion-servicio .cta { text-align: center; }
.nota-servicio {
  font-size: 11.5px; color: var(--texto-debil); text-align: center;
}

/* ───────────────────────────────────────────────── aportación ── */

.caja-aportacion {
  padding: 30px 28px;
  background: linear-gradient(155deg, rgba(249, 115, 22, 0.07), rgba(56, 189, 248, 0.07));
  border: 1px solid var(--borde);
  border-radius: 16px;
  margin-bottom: 20px;
}

.insignia-aportacion {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fuego-claro); margin-bottom: 13px;
}
.insignia-aportacion svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.caja-aportacion h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.5vw, 28px); line-height: 1.2;
  letter-spacing: -0.02em; margin-bottom: 12px;
}
.desc-aportacion {
  font-size: 15px; line-height: 1.65; color: var(--texto-tenue);
  max-width: 74ch; margin-bottom: 22px;
}
.desc-aportacion b { color: var(--texto); font-weight: 600; }

.pastillas-aportacion {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.pastilla {
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--texto-tenue);
  background: rgba(6, 11, 22, 0.42);
  border: 1px solid var(--borde);
  transition: color .16s, border-color .16s, background .16s;
}
.pastilla:hover { color: var(--texto); border-color: var(--borde-fuerte); }
.pastilla.activa {
  color: #04121f; font-weight: 700; border-color: transparent;
  background: linear-gradient(135deg, var(--fuego-claro), var(--agua));
}

.accion-aportacion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  margin-bottom: 20px;
}
.accion-aportacion .cta {
  display: inline-flex; align-items: center; gap: 9px;
}
.accion-aportacion .cta svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nota-aportacion { font-size: 12.5px; color: var(--texto-debil); }
.nota-aportacion code {
  font-family: var(--mono); font-size: 12px; color: var(--texto-tenue);
}

.gratitud-aportacion {
  display: flex; align-items: flex-start; gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--borde);
  font-size: 13.5px; line-height: 1.6; color: var(--texto-tenue);
}
.gratitud-aportacion b { color: var(--ok); letter-spacing: .04em; }

.punto-vivo {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: 6px;
  border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: latido-aportacion 2.1s ease-out infinite;
}
@keyframes latido-aportacion {
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
body.sin-animacion .punto-vivo { animation: none; }

/* ───────────────────────────────────────────────── comunidad ── */

.barra-comunidad {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 10px 20px;
  padding: 16px 20px;
  background: rgba(6, 11, 22, 0.42);
  border: 1px solid var(--borde);
  border-radius: 13px;
}
.barra-comunidad a {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--texto-tenue); text-decoration: none;
  transition: color .16s;
}
.barra-comunidad a:hover { color: var(--agua); }
.barra-comunidad a b { color: var(--texto); font-weight: 600; }
.barra-comunidad svg {
  flex: 0 0 auto; width: 17px; height: 17px; fill: none;
  stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.separador-comunidad { color: var(--texto-debil); }

@media (max-width: 620px) {
  .caja-aportacion { padding: 24px 18px; }
  .separador-comunidad { display: none; }
  .barra-comunidad { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-servicio { transition: border-color .2s; }
  .tarjeta-servicio:hover { transform: none; }
  .punto-vivo { animation: none; }
}