/* ══════════════════════════════════════════════════════════════════
   HOUSE SALON BARBERIA · Temuco
   Demo 178. Identidad: «PAPEL MURAL Y PALO ROSA».

   LA DIRECCION EN UNA FRASE
   El local se llama casa, asi que la pagina es una casa: papel mural
   de rayas finas verticales, apenas visible, y el palo rosa
   empolvado de un tapiz antiguo. Escala domestica, no de mall.

   LA PALETA
   --crema    #F7F2EA  el papel
   --raya     rgba(...)  las rayas del empapelado, 1-2px
   --palo     #8A4E5B  palo rosa para TEXTO (5,4:1)
   --palo-obj #C295A0  el mismo rosa para OBJETOS y bordes. No se usa
                       en texto: sobre crema da 2,6:1.
   --tinta    #241F22  tinta calida
   --hondo    #3A2A2E  la seccion oscura
   --gris     #5F565A  secundario (5,5:1)

   DESLINDE DE ROSAS DEL REGISTRO: el te de la 119 es CALMA DENTAL
   (frio, casi blanco); el coral de la 156 es ACCESORIO VIVO
   (saturado, alegre); el rosado carne de la 138 es INFORMACION
   (funcional, de esquema). **Este es TAPICERIA ANTIGUA: empolvado,
   noble, con gris adentro** — el rosa de una casa que lleva cuarenta
   años con el mismo papel.
   DESLINDE DE RAYAS: el toldo de la 148 lleva rayas ANCHAS de lona
   (contraste alto, de verano). Las de aca son de EMPAPELADO: 1-2px,
   verticales y apenas perceptibles — se notan cuando uno se acerca,
   que es lo que hace un papel mural.

   EL TRIO
   · display · Cormorant (variable) — serif fina y noble, de casa
     antigua. Primera vez como display del registro.
   · cuerpo  · Hanken Grotesk — neutra, para que la display respire.
   · dato    · PT Mono — REPETICION CONSCIENTE: el catalogo esta
     agotado; es la mono mas discreta y aca solo lleva rotulos.

   FAMILIA «DOS-EN-UNO»: 120 · 168 · **178** · 185.
   LAS SEIS CARAS DE BARBERIA: calida-76 · vintage bogota · fria-128 ·
   Klein-129 · damero-177 · **casa-178**.

   LA CABECERA (144ª del oficio) — LA PUERTA CON NUMERO
   La puerta de casa con su numerito arriba.
   **Ningun logotipo del registro es una puerta.** Y con humor: la
   casa del registro va juntando sus partes — la 72ª fue LA LLAVE de
   pension, la 115ª LA VENTANA que se enciende, y esta es LA PUERTA.
   Falta el techo y tenemos la casa entera.

   EL FONDO — EL MURAL QUE SE DESENROLLA
   Una franja de papel se desenrolla desde el borde superior, revela
   el rayado y SE QUEDA; despues se funde y vuelve a empezar. 20s.
   DESLINDE con el estriado de la 121: aquello es una trama que
   AVANZA en diagonal, perpetua, sin principio ni fin. Esto es un
   DESENROLLADO vertical CON FINAL: llega abajo y se detiene, como un
   rollo de papel mural que alguien esta pegando.
   Reduced-motion: mural fijo y completo.

   LA ESTRUCTURA — M (comparador paralelo) CON TECHO COMUN
   BARBERIA / SALON lado a lado, pero **bajo un encabezado que ocupa
   las dos columnas y un pie que las vuelve a juntar**: la grilla
   dibuja el organigrama del negocio — una casa arriba, dos salones
   abajo, y la gracia (ir juntos) cerrando.
   DESLINDE con los M del registro (92/110/120/131/151/166/169/185):
   todos ponen dos columnas independientes. **Este es el unico M con
   techo comun dibujado por la grilla**, y no es adorno: el argumento
   de la pagina es justamente que las dos cosas estan bajo el mismo
   techo.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crema:    #F7F2EA;
  --crema-2:  #EDE6DA;
  --palo:     #8A4E5B;
  --palo-obj: #C295A0;
  --tinta:    #241F22;
  --hondo:    #3A2A2E;
  --gris:     #5F565A;
  --linea:    #DDD3C5;

  --display: 'Cormorant', Georgia, serif;
  --cuerpo:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'PT Mono', ui-monospace, 'Consolas', monospace;

  /* EL PAPEL MURAL: rayas de 1px cada 9px, apenas visibles. */
  --papel: repeating-linear-gradient(90deg,
             rgba(138,78,91,.10) 0 1px, transparent 1px 9px);
}

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

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

body {
  margin: 0;
  background: var(--crema);
  background-image: var(--papel);
  color: var(--tinta);
  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(--palo); outline-offset: 3px; }

/* ── la banda de propuesta ── */
.propuesta {
  background: var(--hondo); color: var(--crema);
  padding: .9rem clamp(1.2rem, 5vw, 4rem);
}
.propuesta__que { font-size: .8rem; margin: 0 0 .25rem; }
.propuesta__gancho { font-size: .8rem; color: #C6B4B8; 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(--crema);
  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: .75rem; text-decoration: none; }
.cab__nombre { font-family: var(--display); font-size: 1.55rem; font-weight: 600; }

/* LA PUERTA CON NUMERO — la cabecera 144ª. */
.puerta {
  position: relative; display: block; flex: none;
  width: 18px; height: 24px;
  border: 2px solid var(--palo-obj);
  border-radius: 3px 3px 0 0;
  background: transparent;
}
/* la manilla */
.puerta::after {
  content: ''; position: absolute; right: 3px; top: 12px;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--palo-obj);
}
/* el numerito de arriba */
.puerta__num {
  position: absolute; left: 50%; top: -7px;
  width: 10px; height: 4px; margin-left: -5px;
  background: var(--palo-obj);
  border-radius: 1px;
}

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .74rem;
  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(--palo); border-bottom-color: var(--palo-obj); }

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

/* EL MURAL QUE SE DESENROLLA */
.mural {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(38vw, 380px);
  z-index: 1; pointer-events: none; overflow: hidden;
}
.mural__papel {
  display: block; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(90deg,
      rgba(138,78,91,.30) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, var(--crema-2), var(--crema));
  transform-origin: top center;
  transform: scaleY(0);
}
/* se desenrolla, se queda, y despues se va: nunca rebota ni sube de
   a poco — un rollo baja y punto. */
.js .mural__papel { animation: desenrollar 20s ease-in-out infinite; }
@keyframes desenrollar {
  0%        { transform: scaleY(0);   opacity: 1; }
  22%, 74%  { transform: scaleY(1);   opacity: 1; }
  92%, 100% { transform: scaleY(1);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mural__papel { animation: none; transform: scaleY(1); }
}

.sitio {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.8rem, 9vw, 6.4rem);
  line-height: 1.02; 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: .64rem;
  letter-spacing: .1em; 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(--palo); border-bottom: 2px solid var(--palo-obj); }

/* ══════ LA PIEZA FIRMA — M CON TECHO COMUN ══════ */
.casa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
@media (max-width: 820px) { .casa { grid-template-columns: 1fr; } }

/* EL TECHO: ocupa las dos columnas y las cubre. */
.techo {
  grid-column: 1 / -1;
  border: 2px solid var(--palo-obj);
  border-bottom: none;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: rgba(255,255,255,.5);
}
@media (max-width: 820px) { .techo { border-bottom: 2px solid var(--palo-obj); } }

.antetitulo {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--palo);
  margin-bottom: .6rem;
}
.antetitulo--claro { color: #D9B9C0; }

.casa h2, .local h2 {
  font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.04;
  margin-bottom: .8rem;
}
.local h2 { color: var(--crema); }
.entrada { max-width: 56ch; }
.local .entrada { color: #E4D8DA; }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .7rem;
  color: var(--gris); border-left: 2px solid var(--palo-obj); padding-left: .6rem;
}
.marca-ejemplo--claro::before { color: #D9B9C0; border-left-color: #D9B9C0; }

/* LAS DOS COLUMNAS, colgando del techo */
.col {
  border: 2px solid var(--palo-obj);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.col--a { border-right-width: 1px; }
.col--b { border-left-width: 1px; }
@media (max-width: 820px) {
  .col--a, .col--b { border-width: 2px; border-top: none; }
}
.col__rot {
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); margin-bottom: .2rem;
}
.col h3 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: 1rem; }
.col ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.col li { padding: .6rem 0; border-top: 1px solid var(--linea); }
.col li:first-child { border-top: none; }
.col__falta { margin: 0; }

/* EL PISO: vuelve a juntar las dos columnas. */
.piso {
  grid-column: 1 / -1;
  border: 2px solid var(--palo-obj);
  border-top: none;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--crema-2);
}
@media (max-width: 820px) { .piso { border-top: none; } }
.piso h3 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: .7rem; }
.piso p { max-width: 62ch; }

/* «falta»: pagina mayormente CLARA — tono oscuro por defecto. */
.falta {
  display: inline-block; margin-top: .3rem;
  font-family: var(--dato); font-size: .76rem;
  color: var(--palo); border-bottom: 1px dashed var(--palo-obj);
}
.local .falta { color: #E0AEB8; border-bottom-color: #E0AEB8; }

/* ══════ LA CASA ══════ */
.local {
  background: var(--hondo); color: var(--crema);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.local__cabecera { max-width: 54rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }

.rasgos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.ra { border-top: 1px solid #5B4449; padding-top: 1rem; }
.ra h3 { font-size: 1.4rem; color: var(--crema); margin-bottom: .5rem; }
.ra p { font-size: .96rem; color: #E4D8DA; margin-bottom: 0; }

.descargo {
  max-width: 64ch; margin: 2rem 0 0;
  font-size: .86rem; color: #E4D8DA;
}

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .1em; 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(--palo);
  border-bottom: 4px solid var(--palo-obj);
}
.cierre__tel a:hover { border-bottom-color: var(--palo); }
.cierre__pie { font-size: .88rem; color: var(--gris); margin: 0; }

/* ══════ PARA EL SALON ══════ */
.dueno {
  background: var(--crema-2);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.dueno h2 { font-size: clamp(2rem, 4.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: .1em; text-transform: uppercase;
  color: var(--palo); margin-bottom: .5rem;
}
.dueno p { color: var(--tinta); 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: 2px solid var(--palo-obj); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--tinta); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #A99DA1;
  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; }
}


/* ══════ 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(--crema-2); border: 1px solid var(--linea); padding: .6rem; }
.gal--abajo { grid-column: 1 / -1; }
.gal img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 3px solid var(--palo);
}
.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: 54% 44%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--crema) 0%, var(--crema) 30%,
              rgba(247,242,234,.66) 46%, rgba(247,242,234,.22) 68%, rgba(247,242,234,.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(247,242,234,0) 0%, rgba(247,242,234,.30) 42%, var(--crema) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#casa { position: relative; isolation: isolate; overflow: hidden; }
.aura { position: absolute; z-index: -1; inset: -12% -8% auto -8%; height: 78%; pointer-events: none; }
.aura img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Acá el desenfoque ES el efecto: la foto deja de leerse y queda la luz. */
  filter: blur(64px) saturate(1.45);
  opacity: .38;
  transform: scale(1.25);
  /* Y se apaga EN LA IMAGEN, no con un velo encima. Un ::after que pinta
     el fondo apaga solo DENTRO del div: en el borde de abajo queda un
     corte recto a media seccion. Con la mascara la imagen misma se
     desvanece y no hay borde que cortar. */
  -webkit-mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
          mask-image: radial-gradient(ellipse 74% 58% at 50% 34%,
              #000 0%, #000 26%, rgba(0,0,0,.55) 52%, transparent 82%);
}
@media (prefers-reduced-motion: no-preference) {
  .aura img { animation: deriva-aura 68s ease-in-out infinite alternate; }
}
@keyframes deriva-aura {
  from { transform: scale(1.25) translate3d(-3%, 0, 0); }
  to   { transform: scale(1.38) translate3d(3%, -2%, 0); }
}

/* ── 3 · MEDIA PANTALLA ── */
.mitades {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: var(--crema-2);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala, ambos se salen unos píxeles y
     aparece scroll horizontal por un segundo. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: 62svh; overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--tinta);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--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(--tinta);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--tinta); max-width: 34rem;
}
.js .mitades__texto.rev { opacity: 0; transform: translateX(1.6rem); }
.js .mitades__foto.rev  { opacity: 0; transform: scale(1.04); }
.js .mitades__texto.rev.ok,
.js .mitades__foto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 780px) {
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto { min-height: 44svh; }
}

/* ── 4 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: 70svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--crema); overflow: hidden;
}
.cita__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* Velo parejo y fuerte: el texto va centrado y grande, encima de la foto
   entera. Calculado sobre el peor caso —imagen del color contrario
   detrás— para que el ratio aguante sin ensuciar la imagen. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,242,234,.72) 0%,
              rgba(247,242,234,.84) 45%, rgba(247,242,234,.90) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--tinta); }
.cita__texto p {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.16;
  margin: 0; color: var(--tinta);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--palo);
}
.js .cita__texto.rev { opacity: 0; transform: translateY(16px); }
.js .cita__texto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
  .cita__foto img { animation: respira-cita 58s ease-in-out infinite alternate; }
}
@keyframes respira-cita {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(1.4%, -1%, 0); }
}

/* ── 5 · LA TIRA ── */
.tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--linea); }
.tira__pieza { margin: 0; overflow: hidden; height: 34svh; min-height: 220px; }
.tira__pieza img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .tira__pieza:hover img { transform: scale(1.05); }
}
.js .tira__pieza.rev { opacity: 0; transform: translateY(1.4rem); }
.js .tira__pieza.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .tira__pieza.rev.ok:nth-child(2) { transition-delay: .1s; }
.js .tira__pieza.rev.ok:nth-child(3) { transition-delay: .2s; }
@media (max-width: 700px) {
  .tira { grid-template-columns: 1fr 1fr; }
  .tira__pieza:last-child { grid-column: 1 / -1; height: 28svh; }
}

@media (prefers-reduced-motion: reduce) {
  .js .portada--foto .portada__foto,
  .js .mitades__texto.rev, .js .mitades__foto.rev,
  .js .cita__texto.rev, .js .tira__pieza.rev { opacity: 1; transform: none; }
}

/* ── TAJO: LA FRANJA A SANGRE ──
   Una franja de foto entre dos secciones. No lleva texto encima, asi
   que no lleva velo: se ve la foto y punto. Es la aparicion que mas
   llena la pagina por el peso que cuesta. */
/* La clase es .tajo y no .banda ni .franja: hay demos que ya usan esos
   dos nombres para secciones propias, y chocaban. */
.tajo {
  position: relative; overflow: hidden;
  height: clamp(180px, 30svh, 340px);
  background: var(--crema-2);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .tajo img { animation: deriva-tajo 54s ease-in-out infinite alternate; }
}
@keyframes deriva-tajo {
  from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, -1.4%, 0); }
}
.js .tajo { opacity: 0; }
.js .tajo.ok { opacity: 1; transition: opacity 1s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .tajo { opacity: 1; }
}

/* ── TELON: la foto detras de una seccion entera ──
   No es el aura. El aura va reventada a 64 px y se lee como mancha de
   color; el telon va NITIDO y bajo de opacidad, y se lee como foto.
   El texto encima se sostiene porque la foto esta al .15, no porque
   este sucia — que es la regla de siempre. */
.con-telon { position: relative; isolation: isolate; overflow: hidden; }
.telon { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.telon img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  opacity: .15;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .telon img { animation: deriva-telon 76s ease-in-out infinite alternate; }
}
@keyframes deriva-telon {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.6%, -1%, 0); }
}

/* ── MOSAICO ──
   Seis piezas en grilla. Es la unica parte de la pagina donde una
   imagen puede repetirse con otro recorte: a este tamano no se lee
   como repeticion sino como serie. */
/* El mosaico trae su propio fondo: sus colores salen del bloque de
   .mitades y hay demos donde ese fondo es el contrario al del body —
   el titulo quedaba a 1,00:1, invisible. Con fondo propio el contraste
   esta garantizado en todas. */
.mos {
  background: var(--crema-2);
  padding: clamp(2.6rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.mos__titulo {
  max-width: 82rem; margin-left: auto; margin-right: auto;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.08;
  margin: 0 0 .5rem; color: var(--tinta);
}
.mos__nota {
  max-width: 82rem; margin: 0 auto 1.8rem;
  color: var(--gris); font-size: .94rem; line-height: 1.6;
}
.mos__grilla {
  display: grid; gap: 4px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 82rem; margin: 0 auto;
}
.mos__p { margin: 0; overflow: hidden; height: clamp(140px, 20svh, 220px); background: var(--crema-2); }
.mos__p img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
}
.mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) {
  .mos__p:hover img { transform: scale(1.06); }
}
.js .mos__p { opacity: 0; transform: translateY(1.2rem); }
.js .mos__p.ok {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.js .mos__p.ok:nth-child(2) { transition-delay: .06s; }
.js .mos__p.ok:nth-child(3) { transition-delay: .12s; }
.js .mos__p.ok:nth-child(4) { transition-delay: .18s; }
.js .mos__p.ok:nth-child(5) { transition-delay: .24s; }
.js .mos__p.ok:nth-child(6) { transition-delay: .30s; }
@media (max-width: 760px) {
  .mos__grilla { grid-template-columns: 1fr 1fr; }
  .mos__p:nth-child(1), .mos__p:nth-child(6) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mos__p { opacity: 1; transform: none; }
}

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

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