/* ==========================================================================
   La Venta Central de Abasto — hoja de estilos
   Dirección: «La Estiba». Una sola audacia (el hero); el resto, disciplina.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --verde-noche: #0F4C24;
  --verde-medio: #2E8B3A;
  --verde-sombra: #0A3519;
  --rojo: #D3261B;
  --rojo-maduro: #A8160F;
  --dorado: #E8A317;
  --crema: #F4F1E8;
  --cal: #FFFFFF;
  --tinta: #12281B;
  --arena: #E6E0CF;

  --regla-dia: rgba(18, 40, 27, 0.22);
  --regla-noche: rgba(244, 241, 232, 0.18);

  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --cuerpo: 'Atkinson Hyperlegible Next', Arial, sans-serif;

  --t-hero: clamp(2.75rem, 13vw, 4rem);
  --t-pregon: clamp(2.2rem, 8vw, 6rem);
  --t-cierre: clamp(2.75rem, 12vw, 9rem);
  --t-cifra: clamp(3.5rem, 12vw, 10rem);
  --t-palabra: clamp(2.2rem, 7vw, 5.5rem);
  --t-fila: clamp(1.6rem, 4.5vw, 2.6rem);
  --t-pregon-panel: clamp(2.5rem, 5vw, 4.5rem);
  --t-cuerpo: 1.0625rem;
  --t-pequeno: 0.875rem;

  --gutter: 20px;
  --contenedor: 1200px;
  --barra-h: 56px;
  --barra-inferior-h: 56px;
  --seccion-y: clamp(72px, 12vw, 160px);

  --foco: var(--tinta);
  color-scheme: light;
}
@media (min-width: 600px) {
  :root { --t-hero: clamp(4rem, 10vw, 7.75rem); --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --barra-h: 64px; --t-cuerpo: 1.125rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
.entrada__marco picture, .comparador__figura picture, .tira__figura picture { height: 100%; }
img { height: auto; }
h1, h2, h3, p, dl, dd, dt, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
input { font: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
::selection { background: var(--dorado); color: var(--tinta); }

.contenedor { width: 100%; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--gutter); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--cal); color: var(--tinta); padding: 12px 16px; font-weight: 700; }
.saltar:focus { top: 8px; }

.cielo { position: fixed; inset: 0; z-index: -1; background: var(--verde-noche); pointer-events: none; opacity: 0; }
.js-cielo .cielo { opacity: 1; }

section, footer { scroll-margin-top: 0; }
@media (min-width: 1024px) { section, footer { scroll-margin-top: var(--barra-h); } }

/* Texto */
.cuerpo { max-width: 34em; }
.nota { font-size: var(--t-pequeno); line-height: 1.4; max-width: 40em; }
.pista { font-weight: 700; font-size: 0.9375rem; margin-top: 16px; }
.pregon {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--t-pregon);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--verde-noche);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
@media (min-width: 600px) { .pregon { text-shadow: 0.045em 0.045em 0 var(--dorado); } }
.pregon--trazo { position: relative; padding-bottom: 16px; }
.pregon--trazo::after { content: ''; display: block; width: 2.5em; height: 4px; background: var(--dorado); margin-top: 16px; }
.pregon--noche { color: var(--crema); }
@media (min-width: 600px) { .pregon--noche { text-shadow: 0.045em 0.045em 0 var(--verde-sombra); } }
.subpregon {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-fila);
  line-height: 1;
  color: var(--verde-noche);
  margin-top: 64px;
}
.pregon + .cuerpo, .pregon + .pista { margin-top: 24px; }
.cuerpo + .pista { margin-top: 24px; }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 22px;
  font-family: var(--cuerpo); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center; border: 2px solid transparent; border-radius: 0;
  transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear;
}
.boton--primario { background: var(--rojo); border-color: var(--rojo); color: var(--cal); }
.boton--primario:hover, .boton--primario:focus-visible { background: var(--rojo-maduro); border-color: var(--rojo-maduro); }
.boton--contorno { border-color: var(--tinta); color: var(--tinta); }
.boton--contorno:hover, .boton--contorno:focus-visible { background: rgba(18, 40, 27, 0.12); }
.boton--contorno-crema { border-color: var(--crema); color: var(--crema); }
.boton--contorno-crema:hover, .boton--contorno-crema:focus-visible { background: rgba(244, 241, 232, 0.14); }
.boton--crema { background: var(--crema); border-color: var(--crema); color: var(--rojo); }
.boton--crema:hover, .boton--crema:focus-visible { background: var(--cal); border-color: var(--cal); }
.boton--terciario { padding-inline: 0; border: 0; color: var(--verde-noche); text-decoration: underline; text-decoration-color: var(--dorado); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.boton--terciario:hover, .boton--terciario:focus-visible { color: var(--rojo-maduro); }
.boton[aria-disabled="true"], .barra-inferior__boton[aria-disabled="true"], .flotante[aria-disabled="true"], .menu__wa[aria-disabled="true"] {
  background: var(--arena); border-color: var(--arena); color: var(--tinta); cursor: not-allowed; pointer-events: none;
}
.glifo { flex: none; }

/* Placas: el logo solo se lee sobre claro */
.placa { display: inline-block; }
.placa--cal { background: var(--cal); padding: 6px 10px; }
.placa--crema { background: var(--crema); padding: 24px; }

/* Etiquetas de imagen */
.etiqueta {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
  padding: 7px 10px 6px;
}
.etiqueta--foto { background: var(--crema); color: var(--tinta); }
.etiqueta--conceptual { background: var(--dorado); color: var(--tinta); }

/* ---------- Barra ---------- */
.barra {
  position: relative; z-index: 50; height: var(--barra-h);
  color: var(--crema);
  transition: background-color 250ms linear, box-shadow 250ms linear;
}
.barra__interior { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--contenedor); margin-inline: auto; padding-inline: var(--gutter); }
.barra__logo { display: inline-block; flex: none; background: var(--cal); padding: 5px 8px; }
.barra__logo img { height: 36px; width: auto; }
.barra__nav { display: none; }
.barra__cta { display: none; }
.barra__menu { min-width: 44px; min-height: 44px; padding: 10px 12px; font-weight: 700; color: var(--crema); }
.barra--dia { background: var(--crema); color: var(--tinta); box-shadow: 0 1px 0 var(--regla-dia); }
.barra--dia .barra__menu { color: var(--tinta); }
@media (min-width: 1024px) {
  .barra { position: sticky; top: 0; }
  .barra__logo { padding: 6px 10px; }
  .barra__logo img { height: 44px; }
  .barra__menu { display: none; }
  .barra__nav { display: flex; gap: 18px; }
  .barra__nav a { position: relative; font-weight: 700; font-size: 14px; text-decoration: none; padding: 6px 0; white-space: nowrap; }
  .barra__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--dorado); transform: scaleX(0); transform-origin: left; transition: transform 150ms ease-out; }
  .barra__nav a:hover::after, .barra__nav a:focus-visible::after, .barra__nav a[aria-current="true"]::after { transform: scaleX(1); }
  .barra__cta { display: none; }
  .barra:not(.barra--dia) { --foco: var(--dorado); }
}
@media (min-width: 1280px) {
  .barra__nav { gap: 24px; }
  .barra__nav a { font-size: 15px; }
  .barra__cta { display: inline-flex; min-height: 44px; padding-block: 10px; white-space: nowrap; }
}

/* ---------- Hero: La Estiba ---------- */
.hero {
  position: relative;
  overflow-x: clip;
  background: var(--verde-noche);
  color: var(--crema);
  margin-top: calc(-1 * var(--barra-h));
  padding-top: var(--barra-h);
  min-height: 100svh;
  display: flex; flex-direction: column;
  --foco: var(--dorado);
}
.js-cielo .hero { background: transparent; }
@media (max-height: 559px) { .hero { min-height: 0; } }
.hero__luces { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--dorado); transform-origin: left; }
.hero__interior { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 10svh; padding-bottom: 48px; }
@media (min-width: 1024px) { .hero__interior { padding-top: 14svh; } }
.hero__localizadora { font-size: 15px; color: rgba(244, 241, 232, 0.72); margin-bottom: 20px; }
@media (min-width: 1024px) { .hero__localizadora { font-size: 16px; } }

.estiba { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-weight: 900; }
.caja {
  display: block; width: fit-content; max-width: 100%;
  font-family: var(--display); font-weight: 900; font-size: var(--t-hero); line-height: 0.88; letter-spacing: 0.005em; text-transform: uppercase;
}
.caja__txt {
  display: inline-block;
  line-height: 0.88;
  padding: 0.05em 0.12em 0.03em;
  max-width: 100%;
}
.caja--1 .caja__txt { background: var(--crema); color: var(--verde-noche); }
.caja--2 .caja__txt { background: var(--rojo); color: var(--crema); text-shadow: 0.045em 0.045em 0 var(--verde-sombra); }
.caja--3 .caja__txt { background: var(--verde-medio); color: var(--crema); text-shadow: 0.045em 0.045em 0 var(--verde-sombra); }
.caja--2 { margin-left: 8px; }
.caja--3 { margin-left: 4px; }
.caja + .caja { margin-top: 0.06em; }
.br-movil { display: inline; }
@media (min-width: 600px) {
  .br-movil { display: none; }
  .caja--2 { margin-left: 0.35em; }
  .caja--3 { margin-left: 0.12em; }
}
.hero__tarima { height: 3px; background: var(--dorado); margin-top: 18px; transform-origin: left; }
.hero__parrafo { max-width: 34em; margin-top: 28px; font-size: 1.125rem; line-height: 1.5; }
@media (min-width: 1024px) { .hero__parrafo { font-size: 1.1875rem; } }
.hero__acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.hero__acciones .boton { min-height: 52px; width: 100%; }
@media (min-width: 600px) {
  .hero__acciones { flex-direction: row; flex-wrap: wrap; }
  .hero__acciones .boton { width: auto; }
}
.hero__franja { border-top: 1px solid var(--regla-noche); font-weight: 700; font-size: 14px; color: rgba(244, 241, 232, 0.8); }
.hero__franja-interior { display: flex; flex-direction: column; gap: 4px; padding-block: 14px; }
@media (min-width: 600px) { .hero__franja-interior { flex-direction: row; justify-content: space-between; } }

/* ---------- Secciones de día ---------- */
.seccion--dia { background: var(--crema); position: relative; }
.seccion { padding-block: var(--seccion-y); }

/* ---------- Entrada ---------- */
.entrada__marco { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
@media (min-width: 600px) { .entrada__marco { aspect-ratio: auto; height: clamp(420px, 70vh, 720px); } }
.entrada__img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
@media (min-width: 1024px) { .entrada__img { object-position: 60% 50%; } }
.entrada__pie { padding-block: 14px; font-size: var(--t-pequeno); line-height: 1.4; }

/* ---------- Muro ---------- */
.muro { contain: paint; overflow-x: clip; }
.muro__filas { margin-top: 40px; display: flex; flex-direction: column; gap: 0.5em; font-size: var(--t-palabra); }
.muro__fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.6em; }
.palabra {
  font-family: var(--display); font-weight: 800; font-size: var(--t-palabra); line-height: 0.95;
  color: var(--verde-noche); border-bottom: 3px dotted var(--dorado); padding: 0.02em 0.04em 0.06em;
  transition: color 120ms linear, background-color 120ms linear;
  text-align: left;
}
.palabra:hover { color: var(--rojo); }
.palabra[aria-expanded="true"] { background: var(--rojo); color: var(--crema); border-bottom-color: transparent; text-shadow: 0.04em 0.04em 0 var(--verde-sombra); }
.muro__detalles { flex-basis: 100%; font-size: var(--t-cuerpo); line-height: 1.5; }
.detalle { padding-block: 4px 8px; max-width: 34em; }
.detalle[hidden] { display: none; }
.muro__servicios { margin-top: 48px; }

/* ---------- Tablero ---------- */
.tablero {
  position: relative; background: var(--verde-noche); color: var(--crema);
  padding-block: calc(var(--seccion-y) - 8px) var(--seccion-y);
  --foco: var(--dorado);
}
.zigzag {
  position: absolute; top: -1px; left: 0; right: 0; height: 24px;
  background: var(--crema);
  clip-path: polygon(0 0, 100% 0, 100% 2px, 98% 100%, 94% 2px, 90% 100%, 86% 2px, 82% 100%, 78% 2px, 74% 100%, 70% 2px, 66% 100%, 62% 2px, 58% 100%, 54% 2px, 50% 100%, 46% 2px, 42% 100%, 38% 2px, 34% 100%, 30% 2px, 26% 100%, 22% 2px, 18% 100%, 14% 2px, 10% 100%, 6% 2px, 2% 100%, 0 2px);
}
.tablero .pregon { margin-top: 32px; }
.tablero__filas { margin-top: 40px; border-top: 1px solid var(--regla-noche); }
.tablero__fila { position: relative; padding-block: 28px; display: grid; gap: 8px; }
.tablero__fila::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--regla-noche); transform-origin: left; }
@media (min-width: 1024px) { .tablero__fila { grid-template-columns: 5fr 7fr; align-items: baseline; gap: 24px; } }
.cifra {
  font-family: var(--display); font-weight: 800; font-size: var(--t-cifra); line-height: 0.9; color: var(--dorado);
  font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; letter-spacing: 0.005em;
  white-space: nowrap;
}
.cifra__conector { font-size: 0.45em; font-weight: 700; }
.cifra__sufijo { font-size: 0.6em; }
.tablero__fila dd { font-size: 1.125rem; line-height: 1.4; max-width: 30em; }
.tablero__fuente { margin-top: 24px; font-size: var(--t-pequeno); color: rgba(244, 241, 232, 0.7); }

/* ---------- Para quién ---------- */
.publicos__grid { display: grid; gap: 48px; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .publicos__grid { grid-template-columns: 7fr 5fr; align-items: start; }
  .publicos__panel { display: block !important; position: sticky; top: calc(var(--barra-h) + 32px); }
}
.publicos__panel { display: none; }
.panel { background: var(--cal); padding: 32px; min-height: 280px; overflow: hidden; }
.panel__pregon {
  font-family: var(--display); font-weight: 900; font-size: var(--t-pregon-panel); line-height: 0.92; text-transform: uppercase; color: var(--verde-noche);
  text-shadow: 0.04em 0.04em 0 var(--dorado); text-wrap: balance;
}
.panel__frase { margin-top: 20px; font-size: 1.0625rem; }
.filas { margin-top: 40px; border-top: 1px solid var(--regla-dia); }
.fila { border-bottom: 1px solid var(--regla-dia); }
.fila__titulo { font-family: var(--display); font-weight: 700; font-size: var(--t-fila); line-height: 1; }
.fila__boton {
  width: 100%; text-align: left; padding: 24px 40px 24px 0; position: relative;
  font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; color: var(--verde-noche);
  transition: color 120ms linear;
}
.fila__boton::after {
  content: ''; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transition: transform 200ms ease-out;
}
.fila__boton[aria-expanded="true"]::after { transform: translateY(-30%) rotate(225deg); }
.fila__boton:hover, .fila__boton:focus-visible, .fila.es-activa .fila__boton { color: var(--rojo); }
.fila__panel { overflow: hidden; }
.js .fila__panel:not(.es-abierto) { height: 0; }
.fila__contenido { padding-bottom: 28px; display: grid; gap: 20px; justify-items: start; }
.fila__contenido p { max-width: 34em; }
.fila__pregon-movil { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--rojo); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .fila__pregon-movil { display: none; } }
.fila__titulo-estatico { font-family: var(--display); font-weight: 700; font-size: var(--t-fila); line-height: 1; color: var(--verde-noche); }

.calculadora { width: 100%; max-width: 34em; display: grid; gap: 12px; padding: 20px; background: var(--cal); }
.calculadora__etiqueta { font-weight: 700; }
.calculadora__control { display: flex; align-items: center; gap: 16px; }
.calculadora__rango { flex: 1; -webkit-appearance: none; appearance: none; height: 28px; background: transparent; margin: 0; min-width: 0; }
.calculadora__rango::-webkit-slider-runnable-track { height: 4px; background: var(--verde-noche); }
.calculadora__rango::-moz-range-track { height: 4px; background: var(--verde-noche); }
.calculadora__rango::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; background: var(--rojo); border: 0; border-radius: 0; margin-top: -12px; cursor: pointer; }
.calculadora__rango::-moz-range-thumb { width: 28px; height: 28px; background: var(--rojo); border: 0; border-radius: 0; cursor: pointer; }
.calculadora__valor { font-family: var(--display); font-weight: 700; font-size: 1.5rem; min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.calculadora__salida { font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1.05; color: var(--verde-noche); }
.calculadora__secundaria { font-size: 1.0625rem; }

/* ---------- Directorio ---------- */
.directorio__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .directorio__grid { grid-template-columns: 6fr 6fr; gap: 48px; align-items: start; } }
.chips { display: flex; gap: 8px; margin-top: 28px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; }
.chip {
  flex: none; min-width: 44px; min-height: 44px; padding: 6px 12px; scroll-snap-align: start;
  font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1;
  border: 2px solid var(--tinta); color: var(--tinta);
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.chip[aria-pressed="true"] { background: var(--verde-medio); border-color: var(--verde-medio); color: var(--crema); }
.chip:hover:not([aria-pressed="true"]) { background: rgba(18, 40, 27, 0.08); }
.plano { width: 100%; height: auto; }
.plano--directorio { margin-top: 24px; max-height: 60vw; }
@media (min-width: 600px) { .plano--directorio { max-height: none; } }
.plano__predio { fill: none; stroke: var(--tinta); stroke-width: 1.5; }
.plano__calle { fill: var(--tinta); opacity: 0.16; }
.plano__hilera { fill: var(--verde-medio); opacity: 0.18; }
.plano__barra { fill: var(--verde-medio); fill-opacity: 0.35; stroke: var(--verde-noche); stroke-width: 1; transition: fill-opacity 120ms linear, fill 120ms linear, opacity 120ms linear; }
.plano__barra.es-activa { fill: var(--verde-medio); fill-opacity: 1; }
.plano--directorio.tiene-activa .plano__barra:not(.es-activa) { opacity: 0.35; }
.plano__libramiento { stroke: var(--dorado); stroke-width: 3; stroke-dasharray: 24 16; }
.plano__acceso { fill: var(--rojo); }
.plano__txt { font-family: var(--cuerpo); font-weight: 700; font-size: 14px; fill: var(--tinta); display: none; }
.plano__txt--via { font-weight: 400; fill: var(--verde-noche); }
@media (min-width: 600px) { .plano__txt { display: block; } }
.plano--mudo .plano__txt { display: none; }
.directorio .nota { margin-top: 12px; }
.buscador {
  width: 100%; height: 52px; padding: 0 16px; font-size: 1rem; background: var(--cal); border: 2px solid var(--tinta); border-radius: 0; color: var(--tinta);
  -webkit-appearance: none; appearance: none;
}
.buscador::placeholder { color: rgba(18, 40, 27, 0.6); }
.directorio__encabezado { font-family: var(--display); font-weight: 700; font-size: var(--t-fila); line-height: 1; color: var(--verde-noche); margin-top: 28px; padding-bottom: 12px; border-bottom: 1px solid var(--regla-dia); }
.directorio__estado { padding-block: 24px; display: grid; gap: 20px; justify-items: start; }
.directorio__estado p { max-width: 34em; }
.directorio__estado-titulo { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--rojo); text-transform: uppercase; }
.resultados { border-top: 1px solid var(--regla-dia); }
.resultados:empty { border-top: 0; }
.resultado { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--regla-dia); }
.resultado__num { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--verde-noche); min-width: 3.5ch; }
.resultado__nombre { font-weight: 700; }
.resultado__giro { display: block; font-size: 0.9375rem; }
.resultado__wa { font-weight: 700; text-decoration-color: var(--dorado); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Banda roja de locatarios ---------- */
.banda { background: var(--rojo); color: var(--cal); padding-block: clamp(80px, 12vw, 144px); --foco: var(--dorado); }
.banda__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .banda__grid { grid-template-columns: 8fr 4fr; align-items: center; } .banda__isotipo { justify-self: end; } }
.estiba--banda .caja { font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 0.92; }
@media (max-width: 599px) { .estiba--banda .caja { font-size: clamp(1.9rem, 8.5vw, 2.6rem); } }
.caja--banda .caja__txt { background: var(--crema); color: var(--rojo); }
.caja--banda-2 { margin-left: 0.2em; }
.banda__cuerpo { margin-top: 28px; max-width: 34em; font-size: 1.125rem; }
.banda__acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.banda__acciones .boton { min-height: 52px; }
@media (min-width: 600px) { .banda__acciones { flex-direction: row; flex-wrap: wrap; } }
.banda__operador { margin-top: 32px; font-weight: 700; font-size: 0.9375rem; }
.banda__frase { margin-top: 12px; color: var(--crema); font-size: 1.0625rem; max-width: 34em; }
.banda__isotipo .placa--crema { width: 180px; }
.banda__isotipo .placa--crema img { width: 100%; }
@media (min-width: 1024px) { .banda__isotipo .placa--crema { width: 260px; padding: 32px; } }

/* ---------- Cómo llegar ---------- */
.llegar__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .llegar__grid { grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; } }
.colindancias { display: grid; gap: 8px; margin-top: 28px; }
.colindancia { font-weight: 700; font-size: 14px; }
.marco {
  position: relative; aspect-ratio: 4 / 3; background: var(--crema); padding: 14px;
  --raya: repeating-linear-gradient(90deg, var(--dorado) 0 24px, transparent 24px 40px);
  --raya-v: repeating-linear-gradient(180deg, var(--dorado) 0 24px, transparent 24px 40px);
  background-image: var(--raya), var(--raya), var(--raya-v), var(--raya-v);
  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position: top left, bottom left, top left, top right;
  background-repeat: no-repeat;
}
.marco .plano { width: 100%; height: 100%; }
.marco iframe { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); border: 0; }
.pin { position: absolute; left: 50%; top: 50%; margin-left: -14px; margin-top: -40px; color: var(--rojo); }
@media (min-width: 600px) {
  .colindancias { grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; gap: 8px 12px; align-items: center; }
  .colindancia--norte { grid-column: 2; grid-row: 1; justify-self: center; }
  .colindancia--sur { grid-column: 2; grid-row: 3; justify-self: center; }
  .colindancia--poniente { grid-column: 1; grid-row: 2; writing-mode: vertical-rl; transform: rotate(180deg); }
  .colindancia--oriente { grid-column: 3; grid-row: 2; writing-mode: vertical-rl; }
  .marco { grid-column: 2; grid-row: 2; }
}
.llegar__mapa .nota { margin-top: 12px; }
.llegar__mapa .boton--terciario { margin-top: 12px; }
.llegar__datos { display: grid; gap: 0; }
@media (min-width: 1024px) { .llegar__datos { padding-top: calc(var(--t-pregon) * 0.92 + 28px); } }
.llegar__direccion { font-weight: 700; font-size: 1.125rem; }
.llegar__coordenadas { font-family: var(--display); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--verde-noche); margin-top: 8px; }
.llegar__botones { display: flex; flex-direction: column; gap: 12px; margin-block: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--regla-dia); }
.llegar__botones .boton { min-height: 52px; }
.llegar__fila { padding-block: 20px; border-bottom: 1px solid var(--regla-dia); display: grid; gap: 10px; }
.llegar__fila p { max-width: 34em; }

/* ---------- Modernización ---------- */
.moderno { padding-top: calc(var(--seccion-y) + 8px); }
.perforada {
  position: absolute; top: 0; left: 0; right: 0; height: 8px; background-color: var(--rojo);
  background-image: radial-gradient(circle, var(--crema) 1.2px, transparent 1.4px); background-size: 8px 8px; background-position: 4px 4px;
}
.comparadores { display: grid; gap: 32px; margin-top: 48px; }
@media (min-width: 600px) { .comparadores { grid-template-columns: 1fr 1fr; } }
.comparador { background: var(--cal); padding: 16px; display: grid; gap: 14px; }
.segmentado { display: inline-grid; grid-template-columns: 1fr 1fr; position: relative; border: 2px solid var(--verde-noche); width: 100%; max-width: 320px; isolation: isolate; }
.segmentado::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: var(--verde-noche); z-index: -1; transition: transform 200ms ease-out; }
.segmentado[data-activo="proyecto"]::before { transform: translateX(100%); }
.segmentado__boton { min-height: 44px; font-weight: 700; color: var(--verde-noche); transition: color 200ms linear; }
.segmentado__boton[aria-selected="true"] { color: var(--crema); }
.comparador__escena { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--arena); }
.comparador__figura { position: absolute; inset: 0; opacity: 0; transition: opacity 350ms linear; }
.comparador__figura.es-activa { opacity: 1; }
.comparador__figura[hidden] { display: block; visibility: hidden; }
.comparador__figura.es-activa[hidden] { visibility: visible; }
.comparador__figura img { width: 100%; height: 100%; object-fit: cover; }
.comparador__pie { font-size: var(--t-pequeno); }

.frentes { margin-top: 28px; border-top: 1px solid var(--regla-dia); }
@media (min-width: 600px) { .frentes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.frente { padding-block: 20px; border-bottom: 1px solid var(--regla-dia); display: grid; gap: 8px; }
.frente dt { font-family: var(--display); font-weight: 700; font-size: var(--t-fila); line-height: 1; color: var(--verde-noche); }
.frente dd { max-width: 30em; }

.etapas__linea { position: relative; margin-top: 28px; padding-top: 10px; }
.etapas__riel { height: 4px; background: var(--regla-dia); position: relative; }
.etapas__progreso { position: absolute; inset: 0; background: var(--verde-noche); transform-origin: left; transform: scaleX(1); }
.etapas__marcas { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -10px; }
.etapa { display: grid; justify-items: start; gap: 10px; }
.etapa:last-child { justify-items: end; text-align: right; }
.etapa__punto { width: 16px; height: 16px; background: var(--crema); border: 3px solid var(--verde-noche); transition: background-color 150ms linear; }
.etapa.es-encendida .etapa__punto { background: var(--dorado); }
.etapa__nombre { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--verde-noche); }
.etapas .nota { margin-top: 12px; }

.coinversion { margin-top: 24px; }
.coinversion .cuerpo { margin-top: 16px; }
.coinversion__barra { display: flex; height: 28px; margin-top: 24px; gap: 2px; }
.coinversion__segmento { flex: var(--parte) 1 0%; transform-origin: left; }
.coinversion__segmento--estado, .muestra--estado { background: var(--verde-noche); }
.coinversion__segmento--municipio, .muestra--municipio { background: var(--verde-medio); }
.coinversion__segmento--bodegas, .muestra--bodegas { background: var(--dorado); }
.coinversion__leyendas { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 16px; }
.coinversion__leyenda { display: flex; align-items: baseline; gap: 10px; }
.coinversion__leyenda dt { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.coinversion__leyenda dd { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--verde-noche); font-variant-numeric: tabular-nums; }
.muestra { width: 14px; height: 14px; display: inline-block; }

.tira { display: flex; gap: 16px; margin-top: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.tira__figura { position: relative; flex: none; width: 72vw; max-width: 520px; aspect-ratio: 3 / 2; overflow: hidden; scroll-snap-align: start; background: var(--arena); }
@media (min-width: 1024px) { .tira__figura { width: 32vw; } }
.tira__figura img { width: 100%; height: 100%; object-fit: cover; }
.moderno > .contenedor > .nota:last-child { margin-top: 24px; }

/* ---------- Pie ---------- */
.pie { position: relative; background: var(--verde-noche); color: var(--crema); padding-block: var(--seccion-y) calc(var(--seccion-y) + 72px); --foco: var(--dorado); }
.js-cielo .pie { background: transparent; }
@media (min-width: 1024px) { .pie { padding-bottom: var(--seccion-y); } }
.pregon--cierre { font-size: var(--t-cierre); line-height: 0.9; color: var(--crema); text-shadow: 0.045em 0.045em 0 var(--rojo); }
.pie__grid { display: grid; gap: 40px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--regla-noche); }
@media (min-width: 1024px) { .pie__grid { grid-template-columns: 4fr 8fr; gap: 48px; } }
.pie__logo img { height: 48px; width: auto; }
.pie__operador { margin-top: 16px; font-weight: 700; font-size: 1rem; }
.plano--pie { width: 120px; margin-top: 24px; --tinta: var(--dorado); --verde-medio: var(--dorado); --verde-noche: var(--dorado); opacity: 0.6; }
.plano--pie .plano__acceso { fill: var(--dorado); }
.contacto { display: grid; }
@media (min-width: 600px) { .contacto { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.contacto__fila { padding-block: 14px; border-bottom: 1px solid var(--regla-noche); display: grid; gap: 4px; }
.contacto__fila dt { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dorado); }
.contacto__fila dd { font-size: 1.0625rem; }
.contacto__fila a, .pie__nav a { text-decoration: none; position: relative; }
.contacto__fila a::after, .pie__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--dorado); transform: scaleX(0); transform-origin: left; transition: transform 150ms ease-out; }
.contacto__fila a:hover::after, .contacto__fila a:focus-visible::after, .pie__nav a:hover::after, .pie__nav a:focus-visible::after { transform: scaleX(1); }
.redes { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie__nav { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--regla-noche); font-weight: 700; font-size: 15px; }
@media (min-width: 600px) { .pie__nav { flex-direction: row; flex-wrap: wrap; gap: 10px 28px; } }
.pie__legal { margin-top: 32px; font-size: 13px; line-height: 1.5; color: rgba(244, 241, 232, 0.6); }

/* ---------- Barra inferior (celular y tablet) ---------- */
.barra-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--verde-noche); color: var(--crema);
  border-top: 1px solid var(--regla-noche);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 300ms ease-out;
  --foco: var(--dorado);
}
.barra-inferior.es-visible { transform: translateY(0); }
.no-js .barra-inferior, .reduce .barra-inferior { transform: none; }
.barra-inferior__boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--barra-inferior-h); font-weight: 700; font-size: 14px; text-decoration: none; padding: 8px; }
.barra-inferior__boton--llegar { background: var(--verde-medio); }
.barra-inferior.sin-wa { grid-template-columns: 1fr 1fr; }
.barra-inferior.sin-wa .barra-inferior__boton[aria-disabled="true"] { display: none; }
.barra-inferior__boton:hover { background: rgba(244, 241, 232, 0.12); }
.barra-inferior__boton--llegar:hover { background: #26782F; }
@media (min-width: 1024px) { .barra-inferior { display: none; } }

/* ---------- Flotante (escritorio) ---------- */
.flotante {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; display: none;
  width: 56px; height: 56px; align-items: center; justify-content: center;
  background: var(--verde-medio); color: var(--crema); text-decoration: none;
  transform: scale(0.8); opacity: 0; pointer-events: none;
}
.flotante.es-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.flotante[aria-disabled="true"] { display: none !important; }
.flotante:hover { background: #26782F; }
@media (min-width: 1024px) { .flotante { display: flex; } }
.no-js .flotante { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Menú móvil ---------- */
.menu {
  position: fixed; inset: 0; z-index: 70; background: var(--verde-sombra); color: var(--crema);
  overflow-y: auto; padding: 12px var(--gutter) 40px; display: flex; flex-direction: column; gap: 32px;
  --foco: var(--dorado);
}
.menu[hidden] { display: none; }
.menu__cabecera { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.menu__logo { padding: 5px 8px; }
.menu__logo img { height: 36px; width: auto; }
.menu__cerrar { min-width: 44px; min-height: 44px; padding: 10px 12px; font-weight: 700; }
.menu__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.12em; font-size: clamp(2rem, 12vw, 4.5rem); }
.menu__caja { display: block; width: fit-content; max-width: 100%; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: inherit; line-height: 0.9; text-transform: uppercase; }
.menu__caja .caja__txt { background: var(--crema); color: var(--verde-noche); padding: 0.08em 0.14em 0.04em; line-height: 0.9; }
.menu__caja:nth-child(even) { margin-left: 0.3em; }
.menu__wa { margin-top: auto; font-weight: 700; font-size: 1.0625rem; color: var(--crema); padding: 14px 0; text-decoration-color: var(--dorado); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.menu__wa[aria-disabled="true"] { text-decoration: none; padding: 14px 16px; }
@media (min-width: 1024px) { .menu { display: none !important; } }

/* ---------- Datos pendientes ---------- */
[data-vacio]:not([data-lleno]) { display: none !important; }

/* ---------- Estados iniciales de animación (solo cuando JS + sin reduced-motion) ---------- */
html.anim .hero__luces, html.anim .hero__tarima { transform: scaleX(0); }
html.anim .hero__localizadora, html.anim .hero__parrafo, html.anim .hero__franja { opacity: 0; }
html.anim .hero__acciones .boton { clip-path: inset(0% 100% 0% 0%); }
html.anim .hero .caja { will-change: transform; opacity: 0; }
html.anim .entrada__img { clip-path: inset(100% 0% 0% 0%); }
html.anim .tablero__fila:not(.es-pesada)::after { transform: scaleX(0); }
.tablero__fila::after { transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1); }
html.anim .fila { clip-path: inset(100% 0% 0% 0%); }
html.anim .colindancia { clip-path: inset(0% 100% 0% 0%); }
html.anim .colindancia--oriente, html.anim .colindancia--poniente { clip-path: inset(0% 0% 100% 0%); }
html.anim .pin { transform: translateY(-40px); opacity: 0; }
html.anim .coinversion__segmento { transform: scaleX(0); }
html.anim .coinversion__leyenda dd { opacity: 0; }
html.anim .etapas__progreso { transform: scaleX(0); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .js-cielo .hero, .js-cielo .pie { background: var(--verde-noche); }
  .cielo { display: none; }
  .barra { background: var(--crema); color: var(--tinta); box-shadow: 0 1px 0 var(--regla-dia); }
  .barra .barra__menu { color: var(--tinta); }
  .barra-inferior { transform: none; }
  .flotante { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- Impresión ---------- */
@media print {
  .barra, .barra-inferior, .flotante, .menu, .cielo { display: none !important; }
  .hero, .tablero, .pie { background: var(--verde-noche) !important; }
}

/* ---------- Proyecto nuevo: el protagonista ---------- */
.proyecto { position: relative; background: var(--verde-noche); color: var(--crema); padding-block: var(--seccion-y); --foco: var(--dorado); overflow-x: clip; }
.estiba--proyecto .caja { font-size: var(--t-pregon); line-height: 0.9; }
.caja--proyecto-1 .caja__txt { background: var(--crema); color: var(--verde-noche); }
.caja--proyecto-2 { margin-left: 0.3em; }
.caja--proyecto-2 .caja__txt { background: var(--rojo); color: var(--crema); text-shadow: 0.045em 0.045em 0 var(--verde-sombra); }
.proyecto__intro { margin-top: 28px; max-width: 34em; font-size: 1.125rem; }
.proyecto__video-marco { position: relative; margin-top: 48px; aspect-ratio: 1136 / 576; max-height: 82svh; width: 100%; background: var(--verde-sombra); overflow: hidden; }
.proyecto__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.proyecto__video-marco .etiqueta { left: 16px; bottom: 16px; }
.proyecto__controles { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; z-index: 2; }
.proyecto__boton { min-height: 44px; padding: 10px 14px; background: rgba(10, 53, 25, 0.82); color: var(--crema); font-weight: 700; font-size: 0.875rem; border: 2px solid var(--crema); transition: background-color 150ms linear; }
.proyecto__boton:hover, .proyecto__boton:focus-visible { background: var(--verde-noche); }
@media (max-width: 599px) {
  .proyecto__video-marco { aspect-ratio: 4 / 3; }
  .proyecto__controles { position: static; padding: 12px var(--gutter) 0; background: var(--verde-noche); }
  .proyecto__video-marco { overflow: visible; }
  .proyecto__video { aspect-ratio: 4 / 3; height: auto; }
  .proyecto__video-marco .etiqueta { bottom: auto; top: 12px; }
}
.proyecto__galeria { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 600px) { .proyecto__galeria { grid-template-columns: 1fr 1fr; } .proyecto__figura--grande, .proyecto__figura--ancha { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .proyecto__galeria { grid-template-columns: 2fr 1fr; }
  .proyecto__figura--grande { grid-column: 1; grid-row: 1 / span 2; }
  .proyecto__figura--ancha { grid-column: 1 / -1; }
}
.proyecto__figura { position: relative; overflow: hidden; background: var(--verde-sombra); aspect-ratio: 16 / 9; }
.proyecto__figura--grande { aspect-ratio: auto; min-height: 100%; }
.proyecto__figura picture { height: 100%; }
.proyecto__figura img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .proyecto__figura--ancha { aspect-ratio: 21 / 8; } }
.proyecto__pie { margin-top: 32px; display: grid; gap: 16px; justify-items: start; }
.proyecto__pie .boton { min-height: 52px; }
.proyecto__nota { font-size: var(--t-pequeno); color: rgba(244, 241, 232, 0.72); max-width: 40em; }
.js-cielo .proyecto { background: var(--verde-noche); }
html.anim .proyecto__video-marco { clip-path: inset(100% 0% 0% 0%); }
html.anim .proyecto__figura { clip-path: inset(100% 0% 0% 0%); }
@media (prefers-reduced-motion: reduce) { html.anim .proyecto__video-marco, html.anim .proyecto__figura { clip-path: none; } }