/* =====================================================================
   LANDING.CSS — camada específica das páginas de campanha
   Usa o mesmo design system de style.css. Carregue os dois, nesta ordem.
   ===================================================================== */

/* Landing page não tem menu: o único caminho é o CTA. */
.lp-header{
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  padding: 24px 0;
  padding-top: max(24px, env(safe-area-inset-top));
}
.lp-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.lp-hero{
  position:relative;
  padding-top: clamp(120px, 20vw, 170px);
  padding-bottom: clamp(56px, 9vw, 96px);
  overflow:hidden;
  isolation:isolate;
}
.lp-hero::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(85% 60% at 50% 0%, rgba(216,196,140,.12), transparent 62%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
}
.lp-hero::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:
    linear-gradient(rgba(216,196,140,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,196,140,.05) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(70% 55% at 50% 25%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 25%, #000, transparent 78%);
}

.lp-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 72px);
  align-items:center;
}

.lp-hero h1{
  font-size: clamp(2.1rem, 6vw, 3.7rem);
  margin-bottom: 22px;
}
.lp-hero .lead{ margin-bottom: 30px; }

/* Lista de argumentos */
.lp-bullets{ list-style:none; padding:0; margin:0 0 32px; display:grid; gap:14px; }
.lp-bullets li{
  display:flex; gap:13px; align-items:flex-start;
  font-size:.98rem; color: var(--text-2);
}
.lp-bullets svg{ width:19px; height:19px; color: var(--gold); flex-shrink:0; margin-top:4px; }

/* Barra de credibilidade */
.lp-trust{
  display:flex; flex-wrap:wrap; gap: 10px 26px;
  padding-top: 26px;
  border-top:1px solid var(--line-soft);
  font-size:.82rem; color: var(--text-3);
}
.lp-trust span{ display:flex; align-items:center; gap:8px; }
.lp-trust svg{ width:15px; height:15px; color: var(--gold-deep); }

/* Caixa de conversão */
.lp-card{
  position:relative;
  padding: clamp(26px, 4vw, 38px);
  border-radius: var(--r-xl);
  border:1px solid rgba(216,196,140,.26);
  background: linear-gradient(160deg, rgba(24,33,54,.96), rgba(8,12,21,.98));
  box-shadow: 0 44px 90px -46px rgba(0,0,0,.9);
}
.lp-card-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-bottom: 20px;
}
.lp-card h2{
  font-family: var(--display);
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  font-weight:500;
  margin-bottom: 6px;
}
.lp-card > p{ color: var(--text-3); font-size:.9rem; margin:0 0 24px; }

.lp-quando{
  display:flex; align-items:center; gap:12px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: rgba(216,196,140,.07);
  border:1px solid rgba(216,196,140,.18);
  margin-bottom: 24px;
}
.lp-quando svg{ width:20px; height:20px; color: var(--gold); flex-shrink:0; }
.lp-quando strong{ display:block; font-size:.95rem; }
.lp-quando span{ font-size:.8rem; color: var(--text-3); }

/* ---------------------------------------------------------------------
   TRIAGEM
   --------------------------------------------------------------------- */
.triagem{ max-width: 720px; margin-inline:auto; }
.triagem-passo{ display:none; }
.triagem-passo.ativo{ display:block; animation: fadeUp .5s var(--ease-out); }

.triagem-pergunta{
  font-family: var(--display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  text-align:center;
  margin-bottom: 8px;
}
.triagem-sub{
  text-align:center; color: var(--text-3);
  font-size:.86rem; margin: 0 0 30px;
}

.opcoes{ display:grid; gap:12px; }
.opcao{
  display:flex; align-items:center; gap:16px;
  width:100%; text-align:left;
  padding: 19px 22px;
  border-radius: var(--r-md);
  border:1px solid var(--line-soft);
  background: rgba(255,255,255,.025);
  color: var(--text);
  font-size:1rem;
  transition: all .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.opcao:hover, .opcao:focus-visible{
  border-color: var(--gold);
  background: rgba(216,196,140,.07);
  transform: translateX(4px);
}
.opcao.escolhida{
  border-color: var(--gold);
  background: rgba(216,196,140,.12);
}
.opcao-marca{
  width:22px; height:22px; flex-shrink:0;
  border-radius:50%;
  border:1.5px solid var(--line);
  position:relative;
  transition: all .3s;
}
.opcao:hover .opcao-marca, .opcao.escolhida .opcao-marca{ border-color: var(--gold); }
.opcao.escolhida .opcao-marca::after{
  content:""; position:absolute; inset:4px;
  border-radius:50%; background: var(--gold);
}

/* Barra de progresso */
.progresso{
  height:3px; border-radius:3px;
  background: rgba(255,255,255,.07);
  overflow:hidden;
  margin-bottom: 34px;
}
.progresso i{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  border-radius:3px;
  width:0;
  transition: width .5s var(--ease-out);
}

.triagem-voltar{
  background:none; border:0; color: var(--text-3);
  font-size:.84rem; padding: 10px 0; margin-top: 18px;
  display:inline-flex; align-items:center; gap:7px;
  transition: color .3s;
}
.triagem-voltar:hover{ color: var(--gold); }

/* Recomendação final */
.recomendacao{
  text-align:center;
  padding: clamp(28px, 5vw, 44px);
  border-radius: var(--r-xl);
  border:1px solid rgba(216,196,140,.26);
  background: linear-gradient(160deg, rgba(24,33,54,.95), rgba(8,12,21,.97));
}
.recomendacao .selo{
  width:60px; height:60px; margin:0 auto 22px;
  display:grid; place-items:center;
  border-radius:50%;
  background: rgba(216,196,140,.1);
  border:1px solid rgba(216,196,140,.3);
  color: var(--gold);
}
.recomendacao .selo svg{ width:27px; height:27px; }
.recomendacao h3{ font-family: var(--display); font-size: clamp(1.4rem,3.6vw,1.9rem); margin-bottom:12px; }
.recomendacao p{ color: var(--text-2); margin: 0 auto 26px; max-width: 46ch; }

/* ---------------------------------------------------------------------
   PROVA / DEPOIMENTOS EM LINHA
   --------------------------------------------------------------------- */
.provas{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:18px;
}
.prova{
  padding: 24px 26px;
  border-radius: var(--r-lg);
  border:1px solid var(--line-soft);
  background: linear-gradient(170deg, rgba(20,29,48,.7), rgba(10,15,26,.9));
}
.prova p{ color: var(--text-2); font-size:.92rem; margin:0 0 18px; line-height:1.7; }
.prova footer{ display:flex; align-items:center; gap:12px; }
.prova .ini{
  width:40px; height:40px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:50%;
  background: rgba(216,196,140,.1);
  border:1px solid rgba(216,196,140,.25);
  color: var(--gold);
  font-family: var(--display); font-size:.95rem;
}
.prova strong{ display:block; font-size:.92rem; font-weight:600; }
.prova span{ font-size:.78rem; color: var(--gold); }

/* ---------------------------------------------------------------------
   PODCAST — prova social em vídeo
   --------------------------------------------------------------------- */
.pod-rail{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap:16px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding-bottom:14px;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  scrollbar-width:none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.pod-rail::-webkit-scrollbar{ display:none; }

.ep{
  scroll-snap-align:start;
  display:block;
  border-radius: var(--r-md);
  overflow:hidden;
  border:1px solid var(--line-soft);
  background: var(--surface);
  transition: transform .45s var(--ease-out), border-color .35s;
}
.ep:hover{ transform: translateY(-4px); border-color: rgba(216,196,140,.32); }

.ep-thumb{
  position:relative;
  aspect-ratio:16/9;
  background: var(--ink);
  overflow:hidden;
}
.ep-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease-out), opacity .35s;
}
.ep:hover .ep-thumb img{ transform: scale(1.06); opacity:.72; }
.ep-play{
  position:absolute; inset:0; margin:auto;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  background: rgba(216,196,140,.94);
  color:#10141C;
  box-shadow: 0 8px 26px -6px rgba(0,0,0,.7);
  transition: transform .35s var(--ease-out);
}
.ep:hover .ep-play{ transform: scale(1.12); }
.ep-play svg{ width:19px; height:19px; margin-left:2px; }

.ep-nome{
  padding: 14px 16px 16px;
  font-size:.92rem;
  font-weight:500;
  color: var(--text);
  line-height:1.4;
}
.ep-nome span{
  display:block;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--gold);
  margin-top:6px;
}

.pod-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; margin-bottom:34px;
}

/* ---------------------------------------------------------------------
   PÁGINA DE OBRIGADO
   --------------------------------------------------------------------- */
.obrigado{
  min-height: 100svh;
  display:grid; place-items:center;
  padding: 100px var(--pad) 60px;
  text-align:center;
}
.obrigado-box{ max-width: 620px; }
.obrigado .selo{
  width:84px; height:84px; margin:0 auto 30px;
  display:grid; place-items:center;
  border-radius:50%;
  background: rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.32);
  color:#4ADE80;
  animation: selo .7s var(--ease-out);
}
.obrigado .selo svg{ width:40px; height:40px; }
@keyframes selo{ from{ transform: scale(.6); opacity:0; } }
.obrigado h1{ font-size: clamp(1.9rem, 5.5vw, 3rem); margin-bottom:18px; }
.obrigado .lead{ margin: 0 auto 34px; }

.passos-obrigado{
  list-style:none; padding:0; margin: 40px 0 0;
  display:grid; gap:16px;
  text-align:left;
  counter-reset: po;
}
.passos-obrigado li{
  display:flex; gap:15px; align-items:flex-start;
  counter-increment: po;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border:1px solid var(--line-soft);
  background: rgba(255,255,255,.02);
}
.passos-obrigado li::before{
  content: counter(po);
  flex-shrink:0;
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  background: rgba(216,196,140,.1);
  border:1px solid rgba(216,196,140,.24);
  color: var(--gold);
  font-family: var(--display); font-size:.85rem;
}
.passos-obrigado strong{ display:block; margin-bottom:3px; font-size:.95rem; }
.passos-obrigado span{ font-size:.86rem; color: var(--text-2); }

/* ---------------------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width: 900px){
  .lp-grid{ grid-template-columns: 1fr; }
  .lp-card{ order:-1; }   /* no celular, a conversão vem primeiro */
}

@media (max-width: 520px){
  .opcao{ padding: 17px 18px; font-size:.95rem; gap:13px; }
  .lp-trust{ gap: 8px 18px; font-size:.78rem; }
}