/* ══════════════════════════════════════════════════════════════════
   SUPERMERCADO Y PANADERIA BLAS REYES · Loncoche
   Demo 186. Identidad: «PAPEL DE ENVOLVER Y CORTEZA».
   **CIERRA LA TANDA P4** (137-186) y la cuenta de cabeceras.

   NOTA 4,3: SE OMITE (regla de la casa). Se citan las 86 reseñas
   como volumen, que es otra cosa.

   PARES OBLIGADOS DEL MISMO PUEBLO — Y LO QUE NO SE PUEDE REPETIR:
   la 134 (Supermercado Any) ya tiene su pieza (la boleta, los locales,
   la madrugada) y la 73 (Panaderia Los Romero) ya tiene la suya («¿a
   que hora sale el pan?»). **Ninguna de las dos se toca.** La pieza
   de esta es LA COLACION, y la seccion de la panaderia menciona que
   el pan es propio SIN convertir el horario de horneo en pieza.

   LA DIRECCION EN UNA FRASE
   El pliego de papel en que se envuelve el pan, y el dorado mate de
   la marraqueta bien horneada. La pagina envuelve su contenido en
   papel blanco y lo unico calido es la corteza.

   LA PALETA
   --papel    #FBFAF6  el pliego
   --panel    #F0EDE4  el bloque secundario
   --corteza  #7A4E22  para TEXTO (6,1:1 sobre panel)
   --cort-ob  #B77F3E  la misma para OBJETOS
   --miga     #6A6259  secundario (5,3:1 sobre panel)
   --tinta    #24201A
   --hondo    #2E2820  la seccion oscura

   DESLINDE DE DORADOS Y CAFES: la fritura de la 142 es dorado
   BRILLANTE de aceite; el piñon de la 143 es cascara LUSTROSA; el
   mimbre de la 135 es TEJIDO; el pelaje de la 166 es MATE de animal;
   el kraft de la 181 es papel de embalaje. **La corteza es HORNEADA:
   mate, opaca, con harina encima** — y el blanco no es blanco de
   pantalla, es PAPEL DE ENVOLVER.

   EL TRIO
   · display · Baloo Bhaijaan 2 (variable) — redondeada y con peso,
     de rotulo de panaderia. Primera vez en el registro.
   · cuerpo  · Public Sans — neutra.
   · dato    · Fira Mono — REPETICION CONSCIENTE: el catalogo esta
     agotado; es la mas de planilla de pedidos que queda.

   LA CABECERA (151ª del oficio — LA ULTIMA DE LA TANDA)
   LA MARRAQUETA: los cuatro lobulos vistos desde arriba, con la cruz
   del corte. **Es la forma mas chilena que existe**, y cerrar el
   contador de la tanda en pan es cerrarlo bien.
   (151ª y no 152ª porque la 179 quedo en pausa.)

   EL FONDO — LA HARINA QUE ESPOLVOREA
   Polvillo fino que cae RECTO y lentisimo en una franja, y **SE
   ACUMULA en una linea tenue abajo** que va apareciendo.
   **DESLINDE — EL CUARTETO DE LAS CAIDAS, completo**:
     · las chispas de la 92 SUBEN flotando (aire caliente)
     · los petalos de la 155 BAJAN EN ZIGZAG (planean)
     · el aserrin de la 184 SALTA en arco y cae rapido (trabajo)
     · **la harina cae RECTA y fina, y es la unica que SE ACUMULA**
   Esta en el borde de la familia «llegar y quedarse» (114/127/135/
   149/177) con una diferencia: **lo que queda no es un objeto, es el
   polvo del trabajo del dia**.
   Reduced-motion: la linea de harina puesta, sin caida.

   LA ESTRUCTURA — E (laminas apiladas)
   EL DIA DEL LOCAL: madrugada · temprano · durante el dia · tarde.
   DESLINDE con los E del registro (94/98/103/122/149/164): la 122 fue
   secuencia de CARGA, la 149 de LLEGADA, la 164 de MANIOBRA con un
   animal. **Esta es la JORNADA COMPLETA de un negocio: la primera E
   temporal de dia entero del registro.**
   ══════════════════════════════════════════════════════════════════ */

:root {
  --papel:   #FBFAF6;
  --panel:   #F0EDE4;
  --corteza: #7A4E22;
  --cort-ob: #B77F3E;
  --miga:    #6A6259;
  --tinta:   #24201A;
  --hondo:   #2E2820;
  --linea:   #E0DACB;

  --display: 'Baloo Bhaijaan 2', system-ui, sans-serif;
  --cuerpo:  'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Fira 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(--papel);
  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: 600; margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; }

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

/* ── la banda de propuesta ── */
.propuesta {
  background: var(--hondo); color: var(--papel);
  padding: .9rem clamp(1.2rem, 5vw, 4rem);
}
.propuesta__que { font-size: .8rem; margin: 0 0 .25rem; }
.propuesta__gancho { font-size: .8rem; color: #C0B7A6; margin: 0; max-width: 74ch; }

/* ── cabecera fantasma ── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1.2rem, 5vw, 4rem);
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.js .cab { transition: background-color .3s, border-color .3s; }
.js .cab:not(.cab--flota) { background: transparent; border-bottom-color: transparent; }

.cab__marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.cab__nombre { font-family: var(--display); font-size: 1.3rem; font-weight: 600; }

/* LA MARRAQUETA — la cabecera 151ª y la ultima de la tanda.
   Cuatro lobulos vistos desde arriba, con la cruz del corte. */
.marraqueta {
  position: relative; display: block; flex: none;
  width: 26px; height: 22px;
  background: var(--cort-ob);
  border-radius: 46% 46% 42% 42% / 40% 40% 52% 52%;
}
/* la cruz del corte: los dos surcos que hacen los cuatro lobulos */
.marraqueta::before, .marraqueta::after {
  content: ''; position: absolute;
  background: var(--panel);
  border-radius: 2px;
}
.marraqueta::before { left: 50%; top: 2px; bottom: 2px; width: 2.5px; margin-left: -1.25px; }
.marraqueta::after  { top: 50%; left: 2px; right: 2px; height: 2.5px; margin-top: -1.25px; }

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; color: var(--miga);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.cab__nav a:hover { color: var(--corteza); border-bottom-color: var(--cort-ob); }

.cab__tel { text-decoration: none; text-align: right; line-height: 1.15; }
.cab__tel-rot {
  display: block; font-family: var(--dato); font-size: .66rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--corteza);
}
.cab__tel-num { display: block; font-family: var(--dato); font-size: .95rem; }

@media (max-width: 900px) {
  .cab__nav { display: none; }
  .cab__tel { margin-left: auto; }
}

/* ══════ PORTADA ══════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.2rem, 5vw, 4rem) 0;
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: 46rem; }

/* LA HARINA QUE ESPOLVOREA */
.harina {
  position: absolute; right: 10%; top: 12%;
  width: 190px; height: 62vh;
  z-index: 1; pointer-events: none;
}
.h {
  position: absolute; top: 0;
  width: 3px; height: 3px;
  background: #D9CFBC;
  border-radius: 50%;
  opacity: 0;
}
.h1 { left: 8%; }  .h2 { left: 24%; } .h3 { left: 39%; }
.h4 { left: 52%; } .h5 { left: 66%; } .h6 { left: 79%; } .h7 { left: 92%; }
/* cae RECTA: sin deriva lateral, sin zigzag, sin arco. Lo unico que
   varia entre particulas es cuando salen. */
.js .h { animation: espolvorear 9s linear infinite; }
.js .h2 { animation-delay: 1.1s; }
.js .h3 { animation-delay: 2.4s; }
.js .h4 { animation-delay: .6s; }
.js .h5 { animation-delay: 3.2s; }
.js .h6 { animation-delay: 1.8s; }
.js .h7 { animation-delay: 4.1s; }
@keyframes espolvorear {
  0%        { transform: translateY(0);    opacity: 0; }
  8%        { opacity: .9; }
  88%       { opacity: .9; }
  100%      { transform: translateY(58vh); opacity: 0; }
}
/* Y LO QUE LA HACE DISTINTA DE LAS OTRAS TRES CAIDAS: se acumula. */
.harina__linea {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent, #D9CFBC 18%, #D9CFBC 82%, transparent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
}
.js .harina__linea { animation: acumular 9s ease-out infinite; }
@keyframes acumular {
  0%       { transform: scaleX(0);   opacity: 0; }
  30%      { transform: scaleX(.35); opacity: .8; }
  70%      { transform: scaleX(.8);  opacity: .9; }
  92%      { transform: scaleX(1);   opacity: .9; }
  100%     { transform: scaleX(1);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .h { animation: none; opacity: 0; }
  .js .harina__linea { animation: none; transform: scaleX(1); opacity: .9; }
}

.sitio {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--miga); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.4rem, 8vw, 5.6rem);
  line-height: 1.06; margin-bottom: 1.4rem;
}
.bajada { max-width: 46ch; margin-bottom: 2rem; }

.specs { display: flex; flex-wrap: wrap; gap: 1.5rem 2.6rem; margin: 0; }
.spec dt {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--miga);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.3rem; }
.dd--tel a { text-decoration: none; color: var(--corteza); border-bottom: 3px solid var(--cort-ob); }

/* ══════ LA COLACION ══════ */
.colacion {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.colacion__cabecera, .dia__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

.antetitulo {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--corteza);
  margin-bottom: .7rem;
}
.antetitulo--claro { color: #D3B98F; }

.colacion h2, .dia h2 {
  font-size: clamp(2.1rem, 6vw, 4.2rem); line-height: 1.05;
  margin-bottom: 1rem;
}
.dia h2 { color: var(--papel); }
.entrada { max-width: 56ch; }
.dia .entrada { color: #E1D9CC; }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .7rem;
  color: var(--miga); border-left: 3px solid var(--cort-ob); padding-left: .6rem;
}
.marca-ejemplo--fuerte::before {
  text-transform: uppercase; letter-spacing: .05em; color: var(--corteza);
}
.marca-ejemplo--claro::before { color: #D3B98F; border-left-color: #D3B98F; }

.cajas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.ca {
  background: var(--panel);
  padding: clamp(1.3rem, 3vw, 2rem);
  border-top: 5px solid var(--cort-ob);
}
.ca--ancha { grid-column: 1 / -1; }
.ca__rot {
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--miga); margin-bottom: .3rem;
}
.ca h3 { font-size: 1.4rem; margin-bottom: .8rem; }
.ca ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.ca li { padding: .55rem 0; border-top: 1px solid var(--linea); }
.ca li:first-child { border-top: none; }
.ca p { max-width: 62ch; }
.ca__nota {
  font-size: .9rem; color: var(--miga); margin: 0;
  border-top: 1px solid var(--linea); padding-top: .8rem;
}
.ca__datos { margin: 0 0 1rem; }
.ca__datos > div {
  display: grid; grid-template-columns: 1fr auto; gap: .8rem;
  padding: .55rem 0; border-top: 1px solid var(--linea);
}
.ca__datos > div:first-child { border-top: none; }
.ca__datos dt { font-size: .96rem; }
.ca__datos dd { margin: 0; }

/* «falta»: pagina mayormente CLARA — tono oscuro por defecto. */
.pend, .falta {
  display: inline-block;
  font-family: var(--dato); font-size: .8rem;
  color: var(--corteza); border-bottom: 1px dashed var(--cort-ob);
}
.dia .falta { color: #D3B98F; border-bottom-color: #D3B98F; }

/* ══════ EL DIA — LAMINAS (E) ══════ */
.dia {
  background: var(--hondo); color: var(--papel);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.laminas { display: grid; gap: 0; max-width: 62rem; }
.la {
  padding: clamp(1.3rem, 3vw, 2rem) 0;
  border-top: 1px solid #4C4437;
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: clamp(.6rem, 2vw, 2rem);
}
.la:first-child { border-top: none; }
@media (max-width: 760px) { .la { grid-template-columns: 1fr; gap: .3rem; } }
.la__momento {
  font-family: var(--dato); font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #D3B98F; margin: 0;
}
.la h3 { font-size: 1.5rem; color: var(--papel); margin-bottom: .5rem; grid-column: 2; }
@media (max-width: 760px) { .la h3 { grid-column: 1; } }
.la p { grid-column: 2; color: #E1D9CC; max-width: 60ch; }
@media (max-width: 760px) { .la p { grid-column: 1; } }
.la p:last-child { margin-bottom: 0; }
.la__dato { font-family: var(--dato); font-size: .88rem; color: #E1D9CC; }

.descargo {
  max-width: 64ch; margin: 2rem 0 0;
  font-size: .86rem; color: #E1D9CC;
}

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--miga);
}
.cierre__tel { font-size: clamp(2rem, 8vw, 5rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--corteza);
  border-bottom: 5px solid var(--cort-ob);
}
.cierre__tel a:hover { border-bottom-color: var(--corteza); }
.cierre__pie { font-size: .9rem; color: var(--miga); margin: 0 auto; max-width: 46ch; }

/* ══════ PARA EL LOCAL ══════ */
.dueno {
  background: var(--panel);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.dueno h2 { font-size: clamp(1.8rem, 4.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: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--corteza); margin-bottom: .5rem;
}
.dueno p { color: var(--tinta); font-size: .95rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 600; text-decoration: none;
  border-bottom: 3px solid var(--cort-ob); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--tinta); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #ABA294;
  padding: 2rem clamp(1.2rem, 5vw, 4rem);
  font-size: .8rem;
}
.pie p { max-width: 72ch; margin: 0; }

/* ── apariciones ── */
.js .rev { opacity: 0; transform: translateY(14px); }
.js .rev.ok {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js .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(--gris); 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(--panel); 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(--corteza);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--gris); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--gris);
  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; }
}




/* ══════════════════════════════════════════════════════════════════
   LOS FONDOS DE RUBRO
   ══════════════════════════════════════════════════════════════════
   Tres imágenes de panadería, de 2560 px y sin recomprimir, repartidas
   por el scroll: la portada, una banda a media página y el cierre.

   LA REGLA QUE ORDENA TODO ESTO: la foto no se ensucia nunca. Nada de
   blur, nada de calidad baja. Lo que hace legible el texto es un
   gradiente por zona —opaco donde va la letra, abierto donde no—, así
   que la imagen se ve a foco completo justo en la mitad donde el ojo
   la mira. Difuminar la foto entera para poder escribir encima es la
   manera más rápida de que un sitio se vea barato.

   Las tres son de PxHere, dominio público. La procedencia exacta de
   cada archivo está en imagenes/FUENTES.txt.
   ══════════════════════════════════════════════════════════════════ */

/* ── 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: 62% 50%;
  /* La imagen DESAPARECE hacia el titular. No se desenfoca: se disuelve.
     De 0 a 30% no existe, y del 74% en adelante está entera. */
  -webkit-mask-image: linear-gradient(90deg,
              transparent 0%, transparent 30%, rgba(0,0,0,.18) 44%,
              rgba(0,0,0,.66) 60%, #000 74%, #000 100%);
          mask-image: linear-gradient(90deg,
              transparent 0%, transparent 30%, rgba(0,0,0,.18) 44%,
              rgba(0,0,0,.66) 60%, #000 74%, #000 100%);
}
/* El velo pinta el papel de la página sobre la franja del texto y se
   abre del todo hacia la derecha: ahí la foto queda limpia. */
.portada__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
              var(--papel) 0%, var(--papel) 31%, rgba(251,250,246,.62) 46%,
              rgba(251,250,246,.16) 66%, rgba(251,250,246,0) 84%);
}

/* Ken Burns: 44 segundos de ida y vuelta. Tan lento que no se ve
   moverse; se nota que la página respira. */
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: respira 44s 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; }
/* .portada entra al observador SOLO para disparar la foto: la sección
   entera no debe desvanecerse, el titular tiene su propia entrada. */
.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% 46%;
    -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,246,0) 0%, rgba(251,250,246,.30) 42%,
                var(--papel) 70%);
  }
}

/* ── BANDA A MEDIA PÁGINA ── */
.banda {
  position: relative; isolation: isolate;
  min-height: 78svh;
  display: flex; align-items: center;
  padding: clamp(4rem, 10vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--hondo);
  overflow: hidden;
}
.banda__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.banda__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
}
/* Velo lateral: opaco sobre la columna de la izquierda, donde va el
   texto, y casi transparente en la derecha, donde la foto se ve. */
.banda__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
              rgba(46,40,32,.94) 0%, rgba(46,40,32,.90) 38%,
              rgba(46,40,32,.62) 62%, rgba(46,40,32,.34) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .banda__foto img { animation: respira-banda 52s ease-in-out infinite alternate; }
}
@keyframes respira-banda {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.6%, -1%, 0); }
}

.banda__texto { max-width: 40rem; color: var(--papel); }
.banda__ante {
  font-family: var(--dato); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 1rem; color: var(--papel);
}
.banda h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.06;
  margin: 0 0 1.2rem; color: var(--papel);
}
.banda__parr {
  margin: 0; font-size: 1.02rem; line-height: 1.65;
  color: var(--papel); max-width: 38rem;
}
.js .banda__texto.rev { opacity: 0; transform: translateY(20px); }
.js .banda__texto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 700px) {
  .banda__foto::after {
    background: linear-gradient(180deg,
                rgba(46,40,32,.60) 0%, rgba(46,40,32,.92) 46%, rgba(46,40,32,.96) 100%);
  }
}

/* ── CIERRE CON FONDO ── */
.cierre--foto { position: relative; isolation: isolate; overflow: hidden; }
.cierre__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cierre__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 60%;
}
/* Acá el texto va centrado, así que el velo también: opaco al medio,
   abierto en los bordes. La foto se ve nítida por los costados y el
   teléfono conserva el contraste que se midió. */
.cierre__foto::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 78% at 50% 50%,
      var(--papel) 0%, var(--papel) 46%, rgba(251,250,246,.86) 66%,
      rgba(251,250,246,.52) 85%, rgba(251,250,246,.34) 100%);
}
.cierre--foto > *:not(.cierre__foto) { position: relative; z-index: 1; }

@media (max-width: 700px) {
  .cierre__foto::after {
    background: linear-gradient(180deg,
                rgba(251,250,246,.90) 0%, var(--papel) 26%,
                var(--papel) 74%, rgba(251,250,246,.90) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .portada--foto .portada__foto { opacity: 1; }
  .js .banda__texto.rev { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LOS TRES TRATAMIENTOS QUE FALTABAN
   ══════════════════════════════════════════════════════════════════
   Esta demo fue la primera del estándar nuevo y llevaba tres
   apariciones de imagen —portada, banda y cierre—. Se suma el resto
   para que quede al nivel de las otras veintiuna: aura de color,
   media pantalla y tira de tres.

   La regla no cambia: la foto no se ensucia. La única excepción es el
   aura, donde el desenfoque es el efecto entero y no un parche.
   ══════════════════════════════════════════════════════════════════ */

/* ── AURA DE COLOR ── */
.colacion { position: relative; isolation: isolate; overflow: hidden; }
.aura { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.aura img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: blur(64px) saturate(1.45);
  opacity: .34;
  transform: scale(1.25);
  /* Se apaga EN LA IMAGEN, no con un velo encima: un ::after que pinta
     el fondo apaga sólo dentro del div y deja un corte recto en el
     borde de abajo, justo a media sección. */
  -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); }
}

/* ── MEDIA PANTALLA ── */
.mitades {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--panel);
  /* overflow hidden porque las entradas son laterales y, mientras
     animan, se salen unos píxeles y aparece scroll horizontal. */
  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(--miga); 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; }
}

/* ── 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 .mitades__texto.rev, .js .mitades__foto.rev,
  .js .tira__pieza.rev { opacity: 1; transform: none; }
}