/* Estilos que não vêm do Tailwind: base, animações e acordeões. */

/* Nenhuma página deve rolar para o lado. Navegadores de celular (principalmente
   o Safari do iPhone) às vezes deixam arrastar a página lateralmente por causa de
   elementos ampliados ou posicionados fora da tela, mesmo quando já estão cortados.
   "clip" corta sem criar área de rolagem; "hidden" é o reserva para navegadores antigos. */
html,
body {
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

body {
  font-family: "Inter", sans-serif;
  color: #0D0D0F;
  background: #ffffff;
}

::selection {
  background: #FFE600;
  color: #0D0D0F;
}

.hide-scrollbar {
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Ícones do Lucide herdam o tamanho das classes w-/h- */
svg.lucide {
  flex-shrink: 0;
}

/* ── Cards "Split" e "Link de Pagamento" da home ──
   Eles se estendem além da largura do conteúdo (até 6rem), mas só até
   16px da borda da tela, para não gerar rolagem lateral em telas médias. */
@media (min-width: 64rem) {
  .flow-bleed {
    --bleed: min(6rem, calc(16px + max(0px, (100vw - 1280px) / 2)));
    width: calc(100% + var(--bleed));
  }
  .flow-bleed-left {
    margin-left: calc(-1 * var(--bleed));
  }
  .flow-bleed-right {
    margin-right: calc(-1 * var(--bleed));
  }
}

/* ── Animações de entrada (substituem o framer-motion) ── */
@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-left {
  animation: fade-in-left 0.6s ease-out both;
}
.anim-scale-in {
  animation: scale-in 0.8s ease-out 0.2s both;
}

/* ── Acordeão (FAQ) ── */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}
.faq-panel > div {
  overflow: hidden;
}
.faq-item.open .faq-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-chevron {
  transition: transform 0.3s ease, color 0.3s ease;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  color: #0047B3;
}

@media (prefers-reduced-motion: reduce) {
  .anim-fade-left,
  .anim-scale-in {
    animation: none;
  }
  .faq-panel,
  .faq-chevron {
    transition: none;
  }
}