/* ══════════════════════════════════════════════════════════════════
   CUPAL RESTAURANT · Curarrehue — restobar
   Demo 145. Identidad: «COBRE DE BARRA».

   LA DIRECCION EN UNA FRASE
   La barra de noche: cafe-negro calido, madera cruda y el canto de
   cobre de la barra bajo la lampara. Transmite «hay luz encendida a
   esta hora», que es exactamente lo que busca alguien bajando de las
   termas a las nueve de la noche.

   LA PALETA
   --noche  #1A1512  cafe-negro (no gris: tiene rojo adentro)
   --crudo  #F0EAE0  madera sin tratar
   --cobre  #D98E63  sobre noche (6,9:1) / #8A4A22 sobre crudo (5,7:1)

   PRIMER COBRE DEL REGISTRO — deslinde de los metales que ya existen:
   el laton de la 76 es amarillento, de sillon vintage; el galvanizado
   de la 124 y el acero de la 128 son FRIOS; el oro de makma y de
   the-temple es JOYA (brilla parejo, es lujo). El cobre es rosado y
   calido, y sobre todo es un metal DE USO: el canto de una barra que
   se limpia todos los dias. Por eso aparece en cantos y filetes
   —2 o 3 px— y nunca en bloques de texto.
   El brillo metalico se hace con un gradiente de varias paradas
   claro/oscuro: un color plano no parece metal.

   EL TRIO
   · display · Grenze — serif condensada de remates angulosos, nueva en
     el registro. Tiene presencia de letrero de bar sin caer en el
     cliche de la display «vintage» que ya usan tres demos.
   · cuerpo  · Livvic — humanista con caracter, un solo uso previo.
   · dato    · Syne Mono — para las franjas horarias GIGANTES. Se
     eligio por los numeros: son anchos y planos, y a 3rem se leen
     como los de un reloj de pared.

   LA CABECERA (111ª del oficio) — EL DESTAPADOR
   La silueta del destapador de pared: la placa con su muesca abajo y
   el agujero de fijacion arriba. Ningun otro logotipo del registro es
   un abridor.

   EL FONDO — LA CONDENSACION
   Gotitas QUIETAS en una franja (el vidrio frio del refrigerador de
   la barra) y UNA que resbala en zigzag corto, pegada al vidrio.
   DESLINDE OBLIGATORIO: las gotas de la 115 caian en fila clinica
   (goteo de suero); la gota unica de la 132 se forma y CAE al vacio
   (aceite). Aca ninguna cae: aparecen quietas, y una resbala sin
   despegarse.
   Reduced-motion: las gotitas quedan, ninguna resbala.

   LA ESTRUCTURA — C (la tabla es la pagina)
   DESLINDE con 89/96/114/121/138/158/160/180/184: en todas esas la
   primera columna es un nombre, un item o un servicio. Esta es la
   UNICA tabla del registro cuya primera columna es un RANGO HORARIO,
   y por eso la hora va compuesta grande, como dato principal.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --noche:     #1A1512;
  --noche-2:   #251E19;
  --noche-3:   #362C25;
  --crudo:     #F0EAE0;
  --crudo-2:   #E3DACB;
  --cobre:     #D98E63;   /* 6,9:1 sobre noche */
  --cobre-osc: #8A4A22;   /* 5,7:1 sobre crudo */
  --tinta:     #201914;
  --tinta-2:   #5A4C40;   /* 7,0:1 sobre crudo */
  --claro-2:   #C2B5AA;   /* 9,8:1 sobre noche */
  --linea:     #D7CCBA;
  --linea-osc: #372C24;

  --display: 'Grenze', Georgia, serif;
  --cuerpo:  'Livvic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Syne Mono', ui-monospace, 'Consolas', monospace;

  /* El metal: un color plano no parece cobre. El gradiente de varias
     paradas es lo que hace el reflejo. Va SOLO en cantos y filetes. */
  --filete-cobre: linear-gradient(92deg,
    #8A4A22 0%, #D98E63 18%, #F0C39C 34%, #C87B4E 52%,
    #A55C30 72%, #E4A87E 88%, #8A4A22 100%);
}

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

/* Titulo accesible sin ocupar espacio (la <caption> de la tabla). */
.visually {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ─────────── cabecera fantasma ─────────── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--noche);
  /* el canto de cobre de la barra: 2 px, y es el borde de la cabecera */
  border-bottom: 2px solid transparent;
  border-image: var(--filete-cobre) 1;
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(26, 21, 18, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--crudo); margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.4rem; line-height: 1; }

/* ── EL DESTAPADOR — la placa de pared ──
   La muesca de abajo y el agujero de fijacion arriba se recortan del
   mismo rectangulo: por eso el clip-path lleva el diente central. */
.destapador {
  position: relative;
  width: 12px; height: 21px;
  flex: 0 0 auto;
  background: var(--filete-cobre);
  border-radius: 2px 2px 1px 1px;
  clip-path: polygon(
    0 0, 100% 0, 100% 100%,
    72% 100%, 72% 52%, 28% 52%, 28% 100%, 0 100%
  );
}
.destapador::after {
  /* el agujero de fijacion. Va del color de la cabecera, que en esta
     pagina es siempre noche: no hay variante clara del header. */
  content: ''; position: absolute;
  left: 50%; top: 4px;
  width: 3px; height: 3px; margin-left: -1.5px;
  border-radius: 50%;
  background: var(--noche);
}

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

/* T1 — el telefono verificado vive 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-osc);
  flex: 0 0 auto;
}
.cab__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .56rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--claro-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.78rem, 2vw, .95rem);
  color: var(--cobre);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--noche);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 42rem); }

.sitio {
  font-family: var(--dato);
  font-size: .76rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cobre);
  margin-bottom: 1.3rem;
}
.portada h1 {
  font-size: clamp(2.5rem, 7.4vw, 5.2rem);
  line-height: 1.0;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--claro-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(--claro-2);
  margin-bottom: .25rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.7rem; line-height: 1; }

/* ── LA CONDENSACION ──
   .gotas son quince gotitas quietas dibujadas con radial-gradient en
   una sola capa: sin quince elementos en el HTML.
   .gota-viva es la unica que se mueve. */
.vidrio {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: min(46%, 30rem);
  z-index: 1; pointer-events: none;
  /* el vidrio frio: apenas mas claro que la noche */
  background: linear-gradient(100deg, rgba(240, 234, 224, 0), rgba(240, 234, 224, .045) 46%, rgba(240, 234, 224, .02));
}
.gotas {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 4px at 22% 12%, rgba(240,234,224,.20), transparent),
    radial-gradient(circle 2px at 38% 20%, rgba(240,234,224,.16), transparent),
    radial-gradient(circle 3px at 61% 15%, rgba(240,234,224,.18), transparent),
    radial-gradient(circle 2px at 74% 26%, rgba(240,234,224,.14), transparent),
    radial-gradient(circle 5px at 30% 34%, rgba(240,234,224,.22), transparent),
    radial-gradient(circle 2px at 52% 40%, rgba(240,234,224,.15), transparent),
    radial-gradient(circle 3px at 82% 44%, rgba(240,234,224,.17), transparent),
    radial-gradient(circle 2px at 18% 52%, rgba(240,234,224,.14), transparent),
    radial-gradient(circle 4px at 66% 58%, rgba(240,234,224,.20), transparent),
    radial-gradient(circle 2px at 44% 66%, rgba(240,234,224,.15), transparent),
    radial-gradient(circle 3px at 26% 74%, rgba(240,234,224,.17), transparent),
    radial-gradient(circle 2px at 78% 78%, rgba(240,234,224,.13), transparent),
    radial-gradient(circle 4px at 56% 86%, rgba(240,234,224,.19), transparent),
    radial-gradient(circle 2px at 34% 92%, rgba(240,234,224,.14), transparent);
}
.gota-viva {
  position: absolute;
  left: 46%; top: 10%;
  width: 5px; height: 7px;
  border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%;
  background: rgba(240, 234, 224, .34);
  opacity: 0;
}
.js .gota-viva { animation: resbala 9s ease-in infinite; }

/* Resbala PEGADA al vidrio: baja y se corre de lado, porque una gota
   sobre vidrio no cae recta —se engancha en las de abajo y desvia. */
@keyframes resbala {
  0%      { top: 10%; left: 46%; opacity: 0;   height: 7px;  }
  8%      {                      opacity: .9;                }
  26%     { top: 30%; left: 47.4%;             height: 9px;  }
  44%     { top: 48%; left: 45.6%;             height: 8px;  }
  62%     { top: 64%; left: 47%;               height: 10px; }
  80%     { top: 80%; left: 46.2%;             height: 8px;  }
  94%,100%{ top: 90%; left: 46.6%; opacity: 0; height: 7px;  }
}

/* ═══════════ LA PIEZA FIRMA — LA TABLA ES LA PÁGINA ═══════════ */
.horas {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crudo);
  color: var(--tinta);
}
.horas__cabecera { max-width: min(100%, 44rem); margin-bottom: 2.4rem; }

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

.horas h2, .llevar h2 {
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.0;
  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: .7rem; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cobre-osc);
  border-left: 2px solid var(--cobre-osc);
  padding-left: .6rem;
}

/* La tabla scrollea dentro de su caja si no cabe: el body nunca. */
.tabla-envoltura { overflow-x: auto; margin-bottom: 2rem; }
.tabla {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  text-align: left;
}
.tabla thead th {
  font-family: var(--dato);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding: 0 1.2rem .7rem 0;
  border-bottom: 2px solid transparent;
  border-image: var(--filete-cobre) 1;
}
.tabla tbody th,
.tabla tbody td {
  padding: 1.4rem 1.2rem 1.4rem 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
  font-weight: 400;
}

/* LA HORA es el dato principal de esta tabla — por eso va grande. */
.franja { width: 8.5rem; }
.franja__h {
  display: block;
  font-family: var(--dato);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1;
  color: var(--cobre-osc);
  letter-spacing: -.01em;
}
.franja__n {
  display: block;
  font-family: var(--dato);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-top: .35rem;
}
.quien {
  display: block;
  font-size: .93rem;
  color: var(--tinta-2);
  margin-top: .5rem;
  max-width: 34rem;
}
.ultimo { width: 7rem; }

/* EL FONDO DECIDE EL TONO. Esta pagina es mayoritariamente oscura,
   asi que el valor POR DEFECTO es el cobre claro y la excepcion son
   las secciones claras. Al reves —como se hizo primero— el .falta de
   la portada se quedaba en 2,7:1 sin que nadie lo notara. */
.falta {
  font-family: var(--dato);
  font-size: .88em;
  color: var(--cobre);
  border-bottom: 1px dashed var(--cobre);
}
.horas .falta,
.dueno .falta { color: var(--cobre-osc); border-bottom-color: var(--cobre-osc); }

.ojo {
  background: var(--crudo-2);
  border-left: 3px solid var(--cobre-osc);
  padding: 1.2rem 1.4rem;
  max-width: min(100%, 46rem);
  margin-bottom: 1.6rem;
}
.ojo p { margin: 0; font-size: .96rem; color: var(--tinta-2); }
.ojo b { color: var(--tinta); }

.firma { font-size: .94rem; color: var(--tinta-2); margin: 0; }

/* ═══════════ PARA LLEVAR ═══════════ */
.llevar {
  background: var(--noche);
  color: var(--crudo);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.llevar__cuerpo { max-width: min(100%, 46rem); }
.llevar .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(--noche-2);
  border-left: 3px solid var(--claro-2);
  padding: 1rem 1.2rem;
  margin: 0;
}

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--noche-2);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 2px solid transparent;
  border-image: var(--filete-cobre) 1;
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--claro-2);
  margin-bottom: 1rem;
}
/* El telefono COMPUESTO GRANDE: en esta pagina es el titular. */
.cierre__tel { margin: 0 0 1.2rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.6rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cobre);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { color: var(--crudo); }
.cierre__pie {
  font-size: .95rem;
  color: var(--claro-2);
  max-width: 44rem;
  margin: 0 auto;
}

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

.pie {
  background: var(--noche);
  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) {
  /* Las gotitas quietas se quedan —son textura, no movimiento— y la
     unica que resbala se detiene arriba, visible. */
  .js .gota-viva { animation: none; opacity: .9; }
}

/* ══════════════════════════════════════════════════════════════════
   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: 54% 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(--noche) 0%, var(--noche) 30%,
              rgba(26,21,18,.66) 46%, rgba(26,21,18,.22) 68%, rgba(26,21,18,.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(26,21,18,0) 0%, rgba(26,21,18,.30) 42%, var(--noche) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#horas { 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(--noche-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(--crudo);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--claro-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(--crudo);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--crudo); 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(--noche); 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(26,21,18,.62) 0%,
              rgba(26,21,18,.80) 45%, rgba(26,21,18,.88) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--crudo); }
.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(--crudo);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cobre);
}
.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-osc); }
.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(--crudo);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--claro-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(--noche-2); border: 1px solid var(--linea-osc); 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(--cobre);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--claro-2); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--claro-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(--noche-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(--noche-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(--crudo);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--claro-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(--noche-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; }
}