/* ==========================================================================
   Página de captura — A Melhor Black Friday Pra Sua Loja (João + Fernanda)
   Identidade Dona de Loja: Noite / Desert / Cobre — manual IDV (JEFFCOUT, 2024)
   Fregan Serif -> Playfair Display · Outfit · Loren Blake -> Parisienne

   A captura (1ª seção) é NOITE — clima de Black Friday, e o fundo azul das
   duas fotos casa com ela. As seções de leitura alternam creme e areia;
   "o que você aprende" e o fechamento voltam ao noite para marcar ritmo.

   Mesma regra das outras LPs: CSS mora em arquivo, nunca inline (CSP 'self').
   ========================================================================== */

:root{
  --noite-01:#7D8FB2; --noite-02:#5C7099; --noite-03:#293D66;
  --noite-04:#17294D; --noite-05:#0A1833; --noite-06:#030A1A;
  --desert-01:#FBF6F1; --desert-02:#F6ECDD; --desert-03:#EAD2B6;
  --desert-04:#E0B993; --desert-05:#C77B49; --desert-06:#9A5136;
  --cobre-01:#FBEAE4; --cobre-02:#FADACD; --cobre-03:#F3B29B;
  --cobre-04:#E27754; --cobre-05:#CE5D35; --cobre-06:#904027;

  --acento:#A8492A;        /* cobre que passa AA sobre creme */
  --acento-noite:#F3B29B;  /* cobre que passa AA sobre noite */

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --script:'Parisienne', cursive;

  --raio:16px;
  --gutter:clamp(16px,5vw,64px);
  --transicao:220ms cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  background:var(--noite-05);
  color:var(--noite-04);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }

/* =============================================================== HERÓI === */
.heroi{
  position:relative; isolation:isolate; overflow:hidden;
  color:var(--desert-01);
  background:linear-gradient(165deg, #17294D 0%, #0A1833 52%, #030A1A 100%);
}
.heroi-fundo{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.brilho{ position:absolute; border-radius:50%; filter:blur(90px); }
.brilho-cobre{
  width:min(60vw,640px); aspect-ratio:1; right:-10vw; top:-6vh; opacity:.6;
  background:radial-gradient(circle, rgba(226,119,84,.34) 0%, rgba(226,119,84,0) 70%);
}
.brilho-noite{
  width:min(70vw,760px); aspect-ratio:1; left:-24vw; bottom:-26vh; opacity:.7;
  background:radial-gradient(circle, rgba(92,112,153,.45) 0%, rgba(92,112,153,0) 70%);
}
.marca-dagua{
  position:absolute; left:-12vw; top:50%; translate:0 -50%;
  width:min(58vw,640px); opacity:.06;
}
.marca-dagua path{ fill:var(--desert-01); }
.marca-dagua .estrela{ fill:var(--noite-05); }

.topo{ padding:clamp(18px,2.6vw,26px) var(--gutter) 0; }
.logo{ display:inline-flex; align-items:center; gap:11px; color:var(--desert-01); }
.simbolo{ width:30px; height:30px; flex:none; }
.logo-texto{
  font-family:var(--serif); font-size:1rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
}
.logo-texto sup{ font-size:.5em; color:var(--cobre-04); top:-.7em; }

.palco{
  width:100%; max-width:1240px; margin-inline:auto;
  padding:clamp(20px,3vw,40px) var(--gutter) clamp(40px,5vw,72px);
  display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px);
  align-items:center;
}
.conteudo{ max-width:600px; }

.evento{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,2.6vw,1.45rem); line-height:1.2;
  color:var(--acento-noite);
  margin-bottom:12px;
}

.selo{
  display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:clamp(.64rem,1.8vw,.72rem); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--desert-02);
  background:rgba(226,119,84,.14);
  border:1px solid rgba(226,119,84,.45);
  border-radius:999px; padding:8px 16px 8px 13px;
  margin-bottom:clamp(16px,2.4vw,22px);
}
.selo i{ font-style:normal; color:rgba(243,178,155,.6); }
.ponto{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--cobre-04); box-shadow:0 0 0 0 rgba(226,119,84,.6);
  animation:pulso 2s infinite;
}
@keyframes pulso{
  70%{ box-shadow:0 0 0 9px rgba(226,119,84,0); }
  100%{ box-shadow:0 0 0 0 rgba(226,119,84,0); }
}

h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.45rem);
  line-height:1.15; letter-spacing:-.012em;
  color:#FFFDFB;
  text-wrap:balance;
}
h1 em{
  display:block; margin-top:.35em;
  font-style:italic; font-weight:400; font-size:.72em; line-height:1.3;
  color:var(--acento-noite);
}

.linha-fina{
  font-size:clamp(1rem,2.2vw,1.12rem); font-weight:400; line-height:1.6;
  color:rgba(246,236,221,.86);
  margin-top:clamp(14px,2vw,20px);
  max-width:36em;
}

/* --------------------------------------------------------------- ficha -- */
.ficha{
  margin-top:clamp(22px,3vw,32px);
  background:var(--desert-01);
  color:var(--noite-04);
  border-radius:var(--raio);
  padding:clamp(20px,3vw,28px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65);
}
.campo{ margin-bottom:14px; }
.campo label{
  display:block; margin-bottom:6px;
  font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--noite-02);
}
.campo input{
  width:100%; font-family:inherit; font-size:1rem;
  color:var(--noite-05); background:#FFFDFB;
  border:1px solid var(--desert-03); border-radius:10px; padding:12px 15px;
  transition:border-color var(--transicao), box-shadow var(--transicao);
}
.campo input::placeholder{ color:#8E99AF; font-weight:300; }
.campo input:hover{ border-color:var(--desert-04); }
.campo input:focus{
  outline:none; border-color:var(--cobre-05);
  box-shadow:0 0 0 3px rgba(206,93,53,.18);
}
.campo.invalido input{ border-color:#C0392B; background:#FEF6F4; }
.erro{ display:none; margin-top:6px; font-size:.78rem; font-weight:500; color:#B03A26; }
.campo.invalido .erro{ display:block; }

/* --------------------------------------------------------------- botão -- */
.botao{
  position:relative; display:block; width:100%; margin-top:6px;
  font-family:inherit; font-size:clamp(.92rem,2.2vw,1.02rem); font-weight:700;
  letter-spacing:.075em; text-transform:uppercase; text-align:center; text-decoration:none;
  color:#FFF9F4;
  background:linear-gradient(135deg, #BE5230 0%, #A8492A 48%, #8E3E26 100%);
  border:none; border-radius:10px; padding:17px 22px; cursor:pointer;
  box-shadow:0 14px 28px -12px rgba(144,64,39,.6);
  transition:transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
}
.botao:hover{ transform:translateY(-2px); box-shadow:0 20px 34px -12px rgba(144,64,39,.7); filter:brightness(1.06); }
.botao:active{ transform:translateY(0); }
.botao:focus-visible{ outline:3px solid var(--cobre-04); outline-offset:3px; }
.botao[disabled]{ cursor:progress; filter:saturate(.5) brightness(.95); transform:none; }
.botao-carregando{ display:none; }
.botao[disabled] .botao-texto{ visibility:hidden; }
.botao[disabled] .botao-carregando{
  display:block; position:absolute; inset:0; margin:auto;
  width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(255,249,244,.32); border-top-color:#FFF9F4;
  animation:girar .7s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }
.botao-link{ max-width:420px; margin:clamp(26px,3.4vw,36px) auto 0; }

.micro-ficha{
  margin-top:14px; text-align:center;
  font-size:.84rem; line-height:1.5; color:var(--noite-02);
}
.lgpd{
  margin-top:12px; text-align:center;
  font-size:.76rem; line-height:1.5; color:var(--noite-02);
}
.lgpd a{ color:var(--noite-02); text-underline-offset:3px; }
.lgpd a:hover{ color:var(--acento); }
.aviso{ display:none; margin-top:12px; text-align:center; font-size:.86rem; font-weight:500; color:#B03A26; }
.aviso.aparece{ display:block; }

/* -------------------------------------------------------------- a dupla -- */
/* Duas fotos em arco, a dela na frente e a dele deslocada atrás — os dois
   assinam a aula, mas a oferta é do Método Dona de Loja, da Fernanda. */
.dupla{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  max-width:560px; width:100%; margin-inline:auto;
}
.retrato{ margin:0; display:flex; flex-direction:column; align-items:center; }
.moldura{
  width:100%; aspect-ratio:4/5;
  border-radius:1000px 1000px 18px 18px; overflow:hidden;
  background:var(--noite-04);
  border:1.5px solid rgba(224,185,147,.45);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.moldura img{ width:100%; height:100%; object-fit:cover; }
.retrato-fer .moldura img{ object-position:center 22%; }
.retrato-joao .moldura img{ object-position:center 12%; }
.retrato-joao{ margin-top:clamp(28px,5vw,56px); }
.assinatura{
  margin-top:10px; text-align:center;
  font-family:var(--script); font-size:clamp(1.35rem,3vw,1.8rem);
  line-height:1.2; color:var(--desert-04);
}

/* ============================================================ SEÇÕES ===== */
.secao{ padding:clamp(56px,8vw,104px) var(--gutter); }
.secao-creme{ background:var(--desert-01); }
.secao-areia{ background:var(--desert-02); }
.secao-noite{
  background:linear-gradient(170deg, #17294D 0%, #0A1833 100%);
  color:var(--desert-01);
}
.estreito{ max-width:680px; margin-inline:auto; }
.largo{ max-width:1080px; margin-inline:auto; }
.centro{ text-align:center; }

h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.18; letter-spacing:-.01em;
  color:var(--noite-05);
  text-wrap:balance;
  margin-bottom:clamp(22px,3vw,34px);
}
h2 em{ font-style:italic; font-weight:400; color:var(--acento); }
.secao-noite h2{ color:#FFFDFB; }
.secao-noite h2 em{ color:var(--acento-noite); }

/* ---------------------------------------------------- 2. todo ano igual -- */
.ritmo{ list-style:none; }
.ritmo li{
  font-size:clamp(1.08rem,2.4vw,1.28rem); line-height:1.5; color:var(--noite-03);
  padding:14px 0 14px 28px; position:relative;
  border-bottom:1px solid var(--desert-03);
}
.ritmo li::before{
  content:""; position:absolute; left:2px; top:50%; translate:0 -50%;
  width:10px; height:10px; rotate:45deg; background:var(--desert-04);
}
.pancada{
  margin-top:clamp(22px,3vw,30px);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.7rem,4.4vw,2.6rem); line-height:1.15;
  color:var(--acento);
}
.pancada-menor{ font-size:clamp(1.25rem,3vw,1.6rem); line-height:1.35; }

/* -------------------------------------------------------- 3. o problema -- */
.trio{ display:grid; grid-template-columns:1fr; gap:16px; }
.cartao{
  background:#FFFDFB; border:1px solid var(--desert-03); border-radius:var(--raio);
  padding:clamp(22px,3vw,30px);
  box-shadow:0 20px 44px -30px rgba(23,41,77,.35);
}
.cartao-num{
  display:block; margin-bottom:12px;
  font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--desert-05);
}
.cartao p{ font-size:clamp(1.05rem,2.2vw,1.18rem); line-height:1.5; color:var(--noite-03); }
.cartao strong{ display:block; color:var(--noite-05); font-weight:600; }

/* ------------------------------------------------------ 4. o que aprende -- */
.aprende{
  list-style:none; counter-reset:item;
  display:grid; grid-template-columns:1fr; gap:12px;
  max-width:920px; margin-inline:auto;
}
.aprende li{
  counter-increment:item;
  display:flex; align-items:center; gap:18px;
  background:rgba(251,246,241,.05);
  border:1px solid rgba(224,185,147,.22); border-radius:14px;
  padding:18px 20px;
  font-size:clamp(1rem,2.1vw,1.1rem); line-height:1.45; color:var(--desert-02);
}
.aprende li::before{
  content:counter(item, decimal-leading-zero);
  flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--noite-05); background:var(--cobre-03);
}

/* ------------------------------------------------------- 5. sem gravação -- */
.alerta{
  background:#FFFDFB; border:1px solid var(--cobre-03); border-radius:20px;
  padding:clamp(26px,4vw,44px);
  box-shadow:0 26px 60px -36px rgba(144,64,39,.5);
}
.alerta p{ font-size:clamp(1.02rem,2.2vw,1.12rem); color:var(--noite-03); margin-top:14px; }
.alerta p strong{ color:var(--noite-05); }
.alerta .alerta-selo{
  display:inline-flex; align-items:center; gap:10px; margin-top:0;
  font-weight:700; font-size:clamp(.8rem,2vw,.9rem); letter-spacing:.12em; text-transform:uppercase;
  color:var(--cobre-06); background:var(--cobre-01);
  border:1px solid var(--cobre-03); border-radius:999px; padding:8px 16px;
}
.alerta .pancada{ margin-top:22px; color:var(--acento); }

/* -------------------------------------------------------- 6. professores -- */
.professores{ display:grid; grid-template-columns:1fr; gap:18px; }
.professor{
  display:grid; grid-template-columns:110px 1fr; gap:18px; align-items:center;
  background:#FFFDFB; border:1px solid var(--desert-03); border-radius:var(--raio);
  padding:18px;
}
.professor img{
  width:110px; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center 15%;
  border-radius:1000px 1000px 12px 12px;
}
.professor h3{
  font-family:var(--serif); font-weight:500; font-size:1.4rem; line-height:1.2;
  color:var(--noite-05); margin-bottom:6px;
}
.professor p{ font-size:.98rem; line-height:1.55; color:var(--noite-03); }

/* ---------------------------------------------------------- 7. para quem -- */
.checa{ list-style:none; }
.checa li{
  position:relative; padding:12px 0 12px 40px;
  font-size:clamp(1.02rem,2.2vw,1.12rem); line-height:1.5; color:var(--noite-03);
}
.checa li::before{
  content:""; position:absolute; left:0; top:13px;
  width:26px; height:26px; border-radius:50%;
  background:var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23FFF9F4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.nao-e{
  margin-top:20px; padding:16px 18px;
  border-left:3px solid var(--desert-04); background:var(--desert-02);
  border-radius:0 12px 12px 0;
  font-style:italic; color:var(--noite-02);
}

/* ----------------------------------------------------------------- 8. faq -- */
.faq details{
  background:#FFFDFB; border:1px solid var(--desert-03); border-radius:14px;
  margin-bottom:12px;
}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 20px;
  font-weight:600; font-size:1.05rem; color:var(--noite-05);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; flex:none;
  font-family:var(--serif); font-size:1.5rem; line-height:1; color:var(--acento);
  transition:rotate var(--transicao);
}
.faq details[open] summary::after{ rotate:45deg; }
.faq summary:focus-visible{ outline:3px solid var(--cobre-05); outline-offset:2px; border-radius:14px; }
.faq details p{ padding:0 20px 18px; color:var(--noite-03); }

/* --------------------------------------------------------- 9. fechamento -- */
.fecho p{ font-size:clamp(1.05rem,2.3vw,1.2rem); color:rgba(246,236,221,.86); }
.fecho h2{ margin-bottom:18px; }
.fecho-data{
  margin-top:22px;
  font-family:var(--serif); font-size:clamp(1.3rem,3vw,1.7rem) !important;
  color:#FFFDFB !important;
}
.fecho-data em{ color:var(--acento-noite); }

/* -------------------------------------------------------------- rodapé -- */
.rodape{
  background:var(--noite-06); color:var(--noite-01);
  text-align:center; padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
}
.rodape p + p{ margin-top:8px; letter-spacing:.04em; text-transform:none; }
.rodape a{ color:var(--noite-01); text-underline-offset:3px; }
.rodape sup{ color:var(--cobre-04); }

/* ---------------------------------------------------- barra fixa celular -- */
.barra-fixa{ display:none; }

/* ================================ CELULAR ================================ */
@media (max-width:899px){
  .conteudo{ margin-inline:auto; text-align:center; }
  .selo{ justify-content:center; font-size:.58rem; letter-spacing:.05em; gap:5px; padding:7px 11px; }
  .linha-fina{ margin-inline:auto; }
  .ficha{ text-align:left; padding:18px 18px 16px; }
  .campo{ margin-bottom:11px; }
  .campo input{ padding:11px 14px; }
  .botao{ padding:15px 18px; }

  .barra-fixa:not([hidden]){
    display:block; position:fixed; z-index:40;
    left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    text-align:center; text-decoration:none;
    font-weight:700; font-size:.9rem; letter-spacing:.07em; text-transform:uppercase;
    color:#FFF9F4; padding:15px 18px; border-radius:12px;
    background:linear-gradient(135deg, #BE5230 0%, #A8492A 48%, #8E3E26 100%);
    box-shadow:0 18px 36px -14px rgba(3,10,26,.7);
  }
  body.longa .rodape{ padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width:389px){
  h1{ font-size:1.48rem; }
  .selo{ font-size:.54rem; letter-spacing:.02em; }
  .professor{ grid-template-columns:84px 1fr; gap:14px; }
  .professor img{ width:84px; }
}

/* ============================== COMPUTADOR =============================== */
@media (min-width:900px){
  .palco{ grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); }
  .trio{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .aprende{ grid-template-columns:1fr 1fr; gap:14px; }
  .professores{ grid-template-columns:1fr 1fr; gap:22px; }
  .professor{ grid-template-columns:140px 1fr; padding:22px; }
  .professor img{ width:140px; }
}

/* ======================= VERSÃO DE SEÇÃO ÚNICA (unica.html) ============== */
/* A página é só o herói: ele ocupa a tela inteira e o rodapé encosta embaixo. */
body.unica{ min-height:100dvh; display:flex; flex-direction:column; }
body.unica .heroi{ flex:1; display:flex; flex-direction:column; }
body.unica .palco{ flex:1; }

/* ============================== ACESSIBILIDADE =========================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ============================ ISCA (HONEYPOT) ============================ */
.fora-da-tela{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ========================= TARJA DE CONSENTIMENTO ======================== */
/* Quem cria é o pixel.js (data-tarja="sim"). Os dois botões têm o mesmo peso. */
.tarja-consentimento{
  position:fixed; z-index:50; left:16px; right:16px; bottom:16px;
  max-width:560px; margin-inline:auto;
  background:#FFFDFB; border:1px solid var(--desert-03); border-radius:var(--raio);
  padding:18px 20px; box-shadow:0 24px 56px -22px rgba(3,10,26,.6);
  font-size:.9rem; line-height:1.55; color:var(--noite-03);
}
.tarja-acoes{ display:flex; gap:10px; margin-top:14px; }
.tarja-botao{
  flex:1; font-family:inherit; font-size:.88rem; font-weight:600;
  padding:11px 14px; border-radius:9px; cursor:pointer;
}
.tarja-botao:focus-visible{ outline:3px solid var(--cobre-05); outline-offset:2px; }
.tarja-recusar{ background:var(--desert-02); border:1px solid var(--desert-04); color:var(--noite-04); }
.tarja-aceitar{ background:var(--acento); border:1px solid var(--acento); color:#FFF9F4; }
.tarja-link{ display:inline-block; margin-top:11px; font-size:.78rem; color:var(--noite-02); text-underline-offset:3px; }