/* ══════════════════════════════════════════════════════════════════
   GEOSALUD DENTAL · Pitrufquen
   Demo 171. Identidad: «ESMALTE Y HIELO».

   LA DIRECCION EN UNA FRASE
   El frio que duele en un diente sensible, convertido en paleta:
   blanco de esmalte, azul hielo palido en planos grandes y nada
   caliente en ninguna parte. Urgencia CONTENIDA — la pagina baja el
   pulso en vez de subirlo.

   LA PALETA
   --esmalte #FBFCFD  fondo
   --hielo   #DCE9F0  planos grandes suaves
   --frio    #2C5A72  texto de acento sobre esmalte (6,8:1)
   --hondo   #16303D  la seccion oscura
   --tinta   #16222B  texto
   --gris    #5A6870  secundario (5,3:1)

   DESLINDE DE AZULES FRIOS: el glaciar de la 159 es SATURADO tecnico
   de outdoor (azul de marca deportiva). Este es PALIDO, casi blanco,
   y su gracia es que NO tiene saturacion: es el color del aire frio,
   no el de una parka.
   DESLINDE DE LAS DENTALES DEL REGISTRO: la 119 es rosa te (calma
   para el miedo) y la 51 es porcelana (precision). Esta es la FRIA de
   urgencia: la unica de la familia que tiene que sonar seria.

   FAMILIA DENTAL POR PIEZA (una pregunta cada una, sin cruzarse):
   54 precio · 67 niños · 84 duracion · 119 miedo · **171 URGENCIA** ·
   172 ortodoncia · 173 prevencion · 174 protesis.

   EL TRIO
   · display · Inter Tight — grotesca estrecha y moderna. Primera vez
     como display del registro.
   · cuerpo  · Encode Sans — neutra, aguanta parrafos largos.
   · dato    · IBM Plex Mono — REPETICION CONSCIENTE: el catalogo de
     monos de Google esta agotado a esta altura. Es la mono mas
     clinica del catalogo y aca lleva el numero de telefono a 128px,
     que es el elemento principal de la pagina.

   LA CABECERA (137ª del oficio) — LA MUELA
   Corona con dos raices, trazo minimo, dibujada con border-radius y
   dos patas.
   **DESLINDE OBLIGATORIO CON LA 119** (la otra dental con cabecera):
   alli se evito el instrumental A PROPOSITO porque la pagina trataba
   del miedo al dentista, y un torno en el logo lo habria arruinado.
   Aca se respeta la misma regla —no hay torno, ni pinzas, ni jeringa—
   y lo que hay es ANATOMIA: el diente, que es del paciente y no de la
   clinica. Es la primera cabecera dental con diente del registro.

   EL FONDO — LA ESCARCHA
   Cristales lineales que se RAMIFICAN desde la esquina superior
   derecha: cada rama crece con `scaleX` desde su origen, escalonada,
   y al final todo se desvanece. Ciclo de 26s.
   DESLINDE: la flor del galvanizado de la 124 era textura ESTATICA
   de cristal metalico —estaba ahi, no crecia—. Esta es **la unica
   cristalizacion ANIMADA del registro**: lo que se ve no es un
   cristal, es el acto de cristalizar.
   DESLINDE TECNICO con la firma de la 167: alli el trazo es UNO y se
   dibuja de una pasada con stroke-dashoffset. Aca son OCHO ramas con
   `transform: scaleX` y delays distintos, porque la escarcha no se
   dibuja: se ramifica.
   Reduced-motion: escarcha fija a medio crecer.

   LA ESTRUCTURA — H (el telefono es el heroe)
   TERCERA H DEL REGISTRO, y las tres con tono distinto:
     · la 113 es H de URGENCIA NOCTURNA (linterna, fondo oscuro)
     · la 170 es H RURAL DE DIA (numero solo sobre blanco leche)
     · esta es **H CLINICA: el numero Y el protocolo en la misma
       pantalla** — a la izquierda el telefono, a la derecha las tres
       cosas que sirven mientras tanto. Es la unica H donde la
       portada ademas ENSEÑA algo.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --esmalte: #FBFCFD;
  --hielo:   #DCE9F0;
  --hielo-2: #C8DCE7;
  --frio:    #2C5A72;
  --hondo:   #16303D;
  --tinta:   #16222B;
  --gris:    #5A6870;
  --linea:   #D3E0E8;

  --display: 'Inter Tight', system-ui, sans-serif;
  --cuerpo:  'Encode Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dato:    'IBM Plex 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(--esmalte);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1rem; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--frio); outline-offset: 3px; }

/* ── la banda de propuesta ── */
.propuesta {
  background: var(--hondo); color: var(--esmalte);
  padding: .9rem clamp(1.2rem, 5vw, 4rem);
}
.propuesta__que { font-size: .8rem; margin: 0 0 .25rem; }
.propuesta__gancho { font-size: .8rem; color: #A9BFCB; 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(--esmalte);
  border-bottom: 1px solid var(--linea);
}
.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.15rem; font-weight: 700; }

/* LA MUELA — la cabecera 137ª. Corona y dos raices, sin instrumental. */
.muela {
  position: relative; display: block; flex: none;
  width: 20px; height: 14px;
  background: var(--frio);
  border-radius: 46% 46% 18% 18% / 62% 62% 22% 22%;
}
.muela::before, .muela::after {
  content: ''; position: absolute; top: 12px;
  width: 5px; height: 10px;
  background: var(--frio);
  border-radius: 0 0 60% 60%;
}
.muela::before { left: 2px; transform: rotate(6deg); }
.muela::after  { right: 2px; transform: rotate(-6deg); }

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

.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: .1em; text-transform: uppercase; color: var(--gris);
}
.cab__tel-num { display: block; font-family: var(--dato); font-size: .95rem; }

@media (max-width: 900px) {
  .cab__nav { display: none; }
  .cab__nombre { font-size: 1rem; }
  .cab__tel { margin-left: auto; }
}

/* ══════ PORTADA — H CLINICA ══════ */
.portada {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.2rem, 5vw, 4rem);
  overflow: hidden;
}
.portada__cols {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; width: 100%;
}
@media (max-width: 900px) { .portada__cols { grid-template-columns: 1fr; } }

/* LA ESCARCHA */
.escarcha {
  position: absolute; top: 0; right: 0;
  width: min(58vw, 620px); height: min(58vh, 520px);
  z-index: 1; pointer-events: none;
}
.rama {
  position: absolute; top: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(44,90,114,0), rgba(44,90,114,.34));
  transform-origin: right center;
  transform: scaleX(0);
  border-radius: 1px;
}
/* Las ramas son LARGAS a proposito: tienen que cruzar por detras de
   la caja del protocolo y asomar al otro lado, que es lo que hace
   una escarcha de verdad en un vidrio. Si se quedan cortas, la caja
   las tapa enteras y el fondo desaparece — pasó en el primer corte. */
/* LECCION CARA (medida en el DOM, no supuesta): una rama anclada con
   `right: 0` YA APUNTA HACIA LA IZQUIERDA — su extremo libre esta a
   180 grados del origen. Sumarle `rotate: 200deg` la manda a 380 =
   20 grados, o sea de vuelta hacia la DERECHA y fuera de la pantalla.
   El primer corte tenia las ocho ramas en left:1264 con el viewport
   en 1265: dibujadas, animandose y completamente invisibles.
   La rotacion que hay que escribir es la DESVIACION respecto de esa
   izquierda natural, no el angulo absoluto. */
.r1 { width: min(520px, 46vw); top: 6%;  rotate: 22deg; }
.r2 { width: min(360px, 32vw); top: 14%; rotate: 36deg; }
.r3 { width: min(430px, 38vw); top: 10%; rotate: 8deg; }
.r4 { width: min(280px, 25vw); top: 26%; rotate: 52deg; }
.r5 { width: min(330px, 29vw); top: 20%; rotate: -12deg; }
.r6 { width: min(230px, 20vw); top: 34%; rotate: 64deg; }
.r7 { width: min(260px, 23vw); top: 4%;  rotate: -26deg; }
.r8 { width: min(190px, 17vw); top: 42%; rotate: 76deg; }

/* cada rama CRECE desde su origen: la escarcha no se dibuja de una
   pasada, se ramifica. */
.js .rama { animation: cristalizar 26s ease-out infinite; }
.js .r2 { animation-delay: 1.4s; }
.js .r3 { animation-delay: 2.6s; }
.js .r4 { animation-delay: 3.9s; }
.js .r5 { animation-delay: 5.1s; }
.js .r6 { animation-delay: 6.4s; }
.js .r7 { animation-delay: 7.6s; }
.js .r8 { animation-delay: 8.8s; }
@keyframes cristalizar {
  0%        { transform: scaleX(0);   opacity: 1; }
  26%       { transform: scaleX(1);   opacity: 1; }
  72%       { transform: scaleX(1);   opacity: 1; }
  92%, 100% { transform: scaleX(1);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rama { animation: none; transform: scaleX(.55); opacity: .8; }
}

.rotulo {
  font-family: var(--dato); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--frio); margin-bottom: .8rem;
}
h1 { margin-bottom: 1.4rem; }
.tel-heroe {
  display: inline-block;
  font-family: var(--dato); font-weight: 500;
  font-size: clamp(2.2rem, 8.5vw, 6rem);
  line-height: 1; letter-spacing: -.03em;
  color: var(--tinta); text-decoration: none;
  border-bottom: .1em solid var(--hielo-2);
}
.tel-heroe:hover { color: var(--frio); border-bottom-color: var(--frio); }

.bajada { max-width: 40ch; margin-bottom: 1.8rem; }

.specs { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin: 0; }
.spec dt {
  font-family: var(--dato); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
  margin-bottom: .2rem;
}
.spec dd { margin: 0; font-family: var(--dato); font-size: 1.4rem; }

/* la columna del protocolo: es lo que hace que esta H sea distinta */
.mientras {
  background: var(--hielo);
  border-left: 4px solid var(--frio);
  padding: clamp(1.3rem, 3vw, 2rem);
}
.mientras__rot {
  font-family: var(--dato); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--frio);
  margin-bottom: .3rem;
}
.mientras h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 1rem; }
.mientras__pasos { margin: 0 0 1rem; padding-left: 1.2rem; }
.mientras__pasos li { margin-bottom: .8rem; font-size: .97rem; }
.mientras__pasos li:last-child { margin-bottom: 0; }
.mientras__pie {
  font-family: var(--dato); font-size: .76rem; color: var(--gris);
  margin: 0; border-top: 1px solid var(--hielo-2); padding-top: .7rem;
}

/* ══════ LA PIEZA FIRMA ══════ */
.urgencia {
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
  border-top: 1px solid var(--linea);
}
.urgencia__cabecera, .hora__cabecera { max-width: 54rem; margin-bottom: clamp(2rem, 5vw, 3rem); }

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

.urgencia h2, .hora h2 {
  font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.02;
  margin-bottom: 1rem;
}
.hora h2 { color: var(--esmalte); }
.entrada { max-width: 54ch; }
.hora .entrada { color: #D6E4EC; }

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

.dos {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2rem); align-items: start;
}
@media (max-width: 860px) { .dos { grid-template-columns: 1fr; } }

.caja { padding: clamp(1.3rem, 3vw, 2rem); }
/* la urgencia NO va en rojo: va en el azul mas oscuro y con mas peso.
   Misma decision que la 160 y la 166 — el semaforo asusta antes de
   explicar. */
.caja--si { background: var(--hondo); color: var(--esmalte); }
.caja--no { background: var(--hielo); color: var(--tinta); }

.caja__rot {
  font-family: var(--dato); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: .3rem;
}
.caja--si .caja__rot { color: #A9BFCB; }
.caja--no .caja__rot { color: var(--gris); }

.caja h3 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 1rem; }
.caja--si h3 { color: var(--esmalte); }
.caja ul { margin: 0; padding: 0; list-style: none; }
.caja li { padding: .75rem 0; border-top: 1px solid; font-size: .98rem; }
.caja--si li { border-top-color: #2C4A5A; }
.caja--no li { border-top-color: var(--hielo-2); }
.caja li:first-child { border-top: none; }
.caja__nota {
  margin: 1rem 0 0; font-family: var(--dato);
  font-size: .8rem; color: var(--gris);
}

.descargo {
  max-width: 64ch; margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: .86rem; color: var(--gris);
  border-left: 3px solid var(--frio); padding-left: 1rem;
}

/* ══════ HORA DE URGENCIA ══════ */
.hora {
  background: var(--hondo); color: var(--esmalte);
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem);
}
.preguntas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.pr { border-top: 2px solid #2C4A5A; padding-top: 1rem; }
.pr h3 { font-size: 1.2rem; color: var(--esmalte); margin-bottom: .5rem; }
.pr p { font-size: .96rem; color: #D6E4EC; }

/* «falta»: la pagina es mayormente CLARA, asi que el tono oscuro va
   por defecto y el claro es la excepcion, declarada para la seccion
   hondo. */
.falta {
  display: inline-block; margin: .3rem 0 0;
  font-family: var(--dato); font-size: .74rem;
  color: var(--gris); border-bottom: 1px dashed var(--gris);
}
.hora .falta { color: #A9BFCB; border-bottom-color: #A9BFCB; }

/* ══════ CIERRE — T1 ══════ */
.cierre {
  padding: clamp(4rem, 10vw, 8rem) clamp(1.2rem, 5vw, 4rem);
  text-align: center;
}
.cierre__rot {
  font-family: var(--dato); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}
.cierre__tel { font-size: clamp(2rem, 8vw, 5rem); line-height: 1; margin-bottom: 1rem; }
.cierre__tel a {
  font-family: var(--dato); font-weight: 500; text-decoration: none; color: var(--frio);
  border-bottom: 4px solid var(--hielo-2);
}
.cierre__tel a:hover { border-bottom-color: var(--frio); }
.cierre__pie { font-size: .88rem; color: var(--gris); margin: 0; }

/* ══════ PARA LA CLINICA ══════ */
.dueno {
  background: var(--hielo);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.2rem, 5vw, 4rem);
}
.dueno h2 { font-size: clamp(1.8rem, 4.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(--frio); margin-bottom: .5rem;
}
.dueno p { color: var(--tinta); 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(--hielo-2); padding-bottom: 2px;
}
.flecha:hover { border-bottom-color: var(--frio); }

/* ══════ PIE ══════ */
.pie {
  background: var(--tinta); color: #9FAFB8;
  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(--hielo); border: 1px solid var(--linea); 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(--frio);
}
.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; }
}



/* ══════ CREDITOS DE LAS IMAGENES DE RUBRO ══════
   Chico y al pie, pero presente: las CC-BY exigen credito visible, y
   ademas deja dicho en la propia pagina cuales fotos no son del
   negocio. */
.creditos {
  max-width: 78rem; margin: 0 auto;
  padding: 2rem clamp(1.2rem, 5vw, 4rem) 3rem;
  border-top: 1px solid var(--linea);
}
.creditos__que {
  font-size: .82rem; line-height: 1.6; color: var(--gris);
  margin: 0 0 .7rem; max-width: 44rem;
}
.creditos__lista {
  list-style: none; margin: 0; padding: 0;
  font-family: var(--dato); font-size: .72rem; line-height: 1.7;
  color: var(--gris);
}
.creditos__lista li::before { content: '· '; }

/* ══════════════════════════════════════════════════════════════════
   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% 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(--esmalte) 0%, var(--esmalte) 30%,
              rgba(251,252,253,.66) 46%, rgba(251,252,253,.22) 68%, rgba(251,252,253,.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(251,252,253,0) 0%, rgba(251,252,253,.30) 42%, var(--esmalte) 70%);
  }
}

/* ── 2 · AURA DE COLOR ── */
#urgencia { 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(--hielo);
  /* 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); 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(--esmalte); 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(251,252,253,.72) 0%,
              rgba(251,252,253,.84) 45%, rgba(251,252,253,.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(--frio);
}
.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(--hielo);
}
.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(--hielo);
  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); 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(--hielo); }
.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; }
}