/* Tangerina: estilos comuns a todas as páginas (visual de vidro, tema escuro e claro) */

:root {
  --laranja: #F07A1A;
  --laranja-escuro: #B4500A;
  --tinta: #22140C;           /* texto sobre laranja */
  --whats: #1F8F4E;

  --bg: #140B07;
  --texto: #FFF4EA;
  --suave: #DCC6B3;
  --vidro: rgba(255, 236, 220, .07);
  --vidro-2: rgba(255, 236, 220, .11);
  --linha: rgba(255, 214, 180, .18);
  --brilho-1: rgba(240, 122, 26, .55);
  --brilho-2: rgba(255, 170, 80, .28);
  --destaque: #FFA65C;
  --sombra: 0 20px 50px rgba(0, 0, 0, .35);

  --degrade: linear-gradient(135deg, #FFA24A, #F07A1A 55%, #D9620A);
  --degrade-card: linear-gradient(150deg, rgba(255, 170, 90, .97), rgba(240, 122, 26, .97) 50%, rgba(200, 86, 8, .97));
  --degrade-texto: linear-gradient(100deg, #FFB66E, #F07A1A 50%, #FF8F3A);

  --fonte-titulo: 'Rubik', Arial, sans-serif;
  --fonte-texto: 'Nunito Sans', Arial, sans-serif;
  --largura: 1180px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #FFF2E6;
  --texto: #22140C;
  --suave: #6B4F3C;
  --vidro: rgba(255, 255, 255, .55);
  --vidro-2: rgba(255, 255, 255, .72);
  --linha: rgba(255, 255, 255, .85);
  --brilho-1: rgba(240, 122, 26, .38);
  --brilho-2: rgba(255, 190, 110, .5);
  --destaque: #B4500A;
  --sombra: 0 20px 50px rgba(150, 70, 10, .14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}

h1, h2, h3 { font-family: var(--fonte-titulo); margin: 0; text-wrap: balance; }
h1 { font-weight: 700; line-height: 1; letter-spacing: -.03em; }
h2 { font-weight: 700; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -.02em; }
h3 { font-weight: 600; font-size: 24px; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* overflow: clip (e não hidden) para o topo continuar fixo ao rolar */
.pagina { position: relative; overflow: clip; min-height: 100vh; }
.container { position: relative; width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 20px; }
.secao { position: relative; padding: 0 0 96px; }
.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.cabeca p { color: var(--suave); max-width: 400px; }
.suave { color: var(--suave); }
.degrade-texto { background: var(--degrade-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Brilhos de fundo */
.brilho {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(30px);
  background: radial-gradient(circle, var(--brilho-1), transparent 65%);
}
.brilho--2 { background: radial-gradient(circle, var(--brilho-2), transparent 65%); }

/* Vidro */
.vidro {
  background: var(--vidro);
  border: 1px solid var(--linha);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--sombra);
}
.vidro--forte { background: var(--vidro-2); }
.cartao { border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.cartao p { color: var(--suave); }
.grade { display: flex; flex-wrap: wrap; gap: 20px; }
.grade > * { flex: 1 1 280px; }

.icone {
  width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--degrade); color: var(--tinta);
  box-shadow: 0 10px 24px rgba(240, 122, 26, .35);
}
.icone svg { width: 28px; height: 28px; }

/* Topo em pílula */
.topo-wrap { position: sticky; top: 0; z-index: 20; padding: 16px 0 0; }
.topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
}
.marca {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px; white-space: nowrap;
}
.marca svg { width: 30px; height: 30px; flex: none; }
.topo nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-weight: 700; font-size: 16px; }
.topo nav .link { padding: 10px 12px; text-decoration: none; color: var(--suave); }
.topo nav .link:hover { color: var(--texto); }

.tema {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--vidro); border: 1px solid var(--linha); color: var(--texto);
}
.tema svg { width: 20px; height: 20px; }
.tema .sol { display: none; }
:root[data-theme="light"] .tema .sol { display: block; }
:root[data-theme="light"] .tema .lua { display: none; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 28px; border-radius: 999px; border: 0;
  font-family: var(--fonte-texto); font-weight: 800; font-size: 18px; text-decoration: none; cursor: pointer;
  background: var(--degrade); color: var(--tinta);
  box-shadow: 0 14px 34px rgba(240, 122, 26, .4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.botao:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(240, 122, 26, .5); }
.botao svg { width: 22px; height: 22px; flex: none; }
.botao--vidro { background: var(--vidro); border: 1px solid var(--linha); color: var(--texto); box-shadow: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.botao--escuro { background: var(--tinta); color: #FFF4EA; box-shadow: 0 10px 24px rgba(34, 20, 12, .35); }
.botao--pequeno { min-height: 44px; padding: 8px 20px; font-size: 16px; box-shadow: 0 6px 20px rgba(240, 122, 26, .35); }

/* Selos */
.selo {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.selo--escuro { background: rgba(34, 20, 12, .88); color: #FFF4EA; }
.selo--vidro { background: var(--vidro); border: 1px solid var(--linha); }
.selo--laranja { background: var(--laranja); color: var(--tinta); }
.chamada-selo {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 14px 6px 8px; border-radius: 999px; font-size: 14px; font-weight: 700;
}
.chamada-selo b {
  padding: 2px 10px; border-radius: 999px; background: var(--laranja); color: var(--tinta);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* Cartão laranja de destaque */
.cartao-laranja {
  position: relative; overflow: hidden; color: var(--tinta);
  background: var(--degrade-card);
  box-shadow: 0 30px 60px rgba(200, 86, 8, .38), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.cartao-laranja::before {
  content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .45), transparent 65%); pointer-events: none;
}
.cartao-laranja > * { position: relative; }
.cartao-laranja p { color: var(--tinta); }

/* Campo a preencher / ponto a confirmar, bem visíveis */
.preencher, .confirmar {
  background: #FFE58A; color: var(--tinta);
  border: 2px dashed #8A3C06; border-radius: 8px; padding: 0 8px;
  font-weight: 800; white-space: nowrap;
}
.confirmar { font-size: 12px; padding: 1px 8px; border-width: 1.5px; border-radius: 6px; vertical-align: 2px; }

/* Faixa final laranja */
.faixa {
  position: relative; overflow: hidden; border-radius: 40px; color: var(--tinta);
  padding: clamp(36px, 7vw, 88px);
  background: linear-gradient(135deg, #FFA24A, #F07A1A 50%, #C9560A);
  box-shadow: 0 30px 60px rgba(200, 86, 8, .38);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.faixa::before {
  content: ''; position: absolute; right: -120px; top: -160px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .42), transparent 65%); pointer-events: none;
}
.faixa > * { position: relative; }
.faixa h2 { font-weight: 800; font-size: clamp(36px, 5.6vw, 68px); line-height: 1; letter-spacing: -.03em; max-width: 780px; }
.faixa p { font-size: 20px; font-weight: 600; max-width: 640px; }

/* Rodapé */
.rodape { position: relative; border-top: 1px solid var(--linha); padding: 32px 0; font-size: 15px; color: var(--suave); }
.rodape .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.rodape a { color: var(--texto); font-weight: 700; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .secao { padding-bottom: 72px; }
  .topo { padding-left: 14px; flex-wrap: nowrap; }
  .topo nav .link { display: none; }
  /* No celular o topo fica só com a marca e o tema; a chamada principal está logo abaixo */
  .topo nav .botao--pequeno { display: none; }
  .marca { font-size: 18px; }
  .marca svg { width: 26px; height: 26px; }
  .cartao { padding: 26px; }
  .botao--pequeno { padding: 8px 14px; font-size: 15px; }
}

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