/* ══════════════════════════════════════════════════════════════════
   CABAÑAS EL VECINO · Coñaripe
   Demo 149. Identidad: «VENTANA ENCENDIDA».

   LA DIRECCION EN UNA FRASE
   Un azul de anochecer temprano con una ventana amarilla prendida:
   es la señal universal de «hay alguien esperando». El negocio se
   llama El Vecino y esa luz es literalmente su argumento.

   LA PALETA
   --anochecer #1B2740  azul de las siete de la tarde (todavia azul)
   --crudo     #F2EEE4
   --luz       #F5C86A  ventana incandescente (9,5:1 sobre anochecer)
   --luz-osc   #7E5205  el mismo amarillo para texto sobre crudo (5,7:1)

   DESLINDE DE LA LUZ — la luz bajo puertas de la 72 y la 106 (pension)
   eran LINEAS bajo puertas en un pasillo: luz que se filtra. Aca es la
   VENTANA COMPLETA, un rectangulo calido entero.
   DESLINDE DE AMARILLOS — el de obra de la 121 y la 127 es señaletica
   y maquinaria (saturado, plano, de peligro); la manteca de la 158 es
   pastel de reposteria. Este es LUZ INCANDESCENTE: lleva un gradiente
   naranja hacia el centro, porque una ampolleta no ilumina parejo.

   EL TRIO
   · display · Grandstander — nueva en el registro. Tiene un temblor
     manuscrito que ninguna otra display del registro tiene, y sirve
     justo para el tono de esta pagina: alguien que te recibe, no una
     empresa.
   · cuerpo  · Onest — neutra, se aparta.
   · dato    · Reddit Mono — rotulos y el telefono.

   LA CABECERA (115ª del oficio) — LA VENTANA ENCENDIDA
   El marco con la cruz de cuatro paños, los paños en amarillo calido.

   EL FONDO — LAS VENTANAS QUE SE ENCIENDEN
   Tres rectangulitos calidos que se encienden DE A UNO y QUEDAN
   encendidos.
   CUADRUPLE DESLINDE de la familia «llegar y quedarse»: la 114
   ESTAMPA, la 127 CAE, la 135 APARECE — las tres son objetos que
   llegan. Esta ENCIENDE, que no es un objeto llegando sino luz
   apareciendo donde ya habia algo. Y no se apagan nunca: la pagina
   entera trata de que hay alguien esperando.
   Reduced-motion: las tres ya encendidas de entrada.

   AMBIENTE DE PORTADA (10-09-2026) — esta demo NO lleva video de
   fondo: el clip se reserva para los negocios mejor valorados. Todo el
   ambiente lo pone el CSS y son dos cosas:
   · las tres ventanas, que bajaron del aire abierto a la LADERA de
     enfrente (bottom 12% -> 20%) y ganaron halo doble y reflejo en el
     agua. Antes flotaban en medio del lago y se leian como tres
     papeles pegados sobre la foto.
   · doce motas de luz calida que suben muy lento SOLO sobre la mitad
     derecha, que es donde esta la foto. Sobre el titular no entra
     ninguna. Con reduced-motion no se dibujan.

   LA ESTRUCTURA — E (laminas apiladas)
   DESLINDE con 94/98/103/122/164/186: la 122 es secuencia de CARGA
   (trabajo, camion, esfuerzo). Esta es secuencia de LLEGADA
   (hospitalidad): mismo esqueleto, tono opuesto. Los pasos no son
   etapas de una obra sino los primeros veinte minutos de alguien que
   acaba de bajarse del auto.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --anochecer:   #1B2740;
  --anochecer-2: #24314C;
  --anochecer-3: #33415E;
  --crudo:       #F2EEE4;
  --crudo-2:     #E6E0D2;
  --luz:         #F5C86A;   /* 9,5:1 sobre anochecer */
  --luz-osc:     #7E5205;   /* 5,7:1 sobre crudo */
  --tinta:       #1E2430;
  --tinta-2:     #545C6B;   /* 6,3:1 sobre crudo */
  --claro-2:     #BFC7D6;   /* 9,8:1 sobre anochecer */
  --linea:       #D9D2C2;
  --linea-osc:   #2E3A54;

  --display: 'Grandstander', system-ui, sans-serif;
  --cuerpo:  'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Reddit Mono', ui-monospace, 'Consolas', monospace;

  /* La luz de una ampolleta no es plana: mas clara al centro. */
  --incandescente: radial-gradient(circle at 50% 54%,
    #FFE3A6 0%, #F5C86A 58%, #DFA83E 100%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--anochecer);
  color: var(--crudo);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.66;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

::selection { background: var(--luz); color: var(--anochecer); }
a { color: var(--luz); }
:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--crudo);
  color: var(--tinta-2);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
}
.propuesta p { margin: 0; }
.propuesta__que { color: var(--tinta); }
.propuesta__que b { font-weight: 700; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 64ch; }

/* ─────────── cabecera fantasma ─────────── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--anochecer);
  border-bottom: 1px solid var(--linea-osc);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(27, 39, 64, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--crudo); margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.3rem; line-height: 1.1; }

/* ── LA VENTANA ENCENDIDA — marco y cruz de cuatro paños ── */
.ventana {
  position: relative;
  width: 18px; height: 21px;
  flex: 0 0 auto;
  background: var(--incandescente);
  box-shadow: inset 0 0 0 1.6px var(--anochecer),
              0 0 10px rgba(245, 200, 106, .32);
  border-radius: 1px;
}
.ventana::before {   /* el montante vertical */
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: 0; width: 1.6px; margin-left: -.8px;
  background: var(--anochecer);
}
.ventana::after {    /* el travesaño horizontal */
  content: ''; position: absolute;
  top: 50%; left: 0; right: 0; height: 1.6px; margin-top: -.8px;
  background: var(--anochecer);
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--claro-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a:hover { color: var(--luz); border-bottom-color: var(--luz); }
@media (max-width: 52rem) { .cab__nav { display: none; } }

/* T1 — el telefono verificado */
.cab__tel {
  text-align: right; text-decoration: none; line-height: 1.15;
  padding-left: 1.1rem; border-left: 1px solid var(--linea-osc);
  flex: 0 0 auto;
}
.cab__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .54rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--claro-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.74rem, 2vw, .92rem);
  color: var(--luz);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ LAS LÁMINAS (estructura E) ═══════════ */
.lam {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  overflow: hidden;
  background: var(--anochecer);
}
.lam__texto { position: relative; z-index: 2; width: 100%; max-width: min(100%, 40rem); }
.lam__texto--ancho { max-width: min(100%, 48rem); }

/* Las láminas de pasos alternan fondo: la secuencia se siente como
   pasos y no como un scroll largo del mismo color. */
.lam--01 { background: var(--anochecer-2); }
.lam--02 { background: var(--anochecer); }
.lam--03 { background: var(--anochecer-2); }
.lam--firma { background: var(--crudo); color: var(--tinta); }

.sitio {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--luz);
  margin-bottom: 1.3rem;
}
.lam--portada h1 {
  font-size: clamp(2.1rem, 6vw, 4.2rem);
  line-height: 1.08;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--claro-2);
  max-width: min(100%, 33rem);
  margin-bottom: 2.2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: .25rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1; }
.dd--tel { font-family: var(--dato) !important; font-size: 1.05rem !important; }
.dd--tel a { text-decoration: none; }
.dd--tel a:hover { text-decoration: underline; }

/* ── LAS VENTANAS QUE SE ENCIENDEN ──
   Encendidas por defecto. Bajo .js arrancan apagadas y las enciende
   el observador con retardos escalonados. Si el JS no corre, el
   pueblo simplemente ya esta con las luces puestas. */
.pueblo {
  position: absolute;
  right: clamp(1.5rem, 5vw, 5rem);
  /* Sobre la ladera de enfrente, no sobre el agua abierta. A 12% las
     tres quedaban flotando en medio del lago y se leían como tres
     papeles pegados encima de la foto; acá caen dentro de la masa
     oscura del cerro y el reflejo baja hacia el agua.
     El grupo se corrió a la derecha porque es donde la ladera es alta:
     más a la izquierda el cerro baja y las ventanas quedaban colgando
     del cielo. */
  bottom: 20%;
  display: flex; align-items: flex-end; gap: clamp(.9rem, 2.4vw, 1.9rem);
  z-index: 1; pointer-events: none;
}
/* La ladera baja hacia la izquierda: cada ventana se descuelga un poco
   más que su vecina de la derecha para seguir esa pendiente. Son tres
   casas en un cerro, no tres luces en una repisa. */
.pueblo .luz--1 { margin-bottom: -14px; }
.pueblo .luz--2 { margin-bottom: -6px; }
.luz {
  position: relative;
  display: block;
  width: clamp(11px, 1.5vw, 17px);
  background: var(--incandescente);
  border-radius: 1px;
  /* Dos halos, no uno: el cerrado da la ampolleta y el abierto da el
     aire cargado de humedad que hay sobre un lago a esa hora. */
  box-shadow: 0 0 16px 3px rgba(245, 200, 106, .34),
              0 0 46px 14px rgba(245, 200, 106, .14);
}
/* EL REFLEJO. Es lo que convierte tres cuadrados en tres ventanas al
   otro lado del agua: la misma luz estirada hacia abajo y disuelta,
   terminando en alfa 0 para que no deje borde. Hereda la opacidad de
   la ventana, así que se enciende con ella. */
.luz::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 100%;
  height: 190%;
  background: linear-gradient(180deg,
      rgba(245, 200, 106, .34) 0%, rgba(245, 200, 106, .13) 38%,
      rgba(245, 200, 106, .04) 70%, rgba(245, 200, 106, 0) 100%);
  filter: blur(1.5px);
}
/* Alturas distintas: son tres ventanas de tres casas, no tres copias */
.luz--1 { height: clamp(14px, 2vw, 21px); }
.luz--2 { height: clamp(18px, 2.7vw, 29px); }
.luz--3 { height: clamp(12px, 1.7vw, 18px); }

.js .luz { opacity: 0; transition: opacity 1.1s ease; }
.js .pueblo.ok .luz { opacity: 1; }
/* De a una, y quedan. */
.js .pueblo.ok .luz--1 { transition-delay: .5s;  }
.js .pueblo.ok .luz--2 { transition-delay: 1.3s; }
.js .pueblo.ok .luz--3 { transition-delay: 2.1s; }

/* ── LAS MOTAS DE LUZ ──────────────────────────────────────────────
   Doce puntos cálidos que suben muy lento sobre el lago. Es el ambiente
   que en otras demos pone el video de fondo: acá no hay clip, y sin
   nada la mitad derecha de la portada queda quieta.
   Van SÓLO sobre la foto (del 42 % hacia la derecha), nunca sobre el
   titular: una mota cruzando una letra es basura, no ambiente.
   Doce y no cuarenta, entre 15 y 27 s cada una y con opacidad máxima
   .9: si se cuentan, sobran. Se dibujan con radial-gradient, así que
   no cuesta ni un byte de imagen.
   Los índices van por nth-child en el CSS y NUNCA en un style="--i:3":
   la CSP de esta página bloquea el atributo style sin dejar un error a
   la vista. */
.motas {
  position: absolute; inset: 0 0 0 42%;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.motas span {
  position: absolute; bottom: 8%;
  width: 4px; height: 4px; border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle,
      rgba(255, 227, 166, .95) 0%, rgba(245, 200, 106, .55) 42%,
      rgba(245, 200, 106, 0) 72%);
  animation: mota 19s linear infinite;
}
.motas span:nth-child(even) { animation-name: mota-b; }
.motas span:nth-child(1)  { left:  4%; bottom: 10%; animation-duration: 21s; animation-delay:  0s; }
.motas span:nth-child(2)  { left: 13%; bottom: 16%; animation-duration: 17s; animation-delay: -3s; width: 3px; height: 3px; }
.motas span:nth-child(3)  { left: 21%; bottom:  6%; animation-duration: 25s; animation-delay: -8s; }
.motas span:nth-child(4)  { left: 29%; bottom: 20%; animation-duration: 19s; animation-delay: -1s; width: 5px; height: 5px; }
.motas span:nth-child(5)  { left: 37%; bottom: 12%; animation-duration: 23s; animation-delay: -12s; }
.motas span:nth-child(6)  { left: 45%; bottom:  8%; animation-duration: 16s; animation-delay: -5s; width: 3px; height: 3px; }
.motas span:nth-child(7)  { left: 53%; bottom: 18%; animation-duration: 27s; animation-delay: -15s; }
.motas span:nth-child(8)  { left: 61%; bottom: 11%; animation-duration: 20s; animation-delay: -7s; }
.motas span:nth-child(9)  { left: 69%; bottom:  7%; animation-duration: 24s; animation-delay: -2s; width: 5px; height: 5px; }
.motas span:nth-child(10) { left: 77%; bottom: 15%; animation-duration: 18s; animation-delay: -10s; width: 3px; height: 3px; }
.motas span:nth-child(11) { left: 85%; bottom:  9%; animation-duration: 22s; animation-delay: -6s; }
.motas span:nth-child(12) { left: 93%; bottom: 17%; animation-duration: 26s; animation-delay: -18s; }
/* Los delays negativos son a propósito: al cargar la página las doce ya
   están repartidas por el recorrido, en vez de arrancar las doce juntas
   desde abajo como una bandada. */
@keyframes mota {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
  12%  { opacity: .9; }
  64%  { opacity: .5; }
  100% { opacity: 0; transform: translate3d(20px, -185px, 0) scale(1.15); }
}
@keyframes mota-b {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.75); }
  14%  { opacity: .8; }
  62%  { opacity: .45; }
  100% { opacity: 0; transform: translate3d(-16px, -160px, 0) scale(1.1); }
}
@media (max-width: 860px) {
  /* En vertical las motas caerían sobre el titular, que en móvil baja
     al medio de la foto. Se quedan sólo en el tercio de arriba. */
  .motas { inset: 0 0 58% 0; }
}

/* ── contenido de las láminas ── */
.paso {
  font-family: var(--dato);
  font-size: .72rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--luz);
  margin-bottom: .7rem;
}
.lam--firma .paso { color: var(--luz-osc); }

.lam h2 {
  font-size: clamp(1.9rem, 5.4vw, 3.4rem);
  line-height: 1.06;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--claro-2);
  max-width: min(100%, 34rem);
  margin-bottom: 1.8rem;
}
.lam--firma .entrada { color: var(--tinta-2); }

.marca-ejemplo { margin: 0 0 1.6rem; }
.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--luz-osc);
  border-left: 2px solid var(--luz-osc);
  padding-left: .6rem;
}

.falta {
  font-family: var(--dato);
  font-size: .86em;
  color: var(--luz);
  border-bottom: 1px dashed var(--luz);
}
/* El fondo decide el tono: la lámina firma es la única clara. */
.lam--firma .falta { color: var(--luz-osc); border-bottom-color: var(--luz-osc); }

.huecos { margin: 0; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .3rem 1.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linea-osc);
}
.hueco:last-child { border-bottom: 1px solid var(--linea-osc); }
.huecos dt {
  font-family: var(--dato);
  font-size: .74rem;
  color: var(--claro-2);
  align-self: start;
  padding-top: .2rem;
}
.huecos dd { margin: 0; }
.hueco__pq { display: block; font-size: .92rem; color: var(--claro-2); margin-top: .3rem; }
@media (max-width: 40rem) { .hueco { grid-template-columns: 1fr; } }

/* ── LA PIEZA FIRMA — los seis datos del lugar ── */
.datos { list-style: none; margin: 0 0 1.8rem; padding: 0; counter-reset: d; }

/* A DOS COLUMNAS desde 64 rem. Las seis preguntas en una sola columna
   dejaban media lámina de papel en blanco a la derecha y el bloque —que
   es la mejor sección de la página— se leía como un borrador. La grilla
   llena por filas, así que la columna izquierda queda 01·03·05 y la
   derecha 02·04·06; los números en mono guían la lectura.
   El filete de abajo pasa de :last-child a las DOS últimas: con
   :last-child la columna izquierda quedaba abierta por abajo. */
.lam--firma .lam__texto--ancho { max-width: min(100%, 68rem); }
@media (min-width: 64rem) {
  .datos { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .dato:nth-last-child(-n + 2) { border-bottom: 1px solid var(--linea); }
}
.dato {
  counter-increment: d;
  position: relative;
  padding: 1.2rem 0 1.2rem 3rem;
  border-top: 1px solid var(--linea);
}
.dato:last-child { border-bottom: 1px solid var(--linea); }
.dato::before {
  content: counter(d, decimal-leading-zero);
  position: absolute; left: 0; top: 1.35rem;
  font-family: var(--dato);
  font-size: .78rem;
  color: var(--luz-osc);
}
.dato__q {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.18;
  margin: 0 0 .35rem;
}
.dato__a { margin: 0 0 .45rem; }
.dato__pq { font-size: .93rem; color: var(--tinta-2); margin: 0; }

.firma {
  font-size: .95rem;
  color: var(--tinta-2);
  border-top: 1px solid var(--linea);
  padding-top: 1rem;
  margin: 0;
  max-width: min(100%, 44rem);
}

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--anochecer);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1.2rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.5rem, 6.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--luz);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { color: var(--crudo); }
.cierre__pie {
  font-size: .95rem;
  color: var(--claro-2);
  max-width: 44rem;
  margin: 0 auto;
}

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--crudo-2);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 2rem; }
.dueno__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.dueno h3 {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--luz-osc);
  font-weight: 400;
  margin-bottom: .5rem;
}
.dueno p { color: var(--tinta-2); font-size: .96rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 600;
  color: var(--luz-osc);
  text-decoration: none;
  border-bottom: 1px solid var(--luz-osc);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--anochecer);
  color: var(--claro-2);
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .8rem;
}
.pie p { margin: 0; max-width: 66ch; }

/* ═══════════ APARICIONES ═══════════ */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.ok { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (prefers-reduced-motion: reduce) {
  /* Las tres ventanas ya encendidas, sin secuencia. La luz sigue
     estando, que es lo unico que la pagina promete. */
  .js .luz { opacity: 1; transition: none; }

  /* Las motas SÍ se apagan del todo: son doce objetos en bucle
     cruzando la pantalla, que es exactamente lo intrusivo. No basta
     con parar la animación —quedarían doce puntos quietos sobre el
     lago, que se leen como suciedad en la foto— así que se sacan. */
  .motas { display: none; }

  /* De las apariciones se apaga el DESPLAZAMIENTO, no la aparicion: un
     fundido de opacidad no es movimiento, un salto de 16 px si. Si se
     apagan las dos, la pagina se ve muerta — y en Windows esta
     preferencia viene puesta de fabrica en la mitad de las maquinas. */
  .js .rev { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LAS IMÁGENES DE RUBRO — seis tratamientos
   ══════════════════════════════════════════════════════════════════
   La página no puede ser texto sobre fondo plano de arriba abajo. Van
   seis apariciones distintas, para que el ojo no vea siempre lo mismo:
   portada disuelta, aura de color, media pantalla, cita a sangre, tira
   de tres, y la galería con las fotos propias del negocio.

   LA REGLA: la foto no se ensucia para poder leer encima. Lo que
   sostiene el contraste es un gradiente por zona. La ÚNICA excepción es
   el aura, donde el desenfoque no es un parche sino el efecto entero.

   Procedencia de cada archivo: imagenes/FUENTES.txt
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · PORTADA ── */
/* position/isolation acá y no heredadas: hay demos cuya .portada no es
   posicionada, y entonces el .portada__foto absoluto se cuelga del body
   y tapa el titular entero. El z-index del texto va por lo mismo. */
.portada--foto { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { position: relative; z-index: 2; max-width: 40rem; }
.portada__foto { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 56%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--anochecer) 0%, var(--anochecer) 30%,
              rgba(27,39,64,.66) 46%, rgba(27,39,64,.22) 68%, rgba(27,39,64,.06) 86%);
}
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: respira 46s ease-in-out infinite alternate; }
}
@keyframes respira {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.8%, -1.2%, 0); }
}
/* LA FOTO DE PORTADA NO SE ESCONDE NUNCA.
   Estaba colgada de una clase .ok que main.js no le ponía a nadie —el
   observador de apariciones marcaba .lam__texto, que es el hijo, no la
   sección— y el resultado era una portada azul lisa: la foto existía,
   pesaba y no se veía. Arreglarlo poniendo la sección en la lista de
   piezas habría sido peor, porque esa lista además agrega .rev, y .rev
   esconde el elemento entero: escondería el titular.
   Así que la regla es la de la casa llevada al extremo donde más
   importa: el hero no depende del JavaScript. Su entrada la da el
   ken-burns lento de `respira`, que es CSS puro y arranca solo. */
.js .portada--foto .portada__foto { opacity: 1; }
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: none; }
@media (max-width: 860px) {
  .portada--foto { padding-top: 36svh; }
  .portada__foto img {
    object-position: 50% 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(27,39,64,0) 0%, rgba(27,39,64,.30) 42%, var(--anochecer) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#llegada { position: relative; isolation: isolate; overflow: hidden; }
.aura { position: absolute; z-index: -1; inset: -12% -8% auto -8%; height: 78%; pointer-events: none; }
.aura img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Acá el desenfoque ES el efecto: la foto deja de leerse y queda la luz. */
  filter: blur(64px) saturate(1.45);
  opacity: .38;
  transform: scale(1.25);
  /* Y se apaga EN LA IMAGEN, no con un velo encima. Un ::after que pinta
     el fondo apaga solo DENTRO del div: en el borde de abajo queda un
     corte recto a media seccion. Con la mascara la imagen misma se
     desvanece y no hay borde que cortar. */
  -webkit-mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
          mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
}
@media (prefers-reduced-motion: no-preference) {
  .aura img { animation: deriva-aura 68s ease-in-out infinite alternate; }
}
@keyframes deriva-aura {
  from { transform: scale(1.25) translate3d(-3%, 0, 0); }
  to   { transform: scale(1.38) translate3d(3%, -2%, 0); }
}

/* ── 3 · MEDIA PANTALLA ── */
.mitades {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--anochecer-2);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala, ambos se salen unos píxeles y
     aparece scroll horizontal por un segundo. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: 62svh; overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--crudo);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--claro-2); margin: 0 0 .9rem;
}
.mitades h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08;
  margin: 0 0 1rem; color: var(--crudo);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--crudo); max-width: 34rem;
}
.js .mitades__texto.rev { opacity: 0; transform: translateX(1.6rem); }
.js .mitades__foto.rev  { opacity: 0; transform: scale(1.04); }
.js .mitades__texto.rev.ok,
.js .mitades__foto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 780px) {
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto { min-height: 44svh; }
}

/* ── 4 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: 70svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--anochecer); overflow: hidden;
}
.cita__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* El encuadre pone las ventanas encendidas a la altura del texto: son lo
   que la frase nombra, y si quedan fuera de cuadro la banda es una casa
   oscura cualquiera. */
.cita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Velo parejo y fuerte: el texto va centrado y grande, encima de la foto
   entera, asi que el gradiente lateral no sirve (medio texto quedaria
   sobre .9 y medio sobre .3). Va plano-vertical.
   PEOR CASO MEDIDO, y es el que manda: el reventon de luz de la ventana
   es casi blanco (#FFD9A0) y cae justo a la altura del texto, donde el
   velo vale .81. Ahi compone rgb(70,73,82); contra ese fondo el titular
   en #F2EEE4 da 7,8:1 y el eco chico en #F5C86A da 5,7:1 — los dos
   pasan AA aunque el eco sea de .82 rem.
   El .60 de arriba no lleva texto encima: existe para que la techumbre
   y el cielo se lean. Con .70 la banda se veia como un rectangulo negro
   y la frase hablaba de una luz que no se distinguia. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,39,64,.60) 0%,
              rgba(27,39,64,.80) 45%, rgba(27,39,64,.90) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--crudo); }
.cita__texto p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.16;
  margin: 0; color: var(--crudo);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--luz);
}
.js .cita__texto.rev { opacity: 0; transform: translateY(16px); }
.js .cita__texto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
  .cita__foto img { animation: respira-cita 58s ease-in-out infinite alternate; }
}
@keyframes respira-cita {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(1.4%, -1%, 0); }
}

/* ══════════════════════════════════════════════════════════════════
   LA CABAÑA POR DENTRO — el inventario
   Cuatro fichas contadas mirando las fotos del negocio, y la tira de
   abajo es la prueba de cada una. Las fichas son un escalón MÁS OSCURO
   que su sección (--anochecer sobre --anochecer-2), al revés que en la
   sección clara del medio, donde la tarjeta sube a blanco: sobre fondo
   oscuro lo que separa una tarjeta del fondo es hundirla, no aclararla,
   porque aclararla la volvería un panel gris.
   Contraste medido sobre la ficha compuesta (#1D2943):
   --claro-2 8,5:1 · --luz 9,2:1 · --crudo 13,9:1.
   ══════════════════════════════════════════════════════════════════ */
.dentro {
  background: var(--anochecer-2);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.dentro__in { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }
.dentro h2 {
  font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.06;
  margin-bottom: 1.1rem; color: var(--crudo);
}
.dentro .entrada { max-width: min(100%, 44rem); }
.dentro__lista {
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.dentro__f {
  background: rgba(27, 39, 64, .78);
  border-left: 3px solid var(--luz);
  border-radius: 0 10px 10px 0;
  padding: 1.15rem 1.3rem 1.25rem;
}
.dentro__f h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem); line-height: 1.16;
  margin: 0 0 .55rem; color: var(--crudo);
}
.dentro__f p { font-size: .94rem; line-height: 1.6; color: var(--claro-2); margin: 0; }
.dentro__falta { margin-top: .7rem !important; font-size: .88rem !important; }
.dentro__pie {
  font-size: .93rem; line-height: 1.6; color: var(--claro-2);
  border-top: 1px solid var(--linea-osc); padding-top: 1.1rem;
  margin: 0; max-width: 56rem;
}
/* El telón de madera va un punto más bajo que el de los árboles: la
   foto es clara y pareja de arriba abajo, así que al .15 competía con
   las fichas en vez de quedar atrás. Calibrado mirando. */
.telon--madera img { opacity: .11; object-position: 50% 52%; }

/* ── 5 · LA TIRA ── */
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--linea-osc); }
.tira__pieza { margin: 0; overflow: hidden; height: 34svh; min-height: 220px; }
.tira__pieza img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .tira__pieza:hover img { transform: scale(1.05); }
}
.js .tira__pieza.rev { opacity: 0; transform: translateY(1.4rem); }
.js .tira__pieza.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .tira__pieza.rev.ok:nth-child(2) { transition-delay: .1s; }
.js .tira__pieza.rev.ok:nth-child(3) { transition-delay: .2s; }
@media (max-width: 700px) {
  .tira { grid-template-columns: 1fr 1fr; }
  .tira__pieza:last-child { grid-column: 1 / -1; height: 28svh; }
}

@media (prefers-reduced-motion: reduce) {
  .js .portada--foto .portada__foto,
  .js .mitades__texto.rev, .js .mitades__foto.rev,
  .js .cita__texto.rev, .js .tira__pieza.rev { opacity: 1; transform: none; }
}

/* ══════ LAS FOTOS ══════
   Grilla dura, igual que el resto de la pagina: dos arriba y una ancha
   abajo. Cada figura llega desde un lado distinto — izquierda, derecha,
   abajo — con un retardo escalonado, para que se lean como tres cosas
   puestas sobre la mesa y no como un bloque que se enciende. */
.galeria {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 78rem; margin: 0 auto;
}
.galeria__titulo {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.05;
  margin: 0 0 .6rem; color: var(--crudo);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--claro-2); font-size: .96rem; line-height: 1.6;
}
.galeria__grilla { display: grid; gap: clamp(.9rem, 2vw, 1.6rem); grid-template-columns: 1fr 1fr; }
/* La figura es una columna flex y la foto NO lleva height:100%. Con
   height:100% la imagen se comia el alto entero de la celda —que en una
   grilla lo fija el pie mas largo— y el figcaption se salia por abajo:
   la figura de la fila siguiente, que tiene fondo propio, lo tapaba y el
   pie aparecia cortado a la mitad. Con aspect-ratio manda la proporcion
   y el pie siempre cabe. */
.gal {
  margin: 0; background: var(--anochecer-2);
  border: 1px solid var(--linea-osc); padding: .6rem;
  display: flex; flex-direction: column;
}
.gal--abajo { grid-column: 1 / -1; }
.gal img {
  display: block; width: 100%; height: auto; flex: 0 0 auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 3px solid var(--luz);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--claro-2); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--claro-2);
  margin: 1.4rem 0 0; padding-left: 1.1rem; position: relative;
}
.galeria__falta::before { content: '·'; position: absolute; left: .3rem; }

.js .gal.rev { opacity: 0; }
.js .gal--izq.rev   { transform: translateX(-2.4rem); }
.js .gal--der.rev   { transform: translateX(2.4rem); }
.js .gal--abajo.rev { transform: translateY(2.4rem) scale(.98); }
.js .gal.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.js .gal--der.rev.ok   { transition-delay: .12s; }
.js .gal--abajo.rev.ok { transition-delay: .22s; }

@media (max-width: 700px) {
  .galeria__grilla { grid-template-columns: 1fr; }
  .gal--abajo img { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .js .gal.rev { opacity: 1; transform: none; }
}

/* El texto de la portada NO se llama .portada__texto en esta demo sino
   .lam__texto: sin esto queda debajo de la foto, que es un absoluto
   posicionado. El .pueblo —las tres luces dibujadas, que son la firma
   de la página— sube con él. */
.lam--portada .lam__texto { position: relative; z-index: 2; }
.lam--portada .pueblo { z-index: 1; }

/* ── TAJO: LA FRANJA A SANGRE ──
   Una franja de foto entre dos secciones. No lleva texto encima, asi
   que no lleva velo: se ve la foto y punto. Es la aparicion que mas
   llena la pagina por el peso que cuesta. */
/* La clase es .tajo y no .banda ni .franja: hay demos que ya usan esos
   dos nombres para secciones propias, y chocaban. */
.tajo {
  position: relative; overflow: hidden; margin: 0;
  height: clamp(180px, 30svh, 340px);
  background: var(--anochecer-2);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

/* ── TAJO CON FRASE ──
   La variante que sí lleva letra: más alta, y con un velo que SUBE desde
   abajo y arranca en alfa 0. Los dos tercios de arriba de la foto quedan
   a foco completo; el velo sólo existe donde hay texto.
   PEOR CASO MEDIDO: bajo el borde inferior la foto es agua dorada
   (#F5C86A). Con el velo a .93 compone rgb(43,50,66), y contra el blanco
   de la frase da 12,5:1. Vale con cualquier foto que se ponga después. */
.tajo--frase { height: clamp(300px, 46svh, 460px); }
.tajo--frase img { object-position: 50% 62%; }
.tajo__txt {
  position: absolute; inset: auto 0 0 0; margin: 0;
  padding: clamp(3rem, 9vh, 6rem) clamp(1.25rem, 5vw, 4rem) 1.6rem;
  background: linear-gradient(180deg, rgba(27,39,64,0) 0%,
              rgba(27,39,64,.60) 44%, rgba(27,39,64,.86) 76%, rgba(27,39,64,.93) 100%);
}
.tajo__txt p {
  margin: 0; max-width: 30ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.15rem, 2.7vw, 1.9rem); line-height: 1.18;
  color: #FFFFFF;
}
@media (prefers-reduced-motion: no-preference) {
  .tajo img { animation: deriva-tajo 54s ease-in-out infinite alternate; }
}
@keyframes deriva-tajo {
  from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, -1.4%, 0); }
}
.js .tajo { opacity: 0; }
.js .tajo.ok { opacity: 1; transition: opacity 1s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .tajo { opacity: 1; }
}

/* ── TELON: la foto detras de una seccion entera ──
   No es el aura. El aura va reventada a 64 px y se lee como mancha de
   color; el telon va NITIDO y bajo de opacidad, y se lee como foto.
   El texto encima se sostiene porque la foto esta al .15, no porque
   este sucia — que es la regla de siempre. */
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  opacity: .15;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .telon img { animation: deriva-telon 76s ease-in-out infinite alternate; }
}
@keyframes deriva-telon {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.6%, -1%, 0); }
}

/* El telon de las brasas va un punto mas alto de opacidad y corrido a la
   derecha: es una foto casi negra con un solo rectangulo de fuego, asi
   que al .15 desaparecia entera. Calibrado mirando, no copiado: la regla
   es 0,12–0,30 segun cuanto contraste traiga la foto. Y se corre para
   que el fuego no caiga bajo el texto, sino al costado libre. */
.telon--brasas img { opacity: .24; object-position: 68% 46%; }
@media (max-width: 52rem) {
  .telon--brasas img { opacity: .16; object-position: 50% 60%; }
}

/* El telón de la lámina de la llave: un interior de madera con la vista
   al lago. Va corrido a la derecha, que es la mitad que el texto deja
   libre, y a .17 — más que el de los árboles porque la foto es oscura y
   al .15 se perdía entera, menos que el de las brasas porque acá hay
   detalle en toda la superficie y no un solo rectángulo de luz.
   Calibrado mirando, que es la regla: el número no se copia. */
.telon--dentro img { opacity: .17; object-position: 72% 48%; }
@media (max-width: 52rem) {
  .telon--dentro img { opacity: .12; object-position: 50% 48%; }
}

/* ── MOSAICO ──
   Seis piezas en grilla. Es la unica parte de la pagina donde una
   imagen puede repetirse con otro recorte: a este tamano no se lee
   como repeticion sino como serie. */
/* El mosaico trae su propio fondo: sus colores salen del bloque de
   .mitades y hay demos donde ese fondo es el contrario al del body —
   el titulo quedaba a 1,00:1, invisible. Con fondo propio el contraste
   esta garantizado en todas. */
.mos {
  background: var(--anochecer-2);
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.mos__titulo {
  max-width: 82rem; margin-left: auto; margin-right: auto;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.08;
  margin: 0 0 .5rem; color: var(--crudo);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--claro-2); font-size: .94rem; line-height: 1.6;
}
.mos__grilla {
  display: grid; gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 82rem; margin: 0 auto;
}
.mos__p { margin: 0; overflow: hidden; height: clamp(140px, 20svh, 220px); background: var(--anochecer-2); }
.mos__p img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
/* La primera va a dos columnas y la ultima a las tres: rompe la reticula
   de seis iguales, que es lo que separa un mosaico de una tabla de
   contactos, y ademas cierra la fila. Con la sexta a dos columnas
   quedaba una celda vacia abajo a la derecha y el bloque se veia sin
   terminar. */
/* OCHO piezas y no seis: esta demo no lleva video de fondo, y la regla
   de la casa dice que cuando no hay clip el mosaico sube a ocho para
   compensar el peso visual que el video habría puesto.
   El reparto en tres columnas suma 12 unidades exactas —2+1 · 1+1+1 ·
   1+2 · 3— así que no queda ni una celda coja:
     fila 1  [ 1 · 1 ]  2
     fila 2    3   4    5
     fila 3    6   [ 7 · 7 ]
     fila 4  [ · · 8 · · ] */
.mos__p:nth-child(1) { grid-column: span 2; }
.mos__p:nth-child(7) { grid-column: span 2; }
.mos__p:nth-child(8) { grid-column: 1 / -1; }
@media (hover: hover) and (pointer: fine) {
  .mos__p:hover img { transform: scale(1.06); }
}
.js .mos__p { opacity: 0; transform: translateY(1.2rem); }
.js .mos__p.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .mos__p.ok:nth-child(2) { transition-delay: .06s; }
.js .mos__p.ok:nth-child(3) { transition-delay: .12s; }
.js .mos__p.ok:nth-child(4) { transition-delay: .18s; }
.js .mos__p.ok:nth-child(5) { transition-delay: .24s; }
.js .mos__p.ok:nth-child(6) { transition-delay: .30s; }
.js .mos__p.ok:nth-child(7) { transition-delay: .36s; }
.js .mos__p.ok:nth-child(8) { transition-delay: .42s; }
@media (max-width: 760px) {
  /* En dos columnas el reparto vuelve a cerrar: 2 · 1+1 · 1+1 · 1+1 · 2
     son diez unidades justas en cinco filas. */
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  .mos__p:nth-child(1), .mos__p:nth-child(8) { grid-column: 1 / -1; }
  .mos__p:nth-child(7) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LA BANDA DE CIFRAS
   La única banda clara pegada a la portada. Cuatro números en la misma
   fila y con el mismo formato: dos que prueban que el negocio es bueno,
   uno que dice lo que la página agrega, y el cero, que es la herida.
   Que la herida use la MISMA tipografía que el 4,8 es el efecto: se lee
   como un dato más y por eso duele.
   Contraste sobre --crudo: --tinta 16:1 · --tinta-2 5,8:1 · --luz-osc 5,9:1.
   ══════════════════════════════════════════════════════════════════ */
.cifras {
  background: var(--crudo);
  color: var(--tinta);
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  border-bottom: 1px solid var(--linea);
}
.cifras__lista {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 78rem;
  display: grid; gap: 1.6rem clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.cifras__lista li {
  padding-left: 1rem;
  border-left: 3px solid var(--linea);
}
.cifras__lista b {
  display: block;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.3rem, 5.4vw, 3.6rem); line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}
.cifras__lista span {
  display: block;
  font-size: .9rem; line-height: 1.45;
  color: var(--tinta-2);
  max-width: 22ch;
}
/* La herida: mismo cuerpo, otro color, y el filete en el amarillo de la
   página. No lleva contador — un cero que sube desde cero es un truco. */
.cifras__herida { border-left-color: var(--luz-osc); }
.cifras__herida b { color: var(--luz-osc); }
.cifras__pie {
  max-width: 78rem; margin: 1.8rem auto 0;
  font-family: var(--dato); font-size: .72rem; line-height: 1.6;
  color: var(--tinta-2);
}

/* ══════════════════════════════════════════════════════════════════
   EL PORTAL Y EL VECINO — la sección clara del medio
   Dos columnas y ni un dato del negocio: es el argumento escrito, que
   es lo que el dueño necesita ver para entender por qué una página
   propia no es lo mismo que aparecer en un portal.
   La de la izquierda va en gris y con la viñeta apagada; la de la
   derecha lleva el filete amarillo y la ventana como viñeta.
   ══════════════════════════════════════════════════════════════════ */
.contra {
  background: var(--crudo);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.contra__in { max-width: 72rem; margin: 0 auto; }
.contra .paso { color: var(--luz-osc); }
.contra h2 {
  font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.06;
  margin-bottom: 1rem;
}
.contra .entrada { color: var(--tinta-2); }
.contra__cols {
  display: grid; gap: clamp(1.2rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-bottom: 1.8rem;
}
.contra__col { padding: 1.4rem 1.5rem 1.5rem; border-radius: 10px; }
.contra__col h3 {
  font-family: var(--dato); font-weight: 400;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.5; margin-bottom: 1rem;
}
.contra__col ul { list-style: none; margin: 0; padding: 0; }
.contra__col li {
  position: relative; padding-left: 1.5rem;
  margin-bottom: .75rem; font-size: .98rem; line-height: 1.55;
}
.contra__col li:last-child { margin-bottom: 0; }
/* La viñeta es la ventana de la cabecera, en chico: cuadrado con cruz.
   En la columna fría va apagada y en la tibia va encendida. */
.contra__col li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 9px; height: 10px; border-radius: 1px;
}
/* Tercer nivel de claridad dentro de la sección clara: la tarjeta fría
   se hunde un escalón (--crudo-2) y la tibia sube a blanco puro. Sin
   eso las dos se leerían como un solo bloque de color. */
.contra__col--frio {
  background: var(--crudo-2);
  color: var(--tinta-2);
}
.contra__col--frio h3 { color: var(--tinta-2); }
.contra__col--frio li::before { background: #B4AC98; }
.contra__col--tibio {
  background: #FFFFFF;
  border-left: 4px solid var(--luz-osc);
  color: var(--tinta);
}
.contra__col--tibio h3 { color: var(--luz-osc); }
.contra__col--tibio li::before { background: var(--incandescente); box-shadow: 0 0 8px rgba(223,168,62,.55); }
.contra__pie {
  font-size: .93rem; line-height: 1.6; color: var(--tinta-2);
  border-top: 1px solid var(--linea); padding-top: 1.1rem;
  margin: 0; max-width: 52rem;
}

/* ══════════════════════════════════════════════════════════════════
   LA FICHA DEL CIERRE
   Columna fija de 11 rem y filete por fila: se lee como ficha técnica y
   no como tabla de contacto. Lo que falta va marcado con su etiqueta, y
   la etiqueta dice de quién depende — no un genérico «ejemplo».
   ══════════════════════════════════════════════════════════════════ */
.ficha {
  max-width: 44rem; margin: 2.6rem auto 0; text-align: left;
  border-top: 1px solid var(--linea-osc);
}
.ficha > div {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: .2rem 1.4rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--linea-osc);
}
.ficha dt {
  font-family: var(--dato); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--claro-2); padding-top: .22rem;
}
.ficha dd { margin: 0; font-size: .96rem; }
.ficha dd a { text-decoration: none; font-family: var(--dato); }
.ficha dd a:hover { text-decoration: underline; }
.ficha__ej { position: relative; display: inline-block; }
.ficha__ej::after {
  content: attr(data-ejemplo);
  display: block; margin-top: .15rem;
  font-family: var(--dato); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--claro-2);
}
@media (max-width: 40rem) {
  .ficha > div { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   EL CIERRE EN DOS COLUMNAS — ficha y mapa
   La ficha iba sola, centrada y con media pantalla de azul vacío
   debajo. Al lado va el mapa del pueblo, que es lo que contesta la
   pregunta que la ficha deja abierta: dónde queda esto.
   ══════════════════════════════════════════════════════════════════ */
.cierre__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
  max-width: 72rem;
  margin: 2.8rem auto 0;
  text-align: left;
}
.cierre__cols .ficha { margin: 0; max-width: none; }

/* ── MAPA DE UBICACIÓN ──────────────────────────────────────────────
   Imagen propia, servida desde este mismo dominio: la CSP no deja
   cargar mosaicos de OpenStreetMap ni un iframe de Google en vivo.
   La atribución de OSM va VISIBLE en el pie: la licencia ODbL la
   exige y sin ella el mapa no se puede publicar.
   El recorte a 4/3 saca la franja de bosque de abajo y deja el pueblo
   y la playa, que es lo que hay que mirar. */
.mapa {
  margin: 0;
  border: 1px solid var(--linea-osc);
  border-radius: 12px;
  overflow: hidden;
  background: var(--anochecer-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.mapa img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%;
}
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .3rem 1.2rem;
  padding: .8rem 1rem 1rem;
  font-family: var(--dato); font-size: .68rem; line-height: 1.5;
  color: var(--claro-2);
  border-top: 1px solid var(--linea-osc);
}
.mapa__ej { display: block; width: 100%; color: var(--crudo); }
.mapa__ej::after {
  content: attr(data-ejemplo);
  display: block; margin-top: .12rem;
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--claro-2);
}
.mapa__cred a { color: var(--claro-2); }
.mapa__ir {
  margin-left: auto;
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--luz); text-decoration: none;
  font-size: .74rem; letter-spacing: .04em;
}
.mapa__ir span { display: inline-block; margin-left: .35rem; transition: transform .25s ease; }
.mapa__ir:hover { text-decoration: underline; }
.mapa__ir:hover span { transform: translateX(4px); }
@media (max-width: 58rem) {
  .cierre__cols { grid-template-columns: 1fr; }
  .mapa__ir { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mapa__ir:hover span { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   CASCADA — el escalonado de los hijos de una grilla
   El contenedor entra como UNA pieza y se neutraliza; los que animan
   son los hijos, con el retardo por --i. Si no se neutraliza el
   contenedor, contenedor e hijos bajan a la vez y el grupo entero se
   desplaza el doble.
   El --i va por nth-child en el CSS y NUNCA en un style="--i:3": la CSP
   de esta página no permite el atributo style y lo bloquearía sin dejar
   un solo error a la vista.
   ══════════════════════════════════════════════════════════════════ */
.js .cascada.rev      { opacity: 1; transform: none; transition: none; }
.js .cascada.rev > *  { opacity: 0; transform: translateY(22px); }
.js .cascada.rev.ok > * {
  opacity: 1; transform: none;
  transition: opacity .32s ease-out, transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.cascada > :nth-child(1) { --i: 0; }
.cascada > :nth-child(2) { --i: 1; }
.cascada > :nth-child(3) { --i: 2; }
.cascada > :nth-child(4) { --i: 3; }
.cascada > :nth-child(5) { --i: 4; }
.cascada > :nth-child(6) { --i: 5; }
@media (prefers-reduced-motion: reduce) {
  /* El fundido se queda —no es movimiento—; el desplazamiento se va. */
  .js .cascada.rev > * { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   WHATSAPP FLOTANTE
   Botón fijo abajo a la derecha, 56 px de alto: por encima de los 44 del
   mínimo táctil. Verde de WhatsApp a propósito — se reconoce sin leerlo,
   y eso es lo que hace que se toque. Letra #07310F sobre #25D366: 7,3:1.

   La dirección del truco importa: el botón se ve SIEMPRE por defecto y
   el JS sólo lo esconde mientras el visitante está en la portada, para
   no tapar el titular. Si el script no arranca, o si rescate.js quita la
   clase .js, el botón queda visible, que es el estado que vende. Al
   revés —oculto por defecto, revelado por JS— un fallo del script se
   lleva el CTA principal.

   El número es el DEL NEGOCIO, el mismo de los tel:. El de CristalWeb
   vive sólo en la sección del dueño: confundirlos manda los clientes del
   cliente al teléfono equivocado.
   ══════════════════════════════════════════════════════════════════ */
.wapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex; align-items: center; gap: .55rem;
  height: 56px; padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: #25D366;
  color: #07310F;
  text-decoration: none;
  font-family: var(--display); font-weight: 600;
  font-size: .95rem; line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.22);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.wapp__i { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; }
.wapp:hover { box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.24); transform: translateY(-2px); }
.wapp:focus-visible { outline: 3px solid var(--luz); outline-offset: 3px; }
/* Apartado mientras la portada ocupa más de la mitad de la ventana. */
.wapp--arriba { opacity: 0; transform: translateY(1.2rem) scale(.94); pointer-events: none; }
@media (max-width: 520px) {
  /* Bajo 520 px queda el círculo: el rótulo se recorta sin salir del DOM,
     así el lector de pantalla sigue teniendo el aria-label del enlace. */
  .wapp { padding: 0; width: 56px; justify-content: center; }
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .wapp { transition: opacity .28s ease; }
  .wapp:hover { transform: none; }
}

/* El pie deja aire abajo para que el botón flotante no se le encime. */
.pie { padding-bottom: 6.5rem; }