/* ==========================================================================
   Volquetes Bombita — v2/style.css (portada B · industrial)
   --------------------------------------------------------------------------
   Lenguaje: mayúsculas pesadas (Gabarito 800), cuerpo Archivo, líneas finas,
   divisores verticales, esquinas casi rectas. Azul noche + azul acento.

   Los tokens de :root y las reglas de header/hero/barra fija están COPIADOS
   en el <style> del <head> de index.html (CSS crítico). Si cambiás uno acá,
   cambialo también allá.

   2026-09-21: hay secciones apagadas en index.html (<template data-off>). Su CSS se
   deja intacto a propósito — galería (8), cinta de barrios (10), opiniones (14) y
   mapa (16) no se usan hoy y vuelven a servir apenas se saque el <template>.

   2026-09-21: "Servicios y cómo funciona" (antes 7) y "Trayectoria" (antes 13) se
   borraron enteras a pedido del cliente, HTML y CSS — no quedaron como <template
   data-off>: no son texto del recorte de contenido, son secciones completas fuera
   de la página. "Seguí con la obra" (antes 9) se había borrado antes, mismo criterio.
   La numeración del índice de abajo quedó con huecos a propósito, para no reordenar
   los bloques que sí quedan.

   Índice
     1. Fuentes y tokens        8. Galería                  15. FAQ
     2. Base                   10. Zonas y cinta            16. Contacto
     3. Utilidades y botones   11. Normas de carga          17. Footer, barra fija, WA
     4. Header y menú          12. (secciones y cabezas)    18. Movimiento y a11y
     5. Hero                   14. Opiniones
     6. Intro y confianza
   ========================================================================== */

/* 1. FUENTES Y TOKENS ---------------------------------------------------- */
/* Gabarito ExtraBold (800) va declarada con rango 400–900: es el único corte que
   servimos para los titulares, así que cualquier peso que pida el CSS cae en este
   archivo y el navegador no inventa una negrita sintética. */
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('assets/fonts/gabarito-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('assets/fonts/gabarito-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('assets/fonts/archivo-variable-latin.woff2') format('woff2'); }
@font-face { font-family: 'Kalam'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/kalam-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Paleta */
  --c-noche: #0F2438;      /* fondos oscuros, texto */
  --c-noche-2: #163149;    /* paneles sobre noche */
  --c-noche-3: #1E3D5A;
  --c-acento: #3FA9F5;     /* sólo sobre oscuro o como fondo */
  --c-acento-d: #2B93DD;
  --c-azul-txt: #0E6FB3;   /* el acento oscurecido: texto sobre claro (5.3:1) */
  --c-blanco: #FFFFFF;
  --c-hielo: #EEF3F8;
  --c-borde: #D5DEE7;
  --c-gris: #46617A;       /* texto secundario sobre claro (6.4:1) */
  --c-gris-claro: #C9D6E2; /* texto secundario sobre oscuro (10:1) */
  --c-wa: #25D366;
  --c-wa-d: #1DA851;
  --c-error: #B42318;
  --l-dark: rgba(255,255,255,.16); /* líneas finas sobre oscuro */
  --l-light: var(--c-borde);       /* líneas finas sobre claro */

  /* Tipografía */
  --f-titulo: 'Gabarito', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --f-cuerpo: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-marca: 'Kalam', 'Bradley Hand', 'Segoe Print', cursive;
  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .9375rem;   /* 15 */
  --fs-base: 1.0625rem;/* 17 */
  --fs-md: 1.1875rem;  /* 19 */
  --fs-h1: clamp(1.95rem, 1rem + 4.5vw, 4rem);
  --fs-h2: clamp(1.85rem, 1.2rem + 2.6vw, 3.3rem);
  --fs-h2-largo: clamp(1.45rem, 1rem + 1.9vw, 2.5rem);
  --fs-stat: clamp(3rem, 2rem + 4vw, 5.5rem);
  --track: .16em;

  /* Espacio y forma */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --container: 78rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --r: 3px;
  --r-pill: 999px;
  --header-h: 64px;
  --sticky-h: 64px;

  /* Movimiento */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 600ms;
}
@media (min-width: 600px) { :root { --fs-base: 1.125rem; --header-h: 76px; } }

/* 2. BASE ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body { margin: 0; font-family: var(--f-cuerpo); font-size: var(--fs-base); line-height: 1.55; color: var(--c-noche); background: var(--c-blanco); -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px)); overflow-x: clip; }
@media (min-width: 900px) { body { padding-bottom: 0; } }
h1, h2, h3, h4 { margin: 0; }
h1, h2 { font-family: var(--f-titulo); font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h2 em, h1 em { font-style: normal; color: var(--c-acento); }
.section--claro h2 em, .section--hielo h2 em { color: var(--c-azul-txt); }
h3, h4 { font-family: var(--f-cuerpo); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; line-height: 1.25; }
h3 { font-size: 1.02rem; }
h4 { font-size: .95rem; }
p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
img, svg, picture { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-azul-txt); outline-offset: 3px; }
.section--noche :focus-visible, .site-header :focus-visible, .hero :focus-visible, .galeria :focus-visible, .sticky-bar :focus-visible, .site-footer :focus-visible, .nav-mobile :focus-visible { outline-color: var(--c-acento); }
::selection { background: var(--c-acento); color: var(--c-noche); }

/* 3. UTILIDADES Y BOTONES ------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 100; background: var(--c-acento); color: var(--c-noche); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-sm); padding: .8rem 1rem; text-decoration: none; }
.skip-link:focus { top: 1rem; }

.icon { width: 1.35em; height: 1.35em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }
.icon--fino { stroke-width: 1.35; }

/* La etiqueta de sección: número + rótulo en mayúsculas espaciadas, con una línea */
.eyebrow { display: flex; align-items: center; gap: .8rem; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track); color: var(--c-gris); margin-bottom: var(--s-4); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; flex: none; }
.eyebrow b { font-family: var(--f-titulo); font-weight: 400; color: var(--c-azul-txt); letter-spacing: 0; }
.section--noche .eyebrow { color: var(--c-gris-claro); }
.section--noche .eyebrow b { color: var(--c-acento); }
.section--acento .eyebrow, .section--acento .eyebrow b { color: var(--c-noche); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 52px; padding: .6rem 1.5rem; text-align: center; border-radius: var(--r-pill); font-family: var(--f-cuerpo); font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; white-space: normal; transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast); }
.header-cta .btn, .hero__cta .btn, .sticky-bar .btn, .wa-float { white-space: nowrap; }
.btn .icon { width: 22px; height: 22px; }
.btn-acento { background: var(--c-acento); color: var(--c-noche); }
.btn-noche { background: var(--c-noche); color: var(--c-blanco); }
.btn-blanco { background: var(--c-blanco); color: var(--c-noche); }
.btn-wa { background: var(--c-wa); color: var(--c-noche); }
.btn-outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-lg { min-height: 58px; padding: 0 1.9rem; font-size: var(--fs-base); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-row .btn { flex: 1 1 14rem; }
@media (min-width: 600px) { .btn-row .btn { flex: 0 1 auto; } }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn-acento:hover { background: var(--c-acento-d); }
  .btn-noche:hover { background: var(--c-noche-3); }
  .btn-blanco:hover { background: var(--c-hielo); }
  .btn-wa:hover { background: var(--c-wa-d); }
}
/* El glifo de WhatsApp dentro de un círculo (píldora del header y botón del hero) */
.wa-glifo { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--c-acento); color: var(--c-noche); }
.wa-glifo .icon { width: 16px; height: 16px; }
.btn-acento .wa-glifo { background: var(--c-noche); color: var(--c-blanco); }

/* 4. HEADER Y MENÚ --------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--c-noche); color: var(--c-blanco); transition: background var(--dur-base), box-shadow var(--dur-base); }
.js .site-header.is-top { background: transparent; }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--l-dark); }
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Logo de marca: imagen con fondo transparente, recortada justo a la tinta
   (assets/logo-bombita.webp). Ancho fijo y alto automático: los atributos
   width/height del <img> reservan el espacio, así no hay salto de layout, y
   el alto libre evita deformarlo. */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { width: 108px; height: auto; display: block; }
@media (min-width: 600px) { .brand__logo { width: 136px; } }

.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 1.7rem); }
.nav-desktop a { position: relative; text-decoration: none; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; padding-block: .6rem; color: var(--c-blanco); }
.nav-desktop a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2px; background: var(--c-acento); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .nav-desktop a:hover::after { transform: scaleX(1); } }
.header-cta { display: none; align-items: center; gap: .5rem; }
.header-cta .btn { min-height: 46px; padding: 0 1.1rem 0 .55rem; font-size: .78rem; gap: .55rem; }
/* Instagram al lado del botón de WhatsApp: sólo el ícono, para que no le compita. */
.header-ig { width: 44px; height: 44px; display: grid; place-items: center; flex: none; color: var(--c-blanco); border-radius: var(--r); transition: color var(--dur-fast), background var(--dur-fast); }
.header-ig .icon { width: 22px; height: 22px; }
@media (hover: hover) { .header-ig:hover { color: var(--c-acento); background: rgba(255,255,255,.08); } }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; color: var(--c-blanco); border-radius: var(--r); }
.icon-btn .icon { width: 26px; height: 26px; }
.icon-btn--tel { background: var(--c-acento); color: var(--c-noche); }
.icon-btn--ig { box-shadow: inset 0 0 0 1px var(--l-dark); }
.menu-toggle { box-shadow: inset 0 0 0 1px var(--l-dark); }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
@media (min-width: 1100px) { .nav-desktop { display: block; } .header-cta { display: flex; } .header-actions { display: none; } }

.nav-mobile { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; width: min(100%, 100vw); background: var(--c-noche); color: var(--c-blanco); padding: var(--s-6) var(--gutter) calc(var(--sticky-h) + var(--s-6)); display: none; flex-direction: column; gap: var(--s-6); overflow-y: auto; }
.nav-mobile.is-open { display: flex; }
.nav-mobile ul li a { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) 0; text-decoration: none; font-family: var(--f-titulo); font-size: 1.5rem; text-transform: uppercase; border-bottom: 1px solid var(--l-dark); }
.nav-mobile ul li a::after { content: ""; width: 10px; height: 10px; border-right: 1.5px solid var(--c-acento); border-top: 1.5px solid var(--c-acento); transform: rotate(45deg); }
.nav-mobile__cta { display: grid; gap: var(--s-3); }
.nav-mobile__cta .btn { border-radius: var(--r); }
.nav-mobile__redes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.nav-mobile__redes a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: .7rem 1rem; box-shadow: inset 0 0 0 1px var(--l-dark); }
.nav-mobile__redes .icon { width: 20px; height: 20px; }
.nav-mobile__meta { color: var(--c-gris-claro); font-size: var(--fs-sm); margin-top: var(--s-4); }
body.menu-open { overflow: hidden; }
@media (min-width: 1100px) { .nav-mobile { display: none !important; } }

/* 5. HERO ------------------------------------------------------------------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h); display: flex; flex-direction: column; overflow: hidden; color: var(--c-blanco); background: var(--c-noche); }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; }
@media (min-width: 900px) { .hero__media img { object-position: 55% 50%; } }
/* El video se monta encima del poster y aparece con un fundido cuando ya está
   reproduciendo. Mismo encuadre que la foto para que no se note el cambio. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 0; opacity: 0; transition: opacity .7s var(--ease-out); pointer-events: none; }
.hero__video.is-ready { opacity: 1; }
@media (min-width: 900px) { .hero__video { object-position: 55% 50%; } }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,36,56,.95) 0%, rgba(15,36,56,.86) 30%, rgba(15,36,56,.42) 58%, rgba(15,36,56,.2) 78%, rgba(15,36,56,.45) 100%), linear-gradient(180deg, rgba(15,36,56,.55) 0%, rgba(15,36,56,0) 22%); }
@media (max-width: 899px) {
  /* Encuadre del hero en celular. El video es 16:9 y el hero es vertical: al
     cubrir, el alto manda y sólo se recorta a lo ancho. A pantalla completa se
     ve apenas ~26% del ancho del video, y el Obelisco (x 50-55%) y el operario
     (x 83-95%) están a 45% de distancia: así NO entran los dos.
     La altura se ata al ANCHO (117vw) y no al alto del hero: de ese modo la
     ventana visible es del 48% en todos los teléfonos, no del 26%, y entran los
     dos. Medido en 9 modelos, de 320x568 a 430x932.
     El video sigue reproduciéndose; lo que cambia es cuánto se acerca.
     object-position 93% deja la ventana entre el 48% y el 96% del video: el
     Obelisco contra el borde izquierdo y el operario sobre el tercio derecho.
     El desplazamiento de top = alto del header baja la banda para que arranque
     justo debajo de la barra y no por detrás.
     La máscara funde el borde inferior con el azul del hero, así no se ve el
     corte de la banda (que cae entre el 53% y el 66% del alto según el modelo). */
  .hero__media, .hero__media img, .hero__video {
    top: var(--header-h); bottom: auto; height: min(117vw, 100%);
    object-position: 93% 50%;
  }
  .hero__media, .hero__video {
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 99%);
  }
  .hero__velo { background: linear-gradient(180deg, rgba(15,36,56,.78) 0%, rgba(15,36,56,.55) 28%, rgba(15,36,56,.62) 52%, rgba(15,36,56,.94) 78%); } }
.hero__cont { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); }
.hero__txt { max-width: 42rem; }
.hero__kicker { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track); color: var(--c-gris-claro); margin-bottom: 1.2rem; }
.hero h1 span { display: block; }
.hero__l2 { color: var(--c-acento); }
.hero__lead { font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem); line-height: 1.5; color: var(--c-gris-claro); max-width: 30ch; margin-top: 1.4rem; }
.hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__cta .btn { padding-left: .75rem; }
.hero__cta .wa-glifo { width: 32px; height: 32px; }
.hero__cta .wa-glifo .icon { width: 18px; height: 18px; }
.hero__firma { font-family: var(--f-marca); font-weight: 700; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.4rem); line-height: 1.05; text-align: right; width: 100%; margin-top: 2rem; position: relative; padding-bottom: .55em;
  /* La frase cae sobre el lateral del volquete, que ya tiene letras blancas:
     sin esta sombra las dos se pisan y no se lee ninguna. */
  text-shadow: 0 1px 3px rgba(15,36,56,.55), 0 8px 28px rgba(15,36,56,.85); }
.hero__firma svg { position: absolute; right: 0; bottom: 0; width: 8.4em; height: .55em; color: var(--c-acento); overflow: visible; }
@media (min-width: 900px) {
  .hero__cont { padding-block: clamp(3rem, 6vw, 5rem); }
  .hero__txt { max-width: 46rem; }
  .hero__lead { max-width: 34ch; }
  .hero__firma { position: absolute; width: auto; right: var(--gutter); bottom: clamp(1.5rem, 3vw, 2.5rem); margin: 0; transform: rotate(-6deg); }
}
/* Franja inferior: cuatro datos con divisores verticales finos */
.hero__datos { position: relative; z-index: 3; background: var(--c-noche); border-top: 1px solid var(--l-dark); }
.datos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.datos li { display: flex; align-items: center; min-width: 0; gap: .85rem; padding: 1.05rem var(--s-3); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; line-height: 1.35; color: var(--c-gris-claro); }
.datos li span { min-width: 0; overflow-wrap: anywhere; }
.datos li strong { display: block; color: var(--c-blanco); font-weight: 700; }
.datos li:nth-child(even) { border-left: 1px solid var(--l-dark); }
.datos li:nth-child(n+3) { border-top: 1px solid var(--l-dark); }
.datos .icon { width: 28px; height: 28px; stroke-width: 1.4; color: var(--c-blanco); }
@media (min-width: 900px) {
  .datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .datos li { padding: 1.35rem var(--s-5); font-size: .76rem; }
  .datos li:nth-child(n+3) { border-top: 0; }
  .datos li:nth-child(n+2) { border-left: 1px solid var(--l-dark); }
  .datos .icon { width: 32px; height: 32px; }
}
.js .hero [data-entra] { opacity: 0; transform: translateY(14px); }
.js .hero.is-in [data-entra] { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .hero.is-in [data-entra="2"] { transition-delay: 90ms; }
.js .hero.is-in [data-entra="3"] { transition-delay: 180ms; }
.js .hero.is-in [data-entra="4"] { transition-delay: 270ms; }
.js .hero.is-in [data-entra="5"] { transition-delay: 380ms; }
@media (min-width: 900px) { .js .hero.is-in .hero__firma { transform: rotate(-6deg); } }

/* 12. SECCIONES Y CABEZAS -------------------------------------------------- */
.section { padding-block: var(--section-y); }
/* Dos secciones seguidas con el MISMO fondo suman sus dos paddings y, al no
   haber cambio de color que lo justifique, se lee como un hueco vacío (medido:
   240 px entre Normas y FAQ a 1440 px). Se recorta el de arriba de la segunda. */
.section--hielo + .section--hielo,
.section--claro + .section--claro,
.section--noche + .section--noche { padding-top: calc(var(--section-y) * .35); }
.section--claro { background: var(--c-blanco); }
.section--hielo { background: var(--c-hielo); }
.section--noche { background: var(--c-noche); color: var(--c-blanco); }
.section--noche .lead { color: var(--c-gris-claro); }
.section--acento { background: var(--c-acento); color: var(--c-noche); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head h2 { margin-bottom: var(--s-4); }
.section-head .lead + .lead { margin-top: var(--s-4); }
.h2--largo { font-size: var(--fs-h2-largo); line-height: 1.08; }
.lead { font-size: var(--fs-md); color: var(--c-gris); max-width: 40rem; }
.section-cta { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--l-light); }
.section--noche .section-cta { border-color: var(--l-dark); }
.section-cta p { font-weight: 600; flex: 1 1 18rem; }
.tile { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 1px solid var(--c-noche); color: var(--c-noche); border-radius: var(--r); }
.tile .icon { width: 24px; height: 24px; stroke-width: 1.5; }
.tile--lleno { background: var(--c-noche); color: var(--c-blanco); }
.tile--acento { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-noche); }
.section--noche .tile { border-color: var(--l-dark); color: var(--c-acento); }
.section--acento .tile { border-color: var(--c-noche); }

/* 6. QUIÉNES SOMOS -------------------------------------------------------- */
.intro__grid { display: grid; gap: var(--s-6); }
.intro__txt { display: grid; gap: var(--s-4); color: var(--c-gris); font-size: var(--fs-md); max-width: 40rem; }
@media (min-width: 900px) { .intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; } .intro__txt { border-left: 1px solid var(--l-light); padding-left: var(--s-6); } }

/* 2026-09-21: acá vivía .destacados, una fila de cuatro datos bajo "Quiénes
   somos". Se eliminó: repetía la lectura de la franja del hero (.datos). Los
   cuatro datos viven ahora sólo ahí. No volver a crear una fila equivalente. */

/* 8. GALERÍA (carrusel) ------------------------------------------------------ */
.galeria { padding-block: var(--section-y) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.galeria__head { display: grid; gap: var(--s-4); margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.galeria__titulo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.galeria h2 { max-width: 18ch; }
.galeria__hint { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--c-gris-claro); display: flex; align-items: center; gap: .5rem; }
.galeria__hint span { display: inline-block; animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.galeria__track {
  --card-h: clamp(280px, 40vh, 420px);   /* tarjetas más chicas: la foto acompaña, no manda */
  display: flex; align-items: center; gap: clamp(.6rem, 1.2vw, 1rem);
  height: var(--card-h);
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
}
.galeria__track::-webkit-scrollbar { display: none; }
.galeria__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.galeria__track.is-dragging .galeria__card { pointer-events: none; }
.galeria__card { position: relative; flex: none; scroll-snap-align: start; border-radius: var(--r); overflow: hidden; background: var(--c-noche-2); border: 1px solid var(--l-dark); }
.galeria__card img { width: 100%; height: 100%; object-fit: cover; }
.galeria__card--v { height: 100%; aspect-ratio: 9 / 16; }
.galeria__card--h { height: 72%; aspect-ratio: 16 / 9; }
.galeria__foot { display: flex; align-items: center; gap: var(--s-6); margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.galeria__progress { flex: 1; height: 2px; background: var(--l-dark); overflow: hidden; }
.galeria__progress span { display: block; height: 100%; width: 12%; background: var(--c-acento); transition: width .15s linear; }
.galeria__nav { display: none; gap: .5rem; }
.galeria__btn { width: 48px; height: 48px; border: 1px solid var(--l-dark); color: #fff; display: grid; place-items: center; transition: background var(--dur-fast), border-color var(--dur-fast); border-radius: var(--r); }
.galeria__btn .icon { width: 22px; height: 22px; }
@media (hover: hover) { .galeria__btn:hover { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-noche); } }
@media (min-width: 900px) { .galeria__nav { display: flex; } }
@media (max-width: 899px) {
  .galeria__track { --card-h: min(46vh, 380px); }
  .galeria__card--h { height: auto; width: 86vw; max-width: 620px; }
  .galeria__card--v { height: 100%; width: auto; }
}

/* 10. ZONAS Y CINTA ------------------------------------------------------------ */
.zonas__layout { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .zonas__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .zonas__layout > div:last-child { border-left: 1px solid var(--l-light); padding-left: var(--s-7); } }
.barrios { font-size: var(--fs-md); line-height: 1.85; color: var(--c-gris); max-width: 44rem; }
.barrios li { display: inline; }
.barrios li::after { content: " · "; color: var(--c-borde); }
.barrios li:last-child::after { content: ""; }
.barrios .rapida { color: var(--c-noche); font-weight: 700; }
.barrios .rapida::before { content: ""; display: inline-block; width: .5em; height: .5em; background: var(--c-acento); margin-right: .35em; vertical-align: .1em; }
.zonas__leyenda { margin-top: var(--s-5); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--c-gris); display: flex; gap: .6em; align-items: center; }
.zonas__leyenda::before { content: ""; width: .7em; height: .7em; background: var(--c-acento); flex: none; }
.zonas__base { margin-top: var(--s-6); padding: var(--s-5); border: 1px solid var(--l-light); display: flex; gap: var(--s-4); align-items: flex-start; }
.zonas__base p { color: var(--c-gris); font-size: var(--fs-sm); }
.zonas__base strong { display: block; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35em; }

.cinta { margin-top: clamp(3rem, 6vw, 5rem); padding-block: var(--s-4); border-block: 1px solid var(--l-light); overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta:empty { display: none; }
.cinta__pista { display: inline-flex; animation: cinta 80s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__item { display: inline-flex; align-items: center; gap: 1.4rem; padding-inline: .7rem; font-family: var(--f-titulo); text-transform: uppercase; font-size: clamp(1rem, .9rem + .5vw, 1.35rem); color: var(--c-noche); }
.cinta__item::after { content: ""; width: 1px; height: 1em; background: var(--c-acento); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* 11. NORMAS DE CARGA ---------------------------------------------------------- */
.normas__zoom { display: block; position: relative; border: 1px solid var(--l-light); border-radius: var(--r); overflow: hidden; background: var(--c-blanco); }
.normas img { width: 100%; height: auto; display: block; }
.normas__hint { position: absolute; right: .6rem; bottom: .6rem; background: var(--c-noche); color: #fff; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: .5rem .75rem; }
@media (min-width: 900px) { .normas__hint { display: none; } }
.normas figcaption { margin-top: var(--s-4); font-size: var(--fs-md); color: var(--c-gris); max-width: 52rem; }

/* 14. OPINIONES ------------------------------------------------------------------ */
.opiniones__invite { display: grid; gap: var(--s-5); align-items: center; background: var(--c-blanco); border: 1px solid var(--l-light); padding: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 900px) { .opiniones__invite { grid-template-columns: 1fr auto; } }
.opiniones__invite p { color: var(--c-gris); max-width: 36rem; }
.opiniones__invite p strong { color: var(--c-noche); display: block; font-size: var(--fs-md); margin-bottom: .3em; }
.estrellas { display: inline-flex; gap: 2px; color: var(--c-azul-txt); margin-bottom: var(--s-3); }
.estrellas .icon { width: 22px; height: 22px; }
.testimonios { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 900px) { .testimonios { grid-template-columns: repeat(3, 1fr); } }
.testimonio { background: var(--c-blanco); border: 1px solid var(--l-light); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.testimonio blockquote { font-size: var(--fs-md); line-height: 1.45; }
.testimonio figcaption { color: var(--c-gris); font-size: var(--fs-sm); margin-top: auto; }
.testimonio figcaption strong { color: var(--c-noche); display: block; }

/* 15. PREGUNTAS FRECUENTES -------------------------------------------------------- */
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--l-light); }
.faq details:last-child { border-bottom: 1px solid var(--l-light); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font-weight: 700; font-size: var(--fs-md); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; margin-top: .05em; border: 1px solid var(--c-noche); background-image: linear-gradient(var(--c-noche), var(--c-noche)), linear-gradient(var(--c-noche), var(--c-noche)); background-size: 12px 1.5px, 1.5px 12px; background-position: center; background-repeat: no-repeat; transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--c-acento); }
.faq__body { padding: 0 3rem var(--s-5) 0; color: var(--c-gris); }
.faq__body p + p { margin-top: var(--s-3); }

/* 16. CONTACTO, FORMULARIO Y MAPA -------------------------------------------------- */
.contacto__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
@media (min-width: 900px) { .contacto__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.vias { display: grid; border-top: 1px solid var(--l-light); }
.via { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--l-light); text-decoration: none; color: inherit; }
.via--wa .tile { background: var(--c-wa); border-color: var(--c-wa); color: var(--c-noche); }
.via--tel .tile { background: var(--c-noche); color: var(--c-blanco); }
.via > span:not(.tile) { display: block; min-width: 0; flex: 1 1 0; }
.via__label { display: block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--c-gris); }
.via__valor { display: block; font-family: var(--f-titulo); font-size: 1.15rem; letter-spacing: -.005em; overflow-wrap: anywhere; word-break: break-word; }
.via--mail .via__valor { font-family: var(--f-cuerpo); font-weight: 700; font-size: var(--fs-base); }
.via--info .via__valor { font-family: var(--f-cuerpo); font-weight: 700; }
@media (hover: hover) { a.via:hover .via__valor { color: var(--c-azul-txt); } }
.redes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.redes a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: .75rem 1rem; border: 1px solid var(--l-light); }
.redes .icon { width: 20px; height: 20px; }

.form-panel { background: var(--c-blanco); border: 1px solid var(--l-light); padding: clamp(1.5rem, 4vw, 2.5rem); }
.form-panel h3 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: -.005em; font-size: 1.4rem; line-height: 1.05; margin-bottom: var(--s-2); }
.form-panel > p { color: var(--c-gris); margin-bottom: var(--s-5); }
.form-grid { display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .4rem; }
.field label small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--c-gris); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: .75rem .9rem; font-size: var(--fs-base); background: var(--c-hielo); border: 1.5px solid var(--l-light); border-radius: var(--r); transition: border-color var(--dur-fast), background var(--dur-fast); }
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-noche); background: var(--c-blanco); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230F2438' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.5rem; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--c-error); }
.field__error { display: none; color: var(--c-error); font-size: var(--fs-sm); font-weight: 600; margin-top: .35rem; }
.field.is-invalid .field__error { display: block; }
.form-actions { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.form-actions .btn { border-radius: var(--r); }
.form-actions small { color: var(--c-gris); font-size: var(--fs-sm); }
.form-msg { display: none; margin-top: var(--s-5); padding: var(--s-4) var(--s-5); font-weight: 600; border-radius: var(--r); }
.form-msg.is-ok { display: block; background: #E6F4EA; color: #14532D; border: 1px solid #A7D7B4; }
.form-msg.is-error { display: block; background: #FCE8E6; color: #7F1D1D; border: 1px solid #F1B0AC; }
.form-msg .btn { margin-top: var(--s-3); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mapa { margin-top: var(--s-7); }
.mapa__facade { position: relative; aspect-ratio: 4 / 3; min-width: 0; overflow: hidden; border: 1px solid var(--l-light); border-radius: var(--r); background-color: #E4ECF3; background-image: linear-gradient(rgba(15,36,56,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(15,36,56,.08) 1px, transparent 1px), linear-gradient(rgba(15,36,56,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,36,56,.04) 1px, transparent 1px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; display: grid; place-items: center; }
.mapa__facade::before, .mapa__facade::after { content: ""; position: absolute; background: var(--c-blanco); opacity: .9; }
.mapa__facade::before { left: 0; right: 0; top: 50%; height: 18px; transform: translateY(-50%) rotate(-6deg) scaleX(1.2); }
.mapa__facade::after { top: 0; bottom: 0; left: 50%; width: 18px; transform: translateX(-50%) rotate(14deg) scaleY(1.3); }
.mapa__pin { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-3); text-align: center; padding: var(--s-4); }
.mapa__pin .tile { width: 56px; height: 56px; }
.mapa__pin .tile .icon { width: 28px; height: 28px; }
.mapa__pin strong { font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.1rem; }
.mapa__pin span { color: var(--c-gris); font-size: var(--fs-sm); }
.mapa__pin .btn { border-radius: var(--r); }
.mapa iframe { width: 100%; aspect-ratio: 4 / 3; min-width: 0; border: 0; display: block; }
@media (min-width: 900px) { .mapa__facade, .mapa iframe { aspect-ratio: 16 / 7; } }
.mapa__link { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--c-gris); }

/* 17. FOOTER, BARRA FIJA, WA FLOTANTE ------------------------------------------------ */
.site-footer { background: var(--c-noche); color: var(--c-gris-claro); border-top: 1px solid var(--l-dark); font-size: var(--fs-sm); }
.site-footer .container { padding-block: var(--s-8) var(--s-6); display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .site-footer .container { grid-template-columns: 1.4fr 1fr 1fr; } .site-footer .container > :nth-child(2), .site-footer .container > :nth-child(3) { border-left: 1px solid var(--l-dark); padding-left: var(--s-6); } }
.site-footer h2 { font-family: var(--f-cuerpo); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--track); color: var(--c-blanco); margin-bottom: var(--s-4); }
.site-footer p { max-width: 30rem; margin-top: var(--s-4); }
.site-footer__claim { font-family: var(--f-titulo); text-transform: uppercase; font-size: 1.5rem; line-height: 1; color: var(--c-acento); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--c-blanco); }
.site-footer address { display: grid; gap: .4rem; }
.site-footer address strong { color: var(--c-blanco); }
.site-footer ul { display: grid; gap: .5rem; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--l-dark); padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); font-size: var(--fs-xs); }
.site-footer .legal p { margin: 0; max-width: none; }

.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; width: min(100%, 100vw); height: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px)); contain: layout; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--c-noche); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-acento); transition: transform var(--dur-base) var(--ease-out); }
.sticky-bar .btn { min-height: calc(var(--sticky-h) - 12px); padding-inline: .75rem; border-radius: var(--r); font-size: .9rem; }
.sticky-bar.is-hidden { transform: translateY(110%); }
@media (min-width: 900px) { .sticky-bar { display: none; } }

.wa-float { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60; display: none; align-items: center; gap: .75rem; height: 60px; padding: 0 1.25rem 0 .85rem; border-radius: var(--r-pill); background: var(--c-wa); color: var(--c-noche); text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-sm); box-shadow: 0 10px 30px rgba(15,36,56,.3); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.wa-float .icon { width: 32px; height: 32px; }
.wa-float span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width var(--dur-base) var(--ease-out), opacity var(--dur-base); }
.wa-float:hover span, .wa-float:focus-visible span { max-width: 14rem; opacity: 1; }
.wa-float:hover { background: var(--c-wa-d); transform: translateY(-2px); }
@media (min-width: 900px) { .wa-float { display: inline-flex; } }

/* El ancla de Contacto cae más abajo a propósito: con el desplazamiento normal
   el titular quedaba a media pantalla y los canales de contacto no entraban.
   El margen negativo empuja el aterrizaje sin mover la sección. */
#contacto { scroll-margin-top: -90px; }
@media (min-width: 900px) { #contacto { scroll-margin-top: -150px; } }

/* === Páginas de guía === (v2/<slug>/, generadas por v2/barrios/generar.js)
   Texto largo para leer: una sola columna, medida cómoda, sin adornos. */
.guia { max-width: 44rem; }
.guia > * + * { margin-top: var(--s-4); }
.guia h2 { font-family: var(--f-titulo); font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); line-height: 1.15; margin-top: var(--s-7); }
.guia h2:first-child { margin-top: 0; }
.guia h2 em { font-style: normal; color: var(--c-azul-txt); }
.guia h3 { font-size: var(--fs-md); font-weight: 700; margin-top: var(--s-5); }
.guia p, .guia li { color: var(--c-gris); }
.guia strong { color: var(--c-noche); }
.guia ul, .guia ol { padding-left: 1.2em; display: grid; gap: .5rem; }
.guia li::marker { color: var(--c-acento); }
.guia table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.guia th, .guia td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--l-light); vertical-align: top; }
.guia th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-noche); }
.guia .dato { border-left: 3px solid var(--c-acento); padding: var(--s-3) var(--s-4); background: var(--c-hielo); }
.guia .dato p { color: var(--c-noche); }
.guia__fecha { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--c-gris-claro); margin-top: var(--s-4); }
.fuentes { font-size: var(--fs-sm); }
.fuentes ol { padding-left: 1.2em; display: grid; gap: .5rem; color: var(--c-gris); max-width: 52rem; }

/* === Páginas de barrio === (v2/volquetes-en-<slug>/, generadas por v2/barrios/generar.js)
   Todo lo demás lo reutilizan de arriba: .hero, .datos, .intro__grid, .section-head,
   .faq, .vias, .form-panel, .barrios, .tile. Acá sólo lo que no existía. */
.miga ol { display: flex; flex-wrap: wrap; gap: .45em; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--c-gris); margin-bottom: var(--s-6); }
.miga li { display: inline; }
.miga li + li::before { content: "›"; margin-right: .45em; color: var(--c-borde); }
.miga a { text-decoration: none; }
.miga a:hover { color: var(--c-azul-txt); text-decoration: underline; }
.miga [aria-current] { color: var(--c-noche); }
.donde { display: grid; max-width: 46rem; border-top: 1px solid var(--l-light); }
.donde li { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-4) 0; border-bottom: 1px solid var(--l-light); }
.donde strong { display: block; margin-bottom: .2rem; }
.donde p { color: var(--c-gris); font-size: var(--fs-sm); }
.cercanos { padding-block: var(--s-6); border-top: 1px solid var(--l-light); }
.cercanos .eyebrow { margin-bottom: var(--s-3); }
.cercanos .barrios { max-width: none; font-size: var(--fs-base); }
.cercanos .barrios a { color: var(--c-noche); font-weight: 600; text-decoration: none; }
.cercanos .barrios a:hover { color: var(--c-azul-txt); text-decoration: underline; }
.cercanos .barrios a, .comunas .barrios a { display: inline-block; padding: .3em 0; }
/* Los nombres de dos palabras no se parten a mitad ("La / Paternal").
   Requiere que los <li> vengan separados por espacio en el HTML: si no, no hay
   dónde cortar la línea y la lista se sale del ancho. */
.cercanos .barrios li { white-space: nowrap; }
.hub-head { margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + var(--s-6)); }
.hub-head .miga--oscura, .hub-head .miga--oscura a { color: var(--c-gris-claro); }
.hub-head .miga--oscura [aria-current] { color: #fff; }
.hub-head .miga li + li::before { color: var(--c-gris); }
.hub-head h1 { font-size: clamp(1.9rem, 1rem + 3.4vw, 3.4rem); line-height: 1.05; max-width: 20ch; margin-bottom: var(--s-4); }
.hub-head h1 em { font-style: normal; color: var(--c-acento); }
.hub-head .lead { max-width: 60ch; color: var(--c-gris-claro); margin-bottom: var(--s-5); }
.comunas { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.comuna h3 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--c-azul-txt); margin-bottom: var(--s-2); padding-bottom: var(--s-2); border-bottom: 1px solid var(--l-light); }
.comuna .barrios { font-size: var(--fs-base); max-width: none; }
.comuna .barrios li { display: block; }
.comuna .barrios li::after { content: ""; }
.comuna .barrios a { color: var(--c-noche); font-weight: 600; text-decoration: none; }
.comuna .barrios a:hover { color: var(--c-azul-txt); text-decoration: underline; }

/* 18. MOVIMIENTO Y ACCESIBILIDAD ---------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.js [data-reveal-group] > * { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
.js [data-reveal-group].is-visible > :nth-child(2) { transition-delay: 60ms; }
.js [data-reveal-group].is-visible > :nth-child(3) { transition-delay: 120ms; }
.js [data-reveal-group].is-visible > :nth-child(4) { transition-delay: 180ms; }
.js [data-reveal-group].is-visible > :nth-child(5) { transition-delay: 240ms; }
.js [data-reveal-group].is-visible > :nth-child(6) { transition-delay: 300ms; }

/* Sin content-visibility: el alto estimado (600px) no coincidía con el real
   (497px), y como el FAQ está justo encima de Contacto, esos 103px de diferencia
   descuadraban el aterrizaje del ancla #contacto. El ahorro no valía el bug. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal], .js [data-reveal-group] > *, .js .hero [data-entra] { opacity: 1; transform: none; }
  .js .hero .hero__firma { transform: none; }
  @media (min-width: 900px) { .js .hero .hero__firma { transform: rotate(-6deg); } }
  .cinta__pista { animation: none; }
  .galeria__hint span { animation: none; }
  .galeria__track { scroll-behavior: auto; }
}

@media print {
  .site-header, .sticky-bar, .wa-float, .nav-mobile, .mapa, .cinta, .galeria__foot { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
}
