/* ==========================================================================
   AREA UNITED · Cifras flotantes
   Tarjetas fijas (sin esquinas redondeadas) que aparecen con un deslizamiento
   suave solo mientras se ve su sección. js/stats.js pone .is-on.
   ========================================================================== */
.facts-float {
  position: fixed;
  right: var(--gutter);
  bottom: calc(16px + var(--cookies-h, 0px) + env(safe-area-inset-bottom));
  transition: bottom 300ms var(--ease-out);
  z-index: 70;
  pointer-events: none;
}
.fact-card {
  position: absolute;
  right: 0; bottom: 0;
  width: max-content;
  max-width: min(78vw, 300px);
  padding: 14px 20px 14px 16px;
  background: var(--yellow);
  color: var(--black);
  border-right: 3px solid var(--black);
  box-shadow: 4px 4px 0 var(--yellow-dark);
  opacity: 0;
  transform: translate3d(24px, 0, 0);
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
}
.fact-card.is-on { opacity: 1; transform: none; }
.fact-value { display: flex; align-items: baseline; gap: .3em; font-size: 56px; line-height: .9; }
.fact-unit { font-size: .42em; letter-spacing: .03em; }
.fact-label { margin-top: 6px; font-size: 13px; line-height: 1.4; }

/* Móvil: las tarjetas flotantes tapan el contenido, no se muestran */
@media (max-width: 767px) {
  .facts-float { display: none; }
}
@media (min-width: 1024px) {
  .facts-float { bottom: calc(32px + var(--cookies-h, 0px)); right: 32px; }
  .fact-value { font-size: 72px; }
  .fact-label { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fact-card { transition: opacity 200ms; transform: none; }
}