/* ==========================================================================
   NapoGold — secciones.css
   El layout de cada sección, en el mismo orden que el documento.

   MÓVIL PRIMERO. Cada bloque se diseñó mirando un teléfono en vertical
   (375–430 px de ancho, con las barras del navegador visibles). Las media
   queries min-width adaptan después a tableta y escritorio sin cambiar la
   jerarquía: valor → confianza → proceso → acción.
   ========================================================================== */

/* ==========================================================================
   03. TIENES DINERO GUARDADO (el bloque del video)
   Fue la portada; ahora va después de los precios y la calculadora.
   En el móvil el texto va ANCLADO ABAJO, donde llega el pulgar, y el video
   respira en la mitad superior. No es el bloque de escritorio encogido: el
   video se montó aparte en 9:16 (assets/video/hero-movil.mp4) con la
   contadora de billetes a la altura del 40 %, justo por encima del texto.
   Las clases siguen llamándose .hero por historia: ya no es la portada.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  /* svh: la altura con las barras del navegador VISIBLES. Así el botón y
     la tarifa quedan en la primera pantalla aunque Safari o Chrome estén
     mostrando su barra de dirección, y el layout no salta cuando la barra
     se esconde al hacer scroll. */
  min-height: var(--alto-pantalla);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--linea);
  padding-top: clamp(88px, 18svh, 120px);
  padding-bottom: clamp(36px, 8svh, 56px);
}

.hero__fondo { position: absolute; inset: 0; z-index: -1; background: var(--obsidiana); }

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* En teléfonos "bajos" (SE, o cualquiera con la barra del navegador a la
     vista) el 9:16 sobra por arriba y por abajo: se prioriza la parte alta,
     que es donde está la escena. */
  object-position: 50% 28%;
}
/* El video entra por encima del póster solo cuando ya se está
   reproduciendo. El póster es su primer fotograma: el relevo no se nota. */
.hero__video {
  opacity: 0;
  transition: opacity .8s var(--ease-suave);
}
.hero__video.esta-reproduciendo { opacity: 1; }

/* Velo del móvil: claro arriba para que se vea la escena, oscuro abajo
   donde va el texto. La franja superior algo más densa hace legible la
   barra con la marca. */
.hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(8,8,10,.62) 0%,
    rgba(8,8,10,.18) 15%,
    rgba(8,8,10,.14) 32%,
    rgba(8,8,10,.62) 50%,
    rgba(8,8,10,.9) 66%,
    var(--obsidiana) 100%);
}

.hero__contenido {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(10px, 2.2svh, 14px);
}
/* Respaldo de legibilidad pegado al propio texto: si la pantalla es muy
   baja y el bloque sube hasta la zona clara del video, este degradado sube
   con él. Así el contraste no depende de adivinar la altura del teléfono. */
.hero__contenido::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0; right: 0;
  top: -96px; bottom: -40px;
  background: linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.8) 96px, rgba(8,8,10,.9) 100%);
  pointer-events: none;
}

.hero__etiqueta { color: var(--oro-claro); }
/* En teléfonos bajos el titular lo limita el alto (svh) y no una
   @media (max-height), que en el iPhone cambia al esconderse la barra de
   Safari y hacía saltar la página. Ver la nota de .panel-valor. */
.hero .display { font-size: clamp(36px, min(11vw, 7svh), 88px); }
.hero__titulo { max-width: 13ch; }
.hero__sub {
  max-width: 34ch;
  font-size: clamp(15px, 2.6svh, 17px);
  line-height: 1.5;
  color: var(--tinta-dim);
  text-wrap: pretty;
}
/* Uno encima del otro en el móvil: lado a lado, "Quiero vender mi oro" se
   partía en dos líneas. */
.hero__acciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

/* --- Tableta y escritorio -------------------------------------------------
   En horizontal manda el corte panorámico del video (hero-escritorio.mp4) y
   el texto pasa a la izquierda, centrado en vertical. */
@media (min-width: 760px) {
  .hero {
    justify-content: center;
    padding-top: calc(var(--alto-barra) + 64px);
    padding-bottom: 96px;
    min-height: min(var(--alto-pantalla), 860px);
  }
  .hero .display { font-size: clamp(40px, 11vw, 88px); }
  .hero__contenido { align-items: flex-start; gap: var(--e2); }
  .hero__contenido::before { display: none; }
  .hero__titulo { max-width: 15ch; }
  .hero__sub { font-size: 19px; max-width: 42ch; }
  .hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--e1); }
  .hero__acciones .btn { padding-inline: 28px; }
  .hero__velo {
    background:
      linear-gradient(100deg,
        rgba(8,8,10,.96) 0%, rgba(8,8,10,.9) 34%,
        rgba(8,8,10,.55) 64%, rgba(8,8,10,.4) 100%),
      linear-gradient(to top, var(--obsidiana) 1%, rgba(8,8,10,0) 40%);
  }
  .hero__poster, .hero__video { object-position: center; }
}
/* Tableta en vertical: vuelve la composición del móvil, pero con aire. */
@media (min-width: 760px) and (max-aspect-ratio: 4/5) {
  .hero { justify-content: flex-end; padding-bottom: 72px; }
  .hero__velo {
    background: linear-gradient(180deg,
      rgba(8,8,10,.55) 0%, rgba(8,8,10,.12) 22%, rgba(8,8,10,.55) 52%,
      rgba(8,8,10,.92) 70%, var(--obsidiana) 100%);
  }
  .hero__poster, .hero__video { object-position: 50% 28%; }
}

/* ==========================================================================
   01. COMPRAMOS TU ORO — PRECIOS (la portada)
   Lo primero que se ve: responde "¿cuánto me dan?" con el precio en
   grande. El padding de arriba deja sitio a la barra fija y a la zona segura
   del notch.
   ========================================================================== */
.seccion-tarifas {
  --pad-arriba: calc(var(--alto-barra) + env(safe-area-inset-top, 0px) + clamp(20px, 5vw, 96px));
  padding-top: var(--pad-arriba);
  padding-bottom: clamp(48px, 8vw, 120px);
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(168,121,43,.08), transparent 70%),
    var(--obsidiana);
}
.seccion-tarifas .cabecera-seccion { margin-bottom: 20px; gap: 12px; }
.seccion-tarifas .titulo { font-size: clamp(44px, 12.4vw, 104px); line-height: .95; }
.tarifas__titulo { max-width: 14ch; }
.tarifas__subtitulo {
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-weight: 650;
  font-size: clamp(22px, 5.6vw, 32px);
  line-height: 1.1;
  color: var(--tinta-dim);
}

/* ==========================================================================
   02. CALCULADORA DE VENTA DE ORO
   Tiene que llamar la atención: fondo con más oro que el resto, insignia de
   calculadora y titular en forma de pregunta directa.
   ========================================================================== */
.seccion-simulador {
  border-top: 1px solid var(--linea-oro);
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(168,121,43,.16), transparent 72%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(168,121,43,.08), transparent 70%),
    var(--obsidiana);
}
.insignia-calculadora {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 9px 16px 9px 12px;
  border-radius: var(--radio-pill);
  background: var(--oro-grad-suave);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-oscura);
}
.insignia-calculadora .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.simulador__titulo { font-size: clamp(40px, 11vw, 88px); line-height: .98; }

/* ==========================================================================
   04. CÓMO EVALUAMOS — el recorrido
   Una escena fija (el panel con la cuenta) y los pasos pasando por debajo.
   Es scroll normal, no scroll-jacking: nada retiene la página, solo
   position: sticky. Sin JS se ve la cuenta completa y los cuatro pasos.
   ========================================================================== */
.seccion-proceso { border-top: 1px solid var(--linea); }

/* Bloque normal en el móvil, no grid. Un elemento sticky que es hijo de un
   grid queda limitado a su propia celda según la especificación, y Safari
   la aplica al pie de la letra: en una columna, la celda del panel mide lo
   que el panel, y no podría quedarse fijo. En bloque, su límite es todo el
   recorrido en cualquier navegador. El grid solo hace falta en escritorio,
   donde panel y pasos comparten fila y la celda es alta. */
.recorrido {
  position: relative;
  display: block;
}

.recorrido__escenario {
  position: sticky;
  top: calc(var(--alto-barra) + env(safe-area-inset-top, 0px));
  z-index: 2;
  padding-top: 10px;
  padding-bottom: clamp(16px, 3.6svh, 26px);
  /* Tapa el texto de los pasos cuando sube por detrás del panel */
  background: linear-gradient(180deg, var(--obsidiana) 0%, var(--obsidiana) 82%, rgba(8,8,10,0) 100%);
}

.recorrido__pasos { position: relative; z-index: 1; }

.paso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.4svh, 10px);
  /* Cada paso ocupa algo más de media pantalla: da tiempo a leerlo
     mientras el panel cambia, sin alargar la sección de más.
     Todo lo vertical va en svh, nunca en @media (max-height): ver la nota
     de .panel-valor en componentes.css (el salto al deslizar en iPhone). */
  min-height: 50svh;
  padding-block: clamp(20px, 4svh, 28px);
  border-bottom: 1px solid var(--linea);
  transition: opacity .5s var(--ease-salida);
}
.paso:last-child { border-bottom: 0; min-height: 44svh; }
.js .recorrido .paso { opacity: .32; }
.js .recorrido .paso.esta-activo { opacity: 1; }

.paso__cabeza { display: flex; align-items: center; gap: 14px; }
.paso__num {
  font-family: var(--display);
  font-stretch: var(--ancho-cifra);
  font-weight: 800;
  font-size: clamp(40px, 7.6svh, 52px);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--oro-linea);
}
.paso.esta-activo .paso__num { color: var(--oro-claro); }
.paso__ico { width: 30px; height: 30px; color: var(--oro-claro); }
.paso .titulo-3 { font-size: clamp(23px, 3.8svh, 26px); }
.paso .texto-s { font-size: clamp(15px, 2.4svh, 16px); max-width: 40ch; }

@media (min-width: 900px) {
  .recorrido {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e7);
    align-items: start;
  }
  .recorrido__pasos { grid-column: 1; grid-row: 1; }
  .recorrido__escenario {
    grid-column: 2; grid-row: 1;
    top: calc(50svh - 170px);
    background: none;
    padding: 0;
  }
  .paso { min-height: 62svh; }
  .paso .titulo-3 { font-size: 30px; }
  .paso__num { font-size: 64px; }
  .panel-valor { padding: 26px 28px 22px; }
  .pv-fila .cifra { font-size: 30px; }
}

/* ==========================================================================
   05. LA PRUEBA — video real + lectura del espectrómetro
   ========================================================================== */
.seccion-prueba { border-top: 1px solid var(--linea); }

/* El material de origen es un reel vertical (1080x1920). En vez de recortarlo
   a formato apaisado —que destrozaria el encuadre— se presenta como panel
   vertical junto al texto. */
.video-eval {
  display: grid;
  gap: var(--e4);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .video-eval { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--e6); }
}

.video-eval__marco {
  position: relative;
  width: 100%;
  border-radius: var(--radio-l);
  overflow: hidden;
  border: 1px solid var(--linea-fuerte);
  background: #000;
  /* En el móvil casi a lo ancho, pero sin pasar de una pantalla de alto:
     un video vertical de 9:16 a 375 px ya mide 600. */
  max-width: min(100%, 340px, calc(62svh * 9 / 16));
  margin-inline: auto;
}
.video-eval__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: #000;
}

.video-eval__texto {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  max-width: 52ch;
}
.video-eval__texto .titulo-3 { margin-bottom: 2px; }
.video-eval__texto strong { font-weight: 700; }

/* --- Lectura del equipo: la composición real que marca el video --- */
.lectura {
  margin-top: var(--e5);
  padding: 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-l);
  background: var(--carbon);
}
.lectura__cabeza { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.lectura__cifra { font-size: clamp(54px, 16vw, 96px); }
.lectura__cifra small { font-size: .4em; font-weight: 600; margin-left: .15em; color: var(--tinta-dim); }

.lectura__barra {
  position: relative;
  display: flex;
  height: 46px;
  border-radius: 8px;
  overflow: visible;
  background: var(--carbon-alto);
}
.lectura__seg {
  flex: 0 0 calc(var(--p) * 1%);
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  color: var(--tinta-oscura);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-salida);
}
.lectura__seg:first-child { border-radius: 8px 0 0 8px; }
.lectura__seg:last-child  { border-radius: 0 8px 8px 0; }
.lectura__seg--au { background: var(--oro-grad-suave); }
.lectura__seg--cu { background: #B8735A; }
.lectura__seg--ag { background: #C9CCD2; }
.lectura__seg--zn { background: #7C8590; padding-left: 0; }
.js .lectura[data-revela] .lectura__seg { transform: scaleX(0); }
.js .lectura[data-revela].esta-visible .lectura__seg { transform: none; }
.js .lectura .lectura__seg--cu { transition-delay: .25s; }
.js .lectura .lectura__seg--ag { transition-delay: .4s; }
.js .lectura .lectura__seg--zn { transition-delay: .5s; }

/* La línea del 75 %: lo que debería tener una pieza de 18K */
.lectura__marca {
  position: absolute;
  top: -8px; bottom: -8px;
  left: 75%;
  width: 2px;
  background: var(--tinta);
}
.lectura__marca::after {
  content: "18K = 75 %";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tinta);
}
.lectura__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 34px;
  font-size: 13px;
  color: var(--tinta-dim);
}
.lectura__leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.lectura__leyenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.lectura__nota { margin-top: 16px; }

@media (min-width: 860px) {
  .lectura { padding: 32px; }
}

/* ==========================================================================
   07. ORO QUE YA NO USAS
   ========================================================================== */
.seccion-guardado { border-top: 1px solid var(--linea); }

.rejilla-casos {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border-block: 1px solid var(--linea);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 680px)  { .rejilla-casos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .rejilla-casos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.caso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 4px;
  background: var(--obsidiana);
  font-size: 17px;
  line-height: 1.4;
  color: var(--tinta-dim);
  transition: background-color var(--dur-base), color var(--dur-base);
}
@media (min-width: 680px) { .caso { padding: var(--e4) var(--e3); } }
.caso:hover { color: var(--tinta); }

.caso__marca {
  flex: none;
  width: 7px; height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--oro-grad-suave);
}

.guardado__cierre {
  margin-top: var(--e5);
  font-family: var(--display);
  font-stretch: var(--ancho-display);
  font-size: clamp(26px, 6.6vw, 40px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.012em;
  max-width: 22ch;
  color: var(--tinta-dim);
}
.guardado__cierre strong { color: var(--tinta); font-weight: 750; }
.guardado__accion { margin-top: var(--e4); }
@media (max-width: 559px) { .guardado__accion .btn { width: 100%; } }

/* ==========================================================================
   08. DATOS CURIOSOS DEL ORO
   En el móvil, carrusel con scroll-snap: se ve el borde de la siguiente
   tarjeta, que es la pista de que hay más. Scroll nativo, sin librería.
   ========================================================================== */
.seccion-aprende { border-top: 1px solid var(--linea); }

.rejilla-aprende {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  /* Sangra hasta los bordes de la pantalla y recupera el canal por dentro */
  margin-inline: calc(-1 * var(--margen));
  padding: 4px var(--margen) 14px;
  scrollbar-width: none;
}
.rejilla-aprende::-webkit-scrollbar { display: none; }
.rejilla-aprende:focus-visible { outline-offset: -2px; }

.nota {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  background: var(--carbon);
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  transition: border-color var(--dur-base);
}
.nota:hover { border-color: var(--linea-oro); }
.nota__pregunta { font-size: 12px; font-weight: 700; letter-spacing: var(--track-medio); text-transform: uppercase; color: var(--oro-claro); }
.nota .texto-s { font-size: 15.5px; }
.aprende__pista { margin-top: 4px; }

/* Escala de pureza dentro de la primera tarjeta */
.escala-k { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.escala-k__fila {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--tinta-dim);
}
.escala-k__fila b { font-weight: 750; color: var(--tinta); }
.escala-k__barra {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--oro-linea), var(--oro-claro)) left / calc(var(--p) * 1%) 100% no-repeat,
              var(--carbon-alto);
}
.escala-k__fila span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

@media (min-width: 760px) {
  .rejilla-aprende {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding: 0;
    gap: var(--e2);
  }
  .nota { padding: var(--e4); }
  .aprende__pista { display: none; }
}
@media (min-width: 1100px) {
  .rejilla-aprende { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   09. MÁS DE NAPOGOLD — préstamo y relojes (sede de Cali)
   ========================================================================== */
.seccion-extra { border-top: 1px solid var(--linea); }

.extra {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-top: var(--e5);
  padding: 22px 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-l);
  background: var(--carbon);
}
@media (min-width: 760px) { .extra { padding: 40px; } }
.extra__items {
  display: grid;
  gap: var(--e3);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 680px) { .extra__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.extra__item { display: flex; gap: 14px; align-items: flex-start; }
.extra__item .ico { color: var(--oro-claro); flex: none; margin-top: 2px; }
.extra__item .titulo-3 { margin-bottom: 4px; }

/* ==========================================================================
   10. SEDES
   ========================================================================== */
.seccion-sedes { border-top: 1px solid var(--linea); }
/* Las tarjetas de tienda (con su foto) están en componentes.css */

/* ==========================================================================
   11–12. CONTACTO Y CIERRE
   ========================================================================== */
.seccion-cierre {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--linea);
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(61,164,127,.10), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168,121,43,.10), transparent 70%),
    var(--obsidiana);
}
.cierre {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.cierre__titulo { max-width: 12ch; font-size: clamp(44px, 12.4vw, 104px); }
.cierre__sub { max-width: 44ch; }
.cierre__acciones {
  display: grid;
  gap: 10px;
  margin-top: var(--e1);
}
@media (min-width: 560px) {
  .cierre__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
}

.contacto {
  display: grid;
  gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
}
.contacto__wa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: start;
}
.contacto__numero {
  font-size: clamp(36px, 10vw, 60px);
  color: var(--tinta);
  transition: color var(--dur-rapida);
}
.contacto__wa:hover .contacto__numero { color: var(--jade-claro); }

@media (min-width: 900px) {
  .contacto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: end; }
}

/* ==========================================================================
   MOVIMIENTO LIGADO AL SCROLL — mejora progresiva
   Animaciones CSS con animation-timeline (Chrome/Edge, Safari 26+). Corren
   fuera del hilo principal y, si el navegador no las soporta, simplemente no
   pasan: el contenido está en su estado final desde el principio. Nunca
   retienen el scroll.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* El bloque del video ya no es la portada: entra y sale de pantalla.
       El fondo llega algo ampliado, se asienta, y al irse crece y se
       apaga. Capas a distinta velocidad = profundidad, sin JS. */
    .hero__fondo {
      animation: hero-fondo linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes hero-fondo {
      0%   { transform: scale(1.12) translateY(-6%); }
      45%  { transform: none; }
      100% { transform: scale(1.08) translateY(8%); filter: brightness(.6); }
    }
    .hero__contenido {
      animation: hero-texto linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
    @keyframes hero-texto {
      to { transform: translateY(-12%); opacity: .15; }
    }

    /* La tarifa de referencia llega desde algo más pequeña: la cifra
       "aterriza" cuando entra en pantalla. */
    .tarifa--destacada .tarifa__valor {
      transform-origin: left bottom;
      animation: cifra-llega linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
    @keyframes cifra-llega {
      from { transform: scale(.86); opacity: .35; }
      to   { transform: none; opacity: 1; }
    }

    /* El titular final crece hacia su tamaño al acercarse */
    .cierre__titulo {
      transform-origin: left bottom;
      animation: cierre-crece linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    @keyframes cierre-crece {
      from { transform: scale(.9); opacity: .4; }
      to   { transform: none; opacity: 1; }
    }
  }
}