/* ══════════════════════════════════════════════════════════════════
   D Y R CONSTRUCCIONES · Loncoche
   Demo 183. Identidad: «MADERA NUEVA SOBRE CASA VIEJA».

   DATO QUE NO SE USA: 3 reseñas. No se citan (regla de la 133). El
   argumento es LA PIEZA: la pregunta que medio pueblo tiene y nadie
   contesta.

   LA DIRECCION EN UNA FRASE
   El PAR de maderas es la paleta: madera fresca recien dimensionada
   (clara, amarillenta) y madera curtida a la intemperie (gris). El
   contraste nueva/vieja ES la ampliacion contada en color — lo que
   se agrega va en fresca, lo que ya estaba va en curtida.

   LA PALETA
   --crudo    #F5F1E9  el fondo
   --panel    #EAE4D8  el bloque secundario
   --fresca   #7E5517  madera nueva para TEXTO: 5,2:1 sobre el panel
                       de las etapas, que es el peor fondo claro
   --fresc-ob #C9954A  la misma para OBJETOS dibujados
   --curtida  #63605A  madera vieja para TEXTO (5,4:1)
   --curt-ob  #8A8579  la misma para OBJETOS
   --tinta    #201D18
   --hondo    #33302A  la seccion oscura

   DESLINDE DE MADERAS DEL REGISTRO: la 107 es BARNIZADA brillante
   (mueble terminado); la 122 es IMPREGNADA verde (polin de obra); la
   123 es PINO CEPILLADO rosado (tabla nueva de ferreteria); el toldo
   de la 148 es TELA. **Aca no hay UNA madera: hay DOS EN DIALOGO**, y
   esa relacion es la identidad — ningun otro proyecto del registro
   usa un PAR de tonos del mismo material como sistema.

   EL TRIO
   · display · Rowdies 700 — display redondeada y solida, de rotulo
     de obra chica. Primera vez en el registro.
   · cuerpo  · Sora — geometrica, se lee limpia en parrafo largo.
   · dato    · Lekton — REPETICION CONSCIENTE: el catalogo esta
     agotado; es mono de DIBUJO TECNICO, que es exactamente lo que
     pide una pagina que va de proyectado a construido.

   LA CABECERA (148ª del oficio) — LA CASA CON AMPLIACION
   La casita de linea con un modulo agregado al costado EN LINEA
   PUNTEADA. **El pitch entero en 30 pixeles**: lo que existe va
   solido, lo que se agrega va punteado. (148ª y no 149ª porque la
   179 quedo en pausa.)

   EL FONDO — EL PUNTEADO QUE SE VUELVE SOLIDO
   El trazado punteado del modulo nuevo se RELLENA tramo a tramo hasta
   quedar linea firme, se queda un momento y vuelve a empezar. 16s.
   DESLINDE: la firma de la 167 se traza fluida y SE DESVANECE (una
   sola pasada, y se va); el camino de la 175 ENCIENDE puntos que
   despues se apagan (luz sobre algo que ya estaba). **Aca el punteado
   SE CONSOLIDA: es la unica animacion del registro que pasa de
   PROYECTADO a CONSTRUIDO**, y por eso los tramos no aparecen: se
   rellenan.
   Reduced-motion: mitad punteado, mitad solido, fijo.

   LA ESTRUCTURA — B (indice lateral)
   El indice son LAS ETAPAS, y cada una lleva **QUIEN LA HACE** al
   lado: usted · la DOM · nosotros.
   DESLINDE con los B del registro (90/102/123/135/159/177): la 177
   indexa PERSONAS y el resto SECCIONES o PRODUCTOS. **Este es el
   unico indice con columna de RESPONSABLE**, y no es un adorno: la
   mitad de las ampliaciones se hacen sin papel porque nadie sabe cual
   de los cinco pasos le toca a quien.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crudo:     #F5F1E9;
  --panel:     #EAE4D8;
  /* 4,49:1 sobre el panel de las etapas — a un pelo del minimo. Se
     oscurecio a #7E5517, que da 5,2:1 ahi y 5,4:1 sobre el crudo. */
  --fresca:    #7E5517;
  --fresc-ob:  #C9954A;
  --curtida:   #63605A;
  --curt-ob:   #8A8579;
  --tinta:     #201D18;
  --hondo:     #33302A;
  --linea:     #DBD4C4;

  --display: 'Rowdies', system-ui, sans-serif;
  --cuerpo:  'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Lekton', 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(--crudo);
  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: 700; margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; }

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

/* ── la banda de propuesta ── */
.propuesta {
  background: var(--hondo); color: var(--crudo);
  padding: .9rem clamp(1.2rem, 5vw, 4rem);
}
.propuesta__que { font-size: .8rem; margin: 0 0 .25rem; }
.propuesta__gancho { font-size: .8rem; color: #BDB6A6; 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(--crudo);
  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.15rem; font-weight: 700; }

/* LA CASA CON AMPLIACION — la cabecera 148ª.
   Lo que existe va SOLIDO; lo que se agrega va PUNTEADO. */
.casita {
  position: relative; display: block; flex: none;
  width: 34px; height: 22px;
}
/* la casa: cuerpo con techo a dos aguas, en linea solida */
.casita::before {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 20px; height: 20px;
  border: 2px solid var(--curt-ob);
  clip-path: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%);
}
/* el modulo nuevo: punteado */
.casita__mod {
  position: absolute; right: 0; bottom: 0;
  width: 14px; height: 13px;
  border: 2px dashed var(--fresc-ob);
  border-left: none;
}

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .8rem;
  text-decoration: none; color: var(--curtida);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.cab__nav a:hover { color: var(--fresca); border-bottom-color: var(--fresc-ob); }

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

@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 PUNTEADO QUE SE VUELVE SOLIDO */
.trazado {
  position: absolute; right: 6%; bottom: 12%;
  width: min(34vw, 340px); height: 190px;
  z-index: 1; pointer-events: none;
}
.tr {
  position: absolute;
  background: transparent;
  border-color: var(--fresc-ob);
  border-style: dashed;
  border-width: 0;
}
/* los seis tramos del modulo: dos horizontales, dos verticales y el
   techo en dos aguas */
.t1 { left: 0;   top: 60px; width: 100%; border-top-width: 3px; }
.t2 { left: 0;   top: 60px; height: 130px; border-left-width: 3px; }
.t3 { right: 0;  top: 60px; height: 130px; border-right-width: 3px; }
.t4 { left: 0;   bottom: 0; width: 100%; border-bottom-width: 3px; }
.t5 { left: 0;   top: 0;    width: 52%; height: 63px; border-top-width: 3px; transform: rotate(-16deg); transform-origin: left bottom; }
.t6 { right: 0;  top: 0;    width: 52%; height: 63px; border-top-width: 3px; transform: rotate(16deg); transform-origin: right bottom; }

/* de punteado a solido, tramo a tramo. No aparecen: SE RELLENAN. */
.js .tr { animation: consolidar 16s ease-in-out infinite; }
.js .t2 { animation-delay: .5s; }
.js .t3 { animation-delay: 1s; }
.js .t4 { animation-delay: 1.5s; }
.js .t5 { animation-delay: 2s; }
.js .t6 { animation-delay: 2.5s; }
@keyframes consolidar {
  0%, 12%   { border-style: dashed; }
  16%, 78%  { border-style: solid; }
  86%, 100% { border-style: dashed; }
}
@media (prefers-reduced-motion: reduce) {
  .js .tr { animation: none; }
  .js .t1, .js .t2, .js .t5 { border-style: solid; }
}

.sitio {
  font-family: var(--dato); font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--curtida); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.4rem, 7.5vw, 5.2rem);
  line-height: 1.06; 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: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--curtida);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.3rem; }
.dd--tel a { text-decoration: none; color: var(--fresca); border-bottom: 3px solid var(--fresc-ob); }

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

.antetitulo {
  font-family: var(--dato); font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--curtida);
  margin-bottom: .7rem;
}
.antetitulo--claro { color: #BDB6A6; }

.pasos h2, .obras h2 {
  font-size: clamp(2rem, 5.5vw, 3.8rem); line-height: 1.06;
  margin-bottom: 1rem;
}
.obras h2 { color: var(--crudo); }
.entrada { max-width: 56ch; }
.obras .entrada { color: #DDD6C7; }

.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato); font-size: .78rem;
  color: var(--curtida); border-left: 3px solid var(--fresc-ob); padding-left: .6rem;
}
.marca-ejemplo--claro::before { color: #BDB6A6; border-left-color: #BDB6A6; }

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

/* EL INDICE CON RESPONSABLE */
.indice {
  position: sticky; top: 5.5rem;
  display: flex; flex-direction: column;
  border-top: 3px solid var(--fresc-ob);
}
@media (max-width: 900px) { .indice { position: static; } }
.indice a {
  display: grid; grid-template-columns: 2rem 1fr auto;
  gap: .5rem; align-items: baseline;
  padding: .8rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
.indice a:hover .indice__t { color: var(--fresca); }
.indice__n { font-family: var(--dato); font-size: .82rem; color: var(--fresca); }
.indice__t { font-family: var(--display); font-size: 1.05rem; }
/* la columna que hace distinto a este indice */
.indice__q {
  font-family: var(--dato); font-size: .74rem;
  color: var(--curtida);
  border: 1px solid var(--curt-ob);
  border-radius: 3px; padding: .1rem .4rem;
}

.etapas { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.et {
  background: var(--panel);
  border-left: 4px solid var(--curt-ob);
  padding: clamp(1.3rem, 3vw, 2rem);
}
/* las etapas que hace la constructora van con la madera FRESCA */
#e3, #e4 { border-left-color: var(--fresc-ob); }
.et__n {
  font-family: var(--dato); font-size: .82rem;
  color: var(--fresca); margin-bottom: .3rem;
}
.et__q {
  color: var(--curtida); text-transform: uppercase;
  font-size: .74rem; letter-spacing: .06em;
}
.et h3 { font-size: clamp(1.4rem, 3.2vw, 2rem); margin-bottom: .7rem; }
.et p { max-width: 60ch; }
.et p:last-child { margin-bottom: 0; }
.et__dato {
  font-family: var(--dato); font-size: .88rem;
  color: var(--curtida);
  border-top: 1px solid var(--linea); padding-top: .7rem;
}

/* «falta»: pagina mayormente CLARA — tono oscuro por defecto. */
.falta {
  display: inline-block; margin-top: .3rem;
  font-family: var(--dato); font-size: .84rem;
  color: var(--fresca); border-bottom: 1px dashed var(--fresc-ob);
}
.obras .falta, .obras .pend { color: #E0B472; border-bottom-color: #E0B472; }

/* ══════ LO QUE HACEMOS ══════ */
.obras {
  background: var(--hondo); color: var(--crudo);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.casillas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
}
.ca {
  border: 2px dashed #5E5A50;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.ca h3 { font-size: 1.3rem; color: var(--crudo); margin-bottom: .5rem; }
.pend {
  font-family: var(--dato); font-size: .86rem;
  color: #E0B472; margin: 0;
  display: inline-block;
}

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

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--curtida);
}
.cierre__tel { font-size: clamp(2rem, 8vw, 4.8rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); text-decoration: none; color: var(--fresca);
  border-bottom: 5px solid var(--fresc-ob);
}
.cierre__tel a:hover { border-bottom-color: var(--fresca); }
.cierre__pie { font-size: .92rem; color: var(--curtida); margin: 0 auto; max-width: 46ch; }

/* ══════ PARA D Y R ══════ */
.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.8rem, 4.4vw, 2.6rem); 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: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fresca); 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: 3px solid var(--fresc-ob); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--tinta); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #A8A196;
  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 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: 56% 48%;
  -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(--crudo) 0%, var(--crudo) 30%,
              rgba(245,241,233,.66) 46%, rgba(245,241,233,.22) 68%, rgba(245,241,233,.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,241,233,0) 0%, rgba(245,241,233,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#pasos { 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(--curtida); 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(--crudo); 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,241,233,.72) 0%,
              rgba(245,241,233,.84) 45%, rgba(245,241,233,.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(--fresca);
}
.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; }
}