/* ══════════════════════════════════════════════════════════════════
   CABAÑAS LOS BOLDOS · Coñaripe (con tinajas)
   Demo 154. Identidad: «VAPOR DE TINAJA».

   ─────────────────────────────────────────────────────────────────
   REGLA DE SALUD, SIN EXCEPCION
   Ni una palabra sobre beneficios, propiedades del agua o efectos
   terapeuticos. Una tinaja es DESCANSO, no un tratamiento. La pagina
   lo dice explicito en una caja y lo repite en el pie: no es cautela
   legal, es que prometer salud en internet es meterse donde no
   corresponde. Se vende una noche buena, que ya es bastante.
   ─────────────────────────────────────────────────────────────────

   LA DIRECCION EN UNA FRASE
   Noche fria azul-gris con vapor blanco subiendo de la madera
   caliente: es literalmente la escena que alguien compra cuando
   arrienda una cabaña con tinaja en julio.

   LA PALETA
   --noche  #2A3239  azul-gris de noche fria
   --duela  #E3BE96  madera calida — TEXTO (calibrada contra el peor
            de los tres fondos de paso); #C99B6E queda solo para los
            objetos dibujados (la tinaja, el termometro)
   --vapor  #F2F4F3  blanco de vaho — es el ACENTO

   NADA DE VERDE, pese al nombre del negocio: el boldo aparece solo
   NOMBRADO, nunca dibujado ni coloreado. Un verde aca convertiria la
   pagina en «cabañas en el bosque», que es lo que ya son todas.
   DESLINDE DE NOCTURNAS — la madrugada de la 157 lleva rojo de turno;
   la luna de la 169 es plateada y seca. Esta es noche de AGUA
   CALIENTE: el aire esta humedo, y por eso el acento es el vapor.

   EL TRIO
   · display · Josefin Sans — geometrica de x-height baja, nueva en el
     registro. Tiene aire y silencio, que es el tono de la pagina.
   · cuerpo  · Nobile — sans sobria.
   · dato    · B612 Mono — horas y rotulos.

   LA CABECERA (120ª del oficio) — LA TINAJA
   La media circunferencia con las duelas marcadas y la linea de agua
   en el borde de arriba.

   EL FONDO — LAS COLUMNAS DE VAPOR
   Dos columnas ANCHAS y difusas que suben lentas y se disipan.
   DESLINDE OBLIGATORIO de los vapores del registro: el hilo de la 147
   es UNO fino, de taza, y termina en rizo; el vaho de la 104 EMPAÑA
   una vitrina (es una mancha en el vidrio). Estas son columnas de
   agua caliente en aire frio: anchas, sin forma definida, y suben
   rectas.
   Reduced-motion: quietas y translucidas (una columna de vapor
   detenida sigue siendo vapor).

   LA ESTRUCTURA — I (linea de progreso) = EL TERMOMETRO
   La linea lateral se llena de «fria» a «listo» mientras se baja, y
   las secciones son los pasos: encender · temperar · entrar.
   DESLINDE OBLIGATORIO con la 132 (la varilla de aceite): aquella
   medía NIVEL y su escala era MIN/MAX; esta mide TEMPERATURA y su
   escala va de frio a listo. Mismo parentesco de objeto-linea,
   instrumento distinto — y se nota en la forma: la varilla era plana
   y metalica, este tiene bulbo redondo abajo.
   El termometro es ADORNO: el JS solo le cambia la altura al liquido.
   Sin JS se queda lleno y no estorba.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --noche:     #2A3239;
  --noche-2:   #333D45;
  --noche-3:   #445159;
  --vapor:     #F2F4F3;
  --vapor-2:   #E4E8E7;
  /* La madera tiene DOS valores a proposito: los tres fondos de los
     pasos van subiendo de claridad, y el tono de objeto (#C99B6E) que
     rinde 5,2:1 sobre el mas oscuro cae a 3,3:1 sobre el mas claro.
     El de TEXTO se calibro contra el PEOR de los tres. */
  --duela:     #E3BE96;   /* 7,5 · 6,4 · 4,7:1 sobre los tres pasos */
  --duela-obj: #C99B6E;   /* solo para la tinaja dibujada y el termometro */
  --duela-osc: #8A5A2E;   /* 5,3:1 sobre vapor */
  --tinta:     #23292E;
  --tinta-2:   #57616A;   /* 6,0:1 sobre vapor */
  --claro-2:   #BFC7CB;   /* 8,7:1 sobre noche */
  --linea:     #D2D8D7;
  --linea-osc: #3E4A52;

  --display: 'Josefin Sans', system-ui, sans-serif;
  --cuerpo:  'Nobile', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'B612 Mono', ui-monospace, 'Consolas', monospace;
}

*, *::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(--noche);
  color: var(--vapor);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.66;
  overflow-x: hidden;
}

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

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

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--vapor);
  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(--noche);
  border-bottom: 1px solid var(--linea-osc);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(42, 50, 57, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--vapor); margin-right: auto;
}
.cab__nombre {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: .04em;
  line-height: 1.1;
}

/* ── LA TINAJA — media circunferencia con duelas y linea de agua ── */
.tinaja {
  position: relative;
  width: 25px; height: 14px;
  flex: 0 0 auto;
  border-radius: 0 0 13px 13px / 0 0 14px 14px;
  background: repeating-linear-gradient(90deg,
    var(--duela-obj) 0 7px, #94663A 7px 8px);
  overflow: hidden;
}
.tinaja::before {   /* el aro superior */
  content: ''; position: absolute;
  left: 0; right: 0; top: 0; height: 2.5px;
  background: #7E5228;
}
.tinaja::after {    /* la linea de agua */
  content: ''; position: absolute;
  left: 2px; right: 2px; top: 4px; height: 2px;
  background: rgba(242, 244, 243, .7);
  border-radius: 1px;
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .7rem;
  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(--duela); border-bottom-color: var(--duela); }
@media (max-width: 56rem) { .cab__nav { display: none; } }

/* T1 — el rotulo es «Coordinar tinaja», que es lo que de verdad se
   hace al llamar */
.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: .52rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--claro-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.72rem, 1.9vw, .88rem);
  color: var(--duela);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ EL TERMÓMETRO (estructura I) ═══════════ */
.term {
  position: fixed;
  left: clamp(.6rem, 2vw, 1.6rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 20px; height: min(46vh, 22rem);
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
}
@media (max-width: 62rem) { .term { display: none; } }

.term__tubo {
  position: relative;
  width: 8px; flex: 1 1 auto;
  border-radius: 4px 4px 0 0;
  background: rgba(242, 244, 243, .12);
  box-shadow: inset 0 0 0 1px rgba(242, 244, 243, .2);
  overflow: hidden;
  display: flex; align-items: flex-end;
}
/* El liquido sube desde abajo. Su altura la mueve el JS; el 100% de
   aca es lo que se ve si el JS no corre. */
.term__liquido {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #E8A05C, #C97A34 60%, #8A5A2E);
  /* el termometro es objeto: usa el tono de objeto, no el de texto */
  border-radius: 3px 3px 0 0;
}
.js .term__liquido { height: 8%; transition: height .25s linear; }

.term__bulbo {
  width: 16px; height: 16px;
  margin-top: -3px;
  border-radius: 50%;
  background: linear-gradient(150deg, #E8A05C, #8A5A2E);
  box-shadow: 0 0 0 1px rgba(242, 244, 243, .2);
}
.term__rot {
  position: absolute;
  left: 20px;
  font-family: var(--dato);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--claro-2);
  white-space: nowrap;
}
.term__rot--alto { top: -2px; }
.term__rot--bajo { bottom: 16px; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  padding-left: clamp(3rem, 7vw, 6rem);
  background: var(--noche);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 42rem); }

/* ── LAS COLUMNAS DE VAPOR ── */
.vapores { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.vap {
  position: absolute;
  bottom: -18%;
  width: clamp(120px, 20vw, 260px);
  height: 92%;
  border-radius: 50% 50% 42% 42% / 60% 60% 40% 40%;
  background: linear-gradient(0deg,
    rgba(242, 244, 243, .16) 0%,
    rgba(242, 244, 243, .09) 46%,
    rgba(242, 244, 243, 0) 100%);
  filter: blur(26px);
  opacity: 0;
}
.vap--1 { right: 12%; }
.vap--2 { right: 30%; width: clamp(90px, 15vw, 190px); height: 78%; }

.js .vap--1 { animation: sube 21s ease-in-out infinite; }
.js .vap--2 { animation: sube 27s ease-in-out infinite 7s; }

/* Suben rectas y se disipan arriba. No serpentean: el vapor de una
   tinaja al aire libre sube en columna. */
@keyframes sube {
  0%      { transform: translateY(16%) scaleX(.86); opacity: 0;   }
  22%     {                                          opacity: .9;  }
  62%     { transform: translateY(-14%) scaleX(1.1); opacity: .55; }
  100%    { transform: translateY(-34%) scaleX(1.3); opacity: 0;   }
}

.sitio {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--duela);
  margin-bottom: 1.3rem;
}
.portada h1 {
  font-size: clamp(2.3rem, 7vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: .015em;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--claro-2);
  max-width: min(92vw, 34rem);
  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: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: .25rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.dd--tel { font-family: var(--dato) !important; font-size: .95rem !important; }
.dd--tel a { text-decoration: none; }
.dd--tel a:hover { text-decoration: underline; }

/* ═══════════ LOS PASOS ═══════════
   Cada paso sube un poco de temperatura visual: del azul frio de la
   noche al ultimo, que ya tiene madera. */
.paso {
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  padding-left: clamp(3rem, 7vw, 6rem);
  background: var(--noche);
  border-top: 1px solid var(--linea-osc);
}
.paso--medio { background: var(--noche-2); }
.paso--listo { background: var(--noche-3); }
.paso__cuerpo { max-width: min(100%, 46rem); }

.paso__n {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--duela);
  margin-bottom: .7rem;
}
.paso h2, .despues h2 {
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: .015em;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.04rem;
  color: var(--claro-2);
  max-width: min(100%, 35rem);
  margin-bottom: 1.6rem;
}
.entrada em { font-style: italic; }

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

.falta {
  font-family: var(--dato);
  font-size: .84em;
  color: var(--duela);
  border-bottom: 1px dashed var(--duela);
}
/* El fondo decide el tono: la unica seccion clara es la del dueño. */
.dueno .falta, .despues .falta { color: var(--duela); border-bottom-color: var(--duela); }

.huecos { margin: 0; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 16rem) 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: .72rem;
  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; }
.hueco__pq b { color: var(--vapor); }
@media (max-width: 42rem) { .hueco { grid-template-columns: 1fr; } }

/* Fondo SOLIDO, no un blanco al 6%: un fondo translucido hace que
   cualquier auditor de contraste lo tome como opaco y reporte falsos
   positivos de 1,0:1. Ademas asi se ve el bloque de verdad. */
.ojo {
  background: var(--noche-2);
  border-left: 3px solid var(--claro-2);
  padding: 1.2rem 1.4rem;
  max-width: min(100%, 46rem);
  margin-top: 1.8rem;
}
.ojo p { margin: 0; font-size: .95rem; color: var(--claro-2); }
.ojo b { color: var(--vapor); }

/* ═══════════ DESPUÉS DEL AGUA ═══════════ */
.despues {
  background: var(--noche-3);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  padding-left: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--linea-osc);
}
.despues__cuerpo { max-width: min(100%, 46rem); }

.antetitulo {
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: .8rem;
}
.antetitulo--claro { color: var(--duela); }

.secuencia { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.sec {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: .4rem 1.2rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--linea-osc);
}
.sec:last-child { border-bottom: 1px solid var(--linea-osc); }
.sec__n {
  font-family: var(--dato);
  font-size: .82rem;
  color: var(--duela);
  margin: 0;
}
.sec h3 { font-size: 1.4rem; margin: 0 0 .3rem; letter-spacing: .02em; }
.sec p { color: var(--claro-2); font-size: .95rem; margin: 0; }

.firma {
  font-size: .94rem;
  color: var(--claro-2);
  margin: 0;
  max-width: min(100%, 42rem);
}

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--noche);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
  border-top: 1px solid var(--linea-osc);
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .68rem; 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.3rem, 5.6vw, 3.2rem);
  line-height: 1.1;
  color: var(--duela);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { color: var(--vapor); }
.cierre__pie {
  font-size: .95rem;
  color: var(--claro-2);
  max-width: 46rem;
  margin: 0 auto;
}
.cierre__pie em { font-style: italic; color: var(--vapor); }

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--vapor);
  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: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--duela-osc);
  margin-bottom: .5rem;
}
.dueno p { color: var(--tinta-2); font-size: .96rem; margin: 0; }
.dueno .falta { color: var(--duela-osc); border-bottom-color: var(--duela-osc); }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 700;
  color: var(--duela-osc);
  text-decoration: none;
  border-bottom: 1px solid var(--duela-osc);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

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

/* ═══════════ 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 columnas quedan QUIETAS y visibles: una columna de vapor
     detenida sigue leyendose como vapor. Y el termometro deja de
     seguir el scroll —se queda lleno— porque su movimiento es
     decorativo. */
  .js .vap { animation: none; opacity: .7; }
  .js .term__liquido { transition: 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 ── */
.portada--foto { padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { 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(--noche) 0%, var(--noche) 30%,
              rgba(42,50,57,.66) 46%, rgba(42,50,57,.22) 68%, rgba(42,50,57,.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); }
}
.js .portada--foto .portada__foto { opacity: 0; }
.js .portada--foto.ok .portada__foto { opacity: 1; transition: opacity 1.1s ease; }
.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(42,50,57,0) 0%, rgba(42,50,57,.30) 42%, var(--noche) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#p2 { 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(--noche-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(--vapor);
}
.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(--vapor);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--vapor); 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(--noche); overflow: hidden;
}
.cita__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* Velo parejo y fuerte: el texto va centrado y grande, encima de la foto
   entera. Calculado sobre el peor caso —imagen del color contrario
   detrás— para que el ratio aguante sin ensuciar la imagen. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,50,57,.62) 0%,
              rgba(42,50,57,.80) 45%, rgba(42,50,57,.88) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--vapor); }
.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(--vapor);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--duela);
}
.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); }
}

/* ── 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(--vapor);
}
.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; }
.gal { margin: 0; background: var(--noche-2); border: 1px solid var(--linea-osc); padding: .6rem; }
.gal--abajo { grid-column: 1 / -1; }
.gal img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 3px solid var(--duela);
}
.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; }
}

/* ── 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;
  height: clamp(180px, 30svh, 340px);
  background: var(--noche-2);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@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); }
}

/* ── 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(--noche-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(--vapor);
}
.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(--noche-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;
}
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
@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; }
@media (max-width: 760px) {
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

/* ── MAPA DE UBICACION ──────────────────────────────────────────────
   Imagen propia con mosaicos de OpenStreetMap pegados: la CSP prohibe
   pedir nada a un tercero, asi que un iframe de Google Maps quedaria en
   blanco SIN dar un solo error. El "Como llegar" si es un enlace, y un
   enlace no lo bloquea nada.
   Los colores salen de currentColor a proposito: asi el bloque se adapta
   a la paleta de cada demo sin conocerla y sin chocar con ella.
   La atribucion a OpenStreetMap la exige su licencia (ODbL). */
.mapa-sec { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.mapa { margin: 1.4rem 0 0; border: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); border-radius: 10px; overflow: hidden; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa { border-color: rgba(128, 128, 128, .35); } }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
  padding: .75rem .9rem;
  font-size: .86em; line-height: 1.45;
  border-top: 1px solid; border-top-color: color-mix(in srgb, currentColor 22%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .mapa__pie { border-top-color: rgba(128, 128, 128, .35); } }
.mapa__pie b { font-weight: 700; }
.mapa__ir { color: inherit; font-weight: 700; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.mapa__cred { width: 100%; font-size: .84em; opacity: .8; }
.mapa__cred a { color: inherit; }
/* ── BOTON FLOTANTE DE CONTACTO ─────────────────────────────────────
   56 px de alto, por encima del minimo tactil de 44. Los colores de
   marca van a proposito: se reconocen sin leerlos, y eso es lo que hace
   que se toquen. Se ve SIEMPRE por defecto; el JS solo lo aparta sobre
   la portada. Al reves, un fallo del script se llevaria el CTA principal. */
.flota {
  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;
  text-decoration: none;
  font-family: var(--cuerpo, system-ui, sans-serif);
  font-size: .95rem; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .26), 0 2px 6px rgba(0, 0, 0, .16);
  transition: opacity .28s ease, transform .28s ease, box-shadow .18s ease;
}
.flota--wa { background: #25D366; color: #07310F; }
.flota--ig { background: linear-gradient(120deg, #F9CE34 4%, #EE2A7B 48%, #6228D7 96%); color: #FFFFFF; }
.flota__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.flota:hover, .flota:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.js .flota--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }

@media (max-width: 520px) {
  .flota { width: 56px; padding: 0; justify-content: center; }
  .flota__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .flota { transition: opacity .28s ease; }
  .flota:hover, .flota:focus-visible { transform: none; }
  .js .flota--arriba { transform: none; }
}