/* Villa Club 3 — sistema visual
   Editorial/arquitectónico: filete negro de 1px, etiquetas en mono versalita,
   secciones a pantalla completa, sin sombras ni esquinas redondeadas. */

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

/* Un `display` de clase gana al `display:none` que el navegador da a [hidden].
   Sin esto, poner el atributo no oculta nada y el visor se queda abierto. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1;    letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 0.98; letter-spacing: -0.03em; }
h3 { font-size: 21px; line-height: 1.2; }
p  { margin: 0; text-wrap: pretty; }

/* La etiqueta en mono versalita es la voz secundaria de todo el sistema */
.lbl {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.lbl--ink { color: var(--ink); }
.lbl--loose { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* Sección a pantalla completa, separada por filete */
.sec {
  scroll-margin-top: var(--head);
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sec--full { max-width: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* Ritmo de la página: las secciones alternan humo y blanco */
.sec--blanco { background: var(--surface); }
.sec--full > .wrap { padding-block: 80px; }

/* Cabecera de sección: etiqueta · título · apostilla, sobre un filete */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}
.sec-head h2 { margin-right: auto; }
.sec-head .lbl--right { font-size: 11px; font-weight: 400; letter-spacing: 0.08em; }

/* ── Barra de aviso urgente ─────────────────────────────── */
.aviso__tag {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 8px; background: #FFFFFF; color: var(--terracota);
}

/* ── Cabecera ───────────────────────────────────────────── */
.head {
  position: sticky; top: 0; z-index: 90;
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.head__in {
  max-width: var(--max); margin: 0 auto; padding: 14px var(--pad);
  display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
}
.brand { display: flex; gap: 12px; align-items: center; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand img { height: 38px; width: auto; }
.brand__n { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); }
.brand__s { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

.nav ul { display: flex; flex-wrap: wrap; gap: 8px 17px; list-style: none; margin: 0; padding: 0; }
.nav a {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a:hover { color: var(--ocre); }

.head__acc { display: flex; gap: 8px; flex-wrap: wrap; }
.wa {
  padding: 0 15px; min-height: 44px; display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
/* Trámites es la acción por la que un residente entra al sitio: va en sólido.
   WhatsApp es soporte, no autoservicio: queda en contorno. */
.wa--1 { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.wa--1:hover { background: var(--ink-3); border-color: var(--ink-3); color: var(--bg); text-decoration: none; }
.wa--2 { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.wa--2:hover { background: var(--surface-2); color: var(--ink); border-color: var(--rule); text-decoration: none; }

.nav-x { display: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rule); cursor: pointer; }

@media (max-width: 900px) {
  .nav-x { display: inline-flex; }
  .nav { display: none; width: 100%; order: 10; }
  /* Dentro de un header fijo, el menú abierto no puede desbordar la pantalla */
  .nav.is-open { display: block; max-height: calc(100vh - var(--head) - 20px); overflow-y: auto; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-top: 1px solid var(--line); }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  border-bottom: 1px solid var(--rule);
  min-height: calc(100vh - var(--head));
  /* En columna, no en fila: el hero pasó a tener dos hijos —la retícula y la
     franja— y con la dirección por defecto la franja se colocaba al costado del
     plano como si fuera una tercera columna. */
  display: flex; flex-direction: column; justify-content: center;
  scroll-margin-top: var(--head);
}
/* .wrap lleva margin:0 auto y en un contenedor flex los márgenes automáticos del
   eje transversal anulan el stretch: sin el ancho explícito la franja se encogía
   al ancho de su propio texto. */
.hero > .wrap { width: 100%; }
/* Columnas explícitas y no auto-fit: la franja es el tercer hijo y necesita
   cruzar las dos columnas con `1 / -1`, que con pistas colapsadas de auto-fit no
   apunta a donde uno cree. */
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; }
@media (min-width: 901px) {
  .hero__grid  { grid-template-columns: 1fr 1fr; }
  .hero__ahora { grid-column: 1 / -1; }
}
/* El padding bajó de 96/88 a 64/56: la franja tiene que caber en la primera
   pantalla de un portátil de 1366x768 sin obligar a desplazarse. */
.hero__txt { padding: 64px 64px 56px 0; display: flex; flex-direction: column; justify-content: center; }
.hero__txt h1 { max-width: 14ch; margin: 0 0 24px; }
.hero__txt .lbl { margin-bottom: 26px; }
.hero__txt p { max-width: 46ch; font-size: 17px; line-height: 1.85; color: var(--text); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero__plano { margin: 0; border-left: 1px solid var(--rule); padding: 32px 0 32px 44px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) {
  .hero__txt { padding: 40px 0 32px; }
  .hero__plano { border-left: none; border-top: 1px solid var(--rule); padding: 32px 0; }
  /* Manda el vecino que vuelve: lo que pasa hoy va antes que la lámina, que a
     390 px es decorativa —las letras de manzana quedan en puntos de 2 px—. */
  .hero__txt   { order: 1; }
  .hero__ahora { order: 2; }
  .hero__plano { order: 3; }
}
.plano__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }

/* Marco de lámina con escuadras en las esquinas */
.plano__frame { position: relative; padding: 16px; background: var(--surface); border: 1px solid var(--rule); }
.plano__frame::before, .plano__frame::after,
.plano__inner::before, .plano__inner::after {
  content: ""; position: absolute; width: 11px; height: 11px;
}
.plano__frame::before { left: 6px;  top: 6px;    border-left: 1px solid var(--muted); border-top: 1px solid var(--muted); }
.plano__frame::after  { right: 6px; top: 6px;    border-right: 1px solid var(--muted); border-top: 1px solid var(--muted); }
.plano__inner::before { left: 6px;  bottom: 6px; border-left: 1px solid var(--muted); border-bottom: 1px solid var(--muted); }
.plano__inner::after  { right: 6px; bottom: 6px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); }
.plano__inner { position: static; }
.plano__img { position: relative; background: #F2F2EF; border: 1px solid var(--line); }

.plano__leg { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.plano__leg span { display: flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.plano__leg i { width: 10px; height: 10px; display: block; }
.plano__leg .push { margin-left: auto; font-weight: 400; }
.plano__foot { margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ── Franja «lo que pasa ahora» ──────────────────────────
   Tres celdas de texto sobre un filete. Sin tarjetas, sin sombras y sin iconos:
   el sistema ya resuelve así los datos en .datos-lista y en .stats. */
.hero__ahora {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border-top: 1px solid var(--rule); margin-top: 8px;
}
.ahora {
  display: block; min-height: 96px; padding: 20px 24px 22px;
  border-left: 1px solid var(--line); color: inherit;
  transition: background 160ms ease;
}
.ahora:first-child { border-left: none; padding-left: 0; }
/* La fila entera es el enlace, no el titular: un objetivo de 96 px que solo
   responde en las tres palabras del medio miente sobre dónde hay que tocar. */
a.ahora:hover, a.ahora:focus-visible { background: var(--surface-3); text-decoration: none; }
.ahora .lbl { margin-bottom: 8px; }
.ahora__lbl--asam { color: var(--ocre); }
.ahora__t {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  line-height: 1.3; color: var(--ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ahora__p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ahora__cta { display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
a.ahora:hover .ahora__cta { color: var(--ink); }
.ahora--cifras .ahora__t { font-size: 17px; }

@media (max-width: 900px) {
  .ahora { border-left: none; border-top: 1px solid var(--line); padding: 18px 0 20px; }
  .ahora:first-child { border-top: none; }
}

/* En un portátil de 768 px de alto la franja se salía de la primera pantalla por
   26 px, y el SC-001 pide encontrar lo vigente sin desplazarse. Se recorta el
   aire solo en pantallas bajas; en las altas el hero conserva su respiración. */
@media (min-width: 901px) and (max-height: 820px) {
  .hero__txt      { padding-top: 32px; padding-bottom: 28px; }
  .hero__acciones { margin-top: 20px; }
  .hero__plano    { padding-top: 20px; padding-bottom: 20px; }
  .ahora          { min-height: 76px; padding-top: 14px; padding-bottom: 16px; }
}

/* ── Rejilla de artículos con imagen ────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 28px; }
.card__n { margin-bottom: 6px; }
.card h3 { margin-bottom: 6px; }
.card p { font-size: 15px; line-height: 1.7; color: var(--text); }

/* Lista numerada sin imagen, para "Nuestro trabajo" */
.rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 28px; }
.row { padding: 24px 0; border-top: 1px solid var(--line); }
.row h2,
.row h3 { font-size: 19px; margin-bottom: 6px; }
.row p { font-size: 15px; line-height: 1.7; color: var(--text); }

/* ── Comunicados ────────────────────────────────────────── */
.chip {
  display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 0 4px; background: none;
  border-bottom: 2px solid currentColor;   /* C-04: contorno inferior, nunca relleno */
}
.com { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; border-top: 1px solid var(--line); }
.com__d { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); }
.com h3 a { color: var(--ink); }
.com p { font-size: 15px; line-height: 1.7; color: var(--text); }

/* ── Juego ──────────────────────────────────────────────── */
.juego { background: var(--ink); color: var(--bg); }
.juego h2, .juego h3 { color: var(--bg); }
.juego p { color: var(--line); }
.juego .lbl { color: var(--faint); }
.juego .sec-head { border-bottom-color: var(--muted); }
.stats { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 40px; }
.stat b { display: block; font-family: var(--display); font-size: 42px; font-weight: 600; line-height: 1; }
.stat span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* ── Botón ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: background 160ms ease;
}
.btn:hover { background: var(--ink-3); color: var(--bg); text-decoration: none; }
.btn--inv { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.btn--inv:hover { background: var(--surface-2); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Sin scroll-snap ni scroll-behavior en la página: el ajuste por secciones
   secuestra la rueda y el desplazamiento se siente pesado. Solo se mantiene
   el desfase para que las anclas no aterricen bajo la cabecera fija. */
html { scroll-padding-top: var(--head); }

/* Las secciones a 100vh miden el alto disponible bajo el header, no la ventana entera */
.sec, .sec--full { min-height: calc(100vh - var(--head)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Páginas interiores ─────────────────────────────────── */
.lead { max-width: 62ch; font-size: 17px; line-height: 1.85; color: var(--text); }
/* Página genérica: la que usan privacidad y términos. Columna estrecha porque
   es texto para leer seguido, no una retícula. */
.pagina { padding-block: 72px 80px; max-width: 820px; }
.pagina__cab { padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--rule); }
.pagina__cab h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 12px; }
.pagina .contenido h2 { font-size: 22px; }
.pagina .contenido h3 { font-size: 17px; font-family: var(--body); font-weight: 600; }

.contenido { max-width: 68ch; }
.contenido p { margin-bottom: 20px; }
.contenido h2 { margin: 40px 0 16px; }
.contenido h3 { margin: 32px 0 12px; }
.contenido ul, .contenido ol { margin: 0 0 20px; padding-left: 22px; }
.contenido li { margin-bottom: 8px; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 40px; }
.filtros .chip { min-height: 32px; display: inline-flex; align-items: center; }

.pagination { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--ink);
}
.pagination .page-numbers.current { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ── Columna de datos clave (C-06) ──────────────────────── */
.datos { margin: 32px 0; }
.datos div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.datos dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.datos dd { margin: 0; font-size: 15px; text-align: right; }

/* ── Carrusel de imágenes ───────────────────────────────── */
.gal { position: relative; width: 100%; height: 100%; }
.gal__pista {
  display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gal__pista::-webkit-scrollbar { display: none; }
.gal__img {
  flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: 0;
  border: none; background: none; cursor: zoom-in; display: block; overflow: hidden;
}
.gal__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--rule); background: var(--bg); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity 160ms ease;
}
.gal--multi:hover .gal__nav,
.gal--multi:focus-within .gal__nav { opacity: 1; }
.gal__nav:disabled { opacity: 0 !important; pointer-events: none; }
.gal__nav--prev { left: 8px; }
.gal__nav--next { right: 8px; }
/* Sin ratón, las flechas sobran y estorban: el carrusel ya es desplazamiento
   nativo con ajuste —se pasa con el dedo— y debajo están los puntos, que desde
   hoy miden 44 px. Dos cajas blancas encima de la foto, en una pantalla de 390,
   se comen justo lo que se ha venido a ver. */
@media (hover: none) { .gal--multi .gal__nav { display: none; } }

.gal__puntos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.gal__punto {
  width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.gal__punto::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--ink-3); opacity: .65;
}
.gal__punto.es-activo::after { background: var(--ink); opacity: 1; }

.gal__cuenta {
  position: absolute; top: 8px; right: 8px; padding: 3px 7px;
  background: rgba(27,25,21,.78); color: var(--bg);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
}

/* ── Visor a pantalla completa ──────────────────────────── */
.visor {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(18,17,14,.94);
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px;
}
.visor__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 12px; cursor: zoom-out; }
.visor__fig img { cursor: default; }
.visor__fig img {
  max-width: 100%; max-height: calc(100vh - 110px);
  width: auto; height: auto; object-fit: contain; margin: 0 auto; display: block;
}
.visor__pie {
  text-align: center; color: var(--faint);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
}
.visor__x, .visor__nav {
  width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid var(--muted); background: transparent; color: var(--bg);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.visor__x { position: absolute; top: 20px; right: 20px; font-size: 22px; }
.visor__x:hover, .visor__nav:hover { background: var(--ink-3); }
.visor__nav:disabled { opacity: .25; pointer-events: none; }
.visor :focus-visible { outline: 2px solid var(--faint); outline-offset: 2px; }

@media (max-width: 600px) {
  .visor { padding: 12px; }
  .visor__nav { position: absolute; bottom: 20px; }
  .visor__nav--prev { left: 20px; }
  .visor__nav--next { right: 20px; }
}

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

/* ── Sección 03 · Opiniones en marquesina ───────────────── */
.opiniones { background: var(--surface); overflow: hidden; }
.opiniones .wrap { padding-block: 0; }
.opiniones .sec-head { margin-bottom: 48px; }

.opiniones__pausa {
  border: 1px solid var(--line-2); background: none; cursor: pointer;
  min-height: 36px; padding: 0 14px; color: var(--muted);
  transition: border-color 160ms ease, color 160ms ease;
}
.opiniones__pausa:hover { border-color: var(--ink); color: var(--ink); }

/* Difuminado en los bordes: las tarjetas entran y salen en vez de cortarse */
.marquesina {
  position: relative; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquesina__pista {
  display: flex; gap: 24px; width: max-content;
  animation: vc3-desfilar var(--vueltas, 40s) linear infinite;
}
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista,
.marquesina.en-pausa .marquesina__pista { animation-play-state: paused; }

@keyframes vc3-desfilar {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--desplazo), 0, 0); }
}

.voz {
  flex: 0 0 min(380px, 78vw); margin: 0; position: relative;
  padding: 34px 28px 26px; background: var(--bg);
  border: 1px solid var(--rule); display: flex; flex-direction: column;
}
.voz::before {
  content: "\201C"; position: absolute; right: 20px; top: -34px;
  font-family: var(--display); font-size: 150px; line-height: 1;
  color: #E9E9E6; pointer-events: none; user-select: none;
}
.voz--tinta { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.voz--tinta::before { color: var(--ink-3); }
.voz--tinta .lbl { color: var(--faint); }
.voz__n { margin-bottom: 20px; }
.voz blockquote {
  margin: 0 0 24px; font-family: var(--display); font-size: 20px; line-height: 1.5;
  position: relative; z-index: 1; flex: 1; text-wrap: pretty;
}
.voz figcaption {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding-top: 16px; border-top: 1px solid var(--line);
}
.voz--tinta figcaption { color: var(--faint); border-top-color: var(--ink-3); }

/* La marquesina se convierte en un carril que se desliza a mano en dos casos:
   cuando el sistema pide no animar, y cuando NO HAY RATÓN.

   Lo segundo es la mayoría de las visitas. Sin ratón no hay `:hover`, así que
   la tira no paraba nunca y la única forma de detenerla era un botón pequeño
   y lejos de las tarjetas, en la cabecera de la sección. Para leer una opinión
   había que perseguirla.
   Deslizando con el dedo se para donde uno la deja, que es lo que uno hace sin
   que se lo expliquen. Y sin movimiento automático el botón de pausa sobra:
   desaparece, y con él la obligación de la WCAG 2.2.2, que solo aplica a lo
   que se mueve solo. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .marquesina { overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;        /* deslizar no debe disparar el «atrás» del navegador */
    scroll-padding-left: 16px; }
  .marquesina__pista { animation: none; width: auto; padding-inline: 16px; }
  .voz { scroll-snap-align: start; }
  /* Las tandas repetidas existen para que el bucle no dé un salto. Deslizando
     no hay bucle: serían las mismas opiniones otra vez. */
  .marquesina .voz[aria-hidden="true"] { display: none; }
  .opiniones__pausa { display: none; }
}

/* ── Sección 02 · Nuestro trabajo ───────────────────────── */
.trabajo { background: var(--bg); }
/* `minmax(min(320px, 100%), ...)` no puede bajar de 320 y a 390 px de ancho el grid
   forzaba el documento a 756: la portada se podía arrastrar de lado. Con
   `min(320px, 100%)` la columna sí encoge. */
.trabajo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 56px; align-items: center; }
.trabajo__grid > * { min-width: 0; }
.trabajo__h2 { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.02; letter-spacing: -0.032em; margin: 20px 0; }
.trabajo__intro { max-width: 46ch; font-size: 17px; line-height: 1.85; color: var(--text); margin-bottom: 32px; }
.trabajo__foto { position: relative; aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; }
.trabajo__foto img { width: 100%; height: 100%; object-fit: cover; }

.lista-num { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lista-num li { padding: 26px 0; border-bottom: 1px solid var(--line); display: flex; gap: 22px; }
.lista-num__n { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--ocre); padding-top: 4px; }
.lista-num h3 { font-size: 22px; line-height: 1.2; margin-bottom: 6px; }
.lista-num p { font-size: 15px; line-height: 1.7; color: var(--text); }

/* ── Sección 06 · Comunicados ───────────────────────────── */
.com-dest { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 36px;
  padding: 32px 0; border-bottom: 1px solid var(--line); align-items: start; }
.com-dest__foto { position: relative; aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; }
.com-dest__foto img { width: 100%; height: 100%; object-fit: cover; }
.com-dest__meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 14px; }
.com-dest__t { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.16; letter-spacing: -0.022em; margin-bottom: 12px; }
.com-dest__t a { color: var(--ink); }
.com-dest__x { max-width: 52ch; font-size: 16px; line-height: 1.7; color: var(--text); margin-bottom: 16px; }
.com-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 36px; }

/* ── Sección 07 · Contacto ──────────────────────────────── */
/* Con el formulario fuera la sección es más corta que el viewport, y el
   centrado vertical de .sec la dejaba flotando lejos del filete de cabecera. */
.sec--contacto { justify-content: flex-start; }
.contacto__intro { max-width: 46ch; font-size: 17px; line-height: 1.75; color: var(--text); margin: 0 0 30px; }

/* Vías a la izquierda, mapa a la derecha. El mapa se lleva la parte ancha: es
   la respuesta a «¿dónde es?» y a media columna no se distingue una manzana. */
.contacto__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .contacto__grid { grid-template-columns: minmax(320px, 38%) 1fr; } }

.form__par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; margin-bottom: 22px; }
.campo { margin: 0 0 22px; }
.campo label {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text);
}
.campo input, .campo textarea {
  width: 100%; border: 1px solid var(--rule); background: #fff; color: var(--ink);
  font-family: var(--mono); font-size: 16px; /* 16px evita el zoom automático en iOS */
}
.campo input { height: 48px; padding: 0 14px; }
.campo textarea { padding: 12px 14px; font-family: var(--body); line-height: 1.6; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--link); outline-offset: -1px; }
.form__par .campo { margin-bottom: 0; }
/* El documento va bajo «Nombres» y a su mismo ancho: a lo largo de toda la fila
   parecía pedir algo más largo que un DNI. El 50% sale de .form__par, que son
   dos columnas iguales con 16px de hueco. */
@media (min-width: 700px) { .campo--doc { max-width: calc(50% - 8px); } }
/* La persona que el proveedor rechazó. Filete, no relleno: el color del sistema
   marca estados, y un fondo rojo sobre un formulario ya cargado grita. */
.persona--mal { border-left: 3px solid var(--terracota); padding-left: 15px; }

.form__enviar { width: 100%; justify-content: center; padding: 18px 30px; }
.form__enviar[disabled] { opacity: .55; cursor: progress; }

.form__aviso { margin: 0 0 18px; padding: 13px 15px; font-size: 15px; line-height: 1.6; }
.form__aviso--ok  { background: #ECF1E7; border-left: 3px solid var(--verde); color: #3F5533; }
.form__aviso--mal { background: #F8E7E1; color: var(--terracota); }

/* ── Vías de contacto ───────────────────────────────────── */
/* La fila entera es el enlace. Poner el tel: solo sobre los once caracteres del
   número deja 44 px muertos a cada lado que parecen tocables y no lo son. */
.vias { border-top: 2px solid var(--rule); }
.via {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 16px; min-height: 92px; padding: 18px 18px 18px 18px;
  border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
  color: inherit; transition: background 160ms ease, border-left-color 160ms ease;
}
.via:hover, .via:focus-visible { background: var(--surface-3); text-decoration: none; }
.via:last-child { border-bottom: 2px solid var(--rule); }
.via .lbl { grid-column: 1; margin: 0 0 4px; }
/* El dato y la glosa ocupan las dos columnas. Con el verbo reservando su columna
   en las tres filas, el correo se partía en «villaclub / 3.pe». */
.via__n { grid-column: 1 / -1; font-family: var(--mono); font-size: 25px; font-weight: 500;
  line-height: 1.05; color: var(--ink); margin: 0; }
.via__n--sm { font-size: 16px; letter-spacing: 0; overflow-wrap: break-word; }
.via__g { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; color: var(--muted); margin: 5px 0 0; }
/* El verbo, no un icono: en el móvil no hay :hover que insinúe que la fila
   actúa, y una palabra la entiende un vecino de 70 años mejor que un glifo. */
.via__cta {
  grid-column: 2; grid-row: 1; align-self: start;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.via:hover .via__cta { color: var(--ink); }

/* El único color de la sección marca la emergencia. Se distingue por el filete,
   no por el tamaño: si garita fuera más grande, la sección gritaría emergencia
   las veinticuatro horas y el uso real es el trámite de un martes por la mañana. */
.via--urg { border-left-color: var(--terracota); }
.via--urg .lbl { color: var(--terracota); }
.via__lbl--adm { color: var(--ocre); }

/* WhatsApp en tinta llena: aquí es la acción principal de la sección. */
.via--wa { background: var(--ink); border-left-color: var(--ink); border-bottom-color: var(--ink); }
.via--wa .lbl, .via--wa .via__g { color: var(--line-2); }
.via--wa .via__n, .via--wa .via__cta { color: var(--bg); }
.via--wa:hover, .via--wa:focus-visible { background: var(--ink-3); }
.via--wa:hover .via__cta { color: var(--bg); }

/* ── Mapa ───────────────────────────────────────────────── */
/* min-width: 0 no es adorno. Con aspect-ratio y min-height, el ancho MÍNIMO
   intrínseco del mapa pasa a ser 260 x 4/3 = 347 px, y la retícula dimensiona
   la columna a ese mínimo: a 320 px la sección entera desbordaba arrastrada por
   el mapa, y las vías se estiraban con ella. */
.mapa { position: relative; width: 100%; min-width: 0; aspect-ratio: 4/3;
  min-height: 260px; max-height: 480px;
  border: 1px solid var(--rule); background: var(--surface-2); }
.mapa-fig { margin: 0; min-width: 0; }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05); }
/* Arrastrar el dedo dentro del iframe secuestraba el scroll de la página y
   dejaba al vecino atrapado a media sección. En táctil el mapa se mira; para
   moverse está el botón. */
@media (hover: none) { .mapa iframe { pointer-events: none; } }
.mapa__bajo { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  justify-content: space-between; margin-top: 12px; }
.mapa__ir { flex: none; }
.mapa__pie { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }

.contacto__docs { margin-top: 44px; }
.contacto__docs .lbl { margin-bottom: 14px; }

/* ── Pie ────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--rule); background: var(--ink); color: var(--line-2); }
.foot a { color: var(--line-2); }
.foot a:hover { color: var(--bg); }

.foot__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 40px; padding: 64px 0 52px; }
.foot__marca {
  font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.1;
  letter-spacing: -0.02em; color: var(--bg);
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--ink-3);
}
.foot__desc { max-width: 34ch; font-size: 15px; line-height: 1.8; color: var(--faint); margin-bottom: 20px; }
.foot__wa {
  display: inline-block; padding: 15px 24px; background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; transition: background 160ms ease;
}
.foot__wa:hover { background: var(--line); color: var(--ink); text-decoration: none; }

.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 32px; }
.foot h2,
.foot h3 { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { font-size: 15px; line-height: 2.1; }

.foot__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  border-top: 1px solid var(--ink-3); border-left: 1px solid var(--ink-3); }
.foot__datos > div { padding: 24px; border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); }
.foot__datos .lbl { color: var(--faint); margin-bottom: 8px; }
.foot__n { font-family: var(--mono); font-size: 19px; font-weight: 500; color: var(--bg); margin-bottom: 3px; }
.foot__n--sm { font-family: var(--body); font-size: 16px; font-weight: 600; }
.foot__n a { color: var(--bg); }
.foot__pie { font-size: 14px; line-height: 1.6; color: var(--faint); }

.foot__legal { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 22px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--muted);
  justify-content: space-between; }

/* Marca la página en la que estás. La cabecera es idéntica en todo el sitio. */
.nav a.es-actual { color: var(--ocre); border-bottom: 2px solid var(--ocre); }

/* ── Quiénes somos ──────────────────────────────────────── */
.qs-hero { border-bottom: 1px solid var(--rule); }
.qs-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0; }
.qs-hero__txt { padding: 80px 56px 80px 0; }
.qs-hero__txt h1 { max-width: 15ch; font-size: clamp(38px, 4.8vw, 64px); margin: 22px 0; }
.qs-hero__p1 { max-width: 46ch; font-size: 17px; line-height: 1.85; color: var(--ink-2); margin-bottom: 18px; }
.qs-hero__p2 { max-width: 46ch; font-size: 17px; line-height: 1.85; color: var(--text); }
.qs-hero__foto { border-left: 1px solid var(--rule); padding: 40px 0 40px 44px; display: flex; align-items: center; }
.qs-hero__marco { position: relative; width: 100%; aspect-ratio: 4/5; background: var(--surface-2); overflow: hidden; }
.qs-hero__marco img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .qs-hero__txt { padding: 48px 0 32px; }
  .qs-hero__foto { border-left: none; border-top: 1px solid var(--rule); padding: 32px 0; }
}

.qs-cifras { border-bottom: 1px solid var(--rule); background: var(--surface); }
.qs-cifras__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.qs-cifras__grid > div { padding: 36px 28px; border-right: 1px solid var(--line); }
.qs-cifras__grid > div:first-child { padding-left: 0; }
.qs-cifras__grid > div:last-child { border-right: none; }
.qs-cifras__n { font-family: var(--mono); font-size: 34px; font-weight: 500; line-height: 1; margin-bottom: 6px; }
.qs-cifras__n--ac { color: var(--ocre); }

.qs-junta__nota { max-width: 62ch; font-size: 16px; line-height: 1.8; color: var(--text); margin-bottom: 36px; }
.qs-junta__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 28px; }
.miembro__foto { position: relative; aspect-ratio: 3/4; background: var(--surface-2); margin-bottom: 14px;
  overflow: hidden; display: grid; place-items: center; }
.miembro__foto img { width: 100%; height: 100%; object-fit: cover; }
.miembro__sin { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); }
.miembro__cargo { color: var(--ocre); margin-bottom: 5px; }
.miembro__n { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.2; margin-bottom: 4px; }
.miembro__d { letter-spacing: .1em; font-weight: 400; }

.qs-asamblea { background: var(--ink); color: var(--bg); }
.qs-asamblea .lbl { color: var(--faint); }
.qs-asamblea__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 48px; align-items: start; }
.qs-asamblea__h2 { max-width: 16ch; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.02;
  letter-spacing: -0.032em; color: var(--bg); margin: 20px 0; }
.qs-asamblea__p { max-width: 44ch; font-size: 16px; line-height: 1.85; color: var(--line-2); }
.pasos { list-style: none; margin: 0; padding: 0; }
.pasos li { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--ink-3); }
.pasos li:last-child { border-bottom: 1px solid var(--ink-3); }
.pasos__n { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--faint); }
.pasos__t { font-size: 16px; font-weight: 600; color: var(--bg); margin-bottom: 4px; }
.pasos__x { font-size: 15px; line-height: 1.7; color: var(--faint); }

.docs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.doc { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: center;
  padding: 20px 22px; border: 1px solid var(--line); background: var(--surface);
  transition: background 160ms ease, border-color 160ms ease; }
.doc:hover { background: var(--bg); border-color: var(--rule); text-decoration: none; }
.doc__t { font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.doc__m { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ocre); white-space: nowrap; }

.qs-vacio { font-size: 16px; color: var(--muted); }

/* ── Imagen de fondo de la portada ──────────────────────────
   Va fija detrás de todo. Las secciones que llevan fondo propio se vuelven
   semitransparentes para que la imagen se vea de forma continua al bajar,
   en vez de aparecer a trozos. */
.fondo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--fondo);
  background-size: cover; background-position: center;
  opacity: var(--fondo-op, .12);
  /* Capa propia de GPU: si no, repinta la ventana entera al desplazarse. */
  transform: translateZ(0);
  will-change: opacity;
}
/* Todo lo que lleve fondo propio debe crear contexto de apilamiento, o la
   capa fija (position:fixed, z-index:0) le pinta por encima. */

/* ── Aviso urgente en ventana ──────────────────────────────
   La alternativa a la barra, elegida por comunicado desde el panel.
   Interrumpe, así que solo se muestra una vez por aviso: quien la cierra
   no la vuelve a ver hasta que se publique otro. */
.sin-scroll { overflow: hidden; }
.avisow { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.avisow[hidden] { display: none; }
.avisow__fondo { position: absolute; inset: 0; background: rgba(23,24,26,.62); }
.avisow__caja {
	position: relative; width: min(520px, 100%); background: var(--surface);
	border: 1px solid var(--rule); border-top: 6px solid var(--terracota);
	padding: 32px 32px 28px; box-shadow: 0 24px 60px rgba(23,24,26,.28);
	animation: avisow-entra .22s ease-out;
	max-height: calc(100svh - 40px); overflow-y: auto;
}

/* Cartel del aviso: la imagen destacada del comunicado, a sangre dentro de la
   caja. Si además el extracto está vacío, el cartel es todo el aviso. */
.avisow__foto { margin: -32px -32px 22px; background: var(--surface-2); }
.avisow__foto img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: cover; }
/* Aviso de solo imagen: la caja se ciñe al cartel en vez de meterlo en un
   recuadro fijo de 520 px, que lo dejaba con franjas a los lados. La imagen
   manda el ancho; debajo queda una franja con el botón. */
.avisow__hoja--foto { margin: -32px -32px -28px; }
.avisow__hoja--foto .avisow__foto { margin: 0; background: none; }
.avisow__hoja--foto .avisow__foto img {
	width: auto; max-width: min(680px, calc(100vw - 40px));
	max-height: calc(100svh - 160px); object-fit: contain;
}
.avisow__hoja--foto .avisow__pie { padding: 16px; justify-content: center; }
/* Con la hoja a sangre la caja sobra: se ciñe al cartel. */
.avisow__caja:has(.avisow__hoja--foto:not([hidden])) { width: auto; max-width: 100%; }

/* Paso entre avisos: flechas a los lados, centradas, como un carrusel.
   Van sobre la caja, así que llevan chapa oscura para leerse igual encima de
   un cartel claro que de la caja blanca. */
.avisow__pasar { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.avisow__pasar button {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; display: grid; place-items: center;
	border: 0; border-radius: 50%; background: rgba(23,24,26,.55); color: #FFFFFF;
	font-size: 24px; line-height: 1; cursor: pointer; pointer-events: auto;
}
.avisow__pasar button:hover { background: rgba(23,24,26,.85); }
.avisow__pasar button:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; }
.avisow__pasar [data-hoja-ir="-1"] { left: 10px; }
.avisow__pasar [data-hoja-ir="1"] { right: 10px; }
.avisow__cuenta {
	/* Arriba al centro: abajo se montaba sobre los botones del pie. */
	position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 3;
	pointer-events: none; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
	background: rgba(23,24,26,.55); color: #FFFFFF; padding: 3px 9px;
}
@media (max-width: 560px) {
	.avisow__pasar button { width: 38px; height: 38px; font-size: 21px; }
	.avisow__pasar [data-hoja-ir="-1"] { left: 6px; }
	.avisow__pasar [data-hoja-ir="1"] { right: 6px; }
}
/* Sobre la imagen la ✕ se perdía en las zonas claras. */
.avisow:has(.avisow__foto) .avisow__cerrar { background: rgba(23,24,26,.55); color: #FFFFFF; }
.avisow:has(.avisow__foto) .avisow__cerrar:hover { background: rgba(23,24,26,.8); color: #FFFFFF; }
@keyframes avisow-entra { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .avisow__caja { animation: none; } }
.avisow .aviso__tag { background: var(--terracota); color: #FFFFFF; display: inline-block; margin: 0 0 14px; }
.avisow__t { font-size: clamp(22px, 3vw, 28px); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 12px; }
.avisow__x2 { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0 0 24px; }
.avisow__pie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0; }
.avisow__ok {
	font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
	background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px 4px;
}
.avisow__ok:hover { color: var(--ink); }
.avisow__cerrar {
	position: absolute; right: 8px; top: 8px; width: 40px; height: 40px;
	background: none; border: 0; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer;
}
.avisow__cerrar:hover { color: var(--ink); }
@media (max-width: 560px) { .avisow__caja { padding: 26px 20px 22px; } }

.foot { position: relative; z-index: 1; }
/* .head NO va aquí: ya es sticky con z-index 90 y esa regla lo pisaba
   dejándolo en position:relative, así que dejaba de quedarse arriba. */
.vc3-home--fondo .hero,
.vc3-home--fondo .sec { position: relative; z-index: 1; }

.vc3-home--fondo .sec--blanco { background: rgb(255 255 255 / .82); }
.vc3-home--fondo .trabajo     { background: rgb(246 246 244 / .78); }
.vc3-home--fondo .opiniones   { background: rgb(255 255 255 / .86); }
/* Contacto era la única sección sin velo: los datos quedaban sobre la foto
   aérea y el gris del texto se perdía contra el verde de los parques. */
.vc3-home--fondo #contacto    { background: rgb(246 246 244 / .88); }
/* Y el hero era la otra. Es la primera pantalla del sitio: el titular en Lora
   sobre la foto sin nada que los separe era justo donde peor se notaba. */
.vc3-home--fondo .hero        { background: rgb(246 246 244 / .86); }
.vc3-home--fondo .juego       { background: rgb(23 24 26 / .93); }

/* En pantallas pequeñas la imagen fija cuesta cara y compite con el texto */
@media (max-width: 700px) {
  .fondo { opacity: calc(var(--fondo-op, .12) * .6); background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) { .fondo { background-attachment: scroll; } }

/* ── Sección 01 · tarjeta de beneficio ──────────────────────
   Sin filetes: la tarjeta se separa del fondo por elevación, no por
   contorno. La sombra es la única del sitio, así que se mantiene discreta
   para no romper el resto del sistema. */
.ben {
  display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(23 24 26 / .04), 0 10px 28px rgb(23 24 26 / .07);
  transition: box-shadow 260ms ease, transform 260ms ease;
}
.ben:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgb(23 24 26 / .05), 0 18px 44px rgb(23 24 26 / .11);
}

.ben__marco { position: relative; background: var(--surface-2); }
.ben__img { position: relative; aspect-ratio: 1; overflow: hidden; }
.ben__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.ben:hover .ben__img img { transform: scale(1.04); }

.ben__n {
  position: absolute; left: 0; bottom: 0;
  min-width: 48px; height: 34px; padding: 0 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ac);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  transition: background 200ms ease, color 200ms ease;
}
.ben:hover .ben__n { background: var(--ac); color: var(--surface); }

.ben__cuerpo { padding: 20px 22px 24px; }
.ben__cuerpo h3 {
  font-size: 21px; line-height: 1.22;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--ac);   /* el único trazo que queda, y significa */
}
.ben__cuerpo p { font-size: 15px; line-height: 1.7; color: var(--text); }

.ben__marco .gal__nav { z-index: 2; }
.ben__marco .gal__cuenta { top: 0; right: 0; }

@media (prefers-reduced-motion: reduce) {
  .ben:hover { transform: none; }
  .ben:hover .ben__img img { transform: none; }
}

/* ── Página de trámites ─────────────────────────────────── */
.tr-hero { min-height: auto; padding-bottom: 0; }
.tr-hero h1 { max-width: 22ch; margin-top: 22px; }

.tr-lista { border-top: 1px solid var(--rule); }
.tr { display: grid; gap: 8px 28px; padding: 32px 0; border-bottom: 1px solid var(--line); align-items: center; }
@media (min-width: 820px) { .tr { grid-template-columns: 110px 1fr auto; } }
.tr__n { align-self: start; padding-top: 6px; }
.tr__txt h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin-bottom: 8px; }
.tr__txt p { font-size: 16px; line-height: 1.7; color: var(--text); max-width: 56ch; }
.tr--pend { opacity: .62; }
.tr__pend { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line-2);
  padding: 12px 16px; display: inline-block; }
.tr__ayuda { margin-top: 36px; font-size: 15px; color: var(--text); }

/* ── Flujo de trámites ──────────────────────────────────── */
.tramite { max-width: 900px; }
.flujo { width: 100%; }
.panel h1, .panel h2 { max-width: 24ch; }
.panel h1:focus-visible, .panel h2:focus-visible { outline: none; }
.panel--alto { padding: 40px 0; }
.panel__acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.form--predio { margin-top: 32px; }
.form--predio .form__par { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.campo select {
  width: 100%; height: 48px; padding: 0 12px;
  border: 1px solid var(--rule); background: #fff; color: var(--ink);
  font-family: var(--mono); font-size: 16px;
}
.campo--check { display: block; }
.campo--check label { display: flex; gap: 10px; align-items: center; text-transform: none;
  letter-spacing: 0; font-family: var(--body); font-size: 15px; font-weight: 400; color: var(--ink); }
.campo--check input { width: 20px; height: 20px; accent-color: var(--ink); }

.nota { margin-top: 20px; max-width: 56ch; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* Espera */
.panel--espera { padding: 72px 0; text-align: center; }
.girando {
  display: inline-block; width: 30px; height: 30px; margin-bottom: 24px;
  border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%;
  animation: vc3-gira 700ms linear infinite;
}
@keyframes vc3-gira { to { transform: rotate(360deg); } }
.panel--espera h2, .panel--espera .lead { max-width: none; }
@media (prefers-reduced-motion: reduce) { .girando { animation-duration: 2s; } }

/* Filas de personas */
  position: absolute; right: 0; top: 14px;
  min-width: 34px; min-height: 34px; padding: 0;
  border: 1px solid var(--line-2); background: none; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer;
}
[data-agregar][disabled] { opacity: .45; cursor: not-allowed; }

/* Declaración jurada */
.declaracion { margin: 32px 0; padding: 22px; background: var(--surface); border-left: 3px solid var(--ocre); }
.declaracion p { font-size: 15px; line-height: 1.75; color: var(--text); margin: 8px 0 16px; max-width: 62ch; }

/* Código de confirmación */
.codigo {
  font-family: var(--mono); font-size: clamp(38px, 7vw, 56px); font-weight: 600;
  letter-spacing: .1em; line-height: 1; margin: 24px 0 16px;
  padding: 20px 24px; background: var(--surface); border: 1px solid var(--rule);
  display: inline-block;
}
.pasos--claro li { border-top-color: var(--line); }
.pasos--claro li:last-child { border-bottom-color: var(--line); }
.pasos--claro .pasos__n { color: var(--ocre); }
.pasos--claro .pasos__t { color: var(--ink); }
.pasos--claro .pasos__x { color: var(--text); }

/* ── Talleres ───────────────────────────────────────────── */
.taller {
  display: flex; flex-direction: column; background: var(--surface);
  box-shadow: 0 1px 2px rgb(23 24 26 / .04), 0 10px 28px rgb(23 24 26 / .07);
  transition: box-shadow 260ms ease, transform 260ms ease;
}
.taller:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgb(23 24 26 / .05), 0 18px 44px rgb(23 24 26 / .11);
}
.taller__img { position: relative; aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; }
.taller__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.taller:hover .taller__img img { transform: scale(1.04); }
.taller__cuerpo { padding: 20px 22px 24px; }
.taller__cuerpo h3 { font-size: 21px; line-height: 1.22; margin-bottom: 8px; }
.taller__meta {
  color: var(--ocre); letter-spacing: .12em; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.taller__cuerpo p { font-size: 15px; line-height: 1.7; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .taller:hover { transform: none; } .taller:hover .taller__img img { transform: none; } }

/* ── Negocios del barrio ────────────────────────────────── */
.neg-hero { min-height: auto; padding-bottom: 0; }
.neg-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 32px 56px; align-items: end; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.neg-hero h1 { max-width: 16ch; font-size: clamp(36px, 4.4vw, 58px); }
.neg-hero .lbl { margin-bottom: 18px; }
.neg-hero__p { max-width: 44ch; font-size: 16px; line-height: 1.8; color: var(--text); }

.neg-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 28px; }
.filtro {
  padding: 0 18px; min-height: 44px; display: inline-flex; align-items: center;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.filtro:hover { border-color: var(--rule); color: var(--ink); text-decoration: none; }
.filtro.es-activo { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.neg-filtros__n { margin-left: auto; letter-spacing: .12em; font-weight: 400; }

.neg-grid { display: grid; gap: 16px; }
.neg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  border: 1px solid var(--line); background: var(--bg); }
@media (min-width: 760px) { .neg { grid-template-columns: minmax(min(220px, 100%), 34%) 1fr; } }
.neg__img { position: relative; aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; }
.neg__img img { width: 100%; height: 100%; object-fit: cover; }
.neg__cuerpo { padding: 26px; display: flex; flex-direction: column; }
.neg__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.neg__cuerpo h2 { font-size: 22px; line-height: 1.22; letter-spacing: -0.018em; margin-bottom: 8px; }
.neg__x { font-size: 15px; line-height: 1.7; color: var(--text); margin-bottom: 16px; }
.neg__precio { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--ink); }

/* Dónde está el negocio: manzana y lote si es de la villa, dirección si no. */
.neg__donde { margin: 10px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.neg__donde a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; }
.neg__donde a:hover { color: var(--ink); }

.neg-publicar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 48px; align-items: start; }
.neg-publicar h2 { max-width: 18ch; }
.neg-publicar__cols { display: grid; gap: 32px; }
.neg-publicar h3 { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.neg-publicar p { font-size: 15px; line-height: 1.75; color: var(--text); max-width: 46ch; }
.lista-pl { list-style: none; margin: 0; padding: 0; }
.lista-pl li { font-size: 15px; line-height: 1.6; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); }

/* ── Tablón de comunicados ──────────────────────────────────
   Una fila por aviso. En retícula, un comunicado con el extracto largo
   estiraba su tarjeta y descuadraba la fila entera; aquí el texto crece a lo
   ancho y no arrastra a nadie. */
.com-tablon { padding-top: 64px; padding-bottom: 80px; }
.com-tablon__cab { display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2px solid var(--rule); }
.com-tablon__cab h1 { margin: 6px 0 0; }
.com-tablon__n { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--muted); }
.com-tablon__n b { color: var(--ink); font-weight: 600; }

.com-tablon__barra { display: flex; align-items: center; justify-content: space-between;
	gap: 16px 24px; flex-wrap: wrap; margin: 20px 0 8px; }
.com-buscar { flex: 1 1 240px; max-width: 340px; }
.com-buscar input { width: 100%; height: 40px; padding: 0 12px; background: var(--surface);
	border: 1px solid var(--line); color: var(--ink); font-size: 15px; }
.com-buscar input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }

.com-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.com-filtro { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
	text-transform: uppercase; padding: 7px 11px; border: 1px solid var(--line);
	color: var(--muted); text-decoration: none; }
.com-filtro:hover { border-color: var(--ink); color: var(--ink); }
.com-filtro.es-activo { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.tablon-lista { list-style: none; margin: 0; padding: 0; }
.com-fila { border-bottom: 1px solid var(--line); }
.com-fila[hidden] { display: none; }
.com-fila__link { display: grid; grid-template-columns: 64px 104px 1fr 24px;
	gap: 20px; align-items: center; padding: 18px 8px; text-decoration: none; color: inherit; }
/* La fila entera es un enlace, así que la regla global `a:hover` le subrayaba
   fecha, titular y resumen de golpe. Se cancela y el foco lo marca la sombra. */
.com-fila__link, .com-fila__link:hover { text-decoration: none; }
.com-fila__link:hover {
	background: var(--surface);
	box-shadow: 0 6px 22px rgba(23,24,26,.11);
	transform: translateY(-1px);
}
.com-fila__link { position: relative; z-index: 0; transition: box-shadow .16s, transform .16s, background .16s; }
.com-fila__link:hover { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
	.com-fila__link { transition: none; }
	.com-fila__link:hover { transform: none; }
}
.com-fila__link:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.com-fila__fecha { display: block; text-align: center; font-family: var(--mono); line-height: 1.15; }
.com-fila__fecha b { display: block; font-size: 26px; font-weight: 500; color: var(--ink); }
.com-fila__fecha span { display: block; font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.com-fila__fecha i { display: block; margin-top: 4px; font-style: normal; font-size: 10px; color: var(--muted); }

.com-fila__foto { aspect-ratio: 4/3; background: var(--surface-2); overflow: hidden; }
.com-fila__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.com-fila__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.com-fila__urg { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; padding: 3px 8px; background: var(--terracota); color: #FFFFFF; }
.com-fila__t { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; margin: 0; }
.com-fila__x { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--text); }
.com-fila__ir { font-size: 18px; color: var(--muted); }
.com-fila__link:hover .com-fila__ir { color: var(--ink); }

.com-fila--urgente { border-left: 3px solid var(--terracota); }
.com-fila--urgente .com-fila__link { padding-left: 16px; }

.tablon-vacio { margin: 32px 0; color: var(--muted); }
.com-tablon__pag { margin-top: 40px; }

@media (max-width: 700px) {
	.com-fila__link { grid-template-columns: 52px 1fr; gap: 14px; padding: 16px 4px; }
	.com-fila__foto { display: none; }
	.com-fila__ir { display: none; }
	.com-fila__fecha b { font-size: 21px; }
	.com-fila__t { font-size: 17px; }
	.com-fila__x { font-size: 14px; }
}

/* Registro de visitas en una pantalla */
.campo__nota { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.form__extra { margin: 4px 0 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.form__extra > summary { cursor: pointer; font-family: var(--mono); font-size: 10px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 6px 0; }
.form__extra > summary:hover { color: var(--ink); }
.form__extra[open] > summary { margin-bottom: 12px; color: var(--ink); }

/* ── Registro de visitas · bloques numerados ────────────────
   El formulario pide tres cosas distintas —quién registra, a quién espera y
   cuándo— y en una sola columna de campos se leía como una lista larga sin
   orden. Numerarlos da el mapa antes de empezar a escribir. */
.bloque { border: 0; border-top: 1px solid var(--line); margin: 0 0 4px; padding: 26px 0 6px; }
.bloque:first-of-type { border-top: 0; padding-top: 0; }
.bloque__t { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 4px;
	font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ink); }
.bloque__n { display: grid; place-items: center; width: 22px; height: 22px;
	background: var(--ink); color: var(--bg); font-size: 11px; letter-spacing: 0; }
.bloque__ayuda { margin: 8px 0 16px; font-size: 14px; color: var(--muted); }
.bloque__ayuda b { color: var(--ink); font-weight: 600; }

/* Filas de personas */
.gente { display: grid; gap: 12px; }
.persona { position: relative; padding: 16px 44px 4px 16px; background: var(--surface);
	border: 1px solid var(--line); }
.persona__n { margin: 0 0 10px; color: var(--muted); }
.persona__x { position: absolute; right: 6px; top: 10px; width: 34px; height: 34px;
	border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.persona__x:hover { color: var(--terracota); }
.persona .campo:last-child { margin-bottom: 12px; }

.btn--pequeno { font-size: 10px; padding: 10px 16px; }
.btn--pequeno[disabled] { opacity: .45; cursor: not-allowed; }

/* Códigos devueltos, uno por persona */
.codigos { list-style: none; margin: 24px 0 8px; padding: 0; border-top: 1px solid var(--rule); }
.codigos__f { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); }
.codigos__q { font-size: 16px; color: var(--ink); }
.codigos__c { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: .1em;
	color: var(--ink); }
.codigos__f--no .codigos__c { font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--terracota); }
.codigos__f--no .codigos__q { color: var(--muted); }

@media (max-width: 560px) {
	.persona { padding: 14px 40px 2px 12px; }
	.codigos__c { font-size: 26px; }
}


/* ── El dedo (FR-025) ───────────────────────────────────────
   Medido con Playwright a 390 px: el enlace de la marca medía 38 px de alto,
   los del pie 19, los chips de categoría 32 y los puntos de la galería 22.
   Con el ratón da igual; con el pulgar, cada uno de esos es un fallo de tiro
   y una vuelta atrás.

   Solo en pantallas de mano: en escritorio el diseño compacto es deliberado y
   el ratón acierta. El tamaño se gana con relleno, no con tipografía más
   grande, para que no cambie nada de lo que se ve. */
@media (max-width: 700px) {
  .brand { min-height: 44px; }

  /* Los enlaces del pie son navegación, no prosa: cada uno es una fila. */
  .foot__cols li a { display: block; padding: 12px 0; }
  .foot__cols li { line-height: 1.4; }
  .foot__n a,
  .foot__pie a,
  .foot__legal a { display: inline-block; padding: 14px 0; }

  /* Los rótulos de acción —«Leer el comunicado →», «Empezar →», «Ver todos →»—
     miden 13 px de alto por la tipografía monoespaciada pequeña. Son el enlace
     principal de su tarjeta, no texto corrido. */
  a.lbl { display: inline-flex; align-items: center; min-height: 44px; }

  /* Y el título de una tarjeta es lo que se pulsa de verdad. */
  .com-dest__t a,
  .com-fila__t a,
  .row h2 a,
  .row h3 a { display: inline-block; padding: 13px 0; }

  /* «Mz. H · Lote 13 · ver en el mapa →» es el párrafo entero, no un enlace
     dentro de una frase: es cómo se salta de un negocio al plano. */
  .neg__donde a { display: inline-block; padding: 6px 0; }

  .com-filtro { min-height: 44px; display: inline-flex; align-items: center; }
  .opiniones__pausa { min-height: 44px; }

  /* El punto sigue midiendo 6 px; lo que crece es dónde vale pulsar. */
  .gal__punto { width: 44px; height: 44px; }
  .gal__puntos { gap: 0; }
}