/* ══════════════════════════════════════════════════════════════════
   VETERINARIA PIUVET · Villarrica
   Demo 158. Identidad: «MANTECA DE CACHORRO».

   ─────────────────────────────────────────────────────────────────
   REGLA DE SALUD, SIN EXCEPCION
   Ni una dosis, ni una marca, ni una fecha exacta. Las vacunas se
   nombran por su nombre GENERAL de calendario y las edades van
   declaradas como referencia, con un aviso arriba de la tabla: el
   esquema real lo define el veterinario mirando a ese cachorro —un
   rescatado y uno de criadero no siguen el mismo camino—. Las dos
   secciones quedan pendientes de firma profesional y el pie lleva
   descargo completo.
   ─────────────────────────────────────────────────────────────────

   LA PALETA
   --crudo   #FAF6EC  crudo tibio
   --manteca #F5DFA0  amarillo PASTEL (fondos y objetos, nunca texto)
   --miel    #8A5C0C  el acento de texto (5,4:1 sobre crudo)
   --tinta   #35291C  tinta CAFE, no negra

   DESLINDE DE AMARILLOS — el de obra de la 121 y la 127 es señaletica
   y maquinaria (saturado, plano, de peligro); la ventana de la 149 es
   LUZ incandescente (tiene gradiente, ilumina). Este es PASTEL DE
   GUAGUA: el unico amarillo suave del registro, y es opaco — no
   ilumina nada, es el color de una manta.
   CERO CELESTE Y CERO MENTA a proposito: los pasteles clinicos ya
   estan tomados por la 110 y la 116. Este es pastel CALIDO, que es la
   unica esquina de ese barrio que quedaba libre.

   EL TRIO
   · display · Baloo 2 — redondeada con peso. Amable sin ser de dibujo
     animado, que es la linea fina de todo lo que habla de cachorros.
   · cuerpo  · Mulish — neutra.
   · dato    · Courier Prime — para la tabla del año: tiene aire de
     documento escrito a maquina, que es como se siente un calendario
     de vacunas.

   LA CABECERA (124ª del oficio) — EL HUESO
   El hueso de juguete reducido a geometria: una barra y un ovalo
   vertical en cada punta. NO es una caricatura — es la silueta.

   EL FONDO — LA PELOTA QUE BOTA
   Una pelotita cruza el viewport botando en parabolas DECRECIENTES, y
   pasa muy de vez en cuando.
   DESLINDE OBLIGATORIO: la banda de la 136 tiene overshoot elastico
   EN SI MISMA (se deforma al llegar); las jabas de la 185 caen y
   ENCAJAN secas (no rebotan). Esta BOTA CONTRA EL SUELO: es la
   primera fisica de rebote en trayectoria del registro, y por eso
   cada tramo del keyframe lleva su propia timing-function —ease-in al
   caer, ease-out al subir— que es lo que hace que se vea como una
   pelota y no como algo que sube y baja.
   Reduced-motion: se esconde.

   LA ESTRUCTURA — C (la tabla es la pagina)
   DESLINDE con 89/96/114/121/138/145/160/180/184: la primera columna
   es la EDAD. Es la unica tabla del registro indexada por edad.
   Y DESLINDE FUERTE con la 114 (Dra. Pets): alla la pagina IMITABA un
   carnet de vacunas, con timbres que se estampaban al entrar en
   pantalla. Aca no se imita ningun documento: es una tabla, y se ve
   como una tabla.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --crudo:      #FAF6EC;
  --crudo-2:    #F2ECDD;
  --manteca:    #F5DFA0;   /* fondos y objetos — nunca texto */
  --manteca-2:  #FBEFC9;
  --miel:       #8A5C0C;   /* 5,4:1 sobre crudo */
  --tinta:      #35291C;
  --tinta-2:    #6A5844;   /* 5,8:1 sobre crudo */
  --cafe:       #2B2117;   /* fondo de la seccion oscura */
  --claro-2:    #CDC2B0;   /* sobre cafe */
  --linea:      #E4DCC8;
  --linea-osc:  #443729;

  --display: 'Baloo 2', system-ui, sans-serif;
  --cuerpo:  'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Courier Prime', ui-monospace, 'Consolas', monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--crudo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.66;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

::selection { background: var(--miel); color: var(--crudo); }
a { color: var(--miel); }
:focus-visible { outline: 2px solid var(--miel); outline-offset: 3px; }

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

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--cafe);
  color: var(--claro-2);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
}
.propuesta p { margin: 0; }
.propuesta__que { color: var(--crudo); }
.propuesta__que b { font-weight: 700; }
.propuesta__gancho { margin-top: .25rem !important; max-width: 64ch; }

/* ─────────── cabecera fantasma ─────────── */
.cab {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 5vw, 4rem);
  background: var(--crudo);
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(250, 246, 236, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cab__marca {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.cab__nombre { font-family: var(--display); font-size: 1.4rem; line-height: 1.1; }

/* ── EL HUESO — barra + un ovalo vertical por punta ── */
.hueso {
  position: relative;
  width: 27px; height: 8px;
  flex: 0 0 auto;
  background: var(--miel);
  border-radius: 2px;
}
.hueso::before,
.hueso::after {
  content: ''; position: absolute;
  top: -3.5px;
  width: 8px; height: 15px;
  background: var(--miel);
  border-radius: 50%;
}
.hueso::before { left: -3px; }
.hueso::after  { right: -3px; }

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.cab__nav a:hover { color: var(--miel); border-bottom-color: var(--miel); }
@media (max-width: 50rem) { .cab__nav { display: none; } }

/* T1 — el telefono verificado */
.cab__tel {
  text-align: right; text-decoration: none; line-height: 1.15;
  padding-left: 1.1rem; border-left: 1px solid var(--linea);
  flex: 0 0 auto;
}
.cab__tel-rot {
  display: block; font-family: var(--dato);
  font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.82rem, 2vw, 1rem);
  color: var(--miel);
  white-space: nowrap;
}
.cab__tel:hover .cab__tel-num { text-decoration: underline; }

/* ═══════════ PORTADA ═══════════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(3rem, 9vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background:
    radial-gradient(40rem 26rem at 84% 20%, rgba(245, 223, 160, .5), transparent 70%),
    var(--crudo);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 44rem); }

/* ── LA PELOTA QUE BOTA ── */
.cancha { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pelota {
  position: absolute;
  left: -6%; bottom: 3%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFD4C2, #F08A6A 52%, #C85A38);
  opacity: 0;
}
.js .pelota {
  animation: cruza 26s linear infinite,
             bota  26s linear infinite;
}
@keyframes cruza {
  0%      { left: -6%;   opacity: 0; }
  4%      {              opacity: 1; }
  56%     {              opacity: 1; }
  62%     { left: 106%;  opacity: 0; }
  100%    { left: 106%;  opacity: 0; }
}
/* Parabolas DECRECIENTES. Cada tramo lleva su propia curva: ease-in
   al caer (acelera con la gravedad), ease-out al subir (frena). Sin
   eso se ve como algo que sube y baja, no como una pelota. */
@keyframes bota {
  0%      { bottom: 46%; animation-timing-function: ease-in;  }
  9%      { bottom: 3%;  animation-timing-function: ease-out; }
  17%     { bottom: 27%; animation-timing-function: ease-in;  }
  25%     { bottom: 3%;  animation-timing-function: ease-out; }
  32%     { bottom: 15%; animation-timing-function: ease-in;  }
  38%     { bottom: 3%;  animation-timing-function: ease-out; }
  43%     { bottom: 8%;  animation-timing-function: ease-in;  }
  47%     { bottom: 3%;  animation-timing-function: ease-out; }
  51%     { bottom: 4%;  animation-timing-function: ease-in;  }
  54%,100%{ bottom: 3%; }
}

.sitio {
  font-family: var(--dato);
  font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1.2rem;
}
.portada h1 {
  font-size: clamp(2.2rem, 6.6vw, 4.6rem);
  line-height: 1.08;
  margin-bottom: 1.4rem;
}
.bajada {
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  color: var(--tinta-2);
  max-width: min(92vw, 35rem);
  margin-bottom: 2.2rem;
}
.specs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato);
  font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: .25rem;
}
.spec dd { margin: 0; font-family: var(--display); font-size: 1.8rem; line-height: 1; }
.dd--tel { font-family: var(--dato) !important; font-size: 1.05rem !important; }
.dd--tel a { text-decoration: none; }
.dd--tel a:hover { text-decoration: underline; }

/* ═══════════ LA TABLA DEL AÑO ═══════════ */
.anio {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--crudo-2);
}
.anio__cabecera { max-width: min(100%, 46rem); margin-bottom: 2rem; }

.antetitulo {
  font-family: var(--dato);
  font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: .8rem;
}
.antetitulo--claro { color: var(--manteca); }

.anio h2, .destroza h2 {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 1.1rem;
}
.entrada {
  font-size: 1.05rem;
  color: var(--tinta-2);
  max-width: min(100%, 37rem);
  margin-bottom: 1.6rem;
}

.aviso-fuerte {
  background: var(--manteca-2);
  border-left: 4px solid var(--miel);
  padding: 1.1rem 1.3rem;
  max-width: min(100%, 46rem);
}
.aviso-fuerte p { margin: 0; font-size: .96rem; color: var(--tinta-2); }
.aviso-fuerte b { color: var(--tinta); }
.aviso-fuerte em { font-style: italic; }

.tabla-envoltura { overflow-x: auto; margin-bottom: 1.8rem; }
.tabla {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  text-align: left;
}
.tabla thead th {
  font-family: var(--dato);
  font-weight: 400;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding: 0 1.2rem .7rem 0;
  border-bottom: 2px solid var(--miel);
}
.tabla tbody th,
.tabla tbody td {
  padding: 1.4rem 1.2rem 1.4rem 0;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
  font-weight: 400;
}

/* La EDAD es el índice de esta tabla — la única del registro que se
   indexa así. */
.edad { width: 7rem; }
.edad__n {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: .95;
  color: var(--miel);
}
.edad__u {
  display: block;
  font-family: var(--dato);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-top: .2rem;
}
.que { margin: 0 0 .5rem; font-size: .98rem; }
.que__f { margin: 0; }
.pq { width: 20rem; font-size: .93rem; color: var(--tinta-2); }

.falta {
  font-family: var(--dato);
  font-size: .88em;
  color: var(--miel);
  border-bottom: 1px dashed var(--miel);
}
.destroza .falta { color: var(--manteca); border-bottom-color: var(--manteca); }

.firma {
  font-size: .96rem;
  color: var(--tinta-2);
  margin: 0;
  max-width: min(100%, 46rem);
}

/* ═══════════ LO QUE DESTROZA ═══════════ */
.destroza {
  background: var(--cafe);
  color: var(--crudo);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.destroza__cuerpo { max-width: min(100%, 58rem); }
.destroza .entrada { color: var(--claro-2); }

.dos-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.4rem;
  margin-bottom: 1.6rem;
}
.cc { padding: 1.4rem clamp(1.1rem, 2.6vw, 1.7rem); background: #322619; }
.cc--normal { border-top: 4px solid var(--manteca); }
.cc--consulta { border-top: 4px solid #E08A5A; }
.cc h3 { font-size: 1.5rem; margin-bottom: .9rem; }
.cc--consulta h3 { color: #F0A97E; }
.cc ul { margin: 0; padding-left: 1.1rem; }
.cc li { font-size: .96rem; color: var(--claro-2); margin-bottom: .7rem; }
.cc li:last-child { margin-bottom: 0; }
.cc b { color: var(--crudo); }
.cc__nota {
  font-size: .93rem;
  color: var(--claro-2);
  border-top: 1px solid var(--linea-osc);
  padding-top: .9rem;
  margin: 1rem 0 0;
}
.cc__nota b { color: var(--crudo); }

.nota-honesta {
  font-size: .95rem;
  color: var(--claro-2);
  border-left: 3px solid var(--manteca);
  padding: .2rem 0 .2rem 1.1rem;
  margin: 0;
}

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--manteca-2);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1rem;
}
.cierre__tel { margin: 0 0 1.2rem; }
.cierre__tel a {
  font-family: var(--dato);
  font-size: clamp(1.6rem, 7vw, 3.6rem);
  line-height: 1.1;
  color: var(--miel);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { text-decoration: underline; }
.cierre__pie {
  font-size: .96rem;
  color: var(--tinta-2);
  max-width: 46rem;
  margin: 0 auto;
}

/* ═══════════ PARA LA VETERINARIA ═══════════ */
.dueno {
  background: var(--crudo);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 2rem; }
.dueno__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.dueno h3 {
  font-family: var(--dato);
  font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--miel);
  margin-bottom: .5rem;
}
.dueno p { color: var(--tinta-2); font-size: .96rem; margin: 0; }
.dueno__cierre { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 0; }
.flecha {
  font-weight: 700;
  color: var(--miel);
  text-decoration: none;
  border-bottom: 1px solid var(--miel);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--cafe);
  color: var(--claro-2);
  padding: 2rem clamp(1.25rem, 5vw, 4rem) 2.5rem;
  font-size: .85rem;
}
.pie p { margin: 0 0 .8rem; max-width: 72ch; }
.pie b { color: var(--crudo); }
.pie__demo { font-size: .78rem; opacity: .85; margin: 0 !important; }

/* ═══════════ APARICIONES ═══════════ */
.js .rev { opacity: 0; transform: translateY(16px); }
.js .rev.ok { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (prefers-reduced-motion: reduce) {
  /* La pelota SE ESCONDE: una pelota quieta en el aire no es nada. */
  .cancha { display: none; }
}

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

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

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

/* ── 1 · PORTADA ── */
.portada--foto { padding-top: clamp(1.5rem, 3.5vh, 3.5rem); }
.portada--foto .portada__texto { max-width: 40rem; }
.portada__foto { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 56% 48%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 28%,
              rgba(0,0,0,.18) 42%, rgba(0,0,0,.66) 58%, #000 72%, #000 100%);
}
.portada__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--crudo) 0%, var(--crudo) 30%,
              rgba(250,246,236,.66) 46%, rgba(250,246,236,.22) 68%, rgba(250,246,236,.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,246,236,0) 0%, rgba(250,246,236,.30) 42%, var(--crudo) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#anio { 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(--crudo-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(--tinta-2); margin: 0 0 .9rem;
}
.mitades h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08;
  margin: 0 0 1rem; color: var(--tinta);
}
.mitades__texto p:last-child {
  margin: 0; font-size: 1rem; line-height: 1.65; color: var(--tinta); max-width: 34rem;
}
.js .mitades__texto.rev { opacity: 0; transform: translateX(1.6rem); }
.js .mitades__foto.rev  { opacity: 0; transform: scale(1.04); }
.js .mitades__texto.rev.ok,
.js .mitades__foto.rev.ok {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
@media (max-width: 780px) {
  .mitades { grid-template-columns: 1fr; }
  .mitades__foto { min-height: 44svh; }
}

/* ── 4 · LA CITA A SANGRE ── */
.cita {
  position: relative; isolation: isolate; min-height: 70svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  background: var(--crudo); overflow: hidden;
}
.cita__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cita__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
/* Velo parejo y fuerte: el texto va centrado y grande, encima de la foto
   entera. Calculado sobre el peor caso —imagen del color contrario
   detrás— para que el ratio aguante sin ensuciar la imagen. */
.cita__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(250,246,236,.72) 0%,
              rgba(250,246,236,.84) 45%, rgba(250,246,236,.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(--miel);
}
.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(--crudo-2); }
.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(--crudo-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(--crudo-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(--tinta-2); 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(--crudo-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; }
}