/* ══════════════════════════════════════════════════════════════════
   LUBRICENTRO SR — Pitrufquén
   Demo 132 · tanda P3

   IDENTIDAD — «PETRÓLEO Y DORADO»
   El aceite tiene dos caras: negro cuando sale y ámbar translúcido
   cuando entra. La página es esa diferencia — fondo de petróleo
   profundo con un tornasol apenas insinuado en la portada (la
   película de aceite sobre el agua) y el ámbar del aceite limpio
   como único color.

   DESLINDE OBLIGATORIO CON LA 47 (makma, lubricentro de Pucón), que
   es el mismo rubro y también usa ámbar:
   · 47: fondo GRIS MEDIO #D4D8D6, claro, de taller iluminado; su
     ámbar #E0A020 es oro metálico y funciona como acento.
   · 132: fondo NEGRO PETRÓLEO, y el ámbar #F0A93C es más naranja y
     translúcido — es el FLUIDO, no un metal. Además acá es
     protagonista: la gota, la varilla y el sticker son ámbar.
   Dos lubricentros, dos estados del mismo aceite.

   TRÍO TIPOGRÁFICO
   · Display: Exo 2 — nueva en el registro. Técnica y algo inclinada
     de espíritu, de manual de servicio.
   · Cuerpo: Cabin — 4 usos, humanista y tranquila para los pasos.
   · Dato: Overpass Mono — 6 usos, carga los tiempos del checklist y
     el kilometraje del sticker.

   CABECERA 98ª DEL OFICIO: EL STICKER — el rectangulito redondeado
   con la cifra de kilometraje adentro, apenas despegado en una
   esquina. Primera cabecera del registro que es un ADHESIVO, y la
   única que muestra un dato dentro del logotipo.

   FONDO NUEVO: LA GOTA ÚNICA — UNA sola gota ámbar que se forma
   arriba, engorda, cae y deja una onda mínima. Ciclo de 18 s.
   DESLINDE: los hilos de la 70 se ESTIRABAN sin cortarse (miel); las
   gotas de la 115 caían VARIAS y clínicas (suero). Ésta es una sola,
   con formación y desprendimiento, y el que la mira espera a que
   caiga. Con reduced-motion queda formada y quieta.

   ESTRUCTURA: I (línea de progreso). DESLINDE con la 112 (estaciones
   de una visita) y la 127 (recorrido bodega-camión-obra): acá la
   línea ES UN OBJETO DEL OFICIO — la varilla de medir aceite, con
   sus marcas MIN y MAX, y lo que sube por ella es el nivel.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --petroleo:   #0E1113;  /* la base                                  */
  --petroleo-h: #080A0B;
  --blanco:     #F5F3EF;
  --blanco-p:   #FFFFFF;
  --claro:      #E4E1DB;  /* texto sobre petróleo                     */
  --claro-s:    #9A968F;  /* 6,2:1 sobre petróleo                     */
  --tinta:      #14171A;  /* 15,5:1 sobre blanco                      */
  --tinta-s:    #55524C;  /* 6,7:1 sobre blanco                       */
  --ambar:      #F0A93C;  /* 9,4:1 sobre petróleo — SOLO en oscuro    */
  --ambar-h:    #8A4B0A;  /* 6,1:1 sobre blanco  — SOLO en claro      */
  --linea:      #23282B;
  --linea-c:    #E0DCD5;

  --display: 'Exo 2', system-ui, sans-serif;
  --cuerpo:  'Cabin', system-ui, sans-serif;
  --mono:    'Overpass Mono', ui-monospace, monospace;

  --ancho: 1100px;
}

*, *::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(--petroleo);
  color: var(--claro);
  font-family: var(--cuerpo);
  font-size: clamp(1rem, .95rem + .3vw, 1.08rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.04; margin: 0; }
h3 { font-family: var(--display); font-weight: 600; margin: 0; line-height: 1.25; }
p { margin: 0 0 1.05em; }
a { color: inherit; }

/* ── Banda de propuesta ───────────────────────────────────────── */
.propuesta {
  background: var(--ambar); color: #2A1A02;
  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: #45300B; }
.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(--petroleo-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-weight: 700; font-size: 1rem; }

/* EL STICKER — cabecera 98ª. Es el único logotipo del registro que
   lleva un DATO adentro, y va apenas despegado de una esquina, como
   los de verdad después de un par de meses al sol. */
.sticker {
  display: inline-block; flex: none;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .02em;
  color: #2A1A02; background: var(--ambar);
  padding: .3rem .45rem; border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(240,169,60,.25);
}

.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(--ambar); }
@media (min-width: 880px) { .cab__nav { display: flex; } }

.cab__wsp { margin-left: auto; text-align: right; text-decoration: none; line-height: 1.15; }
@media (min-width: 880px) { .cab__wsp { margin-left: 0; } }
.cab__wsp-rot {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ambar);
}
.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);
  /* El tornasol: dos manchas de color casi invisibles sobre el negro,
     que es exactamente como se ve una película de aceite. */
  background:
    radial-gradient(70% 50% at 78% 22%, rgba(120,80,200,.10), transparent 70%),
    radial-gradient(60% 45% at 62% 38%, rgba(60,160,140,.09), transparent 70%),
    var(--petroleo);
}

/* FONDO — LA GOTA ÚNICA. Se forma, engorda, cae y deja la onda. */
.gota { position: absolute; top: 0; right: clamp(2rem, 18vw, 14rem); bottom: 0; width: 60px; pointer-events: none; }
.gota__g {
  position: absolute; top: 8%; left: 50%; margin-left: -9px;
  width: 18px; height: 18px;
  background: radial-gradient(circle at 35% 30%, #FFD79A, var(--ambar) 60%, #B87418 100%);
  border-radius: 50% 50% 55% 55% / 60% 60% 45% 45%;
  opacity: .55;
  animation: caegota 18s cubic-bezier(.55,.06,.68,.19) infinite;
}
@keyframes caegota {
  0%       { transform: translateY(0) scale(.25); opacity: .0; }
  18%      { transform: translateY(0) scale(.55); opacity: .5; }
  40%      { transform: translateY(0) scale(1);   opacity: .6; }
  46%      { transform: translateY(4px) scale(1.05, .95); opacity: .6; }
  72%      { transform: translateY(58vh) scale(.75, 1.3); opacity: .55; }
  78%,100% { transform: translateY(62vh) scale(.2);  opacity: 0; }
}
.gota__onda {
  position: absolute; bottom: 14%; left: 50%; margin-left: -22px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(240,169,60,.5);
  opacity: 0;
  animation: onda 18s linear infinite;
}
@keyframes onda {
  0%, 74%  { opacity: 0; transform: scale(.2); }
  80%      { opacity: .55; transform: scale(1); }
  92%,100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .gota__g { animation: none; opacity: .6; transform: scale(1); }
  .gota__onda { display: none; }
}

.portada__texto { position: relative; max-width: 20ch; }
.sitio {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ambar); margin-bottom: 1.2rem;
}
.portada h1 { font-size: clamp(3rem, 10vw, 6.4rem); margin-bottom: 1.2rem; }
.portada .bajada { max-width: 44ch; 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: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--claro-s); margin-bottom: .2rem;
}
.spec dd {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1;
  color: var(--ambar); font-variant-numeric: tabular-nums;
}

/* ══════════════ EL CAMBIO — LA VARILLA (I) ══════════════ */
.cambio {
  background: var(--blanco); color: var(--tinta);
  padding: clamp(3.5rem, 10vw, 6.5rem) clamp(1.1rem, 5vw, 3rem);
}
.cambio__cabecera { max-width: var(--ancho); margin: 0 auto 2.8rem; }
.cambio .antetitulo, .sticker-sec .antetitulo {
  font-family: var(--mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ambar-h); margin-bottom: .8rem;
}
.sticker-sec .antetitulo--claro { color: var(--ambar); }
.cambio h2 { font-size: clamp(1.9rem, 5.6vw, 3.4rem); margin-bottom: 1.1rem; }
.cambio__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: .68rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ambar-h);
  border-left: 2px solid var(--ambar-h);
  padding-left: .6rem;
}

/* LA VARILLA: el riel del progreso es el objeto del oficio. */
.varilla { position: relative; max-width: var(--ancho); margin: 0 auto; padding-left: 3.4rem; }
.varilla__riel {
  position: absolute; left: 1rem; top: .4rem; bottom: .4rem; width: 10px;
  background: #DCD7CE;
  border-radius: 5px;
  overflow: visible;
}
.varilla__nivel {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(to bottom, #F6C069, var(--ambar-h));
  border-radius: 5px;
  transform-origin: top;
}
.varilla__marca {
  position: absolute; left: 16px;
  font-family: var(--mono); font-size: .58rem;
  letter-spacing: .14em; color: var(--tinta-s);
}
.varilla__marca--max { top: 6%; }
.varilla__marca--min { bottom: 6%; }
.varilla__marca::before {
  content: ''; position: absolute; left: -18px; top: 50%;
  width: 14px; height: 1px; background: var(--tinta-s);
}

/* El nivel arranca LLENO: si el navegador no soporta scroll-driven
   animations, la varilla se ve marcando MAX, que es lo correcto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .varilla__nivel {
      animation: sube linear both;
      animation-timeline: view();
      animation-range: cover 8% cover 92%;
    }
    @keyframes sube {
      from { transform: scaleY(.06); }
      to   { transform: scaleY(1); }
    }
  }
}

.pasos { list-style: none; margin: 0; padding: 0; }
.paso { position: relative; padding-bottom: 1.8rem; }
.paso:last-child { padding-bottom: 0; }
.paso__t {
  margin: 0 0 .3rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; color: var(--ambar-h);
}
.paso__caja {
  background: var(--blanco-p);
  border: 1px solid var(--linea-c);
  padding: clamp(1.1rem, 3vw, 1.7rem);
}
.paso__caja h3 { font-size: clamp(1.1rem, 2.6vw, 1.4rem); margin-bottom: .5rem; }
.paso__caja p { margin: 0; color: var(--tinta-s); max-width: 60ch; }

.cambio .firma { max-width: var(--ancho); margin: 2.2rem auto 0; font-size: .86rem; color: var(--tinta-s); }

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

/* ══════════════ EL STICKER ══════════════ */
.sticker-sec {
  background: var(--petroleo);
  padding: clamp(3.5rem, 10vw, 6.5rem) clamp(1.1rem, 5vw, 3rem);
}
.sticker__cuerpo { max-width: var(--ancho); margin: 0 auto; }
.sticker-sec h2 { font-size: clamp(1.9rem, 5.6vw, 3.4rem); margin-bottom: 1.1rem; }
.sticker-sec .entrada { max-width: 58ch; color: var(--claro-s); }

.claves { display: grid; gap: 1.4rem; margin: 2.4rem 0 1.6rem; }
@media (min-width: 760px) { .claves { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.clave dt {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  color: var(--ambar); margin-bottom: .35rem;
}
.clave dd { margin: 0; color: var(--claro-s); font-size: .96rem; max-width: 46ch; }

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

.pedir { border-top: 1px solid var(--linea); margin-top: 2.4rem; padding-top: 2.2rem; }
.pedir h3 { font-size: clamp(1.3rem, 3.5vw, 1.9rem); margin-bottom: .7rem; }
.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: .66rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--claro-s); margin-bottom: .4rem;
}
.campo input {
  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 input:focus-visible { outline: 2px solid var(--ambar); outline-offset: 1px; }

.resumen {
  font-family: var(--mono); font-size: .82rem; line-height: 1.55;
  color: var(--claro-s);
  border-left: 2px solid var(--ambar);
  padding: .55rem 0 .55rem .9rem;
  margin: 1.3rem 0;
  white-space: pre-wrap;
}
.fantasma {
  display: inline-block; text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  padding: .8rem 1.7rem;
  border: 1px solid var(--ambar); color: var(--ambar);
  transition: background .25s ease, color .25s ease;
}
.fantasma:hover, .fantasma:focus-visible { background: var(--ambar); color: #2A1A02; }
.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.4rem, 4vw, 1.9rem); 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: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ambar-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(--ambar-h); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: .12rem;
}
.flecha:hover, .flecha:focus-visible { color: var(--tinta); }

.pie {
  background: var(--petroleo-h);
  padding: 2rem clamp(1.1rem, 5vw, 3rem) 5.5rem;
}
@media (min-width: 720px) { .pie { padding-bottom: 2rem; } }
.pie p { max-width: 62ch; margin: 0 auto; font-size: .82rem; color: var(--claro-s); }

/* ══════════════ BARRA FIJA MÓVIL (T2) ══════════════ */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--ambar);
  padding: .75rem 1rem;
  text-align: center;
}
.barra-movil a {
  display: block; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: #2A1A02;
}
@media (min-width: 720px) { .barra-movil { display: none; } }

/* ══════════════ 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: 50% 46%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%,
              rgba(0,0,0,.24) 48%, rgba(0,0,0,.70) 60%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 38%,
              rgba(0,0,0,.24) 48%, rgba(0,0,0,.70) 60%, #000 72%, #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. */
/* Sin velo: en esta demo el ::after tapaba la foto de punta a punta —   pasa cuando el fondo de la portada trae sus propios gradientes. La   mascara sola sostiene el contraste: la foto no existe donde va el   titular y entra completa hacia la derecha. */
@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(14,17,19,0) 0%, rgba(14,17,19,.30) 42%, var(--petroleo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#cambio { 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(--petroleo-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(--petroleo); 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(14,17,19,.62) 0%,
              rgba(14,17,19,.80) 45%, rgba(14,17,19,.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(--ambar);
}
.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(--petroleo-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(--petroleo-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(--petroleo-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; }
}

/* ── DÓNDE QUEDA + MAPA ─────────────────────────────────────────────
   La sección más incómoda de la página, a propósito: el lubricentro no
   publica dirección, teléfono ni horario, y eso es lo que la web viene a
   arreglar. El mapa es de COMUNA porque marcar una puerta que no sabemos
   sería inventarla.
   Imagen propia con mosaicos de OpenStreetMap: la CSP prohíbe pedir nada
   a un tercero y un iframe de Google Maps quedaría en blanco sin dar un
   solo error. La atribución a OSM la exige su licencia (ODbL). */
.donde { background: var(--petroleo-h); color: var(--claro); padding: clamp(3rem, 7vw, 5.5rem) 0; }
.donde__cols { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .donde__cols { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }
.donde h2 { color: var(--blanco); margin: 0 0 1rem; }
.donde__p { color: var(--claro-s); max-width: 54ch; margin: 0 0 1rem; }
.donde__p--fuerte { color: var(--claro); }
.donde__faltan {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.donde__faltan li {
  border: 1px dashed var(--ambar); border-radius: 999px;
  padding: .45rem 1rem; color: var(--ambar);
  font-size: var(--p--1);
}

.mapa { margin: 0; border: 1px solid rgba(228,225,219,.18); border-radius: 12px; overflow: hidden; }
.mapa img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mapa__pie {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .75rem .9rem;
  font-size: var(--p--1); line-height: 1.45;
  color: var(--claro-s); background: var(--petroleo);
  border-top: 1px solid rgba(228,225,219,.18);
}
.mapa__pie b { color: var(--blanco); }
.mapa__cred { font-size: .84em; opacity: .85; }
.mapa__cred a { color: var(--claro-s); }