/* ══════════════════════════════════════════════════════════════════
   STUDIO_HANDMADE — estudio de uñas · Pucón
   (el nombre lleva guion bajo: así es su marca, y así va escrito)
   Demo 130 · tanda P3

   IDENTIDAD — «HILO E HILVÁN»
   El nombre dice handmade y la página lo dice con el material del
   trabajo a mano: lino crudo, hilo de terracota y tinta sepia. Nada
   de spa clínico —ni blanco, ni celeste, ni brillo—: esto es un
   taller, y en un taller hay tela, aguja y luz de tarde.

   DESLINDE DE TERRACOTAS Y ROSAS DEL REGISTRO:
   · The Temple · terracota #7E2E1C — secundaria, sobre negro, de
     gimnasio: es fuego apagado.
   · 119 · rosa té dental — rosa, no naranja, y su trabajo es calmar
     en una clínica.
   Ésta es terracota de HILO sobre lino: cálida, mate y siempre en
   trazos finos —puntadas, bordes, subrayados— nunca en superficie
   grande, porque el hilo es delgado por definición.

   TRÍO TIPOGRÁFICO
   · Display: Amaranth — nueva en el registro. Humanista de asta
     suave, casi escrita a mano: la única del trío que se permite
     curvas.
   · Cuerpo: Rubik — 3 usos, redondeada y amable, que acompaña sin
     endurecer.
   · Dato: Courier Prime — 5 usos. Mono de máquina de escribir: las
     duraciones se leen como escritas en la etiqueta de la prenda.

   CABECERA 96ª DEL OFICIO: LA ETIQUETA COSIDA — el rectángulo de
   tela con las puntadas discontinuas en el borde y la esquinita
   doblada. La misma puntada se vuelve sistema en las tarjetas de la
   carta: es el único motivo gráfico de la página.

   FONDO NUEVO: PUNTADAS QUE SE COSEN — una línea de guiones que
   aparece a SALTOS, guión por guión, con pausa entre cada uno.
   DESLINDE OBLIGATORIO: todos los trazos que se dibujan en el
   registro usan stroke-dashoffset y avanzan de CORRIDO, como tinta.
   Éste avanza en pasos discretos (`steps()`): es hilván, no línea.

   ESTRUCTURA: D (página-carta). DESLINDE con la 88 y la 128, que
   también son D: allá la carta era una LISTA corrida (comida a dos
   columnas; servicios en filas). Acá cada combo es una TARJETA con
   borde de puntadas — la carta es un muestrario de etiquetas.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --lino:       #F0EAE0;  /* la base                                  */
  --lino-b:     #FBF7F1;
  --lino-h:     #E2D8C9;
  --sepia:      #3A2E26;  /* 11,0:1 sobre lino                        */
  --sepia-s:    #6A594C;  /* 5,6:1 sobre lino                         */
  --terracota:  #90452B;  /* 5,7:1 sobre lino  — SOLO en claro        */
  --terra-c:    #E0A183;  /* 6,0:1 sobre sepia — SOLO en oscuro       */
  --hilo:       #C08A6E;  /* puntadas decorativas, nunca texto        */

  --display: 'Amaranth', Georgia, serif;
  --cuerpo:  'Rubik', system-ui, sans-serif;
  --mono:    'Courier Prime', ui-monospace, monospace;

  --ancho: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--lino);
  color: var(--sepia);
  font-family: var(--cuerpo);
  font-size: clamp(1rem, .95rem + .3vw, 1.08rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.06; margin: 0; }
h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.25; }
p { margin: 0 0 1.05em; }
a { color: inherit; }

/* ── Banda de propuesta ───────────────────────────────────────── */
.propuesta {
  background: var(--sepia); color: var(--lino);
  padding: 1.1rem clamp(1.1rem, 5vw, 3rem);
}
.propuesta__que { font-size: .84rem; margin: 0 0 .25rem; }
.propuesta .propuesta__gancho { font-size: .84rem; margin: 0; max-width: 66ch; color: #C9BCB0; }
.propuesta b { font-weight: 500; }

/* ── Cabecera fantasma ────────────────────────────────────────── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(1rem, 4vw, 2.5rem);
  padding: .75rem clamp(1.1rem, 5vw, 3rem);
  background: var(--lino-b);
  border-bottom: 1px solid var(--lino-h);
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
/* Por defecto sólida: si el JS no corre, la cabecera se lee igual. */
.cab.cab--ghost  { background: transparent; border-color: transparent; }
.cab.cab--oculta { transform: translateY(-110%); }

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

/* LA ETIQUETA COSIDA — cabecera 96ª.
   Rectángulo con puntadas en el borde (dashed, que es literalmente
   una costura) y la esquina doblada hecha con un triángulo. */
.etiqueta {
  position: relative; flex: none;
  width: 26px; height: 19px;
  background: var(--lino);
  border: 1.5px dashed var(--hilo);
  border-radius: 2px;
}
.etiqueta::after {  /* la esquinita doblada */
  content: ''; position: absolute; right: -1.5px; bottom: -1.5px;
  border-left: 8px solid transparent;
  border-bottom: 8px solid var(--terracota);
}

.cab__nav { display: none; gap: 1.5rem; margin-left: auto; font-size: .9rem; }
.cab__nav a { text-decoration: none; color: var(--sepia-s); }
.cab__nav a:hover, .cab__nav a:focus-visible { color: var(--terracota); }
@media (min-width: 900px) { .cab__nav { display: flex; } }

.cab__wsp { margin-left: auto; text-align: right; text-decoration: none; line-height: 1.15; }
@media (min-width: 900px) { .cab__wsp { margin-left: 0; } }
.cab__wsp-rot {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--terracota);
}
.cab__wsp-num { display: block; font-family: var(--mono); font-size: .98rem; }

/* ══════════════ PORTADA ══════════════ */
.portada {
  position: relative; overflow: hidden;
  min-height: 88svh;
  display: flex; align-items: flex-end;
  padding: clamp(3rem, 9vw, 6rem) clamp(1.1rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem);
  background: linear-gradient(to bottom, var(--lino-b), var(--lino) 55%);
}

/* FONDO — PUNTADAS QUE SE COSEN.
   El truco: una línea de guiones cuyo ANCHO crece a saltos con
   steps(). Cada salto revela exactamente una puntada, con su pausa,
   como cose una aguja. Nada de dashoffset fluido. */
.hilvan {
  position: absolute; left: 0; right: 0; top: 22%;
  height: 40px; pointer-events: none; overflow: hidden;
}
.hilvan span {
  display: block; height: 2px; width: 0;
  background: repeating-linear-gradient(
    to right,
    var(--hilo) 0 14px,
    transparent 14px 26px);
  animation: cose 26s steps(22, end) infinite;
  transform: rotate(-1.2deg);
  transform-origin: left center;
  margin-top: 18px;
}
@keyframes cose {
  0%        { width: 0; }
  70%, 100% { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hilvan span { animation: none; width: 100%; }
}

.portada__texto { position: relative; max-width: 22ch; }
.sitio {
  font-family: var(--mono); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracota); margin-bottom: 1.1rem;
}
.portada h1 { font-size: clamp(2.8rem, 9vw, 6rem); margin-bottom: 1.2rem; }
.portada .bajada { max-width: 44ch; color: var(--sepia-s); }

.specs { display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 2rem 0 0; }
.spec dt {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sepia-s); margin-bottom: .15rem;
}
.spec dd {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1;
  color: var(--terracota); font-variant-numeric: tabular-nums;
}

/* ══════════════ LA CARTA DE COMBOS (D) ══════════════ */
.combos {
  background: var(--lino-b);
  border-top: 1px solid var(--lino-h);
  padding: clamp(3.5rem, 10vw, 6.5rem) clamp(1.1rem, 5vw, 3rem);
}
.combos__cabecera { max-width: var(--ancho); margin: 0 auto 2.6rem; }
.combos .antetitulo, .mano .antetitulo {
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracota); margin-bottom: .8rem;
}
.mano .antetitulo--claro { color: var(--terra-c); }
.combos h2 { font-size: clamp(2rem, 6vw, 3.6rem); margin-bottom: 1.1rem; }
.combos__cabecera > p { max-width: 56ch; color: var(--sepia-s); }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--terracota);
  border-left: 2px dashed var(--hilo);
  padding-left: .6rem;
}

/* Cada combo es una ETIQUETA: el borde de puntadas de la cabecera
   convertido en sistema. */
.cartas { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 1.4rem; }
@media (min-width: 720px)  { .cartas { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; } }
.tarjeta {
  position: relative;
  background: var(--lino);
  border: 1.5px dashed var(--hilo);
  border-radius: 3px;
  padding: clamp(1.3rem, 3vw, 2rem);
}
.tarjeta__t {
  font-family: var(--mono); font-size: 1.05rem;
  letter-spacing: .06em; color: var(--terracota); margin-bottom: .5rem;
}
.tarjeta h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: .6rem; }
.tarjeta > p { color: var(--sepia-s); max-width: 46ch; }
.tarjeta .tarjeta__ojo {
  font-family: var(--mono); font-size: .82rem;
  color: var(--sepia); border-top: 1px dashed var(--hilo);
  padding-top: .7rem; margin-bottom: 0;
}

.combos .firma, .mano .firma {
  max-width: var(--ancho); margin: 2rem auto 0;
  font-size: .86rem; color: var(--sepia-s);
}

.falta {
  font-family: var(--mono); font-size: .8rem;
  color: var(--terracota); border-bottom: 1px dashed var(--terracota);
}
/* El acento tiene dos caras y el FONDO decide cuál. */
.mano .falta { color: var(--terra-c); border-bottom-color: var(--terra-c); }

/* ══════════════ HECHO A MANO ══════════════ */
.mano {
  background: var(--sepia); color: var(--lino);
  padding: clamp(3.5rem, 10vw, 6.5rem) clamp(1.1rem, 5vw, 3rem);
}
.mano__cuerpo { max-width: var(--ancho); margin: 0 auto; }
.mano h2 { font-size: clamp(2rem, 6vw, 3.6rem); margin-bottom: 1.1rem; }
.mano .entrada { max-width: 56ch; color: #C9BCB0; }

.notas { display: grid; gap: 1.4rem; margin: 2.4rem 0 1.6rem; }
@media (min-width: 760px) { .notas { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.nota dt {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
  color: var(--terra-c); margin-bottom: .35rem;
}
.nota dd { margin: 0; color: #C9BCB0; font-size: .96rem; max-width: 46ch; }

.mano .firma--claro { color: #C9BCB0; }

.reservar { border-top: 1px dashed #6A594C; margin-top: 2.4rem; padding-top: 2rem; }
.reservar__rot {
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: #C9BCB0; margin-bottom: .6rem;
}
.telefono {
  display: inline-block; text-decoration: none;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1;
  color: var(--terra-c);
}
.telefono:hover, .telefono:focus-visible { color: var(--lino); }
.reservar .reservar__nota { margin: 1rem 0 0; font-size: .9rem; color: #C9BCB0; max-width: 54ch; }

/* ══════════════ PARA LA DUEÑA ══════════════ */
.dueno {
  background: var(--lino); color: var(--sepia);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.1rem, 5vw, 3rem);
}
.dueno h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 auto 2rem; max-width: var(--ancho); }
.dueno__cols { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 1.8rem; }
@media (min-width: 820px) { .dueno__cols { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.dueno__cols h3 {
  font-family: var(--mono); font-weight: 400; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracota); margin-bottom: .6rem;
}
.dueno__cols p { font-size: .94rem; color: var(--sepia-s); margin: 0; }
.dueno__cierre { max-width: var(--ancho); margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.flecha {
  font-weight: 500; font-size: .96rem;
  color: var(--terracota); text-decoration: none;
  border-bottom: 1px dashed currentColor; padding-bottom: .12rem;
}
.flecha:hover, .flecha:focus-visible { color: var(--sepia); }

.pie {
  background: var(--lino-h);
  padding: 2rem clamp(1.1rem, 5vw, 3rem) 5.5rem;
}
@media (min-width: 720px) { .pie { padding-bottom: 2rem; } }
.pie p { max-width: 62ch; margin: 0 auto; font-size: .82rem; color: #5B4C41; }

/* ══════════════ BARRA FIJA MÓVIL (T2) ══════════════ */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--terracota);
  padding: .75rem 1rem;
  text-align: center;
}
.barra-movil a {
  display: block; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  color: #FFF4EC;
}
@media (min-width: 720px) { .barra-movil { display: none; } }

/* ══════════════ REVEALS ══════════════ */
.js .rev { opacity: 0; transform: translateY(18px); }
.js .rev.on { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s 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 ── */
/* 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: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%,
              rgba(0,0,0,.28) 36%, rgba(0,0,0,.72) 52%, #000 64%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 22%,
              rgba(0,0,0,.28) 36%, rgba(0,0,0,.72) 52%, #000 64%, #000 100%);
}
/* El velo se escribe ENTERO en rgba y termina en alfa 0. Con var() en
   los primeros stops habia demos donde el gradiente tapaba la foto de
   punta a punta —paso tres veces— y costaba una captura cada vez
   entenderlo. En rgba puro el degradado es el mismo y no falla. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(240,234,224,1) 0%, rgba(240,234,224,1) 26%,
              rgba(240,234,224,.70) 42%, rgba(240,234,224,.28) 62%, rgba(240,234,224,.08) 80%,
              rgba(240,234,224,0) 94%);
}
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: respira 46s ease-in-out infinite alternate; }
}
@keyframes respira {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.8%, -1.2%, 0); }
}
.js .portada--foto .portada__foto { opacity: 0; }
.js .portada--foto.ok .portada__foto { opacity: 1; transition: opacity 1.1s ease; }
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: none; }
@media (max-width: 860px) {
  .portada--foto { padding-top: 36svh; }
  .portada__foto img {
    object-position: 50% 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(240,234,224,0) 0%, rgba(240,234,224,.30) 42%, var(--lino) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#combos { 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(--lino-h);
  /* 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(--sepia);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sepia-s); 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(--sepia);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--sepia); 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(--lino); 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(240,234,224,.72) 0%,
              rgba(240,234,224,.84) 45%, rgba(240,234,224,.90) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--sepia); }
.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(--sepia);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--terracota);
}
.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(--lino-h); }
.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(--sepia);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--sepia-s); 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(--lino-h); border: 1px solid var(--lino-h); 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(--terracota);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--sepia-s); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--sepia-s);
  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 ──
   La portada de esta demo lleva su propio degradado y las puntadas
   dibujadas: una foto encima o queda tapada o pelea con el dibujo. La
   franja hace ese trabajo unas lineas mas abajo, donde la foto se ve
   entera y no compite con nada. */
.tajo {
  position: relative; overflow: hidden;
  height: clamp(180px, 30svh, 340px);
  background: var(--lino-h);
}
.tajo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
@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; } }

/* ── 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(--lino-h);
}
.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 siempre, y va a sangre con el contenido centrado. */
.mos {
  background: var(--lino-h);
  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(--sepia);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(); 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(--lino-h); }
.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; }
}

/* ── WHATSAPP FLOTANTE ──────────────────────────────────────────────
   56 px de alto, por encima del minimo tactil de 44. Verde de WhatsApp
   a proposito: se reconoce sin leerlo, y eso es lo que hace que se toque.
   Se ve SIEMPRE por defecto; el JS solo lo aparta sobre la portada. Al
   reves, un fallo del script se llevaria el CTA principal. */
.wapp {
  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;
  background: #25D366; color: #07310F;
  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;
}
.wapp__i { width: 26px; height: 26px; fill: currentColor; flex: none; }
.wapp:hover, .wapp:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.js .wapp--arriba { opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; }

@media (max-width: 520px) {
  .wapp { width: 56px; padding: 0; justify-content: center; }
  .wapp__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .wapp { transition: opacity .28s ease; }
  .wapp:hover, .wapp:focus-visible { transform: none; }
  .js .wapp--arriba { transform: none; }
}
/* ── DÓNDE QUEDA + MAPA ─────────────────────────────────────────────
   El salón tiene 109 reseñas con 5,0 y no publica dirección: quien quiere
   ir tiene que escribir para preguntar por dónde queda. Esta sección lo
   dice y el mapa muestra la comuna, no una puerta que no sabemos.
   Imagen propia con mosaicos de OpenStreetMap: la CSP prohíbe pedir nada
   a un tercero y un iframe de Google Maps quedaría en blanco sin dar un
   solo error. La atribución a OSM la exige su licencia (ODbL). */
.donde { background: var(--lino-b); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.donde__cols { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .donde__cols { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }
.donde h2 { color: var(--sepia); margin: 0 0 1rem; }
.donde__p { color: var(--sepia-s); max-width: 54ch; margin: 0 0 1rem; }
.donde__p--fuerte { color: var(--sepia); }
.donde__faltan { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.donde__faltan li {
  border: 1px dashed var(--terracota); border-radius: 999px;
  padding: .45rem 1rem; color: var(--terracota); font-size: var(--p--1);
}

.mapa { margin: 0; border: 1px solid var(--lino-h); border-radius: 12px; overflow: hidden; background: var(--lino); }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mapa__pie {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .75rem .9rem; font-size: var(--p--1); line-height: 1.45;
  color: var(--sepia-s); border-top: 1px solid var(--lino-h);
}
.mapa__pie b { color: var(--sepia); }
.mapa__cred { font-size: .84em; opacity: .85; }
.mapa__cred a { color: var(--terracota); }