/* ══════════════════════════════════════════════════════════════════
   SENTIERO · Villarrica — restaurante
   Demo 140. Identidad: «MANTEL BLANCO Y VINO».

   LA DIRECCION EN UNA FRASE
   Un mantel blanco recien planchado con una copa de tinto encima:
   transmite mesa vestida y noche que se planifica, que es exactamente
   lo que busca alguien reservando para un aniversario o una pedida.

   LA PALETA
   --mantel   #FBFAF7  blanco CALIDO de tela planchada
   --tinta    #1A1714  tinta casi negra, calida (17,3:1 sobre mantel)
   --borgona  #6B1F2E  vino EN COPA (10,8:1 sobre mantel)

   DESLINDES DE PALETA — los dos que estaban a mano:
   · bogota (barberia vintage) es crema envejecida + burdeos de
     TAPICERIA: color de mueble, opaco, en superficies grandes.
     Aca el borgona es LIQUIDO en un vaso: aparece en poquisimo
     —la copa, los enlaces, una regla fina, la mancha del numeral—
     y nunca cubre un bloque.
   · la 128 (Salon Supremo) tambien es fondo blanco, pero es blanco
     FRIO de acero. Este es blanco de TELA: tiene amarillo adentro.
     Puestos lado a lado no se confunden.

   EL TRIO — las tres nuevas en el registro
   · display · Rosarivo — serif de libro construida sobre la
     proporcion aurea. Se eligio fina a proposito: los numerales de
     capitulo a 10rem en una serif de trazo delgado se leen como
     pagina de libro, no como cartel. Todo el registro tira a
     displays gruesas; esta es la primera que apuesta a lo contrario.
   · cuerpo  · Albert Sans — grotesca limpia, sin epoca. No compite.
   · dato    · Lekton — mono del Politecnico de Milan, dibujada sobre
     las Olivetti. Es el unico guino al nombre que me permito: el
     nombre es italiano, la COCINA NO CONSTA y no se inventa.

   LA CABECERA (106ª del oficio) — LA COPA
   Caliz, tallo y pie en linea de 1px, con el vino como media luna
   borgona adentro. Cuatro cajas CSS, cero imagenes.

   EL FONDO — LA LLAMA DE LA VELA
   Una llama con FORMA que tiembla, abajo a un lado de la portada.
   Deslinde: las brasas de la 98 respiran en brillo sin forma; el
   fuego de la 144 se ve por rendijas; la ventanita de la 153 es un
   rectangulo calido. Esta es UNA llama, con punta, y tiembla.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --mantel:        #FBFAF7;
  --mantel-2:      #F4F0E8;
  --tinta:         #1A1714;
  --tinta-2:       #5C534A;   /* 7,2:1 sobre mantel */
  --borgona:       #6B1F2E;   /* 10,8:1 sobre mantel */
  --borgona-claro: #DDA3A8;   /* 8,1:1 sobre tinta — para el capitulo oscuro */
  --claro-2:       #B9AFA3;   /* 8,3:1 sobre tinta */
  --mancha:        #E7D5D8;   /* el numeral gigante: mancha de copa. Decorativo */
  --mancha-osc:    #3B2329;
  --linea:         #E4DED4;
  --linea-osc:     #35302B;

  --display: 'Rosarivo', Georgia, 'Times New Roman', serif;
  --cuerpo:  'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Lekton', 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(--mantel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.68;
  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(--borgona); color: var(--mantel); }

a { color: var(--borgona); }
:focus-visible { outline: 2px solid var(--borgona); outline-offset: 3px; }

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

/* ─────────── cabecera fantasma ───────────
   Solida por defecto. El JS le agrega .cab--flota para volverla
   translucida: si el script no corre, queda legible igual. */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--mantel);
  border-bottom: 1px solid var(--linea);
}
.js .cab { transition: background .3s ease, border-color .3s ease; }
.cab--flota {
  background: rgba(251, 250, 247, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--tinta); margin-right: auto;
}
.cab__nombre {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: .01em;
}

/* ── LA COPA — caliz + vino + tallo + pie ──
   .copa  = el caliz (borde en U)
   ::before = el vino, media luna dentro del caliz
   ::after  = el tallo
   i        = el pie */
.copa {
  position: relative;
  width: 17px; height: 15px;
  flex: 0 0 auto;
  margin-bottom: 11px;   /* deja sitio al tallo y al pie */
  border: 1px solid var(--tinta);
  border-top: 0;
  border-radius: 0 0 48% 48% / 0 0 74% 74%;
}
.copa::before {
  content: ''; position: absolute;
  left: 1px; right: 1px; bottom: 1px; height: 7px;
  background: var(--borgona);
  border-radius: 0 0 48% 48% / 0 0 82% 82%;
}
.copa::after {
  content: ''; position: absolute;
  left: 50%; top: 100%; width: 1px; height: 8px;
  margin-left: -.5px;
  background: var(--tinta);
}
.copa i {
  position: absolute;
  left: 50%; top: calc(100% + 8px);
  width: 13px; height: 1px; margin-left: -6.5px;
  background: var(--tinta);
}

.cab__nav { display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.cab__nav a:hover { color: var(--borgona); border-bottom-color: var(--borgona); }
@media (max-width: 46rem) { .cab__nav { display: none; } }

.cab__res {
  text-align: right; text-decoration: none; line-height: 1.15;
  padding-left: 1.1rem; border-left: 1px solid var(--linea);
}
.cab__res-rot {
  display: block; font-family: var(--dato);
  font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__res-num {
  display: block; font-family: var(--display);
  font-size: 1.05rem; color: var(--borgona);
}
.cab__res:hover .cab__res-num { text-decoration: underline; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background:
    /* el calor de la vela sobre el mantel, muy tenue */
    radial-gradient(46rem 30rem at 14% 88%, rgba(214, 150, 66, .10), transparent 70%),
    var(--mantel);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 46rem); }

.sitio {
  font-family: var(--dato);
  font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1.4rem;
}
.portada h1 {
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin-bottom: 1.6rem;
}
.portada h1 em { font-style: italic; color: var(--borgona); }
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  color: var(--tinta-2);
  max-width: min(92vw, 34rem);
  margin-bottom: 2.2rem;
}

.specs { display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: .2rem;
}
.spec dd {
  margin: 0; font-family: var(--display);
  font-size: 1.75rem; line-height: 1;
}

/* ── LA VELA ──
   Cuatro cajas: halo, llama, cuerpo. Sobre blanco una llama no puede
   ser brillante —seria una mancha— asi que es una llama VISTA DE DIA:
   ambar palido con nucleo mas claro. */
.vela {
  position: absolute;
  left: clamp(1.25rem, 5vw, 4rem);
  bottom: clamp(2rem, 7vh, 5rem);
  width: 46px; height: 128px;
  z-index: 1;
  pointer-events: none;
}
.vela__halo {
  position: absolute;
  left: 50%; top: -14px;
  width: 130px; height: 130px; margin-left: -65px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 160, 62, .30), rgba(226, 160, 62, 0) 66%);
}
.vela__llama {
  position: absolute;
  left: 50%; top: 6px;
  width: 15px; height: 26px; margin-left: -7.5px;
  /* la punta arriba la hace el radio vertical alto de las dos
     esquinas superiores */
  border-radius: 50% 50% 42% 42% / 84% 84% 16% 16%;
  background:
    radial-gradient(ellipse at 50% 74%, rgba(255, 250, 235, .95) 0%, rgba(246, 200, 110, .9) 42%, rgba(226, 150, 52, .78) 100%);
  transform-origin: 50% 100%;
}
.vela__cuerpo {
  position: absolute;
  left: 50%; top: 34px;
  width: 26px; height: 94px; margin-left: -13px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(100deg, #F6F1E4 0%, #FFFDF7 34%, #EDE5D2 100%);
  box-shadow: 0 1px 0 rgba(26, 23, 20, .07) inset;
}
.vela__cuerpo::before {   /* el pabilo */
  content: ''; position: absolute;
  left: 50%; top: -5px; width: 1px; height: 6px; margin-left: -.5px;
  background: #6B5A44;
}

.js .vela__llama { animation: tiembla 3.4s ease-in-out infinite; }
.js .vela__halo  { animation: respira 3.4s ease-in-out infinite; }

/* La llama nunca se apaga ni salta: se estira, se encoge y se corre
   una fraccion de pixel. Una llama que salta parece un GIF. */
@keyframes tiembla {
  0%,100% { transform: translateX(0)     scale(1,     1);    }
  18%     { transform: translateX(.6px)  scale(.95, 1.06);   }
  34%     { transform: translateX(-.4px) scale(1.04, .96);   }
  52%     { transform: translateX(.3px)  scale(.97, 1.09);   }
  70%     { transform: translateX(-.6px) scale(1.03, .98);   }
  86%     { transform: translateX(.2px)  scale(.99, 1.03);   }
}
@keyframes respira {
  0%,100% { opacity: 1;   transform: scale(1);    }
  34%     { opacity: .78; transform: scale(.94);  }
  70%     { opacity: .92; transform: scale(1.03); }
}

/* ═══════════ ESTRUCTURA F — los capitulos ═══════════
   Rejilla dura y asimetrica: el numeral ocupa una columna fija que
   NO se reparte el sobrante; todo el sobrante va al texto. */
.cap {
  display: grid;
  grid-template-columns: clamp(4.5rem, 11vw, 10rem) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.cap__cuerpo { max-width: min(100%, 44rem); }

/* El numeral: mancha de copa. Decorativo (aria-hidden en el HTML). */
.cap__n {
  font-family: var(--display);
  font-size: clamp(3.6rem, 10vw, 9rem);
  line-height: .8;
  color: var(--mancha);
  margin: 0;
  letter-spacing: -.03em;
}
.cap__n--claro { color: var(--mancha-osc); }

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

.cap h2 {
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.08rem;
  color: var(--tinta-2);
  max-width: min(100%, 38rem);
  margin-bottom: 2.2rem;
}

.marca-ejemplo { margin: 0 0 1.8rem; }
.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--borgona);
  border-left: 2px solid var(--borgona);
  padding-left: .6rem;
}
.firma {
  font-size: .92rem;
  color: var(--tinta-2);
  border-top: 1px solid var(--linea);
  padding-top: 1rem;
  margin-top: 2.2rem;
  max-width: min(100%, 40rem);
}
.firma--claro { color: var(--claro-2); border-top-color: var(--linea-osc); }

.falta {
  font-family: var(--dato);
  font-size: .9em;
  color: var(--borgona);
  border-bottom: 1px dashed var(--borgona);
}
.cap--tinta .falta { color: var(--borgona-claro); border-bottom-color: var(--borgona-claro); }

/* ── 01 LLEGAR — la reserva ── */
.reservar { max-width: min(100%, 34rem); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.campo--ancho { grid-column: 1 / -1; }
@media (max-width: 34rem) { .form { grid-template-columns: 1fr; } }

.campo label {
  display: block;
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: .4rem;
}
.opcional { text-transform: none; letter-spacing: .02em; }
.campo input {
  width: 100%;
  font-family: var(--cuerpo);
  font-size: 1rem;
  color: var(--tinta);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--tinta);
  border-radius: 0;
  padding: .5rem 0;
  -webkit-appearance: none; appearance: none;
}
.campo input::placeholder { color: #9A9186; }
.campo input:focus { outline: none; border-bottom-color: var(--borgona); border-bottom-width: 2px; }

.resumen {
  grid-column: 1 / -1;
  font-family: var(--dato);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--tinta-2);
  background: var(--mantel-2);
  border-left: 2px solid var(--borgona);
  padding: .9rem 1rem;
  margin: .6rem 0 0;
}
.boton {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-block;
  font-family: var(--cuerpo);
  font-weight: 600;
  font-size: .95rem;
  color: var(--mantel);
  background: var(--borgona);
  text-decoration: none;
  padding: .8rem 1.6rem;
  border-radius: 2px;
}
.boton:hover { background: #551824; }
.reservar__nota {
  grid-column: 1 / -1;
  font-size: .86rem;
  color: var(--tinta-2);
  margin: 0;
}

/* ── 02 PEDIR — capitulo en tinta ── */
.cap--tinta {
  background: var(--tinta);
  color: var(--mantel);
  border-top-color: var(--tinta);
}
.cap--tinta .entrada { color: var(--claro-2); }

.huecos { list-style: none; margin: 0; padding: 0; }
.huecos li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  gap: .4rem 2rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--linea-osc);
}
.huecos li:last-child { border-bottom: 1px solid var(--linea-osc); }
.huecos__q {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 0;
  grid-column: 1;
}
.huecos__a { margin: 0; grid-column: 2; grid-row: 1; align-self: center; }
.huecos__pq {
  grid-column: 1 / -1;
  font-size: .94rem;
  color: var(--claro-2);
  margin: .35rem 0 0;
  max-width: 46rem;
}
@media (max-width: 40rem) {
  .huecos li { grid-template-columns: 1fr; }
  .huecos__a { grid-column: 1; grid-row: auto; }
}

/* ── 03 CELEBRAR — la pieza firma ── */
.cap--firma { background: var(--mantel-2); border-top-color: var(--linea); }
.cap--firma .resumen { background: var(--mantel); }

.ocasion { list-style: none; margin: 0; padding: 0; counter-reset: oc; }
.oc {
  position: relative;
  counter-increment: oc;
  padding: 1.5rem 0 1.5rem 3rem;
  border-top: 1px solid var(--linea);
}
.oc:last-child { border-bottom: 1px solid var(--linea); }
.oc::before {
  content: counter(oc, decimal-leading-zero);
  position: absolute; left: 0; top: 1.55rem;
  font-family: var(--dato);
  font-size: .8rem;
  color: var(--borgona);
}
.oc__q {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.22;
  margin: 0 0 .35rem;
}
.oc__a { margin: 0 0 .5rem; }
.oc__pq {
  font-size: .96rem;
  color: var(--tinta-2);
  margin: 0;
  max-width: 44rem;
}

/* ── 04 VOLVER ── */
.cierre { margin: 0; }
.cierre__par {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: .5rem 1.5rem;
  padding: .85rem 0;
  border-top: 1px solid var(--linea);
}
.cierre__par:last-child { border-bottom: 1px solid var(--linea); }
.cierre dt {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
  align-self: center;
}
.cierre dd { margin: 0; font-family: var(--display); font-size: 1.15rem; }

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--tinta);
  color: var(--mantel);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.dueno h2 {
  font-size: clamp(1.9rem, 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: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--borgona-claro);
  font-weight: 400;
  margin-bottom: .5rem;
}
.dueno p { color: var(--claro-2); font-size: .96rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-family: var(--cuerpo);
  font-weight: 600;
  color: var(--borgona-claro);
  text-decoration: none;
  border-bottom: 1px solid var(--borgona-claro);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--mantel); border-bottom-color: var(--mantel); }

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

/* ═══════════ APARICIONES ═══════════
   Todo estado oculto cuelga de .js. Sin JS no hay nada que revelar. */
.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) {
  /* Se apaga lo que se mueve solo en bucle. La llama queda QUIETA:
     una vela quieta sigue siendo una vela. Los fundidos de scroll se
     mantienen —apagarlos deja la pagina muerta. */
  .js .vela__llama, .js .vela__halo { animation: 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: 46% 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%);
}
/* El velo se escribe ENTERO en rgba y termina en alfa 0. Con var() en
   los primeros stops habia demos donde el gradiente tapaba la foto de
   punta a punta —paso tres veces— y costaba una captura cada vez
   entenderlo. En rgba puro el degradado es el mismo y no falla. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(251,250,247,1) 0%, rgba(251,250,247,1) 26%,
              rgba(251,250,247,.70) 42%, rgba(251,250,247,.28) 62%, rgba(251,250,247,.08) 80%,
              rgba(251,250,247,0) 94%);
}
@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(251,250,247,0) 0%, rgba(251,250,247,.30) 42%, var(--mantel) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#c1 { 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(--mantel-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(--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 ── */
.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(--mantel); 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(251,250,247,.72) 0%,
              rgba(251,250,247,.84) 45%, rgba(251,250,247,.90) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--tinta); }
.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(--tinta);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--borgona);
}
.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); }
.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(--mantel-2); border: 1px solid var(--linea); 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(--borgona);
}
.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(--mantel-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(--mantel-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(--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(--mantel-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; }