/* ══════════════════════════════════════════════════════════════════
   DISTRIBUIDORA Y BOTILLERIA MATEKILA · Loncoche
   Demo 185. Identidad: «BODEGA Y JABA».

   ╔════════════════════════════════════════════════════════════════╗
   ║  REGLA DE ALCOHOL — NUEVA EN EL REGISTRO, VALE PARA TODAS       ║
   ║  La pagina NO empuja consumo: ni promociones de trago, ni       ║
   ║  lenguaje festivo de exceso, ni precios de alcohol, ni nada     ║
   ║  dirigido a menores. Se habla de LOGISTICA —reparto, jabas,     ║
   ║  dias de pedido, envase retornable— y del negocio B2B. El       ║
   ║  descargo lo dice explicito y ademas aclara que las reglas de   ║
   ║  horario y edad las fija la ley y las aplica el local.          ║
   ╚════════════════════════════════════════════════════════════════╝

   EVIDENCIA VERIFICADA EL 31-08-2026: matekila.cl esta en linea y
   tiene hasta carrito de compras, pero **el <title> de la pagina es
   literalmente «Inicio»** —asi sale en Google, sin el nombre del
   negocio— y el menu (Inicio · Productos · Nuestra historia ·
   Contacto) no menciona el lado mayorista. La mitad del negocio no
   esta contada. Eso es lo que va en la banda de propuesta.

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

   LA PALETA
   --crudo    #F3F2EF  fondo
   --panel    #E7E6E2  bloque secundario
   --bodega   #575B5D  gris de bodega para texto (5,4:1 sobre panel)
   --jaba     #1B5FA8  AZUL DE JABA para texto (5,7:1 sobre crudo)
   --jaba-ob  #2C7FD4  el mismo azul para OBJETOS y reticulas
   --tinta    #1D2124
   --hondo    #14263A  la seccion oscura

   DESLINDE DE AZULES: la lona de la 150 es TEXTIL MATE (carpa); la
   loza de la 174 es DECORATIVA en filetes; la mezclilla de la 175 es
   GASTADA (ropa usada); la prusia de la 180 es CASI NEGRA. **La jaba
   es PLASTICO BRILLANTE en BLOQUES APILABLES**, y por eso los modulos
   de esta pagina se apilan como jabas: cajas rectangulares con la
   reticula de celdas dibujada encima.
   PAR DE PLASTICOS DE LA GIRA con la 184 (carcasa naranja): mismo
   material inyectado, otro color y otro oficio.

   EL TRIO
   · display · Bungee — letra de rotulo apilable, hecha para leerse
     en bloque. Primera vez en el registro y elegida justamente
     porque «apila».
   · cuerpo  · Barlow Semi Condensed — angosta, entra en columna.
   · dato    · Cousine — REPETICION CONSCIENTE: el catalogo esta
     agotado; es mono de planilla, que es lo que lleva un pedido.

   FAMILIA «DOS-EN-UNO»: 120 · 168 · 178 · **185**. Con una
   diferencia: en las otras tres son dos SERVICIOS distintos; **aca
   son dos MODOS del mismo mostrador** — la misma bebida, comprada de
   dos maneras.

   LA CABECERA (150ª del oficio) — LA JABA
   El rectangulo con la reticula de celdas y las dos asas caladas.
   (150ª y no 151ª porque la 179 quedo en pausa.)

   EL FONDO — LAS JABAS QUE ENCAJAN
   Cuatro bloques que caen UNO SOBRE OTRO con caida corta y **TOPE
   SECO, sin rebote**: el clac de la jaba que calza.
   DESLINDE OBLIGATORIO CON LOS SACOS DE LA 127, que tambien caen:
   **aquellos caian BLANDOS, con rebote de peso muerto —un saco se
   deforma—; la jaba es RIGIDA: cae poco y CALZA.** Por eso la curva
   es `cubic-bezier` sin overshoot y el recorrido es corto. Escrito en
   las dos filas.
   Reduced-motion: pila quieta y completa.

   LA ESTRUCTURA — M (comparador paralelo)
   MAYOR / DETALLE.
   DESLINDE con los M del registro (92/110/120/131/151/166/169/178):
   **la columna del MAYOR lleva la reticula de jaba dibujada y la del
   DETALLE no** — el B2B es el protagonista visual de la pagina, y la
   asimetria lo dice antes que el texto. Ademas la columna mayorista
   tiene seis campos y cinco estan vacios: es una ficha de condiciones
   esperando ser llenada.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crudo:    #F3F2EF;
  --panel:    #E7E6E2;
  --bodega:   #575B5D;
  --jaba:     #1B5FA8;
  --jaba-ob:  #2C7FD4;
  --tinta:    #1D2124;
  --hondo:    #14263A;
  --linea:    #D4D3CE;

  --display: 'Bungee', system-ui, sans-serif;
  --cuerpo:  'Barlow Semi Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Cousine', ui-monospace, 'Consolas', monospace;

  /* LA RETICULA DE JABA: celdas cuadradas, como el fondo de una caja
     de bebidas vista desde arriba. */
  --reticula:
    repeating-linear-gradient(90deg, rgba(44,127,212,.16) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(180deg, rgba(44,127,212,.16) 0 1px, transparent 1px 34px);
}

*, *::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(--crudo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.12rem;
  line-height: 1.58;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; }

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

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

/* ── 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(--crudo);
  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.15rem; }

/* LA JABA — la cabecera 150ª. Reticula de celdas y dos asas. */
.jaba {
  position: relative; display: block; flex: none;
  width: 28px; height: 20px;
  border: 2px solid var(--jaba-ob);
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, var(--jaba-ob) 0 1.5px, transparent 1.5px 8px),
    repeating-linear-gradient(180deg, var(--jaba-ob) 0 1.5px, transparent 1.5px 8px);
  background-position: 3px 3px;
}
/* las dos asas caladas */
.jaba::before, .jaba::after {
  content: ''; position: absolute; top: -2px;
  width: 7px; height: 4px;
  background: var(--crudo);
  border: 2px solid var(--jaba-ob);
  border-top: none; border-radius: 0 0 2px 2px;
}
.jaba::before { left: 3px; }
.jaba::after { right: 3px; }

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

.cab__tel { text-decoration: none; text-align: right; line-height: 1.15; }
.cab__tel-rot {
  display: block; font-family: var(--dato); font-size: .7rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bodega);
}
.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: 44rem; }

/* LAS JABAS QUE ENCAJAN */
.pila {
  position: absolute; right: 8%; bottom: 14%;
  width: 200px; height: 260px;
  z-index: 1; pointer-events: none;
}
.j {
  position: absolute; left: 0;
  width: 200px; height: 56px;
  border: 2px solid rgba(44,127,212,.5);
  border-radius: 3px;
  background: var(--reticula), rgba(44,127,212,.07);
}
.j1 { bottom: 0; }
.j2 { bottom: 60px; }
.j3 { bottom: 120px; }
.j4 { bottom: 180px; }
/* cae poco y CALZA: recorrido corto y sin overshoot. Una jaba es
   rigida — no rebota como un saco (ver el deslinde con la 127). */
.js .j { animation: encajar 11s cubic-bezier(.34, .06, .2, 1) infinite; }
.js .j2 { animation-delay: .55s; }
.js .j3 { animation-delay: 1.1s; }
.js .j4 { animation-delay: 1.65s; }
@keyframes encajar {
  0%        { transform: translateY(-26px); opacity: 0; }
  7%        { transform: translateY(0);     opacity: 1; }
  82%, 100% { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .j { animation: none; opacity: 1; transform: none; }
}

.sitio {
  font-family: var(--dato); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bodega); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.2rem, 7vw, 5rem);
  line-height: 1.1; 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: .7rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bodega);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.3rem; }
.dd--tel a { text-decoration: none; color: var(--jaba); border-bottom: 3px solid var(--jaba-ob); }

/* ══════ LOS DOS MOSTRADORES — ESTRUCTURA M ══════ */
.mostradores {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.mostradores__cabecera, .envase__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

.antetitulo {
  font-family: var(--dato); font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--jaba);
  margin-bottom: .7rem;
}
.antetitulo--claro { color: #8FB6D9; }

.mostradores h2, .envase h2 {
  font-size: clamp(1.9rem, 5.5vw, 3.6rem); line-height: 1.1;
  margin-bottom: 1rem;
}
.envase h2 { color: var(--crudo); }
.entrada { max-width: 56ch; }
.envase .entrada { color: #D3DEE8; }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .76rem;
  color: var(--bodega); border-left: 3px solid var(--jaba-ob); padding-left: .6rem;
}
.marca-ejemplo--claro::before { color: #8FB6D9; border-left-color: #8FB6D9; }

.comp {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start;
}
@media (max-width: 880px) { .comp { grid-template-columns: 1fr; } }

.col { padding: clamp(1.3rem, 3vw, 2rem); border: 2px solid var(--jaba-ob); }
/* la del mayorista lleva la reticula: es la protagonista */
.col--mayor { background: var(--reticula), var(--panel); }
.col--detalle { background: var(--panel); border-color: var(--linea); }

.col__rot {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bodega); margin-bottom: .3rem;
}
.col h3 { font-size: clamp(1.5rem, 3.6vw, 2.4rem); margin-bottom: .6rem; }
.col--mayor h3 { color: var(--jaba); }
.col__quien { font-size: 1rem; margin-bottom: 1.2rem; }

.col__datos { margin: 0 0 1rem; }
.col__datos > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: .6rem;
  padding: .6rem 0; border-top: 1px solid var(--linea);
}
.col__datos > div:first-child { border-top: none; }
@media (max-width: 560px) { .col__datos > div { grid-template-columns: 1fr; gap: .1rem; } }
.col__datos dt {
  font-family: var(--dato); font-size: .8rem;
  color: var(--bodega);
}
.col__datos dd { margin: 0; font-size: .98rem; }
.col__nota {
  font-size: .92rem; color: var(--bodega); margin: 0;
  border-top: 1px solid var(--linea); padding-top: .8rem;
}

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

.firma {
  max-width: 54ch; margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: .98rem; color: var(--bodega);
  border-left: 4px solid var(--jaba-ob); padding-left: 1rem;
}

/* ══════ EL ENVASE ══════ */
.envase {
  background: var(--hondo); color: var(--crudo);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.pa { border-top: 3px solid #2E4F70; padding-top: 1rem; }
.pa__n {
  font-family: var(--dato); font-size: .82rem;
  color: #8FB6D9; margin-bottom: .3rem;
}
.pa h3 { font-size: 1.3rem; color: var(--crudo); margin-bottom: .5rem; }
.pa p { font-size: .98rem; color: #D3DEE8; }
.pa p:last-child { margin-bottom: 0; }

.descargo {
  max-width: 66ch; margin: 2rem 0 0;
  font-size: .9rem; color: #D3DEE8;
  border-left: 3px solid #8FB6D9; padding-left: 1rem;
}

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bodega);
}
.cierre__tel { font-size: clamp(1.8rem, 7vw, 4.4rem); line-height: 1.1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--jaba);
  border-bottom: 5px solid var(--jaba-ob);
}
.cierre__tel a:hover { border-bottom-color: var(--jaba); }
.cierre__pie { font-size: .95rem; color: var(--bodega); margin: 0; }

/* ══════ PARA MATEKILA ══════ */
.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.7rem, 4.4vw, 2.4rem); 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: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--jaba); margin-bottom: .5rem;
}
.dueno p { color: var(--tinta); font-size: .98rem; 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(--jaba-ob); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--tinta); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #9EA5AA;
  padding: 2rem clamp(1.2rem, 5vw, 4rem);
  font-size: .86rem;
}
.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 IMÁGENES DE RUBRO — seis tratamientos
   ══════════════════════════════════════════════════════════════════
   La página no puede ser texto sobre fondo plano de arriba abajo. Van
   seis apariciones distintas, para que el ojo no vea siempre lo mismo:
   portada disuelta, aura de color, media pantalla, cita a sangre, tira
   de tres, y la galería con las fotos propias del negocio.

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

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

/* ── 1 · PORTADA ── */
.portada--foto { padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { max-width: 40rem; }
.portada__foto { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 52% 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(--crudo) 0%, var(--crudo) 30%,
              rgba(243,242,239,.66) 46%, rgba(243,242,239,.22) 68%, rgba(243,242,239,.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(243,242,239,0) 0%, rgba(243,242,239,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#mostradores { 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(--panel);
  /* 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(--bodega); 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(--crudo); 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(243,242,239,.72) 0%,
              rgba(243,242,239,.84) 45%, rgba(243,242,239,.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(--jaba);
}
.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; }
}

/* ── 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(--panel);
}
.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(--panel);
  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(--bodega); 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(--panel); }
.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; }