/* =========================================================
   LANDING ENHANCEMENTS — BIA 2026.2
   Camada ADITIVA por cima de landing.css.
   Regra de ouro: nenhum seletor aqui deve remover comportamento
   do arquivo original — só refinar visual, adicionar profundidade,
   movimento sutil e consistência com tokens.css.
   Se algo parecer quebrado em produção, basta remover esta tag
   <link> no HTML que o site volta ao estado anterior.
   ========================================================= */

/* ---------- Tipografia premium (Inter Variable via Google Fonts) ---------- */
/* Carregada via <link rel="preload"> no index.html pra evitar FOUT.     */
html{
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero-title,
.plan-title,
.plan-val,
.pricing-head h2,
.how-title,
.free-preview__head h2{
  font-variation-settings: "wght" 820, "opsz" 32;
  letter-spacing: -0.01em;
}

/* ---------- HERO: título com shimmer sutil (dura 8s, só 1 ciclo por carga) ---------- */
.hero-title{
  background: linear-gradient(90deg, #2ee59d 0%, #fff 42%, #38bdf8 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: bia-hero-shimmer 8s var(--ease-smooth, ease-out) 1 both;
  animation-play-state: running;
  animation-delay: 200ms;
}
@keyframes bia-hero-shimmer{
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-title{ animation: none; background-position: 0 50%; }
}

/* ---------- CTA principal: halo pulsante discreto + easing refinado ---------- */
.btn-primary,
.plan-btn--primary,
.bia-offer__cta{
  position: relative;
  background: var(--accent-grad, linear-gradient(135deg,#2ee59d,#38bdf8));
  box-shadow: var(--elev-2, 0 12px 24px rgba(47,209,255,.22));
  transition:
    transform var(--dur-fast, 120ms) var(--ease-out),
    box-shadow var(--dur-med, 260ms) var(--ease-out),
    filter var(--dur-fast, 120ms) var(--ease-out);
}
.btn-primary::before,
.plan-btn--primary::before,
.bia-offer__cta::before{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--accent-grad, linear-gradient(135deg,#2ee59d,#38bdf8));
  filter: blur(10px);
  opacity: .0;
  z-index: -1;
  transition: opacity var(--dur-med, 260ms) var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover,
.plan-btn--primary:hover,
.bia-offer__cta:hover{
  transform: translateY(-1px);
  box-shadow: var(--elev-3, 0 10px 28px rgba(0,0,0,.45)), var(--accent-glow, 0 0 24px rgba(56,189,248,.25));
  filter: brightness(1.04);
}
.btn-primary:hover::before,
.plan-btn--primary:hover::before,
.bia-offer__cta:hover::before{
  opacity: .55;
}
.btn-primary:active,
.plan-btn--primary:active,
.bia-offer__cta:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* ---------- Estado de loading dos botões de checkout ---------- */
.plan-btn.is-loading,
.btn-primary.is-loading,
.bia-offer__cta.is-loading{
  pointer-events: none;
  color: transparent !important;
}
.plan-btn.is-loading::after,
.btn-primary.is-loading::after,
.bia-offer__cta.is-loading::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(4, 16, 22, .35);
  border-top-color: #041016;
  animation: bia-spin .7s linear infinite;
  transform: translateX(0);
  background: transparent;
}
.plan-btn--ghost.is-loading::after{
  border-color: rgba(255,255,255,.25);
  border-top-color: #d7efff;
}
@keyframes bia-spin{ to{ transform: rotate(360deg);} }

/* ---------- Cards: glassmorphism + borda gradiente no hover ---------- */
/* aplicado a feature/free/plan/how — são os cards da landing */
.feature-card,
.free-card,
.how-step,
.plan-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) ,
    var(--glass-bg, rgba(10,18,28,.55));
  backdrop-filter: var(--glass-blur, saturate(140%) blur(14px));
  -webkit-backdrop-filter: var(--glass-blur, saturate(140%) blur(14px));
  transition:
    transform var(--dur-fast, 120ms) var(--ease-out),
    border-color var(--dur-med, 260ms) var(--ease-out),
    box-shadow var(--dur-med, 260ms) var(--ease-out);
}
.feature-card:hover,
.free-card:hover,
.how-step:hover,
.plan-card:hover{
  border-color: rgba(56,189,248,.35);
  box-shadow: var(--elev-3, 0 14px 30px rgba(0,0,0,.55)), 0 0 0 1px rgba(56,189,248,.12);
}

/* Ícones das features com fundo circular em gradiente suave */
.feature-card h3 .feature-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-grad-soft, rgba(56,189,248,.16));
  border: 1px solid rgba(56,189,248,.22);
  font-size: .95rem;
}

/* Numeração "01/02/03" do "Como funciona" com gradiente da marca */
.how-num{
  background: var(--accent-grad, linear-gradient(135deg,#2ee59d,#38bdf8));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  font-weight: 950;
  font-size: .78rem;
}

/* Números do "social proof" tomam o gradiente unificado */
.sp-number{
  background: var(--accent-grad, linear-gradient(90deg,#2ee59d,#38bdf8));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- Pricing: card destacado mais "holográfico" ---------- */
.plan--featured{
  background:
    radial-gradient(700px 220px at 50% 0, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(400px 160px at 50% 100%, rgba(46,229,157,.12), transparent 60%),
    var(--glass-bg-strong, rgba(10,18,28,.72));
}
.plan--featured .plan-chip{
  background: var(--accent-grad-soft, rgba(56,189,248,.16));
  border-color: rgba(56,189,248,.35);
  color: #eaf6ff;
}

/* ---------- Tabela comparativa de planos ---------- */
.plan-compare{
  margin: 18px auto 0;
  width: 100%;
  max-width: 720px;
  padding: 14px 18px;
  background: var(--glass-bg, rgba(10,18,28,.55));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border, 1px solid rgba(255,255,255,.08));
  border-radius: 14px;
  box-shadow: var(--elev-2);
}
.plan-compare__title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: .88rem;
  font-weight: 800;
  color: #d7efff;
  letter-spacing: .02em;
}
.plan-compare__title::before{
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: var(--accent-glow);
}
.plan-compare ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px 18px;
}
.plan-compare li{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: #bfefff;
  line-height: 1.4;
}
.plan-compare li::before{
  content: "✓";
  color: #2ee59d;
  font-weight: 900;
  font-size: .88rem;
  flex-shrink: 0;
}
@media (max-width: 560px){
  .plan-compare ul{ grid-template-columns: minmax(0,1fr); }
}

/* ---------- Modal "bia-offer" — entrada suave ---------- */
.bia-offer{
  animation: bia-offer-in .32s var(--ease-out) both;
}
.bia-offer__card{
  animation: bia-offer-card-in .42s var(--ease-out) both;
}
@keyframes bia-offer-in{
  from{ opacity: 0; }
  to  { opacity: 1; }
}
@keyframes bia-offer-card-in{
  from{ opacity: 0; transform: translateY(12px) scale(.98); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .bia-offer, .bia-offer__card{ animation: none; }
}

/* ---------- Navbar: acessibilidade + micro-destaque ---------- */
body.page--index .shell-cta:focus-visible,
body.page--index .shell-link:focus-visible{
  outline: 2px solid #38bdf8;
  outline-offset: 3px;
  border-radius: 999px;
}
body.page--index .logo-dot{
  background: var(--accent-grad);
}

/* ---------- Scroll reveal (só decora, não quebra se JS não rodar) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow, 520ms) var(--ease-out),
    transform var(--dur-slow, 520ms) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ---------- Contagem regressiva (se usada) ---------- */
.bia-countdown{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #eaf6ff;
  letter-spacing: .02em;
}
.bia-countdown__unit{
  font-size: .74rem;
  color: #9bb5cc;
  margin-right: 4px;
  font-weight: 600;
}