/* ═══════════════════════════════════════════════════════════════════════════
   El Sereno · web comercial
   Los colores vienen de css/tokens.css, copiado de seguridad-elsereno-marca.
   Dos caras: Bodoni Moda para display, Archivo para todo lo demás.
   La página es siempre noche: la marca no tiene modo claro.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --serif: 'Bodoni Moda', Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --borde: rgba(228, 233, 242, 0.10);
  --borde-fuerte: rgba(228, 233, 242, 0.18);

  --ancho: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --ritmo: clamp(72px, 10vw, 132px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--sereno-noche);
  color: var(--sereno-texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Tipografía de display ─────────────────────────────────────────────── */

/* Bodoni es una didone: los trazos finos casi desaparecen en claro sobre noche, que es
   el fondo de toda la web. El manual fija 400 para títulos, pero está escrito pensando
   en tinta sobre papel. Acá van 500, y el óptico se fija bajo para que el contraste de
   asta no se afine más de la cuenta al crecer el cuerpo. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 16;
  letter-spacing: -0.012em;
  line-height: 1.05;
  margin: 0;
}

h2 { font-size: clamp(30px, 4.6vw, 50px); }
h3 { font-size: 20px; line-height: 1.2; }

/* Mayúsculas con tracking: descriptor y etiquetas del sistema. */
.descriptor, .eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--sereno-texto-tenue);
  margin: 0;
}

.eyebrow {
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--sereno-farol);
  margin-bottom: 18px;
}

/* ── Botones ──────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.boton--acento {
  background: var(--sereno-farol);
  color: var(--sereno-noche);
}
.boton--acento:hover { background: #ffc75a; }

.boton--linea {
  border: 1px solid var(--borde-fuerte);
  color: var(--sereno-texto);
}
.boton--linea:hover { border-color: var(--sereno-sereno); color: var(--sereno-sereno); }

/* ── Navegación ───────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 220ms ease, border-color 220ms ease;
  border-bottom: 1px solid transparent;
}

.nav--fijo {
  background: rgba(11, 18, 32, 0.88);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--borde);
}

.nav__interior {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 104px;
  transition: height 260ms ease;
}

.nav--fijo .nav__interior { height: 68px; }

.nav__marca { flex-shrink: 0; line-height: 0; }

.nav__marca img {
  height: 46px;
  width: auto;
  transition: height 260ms ease, opacity 260ms ease;
}

/* Arriba de todo la marca ya está gigante en el hero, así que la de la barra sobra.
   Aparece cuando el hero se va y la barra se opaca. */
.nav__marca img { opacity: 0; }
.nav--fijo .nav__marca img { opacity: 1; height: 34px; }

.nav--fijo .nav__marca img { height: 28px; }

.nav__enlaces {
  display: flex;
  gap: 30px;
  margin-left: auto;
}

.nav__enlaces a {
  font-size: 14px;
  color: var(--sereno-texto-tenue);
  text-decoration: none;
  transition: color 160ms ease;
}
.nav__enlaces a:hover { color: var(--sereno-texto); }

.nav__cta { padding: 10px 18px; font-size: 13px; }

.nav__menu {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--borde-fuerte);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__menu span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--sereno-texto);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 170px 48px;
  overflow: hidden;
}

.hero__mapa {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__mapa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 42%;
  opacity: 0.62;
}

/* El texto vive sobre el sector oscuro: el degradé garantiza contraste a cualquier ancho. */
.hero__mapa::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--sereno-noche) 4%, rgba(11, 18, 32, 0.55) 46%, rgba(11, 18, 32, 0.30) 100%),
    linear-gradient(to right, var(--sereno-noche) 2%, rgba(11, 18, 32, 0.72) 42%, rgba(11, 18, 32, 0.15) 92%);
}

.hero__contenido {
  position: relative;
  z-index: 1;
}

/* La marca en grande es lo primero que se ve. */
.hero__marca {
  width: clamp(260px, 34vw, 430px);
  height: auto;
}

.hero__titulo {
  font-size: clamp(40px, 6.6vw, 76px);
  font-weight: 600;
  font-variation-settings: 'opsz' 11;
  margin: 40px 0 0;
  max-width: 15ch;
}

.hero__bajada {
  max-width: 52ch;
  margin: 22px 0 0;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--sereno-texto-tenue);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero__pie {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  margin: 56px auto 0;
  padding-inline: var(--gutter);
  font-size: 12px;
  color: rgba(152, 167, 189, 0.68);
}

/* ── Números ──────────────────────────────────────────────────────────── */

.numeros {
  border-block: 1px solid var(--borde);
  padding-block: clamp(44px, 6vw, 64px);
  background: var(--sereno-superficie);
}

.numeros__grilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

.numero { display: flex; flex-direction: column; gap: 8px; }

.numero__valor {
  font-family: var(--serif);
  font-size: clamp(32px, 4.2vw, 46px);
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.numero__valor--acento { color: var(--sereno-farol); }

.numero__unidad {
  font-family: var(--sans);
  font-size: 0.44em;
  font-weight: 500;
  margin-left: 2px;
}

.numero__etiqueta {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sereno-texto-tenue);
}

.numeros__pie {
  margin-top: 34px;
  font-size: 12px;
  color: rgba(152, 167, 189, 0.62);
}

/* ── Secciones ────────────────────────────────────────────────────────── */

.seccion { padding-block: var(--ritmo); }

/* La barra es fija: sin esto el título queda tapado al saltar desde el menú. */
[id] { scroll-margin-top: 88px; }
.seccion--alterna { background: var(--sereno-superficie); }

.seccion__cabeza { margin-bottom: clamp(40px, 5vw, 60px); }
.seccion__cabeza h2 { max-width: 18ch; }

.seccion__bajada {
  margin: 20px 0 0;
  font-size: 17px;
  color: var(--sereno-texto-tenue);
  max-width: 58ch;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────── */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: 4px;
  overflow: hidden;
}

.tarjeta {
  background: var(--sereno-noche);
  padding: clamp(26px, 3.4vw, 38px);
}

.tarjeta h3 { color: var(--sereno-texto); }

.tarjeta p {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--sereno-texto-tenue);
}

/* ── Circuito ─────────────────────────────────────────────────────────── */

.circuito {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 34px);
  list-style: none;
  margin-block: 0;
}

.paso {
  border-top: 1px solid var(--borde-fuerte);
  padding-top: 22px;
  position: relative;
}

/* El punto ámbar marca el paso: encendido, no advertencia. */
.paso::before {
  content: '';
  position: absolute;
  top: -3.5px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sereno-farol);
}

.paso__n {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--sereno-farol);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.paso h3 { font-size: 19px; }

.paso p {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--sereno-texto-tenue);
}

/* ── Marco de captura ─────────────────────────────────────────────────── */

.marco {
  margin: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  overflow: hidden;
  background: var(--sereno-superficie);
}

.marco__barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--borde);
}

.marco__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(228, 233, 242, 0.16);
}

.marco__url {
  margin-left: 14px;
  font-size: 12px;
  color: var(--sereno-texto-tenue);
}

/* La captura es clara y ancha: se deja desplazar en pantallas chicas en vez de encogerla. */
.marco__lienzo { overflow-x: auto; background: #fff; }
.marco__lienzo img { width: 1160px; max-width: none; }

.marco figcaption {
  padding: 14px 16px;
  border-top: 1px solid var(--borde);
  font-size: 12px;
  color: rgba(152, 167, 189, 0.7);
}

/* ── Municipios ───────────────────────────────────────────────────────── */

.municipios {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  list-style: none;
  margin-block: 0;
}

.municipios li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 14px;
  border-radius: 4px;
  background: var(--sereno-papel);
  text-align: center;
}

.municipios img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.municipios span {
  font-size: 12px;
  font-weight: 500;
  color: #4a5567;
}

/* ── Cierre ───────────────────────────────────────────────────────────── */

.cierre {
  padding-block: clamp(90px, 12vw, 150px);
  border-top: 1px solid var(--borde);
  text-align: center;
}

.cierre__interior {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cierre__farol { width: 64px; height: 64px; }

/* La frase de marca va sola, nunca bajo el logotipo. */
.cierre__frase {
  font-family: var(--serif);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14;
  color: var(--sereno-farol);
  margin: 26px 0 0;
  line-height: 1;
}

.cierre__titulo { margin-top: 40px; max-width: 18ch; }

.cierre__bajada {
  margin: 18px 0 0;
  max-width: 46ch;
  color: var(--sereno-texto-tenue);
}

.cierre__acciones { margin-top: 34px; }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--borde);
  padding-block: 38px;
  background: var(--sereno-superficie);
}

.pie__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.pie__marca img { height: 62px; width: auto; }

.pie__gpe {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.pie__gpe span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(152, 167, 189, 0.62);
}

.pie__gpe img {
  height: 56px;
  width: auto;
  opacity: 0.9;
  transition: opacity 160ms ease;
}
.pie__gpe a:hover img { opacity: 1; }

/* ── Adaptación ───────────────────────────────────────────────────────── */

@media (max-width: 940px) {
  .numeros__grilla { grid-template-columns: repeat(2, 1fr); }
  .circuito { grid-template-columns: repeat(2, 1fr); }
  .municipios { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .nav__cta { display: none; }
  .nav__menu { display: flex; }

  .nav__enlaces {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: rgba(11, 18, 32, 0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borde);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav__enlaces.abierto { display: flex; }
  .nav__enlaces a { padding: 13px 0; border-bottom: 1px solid var(--borde); }

  .hero { min-height: auto; padding-block: 132px 40px; }
  .hero__mapa img { object-position: 62% 45%; opacity: 0.5; }
  .tarjetas { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .pie__interior { flex-direction: column; align-items: flex-start; gap: 32px; }
  .pie__gpe { align-items: flex-start; }
}

@media (max-width: 520px) {
  .numeros__grilla { grid-template-columns: 1fr; gap: 28px; }
  .circuito { grid-template-columns: 1fr; }
  .municipios { grid-template-columns: repeat(2, 1fr); }
  .hero__acciones .boton { width: 100%; }
}

/* ── Evidencia ────────────────────────────────────────────────────────── */

.evidencia {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.evidencia__panel {
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  background: var(--sereno-superficie);
  padding: clamp(22px, 3vw, 32px);
}

.evidencia__fila + .evidencia__fila {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--borde);
}

.evidencia__rotulo {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sereno-texto-tenue);
  margin-bottom: 14px;
}

.evidencia__dato {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--sereno-texto-tenue);
  font-variant-numeric: tabular-nums;
}

.evidencia__mapa { width: 100%; height: auto; }

/* La onda son barras: el sistema mide la envolvente de amplitud del audio. */
.onda {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 56px;
}

.onda span {
  flex: 1;
  background: var(--sereno-sereno);
  border-radius: 1px;
  min-height: 2px;
}
.onda span:nth-child(-n+9) { background: var(--sereno-farol); }

.evidencia__mapa { border-radius: 4px; }

.evidencia__fotos { display: flex; gap: 10px; }

.foto { margin: 0; }

.foto svg {
  width: 74px;
  height: 74px;
  display: block;
  border-radius: 3px;
  border: 1px solid var(--borde-fuerte);
}

.foto figcaption {
  margin-top: 7px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(152, 167, 189, 0.55);
  text-align: center;
}

.evidencia__nota {
  margin: 26px 0 0;
  font-size: 11px;
  color: rgba(152, 167, 189, 0.55);
}

.evidencia__texto h3 { margin-top: 0; }
.evidencia__texto h3 + p { margin: 12px 0 0; font-size: 15px; color: var(--sereno-texto-tenue); }
.evidencia__texto p + h3 { margin-top: 30px; }

/* ── Comparación de dos municipios ────────────────────────────────────── */

.comparacion {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}

.caso {
  border: 1px solid var(--borde-fuerte);
  border-radius: 6px;
  background: var(--sereno-noche);
  padding: clamp(26px, 3.4vw, 38px);
}

.caso__rotulo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sereno-texto-tenue);
}

.caso__frase {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  margin: 14px 0 0;
}
.caso__frase em { font-style: normal; color: var(--sereno-farol); }

.caso__detalle {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--sereno-texto-tenue);
}

.comparacion__union {
  align-self: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(152, 167, 189, 0.55);
  writing-mode: vertical-rl;
  text-align: center;
}

/* ── Ejes de configuración ────────────────────────────────────────────── */

.ejes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 36px);
  list-style: none;
  margin-block: clamp(40px, 5vw, 60px) 0;
}

.ejes li { border-top: 1px solid var(--borde-fuerte); padding-top: 18px; }

.ejes__n {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14;
  font-size: 34px;
  line-height: 1;
  color: var(--sereno-farol);
  font-variant-numeric: tabular-nums;
}

.ejes__t {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--sereno-texto-tenue);
}

.nota-larga {
  margin: clamp(36px, 4vw, 52px) 0 0;
  max-width: 66ch;
  font-size: 15px;
  color: var(--sereno-texto-tenue);
}

/* ── Diagrama de arquitectura ─────────────────────────────────────────── */

.diagrama {
  width: 100%;
  height: auto;
  margin-bottom: clamp(40px, 5vw, 60px);
}

.d-caja rect {
  fill: var(--sereno-superficie);
  stroke: var(--borde-fuerte);
  stroke-width: 1;
}
.d-caja--acento rect { stroke: var(--sereno-farol); }

.d-caja text {
  fill: var(--sereno-texto);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-anchor: middle;
}

.d-caja .d-sub {
  fill: var(--sereno-texto-tenue);
  font-size: 12px;
  font-weight: 400;
}

.d-linea path { fill: none; stroke: var(--sereno-sereno); stroke-width: 1.5; opacity: 0.65; }

.tarjetas--tres { grid-template-columns: repeat(3, 1fr); }

/* ── Adaptación de las secciones nuevas ───────────────────────────────── */

@media (max-width: 940px) {
  .evidencia { grid-template-columns: 1fr; }
  .comparacion { grid-template-columns: 1fr; }
  .comparacion__union { writing-mode: horizontal-tb; justify-self: start; }
  .ejes { grid-template-columns: repeat(2, 1fr); }
  .tarjetas--tres { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .ejes { grid-template-columns: 1fr; }
}

/* ── Escala ───────────────────────────────────────────────────────────── */

/* Acá la imagen entra completa: el contador de la izquierda y el detalle del equipo
   de la derecha son las dos puntas del argumento y tienen que verse juntos. */
.marco__lienzo--ancho { overflow: hidden; }
.marco__lienzo--ancho img { width: 100%; }

.volumen { margin-top: clamp(44px, 5vw, 68px); }

.volumen__numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(40px, 5vw, 56px);
  border-bottom: 1px solid var(--borde);
}

.crecimiento { margin: clamp(40px, 5vw, 56px) 0 0; }

.crecimiento > figcaption {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sereno-texto-tenue);
}

.crecimiento__barras {
  display: flex;
  align-items: flex-end;
  gap: clamp(6px, 1.4vw, 16px);
  height: 132px;
  margin-top: 22px;
}

.crecimiento__barras span {
  position: relative;
  flex: 1;
  background: linear-gradient(to top, rgba(242,178,62,.28), var(--sereno-farol));
  border-radius: 2px 2px 0 0;
  min-height: 4px;
}

/* La inicial del mes cuelga debajo de cada barra. */
.crecimiento__barras i {
  position: absolute;
  inset: 100% 0 auto 0;
  padding-top: 8px;
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(152, 167, 189, 0.62);
  text-align: center;
}

.crecimiento__pie {
  margin: 34px 0 0;
  font-size: 12px;
  color: rgba(152, 167, 189, 0.62);
}

@media (max-width: 940px) {
  .volumen__numeros { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .volumen__numeros { grid-template-columns: 1fr; gap: 26px; }
  .crecimiento__barras { height: 96px; gap: 4px; }
  .crecimiento__barras i { font-size: 8px; }
}