/* ══════════════════════════════════════════════════════════════════
   CONSTRUCTORA POZAS SpA · Freire
   Demo 182. Identidad: «HORMIGON A LA VISTA».

   ╔════════════════════════════════════════════════════════════════╗
   ║  EL PROMPT DECIA «WEB RELIQUIA». SE VERIFICO Y NO ES ASI.       ║
   ║  casaspoz.com responde 200 el 31-08-2026 y funciona: esta       ║
   ║  hecho en un armador de plantillas (GoDaddy Website Builder).   ║
   ║  Asi que el gancho NO puede ser «su web es de otra epoca» —     ║
   ║  seria falso. El dato real, medido sobre el HTML descargado:    ║
   ║  el sitio ofrece «casas llave en mano» y **la palabra           ║
   ║  «incluye» no aparece ni una vez, ni tampoco «empalme»**.       ║
   ║  Ese es el argumento, y es mejor que el del prompt: no falta    ║
   ║  una web, falta la respuesta de la pregunta mas cara del rubro. ║
   ╚════════════════════════════════════════════════════════════════╝

   DATO QUE NO SE USA: 3 reseñas. No se cita (regla de la 133).

   COMUNA NUEVA DEL REGISTRO: Freire — con la 51 (casas-fabelsa) como
   par. DESLINDE: aquella es PREFABRICADA (modulo que llega hecho);
   esta es OBRA LLAVE EN MANO (se construye en el terreno). No se
   nombran entre ellas.

   LA DIRECCION EN UNA FRASE
   Hormigon fraguado con la memoria de la madera impresa: la veta del
   encofrado, en lineas horizontales apenas visibles, es la textura
   de fondo de toda la pagina.

   LA PALETA
   --hormigon #E8E7E3  el fondo, con la veta del encofrado
   --panel    #DCDBD6  el gris del bloque secundario
   --madera   #6E4C23  madera de encofrado para TEXTO (5,6:1 sobre
                       panel)
   --mad-obj  #9A7448  la misma madera para OBJETOS dibujados
   --tinta    #1E1F1D
   --gris     #565853  secundario: 5,0:1 sobre panel, que es el peor
                       fondo claro de la pagina (leccion de la 175 y
                       la 181 aplicada ANTES de auditar)

   DESLINDE DE CEMENTOS Y CONSTRUCTORAS: el cemento de la 127 era
   SACO Y POLVO con amarillo de maquinaria (material antes de usar);
   la de ekla es EL PLANO azul (el proyecto). **Esta es EL MATERIAL YA
   FRAGUADO**, con la marca de las tablas que lo contuvieron — la
   textura lineal ES la identidad, no un adorno.

   EL TRIO
   · display · Josefin Slab (variable) — slab geometrica de asta
     fina; da orden sin gritar. Primera vez en el registro.
   · cuerpo  · Barlow — neutra, aguanta filas largas.
   · dato    · B612 Mono — REPETICION CONSCIENTE: el catalogo esta
     agotado; es mono de cabina de avion, hecha para leerse rapido
     bajo presion, y aca lleva los sellos.

   LA CABECERA (147ª del oficio) — LA LLAVE DE CASA NUEVA
   La llave plana dentada con cabeza cuadrada.
   **DESLINDE TRIPLE — tres llaves en el registro y tres objetos**:
     · la 72ª es LLAVE ANTIGUA de pension (paleta, hueca)
     · la 145ª (180) es LLAVE HERRAMIENTA (no abre: aprieta)
     · esta es LLAVE DE CERRADURA NUEVA — la promesa del rubro hecha
       objeto: «llave en mano» es literalmente esto.
   (147ª y no 148ª porque la 179 quedo en pausa.)

   EL FONDO — LA PLOMADA
   El hilo con su peso conico baja, oscila con amplitud decreciente y
   SE AQUIETA en la vertical perfecta. Queda quieta el resto del
   ciclo. 24s.
   **DESLINDE DE CINCO — familia «cosas que se equilibran»**:
     · los platos de la 114 se equilibran para NO CAERSE (tension)
     · la burbuja de la 123 BUSCA EL CENTRO y se queda (llega)
     · la aguja de la 133 CLAVA en un valor y se detiene (veredicto)
     · el pendulo de la 174 NO BUSCA DETENERSE (isocrono, perpetuo)
     · **la plomada BUSCA LA VERTICAL Y SE DETIENE DEL TODO** — es la
       unica que se aquieta por fisica y no por decision, y es la
       calma del oficio bien hecho: cuando la plomada para, la pared
       esta a plomo.
   Reduced-motion: plomada vertical y quieta.

   LA ESTRUCTURA — K (filas <details>)
   Cada item del llave en mano es una fila con su SELLO visible antes
   de abrirse.
   **DESLINDE — cuarta fila-veredicto del registro y cuarta forma**:
     · la 133 uso RECTANGULO NEGATIVO (veredicto binario)
     · la 156 uso CHAPITA normativa
     · la 173 uso RESPUESTA CORTA hablada
     · **esta usa SELLO CIRCULAR de timbre de obra** — el gesto de
       timbrar un plano, que es lo que hace una constructora cuando
       algo queda aprobado.
   Y los nueve sellos van en «por confirmar»: **es la unica K del
   registro que se entrega con todos sus veredictos vacios**, porque
   sólo la constructora puede darlos.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --hormigon: #E8E7E3;
  --panel:    #DCDBD6;
  --madera:   #6E4C23;
  --mad-obj:  #9A7448;
  --tinta:    #1E1F1D;
  --hondo:    #2C2E2B;
  --gris:     #565853;
  --linea:    #C7C6C0;

  --display: 'Josefin Slab', Georgia, serif;
  --cuerpo:  'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'B612 Mono', ui-monospace, 'Consolas', monospace;

  /* LA VETA DEL ENCOFRADO: lineas horizontales de tabla, apenas
     visibles. Es la textura de todo el fondo. */
  --veta: repeating-linear-gradient(180deg,
            rgba(30,31,29,.055) 0 1px, transparent 1px 34px);
}

*, *::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(--hormigon);
  background-image: var(--veta);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.66;
  overflow-x: hidden;
}

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

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

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

/* ── 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(--hormigon);
  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.25rem; font-weight: 600; }

/* LA LLAVE DE CASA NUEVA — la cabecera 147ª. */
.llave {
  position: relative; display: block; flex: none;
  width: 30px; height: 14px;
}
/* la cabeza cuadrada */
.llave::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 12px; height: 12px;
  border: 2.5px solid var(--mad-obj);
  border-radius: 2px;
}
/* el paletón */
.llave::after {
  content: ''; position: absolute; left: 11px; top: 5px;
  width: 19px; height: 4px;
  background: var(--mad-obj); border-radius: 0 1px 1px 0;
}
/* los dientes */
.llave__dientes {
  position: absolute; right: 0; top: 9px;
  width: 11px; height: 5px;
  background: var(--mad-obj);
  clip-path: polygon(0 0, 18% 0, 18% 100%, 36% 100%, 36% 0, 60% 0, 60% 100%, 78% 100%, 78% 0, 100% 0, 100% 100%, 0 100%);
}

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

.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; }

/* LA PLOMADA */
.plomada-fondo {
  position: absolute; right: 12%; top: 0;
  width: 120px; height: 62vh;
  z-index: 1; pointer-events: none;
}
.plomada {
  position: absolute; left: 50%; top: 0;
  width: 1px; height: 100%;
  margin-left: -.5px;
  background: var(--linea);
  transform-origin: 50% 0;
  display: block;
}
/* el peso conico */
.plomada__peso {
  position: absolute; left: 50%; bottom: -22px;
  width: 18px; height: 26px; margin-left: -9px;
  background: var(--mad-obj);
  clip-path: polygon(0 0, 100% 0, 100% 52%, 50% 100%, 0 52%);
}
/* baja, oscila decreciente y SE AQUIETA. La quietud es el punto. */
.js .plomada { animation: aplomar 24s ease-out infinite; }
@keyframes aplomar {
  0%   { transform: rotate(11deg); }
  14%  { transform: rotate(-8deg); }
  26%  { transform: rotate(5.5deg); }
  36%  { transform: rotate(-3.5deg); }
  45%  { transform: rotate(2deg); }
  53%  { transform: rotate(-1deg); }
  60%  { transform: rotate(.4deg); }
  66%, 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .js .plomada { animation: none; transform: none; }
}

.sitio {
  font-family: var(--dato); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.4rem, 7.5vw, 5.4rem);
  line-height: 1.04; 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: .1em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.3rem; }
.dd--tel a { text-decoration: none; color: var(--madera); border-bottom: 2px solid var(--mad-obj); }

/* ══════ EL DESGLOSE — ESTRUCTURA K ══════ */
.desglose {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.desglose__cabecera, .terreno__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

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

.desglose h2, .terreno h2 {
  font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1.02;
  margin-bottom: 1rem;
}
.terreno h2 { color: var(--hormigon); }
.entrada { max-width: 56ch; }
.terreno .entrada { color: #D5D6D1; }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .68rem;
  color: var(--gris); border-left: 3px solid var(--mad-obj); padding-left: .6rem;
}
.marca-ejemplo--fuerte::before {
  text-transform: uppercase; letter-spacing: .05em; color: var(--madera);
}
.marca-ejemplo--claro::before { color: #B6B7B1; border-left-color: #B6B7B1; }

.filas { max-width: 62rem; border-top: 2px solid var(--tinta); }
.fila { border-bottom: 1px solid var(--linea); background: var(--panel); }
.fila + .fila { margin-top: 0; }
.fila > summary {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.2rem; cursor: pointer; list-style: none;
}
.fila > summary::-webkit-details-marker { display: none; }
.fila__q {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
}
.fila--ojo .fila__q { color: var(--madera); }

/* EL SELLO: timbre de obra, circular. Cuarta forma de fila-veredicto
   del registro. */
.sello {
  margin-left: auto;
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--madera);
  border: 2px solid var(--mad-obj);
  border-radius: 999px;
  padding: .3rem .9rem;
  transform: rotate(-2.5deg);
}
.fila__cuerpo { padding: 0 1.2rem 1.2rem; max-width: 64ch; }
.fila__cuerpo p:last-child { margin-bottom: 0; }

.firma {
  max-width: 54ch; margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: .95rem; color: var(--gris);
  border-left: 4px solid var(--mad-obj); padding-left: 1rem;
}

/* ══════ EL TERRENO ══════ */
.terreno {
  background: var(--hondo); color: var(--hormigon);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.tj { border-top: 2px solid #55584F; padding-top: 1rem; }
.tj__n {
  font-family: var(--dato); font-size: .78rem;
  color: #C4A278; margin-bottom: .3rem;
}
.tj h3 { font-size: 1.4rem; color: var(--hormigon); margin-bottom: .5rem; }
.tj p { font-size: .96rem; color: #D5D6D1; margin-bottom: 0; }

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

/* ══════ 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: .14em; text-transform: uppercase; color: var(--gris);
}
.cierre__tel { font-size: clamp(2rem, 8vw, 5rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--madera);
  border-bottom: 4px solid var(--mad-obj);
}
.cierre__tel a:hover { border-bottom-color: var(--madera); }
.cierre__pie { font-size: .88rem; color: var(--gris); margin: 0; }

/* ══════ PARA LA CONSTRUCTORA ══════ */
.dueno {
  background: var(--panel);
  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(--madera); 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(--mad-obj); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--tinta); }

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


/* ══════ LO QUE HICIERON ══════
   Grilla dura, como el resto: dos arriba y una ancha abajo. Cada foto
   llega desde un lado distinto — la de la izquierda desde la izquierda,
   la de la derecha desde la derecha, la de abajo desde abajo. */
.obras {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 78rem; margin: 0 auto;
}
.obras__titulo {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.04;
  margin: 0 0 .6rem; color: var(--tinta);
}
.obras__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--gris); font-size: .96rem; line-height: 1.6;
}
.obras__grilla {
  display: grid; gap: clamp(.9rem, 2vw, 1.6rem);
  grid-template-columns: 1fr 1fr;
}
.obra { margin: 0; background: var(--panel); border: 1px solid var(--linea); padding: .6rem; }
.obra--abajo { grid-column: 1 / -1; }
.obra img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-bottom: 3px solid var(--madera);
}
.obra--abajo img { aspect-ratio: 16 / 7; }
.obra figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--gris); padding: .65rem .2rem 0;
}
.obras__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--gris);
  margin: 1.4rem 0 0; padding-left: 1.1rem; position: relative;
}
.obras__falta::before { content: '·'; position: absolute; left: .3rem; }

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

@media (max-width: 700px) {
  .obras__grilla { grid-template-columns: 1fr; }
  .obra--abajo img { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .js .obra.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% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--hormigon) 0%, var(--hormigon) 30%,
              rgba(232,231,227,.66) 46%, rgba(232,231,227,.22) 68%, rgba(232,231,227,.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(232,231,227,0) 0%, rgba(232,231,227,.30) 42%, var(--hormigon) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#desglose { 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(--panel);
  /* 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(--hormigon); 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(232,231,227,.72) 0%,
              rgba(232,231,227,.84) 45%, rgba(232,231,227,.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(--madera);
}
.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; }
}