/* 150 Mapas Mentais de Agronomia — página de vendas.
   Visual sóbrio (pedido do dono, 01/10/2026): fundos neutros, verde só como cor de marca e do botão,
   sem neon, sem brilho, sem texto em degradê. O foco são as imagens reais do produto. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/sora-latin.woff2) format('woff2')}
:root{
  --fundo:#FAFAF7;--cinza:#F1F2EE;--branco:#fff;--linha:#E2E4DE;
  --texto:#0A0A0A;--suave:#59615B;--fraco:#7A817C;
  --verde:#2E7D3B;--verde-esc:#24652F;--verde-claro:#E7F1E8;--marca:#2F5D3A;
  --carvao:#0A0A0A;--carvao-2:#161616;
  --ambar:#9A6A14;--vermelho:#B42318;
  --corpo:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --titulo:"Sora","Inter",system-ui,sans-serif;
  --raio:16px;--sombra:0 1px 2px rgba(16,24,20,.05),0 8px 24px -16px rgba(16,24,20,.25);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* nada com "hidden" aparece, mesmo que outra regra defina display */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 17px/1.6 var(--corpo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
img{height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--titulo);color:var(--texto);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(26px,5.2vw,38px);font-weight:700}
h3{font-size:19px;font-weight:700}
p{margin:0}
a{color:var(--verde-esc)}
:focus-visible{outline:3px solid #8DB596;outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.estreito{max-width:760px;margin-inline:auto}
.centro{text-align:center}
.sec{padding:68px 0}
.cinza{background:var(--cinza)}
.kicker{display:block;font:700 12.5px/1.2 var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--marca);margin-bottom:10px}
.hl{color:var(--marca)}
.texto{font-size:clamp(17px,2vw,19px);color:var(--suave);margin-top:14px}
.pular{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:10px 14px;z-index:99}
.pular:focus{left:8px;top:8px}
.so-cel{display:none}
@media (max-width:767px){.so-cel{display:inline}}

/* ---------- botões ---------- */
.cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:15px 24px;border-radius:12px;border:0;
  background:var(--verde);color:#fff;text-decoration:none;text-align:center;font:700 17.5px/1.25 var(--corpo);
  box-shadow:0 6px 16px -8px rgba(36,101,47,.7);transition:background .15s,transform .15s}
.cta:hover{background:var(--verde-esc);transform:translateY(-1px)}
@media (min-width:768px){.cta{display:inline-flex;width:auto;max-width:100%;padding-inline:32px}}

/* ---------- 1. barra ---------- */
.barra{position:relative;z-index:45;background:#B42318;color:#fff;text-align:center;font:800 13px/1.3 var(--corpo);letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;box-shadow:0 2px 8px -4px rgba(0,0,0,.35)}

/* ---------- 2. topo ---------- */
.hero{padding:34px 0 52px;background:linear-gradient(180deg,#F1F3EE,var(--fundo))}
.hero-grid{display:block;max-width:760px}
.hero-txt{text-align:center}
.pilula{display:inline-block;border:1px solid #C9D6CB;background:#fff;color:var(--marca);font:700 12.5px/1 var(--corpo);letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:99px}
.hero h1{font-size:clamp(31px,8vw,52px);font-weight:800;line-height:1.08;margin:16px 0 4px}
.hero .sub{font-size:clamp(17px,2.2vw,20px);color:var(--suave);max-width:40ch;margin-inline:auto}
.marcas{list-style:none;padding:0;margin:16px auto 20px;display:grid;gap:9px;width:fit-content;text-align:left}
.marcas li{position:relative;padding-left:32px;font-weight:600}
.marcas li::before,.lista-plano .sim::before,.soma-lista li::before,.quem li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat}
.marcas b{color:var(--marca)}
.ancora-topo{margin:0 0 8px;color:var(--suave);font-weight:600}
.ancora-topo s{color:var(--vermelho);text-decoration-thickness:2px}
.seguro{margin-top:12px;font-size:14px;color:var(--fraco)}
@media (min-width:900px){.hero{padding:54px 0 72px}}

/* ---------- 3. dor ---------- */
.dor-grid{display:grid;gap:22px}
@media (min-width:900px){.dor-grid{grid-template-columns:1fr 1fr;gap:56px;align-items:start}}
.lista-x{list-style:none;padding:0;margin:0;border-top:1px solid var(--linha)}
.lista-x li{position:relative;padding:15px 0 15px 34px;border-bottom:1px solid var(--linha);font-weight:600}
.lista-x li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;
  background:#FBE9E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.fecho{margin-top:22px;padding:18px 20px;border-left:4px solid var(--verde);background:#fff;border-radius:0 12px 12px 0;color:var(--suave);font-size:18px;line-height:1.5}
.fecho b{display:block;color:var(--texto)}

/* ---------- 4. como é cada mapa ---------- */
.como-grid{display:grid;gap:26px;align-items:center}
@media (min-width:900px){.como-grid{grid-template-columns:.9fr 1.1fr;gap:56px}}
.legenda{list-style:none;counter-reset:n;padding:0;margin:22px 0 0;display:grid;gap:10px}
.legenda li{counter-increment:n;position:relative;padding-left:40px;color:var(--suave);line-height:1.45}
.legenda li b{color:var(--texto)}
.legenda li::before{content:counter(n);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--carvao);color:#fff;font:700 13px/26px var(--corpo);text-align:center}
.como-img{margin:0}
.como-img img{border-radius:14px;box-shadow:var(--sombra)}
.como-img a{display:block}
.como-img figcaption{margin-top:10px;text-align:center;font-size:13.5px;color:var(--fraco)}

/* ---------- carrosséis (áreas e bônus) ---------- */
.topo-sec{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px 12px}
.topo-sec > .carrossel{grid-column:1/-1}
.setas{display:flex;gap:8px}
.setas button{width:42px;height:42px;border-radius:50%;border:1px solid var(--linha);background:#fff;color:var(--texto);display:grid;place-items:center;cursor:pointer;transition:background .15s,opacity .15s}
.setas button:hover{background:var(--verde-claro)}
.setas button:disabled{opacity:.35;cursor:default}
.setas svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.carrossel{display:grid;grid-auto-flow:column;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 12px;scrollbar-width:none}
.carrossel::-webkit-scrollbar{display:none}
.carrossel > *{scroll-snap-align:start}
.arraste{text-align:center;color:var(--fraco);font-size:13px;margin-top:2px}
.carrossel-areas{grid-auto-columns:min(82%,360px)}
.slide{margin:0}
.slide img{border-radius:14px;box-shadow:var(--sombra)}
.slide figcaption{margin-top:10px;font-size:14px;color:var(--suave);line-height:1.35}
.slide figcaption b{color:var(--texto)}
.total-areas{text-align:center;margin-top:18px;color:var(--suave)}
.total-areas b{color:var(--texto)}
@media (min-width:1000px){#areas .arraste{display:none}}

/* ---------- 6. o que você vai receber ---------- */
.item-recebe{position:relative;display:grid;grid-template-columns:84px 1fr;gap:16px;align-items:center;max-width:760px;margin:28px auto 0;
  padding:16px;border-radius:var(--raio);background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra)}
.item-recebe img{width:84px}
.rot{display:block;font:700 11.5px/1.2 var(--corpo);letter-spacing:.12em;text-transform:uppercase;color:var(--marca)}
.item-recebe .rot{padding-right:56px}
.item-recebe h3{font-size:clamp(18px,2.6vw,22px);margin-top:4px}
.item-recebe p{color:var(--suave);font-size:14.5px;line-height:1.45;margin-top:6px}
.item-recebe .tag{position:absolute;top:12px;right:12px;background:var(--verde-claro);color:var(--verde-esc);font:700 12px/1 var(--corpo);padding:7px 10px;border-radius:99px}
@media (min-width:700px){.item-recebe{grid-template-columns:104px 1fr auto;padding:18px 22px}.item-recebe img{width:104px}.item-recebe .rot{padding-right:0}.item-recebe .tag{position:static}}
.bloco-bonus{max-width:1120px;margin:34px auto 0}
.bonus-tit{font-size:22px}
/* bônus: cartões grandes com a arte quadrada de cada livro (pedido do dono: mais visual e chamativo) */
.carrossel-bonus{grid-auto-columns:min(78%,300px);gap:16px}
.bonus-card{--c:#2E7D3B;--cf:#E7F1E8;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linha);border-radius:18px;overflow:hidden;
  text-decoration:none;color:var(--texto);box-shadow:var(--sombra);transition:transform .2s,box-shadow .2s}
.bonus-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(16,24,20,.06),0 18px 34px -18px rgba(16,24,20,.4)}
.bonus-card.azul{--c:#2F5E8C;--cf:#E6EEF6}.bonus-card.ambar{--c:#8A5A10;--cf:#F7EEDC}.bonus-card.rosa{--c:#8E3A6B;--cf:#F5E6EF}
.bonus-card img{width:100%;aspect-ratio:1;object-fit:cover}
.bonus-card .rot{margin:14px 16px 0;align-self:flex-start;background:var(--cf);color:var(--c);padding:6px 10px;border-radius:99px;font-size:11px}
.bonus-card h4{margin:10px 16px 0;font-size:18px;line-height:1.25}
.bonus-card ul{list-style:none;padding:0;margin:10px 16px 0;display:grid;gap:6px;font-size:14px;color:var(--suave)}
.bonus-card li{position:relative;padding-left:20px;line-height:1.35}
.bonus-card li::before{content:"✓";position:absolute;left:0;color:var(--c);font-weight:800}
.bonus-card .ver{margin:auto 16px 16px;padding-top:14px;font-weight:700;font-size:14px;color:var(--c)}
@media (min-width:1000px){.carrossel-bonus{grid-auto-columns:calc((100% - 48px)/4)}.bloco-bonus .setas,#recebe .arraste{display:none}}
.soma{max-width:760px;margin:22px auto 0;padding:24px 20px;border-radius:var(--raio);text-align:center;background:var(--verde-claro);border:1px solid #C9DDCC}
.soma-tit{font:700 12.5px/1 var(--corpo);letter-spacing:.12em;text-transform:uppercase;color:var(--verde-esc)}
.soma-lista{list-style:none;padding:0;margin:14px auto 0;display:grid;gap:7px;max-width:420px;text-align:left}
.soma-lista li{position:relative;padding-left:30px;font-weight:600;font-size:15px}
.soma-preco{margin-top:16px;color:var(--suave);font-weight:600}
.soma-preco strong{display:block;font:800 clamp(40px,10vw,50px)/1.05 var(--titulo);color:var(--texto);letter-spacing:-.03em;margin-top:4px}
.soma-dif{color:var(--suave);font-size:14px;margin:6px 0 16px}
.soma .cta{width:100%;display:flex;max-width:440px;margin:0 auto}

/* ---------- 7. para quem é ---------- */
.quem{list-style:none;padding:0;margin:30px auto 0;max-width:860px;display:grid;gap:10px}
@media (min-width:700px){.quem{grid-template-columns:1fr 1fr;gap:12px}}
.quem li{position:relative;background:#fff;border:1px solid var(--linha);border-radius:12px;padding:16px 16px 16px 50px;font-weight:600;line-height:1.4}
.quem li::before{left:16px;top:16px}

/* ---------- 8. planos ---------- */
.planos{display:grid;gap:14px;max-width:560px;margin:32px auto 0}
.plano{position:relative;background:#fff;border-radius:18px;border:1px solid var(--linha);box-shadow:var(--sombra);padding:24px 20px}
.plano h3{font-size:22px}
.plano-sub{color:var(--suave);margin-top:4px;font-weight:600}
.lista-plano{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.lista-plano li{position:relative;padding-left:32px;line-height:1.4}
.lista-plano .nao{color:var(--vermelho)}
.lista-plano .nao s{text-decoration-color:#D92D20;text-decoration-thickness:2px}
.lista-plano .nao::before{content:"";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:#FBE9E7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D92D20' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.preco{margin:18px 0 14px;padding:16px;border-radius:12px;background:var(--fundo);border:1px solid var(--linha);text-align:center}
.de{color:var(--suave);font-weight:600}
.de s{color:var(--vermelho);text-decoration-thickness:2px}
.tudo{color:var(--suave);font-weight:600}
.valor{display:flex;justify-content:center;align-items:flex-start;gap:4px;font:800 clamp(52px,14vw,64px)/1 var(--titulo);letter-spacing:-.04em;color:var(--texto);margin-top:4px}
.valor small{font-size:.34em;margin-top:.4em;letter-spacing:0;color:var(--suave)}
.unico{font-size:14px;color:var(--suave);margin-top:6px}
.plano .cta{width:100%;display:flex}
.beneficios{list-style:none;padding:14px 0 0;margin:16px 0 0;display:grid;gap:10px;border-top:1px dashed var(--linha)}
.beneficios li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.4;color:var(--suave)}
.beneficios b{color:var(--texto)}
.beneficios svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--verde);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.soma-rot{margin-top:16px;font:700 12.5px/1 var(--corpo);letter-spacing:.12em;text-transform:uppercase;color:var(--verde-esc)}
/* Básico "sem cor": cinza, com ✓ e ícones verdes e botão com laranja claro em volta (pedido do dono) */
.plano.basico{background:#F6F1E7;border-color:#E5DBC8;box-shadow:none}
.plano.basico h3{color:#0A0A0A}
.plano.basico .plano-sub,.plano.basico .lista-plano .sim{color:#5E625F}
.plano.basico .lista-plano .nao{color:#9A4A42}
.plano.basico .preco{background:#EEE6D6;border-color:#E0D4BD}
.plano.basico .valor{color:#0A0A0A}
.plano.basico .cta-basico{background:#FFF4E8;color:#9A4F0E;border:2px solid #E9A866;box-shadow:none;min-height:50px;font-size:16px}
.plano.basico .cta-basico:hover{background:#FDE8D2;transform:none}
.plano.basico .beneficios{border-top-color:#E0D4BD}
.plano.basico .beneficios b{color:#0A0A0A}
/* Completo: único com destaque */
@property --giro{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes giro{to{--giro:360deg}}
@supports not (background:conic-gradient(from 0deg,red,blue)){.plano.completo{border-color:var(--verde)}}
.selo-topo{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#F1DC9B,#C9A24B);color:#000;z-index:2;font:700 12px/1 var(--corpo);letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:99px;white-space:nowrap}
.plano.completo h3,.plano.completo .plano-sub{text-align:center}
.arte-completo{position:relative;overflow:hidden;margin:-8px -8px 18px;padding:22px 14px 20px;border-radius:14px;text-align:center;
  background:radial-gradient(120% 80% at 50% 0,#FFFFFF,#E8EFE6 70%);border:1px solid #D6E2D5}
.arte-completo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);transform:translateX(-120%);animation:luz 3.6s ease-in-out infinite}
@keyframes luz{0%,35%{transform:translateX(-120%)}75%,100%{transform:translateX(120%)}}
.arte-rot{display:inline-block;font:700 11.5px/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--marca);margin-bottom:8px}
.arte-completo img{width:min(100%,470px);margin:0 auto;filter:drop-shadow(0 14px 16px rgba(16,24,20,.28))}
.arte-tit{margin-top:12px;font:800 clamp(22px,6vw,28px)/1.15 var(--titulo);letter-spacing:-.02em;color:var(--texto)}
.arte-tit span{display:block;color:var(--marca)}
.arte-preco{margin-top:10px;font-weight:600;color:var(--suave)}
.arte-preco b{display:inline-block;margin-left:4px;background:var(--verde);color:#fff;font:800 20px/1 var(--titulo);padding:8px 12px;border-radius:10px;letter-spacing:-.01em}
.leve-tudo{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 10px;text-decoration:none;font:600 16px/1.3 var(--corpo);color:var(--texto);text-align:center}
.leve-tudo b{color:var(--verde-esc);font-weight:800;white-space:nowrap}
.leve-tudo svg{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--verde);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:desce 1.6s ease-in-out infinite}
@keyframes desce{50%{transform:translateY(5px)}}
.cronometro{max-width:560px;margin:18px auto 0;background:#FFF4E0;border:1px solid #F0D7A6;border-radius:12px;padding:12px;font-weight:600;text-align:center}

/* ---------- 9. garantia ---------- */
.garantia{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.selo-garantia{width:140px;height:140px;flex:none}
.garantia p{margin-top:10px;color:var(--suave)}
@media (min-width:700px){.garantia{flex-direction:row;text-align:left;gap:30px}}

/* depoimentos */
.depos{display:grid;gap:14px;margin-top:28px}
@media (min-width:700px){.depos{grid-template-columns:repeat(3,1fr)}}
.depos figure{margin:0}

/* ---------- 10. FAQ ---------- */
.faq{margin-top:28px;display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--linha);border-radius:12px}
.faq details[open]{border-color:#C9D6CB}
.faq summary{cursor:pointer;list-style:none;padding:17px 54px 17px 18px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--cinza);color:var(--texto);font:600 19px/26px var(--corpo);text-align:center}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 18px 17px;color:var(--suave)}

/* ---------- 11. final ---------- */
.final{background:var(--carvao);color:#E4E8E4}
.final h2{color:#fff;margin:6px 0 24px}
.final-img{width:min(100%,420px);margin:0 auto 18px}
.final-nota{margin-top:14px;color:#A9B2AB;font-size:14px}

/* ---------- 12. rodapé ---------- */
.rodape{background:#000;color:#B9C1BA;font-size:14px;padding:30px 0 30px;text-align:center}
.rodape p+p{margin-top:8px}
.rodape a,.link{color:#E4E8E4}
.link{background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
.aviso{max-width:60ch;margin:16px auto 0;font-size:13px;color:#8E978F}
@media (min-width:768px){.rodape{padding-bottom:30px}}

/* ---------- botão flutuante (celular) ---------- */
.flutuante{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(250,250,247,.96);
  border-top:1px solid var(--linha);box-shadow:0 -8px 20px -16px rgba(0,0,0,.35)}
.flutuante .cta{min-height:50px;font-size:16px;padding:12px 16px}
@media (min-width:768px){.flutuante{display:none!important}}

/* ---------- pop-up de desconto ---------- */
.popup{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.popup[hidden]{display:none}
.popup-fundo{position:absolute;inset:0;background:rgba(20,24,21,.6)}
.popup-caixa{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;text-align:center;border-radius:18px;padding:26px 20px 20px;
  background:#fff;box-shadow:0 30px 80px -24px rgba(0,0,0,.6);animation:surge .2s ease-out}
@keyframes surge{from{transform:translateY(10px);opacity:0}}
.popup-x{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--cinza);color:var(--texto);font-size:22px;line-height:1;cursor:pointer}
.popup-selo{display:inline-block;background:#FFF4E0;color:var(--ambar);border:1px solid #F0D7A6;font:700 12px/1 var(--corpo);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:99px}
.popup-caixa img{width:min(100%,320px);margin:12px auto 6px}
.popup-caixa h2{font-size:clamp(22px,6vw,27px)}
.popup-sub{color:var(--suave);margin-top:6px}
.popup-preco{margin-top:12px;color:var(--suave);font-weight:600}
.popup-preco s{color:var(--vermelho);text-decoration-thickness:2px}
.popup-preco strong{display:block;font:800 44px/1.1 var(--titulo);color:var(--texto);letter-spacing:-.03em}
.popup-eco{color:var(--verde-esc);font-weight:700;font-size:14px;margin:4px 0 14px}
.popup-caixa .cta{width:100%;display:flex}
.popup-nao{display:inline-block;margin-top:12px;color:var(--fraco);font-size:14px}
body.sem-rolagem{overflow:hidden}

/* ---------- banner de cookies ---------- */
.cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--linha);border-radius:14px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.4);padding:16px;font-size:14px}
.cookies-bt{display:flex;gap:10px;margin-top:12px}
.cookies button{flex:1;min-height:44px;border-radius:10px;font:700 15px var(--corpo);cursor:pointer}
.bt-recusar{background:#fff;border:2px solid var(--carvao);color:var(--carvao)}
.bt-aceitar{background:var(--carvao);border:2px solid var(--carvao);color:#fff}

/* ---------- páginas legais ---------- */
.legal{padding:40px 18px 64px}
.legal h1{font-size:clamp(28px,6vw,40px);margin-bottom:8px}
.legal h2{font-size:22px;margin:28px 0 8px}
.legal p,.legal li{color:#3A433C}
.legal p+p{margin-top:10px}
.voltar{display:inline-block;margin-bottom:20px;font-weight:600}
.cta-sec{display:inline-flex;align-items:center;justify-content:center;margin-top:20px;padding:13px 22px;border-radius:12px;border:2px solid var(--verde);color:var(--verde-esc);background:transparent;text-decoration:none;font:700 15px/1.2 var(--corpo);cursor:pointer}

/* ---------- Plano Completo PREMIUM (pedido do dono): preto + dourado, com brilho contínuo ---------- */
.plano.completo{--ouro:#C9A24B;--ouro-claro:#F1DC9B;padding-top:30px;color:#EDEDED;border:3px solid transparent;
  background:linear-gradient(180deg,#0B0B0B,#151515) padding-box,
    conic-gradient(from var(--giro),#7A5B1A 0deg,#C9A24B 90deg,#F1DC9B 170deg,#fff 190deg,#F1DC9B 210deg,#C9A24B 290deg,#7A5B1A 360deg) border-box;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.75),0 0 0 6px rgba(201,162,75,.10);animation:giro 4s linear infinite}
@supports not (background:conic-gradient(from 0deg,red,blue)){.plano.completo{border-color:#C9A24B}}
.plano.completo .arte-completo{background:radial-gradient(70% 60% at 50% 45%,rgba(201,162,75,.30),transparent 70%),#0E0E0E;border:1px solid rgba(201,162,75,.35)}
.plano.completo .arte-completo::after{background:linear-gradient(105deg,transparent 35%,rgba(255,240,200,.35) 50%,transparent 65%)}
.plano.completo .arte-rot,.plano.completo .soma-rot{color:var(--ouro-claro)}
.plano.completo .arte-tit{color:#fff}
.plano.completo .arte-tit span{color:var(--ouro-claro)}
.plano.completo .arte-preco{color:#BDBDBD}
.plano.completo .arte-preco b{background:linear-gradient(180deg,#F1DC9B,#C9A24B);color:#000}
.plano.completo .lista-plano li{color:#E6E6E6}
.plano.completo .lista-plano .sim::before{background-color:#C9A24B;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E")}
.plano.completo .preco{background:#1A1A1A;border-color:rgba(201,162,75,.35)}
.plano.completo .tudo,.plano.completo .unico,.plano.completo .valor small{color:#BDBDBD}
.plano.completo .valor{color:#fff}
.plano.completo .cta{position:relative;overflow:hidden}
.plano.completo .cta::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:luz 3.6s ease-in-out 1.2s infinite}
.plano.completo .beneficios{border-top-color:rgba(255,255,255,.14)}
.plano.completo .beneficios li{color:#BDBDBD}
.plano.completo .beneficios b{color:#fff}
.plano.completo .beneficios svg{stroke:var(--ouro-claro)}
.arte-de{margin-top:10px;color:#BDBDBD;font-weight:600}
.arte-de s,.plano.completo .de s{color:#FF6B6B;text-decoration-color:#FF4D4D;text-decoration-thickness:2px;font-weight:700}
.plano.completo .de{color:#BDBDBD}

/* ---------- topo: livro + mapas de exemplo entre o título e o subtítulo (pedido do dono) ---------- */
.vitrine{position:relative;width:min(100%,520px);aspect-ratio:1.75/1;margin:6px auto 10px}
.vitrine img{position:absolute}
.vitrine .mapa{width:44%;border-radius:8px;border:2px solid #fff;box-shadow:0 14px 26px -12px rgba(16,24,20,.55)}
.vitrine .m1{left:0;top:4%;transform:rotate(-8deg)}
.vitrine .m2{left:4%;top:46%;transform:rotate(-3deg)}
.vitrine .m3{right:0;top:4%;transform:rotate(8deg)}
.vitrine .m4{right:4%;top:46%;transform:rotate(3deg)}
.vitrine .livro{z-index:2;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 18px 22px rgba(16,24,20,.4))}
/* botão do topo mais chamativo: maior, caixa alta e um reflexo passando */
.cta-topo{position:relative;overflow:hidden;min-height:62px;font-size:18.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:800}
.cta-topo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);animation:luz 3.2s ease-in-out infinite}
@media (min-width:768px){.cta-topo{min-width:420px}}

/* compacta o topo para o botão caber na 1ª tela */
.marcas{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;width:auto;margin:14px auto 18px}
.marcas li{padding-left:26px;font-size:15px}
.marcas li::before{width:19px;height:19px;background-size:11px;top:2px}
.hero .sub{margin-top:2px}
.vitrine{width:min(100%,520px,calc((100svh - var(--resto-topo,590px)) * 1.75))}
@media (min-width:900px){.vitrine{--resto-topo:560px}}
@media (max-width:620px) and (max-height:760px){
  .hero{padding-top:18px}
  .pilula{padding:7px 12px;font-size:11.5px}
  .hero h1{font-size:28px;margin-top:12px}
  .hero .sub{font-size:16px}
  .vitrine{--resto-topo:520px}
}
/* aviso de cookies compacto: não pode cobrir o botão da 1ª tela */
.cookies{left:8px;right:8px;bottom:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.35;border-radius:12px}
.cookies p{flex:1}
.cookies-bt{margin-top:0;gap:6px;flex:none}
.cookies button{min-height:34px;padding:0 12px;font-size:13px;border-radius:8px}

/* ---------- aviso de cookies GRANDE NO TOPO (pedido do dono): aparece na 1ª tela, logo abaixo da faixa vermelha.
   "Aceitar e continuar" em destaque; "Recusar" fica como link discreto (exigência da LGPD: recusar tem que ser possível).
   Não bloqueia a página (muro de cookies é inadequado pela ANPD e derruba a conversão). ---------- */
.cookies{position:fixed;left:0;right:0;top:37px;bottom:auto;z-index:50;max-width:none;margin:0;border:0;border-radius:0 0 18px 18px;
  display:block;text-align:center;padding:22px 20px 16px;background:#fff;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);font-size:15px;line-height:1.5}
.cookies-tit{font:800 20px/1.2 var(--titulo);margin-bottom:8px}
.cookies p{max-width:520px;margin-inline:auto}
.cookies .bt-aceitar{display:block;width:100%;max-width:420px;margin:16px auto 0;min-height:52px;border:0;border-radius:12px;background:var(--verde);color:#fff;font:800 17px/1 var(--corpo);cursor:pointer}
.cookies .bt-aceitar:hover{background:var(--verde-esc)}
.cookies .bt-recusar{display:inline-block;margin-top:10px;min-height:0;padding:4px 8px;border:0;background:none;color:var(--fraco);font:500 13px/1.3 var(--corpo);text-decoration:underline;cursor:pointer}
@media (min-width:768px){.cookies{left:50%;right:auto;transform:translateX(-50%);width:640px}}
/* sem a pílula (pedido do dono): título sobe e a vitrine cresce no celular */
.hero h1{margin-top:0}
@media (max-width:620px){.vitrine{width:min(calc(100% + 24px),560px,calc((100svh - var(--resto-topo,545px)) * 1.75));margin-left:50%;margin-right:0;translate:-50% 0;max-width:none}}
@media (max-width:620px) and (max-height:760px){.vitrine{--resto-topo:470px}}
/* celular: vitrine mais alta (capa e mapas maiores) */
@media (max-width:620px){
  .vitrine{aspect-ratio:1.5/1;width:min(calc(100% + 24px),560px,calc((100svh - var(--resto-topo,545px)) * 1.5))}
  .vitrine .mapa{width:47%}
  .vitrine .m2{top:50%}.vitrine .m4{top:50%}
}
@media (max-width:620px) and (min-height:800px){
  .vitrine{aspect-ratio:1.3/1;width:min(calc(100% + 24px),560px,calc((100svh - var(--resto-topo,545px)) * 1.3))}
  .vitrine .mapa{width:49%}
}
.popup-aviso{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:#FFF4E0;border:1px solid #F0D7A6;color:#7A4B00;font-size:13.5px;line-height:1.4}
.popup-caixa h2 .hl{color:var(--marca)}

/* ---------- caixa de presente antes do pop-up (pedido do dono): imagem azul com laço dourado gerada no Magnific.
   Aparece, gira em 3D acelerando com raios dourados atrás, treme, explode em confetes + clarão e revela o pop-up. ---------- */
.presente{position:fixed;inset:0;z-index:61;display:grid;place-items:center;background:rgba(10,12,20,.72);overflow:hidden}
.presente-cena{position:relative;width:min(56vw,220px);aspect-ratio:388/400;perspective:800px}
.caixa-img{width:100%;height:auto;filter:drop-shadow(0 22px 28px rgba(0,0,0,.55))}
.raios{position:absolute;left:50%;top:50%;width:min(130vw,560px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(244,212,124,.38) 0deg 10deg,transparent 10deg 24deg);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 66%);mask-image:radial-gradient(circle,#000 18%,transparent 66%)}
.presente.anima .raios{animation:raios-entra .4s ease-out forwards,raios-gira 3s linear infinite}
@keyframes raios-entra{to{opacity:1}}
@keyframes raios-gira{to{rotate:360deg}}
.presente.anima .presente-cena{animation:entra .4s cubic-bezier(.2,.9,.3,1.35) both}
.presente.anima .caixa-img{animation:gira 1.15s cubic-bezier(.55,0,.75,.55) .1s both}
@keyframes entra{from{transform:scale(.15) translateY(40px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes gira{0%{transform:rotateY(0)}78%{transform:rotateY(1080deg) scale(1.06)}
  84%{transform:rotateY(1080deg) rotate(-7deg) scale(1.08)}90%{transform:rotateY(1080deg) rotate(7deg) scale(1.1)}
  96%{transform:rotateY(1080deg) rotate(-5deg) scale(1.12)}100%{transform:rotateY(1080deg) rotate(0) scale(1.14)}}
.presente.explodiu .caixa-img{animation:explode .42s ease-in forwards}
.presente.explodiu .raios{animation:raios-some .4s ease-out forwards}
@keyframes explode{0%{transform:scale(1.14);filter:brightness(1) drop-shadow(0 22px 28px rgba(0,0,0,.55));opacity:1}
  40%{transform:scale(1.35);filter:brightness(2.2) drop-shadow(0 0 30px #F4D47C);opacity:1}100%{transform:scale(1.9);filter:brightness(3);opacity:0}}
@keyframes raios-some{to{opacity:0;scale:1.6}}
.confetes{position:absolute;left:50%;top:50%;width:0;height:0}
.confetes i{position:absolute;left:-5px;top:-7px;width:10px;height:14px;border-radius:2px;background:var(--cor);opacity:0}
.presente.explodiu .confetes i{animation:confete .6s cubic-bezier(.1,.7,.3,1) var(--atraso) forwards}
@keyframes confete{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.brilho-explosao{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:radial-gradient(circle,#fff,#F4D47C 40%,transparent 70%);opacity:0}
.presente.explodiu .brilho-explosao{animation:clarao .45s ease-out forwards}
@keyframes clarao{0%{transform:scale(.3);opacity:.95}100%{transform:scale(10);opacity:0}}

/* confirmação "Tem certeza que quer perder o desconto?" por cima do pop-up */
.confirma{position:fixed;inset:0;z-index:62;display:grid;place-items:center;padding:20px;background:rgba(10,12,20,.55)}
.confirma-caixa{width:100%;max-width:360px;background:#fff;border-radius:16px;padding:22px 18px 16px;text-align:center;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6);animation:surge .2s ease-out}
.confirma-icone{font-size:34px;line-height:1;margin-bottom:6px}
.confirma-caixa h3{font-size:20px;margin-bottom:8px}
.confirma-caixa p{color:var(--suave);font-size:14.5px;line-height:1.45}
.confirma-caixa .cta{width:100%;display:flex;margin-top:14px;min-height:52px;font-size:16px}
.confirma-perder{margin-top:10px;border:0;background:none;color:var(--fraco);font:500 13.5px/1.3 var(--corpo);text-decoration:underline;cursor:pointer;padding:6px}

/* preço em destaque na 1ª tela (pedido do dono, 04/10/2026): "por apenas R$ 17,90" em amarelo, acima do botão.
   A linha nova ocupa ~55px: o --resto-topo sobe o mesmo tanto para a vitrine encolher e o botão seguir na 1ª tela. */
.marcas{margin-bottom:10px}
.preco-topo{margin:0 0 12px;font-weight:700;font-size:17px;color:var(--texto,#0A0A0A)}
.preco-destaque{display:inline-block;margin-left:6px;padding:3px 14px;border-radius:10px;background:#FFD43B;color:#0A0A0A;
  font:800 clamp(26px,6.4vw,32px)/1.15 var(--titulo);vertical-align:middle;box-shadow:0 6px 16px -8px rgba(150,110,0,.65)}
.vitrine{--resto-topo:645px}
@media (min-width:900px){.vitrine{--resto-topo:615px}}
@media (max-width:620px){.vitrine{--resto-topo:600px}}
@media (max-width:620px) and (max-height:760px){.vitrine{--resto-topo:525px}}
/* celulares baixos (até 760px de altura): compacta o topo para o preço e o botão caberem na 1ª tela */
@media (max-width:620px) and (max-height:760px){
  .hero h1{font-size:26px;line-height:1.06}
  .hero .sub{font-size:15px;line-height:1.35}
  .marcas{gap:2px 12px;margin:8px auto 8px}
  .marcas li{font-size:13.5px}
  .preco-topo{margin-bottom:8px;font-size:15px}
  .preco-destaque{font-size:24px;padding:2px 12px}
  .cta-topo{font-size:16px;min-height:54px;letter-spacing:.02em}
  .vitrine{--resto-topo:540px}
}
/* ajuste fino medido (04/10/2026): vitrine o maior possível com o botão ainda na 1ª tela */
@media (min-width:900px){.vitrine{--resto-topo:575px}}
@media (max-width:620px) and (max-height:760px){.vitrine{--resto-topo:470px}}
@media (max-width:620px) and (max-height:600px){.vitrine{--resto-topo:485px}}

/* velocidade (05/10/2026): animações infinitas dos planos (borda girando do Completo, reflexos, seta) ficam PAUSADAS
   enquanto a pessoa está longe dos planos — a borda girando recalculava o estilo da página a cada quadro e atrasava a 1ª tela.
   O main.js liga (.anima-on) quando #oferta chega perto da tela. Visual igual. */
#oferta:not(.anima-on) *,#oferta:not(.anima-on) *::before,#oferta:not(.anima-on) *::after{animation-play-state:paused!important}

/* velocidade (05/10/2026): seções abaixo da 1ª tela só são desenhadas quando a pessoa chega perto (visual igual).
   Ao clicar em qualquer link "#..." o main.js liga html.cv-off ANTES da rolagem: a página inteira é calculada e a
   rolagem suave cai no lugar exato (sem isso o botão do topo poderia parar fora dos planos). */
main > section.sec{content-visibility:auto;contain-intrinsic-size:auto 900px}
html.cv-off main > section.sec{content-visibility:visible}

/* reestruturação (06/10/2026, modelo vidaonline): "Para quem" com descrição + blocos próprios #bonus e #resumo */
.quem li b{display:block;margin-bottom:2px}
.quem li span{display:block;font-weight:500;font-size:14px;color:var(--suave);line-height:1.45}
.lista-recebe{max-width:560px;margin-top:26px}
.lista-recebe li small{display:block;font-weight:500;font-size:13.5px;color:var(--suave);line-height:1.4;margin-top:2px}
@media (min-width:1000px){#bonus .arraste{display:none}}
#resumo .soma{margin-top:0}

/* ===== psicologia das cores (06/10/2026, pedido do dono) — cada cor com um papel ÚNICO:
   verde vivo = ação (só botões de compra) · amarelo-ouro = preço/atenção · âmbar = bônus/presente ·
   vermelho = urgência (só a barra do topo e o que fica de fora do Básico) · verde-suave = segurança (garantia). ===== */
.cta{background:linear-gradient(180deg,#34EB7A 0%,#16C25A 55%,#0FA34A 100%);border:1px solid rgba(255,255,255,.35);
  text-shadow:0 1px 2px rgba(0,60,20,.45);box-shadow:0 0 0 0 rgba(52,235,122,.5),0 12px 26px -10px rgba(22,194,90,.7);
  animation:pulsa-cta 2.6s ease-out infinite}
.cta:hover{background:linear-gradient(180deg,#45F088 0%,#1ACF62 55%,#12AD50 100%)}
@keyframes pulsa-cta{0%{box-shadow:0 0 0 0 rgba(52,235,122,.5),0 12px 26px -10px rgba(22,194,90,.7)}
  70%,100%{box-shadow:0 0 0 12px rgba(52,235,122,0),0 12px 26px -10px rgba(22,194,90,.7)}}
.preco-destaque{background:linear-gradient(180deg,#FFF06A 0%,#FFD60A 45%,#FFB703 100%);
  box-shadow:0 0 0 2px rgba(255,214,10,.35),0 8px 20px -6px rgba(255,183,3,.7);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.soma-preco strong{display:inline-block;font-size:clamp(30px,7.5vw,40px);padding:4px 18px;margin-top:6px;border-radius:12px;
  background:linear-gradient(180deg,#FFF06A 0%,#FFD60A 45%,#FFB703 100%);color:#111;
  box-shadow:0 8px 20px -8px rgba(255,183,3,.7)}
.barra{background:linear-gradient(90deg,#C3271A,#991B10)}
#bonus{background:linear-gradient(180deg,#FBF5E4 0%,#F5F3EA 100%)}
#bonus .kicker{color:#8A5A10}
#garantia-sec{background:#EDF5EE}

/* ===== carrosséis fluidos (06/10/2026): os slides vão para um "trilho" que anda com translate3d ===== */
.carrossel.com-trilho{display:block}
.carrossel .trilho{display:grid;grid-auto-flow:column;gap:14px;width:max-content;will-change:transform}
.carrossel .trilho > *{scroll-snap-align:start}
.carrossel-areas .trilho{grid-auto-columns:min(calc(var(--larg-car,100vw)*.82),360px)}
.carrossel-bonus .trilho{gap:16px;grid-auto-columns:min(calc(var(--larg-car,100vw)*.78),300px)}
@media (min-width:1000px){.carrossel-bonus .trilho{grid-auto-columns:calc((var(--larg-car,100vw) - 48px)/4)}}
.carrossel.auto{overflow-x:hidden;scroll-snap-type:none;scroll-behavior:auto}

/* ===== camada profissional (06/10/2026): acabamento, sem mudar estrutura =====
   sombras em 2 níveis, raios consistentes, barra de assinatura sob os títulos, setas e dicas refinadas, foco visível */
:root{--sombra-1:0 1px 2px rgba(16,24,20,.05);--sombra-2:0 18px 40px -22px rgba(16,24,20,.22)}
::selection{background:#CDEBD3}
:focus-visible{outline:3px solid #7CC576;outline-offset:2px;border-radius:6px}
.centro h2{position:relative;padding-bottom:16px}
.centro h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--verde),#9ED66F)}
.hero h1{letter-spacing:-.028em}
.barra{letter-spacing:.16em}
.kicker{letter-spacing:.18em}
.quem li,.item-recebe{box-shadow:var(--sombra-1),var(--sombra-2)}
.bonus-card{box-shadow:var(--sombra-1),var(--sombra-2)}
.plano.basico{box-shadow:var(--sombra-1),0 16px 34px -26px rgba(16,24,20,.28)}
.soma{box-shadow:var(--sombra-1),var(--sombra-2);border-radius:18px}
.slide img{border:1px solid rgba(16,24,20,.06);box-shadow:var(--sombra-1),0 16px 36px -18px rgba(16,24,20,.32)}
.slide figcaption{text-align:center}
.arraste{display:table;margin:12px auto 0;padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--linha);box-shadow:var(--sombra-1)}
.setas button{box-shadow:var(--sombra-1)}
.setas button:hover{background:var(--verde);border-color:var(--verde);color:#fff}
.como-img img{border-radius:16px;border:1px solid rgba(16,24,20,.06);box-shadow:var(--sombra-1),var(--sombra-2)}
.rodape{border-top:1px solid var(--linha)}

/* ============================================================================
   REDESIGN TOTAL (06/10/2026) — prévia para o dono ver "como ficaria".
   Mesma ESTRUTURA do site; muda a pele: paleta esmeralda premium + lima + ouro.
   Papel das cores: esmeralda escuro = marca/imersão (topo, bônus, resumo, final);
   lima = vida/confirmação (checks, destaques em fundo escuro); ouro = preço;
   verde vivo = ação (botões, herdado); vermelho = só urgência (barra).
   Carregado DEPOIS do styles.css: é só sobrepor. Não publicado.
   ========================================================================== */
:root{
  --re-ink:#0C2014; --re-texto:#2B3B30; --re-suave:#5C6E60;
  --re-esm:#0E4A31; --re-esm-2:#07301E; --re-esm-3:#04190F;
  --re-lima:#A3E635; --re-lima-claro:#D9F99D; --re-lima-txt:#BEF264;
  --re-sage:#F2F7F1; --re-borda:rgba(14,74,49,.14);
  --fundo:#FBFDFA; --cinza:var(--re-sage); --texto:var(--re-texto); --suave:var(--re-suave);
  --marca:#1E5A36; --verde-claro:#E4F2E4; --linha:#DCE8DC;
}
h1,h2,h3,h4{color:var(--re-ink)}
.kicker{color:#3F7D33}
.centro h2::after{background:linear-gradient(90deg,#2E7D3B,var(--re-lima))}

/* ---------- checks: bolinha lima com tique escuro (vida/confirmação) ---------- */
.marcas li::before,.lista-plano .sim::before,.soma-lista li::before,.quem li::before{
  background:var(--re-lima) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052e16' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- 1ª tela: imersão esmeralda com brilho lima ---------- */
.hero{background:radial-gradient(90% 62% at 50% 0%,rgba(163,230,53,.16) 0%,rgba(163,230,53,0) 62%),
  linear-gradient(180deg,#0F5236 0%,#083622 55%,var(--re-esm-3) 100%)}
.hero h1{color:#fff}
.hero .hl{background:linear-gradient(90deg,var(--re-lima-claro),#8FD63A);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--re-lima-txt)}
.hero .sub{color:#CFE6D6}
.marcas li{color:#E8F5EC}
.marcas b{color:#fff}
.preco-topo{color:#CFE6D6}
.hero .confianca{color:#BFD9C6}
.hero .confianca svg{stroke:var(--re-lima-txt)}
.vitrine .mapa{border-color:rgba(255,255,255,.85)}
.vitrine .livro{filter:drop-shadow(0 20px 26px rgba(0,0,0,.55))}

/* ---------- cartões claros: raio maior, borda esmeralda suave ---------- */
.quem li,.item-recebe,.bonus-card,.faq details,.popup-caixa,.confirma-caixa{border-color:var(--re-borda);border-radius:20px}
.quem li::before{top:18px}
.item-recebe .tag{background:#EAF7D8;color:#2F6B28}
.rot{color:#2F6B28}

/* ---------- como é cada mapa: números da legenda ---------- */
.legenda li::before{background:var(--re-esm);color:#fff}
.fecho{border-left-color:var(--re-lima)}

/* ---------- bônus: bloco imersivo escuro, cartões brancos saltando ---------- */
#bonus{background:radial-gradient(80% 50% at 50% 0%,rgba(163,230,53,.14) 0%,rgba(163,230,53,0) 60%),
  linear-gradient(180deg,var(--re-esm) 0%,var(--re-esm-2) 60%,var(--re-esm-3) 100%)}
#bonus .kicker{color:var(--re-lima-txt)}
#bonus h2{color:#fff}
#bonus .texto{color:#CFE6D6}
#bonus .bonus-tit{color:#fff}
#bonus .arraste{background:rgba(0,0,0,.3);border-color:rgba(190,242,100,.35);color:#CFE6D6}
#bonus .setas button{background:rgba(255,255,255,.08);border-color:rgba(190,242,100,.4);color:#E8F5EC}
#bonus .setas button:hover{background:var(--re-lima);border-color:var(--re-lima);color:#052e16}

/* ---------- resumo: a caixa verde que o dono aprovou, agora padrão da página ---------- */
#resumo .soma{background:radial-gradient(70% 40% at 50% 30%,rgba(163,230,53,.25) 0%,rgba(163,230,53,0) 70%),
  linear-gradient(180deg,var(--re-esm) 0%,var(--re-esm-2) 55%,var(--re-esm-3) 100%);
  border:1.5px solid rgba(163,230,53,.5);box-shadow:0 0 0 5px rgba(163,230,53,.08),0 26px 50px -24px rgba(4,25,15,.6)}
#resumo .soma-lista li{color:#E8F5EC}
#resumo .soma-preco{color:#CFE6D6}
#resumo .soma-dif{color:#A7C9B1}

/* ---------- planos: Básico clean, Completo esmeralda + borda lima girando ---------- */
.plano.basico{background:#fff;border:1px solid var(--re-borda)}
.plano.basico .preco{background:var(--re-sage);border-color:var(--linha)}
.plano.basico .cta-basico{background:#fff;color:#2F6B28;border:2px solid #9CC89B}
.plano.basico .cta-basico:hover{background:#F0F7EF}
.plano.completo{--ouro:#A3E635;--ouro-claro:#D9F99D;color:#E8F5EC;
  background:linear-gradient(180deg,var(--re-esm),var(--re-esm-3)) padding-box,
  conic-gradient(from var(--giro),#14532D 0deg,#22C55E 90deg,#BEF264 170deg,#fff 190deg,#BEF264 210deg,#22C55E 290deg,#14532D 360deg) border-box;
  box-shadow:0 0 0 6px rgba(163,230,53,.10),0 30px 60px -28px rgba(4,25,15,.8)}
.selo-topo{background:linear-gradient(180deg,var(--re-lima-claro),#84CC16);color:#052e16}
.plano.completo .arte-completo{background:radial-gradient(70% 60% at 50% 45%,rgba(163,230,53,.28),transparent 70%),var(--re-esm-3);border-color:rgba(163,230,53,.35)}
.plano.completo .arte-rot,.plano.completo .soma-rot{color:var(--re-lima-txt)}
.plano.completo .arte-preco b{background:linear-gradient(180deg,#FFF06A,#FFB703);color:#111}
.plano.completo .lista-plano .sim::before{background-color:var(--re-lima)}
.plano.completo .preco{background:rgba(0,0,0,.3);border-color:rgba(163,230,53,.3)}
.leve-tudo b{color:#2F6B28}
.leve-tudo svg{background:linear-gradient(180deg,#34EB7A,#0FA34A)}

/* ---------- garantia e FAQ ---------- */
#garantia-sec{background:var(--re-sage)}
.cta-sec{border-color:var(--re-esm);color:#1E5A36}
details summary{color:var(--re-ink)}

/* ---------- chamada final e rodapé: mesmo universo esmeralda ---------- */
.final{background:radial-gradient(80% 60% at 50% 0%,rgba(163,230,53,.14),transparent 60%),
  linear-gradient(180deg,var(--re-esm-2),var(--re-esm-3))}
.final-nota{color:#A7C9B1}
.rodape{background:var(--re-esm-3);color:#9DB5A4;border-top:0}
.rodape a{color:#CFE6D6}

/* preço do card do Completo em amarelo-ouro (06/10/2026, pedido do dono) — mesmo selo dos outros preços */
.plano.completo .preco .valor{display:inline-flex;margin-inline:auto;padding:2px 20px;border-radius:14px;
  background:linear-gradient(180deg,#FFF06A 0%,#FFD60A 45%,#FFB703 100%);color:#111;
  box-shadow:0 0 0 2px rgba(255,214,10,.3),0 10px 24px -8px rgba(255,183,3,.7)}
.plano.completo .preco .valor small{color:#6B4E00}

/* modo leve (06/10/2026, pedido do dono): em celular fraco (html.leve, ligado no <head>) as animações infinitas param —
   pulso do botão (redesenhava a sombra a cada quadro), reflexos, borda girando do Completo e a seta pulando.
   Visual parado igual ao normal; carrosséis, pop-up e caixa de presente continuam. Testar com ?leve=1 na URL. */
html.leve .cta,html.leve .cta-topo::after,html.leve .arte-completo::after,html.leve .plano.completo,
html.leve .plano.completo .cta::after,html.leve .leve-tudo svg{animation:none!important}

/* headline (06/10/2026, pedido do dono): palavras de destaque em AMARELO-OURO, não verde — o verde se perdia no fundo
   esmeralda; o ouro é a cor complementar (máximo contraste) e conversa com o selo do preço. Resto do título segue branco. */
.hero .hl{background:linear-gradient(180deg,#FFF27A 0%,#FFD60A 55%,#FFB703 100%);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#FFD60A}

/* 07/10/2026 — tela "dividida" (pedido do dono): o botão da 1ª tela para no PREÇO do Básico, e o Completo já aparece
   embaixo, para a pessoa comparar R$ 17,90 sem bônus com o Completo. Para caber, os 3 selos do Básico viram uma linha
   só (o texto completo deles continua no cartão do Completo). */
/* Ajuste 07/10 ~06h15 (print do dono no iPhone): a tela para com os bônus riscados do Básico em cima, preço e botão no meio
   e o Completo embaixo. Folga acima do preço = altura da tela − 600 px (o que fica abaixo do preço até a arte do Completo),
   entre 12 e 260 px: iPhone 390x844 → ~244 px (igual ao print); celular baixo 640 → 40 px (o Completo continua aparecendo). */
#preco-basico{scroll-margin-top:12px;scroll-margin-top:clamp(12px,calc(100vh - 600px),260px)}
.plano.basico .beneficios{grid-template-columns:repeat(3,1fr);gap:6px;padding-top:12px;margin-top:14px}
.plano.basico .beneficios li{flex-direction:column;align-items:center;gap:5px;text-align:center}
.plano.basico .beneficios li span{font-size:0;line-height:0}
.plano.basico .beneficios li b{display:block;font-size:12.5px;line-height:1.25}

/* 07/10/2026 ~06h30 (pedido do dono): botão do Básico LARANJA OPACO (menos vivo, pedido do dono) liso, sem brilho/pulso/sombra; cartão do Completo com um
   reflexo passando por cima do cartão inteiro (substitui o reflexo que passava só na arte, para não ficar dois). */
.plano.basico .cta-basico{background:#C87341;color:#fff;border:0;box-shadow:none;text-shadow:none;animation:none;font-weight:800}
.plano.basico .cta-basico:hover{background:#B5653A}
.plano.completo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.10) 46%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.10) 54%,transparent 60%) no-repeat;
  background-size:300% 100%;background-position:120% 0;animation:reflexo 4.2s ease-in-out infinite}
@keyframes reflexo{0%,25%{background-position:120% 0}75%,100%{background-position:-20% 0}}
.plano.completo .arte-completo::after{display:none}
html.leve .plano.completo::after{animation:none!important}

/* 07/10/2026 (pedido do dono): imagem do produto (livro dos 150 mapas) no topo do cartão do Básico, em painel claro,
   espelhando a arte do Completo. Não muda a tela dividida (o botão do topo para no preço, abaixo da imagem). */
.arte-basico{margin:-8px -8px 16px;padding:18px 14px;border-radius:14px;text-align:center;
  background:radial-gradient(70% 70% at 50% 45%,#FFFFFF,var(--re-sage) 78%);border:1px solid var(--linha)}
.arte-basico img{display:block;width:auto;height:180px;margin:0 auto;filter:drop-shadow(0 12px 14px rgba(16,24,20,.28))}

/* 07/10/2026 ~08h (pedido do dono: "1 botão por bloco"): botão no fim de cada bloco levando aos planos. Os do meio param na
   tela dividida (#preco-basico); o dos bônus vai direto ao Completo. #plano-completo ganha folga para o selo não cortar. */
.cta-bloco{margin-top:28px;text-align:center}
#plano-completo{scroll-margin-top:28px}

/* 07/10/2026 ~08h30 (pedido do dono): SEM preço na 1ª tela (o resto e o botão iguais) e "espiada" do bloco seguinte:
   o topo termina mais cedo, o "Para quem é" sobe e uma seta na divisa convida a rolar. O espaço do preço (~45 px)
   paga a maior parte da espiada; a vitrine encolhe só o que faltar (valores medidos de 360x640 a 1366x700). */
.hero{position:relative;padding-bottom:18px}
#para-quem{padding-top:30px}
.hero-mais{position:absolute;left:50%;bottom:0;z-index:3;width:40px;height:40px;margin-left:-20px;margin-bottom:-20px;
  display:grid;place-items:center;border-radius:50%;background:#fff;color:#0F5236;text-decoration:none;
  box-shadow:0 6px 16px -6px rgba(4,25,15,.55),0 0 0 4px rgba(163,230,53,.28)}
.hero-mais svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  animation:desce 1.6s ease-in-out infinite}
html.leve .hero-mais svg{animation:none!important}
@media (min-width:900px){.hero{padding-bottom:22px}}
/* vitrine encolhe só o que falta para a espiada (medido): kicker "Para quem é" visível de 664 px de altura para cima;
   em 640 px aparecem a faixa clara e a seta */
.vitrine{--resto-topo:665px}
@media (min-width:900px){.vitrine{--resto-topo:591px}}
@media (max-width:620px){.vitrine{--resto-topo:628px}}
@media (max-width:620px) and (max-height:760px){.vitrine{--resto-topo:502px}}
@media (max-width:620px) and (max-height:600px){.vitrine{--resto-topo:517px}}

/* ==========================================================================
   40 MAPAS DE CÁLCULO (18/10/2026): mesma estrutura da página de Agronomia,
   escuro trocado de esmeralda para AZUL-MARINHO (igual à capa) e destaques em AMARELO.
   ========================================================================== */
:root{--re-esm:#173C78;--re-esm-2:#0F2A57;--re-esm-3:#081833;--re-ink:#0B1B36;--marca:#173C78}
.hero{background:radial-gradient(90% 62% at 50% 0%,rgba(250,204,21,.16) 0%,rgba(250,204,21,0) 62%),
  linear-gradient(180deg,#1A4585 0%,#0F2A57 55%,#081833 100%)}
.hero .hl{background:linear-gradient(90deg,#FFF27A,#FFD60A 55%,#FFB703);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#FFD60A}
.hero .sub,.preco-topo,.hero .confianca{color:#D6E4F7}
.marcas li{color:#E6EEF9}
.marcas b{color:#FACC15}
#bonus .texto{color:#D6E4F7}
.plano.completo{color:#E6EEF9}
.final{background:linear-gradient(180deg,#0F2A57,#081833)}
.rodape{background:#06122A}

/* v2: bônus especial (150 mapas + app de videoaulas) */
.item-recebe.extra150{margin-top:14px;border-color:#FACC15;background:linear-gradient(180deg,#FFFBEB,#fff)}
.item-recebe.extra150 .rot{color:#92400E}
.item-recebe.extra150 .tag{background:#FACC15;color:#0F2A57}
.destaque150{max-width:980px;margin:28px auto 8px;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;background:linear-gradient(160deg,#0F2A57,#081833);border-radius:24px;padding:22px;color:#fff;box-shadow:0 24px 50px -24px rgba(8,24,51,.7);border:2px solid #FACC15}
.destaque150 img{width:100%;height:auto;border-radius:16px;display:block}
.destaque150 .rot{display:inline-block;background:#FACC15;color:#0F2A57;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:99px}
.destaque150 h3{font-size:clamp(22px,3.2vw,28px);line-height:1.15;margin:12px 0 10px;color:#fff}
.destaque150 h3 em{font-style:normal;color:#FACC15;display:block}
.destaque150 p{color:#D6E4F7;font-size:15.5px;line-height:1.55;margin:0 0 12px}
.destaque150 ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.destaque150 li{position:relative;padding-left:26px;font-weight:600;font-size:15px}
.destaque150 li::before{content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:#22C55E;color:#fff;font-size:12px;line-height:19px;text-align:center;font-weight:800}
@media(max-width:760px){.destaque150{grid-template-columns:1fr;padding:16px;gap:16px;margin-top:22px}}
.plano.completo .lista-plano li.forte{font-weight:800;color:#FACC15}
@media (min-width:1000px){#bonus .bloco-bonus .setas{display:flex}#bonus .arraste{display:table}}

/* v3 (pedido do dono): mockup da 1ª tela maior no celular + selo de segurança em amarelo */
.vitrine{width:min(100%,600px);aspect-ratio:1.45/1;margin:10px auto 14px}
.vitrine .livro{height:104%;top:-2%}
@media (max-width:620px){
  .vitrine{width:calc(100% + 24px);max-width:none;aspect-ratio:1.2/1;margin:12px 0 16px 50%;translate:-50% 0}
  .vitrine .mapa{width:50%}
  .vitrine .m1{left:-1%;top:2%}.vitrine .m3{right:-1%;top:2%}
  .vitrine .m2{left:1%;top:47%}.vitrine .m4{right:1%;top:47%}
  .vitrine .livro{height:100%;top:0}
}
.seguro{margin:14px auto 0;display:table;color:#FACC15;font-weight:800;font-size:15px;letter-spacing:.01em;
  background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.55);padding:8px 14px;border-radius:99px;line-height:1.35;text-align:center}
@media (max-width:420px){.seguro{font-size:14px;padding:8px 12px}}
.seguro{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;background:none;border:0;padding:0;margin:16px auto 30px;font-size:15px}
.seguro span{display:inline-flex;align-items:center;gap:6px;color:#FACC15;font-weight:800;background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.55);padding:6px 12px;border-radius:99px;white-space:nowrap}
.seguro span::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#FACC15;color:#0F2A57;font-size:12px;font-weight:900}
@media (max-width:420px){.seguro{font-size:13.5px;gap:7px 7px}.seguro span{padding:6px 10px}}

/* v4 (pedido do dono): mockup grande E botão visível na 1ª tela.
   Ordem: título, mockup, botão, selos; o texto de apoio e as marcas vão para baixo do botão. */
.hero-txt{display:flex;flex-direction:column}
.hero-txt h1{order:1}.hero-txt .vitrine{order:2}.hero-txt .cta-topo{order:3}.hero-txt .seguro{order:4}
.hero-txt .sub{order:5;margin-top:4px}.hero-txt .marcas{order:6;margin-bottom:26px}
.hero-txt .cta-topo{align-self:center;width:100%;max-width:520px}
.hero-txt .seguro{margin:12px auto 14px}
/* mockup: o maior possível sem empurrar o botão para fora da tela (altura restante medida) */
.vitrine{width:min(100%,600px,calc((100svh - var(--topo-fixo,380px)) * 1.45))}
@media (max-width:620px){
  .vitrine{width:min(calc(100% + 24px),calc((100svh - var(--topo-fixo,360px)) * 1.2));margin:8px 0 12px 50%}
}
.hero{overflow-x:clip}
@media (max-width:620px){.vitrine .m1{left:1%}.vitrine .m3{right:1%}}
@media (min-width:900px){.vitrine{--topo-fixo:490px}}
@media (max-width:620px){.vitrine{--topo-fixo:350px}}