/* ══════════════════════════════════════════════════════════════════
   VETERINARIA ALTO PUCON · Pucon
   Demo 159. Identidad: «NIEVE, ROCA Y GLACIAR».

   ─────────────────────────────────────────────────────────────────
   REGLA DE SALUD, SIN EXCEPCION
   Ni un producto, ni una dosis, ni un diagnostico. La lista del
   regreso dice QUE MIRAR, nunca QUE CONCLUIR, y lo declara. Las dos
   secciones quedan pendientes de firma profesional y el pie lleva
   descargo completo.
   Y una regla propia: ni una altitud, ni una distancia, ni el nombre
   de una ruta. Los tramos son de TERRENO (base, bosque, altura,
   vuelta), no un recorrido real — mandar a alguien a un cerro con un
   dato inventado es peor que no decir nada.
   ─────────────────────────────────────────────────────────────────

   LA PALETA
   --nieve   #F5F8FA
   --roca    #4A5257  gris de piedra volcanica
   --glaciar #166B8F  azul INTENSO de outdoor tecnico (5,6:1)

   DESLINDE DE AZULES FRIOS — el hielo de la 171 es PALIDO, dental, de
   sensibilidad: un azul que calma. Este es lo contrario: saturado y
   profundo, el color de una chaqueta tecnica y de la grieta de un
   glaciar.
   DESLINDE DE PALETAS DE MONTAÑA — la 94 (camping de cordillera) era
   piedra y nieve con el acento en el mosqueton, que es METAL. Aca la
   tercera pata es el COLOR del equipo, no el material.

   EL TRIO
   · display · K2D — geometrica limpia con aire tecnico, nueva en el
     registro.
   · cuerpo  · Karla — neutra.
   · dato    · Noto Sans Mono — rotulos y el telefono.

   LA CABECERA (125ª del oficio) — LA ALMOHADILLA
   La huella frontal: el pulpejo central y los cuatro dedos en arco.
   DESLINDE con las huellas de la 112: aquellas eran un FONDO que
   caminaba en diagonal, muchas y chicas. Esta es UNA huella frontal,
   grande, como logotipo.

   EL FONDO — EL VOLCAN QUE HUMEA
   La silueta del cono en una esquina, con UN hilo de humo que sale
   del crater y deriva.
   DESLINDE OBLIGATORIO con la 109 (Mirador Llaima): alli el volcan
   era PROTAGONISTA nocturno, con cielo de estrellas que amanecia.
   Aca es una seña de DIA: chica, en esquina, casi un sello.
   Y de los humos de la tanda: la rejilla de la 138 son MULTIPLES
   hilos de una parrilla. Este es UNO solo, lejano y constante.
   Reduced-motion: el hilo queda quieto (un hilo de humo detenido
   sigue leyendose como humo).

   LA ESTRUCTURA — B (indice lateral)
   DESLINDE con 90/102/123/135/177/183: en esos el indice es un
   catalogo o un temario. Aca es un RECORRIDO DE TERRENO — el paseo
   dividido en tramos — y por eso el indice lleva la advertencia de
   que no es una ruta.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --nieve:      #F5F8FA;
  --nieve-2:    #E7EDF1;
  --roca:       #4A5257;
  --roca-2:     #2E3438;
  --roca-3:     #1E2427;
  --glaciar:    #166B8F;   /* 5,6:1 sobre nieve */
  --glaciar-cl: #63C4E8;   /* sobre roca oscura */
  --tinta:      #1C2225;
  --tinta-2:    #545D63;   /* 6,1:1 sobre nieve */
  --claro-2:    #B4BFC6;   /* 8,4:1 sobre roca-2 */
  --linea:      #D5DDE3;
  --linea-osc:  #3D454A;

  --display: 'K2D', system-ui, sans-serif;
  --cuerpo:  'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'Noto Sans 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(--nieve);
  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(--glaciar); color: var(--nieve); }
a { color: var(--glaciar); }
:focus-visible { outline: 2px solid var(--glaciar); outline-offset: 3px; }

/* ─────────── franja de propuesta ─────────── */
.propuesta {
  background: var(--roca-2);
  color: var(--claro-2);
  padding: .8rem clamp(1rem, 5vw, 4rem);
  font-size: .82rem;
  line-height: 1.5;
}
.propuesta p { margin: 0; }
.propuesta__que { color: #fff; }
.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(--nieve);
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
}
.js .cab { transition: background .3s ease; }
.cab--flota {
  background: rgba(245, 248, 250, .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.32rem; line-height: 1.1; }

/* ── LA ALMOHADILLA — pulpejo + cuatro dedos en arco ──
   Los cuatro dedos salen de un solo elemento: el ::after es el
   primero y los otros tres son box-shadow. El arco lo dan los
   desplazamientos verticales distintos. */
.huella {
  position: relative;
  width: 23px; height: 21px;
  flex: 0 0 auto;
  color: var(--glaciar);
}
.huella::before {   /* el pulpejo */
  content: ''; position: absolute;
  left: 50%; bottom: 0; width: 15px; height: 11px;
  margin-left: -7.5px;
  border-radius: 46% 46% 42% 42% / 56% 56% 44% 44%;
  background: currentColor;
}
.huella::after {    /* los cuatro dedos */
  content: ''; position: absolute;
  left: 1px; top: 4px;
  width: 5px; height: 6.5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
     5.5px -3px 0 currentColor,
    11.5px -3px 0 currentColor,
    17px    1px 0 currentColor;
}

.cab__nav { display: flex; gap: 1.4rem; flex: 0 0 auto; }
.cab__nav a {
  font-family: var(--dato);
  font-size: .72rem;
  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(--glaciar); border-bottom-color: var(--glaciar); }
@media (max-width: 56rem) { .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: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2);
}
.cab__tel-num {
  display: block; font-family: var(--dato);
  font-size: clamp(.76rem, 2vw, .94rem);
  color: var(--glaciar);
  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:
    linear-gradient(178deg, var(--nieve) 0%, var(--nieve-2) 100%);
  overflow: hidden;
}
.portada__texto { position: relative; z-index: 2; max-width: min(92vw, 44rem); }

/* ── EL VOLCAN QUE HUMEA ──
   Chico y en esquina: es una seña, no el paisaje. */
.volcan {
  position: absolute;
  right: clamp(1.5rem, 6vw, 6rem);
  bottom: 0;
  width: clamp(120px, 20vw, 230px);
  height: clamp(80px, 13vw, 150px);
  z-index: 1; pointer-events: none;
}
.volcan__cono {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 12%;
  background: linear-gradient(172deg, #C8D3DA 0%, #9FADB6 42%, #7C8990 100%);
  /* el cono truncado, con el crater arriba */
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  opacity: .55;
}
.volcan__cono::after {   /* la nieve de la cumbre */
  content: ''; position: absolute;
  left: 34%; right: 34%; top: 0; height: 32%;
  background: var(--nieve);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  opacity: .9;
}
.volcan__humo {
  position: absolute;
  left: 50%; top: -6%;
  width: 3px; height: 30%;
  margin-left: -1.5px;
  border-radius: 2px;
  background: linear-gradient(0deg,
    rgba(124, 137, 144, .45), rgba(124, 137, 144, 0));
  filter: blur(2px);
  transform-origin: 50% 100%;
}
.js .volcan__humo { animation: deriva 14s ease-in-out infinite; }
/* Un solo hilo, constante, que se ladea con el viento. No sube en
   bocanadas: un volcan fumarolico humea sin parar. */
@keyframes deriva {
  0%, 100% { transform: rotate(4deg)  scaleY(1);    opacity: .8; }
  34%      { transform: rotate(-6deg) scaleY(1.18); opacity: 1;  }
  68%      { transform: rotate(9deg)  scaleY(.92);  opacity: .7; }
}

.sitio {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: 1.2rem;
}
.portada h1 {
  font-size: clamp(2.3rem, 7vw, 4.8rem);
  line-height: 1.06;
  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: .64rem; letter-spacing: .12em;
  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: 1rem !important; }
.dd--tel a { text-decoration: none; }
.dd--tel a:hover { text-decoration: underline; }

/* ═══════════ LA MONTAÑA (estructura B) ═══════════ */
.montana {
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--nieve);
}
.montana__intro { max-width: min(100%, 44rem); margin-bottom: 2.4rem; }

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

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

.marca-ejemplo { margin: 0; }
.marca-ejemplo::before {
  content: attr(data-ejemplo);
  display: inline-block;
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--glaciar);
  border-left: 2px solid var(--glaciar);
  padding-left: .6rem;
}

/* ── el indice lateral ── */
.tramos {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
}
@media (max-width: 54rem) { .tramos { grid-template-columns: 1fr; } }

.indice {
  position: sticky; top: 5rem;
  align-self: start;
  border-top: 3px solid var(--glaciar);
  padding-top: 1rem;
}
@media (max-width: 54rem) { .indice { position: static; } }
.indice__rot {
  font-family: var(--dato);
  font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-2);
  margin-bottom: .8rem;
}
.indice ol {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  counter-reset: i;
}
.indice li { counter-increment: i; border-bottom: 1px solid var(--linea); }
.indice a {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .6rem 0;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--tinta);
  text-decoration: none;
}
.indice a::before {
  content: counter(i, decimal-leading-zero);
  font-family: var(--dato);
  font-size: .68rem;
  color: var(--glaciar);
}
.indice a:hover { color: var(--glaciar); }
.indice__nota { font-size: .84rem; color: var(--tinta-2); margin: 0; }

/* ── los tramos ── */
.tramo {
  padding: 1.6rem 0;
  border-top: 1px solid var(--linea);
  scroll-margin-top: 5rem;
  max-width: min(100%, 44rem);
}
.tramo:first-child { border-top: 0; padding-top: 0; }
.tramo__n {
  font-family: var(--dato);
  font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--glaciar);
  margin-bottom: .4rem;
}
.tramo h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: .8rem; }
.tramo ul { margin: 0; padding-left: 1.1rem; }
.tramo li { font-size: .97rem; color: var(--tinta-2); margin-bottom: .7rem; }
.tramo li:last-child { margin-bottom: 0; }
.tramo b { color: var(--tinta); }

.falta {
  font-family: var(--dato);
  font-size: .88em;
  color: var(--glaciar);
  border-bottom: 1px dashed var(--glaciar);
}
.vuelta .falta { color: var(--glaciar-cl); border-bottom-color: var(--glaciar-cl); }

/* ═══════════ DESPUÉS DEL PASEO ═══════════ */
.vuelta {
  background: var(--roca-2);
  color: var(--nieve);
  padding: clamp(3.5rem, 10vh, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.vuelta__cuerpo { max-width: min(100%, 46rem); }
.vuelta .entrada { color: var(--claro-2); }

.chequeo {
  margin: 0 0 1.8rem;
  padding-left: 1.4rem;
  counter-reset: c;
}
.chequeo li {
  font-size: .98rem;
  color: var(--claro-2);
  margin-bottom: .9rem;
  padding-left: .3rem;
}
.chequeo li::marker { color: var(--glaciar-cl); font-family: var(--dato); font-size: .85rem; }
.chequeo b { color: var(--nieve); }

.ojo {
  background: var(--roca-3);
  border-left: 3px solid var(--glaciar-cl);
  padding: 1.2rem 1.4rem;
  max-width: min(100%, 46rem);
}
.ojo p { margin: 0; font-size: .96rem; color: var(--claro-2); }
.ojo b { color: var(--nieve); }

/* ═══════════ EL CIERRE — T1 ═══════════ */
.cierre {
  background: var(--nieve-2);
  padding: clamp(3.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato);
  font-size: .74rem; letter-spacing: .18em;
  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.5rem, 6.6vw, 3.4rem);
  line-height: 1.1;
  color: var(--glaciar);
  text-decoration: none;
  white-space: nowrap;
}
.cierre__tel a:hover { text-decoration: underline; }
.cierre__pie {
  font-size: .96rem;
  color: var(--tinta-2);
  max-width: 44rem;
  margin: 0 auto;
}

/* ═══════════ PARA LA VETERINARIA ═══════════ */
.dueno {
  background: var(--nieve);
  color: var(--tinta);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.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: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--glaciar);
  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(--glaciar);
  text-decoration: none;
  border-bottom: 1px solid var(--glaciar);
  padding-bottom: 2px;
}
.flecha:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

.pie {
  background: var(--roca-3);
  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(--nieve); }
.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) {
  /* El hilo de humo queda QUIETO: un hilo detenido sigue leyendose
     como humo saliendo del crater. */
  .js .volcan__humo { animation: 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: 58% 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(--nieve) 0%, var(--nieve) 30%,
              rgba(245,248,250,.66) 46%, rgba(245,248,250,.22) 68%, rgba(245,248,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(245,248,250,0) 0%, rgba(245,248,250,.30) 42%, var(--nieve) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#montana { 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(--nieve-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(--nieve); 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(245,248,250,.72) 0%,
              rgba(245,248,250,.84) 45%, rgba(245,248,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(--glaciar);
}
.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(--nieve-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(--nieve-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(--nieve-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(--nieve-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; }
}