/* =====================================================================
   Eterna Canção — global.css
   Tokens de design + utilitários + componentes compartilhados.
   Carregado no <head> das 3 páginas (index, create, checkout).
   CONSTITUIÇÃO (Princípio V): NENHUM valor de cor hex fora do :root abaixo.
   ===================================================================== */

/* Fontes — Playfair Display (títulos) + Inter (corpo/UI).
   No <head> de cada página há <link rel="preconnect"> para acelerar. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ---------------------------------------------------------------------
   DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Marca / terracota */
  --terracota: #C4887A;
  --terracota-escuro: #B87868;

  /* Neutros / fundo */
  --creme: #FDF8F5;
  --dark: #0D0D0D;
  --texto-escuro: #1A1A1A;
  --cinza-medio: #6B7280;
  --cinza-claro: #9CA3AF;
  --cinza-suave: #8C8C8C;
  --borda: #E8E0DC;
  --branco: #FFFFFF;
  --pill-concluido: #F0EDED;   /* pill de etapa concluída (wizard) */

  /* Dourado (estrelas de avaliação) */
  --dourado: #F5B301;

  /* Verde (sucesso / CTA de conversão) */
  --verde: #22C55E;
  --verde-fundo: #F0FFF4;

  /* Express (amarelo) */
  --amarelo-express: #FEF3C7;
  --amarelo-texto: #92400E;

  /* VIP (roxo) */
  --roxo-vip: #7C3AED;
  --lilas: #EDE9FE;

  /* Rosas (seleção / hero / banner) */
  --rosa-selecao: #F9EEEA;
  --rosa-hero: #F5E8E3;
  --rosa-banner: #F5EAE6;

  /* Badges de upsell (fundo / texto) */
  --badge-streaming-bg: #D1FAE5;      /* Música no Spotify (streaming) */
  --badge-streaming-texto: #065F46;
  --badge-outra-bg: #FEE2E2;          /* Dupla Emoção (outra pessoa) */
  --badge-outra-texto: #991B1B;
  --badge-mesma-bg: #DBEAFE;          /* Experiência de Presente (mesma pessoa) */
  --badge-mesma-texto: #1E40AF;
  --badge-emocionante-bg: #FEF3C7;    /* Estilo Musical Extra (mais emocionante) */
  --badge-emocionante-texto: #92400E;
  --badge-emoldurar-bg: #EDE9FE;      /* Letra para Emoldurar */
  --badge-emoldurar-texto: #5B21B6;

  /* Overlay e sombra do popup de captura (create.html) */
  --overlay: rgba(13, 13, 13, 0.55);
  --sombra-popup: 0 20px 60px rgba(13, 13, 13, 0.22);

  /* Tipografia */
  --fonte-serif: 'Playfair Display', Georgia, serif;
  --fonte-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------------
   RESET BÁSICO
   --------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fonte-sans);
  background: var(--creme);
  color: var(--texto-escuro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------------------------------------------------------------------
   TIPOGRAFIA UTILITÁRIA
   --------------------------------------------------------------------- */
.serif { font-family: var(--fonte-serif); }

/* ---------------------------------------------------------------------
   CONTAINER
   --------------------------------------------------------------------- */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------------
   BOTÕES (pill) — hover: scale(1.02) + opacity .92, transition .2s
   --------------------------------------------------------------------- */
.btn-terracota, .btn-dark, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fonte-sans); font-size: 1rem; font-weight: 600;
  padding: 16px 32px; border: none; border-radius: 999px; cursor: pointer;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.btn-terracota { background: var(--terracota); color: var(--branco); }
.btn-terracota:hover { transform: scale(1.02); opacity: .92; }

.btn-dark { background: var(--dark); color: var(--branco); }
.btn-dark:hover { transform: scale(1.02); opacity: .92; }

.btn-outline { background: transparent; color: var(--cinza-medio); border: 1.5px solid var(--cinza-claro); }
.btn-outline:hover { transform: scale(1.02); opacity: .92; border-color: var(--cinza-medio); }

/* ---------------------------------------------------------------------
   DIVISOR DECORATIVO
   Linha fina (--borda) com ♡ central terracota; linhas via ::before/::after.
   Uso: <div class="divider">♡</div>
   --------------------------------------------------------------------- */
.divider {
  display: flex; align-items: center; justify-content: center;
  max-width: 340px; margin: 48px auto;
  color: var(--terracota); font-size: 1.1rem; line-height: 1;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.divider::before { margin-right: 14px; }
.divider::after  { margin-left: 14px; }

/* ---------------------------------------------------------------------
   REVEAL NO SCROLL (JS adiciona .visible via IntersectionObserver)
   --------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(30px); }
.reveal.visible { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }

/* ---------------------------------------------------------------------
   KEYFRAMES GLOBAIS (marquee e equalizador usados nas páginas)
   --------------------------------------------------------------------- */
@keyframes mq-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes mq-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }
@keyframes eq       { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* ---------------------------------------------------------------------
   BREAKPOINT MOBILE
   Ajustes específicos de página serão adicionados conforme a construção.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
}