/* ============================================================
   Havana — estilos customizados (tema dark)
   ============================================================ */

/* Reset suave de scrollbar para tema dark */
html { background: #0c0604; }
::selection { background: #f59e0b; color: #0c0604; }

/* Webkit scrollbar dourada sutil */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c0604; }
::-webkit-scrollbar-thumb { background: #2a190d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a85b08; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Foco visível em elementos interativos (tema dark) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 3px;
  border-radius: 6px;
}

/* FAQ — anima a abertura do <details> */
details > summary { transition: background-color .2s ease; }
details[open] > summary { background-color: rgba(245, 158, 11, .04); }
details > summary::-webkit-details-marker { display: none; }
details[open] > div { animation: faqSlide .25s ease-out; }
@keyframes faqSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sticky CTA mobile */
#sticky-cta.is-visible { transform: translateY(0); }

/* Reduz animações para usuários que pedem isso */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Padding-bottom no body em mobile para o sticky CTA não cobrir conteúdo */
@media (max-width: 767px) {
  body { padding-bottom: 80px; }
}

/* Print — esconde elementos não essenciais */
@media print {
  #sticky-cta, header, footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* Brilho sutil ao passar o mouse nos cards */
.bg-card-grad { transition: border-color .3s ease, transform .3s ease; }
.bg-card-grad:hover { border-color: rgba(245, 158, 11, .25); }

/* Pulse soft custom (caso Tailwind não cubra) */
@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ===========================================================
   "PAGUE SÓ NA ENTREGA" — TAG/LABEL informativo (NÃO botão)
   Estilo: texto esmeralda em fundo translúcido suave, sem
   sombra de elevação e sem animação de hover/scale.
   Inclui cursor: default para sinalizar não-clicável.
   =========================================================== */
.pague-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background-color: rgba(16, 185, 129, .10);
  color: #34d399;
  border: 1px dashed rgba(52, 211, 153, .45);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .35rem .85rem;
  border-radius: 6px;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.pague-badge--sm { font-size: 10px; padding: .22rem .6rem; letter-spacing: .1em; }
.pague-badge--md { font-size: 11px; }
.pague-badge--lg { font-size: 12px; padding: .45rem 1rem; }

/* Banner topo da página — mantém destaque mas plano (sem
   gradiente animado nem aparência de botão) */
.pague-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-color: #047857;
  border-top: 1px solid rgba(52, 211, 153, .25);
  border-bottom: 1px solid rgba(52, 211, 153, .25);
  color: #ecfdf5;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  padding: .55rem 1rem;
  text-align: center;
  cursor: default;
}