/*
  Llamada al registro fija al hacer scroll (spec 6.6, escritorio y móvil)
  - Oculta por defecto. sticky-cta.js añade [data-visible] cuando el hero (portada) o la
    cabecera de página (interiores) sale de pantalla, y lo quita cuando se ve la
    llamada final o el pie.
  - Oculta con visibility: no se puede tabular a ella mientras no se ve.
  - Móvil: barra inferior a ancho completo. Escritorio (>= 768px): pastilla abajo a la derecha.
  - Con sesión, el enlace lleva a Municipios (lo resuelve el front).
*/

.sticky-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-sticky-cta);
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  padding: var(--padding-3) var(--gutter);
  padding-bottom: max(var(--padding-3), env(safe-area-inset-bottom));
  background: rgb(250 248 246 / 0.97);
  box-shadow: 0 -8px 24px rgb(31 26 24 / 0.10);
  visibility: hidden;
  transform: translateY(110%);
  transition:
    transform var(--duration-base) var(--easing-exit),
    visibility 0s linear var(--duration-base);
}

.sticky-cta[data-visible] {
  visibility: visible;
  transform: none;
  transition:
    transform var(--duration-slow) var(--easing-enter),
    visibility 0s;
}

.sticky-cta__text {
  flex: 1;
  font-size: var(--font-size-2);
  line-height: var(--line-height-6);
  color: var(--text-muted);
}

.sticky-cta__text strong {
  display: block;
  font-size: var(--font-size-3);
  line-height: var(--line-height-7);
  color: var(--text);
}

@media (max-width: 767px) {
  .sticky-cta__detail {
    display: none;
  }

  /* Reserva la altura de la barra al desplazarse hasta un elemento con foco (WCAG 2.4.7) */
  html {
    scroll-padding-bottom: 5.5rem;
  }
}

@media (min-width: 768px) {
  .sticky-cta {
    inset: auto var(--padding-8) var(--padding-8) auto;
    max-width: 30rem;
    padding: var(--padding-3) var(--padding-3) var(--padding-3) var(--padding-6);
    border-radius: var(--border-round);
    background: var(--gray-900);
    color: var(--gray-50);
    box-shadow: var(--shadow-lg);
    --focus: var(--secondary-300);
  }

  .sticky-cta__text {
    color: var(--gray-300);
  }

  .sticky-cta__text strong {
    color: var(--gray-50);
  }
}