/* ============================================
   Components: Buttons, Cards, etc
   ============================================ */

/* CTA Buttons */
.cta-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  /* .header-sticky (its ancestor) is pointer-events:none so its empty
     transparent space doesn't block clicks below it — re-enable here so
     the button itself stays clickable. */
  pointer-events: auto;

  background-color: rgba(255, 255, 255, 0.96);
  border: 1px solid #ffffff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-glass);

  color: var(--color-text-primary);
  white-space: nowrap;

  cursor: pointer;
  transition: background-color var(--transition-base);
}

.cta-button:hover {
  background-color: #ffffff;
}

.cta-button:active {
  background-color: rgba(255, 255, 255, 0.96);
}

.cta-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cta-button .icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  color: var(--color-text-primary);
}

/* Apple-style liquid glass buttons: Share, WhatsApp, Scroll-to-top */
.cta-share,
.cta-whatsapp,
.scroll-to-top-btn,
.hero-scroll-btn,
.pin-overlay-close,
.pin-overlay-nav,
.pin-overlay-bullet,
.lightbox-close,
.lightbox-nav {
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -6px 10px rgba(255, 255, 255, 0.15);

  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-base);
}

.cta-share::before,
.cta-whatsapp::before,
.scroll-to-top-btn::before,
.hero-scroll-btn::before,
.pin-overlay-close::before,
.pin-overlay-nav::before,
.pin-overlay-bullet::before,
.lightbox-close::before,
.lightbox-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.35) 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cta-share svg,
.cta-whatsapp svg,
.cta-whatsapp-text,
.scroll-to-top-btn svg,
.hero-scroll-btn svg,
.pin-overlay-close svg,
.pin-overlay-nav svg,
.lightbox-close svg,
.lightbox-nav svg {
  position: relative;
  z-index: 1;
}

.cta-share:hover,
.cta-whatsapp:hover,
.scroll-to-top-btn:hover,
.hero-scroll-btn:hover,
.pin-overlay-close:hover,
.pin-overlay-nav:hover,
.pin-overlay-bullet:hover,
.lightbox-close:hover,
.lightbox-nav:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.45) 100%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -6px 10px rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.cta-share:active,
.cta-whatsapp:active,
.scroll-to-top-btn:active,
.hero-scroll-btn:active,
.pin-overlay-close:active,
.pin-overlay-nav:active,
.pin-overlay-bullet:active,
.lightbox-close:active,
.lightbox-nav:active {
  transform: translateY(0) scale(0.96);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cta-share,
  .cta-whatsapp,
  .scroll-to-top-btn,
  .hero-scroll-btn,
  .pin-overlay-close,
  .pin-overlay-nav,
  .pin-overlay-bullet,
    .lightbox-close,
  .lightbox-nav {
    background: rgba(255, 255, 255, 0.96);
  }
}

.cta-share {
  width: 48px;
  height: 48px;
}

/* WhatsApp CTA: icon + two-line label */
.cta-whatsapp {
  width: 238px;
  height: 71px;
  padding: var(--space-16);
}

.cta-whatsapp-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  white-space: nowrap;
}

.cta-whatsapp-title {
  font-family: var(--font-arimo);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-forest);
  line-height: normal;
}

.cta-whatsapp-subtitle {
  font-family: var(--font-arimo);
  font-size: var(--font-size-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24px;
  color: var(--color-primary);
  line-height: normal;
}

.cta-tooltip {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: 50%;
  transform: translateX(-50%);

  background-color: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-arimo);
  font-size: var(--font-size-14);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

/* Tooltip lives as a sibling of its trigger button (not a child) so the
   button's own overflow:hidden — needed for the liquid-glass sheen — never
   clips it. The nearest positioned ancestor anchors it instead. */
.cta-tooltip-anchor {
  position: relative;
}

.cta-share:hover ~ .cta-tooltip,
.cta-share:focus-visible ~ .cta-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Tooltip above the trigger instead of below (scroll-to-top sits at the
   bottom of the viewport — a tooltip below it would run off-screen) */
.cta-tooltip--top {
  top: auto;
  bottom: calc(100% + var(--space-8));
}

.scroll-to-top-btn:hover ~ .cta-tooltip,
.scroll-to-top-btn:focus-visible ~ .cta-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Scroll to Top Button — position:fixed, but .section-contact-cta sets
   its own transform, making it the containing block for this fixed
   element instead of the viewport. So it behaves like a classic
   fixed corner button, just scoped to that section — no JS needed. */
.scroll-to-top-wrap {
  position: fixed;
  bottom: var(--space-32);
  right: var(--space-32);
  z-index: var(--z-sticky);
}

.scroll-to-top-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  cursor: pointer;
}

.scroll-to-top-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.scroll-to-top-btn .icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Icons */
.icon {
  display: inline-block;
  flex-shrink: 0;
  fill: currentColor;
  stroke: currentColor;
}

.icon-share {
  width: 24px;
  height: 24px;
}

.icon-whatsapp {
  width: 24px;
  height: 24px;
}

.icon-arrow-up {
  width: 20px;
  height: 20px;
}

/* Section Label */
.section-label {
  display: block;
  font-family: var(--font-arimo);
  font-size: var(--font-size-14);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  line-height: 1.4;
}