/* ==========================================================================
   PÁGINA DE OBRIGADO — Os 7 Códigos da Aprovação (Dayana Martins)
   Mesma identidade visual do quiz: branco, preto e dourado.
   ========================================================================== */
:root {
  --bg: #ffffff;
  --creme: #faf7f0;
  --creme-2: #f4efe3;
  --preto: #0b0b0c;
  --text: #141414;
  --text-2: #444444;
  --muted: #747474;
  --line: #e8e3d8;
  --ouro: #c8a85e;
  --ouro-2: #dcc287;
  --ouro-texto: #8a6a28;
  --ouro-suave: #fbf6ea;
  --ouro-linha: #e6d6ad;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 14px;
  --col: 640px;
  --sombra: 0 1px 2px rgba(20, 20, 20, .04), 0 4px 14px -6px rgba(20, 20, 20, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #ffffff; --text: #141414; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--ouro-texto); }
h1, h2, h3 { font-family: var(--sans); margin: 0; }

.topo { padding: 18px 16px; text-align: center; border-bottom: 1px solid var(--line); }
.marca {
  font-family: var(--serif); font-weight: 700; letter-spacing: .22em; font-size: 15px;
  color: var(--preto); text-transform: uppercase; line-height: 1.3;
}
.marca small { display: block; font-family: var(--sans); font-size: 8.5px; letter-spacing: .2em; color: var(--ouro-texto); font-weight: 600; margin-top: 4px; }

.pagina { max-width: var(--col); margin: 0 auto; padding: 36px 16px 60px; }

.selo {
  display: inline-block; margin: 0 0 14px; padding: 5px 11px; border: 1px solid var(--ouro-linha); border-radius: 999px;
  background: var(--ouro-suave); color: var(--ouro-texto); font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.4;
}
.hero { text-align: center; margin: 0 0 32px; }
.hero .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ouro); margin: 0 auto 14px; }
.hero h1 { font-size: 28px; line-height: 1.22; font-weight: 700; letter-spacing: -.015em; margin: 0 0 10px; }
.hero p { color: var(--text-2); font-size: 15.5px; margin: 0; max-width: 460px; margin: 0 auto; }

.video-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden;
  background: var(--preto); margin: 0 0 32px; box-shadow: var(--sombra);
}
.video-wrap iframe, .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--preto); }
.video-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center; color: #fff; }
.video-ph span { color: var(--ouro); font-size: 11px; letter-spacing: .2em; font-weight: 700; text-transform: uppercase; }
.video-ph small { color: rgba(255, 255, 255, .6); font-size: 12px; max-width: 320px; }

.sec { margin: 0 0 32px; }
.tit-sec { font-weight: 700; font-size: 21px; line-height: 1.3; margin: 0 0 14px; letter-spacing: -.01em; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; background: var(--creme); border-radius: var(--r); font-size: 14.5px; line-height: 1.4; color: var(--text); }
.lista li b { font-weight: 600; }
.lista .check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--preto); color: var(--ouro); display: grid; place-items: center; font-size: 12px; margin-top: 1px; }

.caixa { padding: 16px 18px; background: var(--ouro-suave); border: 1px solid var(--ouro-linha); border-radius: var(--r); color: var(--text); font-size: 14.5px; line-height: 1.5; }
.caixa b { color: var(--ouro-texto); }

.btn {
  display: block; width: 100%; padding: 17px 20px; border: 0; border-radius: var(--r); cursor: pointer; text-align: center;
  text-decoration: none; background: linear-gradient(180deg, var(--ouro-2), var(--ouro)); color: var(--preto);
  font-weight: 700; font-size: 16px; letter-spacing: .01em; box-shadow: 0 12px 26px -14px rgba(160, 125, 50, .9);
}
.btn:hover { background: linear-gradient(180deg, #e3cb93, #cfb067); }

.fecho { text-align: center; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--text); margin: 0 0 6px; }
.assina { text-align: center; color: var(--ouro-texto); font-family: var(--serif); font-size: 15px; font-style: italic; }

@media (min-width: 640px) {
  .hero h1 { font-size: 32px; }
}