/* ============================================================
   Michela Vasconcellos — Design System (base)
   Paleta: Elegante Feminino
   Reaproveitado por: index.html (bio), quiz.html, vendas.html
   ============================================================ */

:root {
  /* Cores principais */
  --plum:        #4E2540;   /* vinho profundo (texto/títulos/btn primário) */
  --plum-soft:   #6E3A5E;   /* vinho mais claro */
  --rose:        #C98B92;   /* rosé / nude (acento) */
  --rose-soft:   #E7C9CC;   /* rosé claro (fundos suaves) */
  --cream:       #FBF6F1;   /* creme (fundo) */
  --cream-deep:  #F3E9E1;   /* creme com mais saturação */
  --gold:        #BF9B5A;   /* dourado (detalhes, linhas) */
  --ink:         #3A2330;   /* texto corpo */
  --ink-soft:    #6B5560;   /* texto secundário */
  --white:       #FFFFFF;

  /* Tipografia */
  --font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:  "Poppins", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espaçamento / formas */
  --radius:      18px;
  --radius-pill: 999px;
  --shadow:      0 10px 30px rgba(78, 37, 64, 0.12);
  --shadow-soft: 0 4px 14px rgba(78, 37, 64, 0.08);
  --maxw:        440px;   /* largura mobile-first (bio/quiz) */
  --maxw-wide:   960px;   /* largura LP de vendas */
  --transition:  .25s ease;

  /* Glass / efeitos */
  --glass-bg:    rgba(255, 255, 255, 0.55);
  --glass-brd:   rgba(255, 255, 255, 0.7);
  --blur:        14px;
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3 { font-family: var(--font-title); font-weight: 600; line-height: 1.15; color: var(--plum); }

/* ---------- Componentes reutilizáveis ---------- */

/* Botão pílula (link na bio + CTAs) */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 22px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .2px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  text-align: center;
}
.btn:active { transform: scale(.98); }

.btn--primary {
  background: var(--plum);
  color: var(--cream);
  box-shadow: var(--shadow-soft);
}
.btn--primary:hover { background: var(--plum-soft); box-shadow: var(--shadow); }

.btn--ghost {
  background: var(--white);
  color: var(--plum);
  border: 1.5px solid var(--rose-soft);
  box-shadow: var(--shadow-soft);
}
.btn--ghost:hover { border-color: var(--rose); }

.btn--gold {
  background: linear-gradient(135deg, var(--gold), #d8b873);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}

/* Detalhe: linha dourada decorativa */
.divider {
  width: 56px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin: 14px auto;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Efeitos visuais reutilizáveis ---------- */

/* Botão glass (vidro fosco) */
.btn--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-brd);
  color: var(--plum);
  box-shadow: var(--shadow-soft);
}
.btn--glass:hover { background: rgba(255,255,255,.75); box-shadow: var(--shadow); }

/* Brilho que desliza no hover dos botões */
.btn--shine { position: relative; overflow: hidden; }
.btn--shine::before {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.btn--shine:hover::before { left: 130%; }

/* Orbs de cor desfocados (profundidade no fundo) */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  z-index: -2;
  pointer-events: none;
  animation: float 14s ease-in-out infinite;
}
.orb--rose { width: 320px; height: 320px; background: var(--rose); top: -80px; right: -100px; }
.orb--plum { width: 280px; height: 280px; background: var(--plum-soft); bottom: -90px; left: -110px; animation-delay: -7s; }
.orb--gold { width: 180px; height: 180px; background: var(--gold); top: 45%; left: -90px; opacity: .25; animation-delay: -4s; }

@keyframes float {
  0%,100% { transform: translateY(0) translateX(0); }
  50%     { transform: translateY(-26px) translateX(14px); }
}

/* Textura de grão sutil (data-uri SVG) */
.grain::after {
  content: "";
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Animações de entrada (revelar com stagger via --d) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

.reveal { opacity: 0; animation: fadeUp .7s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--d, 0s); }
.reveal-scale { opacity: 0; animation: scaleIn .8s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { animation: fadeIn .01s forwards; opacity: 1; }
  .orb { animation: none; }
}

/* ---------- Scroll reveal (ativa só com JS; sem JS = conteúdo visível) ---------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js-reveal [data-reveal="scale"] { transform: scale(.95); }
.js-reveal [data-reveal="left"]  { transform: translateX(-30px); }
.js-reveal [data-reveal="right"] { transform: translateX(30px); }
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}