/* =====================================================================
   FUERZA TIGRE — Sistema de Identidad Visual v1.0 (2025)
   Hoja de estilos derivada del Manual de Marca.
   Paleta, tipografía, proporciones y recursos gráficos según kit oficial.
   ===================================================================== */

/* ---------- 01. TOKENS ---------- */
:root {
  /* Colores principales */
  --azul-profundo: #0F5185;   /* Fondo dominante de las piezas */
  --azul-marca:    #1B75BB;   /* Color del logo sobre blanco */
  --celeste:       #3EB5E7;   /* Resaltados, pills y detalles */

  /* Colores de apoyo */
  --azul-noche:    #0B3D66;
  --azul-medio:    #228DC4;
  --celeste-claro: #8FD3F2;
  --gris-claro:    #F5F8FA;
  --gris-texto:    #2B3A46;

  --blanco: #FFFFFF;

  /* Tipografía */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipográfica fluida */
  --fs-hero:    clamp(2.75rem, 8.6vw, 6.5rem);
  --fs-h2:      clamp(2rem, 5.2vw, 3.75rem);
  --fs-h3:      clamp(1.25rem, 2.4vw, 1.75rem);
  --fs-stat:    clamp(3.5rem, 11vw, 8rem);
  --fs-body:    clamp(1rem, 1.15vw, 1.125rem);
  --fs-eyebrow: clamp(0.75rem, 1vw, 0.8125rem);

  /* Ritmo y forma */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8rem);
  --radius: 20px;
  --radius-lg: 28px;

  --shadow-card: 0 2px 4px rgba(11, 61, 102, .04), 0 12px 32px rgba(11, 61, 102, .07);
  --shadow-lift: 0 8px 16px rgba(11, 61, 102, .08), 0 24px 56px rgba(11, 61, 102, .14);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 02. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Compensa el header fijo al saltar por anclas */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--gris-texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 { margin: 0; line-height: 1.02; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--celeste); color: var(--azul-noche); }

/* ---------- 03. LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--section-y); }

/* Superficies según proporción 60% azul · 25% blanco · 15% celeste */
.s--azul   { background: var(--azul-profundo); color: var(--blanco); }
.s--noche  { background: var(--azul-noche);    color: var(--blanco); }
.s--blanco { background: var(--blanco);        color: var(--gris-texto); }
.s--gris   { background: var(--gris-claro);    color: var(--gris-texto); }

/* Barra de acento inferior — cierra la composición (kit 05) */
.s--accent { border-bottom: 6px solid var(--celeste); }

/* ---------- 04. TIPOGRAFÍA DE MARCA ---------- */

/* Etiqueta / eyebrow — Poppins 600, mayúscula, tracking amplio */
.eyebrow {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--celeste);
  margin-bottom: 1.25rem;
}
.s--blanco .eyebrow, .s--gris .eyebrow { color: var(--azul-medio); }

/* Título de sección — ExtraBold, mayúscula (manual de marca) */
.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}
.s--blanco .h2, .s--gris .h2 { color: var(--azul-profundo); }

/* Titular contundente — ExtraBold Itálica (piezas de campaña) */
.h-italic {
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: .95;
}

/* Titular largo (ej. el de la reforma): baja de escala y acota la medida
   para que no se lea como un muro de texto */
.h2--largo {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 24ch;
  line-height: 1.1;
}

.h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; }

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.6;
  max-width: 62ch;
}
.s--azul .lead, .s--noche .lead { color: rgba(255, 255, 255, .88); }

.muted { color: #5C6B78; }
.s--azul .muted, .s--noche .muted { color: rgba(255, 255, 255, .72); }

.section__head { max-width: 68ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head .lead { margin-top: 1.5rem; }

/* ---------- 05. MARCA DE AGUA (kit 05) ---------- */
/* Wordmark repetido, tono sobre tono 6–12% de opacidad, inclinado −6° */
.watermark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
/* El mosaico usa el wordmark original del kit (PP Neue Corp), no texto tipografiado.
   Se sobredimensiona al 220% para que la rotación no deje esquinas sin cubrir. */
.watermark__track {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background-image: url('/assets/img/watermark-blanco.png');
  background-repeat: repeat;
  background-position: center;
  background-size: clamp(260px, 26vw, 440px) auto;
  opacity: .075;
}
.s--blanco .watermark__track, .s--gris .watermark__track {
  background-image: url('/assets/img/watermark-azul.png');
  opacity: .07;
}
/* En mobile el texto ocupa más ancho: bajamos la marca de agua para no restar legibilidad */
@media (max-width: 640px) { .watermark__track { opacity: .06; } }

.section > .wrap { position: relative; z-index: 1; }

/* ---------- 06. PILLS / ETIQUETAS (kit 05) ---------- */
/* Cápsulas totalmente redondeadas, Poppins mayúscula. Tres variantes. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.35rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.3;
  border: 2px solid transparent;
}
.pill--celeste { background: var(--celeste);       color: var(--azul-noche); }
.pill--azul    { background: var(--azul-profundo); color: var(--blanco); }
.pill--linea   { background: transparent; border-color: currentColor; color: inherit; }
.s--blanco .pill--linea, .s--gris .pill--linea { color: var(--azul-profundo); }

/* ---------- 07. BOTONES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: 1rem 2rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--celeste { background: var(--celeste); color: var(--azul-noche); }
.btn--celeste:hover { background: var(--celeste-claro); box-shadow: 0 10px 28px rgba(62, 181, 231, .35); }

.btn--azul { background: var(--azul-profundo); color: var(--blanco); }
.btn--azul:hover { background: var(--azul-noche); box-shadow: 0 10px 28px rgba(15, 81, 133, .3); }

.btn--linea { background: transparent; border-color: currentColor; color: inherit; }
.btn--linea:hover { background: var(--blanco); color: var(--azul-profundo); border-color: var(--blanco); }
.s--blanco .btn--linea:hover, .s--gris .btn--linea:hover { background: var(--azul-profundo); color: var(--blanco); }

.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }

/* ---------- 08. TARJETAS ---------- */
.card {
  background: var(--blanco);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(15, 81, 133, .07);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card--azul {
  background: var(--azul-profundo);
  color: var(--blanco);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.card--noche { background: var(--azul-noche); color: var(--blanco); border-color: rgba(255,255,255,.1); box-shadow: none; }
.card--glass {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--blanco);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.card__title { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; margin-bottom: .75rem; }
.s--blanco .card__title, .s--gris .card__title { color: var(--azul-profundo); }
.card--azul .card__title, .card--noche .card__title, .card--glass .card__title { color: var(--blanco); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* ---------- 09. CHECKS Y LISTAS (kit 05) ---------- */
/* Bullets con check en círculo celeste */
.checks { display: grid; gap: 1rem; }
.checks li {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  font-weight: 500;
  line-height: 1.5;
}
.check-ico {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--celeste);
  display: grid;
  place-items: center;
}
.check-ico svg { width: 14px; height: 14px; stroke: var(--blanco); stroke-width: 3.5; fill: none; }
.s--blanco .check-ico svg, .s--gris .check-ico svg { stroke: var(--blanco); }

/* Lista larga (los 41 proyectos): más compacta y en dos columnas
   cuando hay ancho, para que no se lea como un muro */
.checks--compacta { gap: .5rem; font-size: .9375rem; }
.checks--compacta .check-ico { flex-basis: 22px; width: 22px; height: 22px; }
.checks--compacta .check-ico svg { width: 12px; height: 12px; }
.checks--compacta li { align-items: flex-start; }
.checks--compacta b { font-weight: 700; color: var(--azul-medio); }

@media (min-width: 900px) {
  .checks--compacta {
    display: block;
    columns: 2;
    column-gap: 2.25rem;
  }
  .checks--compacta li {
    display: flex;
    break-inside: avoid;
    margin-bottom: .5rem;
  }
}

/* Ítem de lista en tarjeta redondeada */
.chip-item {
  background: var(--azul-medio);
  border-radius: 14px;
  padding: .875rem 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--blanco);
}

/* ---------- 10. NÚMEROS E ÍCONOS (kit 05) ---------- */
/* Cifras destacadas en Poppins ExtraBold celeste */
.stat { display: flex; flex-direction: column; gap: .25rem; }
.stat__num {
  font-size: var(--stat-size, var(--fs-stat));
  font-weight: 800;
  line-height: .85;
  letter-spacing: -0.05em;
  color: var(--celeste);
  font-variant-numeric: tabular-nums;
}
.stat__num sup, .stat__den {
  font-size: .34em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, .55);
}
.s--blanco .stat__den, .s--gris .stat__den { color: #8494A1; }
/* En la grilla de 4 columnas la tarjeta es angosta: la cifra baja de escala
   para no desbordar (ej. "+40", que es el caso más ancho) */
.grid--4 .stat { --stat-size: clamp(2.25rem, 4.4vw, 3.75rem); }

.stat__label {
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  line-height: 1.45;
  margin-top: .875rem;
}
.stat__note { font-size: .9375rem; font-weight: 300; line-height: 1.5; margin-top: .5rem; }

/* Íconos de línea para datos de evento (fecha, ubicación) */
.meta { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.meta__item { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 500; }
.meta__item svg { width: 18px; height: 18px; stroke: var(--celeste); stroke-width: 2; fill: none; flex: 0 0 18px; }

/* ---------- 11. HEADER ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
  padding-block: 1.25rem;
}
.header.is-stuck {
  background: var(--azul-profundo);
  box-shadow: 0 2px 24px rgba(11, 61, 102, .28);
  padding-block: .75rem;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.header__logo img { width: clamp(120px, 13vw, 158px); transition: width .3s var(--ease); }
.header.is-stuck .header__logo img { width: clamp(108px, 11vw, 134px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.875rem); }
.nav__link {
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
  letter-spacing: .04em;
  position: relative;
  padding-block: .25rem;
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--celeste);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--blanco); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--blanco); font-weight: 600; }

.nav__cta { padding: .7rem 1.35rem; font-size: .75rem; }

/* Botón hamburguesa */
.burger {
  display: none;
  width: 46px; height: 46px;
  border: 0; background: transparent;
  padding: 0;
  position: relative;
  z-index: 110;
}
.burger span {
  display: block;
  width: 24px; height: 2px;
  margin: 5px auto;
  background: var(--blanco);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    background: var(--azul-profundo);
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    padding: 5rem var(--gutter) 2rem;
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__link { font-size: 1.1875rem; font-weight: 600; }
  .nav__cta { margin-top: .75rem; font-size: .8125rem; padding: .9rem 1.85rem; }
}

/* ---------- 12. HERO CON ZOOM POR SCROLL ----------
   .hero          → contenedor alto: define cuánto scroll dura el efecto
   .hero__viewport → pantalla 1: la foto, fija mientras dura el recorrido
   .hero__panel    → pantalla 2: el texto, sube por encima con el scroll
   Solo se animan transform y opacity, desde requestAnimationFrame.        */

.hero {
  position: relative;
  height: 200svh;                /* pantalla 1: solo foto · pantalla 2: foto + texto */
  background: var(--azul-profundo);
  color: var(--blanco);
}

/* Pantalla 1: queda fija mientras el panel de texto sube por encima */
.hero__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* --- Escenario 3D: da la perspectiva para el travelling --- */
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  perspective: 900px;
  perspective-origin: 55% 62%;   /* punto de fuga sobre el puente y la avenida */
}

/* --- Imagen y video --- */
.hero__media {
  position: absolute;
  inset: -4%;                    /* margen para que la inclinación no destape bordes */
  transform-origin: center center;
  backface-visibility: hidden;
}
/* Con video el travelling ya viene filmado: no hace falta perspectiva simulada */
.hero.tiene-video .hero__media { inset: 0; }
.hero.tiene-video:not(.hero--acerca) .hero__media { transform: none !important; }
.hero.tiene-video:not(.hero--acerca) .hero__stage { perspective: none; }

/* Hero de "Basta de torres": el video ya trae las torres creciendo y encima
   la cámara entra. Es el movimiento inverso al de la portada, que se aleja.
   Por eso mantiene la perspectiva y deja que el JS escriba el transform. */
.hero--acerca .hero__media { inset: -4%; }
.hero--acerca .hero__stage { perspective-origin: 50% 55%; }

.hero__media img,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

/* El póster se retira cuando el canvas ya dibujó el primer cuadro */
.hero__poster { transition: opacity .4s var(--ease); }
.hero.video-listo .hero__poster { opacity: 0; }

.hero__canvas { opacity: 0; transition: opacity .4s var(--ease); }
.hero.video-listo .hero__canvas { opacity: 1; }

/* El video alimenta al canvas pero nunca se muestra */
.hero__media video {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* will-change solo mientras el hero está en pantalla (lo aplica el JS) */
.hero.is-activo .hero__media { will-change: transform; }

/* --- Velo azul: entra con el texto para garantizar legibilidad --- */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(11, 61, 102, .92) 0%, rgba(11, 61, 102, .55) 45%, rgba(11, 61, 102, .12) 75%),
    linear-gradient(to top, rgba(11, 61, 102, .75), transparent 45%);
}
.hero.is-activo .hero__scrim { will-change: opacity; }

/* --- Difuminado superior: sostiene la barra de navegación sobre la foto --- */
.hero__topfade {
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(130px, 20vh, 220px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(15, 81, 133, .82), rgba(15, 81, 133, .45) 45%, transparent);
}

/* --- Barra de acento inferior (Manual de Marca 05) --- */
.hero__accent {
  position: absolute;
  inset: auto 0 0 0;
  height: 8px;
  z-index: 4;
  background: var(--celeste);
}

/* --- Pantalla 2: panel de texto que sube por encima de la foto --- */
.hero__panel {
  position: relative;
  z-index: 3;
  height: 100svh;
  display: flex;
  align-items: center;
  pointer-events: none;          /* la foto de abajo sigue siendo clickeable */
}
.hero__panel .btn { pointer-events: auto; }

.hero__content { width: 100%; }
.hero__content > [data-hero-item] { opacity: 0; }

.hero__claim {
  font-size: var(--fs-hero);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: .92;
  max-width: 16ch;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 32px rgba(11, 61, 102, .45);
}
.hero__claim em { font-style: italic; color: var(--celeste); }

.hero__lead {
  font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  max-width: 42ch;
  color: rgba(255, 255, 255, .95);
  margin-bottom: 1.75rem;
  text-shadow: 0 2px 20px rgba(11, 61, 102, .5);
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 2.25rem;
  transform: translateX(-50%);
  z-index: 4;
  display: grid;
  place-items: center;
  gap: .625rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 12px rgba(11, 61, 102, .6);
}
.hero__scroll svg { width: 16px; height: 22px; stroke: var(--celeste); stroke-width: 2; fill: none; animation: bob 2s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 640px) {
  .hero__scroll { bottom: 1.5rem; }
}

/* Notebooks y pantallas bajas: comprimir el texto para que entre completo */
@media (min-width: 641px) and (max-height: 860px) {
  .hero__claim { font-size: clamp(2.5rem, 7vw, 5rem); margin-bottom: 1.25rem; }
  .hero__lead { font-size: 1.125rem; margin-bottom: 1.25rem; }
}
/* Viewports muy bajos: el indicador de scroll se pisaría con los botones */
@media (max-height: 640px) { .hero__scroll { display: none; } }

/* --- Sin animación: una sola pantalla, foto quieta, texto visible --- */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__viewport { position: absolute; inset: 0; height: 100%; }
  .hero__media { transform: none !important; inset: 0; }
  .hero__scrim { opacity: .72 !important; }
  .hero__content > [data-hero-item] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 13. TARJETA DE DATO (transparencia) ---------- */
.datacard {
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}
.datacard--destacada { background: var(--celeste); color: var(--azul-noche); border-color: transparent; }
.datacard--destacada .stat__num { color: var(--azul-noche); }
.datacard--destacada .stat__den { color: rgba(11, 61, 102, .5); }

/* ---------- 14. TIMELINE — "¿Dónde está el intendente?" ---------- */
.timeline { position: relative; display: grid; gap: 1.25rem; }
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
}
/* El marcador se estira a todo el alto de la fila para que el filete conecte los puntos */
.tl-item__marker { position: relative; display: grid; place-items: start center; padding-top: .5rem; align-self: stretch; }
.tl-item__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--celeste);
  box-shadow: 0 0 0 5px rgba(62, 181, 231, .2);
}
.tl-item:not(:last-child) .tl-item__marker::after {
  content: '';
  position: absolute;
  top: 1.75rem; bottom: -1.75rem;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, .26);
  transform: translateX(-50%);
}
.s--blanco .tl-item:not(:last-child) .tl-item__marker::after,
.s--gris .tl-item:not(:last-child) .tl-item__marker::after { background: rgba(15, 81, 133, .16); }

.tl-item__body { padding-bottom: .5rem; }
.tl-item__date {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--celeste);
  margin-bottom: .375rem;
}
.tl-item__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: .375rem; letter-spacing: -0.01em; }

/* ---------- 15. EQUIPO ---------- */
/* Columna flexible para que los botones queden alineados al pie
   aunque los cargos ocupen distinta cantidad de líneas */
.person { text-align: left; display: flex; flex-direction: column; height: 100%; }
.person__photo {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, var(--azul-marca), var(--azul-noche));
  margin-bottom: 1.125rem;
  position: relative;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: var(--celeste);
}
.person__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.s--blanco .person__name, .s--gris .person__name { color: var(--azul-profundo); }
.person__role {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  line-height: 1.5;
  color: var(--azul-medio);
  margin-top: .375rem;
  margin-bottom: .875rem;   /* separación mínima con el botón */
}
.s--azul .person__role, .s--noche .person__role { color: var(--celeste); }

/* Botón al perfil de Instagram */
.person__ig {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  margin-top: auto;       /* empuja el botón al pie de la tarjeta */
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 2px solid rgba(15, 81, 133, .18);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--azul-profundo);
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.person__ig svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 15px; }
.person__ig:hover {
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
  color: var(--blanco);
  transform: translateY(-2px);
}
.s--azul .person__ig, .s--noche .person__ig {
  border-color: rgba(255, 255, 255, .28);
  color: var(--blanco);
}
.s--azul .person__ig:hover, .s--noche .person__ig:hover {
  background: var(--celeste);
  border-color: var(--celeste);
  color: var(--azul-noche);
}

/* ---- Solapas por área ---- */
.solapas {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.solapa {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  border: 2px solid rgba(15, 81, 133, .16);
  background: transparent;
  color: var(--azul-profundo);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.25;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.solapa__detalle { font-size: .6875rem; font-weight: 500; opacity: .72; letter-spacing: .1em; }
.solapa:hover { border-color: var(--azul-medio); transform: translateY(-2px); }
.solapa.is-activa {
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
  color: var(--blanco);
}
.solapa.is-activa .solapa__detalle { opacity: .85; }

.panel[hidden] { display: none; }

/* ---- Perfil destacado (solapa con una sola persona) ---- */
.destacado {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  max-width: 900px;
}
.destacado__foto {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: linear-gradient(160deg, var(--azul-marca), var(--azul-noche));
}
.destacado__foto img { width: 100%; height: 100%; object-fit: cover; }
.destacado__foto::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: var(--celeste);
}
.destacado__nombre {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--azul-profundo);
  margin-top: 1rem;
}
.destacado__cargo {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: #5C6B78;
  margin-block: .75rem 1.75rem;
  max-width: 34ch;
}
.destacado .btn svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 640px) {
  .destacado { grid-template-columns: 1fr; }
  .destacado__foto { max-width: 260px; }
}

/* Dos o más senadoras: las fichas se ponen una al lado de la otra y cada una
   pasa a columna única (foto arriba, datos abajo). Con una sola ficha el
   contenedor no cambia nada y sigue viéndose horizontal. */
.destacados {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  /* Acotado a propósito: con dos fichas, la foto ocupa el ancho de su columna,
     así que de este ancho sale el tamaño de las fotos. */
  max-width: 720px;
}
.destacados .destacado {
  grid-template-columns: 1fr;
  gap: 1.25rem;                 /* aire entre la foto y la pastilla del cargo */
  align-items: start;
  /* Sin esto, la ficha más corta reparte el alto sobrante entre sus filas y
     los nombres quedan a distinta altura que los de la ficha de al lado. */
  align-content: start;
  max-width: none;
}
.destacados .destacado__foto { max-width: none; }
.destacados .destacado__nombre { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin-top: .75rem; }
.destacados .destacado__cargo { margin-block: .625rem 1.25rem; }

/* Placeholder de foto: iniciales sobre azul */
.person__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  font-style: italic;
  color: rgba(255, 255, 255, .3);
  letter-spacing: -0.03em;
}

/* ---------- 16. LO ÚLTIMO ---------- */
/* Una sola estructura para los cuatro tipos: video, prensa, comunicado y posteo */
.novedad {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(15, 81, 133, .07);
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.novedad:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.novedad__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: linear-gradient(150deg, var(--azul-marca), var(--azul-noche));
  overflow: hidden;
}
.novedad__media img { width: 100%; height: 100%; object-fit: cover; }

/* Sin portada: fondo de marca con el wordmark en mosaico */
.novedad--sin-foto .novedad__media::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: url('/assets/img/watermark-blanco.png') repeat center / 200px auto;
  transform: rotate(-6deg);
  opacity: .14;
}

/* Botón de reproducción, solo en las tarjetas de video */
.novedad__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(11, 61, 102, .22);
  transition: background-color .3s var(--ease);
}
.novedad__play svg {
  width: 22px; height: 22px;
  fill: var(--azul-noche);
  margin-left: 3px;
}
.novedad__play::before {
  content: '';
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--celeste);
  box-shadow: 0 8px 24px rgba(11, 61, 102, .3);
  transition: transform .3s var(--ease);
}
.novedad__play svg { position: relative; z-index: 1; }
.novedad:hover .novedad__play::before { transform: scale(1.08); }
.novedad:hover .novedad__play { background: rgba(11, 61, 102, .34); }

.novedad__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  flex: 1;
}
.novedad__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.novedad__meta time {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8494A1;
}
.novedad__titulo {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--azul-profundo);
}
.novedad__titulo a { transition: color .2s var(--ease); }
.novedad__titulo a:hover { color: var(--azul-medio); }

/* Enlace de la tarjeta: se empuja al pie para que todas cierren parejas */
.novedad__accion {
  margin-top: auto;
  padding-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--azul-medio);
}
.novedad__accion svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.novedad:hover .novedad__accion svg { transform: translateX(4px); }

/* Comunicado: el texto se despliega en la propia tarjeta */
.novedad__texto { margin-top: auto; }
.novedad__texto summary {
  cursor: pointer;
  list-style: none;
  padding-top: .5rem;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--azul-medio);
}
.novedad__texto summary::-webkit-details-marker { display: none; }
.novedad__texto summary::after {
  content: ' +';
  font-weight: 700;
}
.novedad__texto[open] summary::after { content: ' −'; }
.novedad__texto p { margin-top: .875rem; color: #5C6B78; font-size: .9375rem; line-height: 1.6; }

/* Sin portada: el fondo rota entre tres tonos de marca para que una fila
   larga de tarjetas no se vea monótona */
.novedad--tono-1 .novedad__media { background: linear-gradient(150deg, var(--azul-marca), var(--azul-noche)); }
.novedad--tono-2 .novedad__media { background: linear-gradient(150deg, var(--azul-profundo), var(--azul-noche)); }
.novedad--tono-3 .novedad__media { background: linear-gradient(150deg, var(--azul-medio), var(--azul-profundo)); }

/* Ícono de Instagram centrado, para las tarjetas que solo enlazan */
.novedad__ig {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.novedad__ig svg {
  width: 40px; height: 40px;
  fill: var(--blanco);
  opacity: .9;
  transition: transform .3s var(--ease);
}
.novedad:hover .novedad__ig svg { transform: scale(1.12); }

/* ---- Enlace a la plataforma "¿Dónde está el intendente?" ----
   Usa la identidad de esa página (amarillo #F4CA19 sobre negro) en vez del
   azul de marca, para que se reconozca como el mismo espacio al entrar. */
:root { --dei-amarillo: #F4CA19; --dei-negro: #16130B; }

.dei { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; }
.dei__logo {
  width: clamp(84px, 11vw, 108px);
  height: auto;
  margin-bottom: .25rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .3));
}
.dei .card__title { margin-bottom: 0; }
.dei .btn { margin-top: auto; }

.btn--dei { background: var(--dei-amarillo); color: var(--dei-negro); }
.btn--dei:hover {
  background: #FFDA3D;
  box-shadow: 0 10px 28px rgba(244, 202, 25, .35);
}

/* Video de presentación de la plataforma */
.dei-video { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dei-video__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background:
    url('/assets/img/dei/logo-400.webp') no-repeat center / 46% auto,
    var(--dei-amarillo);
  transition: background-size .35s var(--ease);
}
.dei-video:hover .dei-video__media { background-size: 50% auto, auto; }
.dei-video__play {
  position: absolute;
  right: 1rem; bottom: 1rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--dei-negro);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: transform .3s var(--ease);
}
.dei-video:hover .dei-video__play { transform: scale(1.08); }
.dei-video__play svg { width: 20px; height: 20px; fill: var(--dei-amarillo); margin-left: 3px; }
.dei-video__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  flex: 1;
}
.dei-video .card__title { font-size: 1.125rem; }
.dei-video .novedad__meta time { color: rgba(255, 255, 255, .6); }
.dei-video .novedad__accion { color: var(--dei-amarillo); }

/* ---- Fila con desplazamiento lateral ---- */
.rail { position: relative; }
.rail__pista {
  display: flex;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* La fila sangra a los bordes, pero la primera tarjeta se alinea
     con el resto del contenido de la página */
  padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter));
  padding-block: .25rem 1.5rem;
  /* Sin esto el anclaje obligatorio pega la primera tarjeta al borde
     de la pantalla, ignorando el margen de arriba */
  scroll-padding-inline: max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter));
}
.rail__pista::-webkit-scrollbar { display: none; }
.rail__pista > .novedad {
  flex: 0 0 clamp(258px, 27vw, 330px);
  scroll-snap-align: start;
}

.rail__controles { display: flex; gap: .75rem; margin-top: .5rem; }
.rail__flecha {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(15, 81, 133, .18);
  background: transparent;
  color: var(--azul-profundo);
  display: grid;
  place-items: center;
  transition: background-color .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), opacity .25s var(--ease);
}
.rail__flecha svg { width: 20px; height: 20px; }
.rail__flecha:hover:not(:disabled) {
  background: var(--azul-profundo);
  border-color: var(--azul-profundo);
  color: var(--blanco);
}
.rail__flecha:disabled { opacity: .3; cursor: default; }

@media (prefers-reduced-motion: reduce) { .rail__pista { scroll-behavior: auto; } }

/* ---------- 17. AGENDA ---------- */
.event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: center;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--blanco);
  border: 1px solid rgba(15, 81, 133, .09);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.event:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.event__date {
  text-align: center;
  background: var(--azul-profundo);
  color: var(--blanco);
  border-radius: 14px;
  padding: .875rem 1.125rem;
  min-width: 84px;
}
.event__day { display: block; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--celeste); }
.event__month { display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; margin-top: .25rem; }
.event__title { font-size: 1.0625rem; font-weight: 700; color: var(--azul-profundo); margin-bottom: .5rem; letter-spacing: -0.01em; }

/* La agenda vive dentro de la sección azul de participación */
.s--azul .event, .s--noche .event {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}
.s--azul .event:hover, .s--noche .event:hover { box-shadow: none; background: rgba(255, 255, 255, .11); }
.s--azul .event__title, .s--noche .event__title { color: var(--blanco); }
.s--azul .event__date, .s--noche .event__date { background: var(--azul-noche); }

/* ---------- 18. FORMULARIOS ---------- */
.form { display: grid; gap: 1.125rem; }
.form__row { display: grid; gap: 1.125rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.field { display: grid; gap: .5rem; }
.field label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  padding: .9375rem 1.125rem;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  color: var(--blanco);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .45); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--celeste);
  background: rgba(255, 255, 255, .16);
}
.field select option { background: var(--azul-noche); color: var(--blanco); }

/* Variante sobre fondo claro */
.form--light .field input, .form--light .field select, .form--light .field textarea {
  border-color: rgba(15, 81, 133, .18);
  background: var(--blanco);
  color: var(--gris-texto);
}
.form--light .field input::placeholder, .form--light .field textarea::placeholder { color: #93A2AE; }
.form--light .field label { color: var(--azul-profundo); }
.form--light .field select option { background: var(--blanco); color: var(--gris-texto); }

.form__note { font-size: .8125rem; line-height: 1.5; }
.form__status { font-size: .9375rem; font-weight: 500; min-height: 1.5rem; }
.form__status.is-ok { color: var(--celeste); }
.form__status.is-error { color: #FF8A8A; }
.form--light .form__status.is-ok { color: var(--azul-medio); }
.form--light .form__status.is-error { color: #C62828; }

/* ---------- 19. CONTACTO Y FOOTER ---------- */
.contact-item { display: flex; align-items: flex-start; gap: 1rem; }
.contact-item__ico {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(62, 181, 231, .16);
  display: grid;
  place-items: center;
}
.contact-item__ico svg { width: 20px; height: 20px; stroke: var(--celeste); stroke-width: 2; fill: none; }
.contact-item__label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--celeste); }
.contact-item__value { font-weight: 500; line-height: 1.5; }
.contact-item a:hover { color: var(--celeste); }

.socials { display: flex; flex-wrap: wrap; gap: .75rem; }
.social {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.social svg { width: 20px; height: 20px; fill: var(--blanco); }
.social:hover { background: var(--celeste); transform: translateY(-3px); }
.social:hover svg { fill: var(--azul-noche); }

.footer { background: var(--azul-noche); color: var(--blanco); padding-block: clamp(3.5rem, 7vw, 5rem) 0; }
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer__logo { width: clamp(160px, 20vw, 220px); margin-bottom: 1.25rem; }
.footer__legend { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.55); }
.footer__nav { display: grid; gap: .625rem; }
.footer__nav a { font-size: .9375rem; color: rgba(255,255,255,.78); transition: color .2s var(--ease); }
.footer__nav a:hover { color: var(--celeste); }
.footer__title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--celeste); margin-bottom: 1.25rem; }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .55);
}
/* Barra de acento inferior — cierre de la composición */
.footer__accent { height: 8px; background: var(--celeste); }

/* ---------- 20. ACCESOS FLOTANTES ---------- */
/* WhatsApp e Instagram, visibles en toda la página */
.flotantes {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.flotante {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(11, 61, 102, .3);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.flotante:hover { transform: scale(1.08); }
.flotante svg { width: 28px; height: 28px; fill: var(--blanco); }

.flotante--wa { background: #25D366; }
/* Degradado de la marca Instagram */
.flotante--ig {
  background: radial-gradient(circle at 30% 107%,
    #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
}

@media (max-width: 480px) {
  .flotante { width: 50px; height: 50px; }
  .flotante svg { width: 25px; height: 25px; }
}

/* ---------- 21. ANIMACIÓN DE ENTRADA ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 22. UTILIDADES ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 200;
  background: var(--celeste);
  color: var(--azul-noche);
  padding: .75rem 1.25rem;
  border-radius: 0 0 12px 12px;
  font-size: .8125rem;
  font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

.mt-1 { margin-top: .5rem; }  .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; } .mt-6 { margin-top: 3rem; }
.divider { height: 1px; background: rgba(255,255,255,.14); border: 0; margin-block: clamp(2rem,4vw,3rem); }
.s--blanco .divider, .s--gris .divider { background: rgba(15,81,133,.12); }

/* ---- Reforma: cifra angosta y fija, lista ancha al costado ---- */
.reforma__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: start;
}
@media (min-width: 900px) {
  .reforma__grid { grid-template-columns: minmax(0, 300px) 1fr; }
  /* La cifra acompaña la lectura de la lista larga */
  .reforma__cifra { position: sticky; top: 104px; }
}
.reforma__cifra { display: flex; flex-direction: column; justify-content: center; }

/* =====================================================================
   PÁGINA DE PROPUESTAS (propuestas.html)
   ===================================================================== */

/* Banda CTA en el index, antes de la reforma */
.cta-band { background: var(--azul-noche); position: relative; overflow: hidden; }
.cta-band .watermark__track { opacity: .05; }
.cta-band__inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vw, 2.75rem);
}
.cta-band__texto { color: var(--blanco); }
.cta-band__eyebrow {
  display: block; font-size: var(--fs-eyebrow); font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em; color: var(--celeste);
  margin-bottom: .5rem;
}
.cta-band__titulo {
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05;
}
.cta-band__bajada {
  margin: .875rem 0 0;
  font-size: clamp(1rem, 1.5vw, 1.1875rem); font-weight: 300; line-height: 1.5;
  max-width: 46ch;
}

/* ---------- ASÍ VOTARON LOS CONCEJALES ----------
   Semicírculo de 24 bancas. Cada banca se ubica con --x / --y, que salen de
   las coordenadas polares de tres arcos (10 + 8 + 6 bancas). */
.hemiciclo {
  --voto-favor: #C4483B;              /* el único rojo del sitio: marca el voto en contra nuestro */
  --voto-contra: var(--celeste);
  /* Tope: la cuerda más corta entre bancas vecinas mide 11,9% del ancho.
     Dejamos un pelo menos para que quede aire entre una y otra. */
  --banca: 11.4%;
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  aspect-ratio: 1 / .57;   /* alto justo para que no se salga ninguna banca */
}
.hemiciclo__bancas { list-style: none; margin: 0; padding: 0; }
.hemiciclo__banca {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--banca);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: clamp(2px, .42vw, 4px) solid var(--voto-favor);
  border-radius: 50%;
  overflow: hidden;
  background: var(--gris-claro);
}
.hemiciclo__banca--contra { border-color: var(--voto-contra); }
.hemiciclo__banca img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Las bancas entran de a una cuando la sección aparece en pantalla */
@keyframes bancaEntra {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.hemiciclo.is-visible .hemiciclo__banca {
  animation: bancaEntra .5s var(--ease) both;
  animation-delay: calc(var(--i) * 45ms);
}

.hemiciclo__leyenda {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2.5rem;
  font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--azul-profundo);
}
.hemiciclo__leyenda li { display: flex; align-items: center; gap: .625rem; }
.hemiciclo__punto { width: 15px; height: 15px; border-radius: 50%; background: #C4483B; }
.hemiciclo__punto--contra { background: var(--celeste); }

/* Las dos listas de votos */
.votos {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.votos__grupo {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--gris-claro);
  border-top: 5px solid #C4483B;
}
.votos__grupo--contra { border-top-color: var(--celeste); }
.votos__titulo {
  font-size: 1.0625rem; font-weight: 400; line-height: 1.4;
  color: var(--azul-profundo); margin-bottom: 1.25rem;
}
.votos__titulo strong { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.votos__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.votos__lista li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid rgba(15, 81, 133, .1);
}
.votos__lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.votos__nombre { font-weight: 600; color: var(--gris-texto); }
.votos__bloque { font-size: .8125rem; color: #5C6B78; }

@media (prefers-reduced-motion: reduce) {
  .hemiciclo.is-visible .hemiciclo__banca { animation: none; }
}

/* Reproductor de video incrustado. 16:9, que es el formato de la grabación
   del Concejo; el reproductor recorta si el marco no coincide. */
.video-marco {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 62rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-card);
}
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Lista de preguntas abiertas ("La discusión recién empieza"). No lleva
   tilde de verificación: son preguntas por responder, no cosas hechas. */
.preguntas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 62ch; }
.preguntas li {
  position: relative; padding-left: 2rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.5;
}
.preguntas li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 1.125rem; height: 2px; border-radius: 2px;
  background: var(--celeste);
}

/* Banda de campaña "Basta de torres".
   Celeste: es el único bloque de este color en todo el sitio, así el mensaje
   corta la secuencia de fondos oscuros y grises y se lee como una consigna. */
.cta-band--torres { background: var(--celeste); }
.cta-band--torres .watermark__track {
  background-image: url('/assets/img/watermark-azul.png');
  opacity: .06;
}
.cta-band--torres .cta-band__inner { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.cta-band--torres .cta-band__texto { color: var(--azul-noche); }
.cta-band--torres .cta-band__titulo {
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-style: italic; letter-spacing: -0.035em; line-height: .95;
}

/* Portada de la página interna */
.pagina-interna { padding-top: 0; }
.prop-hero {
  position: relative; overflow: hidden;
  background: var(--azul-profundo); color: var(--blanco);
  padding-block: clamp(7rem, 14vh, 10rem) clamp(3rem, 6vw, 4.5rem);
  border-bottom: 8px solid var(--celeste);
}
.prop-hero .wrap { position: relative; z-index: 1; }
.prop-hero__volver {
  display: inline-block; margin-bottom: 1.5rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  color: rgba(255,255,255,.8); transition: color .2s var(--ease);
}
.prop-hero__volver:hover { color: var(--celeste); }
.prop-hero__titulo {
  font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 800; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.035em; line-height: .92;
}
.prop-hero__titulo em { color: var(--celeste); font-style: italic; }
.prop-hero__bajada {
  font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 300;
  max-width: 52ch; margin-top: 1.25rem; color: rgba(255,255,255,.9);
}

/* Índice de 7 tarjetas */
.prop-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.prop-card {
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--azul-profundo); color: var(--blanco);
  border-radius: var(--radius-lg);
  border-bottom: 5px solid var(--celeste);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prop-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.prop-card__ico {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(62,181,231,.16);
  display: grid; place-items: center; color: var(--celeste);
}
.prop-card__ico svg { width: 30px; height: 30px; }
.prop-card__titulo {
  font-size: 1.1875rem; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.01em; flex: 1;
}
.prop-card__ver {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--celeste);
}
.prop-card__ver svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.prop-card:hover .prop-card__ver svg { transform: translateX(4px); }

/* Detalle de cada eje */
.prop-detalle { position: relative; padding-block: clamp(3.5rem, 7vw, 6rem); scroll-margin-top: 88px; }
.prop-detalle .h2 { margin-bottom: 2.5rem; }
.prop-sub {
  font-size: clamp(1.125rem, 2vw, 1.4375rem); font-weight: 700;
  color: var(--azul-medio); letter-spacing: -0.01em;
  margin-top: 2.5rem; margin-bottom: 1rem; max-width: 60ch;
}
.prop-detalle .h2 + .prop-sub { margin-top: 0; }
.prop-p { max-width: 68ch; margin-bottom: .875rem; line-height: 1.7; }
/* Cierre de sección: la frase que resume el argumento */
.prop-p--destacado {
  margin-top: 1.75rem; padding-left: 1.25rem;
  border-left: 4px solid var(--celeste);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 600;
  color: var(--azul-profundo);
}
.prop-lista { display: grid; gap: .875rem; margin-top: 1.25rem; max-width: 78ch; }
.prop-lista li { display: flex; align-items: flex-start; gap: .875rem; line-height: 1.6; }
.prop-check {
  flex: 0 0 26px; width: 26px; height: 26px; margin-top: 1px;
  border-radius: 50%; background: var(--celeste);
  display: grid; place-items: center;
}
.prop-check svg { width: 14px; height: 14px; stroke: var(--blanco); stroke-width: 3.5; fill: none; }
.prop-volver {
  display: inline-block; margin-top: 2.5rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  color: var(--azul-medio);
}
.prop-volver:hover { color: var(--azul-profundo); }
.s--gris .prop-volver:hover { color: var(--azul-noche); }

/* ---------- 20b. ¿DÓNDE ESTÁ EL INTENDENTE? — encabezado con logo ---------- */
.dei-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: none;
}
.dei-encabezado__texto { max-width: 68ch; }
.dei-encabezado picture { flex: 0 0 auto; }
.dei-encabezado__logo {
  display: block;
  width: clamp(150px, 24vw, 260px);
  height: auto;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .4));
}

/* ---------- 21. PROYECTOS PRESENTADOS (recuento + carrusel) ---------- */

/* Tarjetas del recuento: son botones que filtran el carrusel */
.proy-stat {
  font: inherit;
  text-align: left;
  cursor: pointer;
  border: 2px solid rgba(15, 81, 133, .07);
}
.proy-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.proy-stat.is-activo {
  border-color: var(--celeste);
  box-shadow: 0 10px 28px rgba(62, 181, 231, .25);
}

/* Aclaración del período, chiquita, debajo de la frase de la sección */
.proy-periodo {
  margin-top: .625rem;
  font-size: .8125rem;
  letter-spacing: .02em;
}

/* Barra superior del carrusel: página y flechas */
.proy-carrusel__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.proy-carrusel__pagina {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.proy-carrusel__flechas { display: flex; gap: .625rem; }
.proy-flecha {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--azul-profundo);
  background: transparent;
  color: var(--azul-profundo);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              opacity .25s var(--ease), transform .25s var(--ease);
}
.proy-flecha svg { width: 22px; height: 22px; }
.proy-flecha:hover:not(:disabled) {
  background: var(--azul-profundo);
  color: var(--blanco);
  transform: translateY(-2px);
}
.proy-flecha:disabled { opacity: .3; cursor: default; }

/* Tarjeta de proyecto */
.proy-card { display: flex; flex-direction: column; }
.proy-card__pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.proy-card__titulo { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.35; }
.proy-card__desc { margin-top: .75rem; margin-bottom: 1.5rem; font-size: .9375rem; line-height: 1.6; }
.proy-card__firma {
  margin-top: auto;
  align-self: flex-start;
  padding: .8rem 1.6rem;
  font-size: .75rem;
}

/* Número de expediente provincial: va al pie de la tarjeta, en letra chica */
.prov-card__exp {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--azul-medio);
}

/* Estados que no cubren las pastillas existentes */
.pill--presentado { background: rgba(34, 141, 196, .14); color: var(--azul-profundo); }
.pill--noaprobado { background: transparent; border-color: #A8B4BE; color: #5C6B78; }

/* Entrada suave al cambiar de página */
@keyframes proyEntra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.proy-grid--entra > .proy-card { animation: proyEntra .4s var(--ease) both; }
.proy-grid--entra > .proy-card:nth-child(2) { animation-delay: .05s; }
.proy-grid--entra > .proy-card:nth-child(3) { animation-delay: .1s; }
.proy-grid--entra > .proy-card:nth-child(4) { animation-delay: .15s; }
.proy-grid--entra > .proy-card:nth-child(5) { animation-delay: .2s; }
.proy-grid--entra > .proy-card:nth-child(6) { animation-delay: .25s; }

@media (max-width: 640px) {
  .proy-carrusel__barra { flex-wrap: wrap; }
  .proy-flecha { width: 44px; height: 44px; }
}

/* ---------- CARRUSEL DE FICHAS (proyecto destacado) ----------
   Una ficha por vez: el resumen entra de a poco en vez de caerle encima al
   vecino de una. Se desplaza con scroll nativo, así el deslizar del celular
   funciona solo y las flechas son un agregado, no el único camino. */
.destacado-titulo { margin-top: .35rem; }

.info-carrusel { max-width: 64rem; }
.info-carrusel__pista {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.info-carrusel__pista::-webkit-scrollbar { display: none; }
.info-carrusel__pista:focus-visible { outline: 3px solid var(--celeste); outline-offset: 4px; }

.info-ficha {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--gris-claro);
  border-radius: var(--radius-lg);
  border-top: 5px solid var(--celeste);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  min-height: clamp(15rem, 26vw, 19rem);
  /* Todas las fichas miden lo mismo (la más larga manda), así que el texto
     corto se centra en vez de quedar colgado arriba. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Contador de fichas y, al lado, de qué parte del proyecto sale lo que se lee */
.info-ficha__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.info-ficha__paso {
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--azul-medio);
}
.info-ficha__ref {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--azul-profundo);
  background: rgba(62, 181, 231, .18);
  border-radius: 999px;
  padding: .25rem .7rem;
}
.info-ficha__titulo {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--azul-profundo);
  margin-block: .6rem .85rem;
}
.info-ficha__texto {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: #5C6B78;
  max-width: 62ch;
}

.info-carrusel__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}
.info-carrusel__puntos { display: flex; gap: .5rem; flex-wrap: wrap; }
.info-punto {
  width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: 50%;
  background: #C7D3DC;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.info-punto:hover { background: var(--celeste-claro); }
.info-punto.is-activo { background: var(--celeste); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .info-carrusel__pista { scroll-behavior: auto; }
  .info-punto { transition: none; }
}

/* ---------- TURNOS DE SALUD ----------
   Dos columnas del mismo alto: el posteo a la izquierda y, a la derecha, el
   carrusel con el botón fijo abajo. Las dos se estiran hasta la más alta, así
   la tapa del reel termina justo donde termina el botón. */
/* Más compacta que el resto: la sección abre la página y tiene que entrar
   de una en pantalla, sin obligar a bajar para ver de qué se trata. */
#turnos { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); }
.turnos__claim {
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.3vw, 2.5rem);
  line-height: 1.08;
}

.turnos {
  display: grid;
  /* minmax(0, …) en las dos: con 1fr pelado la columna toma el ancho del
     contenido del carrusel y en el celular se desborda de la pantalla. */
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: stretch;
}

/* La tapa es un reel: 9:16 y sin recortar (las de "Lo último" van en 4:5) */
.novedad--reel .novedad__media { aspect-ratio: 9 / 16; }

.turnos__lado { display: flex; flex-direction: column; gap: 1.25rem; }
.turnos__carrusel { flex: 1; display: flex; flex-direction: column; }
.turnos__carrusel .info-carrusel__pista { flex: 1; }
.turnos__carrusel .info-ficha { height: 100%; min-height: 0; }
.turnos__cta { flex: 0 0 auto; align-self: flex-start; }

.info-ficha--proyecto { border-top-color: var(--azul-profundo); }
.info-ficha__btn { margin-top: 1.5rem; align-self: flex-start; }

/* Tarjeta del posteo un poco más compacta que las de "Lo último" */
.novedad--reel .novedad__cuerpo { padding: .85rem 1rem 1rem; gap: .4rem; }
.novedad--reel .novedad__titulo { font-size: .9rem; line-height: 1.25; }
.novedad--reel .novedad__meta { font-size: .68rem; }
.novedad--reel .novedad__accion { font-size: .68rem; }
/* El encabezado pega menos abajo: la sección tiene que entrar en pantalla */
#turnos .section__head { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

@media (max-width: 900px) {
  .turnos { grid-template-columns: minmax(0, 1fr); }
  .novedad--reel { max-width: 16rem; margin-inline: auto; width: 100%; }
  .turnos__carrusel .info-ficha { min-height: 14rem; }
}