/* ══════════════════════════════════════════════════════════════════
   BARBERIA KING OF KING'S · Temuco
   Demo 177. Identidad: «DAMERO Y DORADO VIEJO».

   ╔════════════════════════════════════════════════════════════════╗
   ║  NO SE INVENTAN PERSONAS                                        ║
   ║  La pieza firma es el perfil de cada barbero, y no consta ni    ║
   ║  un nombre. Las tres tarjetas van con «Barbero 01/02/03» y      ║
   ║  todos sus campos marcados como pendientes. En una pagina que   ║
   ║  trata justamente del equipo, inventar nombres seria lo peor    ║
   ║  que se puede hacer: la estructura se entrega vacia y el        ║
   ║  vacio esta rotulado.                                           ║
   ╚════════════════════════════════════════════════════════════════╝

   LA DIRECCION EN UNA FRASE
   El piso de damero blanco y negro de la barberia de siempre, y un
   dorado envejecido de marco de espejo — en filetes de 1px, nunca en
   letras grandes.

   LA PALETA — CASI-MONOCROMA #5 DEL REGISTRO
   --hueso   #F5F4F0  el blanco del damero
   --negro   #131311  el negro del damero
   --dorado  #8C7332  DORADO VIEJO, para lineas de 1px y bordes
   --oro-txt #6F5A24  el mismo dorado cuando lleva texto (5,9:1)
   --gris    #5B5852  secundario (5,7:1)

   DESLINDE DE LAS CASI-MONOCROMAS: la 133 es caucho (MATERIAL mate),
   la 165 es tablero de anden (PANEL por filas), la 170 es Holstein
   (BLOBS organicos), la 176 es deportiva (blanco/negro con una LINEA
   roja). **Esta es PISO CLASICO: geometria de baldosa en diagonal**,
   la unica de las cinco cuyo blanco y negro forman un PATRON REGULAR.
   DESLINDE DE DORADOS: el oro de makma es JOYA (metalico, con
   brillo especular) y el de the-temple es GIMNASIO (saturado,
   deportivo). Este es DORADO ENVEJECIDO de marco de espejo: apagado,
   verdoso, y **solo aparece en lineas de 1px** — jamas en un titular.

   EL TRIO
   · display · Bodoni Moda (variable) — didona de contraste alto, la
     letra de los letreros de barberia clasica. Primera vez en el
     registro.
   · cuerpo  · Jost — geometrica limpia, no pelea con la didona.
   · dato    · Space Mono — REPETICION CONSCIENTE: el catalogo esta
     agotado y es la unica con aire retro de rotulo, que es
     exactamente lo que pide una barberia clasica.

   FAMILIA «LA PERSONA ES EL NEGOCIO»: 155 · 175 · **177** · 180.
   Con una diferencia: en las otras tres el negocio es UNA persona;
   **aca son VARIAS y hay que poder elegir entre ellas**, que es un
   problema distinto y una pieza distinta.

   LAS SEIS CARAS DE BARBERIA DEL REGISTRO: calida-76 · vintage
   bogota · fria-128 · Klein-129 · **damero-177** · casa-178.

   LA CABECERA (143ª del oficio) — LA CORONA
   Tres puntas sobre una banda, geometrica y chica. El nombre la pide,
   pero se dibuja MINIMA y no heraldica: tres triangulos y una linea,
   sin joyas, sin adornos y sin escudo.

   EL FONDO — EL DAMERO QUE SE COMPLETA
   Las baldosas aparecen DE A UNA Y EN ORDEN de tablero —fila por
   fila, izquierda a derecha— hasta completar la franja, y se quedan.
   **DESLINDE DE CINCO — familia «llegar y quedarse»**:
     · la 114 ESTAMPA (aparece de golpe, con impacto)
     · la 127 CAE (llega por gravedad)
     · la 135 APARECE (se materializa en fundido)
     · la 149 ENCIENDE (luz sobre algo que ya estaba)
     · **esta APARECE EN ORDEN Y FORMA PATRON**: es la unica ordenada
       de las cinco — no llegan cosas sueltas, se arma una grilla, y
       la ultima baldosa completa un dibujo que las anteriores solo
       insinuaban.
   Reduced-motion: damero completo y fijo.

   LA ESTRUCTURA — B (indice lateral)
   El indice son LOS BARBEROS (01 · 02 · 03) y cada seccion es el
   perfil de uno.
   DESLINDE con los B del registro (90/102/123/135/159/183): todos
   indexan SECCIONES, CAPITULOS o PRODUCTOS. **Este es el unico
   indice de PERSONAS**, y por eso el numeral va antes del nombre:
   en una barberia el orden de la lista no es jerarquia, es turno.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --hueso:   #F5F4F0;
  --hueso-2: #EAE8E2;
  --negro:   #131311;
  --negro-2: #1E1E1B;
  --dorado:  #8C7332;
  --oro-txt: #6F5A24;
  --gris:    #5B5852;
  --linea:   #DAD7CF;

  --display: 'Bodoni Moda', Georgia, serif;
  --cuerpo:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Space Mono', ui-monospace, 'Consolas', monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--negro);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-x: hidden;
}

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

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

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

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

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

/* LA CORONA — la cabecera 143ª. Tres puntas y una banda. Mínima. */
.corona {
  position: relative; display: block; flex: none;
  width: 24px; height: 18px;
}
.corona::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 5px;
  background: var(--dorado);
  clip-path: polygon(0 100%, 0 18%, 17% 62%, 50% 0, 83% 62%, 100% 18%, 100% 100%);
}
/* la banda de abajo, en 2px */
.corona::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--dorado); border-radius: 1px;
}

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: var(--gris);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.cab__nav a:hover { color: var(--oro-txt); border-bottom-color: var(--dorado); }

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

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

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

/* EL DAMERO QUE SE COMPLETA */
.damero {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 22vh; z-index: 1; pointer-events: none;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, 1fr);
  transform: skewX(-14deg) scale(1.25);
  transform-origin: bottom center;
  opacity: .5;
}
.damero i { background: transparent; }
/* el patron: una de cada dos, alternando por fila */
.damero i:nth-child(2n)    { background: var(--negro); }
.damero i:nth-child(16n+9),
.damero i:nth-child(16n+11),
.damero i:nth-child(16n+13),
.damero i:nth-child(16n+15) { background: var(--negro); }
.damero i:nth-child(16n+10),
.damero i:nth-child(16n+12),
.damero i:nth-child(16n+14),
.damero i:nth-child(16n+16) { background: transparent; }

/* aparecen EN ORDEN de tablero y se quedan: es lo que las separa de
   las otras cuatro de la familia «llegar y quedarse». */
.js .damero i { opacity: 0; }
.js .damero.ok i { animation: baldosa .5s ease-out forwards; }
.js .damero.ok i:nth-child(1)  { animation-delay: .00s; }
.js .damero.ok i:nth-child(2)  { animation-delay: .07s; }
.js .damero.ok i:nth-child(3)  { animation-delay: .14s; }
.js .damero.ok i:nth-child(4)  { animation-delay: .21s; }
.js .damero.ok i:nth-child(5)  { animation-delay: .28s; }
.js .damero.ok i:nth-child(6)  { animation-delay: .35s; }
.js .damero.ok i:nth-child(7)  { animation-delay: .42s; }
.js .damero.ok i:nth-child(8)  { animation-delay: .49s; }
.js .damero.ok i:nth-child(9)  { animation-delay: .56s; }
.js .damero.ok i:nth-child(10) { animation-delay: .63s; }
.js .damero.ok i:nth-child(11) { animation-delay: .70s; }
.js .damero.ok i:nth-child(12) { animation-delay: .77s; }
.js .damero.ok i:nth-child(13) { animation-delay: .84s; }
.js .damero.ok i:nth-child(14) { animation-delay: .91s; }
.js .damero.ok i:nth-child(15) { animation-delay: .98s; }
.js .damero.ok i:nth-child(16) { animation-delay: 1.05s; }
.js .damero.ok i:nth-child(17) { animation-delay: 1.12s; }
.js .damero.ok i:nth-child(18) { animation-delay: 1.19s; }
.js .damero.ok i:nth-child(19) { animation-delay: 1.26s; }
.js .damero.ok i:nth-child(20) { animation-delay: 1.33s; }
.js .damero.ok i:nth-child(21) { animation-delay: 1.40s; }
.js .damero.ok i:nth-child(22) { animation-delay: 1.47s; }
.js .damero.ok i:nth-child(23) { animation-delay: 1.54s; }
.js .damero.ok i:nth-child(24) { animation-delay: 1.61s; }
@keyframes baldosa {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .damero i { opacity: 1 !important; animation: none !important; }
}

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

.specs { display: flex; flex-wrap: wrap; gap: 1.5rem 2.6rem; margin: 0; }
.spec dt {
  font-family: var(--dato); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.35rem; }
.dd--tel a { text-decoration: none; color: var(--oro-txt); border-bottom: 1px solid var(--dorado); }

/* ══════ LOS BARBEROS — ESTRUCTURA B ══════ */
.barberos {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.barberos__cabecera, .noesta__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

.antetitulo {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .7rem;
}
.antetitulo--claro { color: #B5B0A5; }

.barberos h2, .noesta h2 {
  font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.02;
  margin-bottom: 1rem;
}
.noesta h2 { color: var(--hueso); }
.entrada { max-width: 54ch; }
.noesta .entrada { color: #D8D4CB; }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .68rem;
  color: var(--gris); border-left: 2px solid var(--dorado); padding-left: .6rem;
}
.marca-ejemplo--fuerte::before {
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--oro-txt);
}
.marca-ejemplo--claro::before { color: #D8D4CB; border-left-color: var(--dorado); }

.indice-y-perfiles {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .indice-y-perfiles { grid-template-columns: 1fr; } }

/* EL INDICE DE PERSONAS */
.indice {
  position: sticky; top: 5.5rem;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--dorado);
}
@media (max-width: 860px) { .indice { position: static; flex-direction: row; flex-wrap: wrap; gap: 1rem; } }
.indice a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .8rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  font-family: var(--display); font-size: 1.15rem;
}
.indice a:hover { color: var(--oro-txt); }
.indice__n {
  font-family: var(--dato); font-size: .74rem;
  color: var(--oro-txt);
}

.perfiles { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.perfil {
  position: relative;
  background: var(--hueso-2);
  /* el filete dorado de 1px: el marco del espejo */
  border: 1px solid var(--dorado);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.perfil__n {
  font-family: var(--dato); font-size: .78rem;
  color: var(--oro-txt); margin-bottom: .3rem;
}
.perfil h3 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  margin-bottom: 1rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem;
}
.perfil__falta, .pend {
  font-family: var(--dato); font-size: .8rem; font-weight: 400;
  color: var(--gris);
  border-bottom: 1px dashed var(--gris);
  display: inline-block;
}
.perfil__datos { margin: 0; }
.perfil__datos > div { padding: .7rem 0; border-top: 1px solid var(--linea); }
.perfil__datos > div:first-child { border-top: none; }
.perfil__datos dt {
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .2rem;
}
.perfil__datos dd { margin: 0; }

.porque {
  max-width: 60rem; margin: clamp(2rem, 4vw, 3rem) 0 0;
  border-top: 1px solid var(--dorado);
  padding-top: 1.4rem;
}
.porque h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .7rem; }
.porque p { max-width: 62ch; color: var(--gris); }
.porque p:last-child { margin-bottom: 0; }

/* ══════ SI SU BARBERO NO ESTA ══════ */
.noesta {
  background: var(--negro); color: var(--hueso);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.opciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.op {
  background: var(--negro-2);
  border: 1px solid #3A3833;
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.op--elegir { border-color: var(--dorado); }
.op__rot {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: #B5B0A5; margin-bottom: .3rem;
}
.op h3 { font-size: 1.4rem; color: var(--hueso); margin-bottom: .5rem; }
.op p { font-size: .96rem; color: #D8D4CB; }
.op p:last-child { margin-bottom: 0; }

/* «falta»: la pagina es mayormente CLARA — tono oscuro por defecto,
   claro como excepcion en la seccion negra. */
.falta {
  display: inline-block; margin-top: .4rem;
  font-family: var(--dato); font-size: .78rem;
  color: var(--oro-txt); border-bottom: 1px dashed var(--dorado);
}
.noesta .falta { color: #D9BE72; border-bottom-color: #D9BE72; }

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}
.cierre__tel { font-size: clamp(1.7rem, 6.5vw, 4.2rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--negro);
  border-bottom: 2px solid var(--dorado);
}
.cierre__tel a:hover { color: var(--oro-txt); }
.cierre__pie { font-size: .88rem; color: var(--gris); margin: 0; }

/* ══════ PARA LA BARBERIA ══════ */
.dueno {
  background: var(--hueso-2);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.dueno h2 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); 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: .1em; text-transform: uppercase;
  color: var(--oro-txt); margin-bottom: .5rem;
}
.dueno p { color: var(--negro); font-size: .95rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--dorado); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--negro); }

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

/* ── apariciones ── */
.js .rev { opacity: 0; transform: translateY(14px); }
.js .rev.ok {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; }
}

/* El damero entra en la lista de piezas que el JS destapa, pero NO se
   desvanece como las demas: su animacion es la de las baldosas, y el
   contenedor tiene que quedarse en su opacidad de fondo. */
.js .damero.rev,
.js .damero.rev.ok {
  opacity: .5;
  /* OJO: hay que repetir el transform del damero, no poner `none`.
     La regla generica .rev usa translateY para la aparicion, y si
     aca se anula el transform entero se pierde el skew y el scale
     que le dan la perspectiva de piso. Paso en el primer corte. */
  transform: skewX(-14deg) scale(1.25);
  transition: none;
}


/* ══════ LAS FOTOS ══════
   Grilla dura, igual que el resto de la pagina: dos arriba y una ancha
   abajo. Cada figura llega desde un lado distinto — izquierda, derecha,
   abajo — con un retardo escalonado, para que se lean como tres cosas
   puestas sobre la mesa y no como un bloque que se enciende. */
.galeria {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 78rem; margin: 0 auto;
}
.galeria__titulo {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.05;
  margin: 0 0 .6rem; color: var(--tinta);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--gris); font-size: .96rem; line-height: 1.6;
}
.galeria__grilla { display: grid; gap: clamp(.9rem, 2vw, 1.6rem); grid-template-columns: 1fr 1fr; }
.gal { margin: 0; background: var(--hueso-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(--dorado);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--gris); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--gris);
  margin: 1.4rem 0 0; padding-left: 1.1rem; position: relative;
}
.galeria__falta::before { content: '·'; position: absolute; left: .3rem; }

.js .gal.rev { opacity: 0; }
.js .gal--izq.rev   { transform: translateX(-2.4rem); }
.js .gal--der.rev   { transform: translateX(2.4rem); }
.js .gal--abajo.rev { transform: translateY(2.4rem) scale(.98); }
.js .gal.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.js .gal--der.rev.ok   { transition-delay: .12s; }
.js .gal--abajo.rev.ok { transition-delay: .22s; }

@media (max-width: 700px) {
  .galeria__grilla { grid-template-columns: 1fr; }
  .gal--abajo img { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .js .gal.rev { opacity: 1; transform: none; }
}



/* ══════════════════════════════════════════════════════════════════
   LAS IMÁGENES DE RUBRO — seis tratamientos
   ══════════════════════════════════════════════════════════════════
   La página no puede ser texto sobre fondo plano de arriba abajo. Van
   seis apariciones distintas, para que el ojo no vea siempre lo mismo:
   portada disuelta, aura de color, media pantalla, cita a sangre, tira
   de tres, y la galería con las fotos propias del negocio.

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

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

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

/* ── 2 · AURA DE COLOR ── */
#barberos { 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(--hueso-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(--negro);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gris); 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(--negro);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--negro); 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(--hueso); 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(245,244,240,.72) 0%,
              rgba(245,244,240,.84) 45%, rgba(245,244,240,.90) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--negro); }
.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(--negro);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--oro-txt);
}
.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; }
}