/* ==========================================================================
   StickyWhatsAppCTA — Casa Familiar only (point 6, pre-launch pass,
   2026-08-04). Page-scoped: this file loads globally like every other
   component stylesheet, but .sticky-cta only ever exists in the DOM on the
   Casa Familiar landing (acuarela-casa-familiar/index.php calls
   acu_sticky_whatsapp_cta() nowhere else) — harmless, zero visual effect,
   on every other page.

   Show/hide logic lives in assets/js/sticky-cta.js. This file only handles
   position, the fade transition, and reserving page space — the JS toggles
   the [hidden] attribute off at init (so this transition can run at all;
   display:none can't transition) and the .sticky-cta--visible class from
   then on, plus `inert` so a faded-out bar is never focusable or announced.
   ========================================================================== */

.sticky-cta {
  position: fixed;
  /* 12-16px spec range — a single value inside it, not meant to vary by
     breakpoint (the bar is mobile-only to begin with). */
  left: 14px;
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: var(--z-dropdown);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.sticky-cta--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: opacity 180ms ease;
    transform: none;
  }
}

/* Mobile-only, per spec — same breakpoint MainNavigation switches on. */
@media (min-width: 48rem) {
  .sticky-cta {
    display: none;
  }
}

.sticky-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-target-primary);
}

/* Reserves room at the bottom of the page so the bar can never sit over the
   last paragraph, a FAQ answer, or a footer link. Present whenever this
   component exists in the DOM at all — not only while it's visually
   shown — so nothing on the page reflows as the bar fades in or out. */
@media (max-width: 47.9375rem) {
  body:has(.sticky-cta) {
    padding-bottom: calc(var(--touch-target-primary) + 24px + env(safe-area-inset-bottom));
  }
}