/* ==========================================================================
   MAPA DO INGLÊS — Landing Page
   ========================================================================== */

/* --------------------------------------------------------- 1. FONTES ---- */
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat-var.woff2') format('woff2');
  font-weight:600 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* --------------------------------------------------------- 2. TOKENS ---- */
:root{
  --azul:#13306B;
  --azul-2:#2B58B8;
  --amarelo:#FFC400;
  --amarelo-2:#FFD84D;
  --amarelo-esc:#E8A900;
  --amarelo-claro:#FFF6D6;
  --preto:#0B0C0F;
  --preto-2:#15171D;
  --tinta:#16181F;
  --tinta-2:#5A6072;
  --tinta-3:#868C9C;
  --linha:#E7E9F0;
  --creme:#FFFCF3;
  --cinza:#F5F6F9;
  --branco:#fff;
  --verde:#16A34A;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --largura:1140px;
  --fonte-t:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fonte-c:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sombra:0 4px 16px rgba(16,20,40,.07);
  --sombra-2:0 12px 40px rgba(16,20,40,.12);
  --sombra-cta:0 8px 22px rgba(232,169,0,.42);
}

/* ----------------------------------------------------------- 3. BASE ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--branco); color:var(--tinta);
  font-family:var(--fonte-c); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--fonte-t);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0;color:var(--tinta)}
p{margin:0}
:focus-visible{outline:3px solid var(--azul-2);outline-offset:3px;border-radius:6px}

.container{width:100%;max-width:var(--largura);margin-inline:auto;padding-inline:20px}
.secao{padding:clamp(56px,8vw,96px) 0}
.centro{text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------- 4. TIPOGRAFIA BLOCO -- */
.eyebrow{
  display:block;font-family:var(--fonte-t);font-weight:700;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#C8940A;margin-bottom:14px;
}
.titulo{font-size:clamp(26px,4.2vw,42px);margin-bottom:14px}
.subtitulo{font-size:clamp(15px,1.7vw,18px);color:var(--tinta-2);max-width:640px;margin-inline:auto}
.bloco-topo{margin-bottom:clamp(32px,5vw,52px)}

/* seções escuras */
.escuro{background:var(--preto);color:#EDEFF4}
.escuro .titulo{color:#fff}
.escuro .subtitulo{color:#A3A9B8}
.escuro .eyebrow{color:var(--amarelo)}
.escuro .destaque{color:var(--preto)}
.verde{color:var(--verde)}

/* --------------------------------------------------------- 5. BOTÕES ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fonte-t);font-weight:800;font-size:clamp(15px,1.8vw,18px);
  letter-spacing:.01em;color:var(--tinta);text-align:center;
  background:linear-gradient(180deg,var(--amarelo-2),var(--amarelo));
  border-radius:999px;padding:18px 40px;min-height:58px;
  box-shadow:var(--sombra-cta);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  animation:pulsa 2.8s ease-in-out infinite;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,169,0,.5);filter:brightness(1.04)}
.btn:active{transform:translateY(0)}
.btn--largo{width:100%;max-width:560px}
@keyframes pulsa{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}

.cta-bloco{margin-top:clamp(32px,5vw,48px);text-align:center}
.selo{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;font-size:14px;color:var(--tinta-2);
}
.escuro .selo{color:#9AA1B2}
.selo svg{flex:none}

/* ---------------------------------------------------- 6. BARRA ALERTA --- */
.barra-alerta{
  background:linear-gradient(90deg,var(--amarelo),var(--amarelo-2),var(--amarelo));
  color:#1A1400;text-align:center;
  font-family:var(--fonte-t);font-weight:700;font-size:clamp(12px,1.6vw,14.5px);
  padding:11px 20px;
}

/* ----------------------------------------------------------- 7. HERO ---- */
.hero{
  background:
    radial-gradient(900px 420px at 50% -10%,#FFF6D8 0%,rgba(255,246,216,0) 70%),
    linear-gradient(180deg,#FFFDF7 0%,#fff 62%);
  padding:clamp(30px,5vw,50px) 0 clamp(44px,6vw,64px);
  text-align:center;
}
.hero__nota{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  background:#fff;border:1px solid var(--linha);border-radius:999px;
  padding:7px 16px;box-shadow:var(--sombra);margin-bottom:22px;
  font-size:13.5px;font-weight:600;color:var(--tinta-2);
}
.hero__nota strong{font-family:var(--fonte-t);font-weight:800;color:var(--tinta);font-size:14px}
.hero__nota-div{width:1px;height:15px;background:var(--linha)}
.estrelas{color:#FFB300;letter-spacing:1px;font-size:14px;line-height:1}
.hero h1{font-size:clamp(29px,5.6vw,54px);max-width:900px;margin:0 auto 18px}
.destaque{
  background:var(--amarelo);color:var(--tinta);
  padding:.04em .16em;border-radius:5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero__sub{
  font-size:clamp(15px,1.9vw,19px);color:var(--tinta-2);
  max-width:660px;margin:0 auto clamp(26px,4vw,34px);
}
.hero__img{max-width:760px;margin:0 auto clamp(26px,4vw,34px)}
.hero__img img{
  width:100%;border-radius:var(--r-lg);box-shadow:var(--sombra-2);
  border:1px solid rgba(19,48,107,.08);
}
.prova{
  display:flex;flex-direction:column;align-items:center;gap:13px;
  margin-top:30px;
}
.avatares{display:flex}
.avatares img{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:3px solid #fff;box-shadow:0 2px 8px rgba(16,20,40,.14);
}
.avatares img+img{margin-left:-15px}
.prova strong{
  font-family:var(--fonte-t);font-weight:800;font-size:15px;
  text-transform:uppercase;letter-spacing:.03em;
}

/* ------------------------------------------------------- 8. CARROSSEL --- */
.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* A trilha tem ~9.700px de largura e 36 cards. Se a animação rodar desde o
   primeiro frame, o navegador recalcula layout continuamente justamente
   enquanto deveria estar pintando a imagem do topo — atrasa o LCP.
   Por isso nasce pausada: o JS solta quando a seção chega perto da tela. */
.marquee__trilha{
  display:flex;width:max-content;gap:20px;
  animation:desliza 70s linear infinite;
  animation-play-state:paused;
  will-change:transform;
}
.marquee.rodando .marquee__trilha{animation-play-state:running}
.marquee.rodando:hover .marquee__trilha{animation-play-state:paused}
@keyframes desliza{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 10px),0,0)}}
.mapa{
  flex:none;width:clamp(250px,34vw,450px);
  border-radius:var(--r);overflow:hidden;background:#FDFBF0;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 30px rgba(0,0,0,.35);
  cursor:zoom-in;transition:transform .2s ease;
}
.mapa:hover{transform:translateY(-4px)}
.mapa img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(6,7,10,.92);
}
.lightbox.aberto{display:flex}
.lightbox img{max-width:min(1100px,96vw);max-height:90vh;width:auto;border-radius:var(--r);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.lightbox__fechar{
  position:absolute;top:16px;right:18px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__fechar:hover{background:rgba(255,255,255,.26)}

/* ----------------------------------------------------- 9. DEPOIMENTOS --- */
.depoimentos{background:#F7F7F4}
.carrossel{position:relative}
.carrossel__pista{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 4px 20px;scrollbar-width:none;-ms-overflow-style:none;
}
.carrossel__pista::-webkit-scrollbar{display:none}
.depo{
  flex:0 0 clamp(268px,84vw,352px);scroll-snap-align:center;
  background:#fff;border:1px solid var(--linha);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;
}
.depo__foto{width:100%;aspect-ratio:4/3;object-fit:cover;background:#EFEFE6}
.depo__corpo{padding:20px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.depo__estrelas{color:#FFB300;letter-spacing:2px;font-size:15px;line-height:1}
.depo__texto{
  margin:0;font-size:15.5px;color:var(--tinta-2);line-height:1.62;flex:1;
  font-style:italic;
}
.depo__pessoa{display:flex;align-items:center;gap:12px;padding-top:6px}
.depo__pessoa img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.depo__nome{font-family:var(--fonte-t);font-weight:800;font-size:15.5px;line-height:1.3}
.depo__tag{font-size:13.5px;color:var(--tinta-3)}
.carrossel__ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.seta{
  width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--linha);
  box-shadow:var(--sombra);display:flex;align-items:center;justify-content:center;
  color:var(--azul);transition:transform .15s ease,background .15s ease;
}
.seta:hover{transform:scale(1.07);background:var(--amarelo-claro)}
.pontos{display:flex;gap:8px}
.pontos button{width:9px;height:9px;border-radius:50%;background:#CBD0DC;transition:all .2s ease}
.pontos button[aria-current="true"]{background:var(--azul);width:26px;border-radius:999px}

/* ------------------------------------------------------ 10. NÍVEIS ------ */
#kit{background:#F9F9F6}
.abas{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
  margin-bottom:clamp(24px,4vw,34px);
}
.aba{
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--linha);border-radius:var(--r);background:#fff;
  padding:12px 14px;text-align:left;transition:all .18s ease;
  box-shadow:0 1px 3px rgba(16,20,40,.05);
}
.aba:hover{border-color:var(--amarelo);box-shadow:0 4px 14px rgba(232,169,0,.18)}
.aba__cod{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--cinza);color:var(--tinta);
  font-family:var(--fonte-t);font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.aba__info{display:flex;flex-direction:column;min-width:0}
.aba__nome{font-family:var(--fonte-t);font-weight:700;font-size:14px;color:var(--tinta);line-height:1.25}
.aba__qtd{font-size:12.5px;color:var(--tinta-3);line-height:1.3}
.aba[aria-selected="true"]{
  background:var(--amarelo);border-color:var(--amarelo-esc);
  box-shadow:0 6px 18px rgba(232,169,0,.35);
}
.aba[aria-selected="true"] .aba__cod{background:#fff}
.aba[aria-selected="true"] .aba__qtd{color:#6B5400}

.painel{max-width:940px;margin-inline:auto}
.painel[hidden]{display:none}

.painel__cab{
  background:#fff;border:1px solid var(--linha);border-left:5px solid var(--amarelo);
  border-radius:var(--r);padding:clamp(20px,3vw,26px) clamp(20px,3vw,30px);
  box-shadow:var(--sombra);margin-bottom:clamp(20px,3vw,26px);
}
.painel__topo{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:12px;
}
.painel__titulo{font-size:clamp(18px,2.4vw,23px)}
.painel__badge{
  background:var(--amarelo-claro);border:1px solid var(--amarelo);border-radius:999px;
  padding:7px 16px;font-family:var(--fonte-t);font-weight:700;font-size:13.5px;white-space:nowrap;
}
.painel__obj{font-size:15.5px;color:var(--tinta-2)}
.painel__obj b{color:var(--tinta);font-weight:700}

.grupos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,22px)}
@media (max-width:760px){.grupos{grid-template-columns:1fr}}
.grupo{
  min-width:0;
  background:#fff;border:1px solid var(--linha);border-top:3px solid var(--amarelo);
  border-radius:var(--r);padding:22px clamp(20px,2.4vw,26px) 26px;box-shadow:var(--sombra);
}
.grupo h4{
  font-size:17px;color:var(--tinta);margin-bottom:16px;padding-bottom:16px;
  border-bottom:1px dashed #DDE0E9;letter-spacing:-.01em;
}
/* flex com quebra: garante que a linha possa quebrar entre um tópico e outro
   (com `display:inline` o navegador não encontra ponto de quebra e o card
   estoura a largura da tela no celular) */
.grupo__lista{
  display:flex;flex-wrap:wrap;align-items:baseline;
  row-gap:6px;font-size:15px;line-height:1.55;color:var(--tinta-2);
}
.grupo__lista li{display:inline-flex;align-items:baseline;max-width:100%}
.grupo__lista li::after{content:'•';color:#C7CCD9;margin:0 11px;font-size:13px}
.grupo__lista li:last-child::after{content:none}

/* -------------------------------------------------- 11. PARA QUEM É ----- */
.paraquem{background:#fff}
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{
  background:#fff;border:1px solid var(--linha);border-radius:18px;
  padding:34px 28px;box-shadow:var(--sombra);text-align:center;
}
.card__icone{
  width:58px;height:58px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.card__icone--verde{background:#EDF6E6}
.card__icone--rosa{background:#FDEAF1}
.card__icone--azul{background:#E8EEFC}
.card h3{font-size:18px;margin-bottom:12px}
.card p{font-size:15px;color:var(--tinta-2)}

/* ------------------------------------------------------- 12. BÔNUS ------ */
.bonus-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.bonus{
  flex:1 1 300px;max-width:340px;
  background:var(--preto-2);border:1px solid #23262F;border-radius:20px;
  display:flex;flex-direction:column;padding:18px;
}
.bonus__moldura{background:#0A0B0E;border-radius:14px;overflow:hidden;margin-bottom:18px}
.bonus__img{width:100%;aspect-ratio:4/3;object-fit:cover}
.bonus__corpo{display:flex;flex-direction:column;gap:11px;flex:1;padding:0 4px 4px}
.bonus__n{
  align-self:flex-start;background:var(--amarelo);color:#1A1400;border-radius:999px;
  padding:5px 13px;font-family:var(--fonte-t);font-weight:800;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;
}
.bonus h3{color:#fff;font-size:20px;line-height:1.25}
.bonus__tag{font-size:14.5px;color:#fff;font-weight:700}
.bonus p{font-size:14.5px;color:#9AA1B2;flex:1}
.bonus__preco{display:flex;align-items:center;gap:12px;margin-top:8px}
.bonus__de{font-size:14px;color:#6B7285;text-decoration:line-through}
.bonus__gratis{
  font-family:var(--fonte-t);font-weight:800;font-size:12.5px;color:#15A14A;
  background:#0F2A1A;border-radius:999px;padding:5px 14px;letter-spacing:.05em;
}

/* ------------------------------------------------------ 13. OFERTA ------ */
.oferta{background:#fff}
.oferta__box{
  max-width:620px;margin-inline:auto;background:#fff;
  border:2px solid var(--amarelo);border-radius:var(--r-xl);
  padding:clamp(24px,4vw,40px);text-align:center;
  box-shadow:0 0 0 6px rgba(255,196,0,.10), 0 18px 50px rgba(200,150,0,.16);
}
.oferta__img{max-width:420px;margin:0 auto 26px}
.oferta__img img{border-radius:var(--r);box-shadow:var(--sombra-2)}
.oferta__de{font-size:15px;color:var(--tinta-2)}
.oferta__preco{
  font-family:var(--fonte-t);font-weight:800;font-size:clamp(46px,9vw,66px);
  color:var(--tinta);line-height:1;margin:10px 0 12px;letter-spacing:-.035em;
}
.oferta__cond{font-size:14.5px;color:var(--tinta-2)}
.oferta__gar{
  display:flex;align-items:center;justify-content:center;gap:7px;margin:10px 0 2px;
  color:var(--verde);font-size:14.5px;font-weight:700;
}
.resumo{text-align:left;margin:26px 0 10px;border-top:1px dashed #DDE0E9;padding-top:22px}
.resumo__t{
  font-family:var(--fonte-t);font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:8px;
}
.resumo li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:14.5px;padding:13px 0;border-bottom:1px dashed #E6E8EF;
}
.resumo li:last-child{border-bottom:0}
.resumo span:first-child{display:flex;align-items:center;gap:9px;color:var(--tinta);font-weight:700}
.resumo b{color:var(--tinta-3);font-weight:500;text-decoration:line-through;white-space:nowrap}
.ok{font-size:15px;line-height:1;flex:none}
.selo__ico{color:var(--verde)}

/* ----------------------------------------------------- 14. GARANTIA ----- */
.garantia{background:#fff}
.garantia__box{
  max-width:720px;margin-inline:auto;text-align:center;background:#F6FCF8;
  border:1px solid #D4EEDF;border-radius:var(--r-xl);padding:clamp(28px,4.5vw,46px);
}
.garantia__escudo{
  width:78px;height:78px;margin:0 auto 20px;border-radius:50%;
  background:#E6F6EC;display:flex;align-items:center;justify-content:center;font-size:36px;
}
.garantia__box h2{font-size:clamp(21px,3.2vw,30px);margin-bottom:16px}
.garantia__box p{color:var(--tinta-2);font-size:16px}
.garantia__box p+p{margin-top:16px}
.garantia__reforco{color:var(--tinta)!important;font-weight:700}

/* ------------------------------------------------------ 15. ENTREGA ----- */
#entrega{background:#FAFAF7}
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.passo{
  background:#fff;border:1px solid var(--linha);border-radius:18px;
  padding:32px 26px;box-shadow:var(--sombra);text-align:center;
}
.passo__n{
  width:46px;height:46px;margin:0 auto 18px;border-radius:50%;
  background:var(--preto);color:var(--amarelo);
  font-family:var(--fonte-t);font-weight:800;font-size:19px;
  display:flex;align-items:center;justify-content:center;
}
.passo h3{font-size:17.5px;margin-bottom:9px}
.passo p{font-size:15px;color:var(--tinta-2)}

/* --------------------------------------------------------- 16. FAQ ------ */
.faq{max-width:780px;margin-inline:auto}
.faq details{
  border:1px solid var(--linha);border-radius:var(--r);background:#fff;
  margin-bottom:12px;overflow:hidden;transition:border-color .18s ease;
}
.faq details[open]{border-color:var(--amarelo);box-shadow:var(--sombra)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-family:var(--fonte-t);font-weight:700;font-size:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';flex:none;width:24px;height:24px;
  color:var(--amarelo-esc);font-size:24px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__r{padding:0 22px 20px;color:var(--tinta-2);font-size:15.5px}

/* ------------------------------------------------------- 17. FINAL ------ */
.final__box{
  max-width:620px;margin:clamp(30px,5vw,44px) auto 0;
  background:var(--preto-2);border:2px solid var(--amarelo);border-radius:var(--r-xl);
  padding:clamp(24px,4vw,40px);text-align:center;
  box-shadow:0 0 0 6px rgba(255,196,0,.08), 0 20px 50px rgba(255,196,0,.10);
}
.final__box h3{color:#fff;font-size:clamp(20px,3vw,27px);margin-bottom:10px}
.final__box>p{color:#9AA1B2;font-size:15.5px;margin-bottom:26px}
.lista-final{text-align:left;margin-top:26px;border-top:1px solid #2A2E39;padding-top:24px;display:grid;gap:14px}
.lista-final li{display:flex;gap:12px;align-items:center;font-size:14.5px;color:#D6DAE4}
.lista-final li.verde{color:var(--verde);font-weight:700}
.tick{
  flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--amarelo);color:#1A1400;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.escuro .selo__ico{color:#15A14A}

/* ------------------------------------------------------- 18. RODAPÉ ----- */
.rodape{background:var(--preto);color:#7C8497;padding:clamp(44px,6vw,64px) 0 34px;text-align:center}
.rodape__logo{
  font-family:var(--fonte-t);font-weight:800;font-size:22px;color:#fff;margin-bottom:22px;
  display:inline-flex;align-items:center;gap:9px;
}
.rodape__logo span{color:var(--amarelo)}
.rodape__aviso{
  font-size:12.5px;line-height:1.75;max-width:760px;margin:0 auto 26px;color:#666E80;
}
.rodape__links{display:flex;gap:10px 24px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-size:13.5px}
.rodape__links a:hover{color:var(--amarelo)}
.rodape__copy{font-size:13px;padding-top:22px;border-top:1px solid #1E212A;margin-top:26px}

/* ------------------------------------ 19. OFERTA DE SAÍDA (popup) ------ */
.saida{
  position:fixed;inset:0;z-index:95;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,9,12,.82);
  opacity:0;transition:opacity .25s ease;
}
.saida[hidden]{display:none}
.saida.visivel{opacity:1}

.saida__caixa{
  position:relative;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;
  background:#fff;border:2px solid var(--amarelo);border-radius:var(--r-xl);
  padding:clamp(26px,4vw,36px) clamp(20px,4vw,34px);text-align:center;
  box-shadow:0 0 0 6px rgba(255,196,0,.14), 0 24px 60px rgba(0,0,0,.45);
  transform:translateY(16px) scale(.97);outline:none;transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.saida.visivel .saida__caixa{transform:translateY(0) scale(1)}

.saida__x{
  position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;
  color:var(--tinta-3);font-size:24px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.saida__x:hover{background:var(--cinza);color:var(--tinta)}

.saida__selo{
  display:inline-block;background:#FEE2E2;color:#B91C1C;border-radius:999px;
  padding:5px 14px;margin-bottom:14px;
  font-family:var(--fonte-t);font-weight:800;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;
}
.saida__titulo{font-size:clamp(21px,4vw,27px);margin-bottom:10px}
.saida__sub{font-size:15px;color:var(--tinta-2);margin-bottom:18px}
.saida__img{
  width:100%;max-width:300px;margin:0 auto 18px;
  border-radius:var(--r);box-shadow:var(--sombra-2);
}
.saida__de{font-size:14.5px;color:var(--tinta-2)}
.saida__preco{
  font-family:var(--fonte-t);font-weight:800;font-size:clamp(40px,8vw,54px);
  color:var(--tinta);line-height:1;margin:6px 0 10px;letter-spacing:-.035em;
}
.saida__cond{font-size:13.5px;color:var(--tinta-2);margin-bottom:22px}
.saida__recusa{
  display:block;margin:16px auto 0;font-size:13.5px;color:var(--tinta-3);
  text-decoration:underline;text-underline-offset:3px;
}
.saida__recusa:hover{color:var(--tinta-2)}

@media (max-width:480px){
  .saida__img{max-width:220px}
}

/* ------------------------------- 20. PÁGINAS LEGAIS (termos/política) --- */
.legal__topo{border-bottom:1px solid var(--linha);background:#fff;padding:18px 0}
.legal__topo .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal__logo{font-family:var(--fonte-t);font-weight:800;font-size:19px;color:var(--tinta)}
.legal__logo span{color:var(--amarelo-esc)}
.legal__voltar{font-size:14.5px;font-weight:600;color:var(--tinta-2)}
.legal__voltar:hover{color:var(--tinta)}

.legal{padding:clamp(40px,6vw,64px) 0 clamp(48px,7vw,72px)}
.legal .container{max-width:760px}
.legal h1{font-size:clamp(28px,4.5vw,40px);margin-bottom:8px}
.legal__data{font-size:14px;color:var(--tinta-3);margin-bottom:32px}
.legal h2{
  font-size:clamp(18px,2.4vw,21px);margin:38px 0 14px;padding-top:26px;
  border-top:1px solid var(--linha);
}
.legal p{font-size:16px;color:var(--tinta-2);margin-bottom:14px;line-height:1.75}
.legal p strong{color:var(--tinta)}
.legal ul{margin:0 0 16px;padding-left:4px}
.legal li{
  font-size:16px;color:var(--tinta-2);line-height:1.7;
  padding:5px 0 5px 20px;position:relative;
}
.legal li::before{
  content:'';position:absolute;left:0;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--amarelo-esc);
}
.legal a{color:var(--azul-2);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--tinta)}
.legal__nota{
  margin-top:44px;background:var(--amarelo-claro);border:1px solid var(--amarelo);
  border-radius:var(--r);padding:20px 22px;
}
.legal__nota p{margin:0;font-size:14.5px;color:#6B5400}
.legal__nota strong{color:#4A3A00}

/* -------------------------------------- 20. POPUP DE PROVA SOCIAL ------- */
.pop{
  position:fixed;left:20px;bottom:20px;z-index:80;
  display:flex;align-items:flex-start;gap:12px;
  width:min(330px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--linha);border-radius:18px;
  padding:14px 34px 14px 14px;
  box-shadow:0 12px 34px rgba(16,20,40,.18);
  opacity:0;transform:translateY(14px);
  transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;
}
.pop[hidden]{display:none}
.pop.visivel{opacity:1;transform:translateY(0);pointer-events:auto}

.pop__x{
  position:absolute;top:8px;right:10px;width:22px;height:22px;
  color:var(--tinta-3);font-size:19px;line-height:1;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.pop__x:hover{background:var(--cinza);color:var(--tinta)}

.pop__thumb{position:relative;flex:none}
.pop__thumb img{width:54px;height:54px;border-radius:12px;object-fit:cover;background:#FDFBF0}
.pop__ok{
  position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;
  background:var(--verde);color:#fff;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;
}

.pop__txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.pop__linha{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pop__nome{font-family:var(--fonte-t);font-weight:800;font-size:15px;color:var(--tinta)}
.pop__selo{
  display:inline-flex;align-items:center;gap:3px;
  background:#E8F7EE;color:#12823F;border-radius:999px;padding:2px 8px;
  font-size:10px;font-weight:700;letter-spacing:.05em;white-space:nowrap;
}
.pop__acao{font-size:14.5px;color:var(--tinta-2)}
.pop__tempo{font-size:12.5px;color:var(--tinta-3)}

@media (max-width:520px){
  .pop{left:12px;right:12px;bottom:12px;width:auto}
}

/* -------------------------------------------------- 20. RESPONSIVO ------ */
@media (max-width:1024px){
  .abas{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .secao{padding:48px 0}
  .abas{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .aba{padding:10px;gap:9px}
  .aba__cod{width:34px;height:34px;font-size:14px}
  .aba__nome{font-size:13px}
  .aba__qtd{font-size:11.5px}
  .btn{padding:17px 26px;width:100%;max-width:420px}
  .hero__nota{font-size:12.5px}
  .avatares img{width:40px;height:40px}
  .painel__topo{flex-direction:column;align-items:flex-start}
  .depo{flex-basis:min(86vw,340px)}
  .resumo li{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .marquee__trilha{animation:none}
}

/* ==========================================================================
   21. HEADLINE DA PÁGINA DO MÉXICO (/mex)
   A manchete espanhola tem 68 caracteres contra 48 da brasileira, então
   precisa da própria escala. Alvo: 3 linhas no celular, 2 no desktop.
   Os limites saíram de medição real: em 360px só cabe em 3 linhas até 25px;
   em 768px só cabe em 2 linhas até 40px; na caixa de 900px, até 50px.
   Escopado em .h1-mx para não mexer na home em português.
   ========================================================================== */
.hero h1.h1-mx{ font-size:clamp(22px, 6.95vw, 30px) }
/* Abaixo de 360px (iPhone SE antigo) 6.95vw ja estoura: em 320px so cabe
   em 3 linhas ate 21px, e 6.95vw daria 22.2px. 6.4vw cobre 320-359px. */
@media (max-width:359px){
  .hero h1.h1-mx{ font-size:6.4vw }
}
@media (min-width:481px){
  .hero h1.h1-mx{ font-size:clamp(30px, 5.2vw, 50px) }
}

/* Telas de 320px (iPhone SE antigo): duas colunas de aba não cabem em 280px
   de área útil e vazavam 13px para fora, criando rolagem horizontal. */
@media (max-width:359px){
  .abas{ grid-template-columns:1fr }
}