/* ODDSEE — Desafio "O Despertar da Sua Essência Emocional"
   Casa da Mente / Marcos Silveira
   Sistema de design compartilhado. Mobile-first. Público feminino 30-55.
   Estética: acolhimento terapêutico, ritmo lento, quente e sóbrio.
   NADA de countdown/escassez nas telas do trilho experiencial. */

:root {
  /* Cores — casa da mente, quente e sóbrio */
  --ink:        #16130F;   /* near-black quente (fundo trilho) */
  --panel:      #1E1A15;   /* painel escuro */
  --panel-2:    #262019;
  --cream:      #F4EFE7;   /* fundo claro */
  --cream-2:    #EAE3D6;
  --text-dark:  #2A241C;   /* texto sobre claro */
  --text-soft:  #5A5045;   /* texto secundário sobre claro */
  --text-light: #ECE5D8;   /* texto sobre escuro */
  --text-mute:  #A99C88;   /* texto secundário sobre escuro */
  --brass:      #C69A5B;   /* acento principal (CTA) */
  --brass-deep: #A97D3E;
  --terra:      #B4674A;   /* secundário, uso raro */
  --line:       rgba(198,154,91,0.22);
  --line-dark:  rgba(0,0,0,0.10);

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --num:   "Space Grotesk", var(--sans);

  --maxw: 640px;
  --pad: clamp(20px, 6vw, 40px);
  --radius: 16px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-light);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Tipografia base */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.16; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(28px, 8vw, 44px); }
h2 { font-size: clamp(24px, 6.5vw, 34px); }
h3 { font-size: clamp(19px, 5vw, 23px); }
p { margin: 0 0 1.1em; }
strong { font-weight: 700; }
em { font-style: italic; }
.num { font-family: var(--num); font-weight: 700; font-feature-settings: "tnum" 1; }

/* Layout */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.wrap-wide { max-width: 940px; }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1em; }

/* Botão CTA — sombra dourada no hover/focus (padrão da casa) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.25;
  text-align: center; text-decoration: none; cursor: pointer;
  padding: 18px 30px; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, var(--brass) 0%, var(--brass-deep) 100%);
  color: #211a10;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(198,154,91,0.42), 0 0 0 1px rgba(198,154,91,0.5);
  filter: brightness(1.04);
  outline: none;
}
.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 21px 34px; font-size: 18px; }
.btn--ghost {
  background: transparent; color: var(--text-light);
  border: 1px solid var(--line); box-shadow: none; font-weight: 600;
}
.btn--ghost:hover, .btn--ghost:focus-visible { box-shadow: 0 0 0 1px var(--brass); background: rgba(198,154,91,0.06); }
.btn--whats {
  background: linear-gradient(180deg, #35c05a 0%, #1faa48 100%); color: #06340f;
}
.btn--whats:hover, .btn--whats:focus-visible {
  box-shadow: 0 10px 30px rgba(37,211,102,0.4), 0 0 0 1px rgba(37,211,102,0.55);
}

/* Selo DEV / placeholder */
.dev-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #d8b98a; background: rgba(198,154,91,0.10);
  border: 1px dashed rgba(198,154,91,0.45); border-radius: 8px;
  padding: 6px 11px; margin: 0 auto;
}
.dev-note { font-family: var(--mono); font-size: 12px; color: var(--text-mute); text-align: center; }

/* Player de áudio (placeholder TTS) */
.audio-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; margin: 0 auto; max-width: 460px;
}
.audio-card audio { width: 100%; margin-top: 4px; }
.audio-label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--text-mute); text-transform: uppercase; margin-bottom: 12px; }

/* Cartela de vídeo (placeholder até Marcos gravar) */
.cartela {
  position: relative; aspect-ratio: 9 / 16; max-width: 340px; margin: 0 auto;
  background: radial-gradient(120% 90% at 50% 0%, #241f18 0%, var(--ink) 70%);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 26px; text-align: center; gap: 16px; overflow: hidden;
}
.cartela .play {
  width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--brass); font-size: 20px;
  background: rgba(198,154,91,0.08);
}
.cartela .cartela-txt { font-family: var(--serif); font-size: 20px; line-height: 1.4; color: var(--text-light); }
.cartela .cartela-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-mute); text-transform: uppercase; }

/* Fade-in ao entrar (movimento sutil, nunca frenético) */
.fade { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.fade.in { opacity: 1; transform: none; }

/* Sequência de micro-experiências */
.step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 56px 0; }
.step__eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); text-align: center; margin-bottom: 22px; }
.step__lead { font-family: var(--serif); font-size: clamp(22px, 6vw, 30px); line-height: 1.4; text-align: center; }
.step__hint { text-align: center; color: var(--text-mute); font-size: 14px; margin-top: 30px; }

/* Avançar */
.advance { text-align: center; margin-top: 40px; }
.advance a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-mute); text-decoration: none; font-size: 14px; border-bottom: 1px solid transparent; padding-bottom: 3px; transition: color .3s, border-color .3s; }
.advance a:hover, .advance a:focus-visible { color: var(--brass); border-color: var(--line); }

/* Progresso de trilha */
.dots { display: flex; gap: 8px; justify-content: center; margin: 0 auto 34px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.16); display: block; }
.dots i.on { background: var(--brass); }

/* Utilidades claras (para página de vendas alternada) */
.sec { padding: clamp(52px, 12vw, 96px) 0; }
.sec--light { background: var(--cream); color: var(--text-dark); }
.sec--light h1, .sec--light h2, .sec--light h3 { color: var(--text-dark); }
.sec--light .muted { color: var(--text-soft); }
.sec--dark { background: var(--ink); color: var(--text-light); }
.sec--panel { background: var(--panel); color: var(--text-light); }
.muted { color: var(--text-mute); }

hr.rule { border: 0; height: 1px; background: var(--line); margin: 40px 0; }

@media (prefers-reduced-motion: reduce) {
  .fade { transition: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}