/* ══════════════════════════════════════════════════════════════════
   XPERTKINE — kinesiología · Temuco
   Demo 136 · tanda P3 (la última de la tanda)

   IDENTIDAD — «CINTA KINESIOLÓGICA»
   El objeto del oficio no es el aparato: es la cinta de colores
   pegada sobre la piel. De ahí salen los dos colores — beige piel
   cálido de fondo y el cian de la cinta como único acento, siempre en
   tiras: bordes, subrayados, la banda del fondo.

   DESLINDE OBLIGATORIO CON LA 111 (CDT Animal Health, misma tanda y
   misma ciudad, también cian): allá el cian es FRÍO de laboratorio y
   vive sobre blanco clínico, con instrumental alrededor. Acá el cian
   es de CINTA y vive sobre beige PIEL: el mismo tono, dos
   temperaturas de fondo opuestas, y ninguna de las dos páginas se
   parece a la otra en la primera mirada.
   Y con aktiv (50, kinesiología de Pucón): aquella es ceniza fría con
   LIMA ÁCIDA y su pieza es la elongación; ésta es cálida, con cian, y
   su pieza es la CUENTA de sesiones. Dos kine, nada en común.

   TRÍO TIPOGRÁFICO
   · Display: Quando — nueva en el registro. Serif ligera y tranquila:
     en una página de salud, la letra no debe gritar.
   · Cuerpo: Sen — 4 usos, redondeada y clara.
   · Dato: Spline Sans Mono — 6 usos. Carga los rangos de sesiones,
     que son el número protagonista de la página.

   CABECERA 102ª DEL OFICIO: LA BANDA ANUDADA — la banda elástica de
   resistencia con un nudo simple al centro. Primera cabecera del
   registro que es un objeto FLEXIBLE, y el nudo es lo que la vuelve
   reconocible a 24 px.

   FONDO NUEVO: LA BANDA QUE SE ESTIRA — una banda horizontal tenue
   que se estira desde el centro, llega a su límite y REBOTA con
   easing elástico. DESLINDE: las barras del registro (79, 65)
   CRECÍAN de forma lineal hasta su valor; ésta es la única animación
   con OVERSHOOT — se pasa y vuelve, porque una banda elástica hace
   exactamente eso. Con reduced-motion queda en reposo.

   ESTRUCTURA: C (la tabla es la página). DESLINDE con la 89, 96, 114
   y 121, que también son C: acá la primera columna es la LESIÓN en
   display, y la última es un rango en mono grande —«6–10»—, que es el
   dato que la gente vino a buscar.

   REGLA DE SALUD DE LA CASA: todo lo clínico va como orientación
   general, con firma profesional al pie de cada sección y con el
   descargo en el pie de página. Ni una promesa de resultado.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --piel:      #F0E6DC;  /* beige piel: la base                       */
  --piel-b:    #FAF4EE;
  --tinta:     #2A2622;  /* 12,8:1 sobre piel                         */
  --tinta-s:   #5C544C;  /* 6,0:1 sobre piel                          */
  --cian:      #0A6C7A;  /* 5,0:1 sobre piel — SOLO en claro          */
  --cian-c:    #6FD4E2;  /* 8,3:1 sobre tinta — SOLO en oscuro        */
  --claro:     #EDE7E1;  /* texto sobre tinta                         */
  --claro-s:   #B3AAA2;  /* 7,1:1 sobre tinta                         */
  --linea:     #DFD3C6;

  --display: 'Quando', Georgia, serif;
  --cuerpo:  'Sen', system-ui, sans-serif;
  --mono:    'Spline Sans 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(--piel);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: clamp(1rem, .95rem + .3vw, 1.08rem);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

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

/* ── Banda de propuesta ───────────────────────────────────────── */
.propuesta {
  background: var(--tinta); color: var(--claro);
  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: var(--claro-s); }
.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(--piel-b);
  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: 1.05rem; }

/* LA BANDA ANUDADA — cabecera 102ª. Dos curvas que se cruzan y el
   nudo al centro: el objeto flexible del oficio, y lo único que se
   reconoce a este tamaño. */
.banda { position: relative; flex: none; width: 30px; height: 20px; }
.banda::before, .banda::after {
  content: ''; position: absolute; top: 3px;
  width: 16px; height: 14px;
  border: 2px solid var(--cian);
  border-radius: 50%;
}
.banda::before { left: 0;  border-right-color: transparent; }
.banda::after  { right: 0; border-left-color: transparent; }

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

.cab__wsp { margin-left: auto; text-align: right; text-decoration: none; line-height: 1.15; }
@media (min-width: 900px) { .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(--cian);
}
.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);
  background: linear-gradient(to bottom, var(--piel-b), var(--piel) 55%);
}

/* FONDO — LA BANDA QUE SE ESTIRA.
   Se estira desde el centro, se PASA de su largo y vuelve: el
   cubic-bezier con overshoot es lo que le da el carácter elástico.
   Es la única animación del registro que sobrepasa y rebota. */
.elastico {
  position: absolute; left: 0; right: 0; top: 32%;
  height: 26px; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.elastico span {
  display: block; height: 10px; width: 24%;
  border-radius: 6px;
  background: linear-gradient(to right,
    rgba(10,108,122,0), rgba(10,108,122,.16) 18%, rgba(10,108,122,.16) 82%, rgba(10,108,122,0));
  animation: estira 13s cubic-bezier(.34,1.7,.5,1) infinite alternate;
}
@keyframes estira {
  from { transform: scaleX(1); }
  to   { transform: scaleX(3.6); }
}
@media (prefers-reduced-motion: reduce) {
  .elastico span { animation: none; transform: scaleX(2.2); }
}

.portada__texto { position: relative; max-width: 22ch; }
.sitio {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cian); margin-bottom: 1.2rem;
}
.portada h1 { font-size: clamp(2.6rem, 8.5vw, 5.6rem); margin-bottom: 1.2rem; }
.portada .bajada { max-width: 46ch; color: var(--tinta-s); }

/* ══════════════ LA TABLA (C) ══════════════ */
.tabla {
  background: var(--piel-b);
  border-top: 1px solid var(--linea);
  padding: clamp(3.5rem, 10vw, 6.5rem) clamp(1.1rem, 5vw, 3rem);
}
.tabla__cabecera { max-width: var(--ancho); margin: 0 auto 2.4rem; }
.tabla .antetitulo, .casa .antetitulo {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cian); margin-bottom: .9rem;
}
.casa .antetitulo--claro { color: var(--cian-c); }
.tabla h2 { font-size: clamp(2rem, 6vw, 3.6rem); margin-bottom: 1.1rem; }
.tabla__cabecera > p { max-width: 60ch; 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(--cian);
  border-left: 3px solid var(--cian);
  padding-left: .6rem;
}

.lesiones { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho); }
.lesion {
  display: grid; grid-template-columns: 1fr; gap: .6rem 2rem;
  padding: 1.5rem 0; border-top: 1px solid var(--linea);
  align-items: start;
}
@media (min-width: 780px) { .lesion { grid-template-columns: 1fr 11rem; } }
.lesion:last-child { border-bottom: 1px solid var(--linea); }
.lesion__txt h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: .5rem; }
.lesion__txt p { margin: 0; color: var(--tinta-s); max-width: 58ch; }
.lesion__n {
  margin: 0; font-family: var(--mono); font-size: .8rem;
  color: var(--tinta-s); letter-spacing: .04em;
}
@media (min-width: 780px) { .lesion__n { text-align: right; } }
.lesion__n span {
  display: block; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1;
  color: var(--cian); font-variant-numeric: tabular-nums;
  margin-bottom: .15rem;
}

.depende {
  max-width: var(--ancho); margin: 2.4rem auto 0;
  border-left: 4px solid var(--cian); padding-left: 1.3rem;
}
.depende h3 { font-size: 1.3rem; margin-bottom: .7rem; }
.depende ul { margin: 0; padding-left: 1.1rem; color: var(--tinta-s); }
.depende li { margin-bottom: .4rem; }

.tabla .firma { max-width: var(--ancho); margin: 2rem auto 0; font-size: .88rem; color: var(--tinta-s); }

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

/* ══════════════ LA TAREA PARA LA CASA ══════════════ */
.casa {
  background: var(--tinta); color: var(--claro);
  padding: clamp(3.5rem, 10vw, 6.5rem) clamp(1.1rem, 5vw, 3rem);
}
.casa__cuerpo { max-width: var(--ancho); margin: 0 auto; }
.casa h2 { font-size: clamp(1.9rem, 5.6vw, 3.4rem); margin-bottom: 1.1rem; }
.casa .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-size: 1.2rem;
  color: var(--cian-c); margin-bottom: .35rem;
}
.clave dd { margin: 0; color: var(--claro-s); font-size: .96rem; max-width: 48ch; }

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

.evaluar { border-top: 1px solid #443E38; margin-top: 2.4rem; padding-top: 2.2rem; }
.evaluar__rot {
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--claro-s); margin-bottom: .8rem;
}
.flecha {
  font-weight: 600; font-size: .96rem;
  color: var(--cian); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: .12rem;
}
.flecha--grande {
  display: inline-block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  color: var(--cian-c);
}
.flecha:hover, .flecha:focus-visible { color: var(--tinta); }
.flecha--grande:hover, .flecha--grande:focus-visible { color: var(--claro); }
.evaluar .evaluar__nota { font-size: .88rem; color: var(--claro-s); margin-top: 1.2rem; max-width: 58ch; }

/* ══════════════ PARA EL DUEÑO ══════════════ */
.dueno {
  background: var(--piel); color: var(--tinta);
  padding: clamp(3rem, 8vw, 5rem) clamp(1.1rem, 5vw, 3rem);
}
.dueno h2 { font-size: clamp(1.5rem, 4vw, 2rem); 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-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cian); 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; }

.pie {
  background: var(--tinta);
  padding: 2rem clamp(1.1rem, 5vw, 3rem);
  border-top: 1px solid #443E38;
}
.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; } }

/* La celda del rango tipea su cifra en grande (.lesion__n span), pero
   la marca de «falta» que va en la misma celda NO es una cifra: sin
   esto heredaba el tamaño gigante y se salía de la columna. */
.lesion__n .falta {
  display: inline; font-size: .78rem; line-height: 1.4;
  color: var(--cian); margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   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: 22% 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 22%,
              rgba(0,0,0,.28) 36%, rgba(0,0,0,.74) 52%, #000 64%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 22%,
              rgba(0,0,0,.28) 36%, rgba(0,0,0,.74) 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(240,230,220,1) 0%, rgba(240,230,220,1) 26%,
              rgba(240,230,220,.70) 42%, rgba(240,230,220,.28) 62%, rgba(240,230,220,.08) 80%,
              rgba(240,230,220,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(240,230,220,0) 0%, rgba(240,230,220,.30) 42%, var(--piel) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#sesiones { 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(--piel-b);
  /* 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(--tinta-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(--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(--piel); 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(240,230,220,.72) 0%,
              rgba(240,230,220,.84) 45%, rgba(240,230,220,.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(--cian);
}
.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(--piel-b);
}
.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(--piel-b);
  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(); 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(--piel-b); }
.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; }