/* ==========================================================================
   LP-V2 · Efeito Presença — Curso Ao Vivo
   Folha não-crítica: polimento, foco/acessibilidade, micro-interações.
   A base visual está inline no <style> do index.html.
   ========================================================================== */

/* Selection */
::selection {
  background: var(--rose-pale);
  color: var(--rose-deep);
}

/* Focus visível e acessível */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Scrollbar sutil (webkit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: var(--rose-gold);
  border-radius: 999px;
  border: 2px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--rose-deep); }

/* ===== Hover refinements ===== */
.benefit-card,
.problem-card,
.num-card,
.count-box,
.price-card {
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}

.num-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.count-box:hover {
  transform: translateY(-2px);
}

/* Chips micro-hover */
.chip {
  transition: transform .2s ease, box-shadow .2s ease;
}
.chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* FAQ refinamento */
.faq details {
  transition: background .25s ease;
}
.faq details[open] {
  background: rgba(246, 220, 227, 0.18);
  padding-left: 14px;
  padding-right: 14px;
}
.faq details > summary:hover {
  color: var(--rose-deep);
}

/* Botão dentro de card de benefit "convite" */
.benefit-card .btn {
  animation: none;
  box-shadow: 0 8px 20px rgba(196, 78, 106, 0.22);
}

/* Link âncora — offset do header fixo não existe, mas reserva para sections alvo */
section[id] { scroll-margin-top: 24px; }

/* ===== Placeholder decorativo (estado sem imagem) ===== */
.img-placeholder {
  position: relative;
  isolation: isolate;
}
.img-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(201, 162, 139, 0.18), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.img-placeholder > span {
  position: relative; z-index: 1;
}

/* ===== Pricing card — brilho sutil ===== */
.price-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(246, 220, 227, 0.55), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(235, 215, 196, 0.45), transparent 45%),
    var(--ivory);
}

.price-badge {
  position: relative; overflow: hidden;
}
.price-badge::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: shine 3.8s ease-in-out 1.5s infinite;
}
@keyframes shine {
  to { transform: translateX(100%); }
}

/* ===== Live badge — borda cintilante ===== */
.live-badge {
  animation: liveBorder 3s ease-in-out infinite;
}
@keyframes liveBorder {
  0%,100% { box-shadow: 0 8px 24px rgba(229, 62, 62, 0.22); }
  50%     { box-shadow: 0 12px 32px rgba(229, 62, 62, 0.38); }
}

/* ===== Final CTA — overlay texturizado ===== */
.final-cta {
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 15% 20%, rgba(246, 220, 227, 0.25), transparent 60%),
    radial-gradient(500px 300px at 85% 80%, rgba(235, 215, 196, 0.18), transparent 55%);
  pointer-events: none;
}
.final-cta .wrap { position: relative; }

/* ===== Refinos tipográficos ===== */
h1, h2 { letter-spacing: -0.01em; }
.hero-title { letter-spacing: -0.02em; }
.label { line-height: 1; }

/* ===== Mobile fine-tuning ===== */
@media (max-width: 560px) {
  .hero { padding: 24px 0 60px; }
  .hero-grid { padding-top: 16px; gap: 32px; }
  .hero-media { max-width: 320px; }
  .section { padding: 64px 0; }
  .transformation { padding: 100px 0; }
  .final-cta { padding: 88px 0; }

  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .num-card { padding: 18px 10px; }

  .count-wrap { gap: 8px; }
  .count-box { padding: 16px 6px; }
  .count-label { font-size: 10px; letter-spacing: 1.5px; }

  .price-inner { padding: 30px 20px; }
  .price-trust { gap: 14px; font-size: 10px; }

  .faq summary { font-size: 16px; padding: 18px 0; gap: 12px; }
  .faq-body { font-size: 14px; padding-bottom: 18px; }
  .faq details[open] { padding-left: 8px; padding-right: 8px; }

  .trust-row { gap: 18px; font-size: 11px; }

  .bar { font-size: 10px; letter-spacing: 2px; padding: 9px 14px; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 30px; }
  .btn { padding: 14px 24px; font-size: 12px; }
}

/* ===== Print — ocultar elementos interativos ===== */
@media print {
  .bar, .back-top, .btn, .count-wrap { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .final-cta, .transformation { padding: 24px 0; }
}