/* ══════════════════════════════════════════════════════════════════
   SCHUSTER MECANICA AUTOMOTRIZ · Temuco
   Demo 180. Identidad: «GRIS HERRAMIENTA Y AZUL PRUSIA».

   NOTA DE NUMERACION: la demo 179 quedo EN PAUSA (competidor directo
   de un cliente que paga; la decision es del dueño del negocio, no
   del constructor). Por eso esta cabecera lleva el numero 145ª y no
   el 146ª que decia el prompt: si algun dia se construye la 179, le
   toca el 146ª.

   NOTA DEL EXCEL: la ficha aparece DUPLICADA («solo redes» y «sin
   web», mismo telefono). Es UN taller. Al mover en el Excel hay que
   limpiar las dos filas, igual que paso con la 160.

   LA DIRECCION EN UNA FRASE
   Orden aleman sin decirlo: blanco de taller ordenado, gris de
   herramienta y un azul prusia tan profundo que solo se nota que es
   azul donde le da la luz. Cero calidez, cero desorden, cero
   promesas.

   LA PALETA
   --blanco  #FAFAFA  taller ordenado
   --gris    #6A6E72  herramienta (para OBJETOS y rotulos, 4,9:1)
   --gris-t  #5A5E62  el mismo gris cuando lleva texto chico (5,9:1)
   --prusia  #10243C  casi negro: titulares, la tabla, la seccion
   --acero   #C9CDD1  lineas
   Nota: el prusia sobre blanco da 14,6:1. Es un negro que resulto
   ser azul, y esa es la gracia.

   DESLINDE DE AZULES: el cobalto de la 71 es VIVO Y PRESENTE (azul
   que se ve de lejos); el pizarra de la 120 es SEÑALETICO (superficie
   de escritura); el de la 167 es LAPICERA (trazo de firma); el de la
   174 es LOZA (decorativo domestico). **La prusia es CASI NEGRA** —
   la unica del registro que hay que buscarle el azul.

   EL TRIO
   · display · Barlow Condensed 600 — condensada tecnica, de
     rotulacion de taller. Primera vez en el registro.
   · cuerpo  · Archivo — neutra, aguanta tabla y parrafo.
   · dato    · Martian Mono — REPETICION CONSCIENTE: el catalogo esta
     agotado; es la mas de instrumento del catalogo y aca solo lleva
     rotulos y el telefono.

   FAMILIA «LA PERSONA ES EL NEGOCIO»: 155 · 175 · 177 · **180**.
   Y aca con una vuelta mas: **el negocio lleva el apellido y no hay
   ni un dato de la persona**, asi que la seccion se entrega con sus
   cuatro recuadros vacios y rotulados. En un taller con apellido,
   inventar al dueño seria la peor de las mentiras posibles.

   TALLERES DEL REGISTRO: 131 dos-casas · 132 aceite · 133 neumatico ·
   79 electricidad · **180 LA REVISION TECNICA**.

   LA CABECERA (145ª del oficio) — LA LLAVE PUNTA-CORONA
   La llave combinada de perfil: el anillo cerrado a un lado y la boca
   abierta al otro.
   DESLINDE DOBLE — tres «llaves» en el registro y tres objetos:
     · la 72ª es LLAVE DE PUERTA de pension (paleta y dientes)
     · la 148ª (182) es LLAVE DE CERRADURA nueva
     · esta es HERRAMIENTA: no abre nada, aprieta.

   EL FONDO — LA TUERCA QUE SE APRIETA
   Un hexagono tenue ROTA a pasos de un sexto de vuelta con pausa
   entre paso y paso, como apretada con ratchet.
   DESLINDE DE steps() —quinta fisica del registro—: el hilvan de la
   130 AVANZA cosiendo, la correa de la 134 ARRASTRA, la ficha de la
   165 VOLTEA, el segundero de la 176 hace TIC a tiempo real, y
   **esta ROTA A PASOS con pausa** — no marca tiempo: marca esfuerzo.
   DESLINDE DEL HEXAGONO: el panal de la 124 es una trama PLANA e
   infinita de hexagonos; **aca es UN hexagono solo, y gira**.
   Reduced-motion: tuerca quieta.

   LA ESTRUCTURA — C (la tabla es la pagina)
   Tres columnas: QUE MIRAN / POR QUE RECHAZA / SE PREPARA ACA.
   DESLINDE con los C del registro: la 184 usara sintoma-de-maquina
   («si suena asi, es esto») y esta es **CHECKLIST DE EXAMEN** («esto
   se mira, esto reprueba»). Parientes cercanas y mundos distintos:
   una diagnostica, la otra se prepara para que la examinen.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --blanco:  #FAFAFA;
  --blanco-2:#EFF0F1;
  --gris:    #6A6E72;
  --gris-t:  #5A5E62;
  --prusia:  #10243C;
  --prusia-2:#183355;
  --acero:   #C9CDD1;

  --display: 'Barlow Condensed', system-ui, sans-serif;
  --cuerpo:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Martian Mono', 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(--blanco);
  color: var(--prusia);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.62;
  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(--prusia); outline-offset: 3px; }

.visually {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

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

/* ── cabecera fantasma ── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem clamp(1.2rem, 5vw, 4rem);
  background: var(--blanco);
  border-bottom: 1px solid var(--acero);
}
.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.7rem;
  font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}

/* LA LLAVE PUNTA-CORONA — la cabecera 145ª. */
.llave {
  position: relative; display: block; flex: none;
  width: 30px; height: 11px;
}
/* el mango */
.llave::before {
  content: ''; position: absolute; left: 8px; right: 8px; top: 4px;
  height: 3px; background: var(--gris); border-radius: 2px;
}
/* el anillo cerrado (la corona) */
.llave::after {
  content: ''; position: absolute; left: 0; top: 0;
  width: 11px; height: 11px;
  border: 3px solid var(--gris);
  border-radius: 50%;
}
/* la boca abierta (la punta) */
.llave__boca {
  position: absolute; right: 0; top: 0;
  width: 11px; height: 11px;
  border: 3px solid var(--gris);
  border-radius: 50%;
  clip-path: polygon(0 0, 100% 0, 100% 32%, 55% 50%, 100% 68%, 100% 100%, 0 100%);
}

.cab__nav { margin-left: auto; display: flex; gap: 1.4rem; }
.cab__nav a {
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .02em; text-transform: uppercase;
  text-decoration: none; color: var(--gris-t);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.cab__nav a:hover { color: var(--prusia); border-bottom-color: var(--prusia); }

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

@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 TUERCA QUE SE APRIETA */
.tuerca-fondo {
  position: absolute; right: 5%; top: 50%;
  width: min(34vw, 320px); height: min(34vw, 320px);
  margin-top: min(-17vw, -160px);
  z-index: 1; pointer-events: none;
}
.tuerca {
  display: block; width: 100%; height: 100%;
  background: var(--acero);
  clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
  opacity: .55;
  position: relative;
}
/* el agujero del centro: se hace con una mascara radial */
.tuerca {
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 31%);
          mask-image: radial-gradient(circle, transparent 30%, #000 31%);
}
/* un sexto de vuelta por paso, con pausa: es un ratchet, no un reloj */
.js .tuerca { animation: apretar 9s steps(6) infinite; }
@keyframes apretar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(60deg); }
}
@media (prefers-reduced-motion: reduce) {
  .js .tuerca { animation: none; }
}

.sitio {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gris-t); margin-bottom: 1rem;
}
h1 {
  font-size: clamp(2.8rem, 10vw, 7rem);
  line-height: .96; text-transform: uppercase; letter-spacing: .005em;
  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: .6rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris-t);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.25rem; }
.dd--tel a { text-decoration: none; border-bottom: 2px solid var(--prusia); }

/* ══════ LA TABLA — ESTRUCTURA C ══════ */
.revision {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--acero);
}
.revision__cabecera, .apellido__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

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

.revision h2, .apellido h2 {
  font-size: clamp(2.4rem, 7vw, 5rem); line-height: .98;
  text-transform: uppercase; margin-bottom: 1rem;
}
.apellido h2 { color: var(--blanco); }
.entrada { max-width: 56ch; }
.apellido .entrada { color: #D2DAE3; }

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

.tabla-envoltura { overflow-x: auto; }
.tabla {
  width: 100%; border-collapse: collapse;
  min-width: 40rem;
}
.tabla thead th {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--blanco); background: var(--prusia);
  text-align: left; padding: .8rem 1rem;
  font-weight: 400;
}
.tabla tbody th {
  font-family: var(--display); font-weight: 600;
  font-size: 1.25rem; text-align: left;
  padding: .9rem 1rem; width: 15rem;
  border-bottom: 1px solid var(--acero);
  vertical-align: top;
}
.tabla td {
  padding: .9rem 1rem; vertical-align: top;
  border-bottom: 1px solid var(--acero);
  font-size: .96rem;
}
.tabla tbody tr:nth-child(even) { background: var(--blanco-2); }
.sp { width: 9rem; }

.antes {
  background: var(--blanco-2);
  border-left: 4px solid var(--prusia);
  padding: clamp(1.3rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 62rem;
}
.antes h3 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); text-transform: uppercase; margin-bottom: .8rem; }
.antes ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.antes li { margin-bottom: .6rem; max-width: 62ch; }
.antes__nota { font-family: var(--dato); font-size: .82rem; color: var(--gris-t); margin: 0; }

/* «falta»: pagina mayormente CLARA — tono oscuro por defecto. */
.falta {
  display: inline-block;
  font-family: var(--dato); font-size: .74rem;
  color: var(--gris-t); border-bottom: 1px dashed var(--gris);
}
.apellido .falta, .apellido .pend { color: #A9B4C1; border-bottom-color: #A9B4C1; }

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

/* ══════ EL APELLIDO ══════ */
.apellido {
  background: var(--prusia); color: var(--blanco);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.fichas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.fi {
  border: 1px dashed #3E5570;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.fi__rot {
  font-family: var(--dato); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: #A9B4C1; margin-bottom: .3rem;
}
.fi h3 { font-size: 1.4rem; color: var(--blanco); margin-bottom: .6rem; text-transform: uppercase; }
.pend {
  font-family: var(--dato); font-size: .82rem;
  color: #A9B4C1; margin: 0;
}

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

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

/* ══════ PARA EL TALLER ══════ */
.dueno {
  background: var(--blanco-2);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--acero);
}
.dueno h2 { font-size: clamp(2rem, 4.4vw, 2.8rem); text-transform: uppercase; 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: .66rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--prusia); margin-bottom: .5rem;
}
.dueno p { color: var(--prusia); 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(--gris); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--prusia); }

/* ══════ PIE ══════ */
.pie {
  background: #0A1726; color: #93A2B3;
  padding: 2rem clamp(1.2rem, 5vw, 4rem);
  font-size: .8rem;
}
.pie p { max-width: 72ch; margin: 0; }

/* ── apariciones ── */
.js .rev { opacity: 0; transform: translateY(14px); }
.js .rev.ok {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; }
}


/* ══════ LAS FOTOS ══════
   Grilla dura, igual que el resto de la pagina: dos arriba y una ancha
   abajo. Cada figura llega desde un lado distinto — izquierda, derecha,
   abajo — con un retardo escalonado, para que se lean como tres cosas
   puestas sobre la mesa y no como un bloque que se enciende. */
.galeria {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 78rem; margin: 0 auto;
}
.galeria__titulo {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.05;
  margin: 0 0 .6rem; color: var(--tinta);
}
.galeria__nota {
  max-width: 40rem; margin: 0 0 2.2rem;
  color: var(--gris); font-size: .96rem; line-height: 1.6;
}
.galeria__grilla { display: grid; gap: clamp(.9rem, 2vw, 1.6rem); grid-template-columns: 1fr 1fr; }
.gal { margin: 0; background: var(--blanco-2); border: 1px solid var(--acero); 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(--prusia);
}
.gal--abajo img { aspect-ratio: 16 / 7; }
.gal figcaption {
  font-family: var(--dato); font-size: .74rem; line-height: 1.5;
  color: var(--gris); padding: .65rem .2rem 0;
}
.galeria__falta {
  font-family: var(--dato); font-size: .74rem; color: var(--gris);
  margin: 1.4rem 0 0; padding-left: 1.1rem; position: relative;
}
.galeria__falta::before { content: '·'; position: absolute; left: .3rem; }

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

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



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

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

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

/* ── 1 · PORTADA ── */
.portada--foto { padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { max-width: 40rem; }
.portada__foto { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 56% 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(--blanco) 0%, var(--blanco) 30%,
              rgba(250,250,250,.66) 46%, rgba(250,250,250,.22) 68%, rgba(250,250,250,.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(250,250,250,0) 0%, rgba(250,250,250,.30) 42%, var(--blanco) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#revision { 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(--blanco-2);
  /* overflow hidden porque las entradas son laterales: mientras el texto
     se desliza y la foto entra a escala, ambos se salen unos píxeles y
     aparece scroll horizontal por un segundo. */
  overflow: hidden;
}
.mitades__foto { position: relative; min-height: 62svh; overflow: hidden; }
.mitades__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
.mitades__texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.4rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center;
  color: var(--tinta);
}
.mitades__ante {
  font-family: var(--dato); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gris-t); 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(--blanco); 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(250,250,250,.72) 0%,
              rgba(250,250,250,.84) 45%, rgba(250,250,250,.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(--prusia);
}
.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(--acero); }
.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(--blanco-2);
}
.tajo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .tajo img { animation: deriva-tajo 54s ease-in-out infinite alternate; }
}
@keyframes deriva-tajo {
  from { transform: scale(1.06) translate3d(-1.2%, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.2%, -1.4%, 0); }
}
.js .tajo { opacity: 0; }
.js .tajo.ok { opacity: 1; transition: opacity 1s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .tajo { opacity: 1; }
}

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

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

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

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