/* ══════════════════════════════════════════════════════════════════
   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; }
}

/* ══════ LA FOTO EN LA PORTADA ══════
   La foto real del negocio entra por la derecha y se DISUELVE hacia el
   titular. No es un velo de color puesto encima: es la imagen misma
   perdiendo opacidad con mask-image, asi que el texto conserva el fondo
   limpio y las medidas de contraste auditadas siguen valiendo. */
.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 0 0 auto;
  width: min(57%, 45rem);
  pointer-events: none;
}
.portada__foto img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 55%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 24%, #000 60%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 24%, #000 60%, #000 100%);
}
/* El velo repite el fondo de la pagina: la foto queda de fondo, no de
   protagonista, y el titular sigue mandando. */
.portada__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
              var(--esmalte) 0%, rgba(251,252,253,.58) 32%, rgba(251,252,253,.10) 72%);
}

/* La foto ENTRA: viene desde la derecha, un poco mas grande, y asienta. */
.js .portada--foto .portada__foto { opacity: 0; transform: translateX(3rem) scale(1.04); }
.js .portada--foto.ok .portada__foto {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
/* .portada entra al observador SOLO para gatillar la foto: la seccion
   entera no debe desvanecerse (el titular tiene su propia entrada). */
.js .portada.rev,
.js .portada.rev.ok { opacity: 1; transform: none; transition: none; }

/* En celular no hay costado donde disolver: la foto pasa a ser franja
   de arriba que se deshace hacia abajo, y el texto baja. */
@media (max-width: 860px) {
  .portada--foto { padding-top: 37svh; }
  .portada__foto { inset: 0 0 auto 0; width: 100%; height: 33svh; }
  .portada__foto img {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.22) 85%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.22) 85%, transparent 100%);
  }
  .portada__foto::after {
    background: linear-gradient(180deg,
                rgba(251,252,253,.12) 0%, rgba(251,252,253,.50) 68%, var(--esmalte) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .portada--foto .portada__foto { 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; }
}