El CTA banner: el cierre que pide una sola cosa y la pide bien

/* MÓVIL · STACK A UNA COLUMNA + BOTONES FULL-WIDTH
   El componente ya es mobile-first progresivo:
   - default (≥901px):   inner row, heading|botones side-by-side
   - tablet (≤900px):    inner column, text-align:center
   - móvil  (≤560px):    btns flex-direction:column, cada .cta-btn full-width

   En el teléfono, cada botón pasa a ancho 100% para garantizar
   superficie tappable cómoda y para que el ojo no tenga que elegir
   horizontalmente entre dos opciones del mismo peso. Cero JS,
   solo media queries del componente. */

@media (max-width: 900px) {
  .cta-banner__inner {
    flex-direction: column;
    text-align: center;
  }
  .cta-banner__actions { align-items: center; }
  .cta-banner__btns    { justify-content: center; }
  .cta-banner__desc    { max-width: 100%; }
}

@media (max-width: 560px) {
  .cta-banner       { padding: 3.5rem 0; }
  .cta-banner__btns { flex-direction: column; width: 100%; }
  .cta-btn          { justify-content: center; width: 100%; min-height: 48px; }
}

/* MÓVIL · TOUCH TARGET ≥44×44 PX EN LOS BOTONES (WCAG SC 2.5.5)
   Los botones del banner llevan padding .8125rem 1.625rem,
   font-size .9375rem y display:inline-flex con gap. El cálculo:
   padding-vertical 13px*2 + line-height ~22px = ~48px de altura.
   En móvil reforzamos con min-height: 48px literal para que la
   superficie tappable no dependa del cálculo de padding (que
   puede variar si la marca usa una font con altura distinta).

   Apple HIG: 44pt = 44 CSS px en iOS. WCAG 2.2 SC 2.5.5 AA
   enhanced: 44×44 px de superficie de toque mínima. Cumplir
   esto baja errores de tap en 20-30% (Material Design 3 study). */

@media (max-width: 1024px) {
  .cta-btn {
    min-height: 48px;     /* > 44 px de margen */
    padding: .9em 1.4em;  /* superficie generosa */
  }

  /* Realce táctil al tap (visual feedback al tocar). */
  .cta-btn {
    -webkit-tap-highlight-color: rgba(255, 255, 255, .15);
  }
  .cta-banner--light .cta-btn {
    -webkit-tap-highlight-color: rgba(196, 30, 36, .12);
  }
}

/* MÓVIL · STICKY BOTTOM-BAR (EXTENSIÓN del componente)
   La variante 6 de la galería. En móvil, el banner se ancla al
   borde inferior del viewport con position:fixed, respeta
   safe-area-inset-bottom (notch + home-bar de iOS), y deja
   el botón primario full-width para que el pulgar lo alcance
   sin moverse de la zona natural.

   Cuidado: rompe la lectura del scroll porque ocupa
   permanentemente el borde inferior. Usar SOLO en landings
   dedicadas a UNA conversión (campañas pagas), nunca en
   páginas de catálogo o blog donde el visitante explora. */

@media (max-width: 768px) {
  .cta-banner[data-sticky="mobile"] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--sp-4) var(--sp-3);
    /* Safe-area iOS — respeta notch + home indicator */
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
    z-index: 40;        /* sobre el flotante de WhatsApp */
  }

  .cta-banner[data-sticky="mobile"] .cta-banner__heading,
  .cta-banner[data-sticky="mobile"] .cta-banner__desc,
  .cta-banner[data-sticky="mobile"] .cta-banner__badge {
    display: none;     /* en sticky solo se ve el botón primario */
  }

  .cta-banner[data-sticky="mobile"] .cta-btn { width: 100%; }
}

/* TODOS los formatos · FOCO VISIBLE + REDUCED-MOTION + FORCED-COLORS
   Tres reglas de accesibilidad que el componente cumple por default
   y NO se deben desactivar:

   1. :focus-visible — outline visible cuando el usuario navega
      por teclado (Tab), invisible cuando clica con mouse. Es la
      diferencia entre dejar un anillo permanente molesto y dejar
      al usuario de teclado huérfano. NUNCA outline:none sin
      reemplazo.

   2. prefers-reduced-motion — respeta la preferencia del SO.
      Para alguien con vestíbulo sensible, una animación brusca
      del banner al aparecer puede causar náusea. La regla: si
      animas, gatea con @media (prefers-reduced-motion: no-preference).

   3. forced-colors — modo alto contraste de Windows. El usuario
      fuerza la paleta del SO y el botón debe seguir siendo
      distinguible. forced-color-adjust: auto deja que el SO
      tome el control de los colores; el outline en focus
      sigue dibujándose porque viene de un currentColor o
      ButtonText nativo. */

/* 1 · Foco visible AA — ya en el componente */
.cta-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.cta-banner--light .cta-btn:focus-visible {
  outline-color: var(--color-red, #C41E24);
}

/* 2 · Reduced motion — gatea cualquier animación añadida */
@media (prefers-reduced-motion: no-preference) {
  .cta-banner {
    animation: cta-fade-in .4s ease-out;
  }
}
@keyframes cta-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3 · Forced colors — Windows alto contraste */
@media (forced-colors: active) {
  .cta-btn {
    forced-color-adjust: auto;
    border: 1px solid ButtonText;
  }
  .cta-btn:focus-visible {
    outline: 2px solid Highlight;
  }
}