/* ══════════════════════════════════════════════════════════════════
   EL RENOVAL CAFE BAR RESTAURANT · Curarrehue
   Demo 147. Identidad: «CAFE CORTADO».

   LA DIRECCION EN UNA FRASE
   La pagina se compone COMO LA TAZA: crema arriba (cabecera y
   portada), y el cuerpo baja hacia el cafe oscuro. Transmite «esto
   esta bien hecho», que es lo unico que explica un 5,0 perfecto en un
   pueblo de montaña.

   LA PALETA
   --crema    #EFE2D0  crema espumada, calida
   --cafe     #2B1710  cafe tostado, ROJIZO (no gris, no negro)
   --caramelo #E0A35E  sobre cafe (7,8:1) / #7E4813 sobre crema (5,6:1)

   DESLINDE DE CAFES Y MARRONES — el cuero de la 76 es piel curtida; el
   mimbre de la 135 es tejido claro; el piñon de la 143 es cascara
   brillante; la tierra de la 146 es casi negra y humeda. Este es CAFE
   LIQUIDO: rojizo, tibio, y —esto es lo que lo separa de todos— tiene
   a la crema como su OPUESTO en la misma pagina. Los otros marrones
   del registro viven solos; este vive en pareja.
   EL CARAMELO se deslinda de los ambares de la 132 y la 142: es VETA
   de arte latte, y por eso solo aparece en LINEAS —filetes, bordes,
   un subrayado— nunca como relleno.

   EL TRIO
   · display · Sanchez — slab de remates suaves y redondeados, nueva en
     el registro. Es la letra de un cafe: calida sin ser blanda.
   · cuerpo  · Assistant — sans neutra y ligera.
   · dato    · Azeret Mono — para rotulos y el telefono.

   LA CABECERA (113ª del oficio) — EL PORTAFILTRO
   La manilla de espresso vista de perfil: la copa troncoconica, el
   pico abajo y el mango a un lado. Ninguna cabecera del registro es
   una maquina de cafe. DESLINDE ADELANTADO con la taza de loza de la
   174: aquella es taza de te de casa antigua —vajilla—; esta es
   HERRAMIENTA de barista.

   EL FONDO — EL HILO DE VAPOR QUE SE RIZA
   UN hilo fino que sube desde un punto y se riza al final.
   DESLINDE OBLIGATORIO de los vapores del registro: el vaho de la 104
   EMPAÑABA una vitrina (es una mancha en el vidrio); las columnas de
   la 154 son vapor ANCHO de agua caliente en aire frio. Este es UN
   hilo de taza: fino, unico, y termina en rizo.
   Reduced-motion: quieto a media altura (un hilo de vapor detenido
   sigue leyendose como vapor; la lluvia de la 146 no).

   LA ESTRUCTURA — D (pagina-carta)
   DESLINDE con 88/128/130/137: la 137 es pizarra de almuerzo del dia
   —mismo esqueleto de carta, otro mundo—. Aca cada linea trae dos
   cosas que ninguna otra carta del registro tiene: su TRADUCCION y su
   PROPORCION dibujada.
   OJO, CONTRA LA LISTA NEGRA: la barrita de dos tonos NO es una barra
   de progreso ni una valoracion. Es proporcion de liquidos dentro de
   una taza —cuanto cafe, cuanta leche—, que es un dato real y no una
   metrica inventada. Por eso no lleva numeros ni porcentajes escritos.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crema:        #EFE2D0;
  --crema-2:      #E3D3BC;
  --crema-3:      #F7EFE3;
  --cafe:         #2B1710;
  --cafe-2:       #3D2118;
  --cafe-3:       #553325;
  --caramelo:     #E0A35E;   /* 7,8:1 sobre cafe */
  --caramelo-osc: #7E4813;   /* 5,6:1 sobre crema */
  --tinta:        #2B1F16;
  --tinta-2:      #6A5540;   /* 5,3:1 sobre crema */
  --claro-2:      #CBBBA9;   /* 9,9:1 sobre cafe */
  --leche:        #F3E9DA;
  --agua:         #C9C2B6;
  --espuma:       #FFFAF2;
  --linea:        #D8C7AF;
  --linea-osc:    #422A20;

  --display: 'Sanchez', Georgia, serif;
  --cuerpo:  'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Azeret Mono', ui-monospace, 'Consolas', monospace;

  /* La veta de caramelo: solo en lineas, nunca de relleno. */
  --veta: linear-gradient(90deg, #7E4813, #E0A35E 42%, #C9873C 68%, #7E4813);
}

*, *::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(--crema);
  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(--caramelo-osc); color: var(--crema); }
a { color: var(--caramelo-osc); }
:focus-visible { outline: 2px solid var(--caramelo-osc); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--cafe);
  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(--crema); }
.propuesta__que b { font-weight: 700; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 64ch; }

/* ─────────── cabecera fantasma — la crema, arriba ─────────── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--crema-3);
  border-bottom: 2px solid transparent;
  border-image: var(--veta) 1;   /* la veta de arte latte: una linea */
  color: var(--tinta);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(247, 239, 227, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; }

/* ── EL PORTAFILTRO — la manilla de espresso de perfil ──
   ::before = la copa troncoconica · ::after = el pico · i = el mango */
.portafiltro {
  position: relative;
  width: 27px; height: 19px;
  flex: 0 0 auto;
}
.portafiltro::before {
  content: ''; position: absolute;
  left: 0; top: 2px; width: 16px; height: 12px;
  background: var(--caramelo-osc);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.portafiltro::after {
  content: ''; position: absolute;
  left: 6.5px; top: 13px; width: 3px; height: 6px;
  background: var(--caramelo-osc);
  border-radius: 0 0 2px 2px;
}
.portafiltro i {
  position: absolute;
  right: 0; top: 5px; width: 13px; height: 4px;
  background: var(--caramelo-osc);
  border-radius: 0 2px 2px 0;
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a:hover { color: var(--caramelo-osc); border-bottom-color: var(--caramelo-osc); }
@media (max-width: 54rem) { .cab__nav { display: none; } }

/* T1 — el telefono verificado, en la cabecera y en el cierre */
.cab__tel {
  text-align: right; text-decoration: none; line-height: 1.15;
  padding-left: 1.1rem; border-left: 1px solid var(--linea);
  flex: 0 0 auto;
}
.cab__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .54rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.74rem, 2vw, .92rem);
  color: var(--caramelo-osc);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ PORTADA — sigue siendo la crema ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  /* la taza vista de lado: crema arriba, el cafe asomando abajo */
  background: linear-gradient(178deg,
    var(--crema-3) 0%, var(--crema) 62%, var(--crema-2) 100%);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 40rem); }

.sitio {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1.3rem;
}
.portada h1 {
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  line-height: 1.06;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--tinta-2);
  max-width: min(92vw, 33rem);
  margin-bottom: 2.2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .62rem; 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: 1.05rem !important; }
.dd--tel a { text-decoration: none; }
.dd--tel a:hover { text-decoration: underline; }

/* ── EL HILO DE VAPOR ──
   Dos piezas: el hilo (una linea con curva) y el rizo (tres cuartos
   de circulo). Uno solo, a la derecha del titular. */
.vapor {
  position: absolute;
  right: clamp(2rem, 12vw, 12rem);
  bottom: 8%;
  width: 40px; height: 46%;
  z-index: 1; pointer-events: none;
}
.vapor__hilo {
  position: absolute;
  left: 12px; bottom: 0;
  width: 16px; height: 74%;
  border-left: 1.5px solid var(--cafe-3);
  border-bottom: 0;
  /* la curva del hilo: sube y se va de lado */
  border-radius: 0 0 0 60%;
  opacity: .3;
}
.vapor__rizo {
  position: absolute;
  left: 16px; top: 4%;
  width: 15px; height: 15px;
  border: 1.5px solid var(--cafe-3);
  border-radius: 50%;
  /* tres cuartos de circulo: el rizo del final */
  border-right-color: transparent;
  opacity: .3;
}
.js .vapor__hilo,
.js .vapor__rizo { animation: sube 8s ease-in-out infinite; }
.js .vapor__rizo { animation-delay: .35s; }

/* Sube y se desvanece. No se estira ni se deforma: un hilo de vapor
   sube entero. */
@keyframes sube {
  0%      { opacity: 0;   transform: translateY(14px); }
  22%     { opacity: .34; transform: translateY(4px);  }
  56%     { opacity: .3;  transform: translateY(-6px); }
  82%     { opacity: .12; transform: translateY(-16px);}
  100%    { opacity: 0;   transform: translateY(-24px);}
}

/* ═══════════ LA CARTA (estructura D) ═══════════
   Acá empieza a bajar hacia el café. */
.carta {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crema-2);
}
.carta__cabecera { max-width: min(100%, 42rem); margin-bottom: 2.4rem; }

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

.carta h2, .pausa h2 {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.06;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--tinta-2);
  max-width: min(100%, 36rem);
  margin-bottom: 1.4rem;
}

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

/* ── las lineas de la carta ── */
.cafes { list-style: none; margin: 0 0 2.4rem; padding: 0; }
.cafe {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: .6rem clamp(1.2rem, 4vw, 3rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--linea);
}
.cafe:last-child { border-bottom: 1px solid var(--linea); }
@media (max-width: 44rem) { .cafe { grid-template-columns: 1fr; } }

.cafe__n {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.1;
  margin: 0 0 .25rem;
}
.cafe__t {
  font-size: .96rem;
  color: var(--tinta-2);
  margin: 0;
}
.cafe__d { font-size: .95rem; color: var(--tinta-2); margin: .7rem 0 0; }
.cafe__d b { color: var(--tinta); }

/* ── la proporcion ──
   NO es una barra de progreso: es cuanto liquido de cada cosa hay en
   la taza. Por eso no lleva numeros ni escala, y por eso los tramos
   son de colores reales (cafe, leche, agua, espuma). */
.prop {
  display: flex;
  width: 100%;
  max-width: 22rem;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(43, 23, 16, .18);
}
.prop > span { display: block; height: 100%; }
.prop__cafe   { background: var(--cafe); }
.prop__leche  { background: var(--leche); }
.prop__agua   { background: var(--agua); }
.prop__espuma { background: var(--espuma); }

/* ── los dos atajos ── */
.atajos {
  background: var(--crema-3);
  border-left: 3px solid transparent;
  border-image: var(--veta) 1;
  padding: 1.4rem clamp(1.1rem, 3vw, 1.8rem);
  max-width: min(100%, 46rem);
  margin-bottom: 1.6rem;
}
.atajos h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.atajos__par {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.2rem;
}
.atajo__q {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0 0 .25rem;
  color: var(--caramelo-osc);
}
.atajo__a { font-size: .96rem; color: var(--tinta-2); margin: 0; }

.falta {
  font-family: var(--dato);
  font-size: .86em;
  color: var(--caramelo-osc);
  border-bottom: 1px dashed var(--caramelo-osc);
}
/* El fondo decide el tono: las secciones oscuras usan el caramelo claro. */
.pausa .falta, .cierre .falta { color: var(--caramelo); border-bottom-color: var(--caramelo); }

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

/* ═══════════ LA PAUSA DEL VIAJE — el fondo de la taza ═══════════ */
.pausa {
  background: var(--cafe);
  color: var(--crema);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.pausa__cuerpo { max-width: min(100%, 46rem); }
.pausa .entrada { color: var(--claro-2); margin-bottom: 2rem; }

.huecos { margin: 0 0 1.6rem; }
.hueco {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: .3rem 1.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--linea-osc);
}
.hueco:last-child { border-bottom: 1px solid var(--linea-osc); }
.huecos dt {
  font-family: var(--dato);
  font-size: .74rem;
  color: var(--claro-2);
  align-self: start;
  padding-top: .2rem;
}
.huecos dd { margin: 0; }
.hueco__pq { display: block; font-size: .92rem; color: var(--claro-2); margin-top: .3rem; }
@media (max-width: 40rem) { .hueco { grid-template-columns: 1fr; } }

.nota-honesta {
  font-size: .95rem;
  color: var(--claro-2);
  background: var(--cafe-2);
  border-left: 3px solid var(--claro-2);
  padding: 1rem 1.2rem;
  margin: 0;
}
.nota-honesta b { color: var(--crema); }

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--cafe-2);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 2px solid transparent;
  border-image: var(--veta) 1;
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1.2rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.5rem, 6.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--caramelo);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { color: var(--crema); }
.cierre__pie {
  font-size: .95rem;
  color: var(--claro-2);
  max-width: 44rem;
  margin: 0 auto;
}

/* ═══════════ PARA EL DUEÑO ═══════════ */
.dueno {
  background: var(--crema-2);
  color: var(--tinta);
  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: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--caramelo-osc);
  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(--caramelo-osc);
  text-decoration: none;
  border-bottom: 1px solid var(--caramelo-osc);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--cafe);
  color: var(--claro-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) {
  /* El hilo queda QUIETO a media altura y visible. A diferencia de la
     lluvia de la 146, un hilo de vapor detenido se sigue leyendo como
     vapor. */
  .js .vapor__hilo, .js .vapor__rizo { animation: none; opacity: .3; }
}

/* ═══════════ ANCHOS DE LA PROPORCION ═══════════
   LECCION: estas anchuras estaban escritas como style="width:72%" en
   el HTML, que es lo natural para un dato variable. La CSP de la casa
   lleva style-src 'self' SIN 'unsafe-inline', asi que el navegador las
   BLOQUEA y las barras salen todas de ancho cero: la pieza firma se ve
   vacia y no hay ningun error visible que lo explique.
   Por eso van como clases. Vale para cualquier demo blindada: en estos
   sitios no existe el atributo style. */
.w-100 { width: 100%; }
.w-72  { width: 72%;  }
.w-66  { width: 66%;  }
.w-62  { width: 62%;  }
.w-60  { width: 60%;  }
.w-40  { width: 40%;  }
.w-38  { width: 38%;  }
.w-34  { width: 34%;  }
.w-28  { width: 28%;  }
.w-24  { width: 24%;  }
.w-10  { width: 10%;  }

/* ══════════════════════════════════════════════════════════════════
   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: 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(--crema) 0%, var(--crema) 30%,
              rgba(239,226,208,.66) 46%, rgba(239,226,208,.22) 68%, rgba(239,226,208,.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(239,226,208,0) 0%, rgba(239,226,208,.30) 42%, var(--crema) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#carta { 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(--crema-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(--crema); 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(239,226,208,.72) 0%,
              rgba(239,226,208,.84) 45%, rgba(239,226,208,.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(--caramelo-osc);
}
.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(--crema-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(--caramelo-osc);
}
.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(--crema-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(--crema-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(--crema-2); }
.mos__p img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) {
  .mos__p:hover img { transform: scale(1.06); }
}
.js .mos__p { opacity: 0; transform: translateY(1.2rem); }
.js .mos__p.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .mos__p.ok:nth-child(2) { transition-delay: .06s; }
.js .mos__p.ok:nth-child(3) { transition-delay: .12s; }
.js .mos__p.ok:nth-child(4) { transition-delay: .18s; }
.js .mos__p.ok:nth-child(5) { transition-delay: .24s; }
.js .mos__p.ok:nth-child(6) { transition-delay: .30s; }
@media (max-width: 760px) {
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

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

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