/* ══════════════════════════════════════════════════════════════════
   AUTOMOTRIZ COBA — taller · Pucón
   Demo 131 · tanda P3

   IDENTIDAD — «GRAFITO Y VERDE LÁSER»
   El color viene de la máquina que hay en todo taller con alineadora:
   la cruz verde del láser proyectada sobre la rueda. Verde-lima
   FRÍO, luminoso pero apagado —no neón de discoteca— sobre grafito
   profundo, y blanco técnico donde hay que leer largo.

   DESLINDE DE LOS VERDES DEL REGISTRO (éste es el octavo):
   · 116 · menta de veterinaria — pastel, cálido, de bata.
   · 115 · verde de cruz de farmacia — saturado, plano, señalético.
   · 122 · polín impregnado — café verdoso, mate, de madera.
   · 125 · fierro de molino — oscuro, azulado, de esmalte viejo.
   Éste es el ÚNICO verde INSTRUMENTAL: no es pintura ni material, es
   LUZ — un haz proyectado, y por eso sólo aparece sobre lo oscuro.

   TRÍO TIPOGRÁFICO
   · Display: Michroma — nueva en el registro. Anchísima y geométrica,
     de instrumento digital. Se usa sólo en titulares de dos o tres
     palabras por línea: a este ancho, una línea larga no cabe (y el
     CSS está escrito para que nunca la haya).
   · Cuerpo: Titillium Web — 2 usos, técnica y estrecha.
   · Dato: Space Mono — 5 usos, para las fichas de cada casa.

   CABECERA 97ª DEL OFICIO: LA MIRA DEL LÁSER — círculo con cruz fina
   y cuatro marcas cardinales. Primera cabecera del registro que es un
   RETÍCULO de puntería.

   FONDO NUEVO: LA CRUZ DEL LÁSER QUE BARRE — una línea horizontal y
   una vertical, finísimas, que se desplazan a distinta velocidad y se
   cruzan de vez en cuando (calibrando). DESLINDE OBLIGATORIO: el haz
   de la 113 se abría en ABANICO desde un punto; el brillo de la 128
   sube y baja dentro de una BANDA FIJA. Éstas son dos rectas
   ortogonales que VIAJAN por la pantalla entera. Con reduced-motion
   quedan quietas a un tercio, que es donde se cruzan.

   ESTRUCTURA: M (comparador paralelo). DESLINDE con la 92, la 110 y
   la 120, que también son M: en la 92 y la 110 una opción gana; en la
   120 son dos casas del mismo dueño repartidas por SURTIDO. Acá el
   criterio es el SÍNTOMA del auto: la columna se elige por lo que le
   pasa al vehículo, no por lo que uno prefiere.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --grafito:    #1A1D1F;  /* la base                                  */
  --grafito-h:  #131517;
  --blanco:     #F2F4F2;  /* blanco técnico                           */
  --blanco-p:   #FBFCFB;
  --claro:      #DCE0DC;  /* texto sobre grafito                      */
  --claro-s:    #9AA29A;  /* 6,2:1 sobre grafito                      */
  --tinta:      #1A1D1F;  /* 14,2:1 sobre blanco                      */
  --tinta-s:    #4E544E;  /* 6,7:1 sobre blanco                       */
  --laser:      #9FCF3B;  /* 9,3:1 sobre grafito — SOLO en oscuro     */
  --laser-h:    #4A6B12;  /* 5,6:1 sobre blanco  — SOLO en claro      */
  --linea:      #2C3033;
  --linea-c:    #DCE0DC;

  --display: 'Michroma', Impact, sans-serif;
  --cuerpo:  'Titillium Web', system-ui, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;

  --ancho: 1140px;
}

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

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

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

/* Michroma es ANCHA: los titulares llevan tracking negativo y un
   tamaño contenido para que dos palabras quepan siempre. */
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.18; margin: 0; letter-spacing: -.03em; }
h3 { font-family: var(--cuerpo); font-weight: 600; margin: 0; line-height: 1.25; }
p { margin: 0 0 1.05em; }
a { color: inherit; }

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

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

.cab__marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.cab__nombre { font-family: var(--display); font-size: .92rem; letter-spacing: .04em; }

/* LA MIRA DEL LÁSER — cabecera 97ª. Círculo con cruz fina y cuatro
   marcas cardinales: el retículo que proyecta la alineadora. */
.mira {
  position: relative; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--laser);
}
.mira::before, .mira::after {
  content: ''; position: absolute; background: var(--laser);
}
.mira::before { left: 50%; top: -4px; bottom: -4px; width: 1px; margin-left: -.5px; }
.mira::after  { top: 50%; left: -4px; right: -4px; height: 1px; margin-top: -.5px; }

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

.cab__wsp { margin-left: auto; text-align: right; text-decoration: none; line-height: 1.15; }
@media (min-width: 920px) { .cab__wsp { margin-left: 0; } }
.cab__wsp-rot {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--laser);
}
.cab__wsp-num { display: block; font-weight: 600; font-size: .95rem; }

/* ══════════════ PORTADA ══════════════ */
.portada {
  position: relative; overflow: hidden;
  min-height: 88svh;
  display: flex; align-items: flex-end;
  padding: clamp(3rem, 9vw, 6rem) clamp(1.1rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem);
}

/* FONDO — LA CRUZ DEL LÁSER QUE BARRE. Dos rectas ortogonales que
   viajan a distinta velocidad; cada tanto se cruzan, y ahí es cuando
   parece que la máquina está calibrando. */
.cruz { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cruz__h, .cruz__v { position: absolute; background: rgba(159,207,59,.30); }
.cruz__h {
  left: 0; right: 0; height: 1px; top: 0;
  box-shadow: 0 0 6px rgba(159,207,59,.35);
  animation: barreH 21s ease-in-out infinite alternate;
}
.cruz__v {
  top: 0; bottom: 0; width: 1px; left: 0;
  box-shadow: 0 0 6px rgba(159,207,59,.35);
  animation: barreV 29s ease-in-out infinite alternate;
}
@keyframes barreH { from { transform: translateY(12vh); } to { transform: translateY(82vh); } }
@keyframes barreV { from { transform: translateX(14vw); } to { transform: translateX(88vw); } }
@media (prefers-reduced-motion: reduce) {
  .cruz__h { animation: none; transform: translateY(33vh); }
  .cruz__v { animation: none; transform: translateX(33vw); }
}

.portada__texto { position: relative; max-width: 18ch; }
.sitio {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--laser); margin-bottom: 1.2rem;
}
.portada h1 { font-size: clamp(1.9rem, 5.6vw, 3.8rem); margin-bottom: 1.3rem; }
.portada .bajada { max-width: 46ch; color: var(--claro-s); }

.specs { display: flex; flex-wrap: wrap; gap: 2.4rem; margin: 2rem 0 0; }
.spec dt {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--claro-s); margin-bottom: .2rem;
}
.spec dd {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.8rem, 4.6vw, 2.6rem); line-height: 1;
  color: var(--laser); font-variant-numeric: tabular-nums;
}

/* ══════════════ LAS DOS CASAS (M) ══════════════ */
.casas {
  background: var(--blanco); color: var(--tinta);
  padding: clamp(3.5rem, 10vw, 6.5rem) clamp(1.1rem, 5vw, 3rem);
}
.casas__cabecera { max-width: var(--ancho); margin: 0 auto 2.6rem; }
.casas .antetitulo, .turista .antetitulo {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--laser-h); margin-bottom: .9rem;
}
.turista .antetitulo--claro { color: var(--laser); }
.casas h2 { font-size: clamp(1.7rem, 5vw, 3.2rem); margin-bottom: 1.2rem; }
.casas__cabecera > p { max-width: 58ch; color: var(--tinta-s); }

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

.cols { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 1.5rem; }
@media (min-width: 840px) { .cols { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.col {
  background: var(--blanco-p);
  border: 1px solid var(--linea-c);
  border-top: 4px solid var(--laser-h);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
}
.col__rot {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-s); margin-bottom: .5rem;
}
.col h3 { font-size: clamp(1.2rem, 3vw, 1.7rem); margin-bottom: 1.1rem; }
.col ul { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.col ul li { padding: .55rem 0; border-bottom: 1px solid var(--linea-c); font-size: .97rem; }
.col__datos { margin: 0; display: grid; gap: .5rem; }
.col__datos > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.col__datos dt {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-s);
}
.col__datos dd { margin: 0; text-align: right; }

.aviso {
  max-width: min(var(--ancho), 68ch); margin: 2.4rem auto 0;
  border-left: 3px solid var(--laser-h); padding-left: 1.2rem;
}
.aviso h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.aviso p { margin: 0; color: var(--tinta-s); font-size: .96rem; }

.falta {
  font-family: var(--mono); font-size: .74rem;
  color: var(--laser-h); border-bottom: 1px dashed var(--laser-h);
}
/* El acento tiene dos caras y el FONDO decide cuál. */
.turista .falta { color: var(--laser); border-bottom-color: var(--laser); }

/* ══════════════ EL AUTO DE PASO ══════════════ */
.turista {
  background: var(--grafito);
  padding: clamp(3.5rem, 10vw, 6.5rem) clamp(1.1rem, 5vw, 3rem);
}
.turista__cuerpo { max-width: var(--ancho); margin: 0 auto; }
.turista h2 { font-size: clamp(1.7rem, 5vw, 3.2rem); margin-bottom: 1.2rem; }
.turista .entrada { max-width: 58ch; color: var(--claro-s); }

.pasos { list-style: none; margin: 2.4rem 0 2rem; padding: 0; display: grid; gap: 1.3rem; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.pasos li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem;
  background: var(--grafito-h); padding: 1.2rem 1.3rem;
  border-left: 2px solid var(--laser);
}
.pasos__n { margin: 0; font-family: var(--mono); font-size: 1rem; color: var(--laser); }
.pasos li h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.pasos li p { margin: 0; font-size: .93rem; color: var(--claro-s); }

.turista .firma { font-size: .88rem; color: var(--claro-s); max-width: 60ch; }

.pedir { border-top: 1px solid var(--linea); margin-top: 2.6rem; padding-top: 2.4rem; }
.pedir h3 { font-family: var(--display); font-size: clamp(1.1rem, 3vw, 1.6rem); margin-bottom: .8rem; letter-spacing: -.02em; }
.pedir > p { color: var(--claro-s); max-width: 50ch; }
.form { max-width: 600px; margin-top: 1.4rem; }
.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--claro-s); margin-bottom: .4rem;
}
.campo input, .campo textarea {
  width: 100%; padding: .75rem .85rem;
  background: var(--blanco-p); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 0;
  font-family: var(--cuerpo); font-size: 1rem;
}
.campo textarea { resize: vertical; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--laser); outline-offset: 1px; }

.resumen {
  font-family: var(--mono); font-size: .82rem; line-height: 1.55;
  color: var(--claro-s);
  border-left: 2px solid var(--laser);
  padding: .55rem 0 .55rem .9rem;
  margin: 1.3rem 0;
  white-space: pre-wrap;
}
.fantasma {
  display: inline-block; text-decoration: none;
  font-weight: 600; font-size: 1rem;
  padding: .8rem 1.7rem;
  border: 1px solid var(--laser); color: var(--laser);
  transition: background .25s ease, color .25s ease;
}
.fantasma:hover, .fantasma:focus-visible { background: var(--laser); color: #131A05; }
.pedir .pedir__nota { font-size: .86rem; color: var(--claro-s); margin-top: 1.2rem; max-width: 54ch; }

/* ══════════════ PARA EL DUEÑO ══════════════ */
.dueno {
  background: var(--blanco); color: var(--tinta);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.1rem, 5vw, 3rem);
}
.dueno h2 { font-size: clamp(1.2rem, 3.4vw, 1.7rem); margin: 0 auto 2rem; max-width: var(--ancho); }
.dueno__cols { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 1.8rem; }
@media (min-width: 820px) { .dueno__cols { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }
.dueno__cols h3 {
  font-family: var(--mono); font-weight: 400; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--laser-h); margin-bottom: .6rem;
}
.dueno__cols p { font-size: .94rem; color: var(--tinta-s); margin: 0; }
.dueno__cierre { max-width: var(--ancho); margin: 2.5rem auto 0; display: flex; flex-wrap: wrap; gap: 1.6rem; }
.flecha {
  font-weight: 600; font-size: .96rem;
  color: var(--laser-h); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: .12rem;
}
.flecha:hover, .flecha:focus-visible { color: var(--tinta); }

.pie {
  background: var(--grafito-h);
  padding: 2rem clamp(1.1rem, 5vw, 3rem);
}
.pie p { max-width: 62ch; margin: 0 auto; font-size: .82rem; color: var(--claro-s); }

/* ══════════════ REVEALS ══════════════ */
.js .rev { opacity: 0; transform: translateY(18px); }
.js .rev.on { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion: reduce) { .js .rev { opacity: 1; transform: none; } }

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

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

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

/* ── 1 · PORTADA ── */
/* position/isolation acá y no heredadas: hay demos cuya .portada no es
   posicionada, y entonces el .portada__foto absoluto se cuelga del body
   y tapa el titular entero. El z-index del texto va por lo mismo. */
.portada--foto { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { position: relative; z-index: 2; max-width: 40rem; }
.portada__foto { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 56% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%,
              rgba(0,0,0,.28) 36%, rgba(0,0,0,.72) 52%, #000 64%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 22%,
              rgba(0,0,0,.28) 36%, rgba(0,0,0,.72) 52%, #000 64%, #000 100%);
}
/* El velo se escribe ENTERO en rgba y termina en alfa 0. Con var() en
   los primeros stops habia demos donde el gradiente tapaba la foto de
   punta a punta —paso tres veces— y costaba una captura cada vez
   entenderlo. En rgba puro el degradado es el mismo y no falla. */
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(26,29,31,1) 0%, rgba(26,29,31,1) 26%,
              rgba(26,29,31,.70) 42%, rgba(26,29,31,.28) 62%, rgba(26,29,31,.08) 80%,
              rgba(26,29,31,0) 94%);
}
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: respira 46s ease-in-out infinite alternate; }
}
@keyframes respira {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.8%, -1.2%, 0); }
}
.js .portada--foto .portada__foto { opacity: 0; }
.js .portada--foto.ok .portada__foto { opacity: 1; transition: opacity 1.1s ease; }
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: none; }
@media (max-width: 860px) {
  .portada--foto { padding-top: 36svh; }
  .portada__foto img {
    object-position: 50% 44%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.34) 58%, transparent 78%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg, rgba(26,29,31,0) 0%, rgba(26,29,31,.30) 42%, var(--grafito) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#casas { 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(--grafito-h);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala, ambos se salen unos píxeles y
     aparece scroll horizontal por un segundo. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: 62svh; overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--claro);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--claro-s); margin: 0 0 .9rem;
}
.mitades h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08;
  margin: 0 0 1rem; color: var(--claro);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--claro); 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(--grafito); 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(26,29,31,.62) 0%,
              rgba(26,29,31,.80) 45%, rgba(26,29,31,.88) 100%);
}
.cita__texto { margin: 0; max-width: 42rem; text-align: center; color: var(--claro); }
.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(--claro);
}
.cita__eco {
  display: block; margin-top: 1.1rem;
  font-family: var(--dato); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--laser);
}
.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; }
}

/* ══════ 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(--claro);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--claro-s); font-size: .96rem; line-height: 1.6;
}
.galeria__grilla { display: grid; gap: clamp(.9rem, 2vw, 1.6rem); grid-template-columns: 1fr 1fr; }
.gal { margin: 0; background: var(--grafito-h); 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(--laser);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--claro-s); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--claro-s);
  margin: 1.4rem 0 0; padding-left: 1.1rem; position: relative;
}
.galeria__falta::before { content: '·'; position: absolute; left: .3rem; }

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

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

/* ── TAJO: LA FRANJA A SANGRE ──
   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(--grafito-h);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .tajo img { animation: deriva-tajo 54s ease-in-out infinite alternate; }
}
@keyframes deriva-tajo {
  from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, -1.4%, 0); }
}
.js .tajo { opacity: 0; }
.js .tajo.ok { opacity: 1; transition: opacity 1s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .tajo { opacity: 1; }
}

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

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

/* ── 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; }