/* ══════════════════════════════════════════════════════════════════
   CABAÑAS ANTU KUYEN · Villarrica
   Demo 152. Identidad y MECANICA: «DE DIA A NOCHE».

   ─────────────────────────────────────────────────────────────────
   REGLA CULTURAL
   El nombre es en mapudungun y se escribe TAL CUAL. Su significado NO
   se ilustra: no hay ni un sol ni una luna dibujados en esta pagina.
   Lo que hay es LUZ AMBIENTAL —el fondo que oscurece— que es un
   fenomeno, no un simbolo. Si algun dia se quiere explicar el nombre,
   lo explican los dueños; una pagina web no traduce por su cuenta.
   ─────────────────────────────────────────────────────────────────

   LA MECANICA (nueva en el registro) — LA PAGINA OSCURECE CON EL
   SCROLL. Cinco escalones de luz, de la crema de las ocho de la
   mañana al azul de las once de la noche. NO es un gradiente
   continuo: son cinco fondos con su propio par texto/fondo, cada uno
   medido aparte.
   Esta mecanica ES el fondo de la pagina: no lleva ningun otro dibujo
   animado. Una pagina que cambia de hora no necesita mas. (Se anota
   como «mecanica-fondo», igual que la boleta de la 134 fue
   «estructura-identidad».)

   LOS CINCO ESCALONES Y SUS PARES MEDIDOS
   e1 #F4EFE4 crema mañana   + tinta #26241E   →  14,8:1
   e2 #E9E3D6 media mañana   + tinta #26241E   →  13,3:1
   e3 #CFCEC9 mediodia plano + tinta #26241E   →   9,8:1
   e4 #4A5162 tarde          + plata #DDE3EC   →   6,2:1
   e5 #1C2333 noche          + plata #DDE3EC   →  13,1:1

   El salto de e3 a e4 es donde «se prende la luz»: es el unico punto
   donde el texto cambia de oscuro a claro, y esta puesto justo en el
   capitulo de las 18 h. Un gris intermedio con texto oscuro no
   llegaba a 4,5:1 —se probo #7E8390 y daba 4,1— asi que el escalon de
   la tarde se oscurecio hasta poder llevar texto claro. La mecanica
   se ajusto al contraste, no al reves.

   EL ACENTO — en la mitad clara es la TINTA (no hay color); en la
   mitad oscura es PLATA FRIA. DESLINDE: el amarillo de ventana es de
   la 149. La noche de esta pagina es PLATEADA, no calida: son dos
   noches distintas del mismo registro.

   EL TRIO
   · display · Poiret One — geometrica finisima, nueva en el registro.
   · cuerpo  · Rosario — humanista limpia.
   · dato    · Martian Mono — para las horas y los rotulos.

   LA CABECERA (118ª del oficio) — EL INTERRUPTOR
   La placa con la palanquita. Ningun logotipo del registro es un
   interruptor, y aca es ademas la mecanica de la pagina hecha objeto.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --e1: #F4EFE4;
  --e2: #E9E3D6;
  --e3: #CFCEC9;
  --e4: #4A5162;
  --e5: #1C2333;

  --tinta:    #26241E;
  --tinta-2:  #5A564A;   /* 6,4:1 sobre e2 */
  --plata:    #DDE3EC;
  --plata-2:  #B4BECD;   /* sobre e4 y e5 */
  --acento-o: #3E4757;   /* acento de la mitad clara */
  --linea-cl: #D3CDBE;
  --linea-e3: #B9B8B2;
  --linea-osc:#5E6779;

  --display: 'Poiret One', Georgia, sans-serif;
  --cuerpo:  'Rosario', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Martian 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(--e1);
  color: var(--tinta);
  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(--acento-o); color: var(--e1); }
a { color: var(--acento-o); }
:focus-visible { outline: 2px solid var(--acento-o); outline-offset: 3px; }

/* ═══ LOS CINCO ESCALONES ═══
   Cada seccion declara su escalon. El empalme entre uno y otro es un
   corte limpio a proposito: son horas del dia, no un degradado. */
.e1 { background: var(--e1); color: var(--tinta); }
.e2 { background: var(--e2); color: var(--tinta); }
.e3 { background: var(--e3); color: var(--tinta); }
.e4 { background: var(--e4); color: var(--plata); }
.e5 { background: var(--e5); color: var(--plata); }

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

/* ─────────── cabecera fantasma ───────────
   Arranca clara y legible. El JS la va oscureciendo junto con la
   pagina; si no corre, se queda clara y se lee igual. */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--e1);
  color: var(--tinta);
  border-bottom: 1px solid var(--linea-cl);
}
.js .cab { transition: background .6s ease, color .6s ease, border-color .6s ease; }
.cab--noche {
  background: var(--e5);
  color: var(--plata);
  border-bottom-color: var(--linea-osc);
}
.cab--noche .cab__nav a,
.cab--noche .cab__tel-rot { color: var(--plata-2); }
.cab--noche .cab__tel-num { color: var(--plata); }
.cab--noche .cab__tel { border-left-color: var(--linea-osc); }
.cab--noche .interruptor { background: #333C4E; color: var(--plata); }

.cab__marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre {
  font-family: var(--display);
  font-size: 1.4rem;
  letter-spacing: .06em;
  line-height: 1.1;
}

/* ── EL INTERRUPTOR — placa y palanquita ── */
.interruptor {
  position: relative;
  width: 15px; height: 21px;
  flex: 0 0 auto;
  background: #DED8CA;
  color: var(--tinta);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(38, 36, 30, .35);
}
.js .interruptor { transition: background .6s ease, color .6s ease; }
.interruptor::after {
  content: ''; position: absolute;
  left: 3.5px; right: 3.5px; top: 3.5px; height: 8px;
  background: currentColor;
  border-radius: 1px;
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a:hover { border-bottom-color: currentColor; }
@media (max-width: 54rem) { .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-cl);
  flex: 0 0 auto;
}
.js .cab__tel { transition: border-color .6s ease; }
.cab__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .52rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.7rem, 1.9vw, .86rem);
  color: var(--acento-o);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.portada__texto { max-width: min(92vw, 42rem); }

.sitio {
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1.3rem;
}
.portada h1 {
  font-size: clamp(2.4rem, 7.6vw, 5.2rem);
  line-height: 1.06;
  letter-spacing: .02em;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--tinta-2);
  max-width: min(92vw, 34rem);
  margin-bottom: 2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0 0 2rem; }
.spec dt {
  font-family: var(--dato);
  font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-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; }

/* El aviso de la mecánica: se dice, no se deja adivinar. */
.aviso-luz {
  font-family: var(--dato);
  font-size: .74rem;
  line-height: 1.7;
  color: var(--tinta-2);
  border-left: 2px solid var(--acento-o);
  padding-left: .9rem;
  margin: 0;
  max-width: 34rem;
}

/* ═══════════ BLOQUES DE CONTENIDO ═══════════ */
.trabajar, .cap {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.bloque { max-width: min(100%, 46rem); }

.antetitulo {
  font-family: var(--dato);
  font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: .8rem;
}
.e4 .antetitulo, .e5 .antetitulo { color: var(--plata-2); }

h2 {
  font-size: clamp(2rem, 5.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: .015em;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--tinta-2);
  max-width: min(100%, 36rem);
  margin-bottom: 1.4rem;
}
.entrada em { font-style: italic; }

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

.falta {
  font-family: var(--dato);
  font-size: .82em;
  color: var(--acento-o);
  border-bottom: 1px dashed var(--acento-o);
}
/* El fondo decide el tono: en los dos escalones oscuros, plata. */
.e4 .falta, .e5 .falta { color: var(--plata); border-bottom-color: var(--plata); }

/* ── la pieza firma: el checklist del teletrabajo ── */
.chk { list-style: none; margin: 0 0 1.8rem; padding: 0; counter-reset: c; }
.ck {
  counter-increment: c;
  position: relative;
  padding: 1.2rem 0 1.2rem 2.8rem;
  border-top: 1px solid var(--linea-cl);
}
.ck:last-child { border-bottom: 1px solid var(--linea-cl); }
.ck::before {
  content: counter(c, decimal-leading-zero);
  position: absolute; left: 0; top: 1.4rem;
  font-family: var(--dato);
  font-size: .7rem;
  color: var(--acento-o);
}
.ck__q {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: .015em;
  margin: 0 0 .35rem;
}
.ck__a { margin: 0 0 .45rem; }
.ck__pq { font-size: .93rem; color: var(--tinta-2); margin: 0; }
.ck__pq b { color: var(--tinta); }

.firma {
  font-size: .94rem;
  color: var(--tinta-2);
  margin: 0;
  max-width: min(100%, 44rem);
}
.firma--noche { color: var(--plata-2); margin-top: 1.6rem; }

/* ── los capítulos por hora (estructura F) ── */
.cap {
  display: grid;
  grid-template-columns: clamp(4rem, 10vw, 8.5rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 4vw, 3rem);
}
/* El numeral del patrón F es LA HORA. */
.cap__h {
  font-family: var(--display);
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: .82;
  letter-spacing: .01em;
  margin: 0;
  opacity: .34;
}
.cap__cuerpo { max-width: min(100%, 42rem); }
.cap__cuerpo p { color: var(--tinta-2); }
/* El escalon de la tarde NO aguanta el gris secundario: medido dio
   4,23:1. En e4 el texto secundario sube a plata plena (6,2:1); en e5
   el fondo es mucho mas oscuro y plata-2 alcanza de sobra. Es
   exactamente por esto que los cinco pares se miden por separado. */
.e4 .cap__cuerpo p { color: var(--plata); }
.e5 .cap__cuerpo p { color: var(--plata-2); }
.e4 .firma, .e4 .antetitulo { color: var(--plata); }

.huecos { margin: 1.4rem 0 0; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
  gap: .3rem 1.6rem;
  padding: .85rem 0;
  border-top: 1px solid var(--linea-cl);
}
.hueco:last-child { border-bottom: 1px solid var(--linea-cl); }
.e3 .hueco { border-color: var(--linea-e3); }
.e4 .hueco, .e5 .hueco { border-color: var(--linea-osc); }
.huecos dt { font-family: var(--dato); font-size: .72rem; align-self: center; }
.huecos dd { margin: 0; text-align: right; }
@media (max-width: 40rem) {
  .hueco { grid-template-columns: 1fr; }
  .huecos dd { text-align: left; }
}

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 10vh, 7rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--plata-2);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.2rem, 5.4vw, 3rem);
  line-height: 1.1;
  color: var(--plata);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { text-decoration: underline; }
.cierre__pie { font-size: .93rem; color: var(--plata-2); margin: 0; }

/* ═══════════ PARA EL DUEÑO ═══════════
   Vuelve al claro: es la parte que se lee con la luz prendida. */
.dueno {
  background: var(--e2);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); 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: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acento-o);
  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: 700;
  color: var(--acento-o);
  text-decoration: none;
  border-bottom: 1px solid var(--acento-o);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--e5);
  color: var(--plata-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) {
  /* La mecanica de luz NO se apaga: no es una animacion, son cinco
     fondos distintos. Lo unico que se quita es la transicion de la
     cabecera, que si es un movimiento. */
  .js .cab, .js .interruptor, .js .cab__tel { 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 { 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: 56% 50%;
  -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(--e1) 0%, var(--e1) 30%,
              rgba(244,239,228,.66) 46%, rgba(244,239,228,.22) 68%, rgba(244,239,228,.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(244,239,228,0) 0%, rgba(244,239,228,.30) 42%, var(--e1) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#trabajar { 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(--e2);
  /* 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(--tinta);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-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(--tinta);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--tinta); 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 ── */
/* Excepcion a proposito: la pagina va oscureciendo hora por hora y esta
   cita cae en el capitulo de las 23:00. El velo va con --e5 y el texto
   en plata; con el velo claro del resto la seccion se prendia sola y
   rompia la unica idea que sostiene el diseno. */
.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(--e5); 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(28,35,51,.62) 0%,
              rgba(28,35,51,.80) 45%, rgba(28,35,51,.88) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--plata); }
.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(--plata);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--plata-2);
}
.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-cl); }
.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(--tinta);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--tinta-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(--e2); border: 1px solid var(--linea-cl); 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(--acento-o);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--tinta-2); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--tinta-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(--e2);
}
.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(--e2);
  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(--tinta);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--tinta-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(--e2); }
.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; }