/*
  Llamada a la acción final (spec 6.6: componente reutilizable en portada e interiores)
  Dos caminos: registrarse (bloque de color) o contactar (bloque con borde).
  RN-M1-02: las llamadas llevan al registro (M2) o a Contacto.
  Con sesión, el enlace de registro lleva a Municipios (lo resuelve el front).
  Lleva [data-sticky-cta-stop]: mientras se ve, se oculta la llamada fija.

  <section class="section cta-final" data-sticky-cta-stop>
    <div class="container cta-final__layout">
      <div class="cta-final__register">…</div>
      <div class="cta-final__contact">…</div>
    </div>
  </section>
*/

.cta-final__layout {
  display: grid;
  gap: var(--gap-4);
}

.cta-final__register {
  display: grid;
  gap: var(--gap-6);
  justify-items: start;
  padding: var(--padding-10) var(--padding-6);
  border-radius: var(--border-radius-xl);
  background: var(--primary-700);
  --text: #fff;
  --text-muted: var(--primary-100);
  --focus: var(--secondary-300);
  color: var(--text);
}

.cta-final__register h2 {
  max-width: 16ch;
}

.cta-final__register p {
  color: var(--text-muted);
}

.cta-final__contact {
  display: grid;
  gap: var(--gap-4);
  align-content: center;
  padding: var(--padding-10) var(--padding-6);
  border: 1px solid var(--rule);
  border-radius: var(--border-radius-xl);
}

.cta-final__contact p {
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .cta-final__layout {
    grid-template-columns: 3fr 2fr;
  }

  .cta-final__register,
  .cta-final__contact {
    padding: var(--padding-16) var(--padding-12);
  }
}

@media (min-width: 1280px) {
  .cta-final__register {
    padding: var(--padding-20) var(--padding-16);
  }

  .cta-final__register h2 {
    font-size: var(--font-size-10);
    line-height: var(--line-height-14);
  }
}