/* =========================================================
   RET — Responda. Escreva. Termine.
   Landing page · Academia da Ficção · Penina Baltrusch
   Mobile-first (375px é o layout principal).
   ========================================================= */

:root {
  /* Do site peninabaltrusch.com */
  --cor-fundo:          #150E08; /* fundo geral (café quase preto) */
  --cor-texto:          #F5F2ED; /* títulos e texto principal (creme) */
  --cor-texto-suave:    #BBB6B1; /* textos de apoio */
  --cor-dourado:        #E6C87E; /* destaque principal, CTA */
  --cor-dourado-claro:  #F3D98E; /* ponto de luz do gradiente */
  --cor-dourado-escuro: #CBA35D; /* bordas, hover, números */
  --cor-dourado-apagado:#9A8252; /* legendas, rótulos, rodapé */
  --cor-bege:           #C5A488; /* ícones, item ativo */
  --gradiente-dourado:  linear-gradient(90deg, #CBA35D 0%, #F3D98E 50%, #E6C87E 100%);

  /* Derivadas (mesma família, para dar camadas ao fundo escuro) */
  --cor-fundo-alt:      #1D140C; /* seções alternadas */
  --cor-card:           #231810; /* cards, accordion, planos */
  --cor-linha:          #3A2A1A; /* bordas finas e divisores */
}

:root {
  /* Fontes */
  --fonte-titulo: "DM Serif Display", Georgia, serif;
  --fonte-texto:  "Manrope", system-ui, sans-serif;

  /* Raios */
  --raio-xl:   32px;
  --raio-lg:   24px;
  --raio-md:   18px;
  --raio-sm:   12px;
  --raio-pill: 999px;

  /* Espaçamentos */
  --margem:        20px;                      /* respiro lateral */
  --secao:         clamp(72px, 16vw, 128px);  /* respiro vertical de cada seção */
  --bloco:         clamp(28px, 6vw, 44px);    /* entre o título e o conteúdo */
  --largura:       1120px;
  --largura-texto: 720px;

  /* Luz quente (brilho atrás do celular) */
  --luz-dourada: rgba(230, 200, 126, 0.22);
}

@media (min-width: 768px) {
  :root { --margem: 32px; }
}


/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--cor-dourado-claro);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--cor-dourado); color: var(--cor-fundo); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icone--cheia { fill: currentColor; stroke: none; }


/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}
.container--texto { max-width: calc(var(--largura-texto) + 2 * var(--margem)); }

.secao {
  --bg: var(--cor-fundo);
  position: relative;
  background: var(--bg);
  padding-block: var(--secao);
}
.secao--alt { --bg: var(--cor-fundo-alt); }

/* Cabeça de seção (pill + título + intro) */
.cabeca { max-width: 660px; margin-bottom: var(--bloco); }
.intro { margin-top: 16px; color: var(--cor-texto-suave); font-size: 1.125rem; }

/* Seções em duas colunas no desktop: título à esquerda, conteúdo à direita */
.dividida { display: grid; gap: var(--bloco); }

@media (min-width: 960px) {
  .cabeca--centro { margin-inline: auto; text-align: center; }
  .dividida { grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
  .dividida__cabeca { position: sticky; top: 56px; }
}


/* ---------- Tipografia ---------- */

.titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(2.15rem, 8.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ouro { color: var(--cor-dourado); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 18px;
  padding: 7px 14px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--cor-dourado-apagado);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Frase de fechamento de seção, em serifa */
.fecho {
  margin-top: 32px;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.4rem, 5.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--cor-texto);
}
.fecho--centro { max-width: 720px; margin-inline: auto; margin-top: var(--bloco); }

@media (min-width: 960px) {
  .fecho--centro { text-align: center; }
}


/* ---------- Botões ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  min-height: 58px;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.btn .icone { width: 1.15em; height: 1.15em; transition: transform 0.2s; }
.btn:hover .icone { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--primario {
  background: var(--cor-dourado);
  color: var(--cor-fundo);
  box-shadow: 0 16px 36px -16px rgba(230, 200, 126, 0.6);
}
.btn--primario:hover { background: var(--cor-dourado-claro); }

.btn--secundario {
  background: transparent;
  color: var(--cor-dourado);
  border-color: var(--cor-dourado);
}
.btn--secundario:hover {
  background: rgba(230, 200, 126, 0.07);
  border-color: var(--cor-dourado-claro);
  color: var(--cor-dourado-claro);
}

/* Botão sobre o bloco dourado do fechamento */
.btn--escuro {
  background: var(--cor-fundo);
  color: var(--cor-dourado-claro);
  box-shadow: 0 16px 36px -18px rgba(21, 14, 8, 0.7);
}
.btn--escuro:hover { background: var(--cor-card); }

.dividida__corpo > .btn,
.fechamento__texto > .btn { margin-top: 32px; }

/* Em telas estreitas o texto do botão ocupa a largura toda; a seta volta a partir de 480px */
@media (max-width: 479px) {
  .btn .icone { display: none; }
}
@media (min-width: 480px) {
  .btn { padding-inline: 28px; font-size: 1.0625rem; }
}
@media (min-width: 768px) {
  .btn { display: inline-flex; width: auto; min-width: 320px; }
}


/* ---------- 1. Hero ---------- */

.hero {
  overflow: hidden;
  isolation: isolate;
  padding-block: 28px 88px;
}

/* Topo: logo da Penina Baltrusch · Academia da Ficção */
.topo { margin-bottom: 40px; }
.topo__logo { width: 188px; height: auto; }

/* Marca do produto (RET), logo acima do título */
.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.32em;
  color: var(--cor-dourado);
}
.marca::after {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--cor-dourado-escuro);
  opacity: 0.6;
}

.hero__grid { display: grid; gap: 64px; align-items: center; }

.hero__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: clamp(3.5rem, 16.5vw, 6.75rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.hero__linha { display: block; }
.hero__linha--ouro {
  width: fit-content;
  padding-bottom: 0.08em;
  background-image: var(--gradiente-dourado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__sub {
  max-width: 20em;
  margin-top: 28px;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.45rem, 5.8vw, 1.9rem);
  line-height: 1.25;
}
.hero__apoio {
  max-width: 44ch;
  margin-top: 16px;
  color: var(--cor-texto-suave);
}
.hero .btn { margin-top: 32px; }

.hero__aparelho {
  position: relative;
  display: flex;
  justify-content: center;
}
/* Luz de abajur atrás do aparelho */
.hero__aparelho::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--luz-dourada), rgba(230, 200, 126, 0.06) 55%, transparent 78%);
  pointer-events: none;
}

@media (min-width: 960px) {
  .hero { padding-block: 40px 128px; }
  .topo { margin-bottom: 64px; }
  .topo__logo { width: 224px; }
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: 48px; }
  .hero__aparelho::before { width: 760px; height: 760px; }
}

/* Momento orquestrado do carregamento: linhas do título sobem em sequência,
   o celular se ergue e a pergunta é digitada (main.js). */
@media (prefers-reduced-motion: no-preference) {
  .topo__logo,
  .hero .marca,
  .hero__linha,
  .hero__sub,
  .hero__apoio,
  .hero .btn {
    animation: surgir 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  .topo__logo                { animation-delay: 0s; }
  .hero .marca               { animation-delay: 0.1s; }
  .hero__linha:nth-child(1)  { animation-delay: 0.15s; }
  .hero__linha:nth-child(2)  { animation-delay: 0.3s; }
  .hero__linha:nth-child(3)  { animation-delay: 0.45s; }
  .hero__sub                 { animation-delay: 0.65s; }
  .hero__apoio               { animation-delay: 0.75s; }
  .hero .btn                 { animation-delay: 0.85s; }

  .hero__aparelho .celular   { animation: erguer 1.2s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  .hero__aparelho::before    { animation: acender 2.2s 0.6s ease-out backwards; }
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes erguer {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: none; }
}
@keyframes acender {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ---------- Mockup do celular ---------- */

.celular {
  --largura-celular: min(256px, 70vw);
  position: relative;
  width: var(--largura-celular);
  aspect-ratio: 9 / 18.8;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(150deg, #33251a 0%, #0d0906 38%, #1b130c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(203, 163, 93, 0.3),
    inset 0 0 0 5px #0b0705,
    0 50px 90px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.6);
  font-size: 15px;
}
/* Botões laterais */
.celular::before,
.celular::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #2a1e14;
}
.celular::before { left: -3px; top: 22%; height: 11%; }
.celular::after  { right: -3px; top: 28%; height: 15%; }

.celular__tela {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 46px 15px 22px;
  border-radius: 38px;
  overflow: hidden;
  background:
    radial-gradient(120% 45% at 50% 0%, rgba(230, 200, 126, 0.1), transparent 65%),
    var(--cor-card);
}
/* Indicador de início (home bar) */
.celular__tela::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 96px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: rgba(245, 242, 237, 0.35);
}
.celular__ilha {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 84px;
  height: 25px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #050302;
}

.app {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.9em;
  min-height: 0;
  line-height: 1.4;
}
.app__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app__marca {
  font-family: var(--fonte-titulo);
  font-size: 1em;
  letter-spacing: 0.26em;
  color: var(--cor-texto);
}
.app__dia {
  padding: 0.35em 0.8em;
  border-radius: var(--raio-pill);
  background: var(--cor-dourado);
  color: var(--cor-fundo);
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app__semana,
.app__camadas {
  display: grid;
  gap: 5px;
}
.app__semana { grid-template-columns: repeat(7, 1fr); }
.app__camadas { grid-template-columns: repeat(6, 1fr); margin-top: 1.1em; }
.app__semana i,
.app__camadas i {
  height: 4px;
  border-radius: 4px;
  background: var(--cor-linha);
}
.app__semana i.atual,
.app__camadas i.feita { background: var(--gradiente-dourado); }

.app__cartao {
  padding: 1.05em 1em 1.1em;
  border: 1px solid var(--cor-linha);
  border-radius: 20px;
  background: rgba(21, 14, 8, 0.55);
}
.app__rotulos {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0.7em;
  color: var(--cor-dourado-apagado);
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.app__fase { color: var(--cor-bege); }

.app__pergunta {
  display: grid;
  font-family: var(--fonte-titulo);
  font-size: 1.32em;
  line-height: 1.22;
  color: var(--cor-texto);
}
/* O texto "fantasma" reserva a altura final, para a digitação não empurrar o layout */
.app__pergunta > span { grid-area: 1 / 1; }
.app__fantasma { visibility: hidden; }

.app__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.14em;
  background: var(--cor-dourado);
  opacity: 0;
}
.digitando .app__pergunta .app__cursor { opacity: 1; }

.app__resposta {
  position: relative;
  flex: 1;
  min-height: 90px;
  padding: 0.95em 1em;
  border: 1px solid var(--cor-linha);
  border-radius: 18px;
  background: rgba(21, 14, 8, 0.35);
  color: var(--cor-texto-suave);
  font-size: 0.82em;
  transition: border-color 0.5s, box-shadow 0.5s;
}
.app__placeholder { display: inline-flex; align-items: center; }
.app__placeholder .app__cursor { height: 1.2em; margin: 0 4px 0 0; }
.respondendo .app__resposta {
  border-color: var(--cor-dourado-escuro);
  box-shadow: 0 0 0 3px rgba(230, 200, 126, 0.1);
}
.respondendo .app__resposta .app__cursor {
  opacity: 1;
  animation: piscar 1.1s steps(1) infinite;
}
.app__enviar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cor-dourado);
  color: var(--cor-fundo);
}
.app__enviar .icone { width: 18px; height: 18px; stroke-width: 2.2; }

@keyframes piscar { 50% { opacity: 0; } }

@media (min-width: 960px) {
  .celular { --largura-celular: 316px; font-size: 17.5px; }
}


/* ---------- 2. O que trava você hoje ---------- */

.trava__lede {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.45rem, 5.6vw, 1.9rem);
  line-height: 1.32;
  color: var(--cor-texto);
}
.trava p + p {
  margin-top: 24px;
  color: var(--cor-texto-suave);
  font-size: 1.125rem;
}
.destaque {
  font-family: var(--fonte-titulo);
  font-size: 1.14em;
  font-style: italic;
  color: var(--cor-dourado);
}


/* ---------- Lista com checks (seções 3 e 7) ---------- */

.checks { display: grid; gap: 12px; }
.checks li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: var(--cor-card);
}
.checks li > span:last-child { padding-top: 6px; }
.checks__marca {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(230, 200, 126, 0.12);
  color: var(--cor-dourado);
}
.checks__marca .icone { width: 20px; height: 20px; stroke-width: 2.2; }


/* ---------- 4. Quem vai te guiar ---------- */

.guia { display: grid; gap: 44px; }

.guia__foto {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 460px;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--cor-card);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 90px -30px rgba(230, 200, 126, 0.25);
}
.guia__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Moldura fina dourada */
.guia__foto::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(230, 200, 126, 0.35);
  border-radius: calc(var(--raio-lg) - 8px);
  pointer-events: none;
}

.guia__lede {
  margin-top: 22px;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.4rem, 5.4vw, 1.75rem);
  line-height: 1.3;
}

.provas {
  margin-block: 28px;
  padding: 24px 22px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  background: var(--cor-card);
}
.provas__icone {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 14px;
  color: var(--cor-dourado);
}
.provas__intro {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.98rem;
}
.provas__nomes {
  display: block;
  margin-top: 6px;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.35rem, 5.2vw, 1.6rem);
  line-height: 1.3;
  color: var(--cor-texto-suave);
}
.premio { color: var(--cor-texto); }

.provas__numero {
  display: grid;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--cor-linha);
}
.provas__pre,
.provas__pos { color: var(--cor-texto-suave); font-size: 0.98rem; }
.provas__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(3.25rem, 15vw, 4.5rem);
  font-weight: 400;
  line-height: 1.02;
  color: var(--cor-dourado);
}

.guia__ajuda { color: var(--cor-texto-suave); font-size: 1.125rem; }

@media (min-width: 768px) {
  .guia { grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
  .guia__foto { position: sticky; top: 56px; }
  .provas { padding: 28px; }
}
@media (min-width: 960px) {
  .guia { gap: 80px; }
}


/* ---------- Linha do tempo (seções 5 e 8) ---------- */

.linha-tempo { display: grid; max-width: 620px; }
.fase {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding-bottom: 36px;
}
.fase:last-child { padding-bottom: 0; }
/* Trilho que liga um nó ao próximo */
.fase::before {
  content: "";
  position: absolute;
  left: 25.5px;
  top: 52px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(var(--cor-dourado-escuro), var(--cor-linha));
}
.fase:last-child::before { display: none; }

.fase__no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--cor-dourado-escuro);
  border-radius: 50%;
  background: var(--bg);
  color: var(--cor-dourado);
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  line-height: 1;
}
.fase__nome {
  margin: 8px 0 8px;
  font-family: var(--fonte-titulo);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.1;
}
.fase__corpo p { color: var(--cor-texto-suave); }

/* Seção 8: as mesmas fases, agora concluídas */
.linha-tempo--resultado .fase::before { background: var(--cor-dourado-escuro); }
.linha-tempo--resultado .fase__no {
  border-color: transparent;
  background: var(--gradiente-dourado);
  color: var(--cor-fundo);
}
.linha-tempo--resultado .fase__no .icone { width: 24px; height: 24px; stroke-width: 2.4; }

.resultado {
  padding: 18px 20px 20px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: var(--cor-card);
}
.resultado__fase {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  font-weight: 600;
}
.resultado__texto {
  display: block;
  margin-top: 4px;
  font-family: var(--fonte-titulo);
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--cor-texto);
}

@media (min-width: 960px) {
  .linha-tempo { grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: none; }
  .fase { grid-template-columns: 1fr; gap: 22px; padding-bottom: 0; }
  .fase::before {
    left: 52px;
    right: -32px;
    top: 25.5px;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, var(--cor-dourado-escuro), var(--cor-linha));
  }
  .linha-tempo--resultado .fase::before { background: var(--cor-dourado-escuro); }
  .fase__corpo { padding-right: 12px; }
  .resultado { height: 100%; }
}


/* ---------- 6. Acompanhamento ---------- */

.ciclo { display: grid; gap: 12px; }
.ciclo__item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  padding: 22px 20px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  background: var(--cor-card);
}
.ciclo__item p { color: var(--cor-texto-suave); }
.ciclo__icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--cor-linha);
  border-radius: 14px;
  background: rgba(197, 164, 136, 0.08);
  color: var(--cor-bege);
}
.ciclo__icone .icone { width: 24px; height: 24px; }
.numero { color: var(--cor-dourado); font-weight: 700; }


/* ---------- 9. Depoimentos ---------- */

.depo-trilho {
  display: flex;
  gap: 14px;
  margin-inline: calc(-1 * var(--margem));
  padding: 4px var(--margem) 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
}
.depo-trilho::-webkit-scrollbar { display: none; }
.depo-trilho:focus-visible { outline-offset: -2px; }

.depo {
  display: flex;
  flex: 0 0 86%;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 22px 22px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-lg);
  background: var(--cor-card);
  scroll-snap-align: start;
}
.depo__texto p { color: var(--cor-texto); line-height: 1.7; text-wrap: wrap; }
.depo__autor {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}
.depo__autor strong { color: var(--cor-texto); font-weight: 700; }
.depo__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradiente-dourado);
  color: var(--cor-fundo);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.depo-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}
.depo-dica {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}
.depo-dica .icone { color: var(--cor-dourado); }
.depo-pontos { display: flex; gap: 6px; }
.depo-pontos span {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-pill);
  background: var(--cor-linha);
  transition: width 0.3s, background-color 0.3s;
}
.depo-pontos span.ativo { width: 24px; background: var(--cor-dourado); }

@media (min-width: 600px) {
  .depo { flex-basis: 62%; }
}
@media (min-width: 960px) {
  .depo-trilho {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .depo { padding: 30px 28px 26px; }
  .depo-rodape { display: none; }
}


/* ---------- 10. Oferta ---------- */

.oferta { max-width: 560px; margin-inline: auto; text-align: center; }

.selo-lancamento {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 16px;
  border: 1px solid var(--cor-dourado-escuro);
  border-radius: var(--raio-pill);
  color: var(--cor-dourado);
  font-size: 0.9rem;
  font-weight: 700;
}

.oferta__card {
  position: relative;
  margin-top: 28px;
  padding: 30px 22px 22px;
  border: 1px solid var(--cor-dourado-escuro);
  border-radius: var(--raio-xl);
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(230, 200, 126, 0.09), transparent 70%),
    var(--cor-card);
  box-shadow: 0 40px 90px -50px rgba(230, 200, 126, 0.45);
  text-align: left;
}
.oferta__plano { font-weight: 700; font-size: 1.05rem; }
.oferta__preco {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 4px;
}
.oferta__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(3.6rem, 17.5vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--cor-dourado);
}
.oferta__periodo { color: var(--cor-texto-suave); font-size: 1.15rem; font-weight: 600; }
.oferta__inclui { margin-top: 14px; color: var(--cor-texto-suave); }

.oferta__termos { display: grid; gap: 14px; margin-top: 22px; }
.termo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.termo .icone { color: var(--cor-bege); }

/* Bloco da garantia: um dos dois momentos com fundo dourado */
.garantia {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 18px 16px 16px;
  border-radius: var(--raio-md);
  background: var(--gradiente-dourado);
  color: var(--cor-fundo);
  line-height: 1.45;
}
.garantia__texto strong { font-weight: 800; }
.garantia__selo {
  position: relative;
  display: grid;
  place-content: center;
  width: 76px;
  height: 76px;
  border: 1.5px solid var(--cor-fundo);
  border-radius: 50%;
  text-align: center;
}
.garantia__selo::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed rgba(21, 14, 8, 0.55);
  border-radius: 50%;
}
.garantia__n { font-family: var(--fonte-titulo); font-size: 2.1rem; line-height: 0.9; }
.garantia__d { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }

.oferta__nota { margin-top: 20px; color: var(--cor-texto-suave); font-size: 0.98rem; }
.oferta__nota a { color: var(--cor-dourado); font-weight: 700; text-underline-offset: 3px; }
.oferta__nota a:hover { color: var(--cor-dourado-claro); }

.oferta__card .btn { width: 100%; margin-top: 22px; }

/* Faixa de confiança */
.confianca {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--cor-linha);
}
.confianca li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--cor-texto-suave);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.confianca .icone { width: 22px; height: 22px; color: var(--cor-bege); }

@media (min-width: 768px) {
  .oferta__card { padding: 36px 34px 28px; }
  .confianca li { font-size: 0.82rem; }
}


/* ---------- 11. Comparativo ---------- */

#comparativo .cabeca { margin-inline: auto; text-align: center; }

.seletor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-width: 420px;
  margin: 0 auto 20px;
  padding: 5px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-pill);
  background: var(--cor-card);
}
.seletor__aba {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.seletor__aba[aria-selected="true"] { background: var(--cor-dourado); color: var(--cor-fundo); }
.seletor__aba[aria-selected="false"]:hover { color: var(--cor-texto); }

.selo-rec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: var(--raio-pill);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.selo-rec .icone { width: 10px; height: 10px; }
.seletor__aba[aria-selected="false"] .selo-rec { color: var(--cor-dourado); }

.planos { display: grid; gap: 20px; max-width: 520px; margin-inline: auto; }
.js .plano:not(.ativo) { display: none; }

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px 22px 24px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-xl);
  background: var(--cor-card);
}
.plano--destaque {
  border-color: var(--cor-dourado-escuro);
  box-shadow: 0 40px 90px -50px rgba(230, 200, 126, 0.5);
}
.plano__selo {
  position: absolute;
  top: -14px;
  left: 24px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--raio-pill);
  background: var(--cor-dourado);
  color: var(--cor-fundo);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plano__selo .icone { width: 12px; height: 12px; }

.plano__topo { padding-bottom: 22px; border-bottom: 1px solid var(--cor-linha); }
.plano__nome { font-family: var(--fonte-titulo); font-size: 2.3rem; font-weight: 400; line-height: 1; }
.plano__produto {
  margin-top: 10px;
  color: var(--cor-dourado-apagado);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plano__preco {
  margin-top: 14px;
  font-family: var(--fonte-titulo);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--cor-dourado);
}
.plano__preco span {
  margin-left: 4px;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}
.plano__cond { margin-top: 10px; color: var(--cor-texto-suave); font-size: 0.95rem; }

.plano__rotulo {
  margin-bottom: 12px;
  color: var(--cor-bege);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.plano__lista { display: grid; gap: 10px; }
.plano__lista li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.98rem;
  line-height: 1.5;
}
.plano__lista .icone { width: 20px; height: 20px; margin-top: 1px; color: var(--cor-dourado); }
/* Itens ausentes: tratamento neutro, não de benefício */
.plano__lista .ausente { color: var(--cor-texto-suave); }
.plano__lista .ausente .icone { color: #7d6e62; }

.plano__quem {
  padding: 16px 18px;
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: rgba(21, 14, 8, 0.45);
}
.plano__quem p { color: var(--cor-texto-suave); font-size: 0.97rem; }

.plano .btn { width: 100%; margin-top: auto; }

@media (min-width: 860px) {
  .seletor { display: none; }
  .planos { grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; align-items: stretch; }
  .js .plano:not(.ativo) { display: flex; }
  .plano { padding: 36px 30px 30px; }
  .plano__selo { display: inline-flex; }
}


/* ---------- 12. FAQ ---------- */

.faq { display: grid; gap: 10px; }
.faq__item {
  border: 1px solid var(--cor-linha);
  border-radius: var(--raio-md);
  background: var(--cor-card);
  transition: border-color 0.2s;
}
.faq__item:has([aria-expanded="true"]) { border-color: #4d3822; }
.faq__pergunta { font: inherit; }
.faq__botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--raio-md);
  background: none;
  color: var(--cor-texto);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.faq__botao .icone { color: var(--cor-dourado); transition: transform 0.25s; }
.faq__botao[aria-expanded="true"] .icone { transform: rotate(180deg); }
.faq__resposta { padding: 0 20px 20px; color: var(--cor-texto-suave); }
.faq__resposta[hidden] { display: none; }


/* ---------- 13. Fechamento (bloco dourado, ecoa o hero) ---------- */

.fechamento {
  position: relative;
  display: grid;
  gap: 44px;
  padding: 44px 24px 0;
  border-radius: var(--raio-xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-dourado);
  color: var(--cor-fundo);
}
.fechamento::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(80% 55% at 50% 100%, var(--cor-dourado-claro), transparent 70%);
}
.fechamento .titulo { color: var(--cor-fundo); }
.fechamento__texto p { margin-top: 16px; font-size: 1.1rem; }
.fechamento__texto .fechamento__lede {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: clamp(1.4rem, 5.4vw, 1.75rem);
  line-height: 1.3;
}
.fechamento__pedido { font-weight: 700; }
.fechamento :focus-visible { outline-color: var(--cor-fundo); }

/* O celular "sai" da borda de baixo do bloco */
.fechamento__aparelho {
  display: flex;
  justify-content: center;
  margin-bottom: -38%;
}
.fechamento .celular {
  box-shadow:
    inset 0 0 0 1px rgba(203, 163, 93, 0.3),
    inset 0 0 0 5px #0b0705,
    0 40px 80px -20px rgba(21, 14, 8, 0.6);
}

@media (min-width: 960px) {
  .fechamento {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
    padding: 72px 72px 0;
  }
  .fechamento__texto { padding-bottom: 72px; }
  .fechamento__aparelho { align-self: end; margin-bottom: -150px; }
}


/* ---------- Rodapé ---------- */

.rodape {
  padding: 40px 0 48px;
  border-top: 1px solid var(--cor-linha);
  background: var(--cor-fundo-alt);
  color: var(--cor-dourado-apagado);
  font-size: 0.9rem;
}
.rodape__grid { display: grid; gap: 8px; justify-items: start; }
.rodape__selo { width: 92px; height: auto; margin-bottom: 12px; opacity: 0.9; }
.rodape__marca { color: var(--cor-texto-suave); font-weight: 700; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cor-dourado-apagado);
  text-underline-offset: 3px;
}
.rodape a:hover { color: var(--cor-dourado); }

@media (min-width: 768px) {
  .rodape__grid { grid-template-columns: auto auto 1fr auto; align-items: center; gap: 24px; }
  .rodape__selo { width: 80px; margin-bottom: 0; }
  .rodape__links { justify-self: end; }
}


/* ---------- CTA fixo (mobile) ---------- */

.cta-fixo {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px var(--margem) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(21, 14, 8, 0.97) 62%, rgba(21, 14, 8, 0));
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cta-fixo.visivel { transform: none; }
.cta-fixo .btn { min-height: 54px; padding-inline: 14px; font-size: 0.9375rem; }

@media (min-width: 768px) {
  .cta-fixo { display: none; }
}


/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}