/* Black Friday Lab (karinesackt.com.br/black-friday-lab/)
   Refeita em código a partir da página do Elementor (post 4447). Medidas tiradas da página original.
   Pontos de quebra iguais aos do Elementor: celular até 767 px (a página não tinha regra própria para tablet). */

/* ---------- Fontes ---------- */
@font-face{font-family:'Neue Montreal';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/neue-montreal-400.woff2) format('woff2')}
@font-face{font-family:'Neue Montreal';font-style:normal;font-weight:500;font-display:swap;src:url(fontes/neue-montreal-500.woff2) format('woff2')}
@font-face{font-family:'Neue Montreal';font-style:normal;font-weight:700;font-display:swap;src:url(fontes/neue-montreal-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fontes/manrope-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fontes/dm-sans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Variáveis ---------- */
:root{
  --fundo:#050505;
  --amarelo:#F2FA9D;        /* botões, destaques */
  --amarelo-hover:#E0FF7D;
  --amarelo-barra:#EEF596;  /* barras de progresso */
  --escuro:#151515;         /* texto dos botões amarelos */
  --verde-1:#010A0A;        /* degradê dos cartões verdes */
  --verde-2:#03251D;
  --borda:rgba(255,255,255,.12);
  --linha:rgba(217,217,217,.29);
  --nm:'Neue Montreal',sans-serif;
  --serif:'Awesome Serif',serif;  /* fonte do destaque em itálico (o original também cai na serifada padrão) */
  --texto-gradiente:radial-gradient(circle,#FFFFFF 0%,rgba(255,255,255,.59) 70%);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--fundo);color:#fff;font:400 23px/1.5 Manrope,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{max-width:100%;height:auto;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
strong{font-weight:700}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Container flexível (equivale ao container do Elementor): coluna, 20 px entre itens, recuo de 13 px (10 px no celular) */
.cx{display:flex;flex-direction:column;gap:20px;padding:13px;position:relative;min-width:0;width:100%;flex:0 1 auto}
.cx>*{max-width:100%}
@media (max-width:767px){.cx{padding:10px;flex-wrap:wrap}}

/* Texto com degradê branco (radial) */
.gt,.radial{background:var(--texto-gradiente);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.serif{font-family:var(--serif);font-style:italic}
.verde{background:linear-gradient(90deg,#3BECC5,#CBFBF0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.menta{color:#DFFFEF}

/* Bloco de texto corrido (parágrafos com 0,9 rem entre eles) */
.txt p{margin:0 0 14.4px}
.txt p:last-child{margin-bottom:-.6px}

/* Lista com ícone (ícone + texto). --ico = tamanho do ícone, --off = deslocamento vertical, --al = alinhamento */
.lista{list-style:none;margin:0;padding:0}
.lista li{display:flex;align-items:var(--al,center)}
.lista__ico{display:flex;position:relative;top:var(--off,0px)}
.lista__ico svg{display:block;flex-shrink:0;width:var(--ico);height:var(--ico);margin:0 calc(var(--ico)*.25) 0 0}
.lista__txt{align-self:center;padding-left:5px}

/* Seta animada "role para baixo" */
.seta{position:relative;z-index:4;height:49px}
.seta--m12{padding-top:12px;height:61px}
.seta--m12b{padding:12px 0;height:73px}
.seta__ico{display:block;width:40px;height:40px;margin:0 auto;color:#69727D}
.seta__ico svg{display:block;position:relative;width:40px;height:40px;animation:moverBaixo 1.5s infinite}

/* Botão amarelo (abre o popup da lista VIP) */
.btn-caixa{text-align:center}
.btn{display:inline-block;position:relative;z-index:1;overflow:hidden;padding:18px 30px;border-radius:100px;background:var(--amarelo);color:var(--escuro);font:400 20px/1.3 var(--nm);letter-spacing:.4px;text-align:center;animation:pulse 3s ease-in-out infinite;transition:transform .3s ease,box-shadow .3s ease}
.btn:hover{color:var(--escuro);transform:scale(1.04);box-shadow:inset 0 4px 10px rgba(0,0,0,.25)}
.btn__in{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:10px}
.btn__ico{display:flex;align-items:center}
.btn__ico svg{display:block;width:34px;height:34px;transition:transform .4s ease}
.btn__txt{display:block}

/* Pílula com contorno (PEÇA POR PEÇA / ECOSSISTEMA): rótulo, não é link */
.pilula{display:inline-block;padding:12px 26px;border:1px solid #F2F5D8;border-radius:100px;background:transparent;color:#fff;font:400 17px/1 var(--nm);text-align:center;transition:background-color .45s ease,transform .45s ease}
.pilula--vermelho:hover{background-color:#FF3B3B;transform:scale(1.03)}
.pilula__in{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:10px}
.pilula__ico{display:flex;align-items:center}
.pilula__ico svg{display:block;width:34px;height:34px}

/* Cartão com borda fina */
.cartao{padding:32px;border:1px solid var(--borda);border-radius:7px}

/* Efeitos de passar o mouse nas imagens */
.cresce,.encolhe{transition:transform .3s}
.cresce:hover{transform:scale(1.1)}
.encolhe:hover{transform:scale(.9)}

/* Animações contínuas */
.flutua{animation:flutuar 4s ease-in-out infinite}
.gira{animation:rodar 10s linear infinite}
@keyframes flutuar{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}
@keyframes moverBaixo{0%{transform:translateY(0);opacity:1}50%{transform:translateY(10px);opacity:.5}100%{transform:translateY(0);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes rodar{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Entrada ao rolar (o JS põe .ativo quando o bloco chega perto do meio da tela; sem JS fica tudo visível) */
.js .rv-esq{opacity:0;transform:translate(-30px,0);transition:all .9s}
.js .rv-dir{opacity:0;transform:translate(30px,0);transition:all .9s}
.js .rv-baixo{opacity:0;transform:translate(0,80px);transition:all .9s}
.js .ativo{opacity:1;transform:translateY(0);transition:.9s}

/* =========================================================
   1. HERO
   ========================================================= */
.hero{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#050505 url(/wp-content/uploads/2026/10/BANNER-HERO-30-1.jpg) no-repeat center top/cover}
.hero__in{display:flex;flex-direction:row;flex-grow:1;width:100%;max-width:1228px;margin:0 auto;padding:60px 0}
.hero__txt{width:51%}
.hero__foto{width:50%;padding:0;justify-content:flex-end}
.hero__logo img{display:block;width:30%}
.hero__tag{width:95%;--ico:42px;--off:2px;--al:flex-start}
.hero__tag .lista__txt{font:400 21px/1.3 var(--nm);color:var(--amarelo)}
.hero__h1{font:500 44px/1.09 var(--nm)}
.hero__sub{font:400 24px/1.3 var(--nm)}
.hero__destaque{color:#dfeeac}
.hero__nota{width:76%;order:99999;--ico:24px;--off:2px;--al:flex-start}
.hero__nota .lista__txt{font:400 20px/1.3 var(--nm)}
.hero__piramide{position:absolute;z-index:1;top:396px;left:-324px;width:33%}
.hero__piramide img{display:block;width:100%}
.hero__caixa{width:90%;padding:22px;border:1px solid var(--borda);border-radius:20px;background:linear-gradient(132deg,var(--verde-1) 0%,var(--verde-2) 100%)}

/* ---------- Formulários (página e popup) ---------- */
.form{display:flex;flex-wrap:wrap;width:calc(100% + 10px);max-width:none;margin:0 -5px -10px}
.form input[type=hidden]{display:none}
.form__campo{position:relative;display:flex;flex-wrap:wrap;align-items:center;width:100%;padding:0 5px;margin-bottom:10px}
.form__campo--botao{align-items:flex-end}
.form input:not([type=hidden]){display:block;flex-grow:1;width:100%;min-height:47px;margin:0;padding:6px 16px;border:1px solid rgba(255,255,255,.22);border-radius:100px;background:rgba(21,21,21,.65);color:rgba(255,255,255,.78);font:400 20px/1.4 var(--nm);outline:0;transition:all .3s}
.form input:not([type=hidden]):focus{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.form input::placeholder{color:inherit;opacity:.6}
.form__botao{display:block;flex-basis:100%;width:100%;min-height:59px;margin:0;padding:22px;border:0;border-radius:100px;background:var(--amarelo);color:var(--escuro);font:400 20px/1 var(--nm);text-align:center;cursor:pointer;transition:all .3s}
.form__botao:hover,.form__botao:focus-visible{background:var(--amarelo-hover);color:var(--escuro)}
.form__botao[disabled]{opacity:.65;cursor:default}
.form__msg{width:100%;margin:10px 5px 20px;color:#fff;font-size:1em;line-height:1}
.form__msg--erro{color:#fff}
.form__erro-mascara{position:absolute;z-index:9;left:10px;bottom:-26px;display:flex;align-items:center;padding:2px 4px;border:1px solid #ff6a6a;border-radius:3px;background:#fff;color:#ff3939;font-size:13px;line-height:13px}
.form__erro-mascara[hidden]{display:none}
/* popup: campos maiores e fundo mais transparente */
.form--grande input:not([type=hidden]){min-height:59px;padding:7px 20px;background:rgba(21,21,21,.21);color:#fff}

/* =========================================================
   2. ECOSSISTEMA
   ========================================================= */
.eco{position:relative;display:flex;flex-direction:column;background:radial-gradient(at center left,#031D1B 0%,#050505 50%)}
.eco::before{content:"";position:absolute;inset:0;background:radial-gradient(at center right,#88FEC2E0 0%,#00000000 26%);opacity:.22;pointer-events:none}
.eco__in{position:relative;display:flex;flex-direction:column;flex-grow:1;width:100%;max-width:1200px;margin:0 auto;padding:90px 0}
.eco__grade{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:18px;padding:40px 0 10px}
.eco__c1{width:40%;background:linear-gradient(124deg,rgba(21,21,21,.9) 0%,rgba(0,0,0,.95) 100%)}
.eco__c1-img img{display:block;width:106%;max-width:none;margin:0 -3%}
.eco__c1-h{width:94%;font:500 40px/1.08 var(--nm);color:#fff}
.eco__c1-h--cinza{color:#AEAEAE}
.eco__c2{width:58%;min-height:580px;justify-content:flex-start;background:url(/wp-content/uploads/2025/11/Frame-1171274126.webp) no-repeat center bottom/cover}
.eco__c3{width:49%;justify-content:flex-start;background:#121212 url(/wp-content/uploads/2025/11/Frame-1171274128-1.webp) no-repeat center bottom/cover}
.eco__c4{width:49%;padding:28% 3% 10%;background:#121212 url(/wp-content/uploads/2025/11/Frame-1171274127.webp) no-repeat center top/cover}
.eco__c5{width:100%;flex-direction:row;justify-content:flex-end;padding:62px 32px;background:linear-gradient(154deg,rgba(21,21,21,.9) 0%,rgba(0,0,0,.95) 100%)}
.eco__c5-txt{justify-content:center}
/* título + texto dos cartões */
.caixa-txt h3{margin:8px 0 16px;font-family:var(--nm);font-weight:500;line-height:1.2;color:#fff}
.caixa-txt p{font:400 20px/1.3 var(--nm);color:#fff}
.eco__c2-txt{width:77%}
.eco__c2-txt h3{font-size:48px}
.eco__c3-txt{width:95%}
.eco__c3-txt h3{font-size:60px;line-height:1.06}
.eco__c3-txt p{font-size:32px}
.eco__c4-txt{width:73%}
.eco__c4-txt h3{font-size:62px}
.eco__c5-caixa{width:91%}
.eco__c5-caixa h3{font-size:62px;line-height:1.06}
.eco__c5-caixa p{font-size:30px}
.eco__orbita img{display:block;width:100%;margin:-28% 0 -29%}
/* chamada no fim da seção */
.eco__cta{flex-direction:row;padding:10px 0}
.eco__cta-esq{width:50%}
.eco__cta-meio{width:100%}
.eco__cta-dir{width:50%}
.eco__receita img{display:block;margin:0 auto}
.eco__cta-txt{font:500 24px/1.22 var(--nm);text-align:center}
.eco__cta-h{width:94%;align-self:center;font:500 36px/1.22 var(--nm);text-align:center}
.eco__cta-btn{width:100%;align-self:center}
.eco__metricas img{display:block;width:93%;margin:-15px auto 0}

/* =========================================================
   3. PARA O SEU NEGÓCIO OU PARA OS SEUS CLIENTES
   ========================================================= */
.pub{display:flex;flex-direction:column;overflow-x:clip;background:radial-gradient(at center left,#02221B 0%,#050505 50%)} /* os mockups passam da borda direita no celular: corta aqui para não gerar rolagem lateral */
.pub__in{display:flex;flex-direction:row;flex-grow:1;width:100%;max-width:1200px;margin:0 auto;padding:90px 0}
.pub__esq{width:60%}
.pub__dir{width:50%}
.pub__mockups img{display:block;width:122%;max-width:none;margin:-4% -10% -2% -12%}
.pub__h{width:95%;font:500 85px/1.09 'DM Sans',sans-serif;text-transform:uppercase}
.pub__linha{width:90%;height:1px;border-top:1px solid #D9D9D9}
.pub__txt{font:400 24px/1.3 var(--nm)}
.pub__lista{width:72%;--ico:40px;--off:4px;--al:flex-start}
.pub__lista .lista__txt{font:500 32px/1.22 var(--nm)}
.pub__c1,.pub__c2{padding:82px 36px;background:linear-gradient(150deg,var(--verde-1) 0%,var(--verde-2) 100%)}
.pub__alvo img{display:block;width:16%}
.pub__c1-h{width:75%;font:500 64px/1.11 var(--nm)}
.pub__seta-txt{font:400 24px/1.3 var(--nm)}

/* =========================================================
   4. AS CONDIÇÕES ABREM PRIMEIRO PARA A LISTA
   ========================================================= */
.cond{display:flex;flex-direction:column;gap:20px;padding:90px 0;background:var(--fundo)}
.cond__caixa{display:flex;flex-direction:column;padding:0 13px}
.cond__in{display:flex;flex-direction:column;gap:20px;width:100%;max-width:1024px;margin:0 auto;padding:13px 0}
.cond__linha{flex-direction:row;align-items:center;padding:0}
.cond__linha--2{flex-direction:row-reverse}
.cond__linha--3{align-items:flex-end;padding:0 0 0 5%}
.cond__h{align-self:center;font:500 96px/1.09 var(--nm);text-transform:uppercase;color:#fff}
.cond__h1{width:76%}
.cond__h2{width:100%}
.cond__h3{width:79%;text-align:center}
.degrade{display:inline-block;background:linear-gradient(to right,#FFFFFF,#F2FA9D);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* imagens pequenas ficam "na linha" (como no original): no celular a caixa delas tem a altura de uma linha de texto */
.img-linha{text-align:center}
.img-linha img{display:inline-block;vertical-align:middle}
.cond__selo{width:6%}
.cond__selo img{width:100%}
.cond__aneis{width:5%}
.cond__aneis img{width:240%;max-width:none;margin-left:-140%}
.cond__flecha{width:124px}
.cond__flecha>span{display:block;margin:-4% 29% 13% -62%}
.cond__flecha img{width:55%}
.cond__sub{width:100%;align-self:center;font:500 40px/1.22 var(--nm);text-align:center}

/* =========================================================
   5. AS FERRAMENTAS QUE VOCÊ VAI DOMINAR
   ========================================================= */
.ferr{position:relative;z-index:1;display:flex;flex-direction:column;background:var(--fundo)}
.ferr__in{display:flex;flex-direction:column;gap:20px;flex-grow:1;width:100%;max-width:1400px;margin:0 auto;padding:90px 0}
.ferr__linha{flex-direction:row;z-index:1}
.ferr__esq{position:relative;z-index:1;display:flex;flex-direction:column;flex:0 1 auto;width:100%;min-width:0;min-height:415px}
.ferr__esq-in{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-height:415px;padding-top:14px}
.ferr__h{width:87%;font:500 64px/1 var(--nm)}
.ferr__sub{width:53%;font:400 20px/1.3 var(--nm);color:#fff}
.ferr__dir{position:relative;z-index:1;display:flex;flex-direction:column;flex:0 1 auto;width:100%;min-width:0;padding:0 13px}
.ferr__dir-in{position:relative;display:flex;flex-direction:column;gap:20px;flex-grow:1;padding:13px 0}
/* cartões: grudam no topo e se empilham ao rolar */
.ferr__card{position:sticky;top:0;z-index:1;justify-content:center;min-height:320px;padding:30px;border:1px solid var(--borda);border-radius:7px;background:linear-gradient(161deg,#151515 0%,#0A0A0A 100%)}
.ferr__card--verde{background:linear-gradient(161deg,#151515 0%,#03251D 100%)}
.ferr__nome{--ico:55px}
.ferr__nome .lista__txt{font:500 32px/1.09 var(--nm)}
.ferr__desc{width:91%;font:400 20px/1.3 var(--nm);color:#fff}
.ferr__desc--75{width:75%}
.ferr__desc--89{width:89%}
.ferr__desc--94{width:94%}
.ferr__fim{flex-direction:row;justify-content:flex-end;z-index:1}
.ferr__fim-h{width:49%;font:500 40px/1.22 var(--nm)}
/* barra de progresso (o JS enche quando aparece na tela) */
.barra{position:relative;height:8px;border-radius:50px;background:#fff;line-height:30px}
.barra__cheia{position:relative;display:flex;width:var(--p);height:8px;border-radius:50px;background:var(--amarelo-barra);font-size:11px;line-height:30px;transition:width 1s ease-in-out}
.js .barra__cheia{width:0}
.js .barra.cheia .barra__cheia{width:var(--p)}
.barra__pct{position:absolute;top:-12px;right:-45px;padding:3px 22px;border-radius:50px;background:var(--amarelo-barra);color:#1f3d36;font-weight:400}

/* =========================================================
   6. O SEU NEGÓCIO OU O DO SEU CLIENTE VENDENDO NA ERA DA IA
   ========================================================= */
.venda{display:flex;flex-direction:column;background:var(--fundo)}
.venda__in{display:flex;flex-direction:column;gap:20px;flex-grow:1;width:100%;max-width:1300px;margin:0 auto;padding:90px 0}
.venda__h{width:100%;align-self:center;font:700 64px/.94 var(--nm);text-align:center}
.venda__linha{flex-direction:row;justify-content:center;padding:0}
.venda__p{align-self:center;font:400 40px/.94 var(--nm);text-transform:uppercase}
.venda__p--1{width:25%;text-align:end}
.venda__p--2{width:39%}
.venda__rostos{width:16%}

/* =========================================================
   7. QUEM VAI TE GUIAR
   ========================================================= */
.guia{display:flex;flex-direction:column;background:var(--fundo)}
.guia__in{display:flex;flex-direction:column;gap:20px;flex-grow:1;width:100%;max-width:1300px;margin:0 auto;padding:90px 0}
.guia__cartao{padding:42% 0 3%;border-radius:9px;background:#070908 url(img/guia-fundo.webp) no-repeat center top/contain}
.guia__cartao::before{content:"";position:absolute;inset:0;border-radius:9px;background:linear-gradient(180deg,#07090800 41%,#070908 100%)}
.guia__faixa{padding:1% 3%;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.guia__h{width:100%;align-self:center;font:500 64px/1.09 var(--nm);text-align:center}
.guia__linha{flex-direction:row;padding:0 3%}
.guia__esq{width:88%}
.guia__dir{width:100%}
.guia__txt{font:400 20px/1.3 var(--nm);color:#fff}
.guia__txt--94{width:94%}
.guia__txt--96{width:96%}
.guia__numeros{flex-direction:row;padding:0}
.guia__num{padding:24px;border:1px solid var(--borda);border-radius:7px;background:linear-gradient(152deg,#151515 0%,#0A0A0A 100%)}
.guia__num-txt{width:100%;font:400 18px/1.3 var(--nm);color:#fff;text-align:center}
.contador{display:flex;color:var(--amarelo);font:500 52px/1.09 var(--nm);text-align:center}
.contador__pre{flex-grow:1;text-align:end;white-space:pre-wrap}
.contador__suf{flex-grow:1;text-align:start;white-space:pre-wrap}

/* =========================================================
   8. O QUE VOCÊ ENCONTRA AQUI
   ========================================================= */
.enc{display:flex;flex-direction:column;padding-top:20px;background:var(--fundo)}
.enc__topo{position:relative;display:flex;flex-direction:column;padding:0 13px}
.enc__topo-in{display:flex;flex-direction:column;gap:20px;width:100%;max-width:1200px;margin:0 auto;padding:13px 0}
.enc__h{width:50%;align-self:flex-start;font:500 61px/1.22 var(--nm)}
.enc__faixa{display:flex;flex-direction:column;padding:0 10px}
.enc__faixa--verde{border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);background:linear-gradient(173deg,var(--verde-1) 0%,var(--verde-2) 100%)}
.enc__faixa-in{display:flex;flex-direction:row;align-items:center;gap:20px;width:100%;max-width:1200px;margin:0 auto;padding:24px 0}
.enc__faixa--1 .enc__faixa-in{padding-top:80px}
.enc__item{--ico:48px}
.enc__item .lista__ico{padding-right:10px}
.enc__item .lista__txt{font:500 32px/1.09 var(--nm)}
.enc__item--80{width:80%}
.enc__txt{width:98%;font:400 20px/1.3 var(--nm);color:#fff}

/* =========================================================
   9. CHAMADA FINAL
   ========================================================= */
.final{display:flex;flex-direction:column;background:var(--fundo)}
.final__in{display:flex;flex-direction:column;gap:20px;flex-grow:1;width:100%;max-width:1200px;margin:0 auto;padding:30px 0 90px}
.final__h{width:90%;align-self:center;font:500 48px/1.22 var(--nm);text-align:center}
.final__cartao{justify-content:center;min-height:490px;margin-top:40px;padding:32px;border:1px solid var(--borda);border-radius:7px;background:url(/wp-content/uploads/2025/11/Rectangle-240662547.webp) no-repeat center top/cover}
.final__selo-caixa{width:100%;align-self:center;text-align:center}
.final__selo{display:inline-block;padding:15px;border:1px solid rgba(242,250,157,.15);border-radius:100px;background:rgba(255,255,255,.07);color:#fff;font:400 13px/1.3 var(--nm);letter-spacing:.4px}
.final__h2{width:80%;align-self:center;font:500 48px/1.33 var(--nm);text-align:center}
.final__btn{width:100%;align-self:center}
.btn--final{padding:20px 30px}

/* =========================================================
   10. RODAPÉ
   ========================================================= */
.rodape{display:flex;flex-direction:column;border-top:1px solid;border-image:linear-gradient(to right,#0E0E0E,#F2FA9D,#0E0E0E) 1;background:var(--fundo)}
.rodape__in{display:flex;flex-direction:column;width:100%;max-width:1200px;margin:0 auto;padding:20px 0}
.rodape__txt{width:98%;align-self:center;font:400 20px/1.3 var(--nm);color:#fff;text-align:center}

/* =========================================================
   POPUP DA LISTA VIP
   ========================================================= */
.popup{position:fixed;inset:0;z-index:9999;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.8)}
.popup[hidden]{display:none}
.popup__caixa{position:relative;display:flex;justify-content:center;width:640px;max-width:100%;max-height:100%;overflow:auto}
.popup__fechar{position:absolute;z-index:2;top:20px;right:20px;display:flex;width:15px;height:15px;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.popup__fechar svg{display:block;width:15px;height:15px}
.popup__fechar:focus-visible{outline:2px solid #fff;outline-offset:2px}
.popup__form{width:90%;justify-content:center;align-items:center;padding:22px;border:1px solid var(--borda);border-radius:32px;background:linear-gradient(132deg,var(--verde-1) 0%,var(--verde-2) 100%)}

/* =========================================================
   Desktop grande: a coluna das ferramentas acompanha a rolagem (no tablet e no celular ela fica parada)
   ========================================================= */
@media (min-width:1025px){
  .ferr__esq-in{position:sticky;top:0}
}

/* =========================================================
   CELULAR (até 767 px)
   ========================================================= */
@media (max-width:767px){
  .seta--m12b{padding:0 0 12px;height:61px}

  /* 1. hero: foto em cima (fundo próprio do celular), texto centralizado embaixo */
  .hero{padding:0 3%;background-image:url(/wp-content/uploads/2026/10/BANNER-HERO-31-1.jpg);background-size:contain}
  .hero__in{flex-wrap:wrap;justify-content:center;align-items:center;padding:80% 0 10%}
  .hero__txt{width:100%;justify-content:center;align-items:center;gap:10px 6px}
  .hero__foto{order:-99999;width:100%;min-height:0;flex-direction:row}
  .hero__logo{display:none}
  .hero__tag{width:100%;align-self:center;text-align:center;--ico:21px}
  .hero__tag li{justify-content:center}
  .hero__tag .lista__ico svg,.hero__nota .lista__ico svg{margin:0 calc(var(--ico)*.125)}
  .hero__tag .lista__txt{font-size:15px}
  .hero__h1{font-size:29px;text-align:center}
  .hero__sub{width:95%;align-self:center;font-size:18px;text-align:center}
  .hero__nota{width:95%;align-self:center;--ico:17px}
  .hero__nota .lista__txt{font-size:16px}
  .hero__caixa{width:100%;padding:20px}
  .form input:not([type=hidden]){font-size:16px}
  .form__botao{font-size:17px}

  /* 2. ecossistema */
  .eco{padding:0 15px}
  .eco__in{padding:40px 0 0}
  .eco__grade{flex-wrap:wrap}
  .eco__c1,.eco__c2,.eco__c3,.eco__c4,.eco__c5{width:100%}
  .eco__c1-h{width:90%;font-size:32px}
  .eco__c1-h--cinza{width:100%}
  .eco__c2{min-height:385px;padding:6% 9% 40%;background-size:contain}
  .eco__c2-txt,.eco__c3-txt,.eco__c4-txt{width:100%}
  .eco__c2-txt h3{font-size:32px}
  .eco__c2-txt p{font-size:17px}
  .eco__c3{min-height:380px}
  .eco__c3-txt h3{font-size:32px}
  .eco__c3-txt p{font-size:18px}
  .eco__c4{min-height:445px;justify-content:flex-end;padding:32px}
  .eco__c4-txt h3{font-size:34px}
  .eco__c5{flex-direction:row-reverse;flex-wrap:wrap-reverse;padding:32px}
  .eco__c5-caixa{width:81%}
  .eco__c5-caixa h3{font-size:32px}
  .eco__c5-caixa p{font-size:18px}
  .eco__cta-esq,.eco__cta-dir{width:100%}
  .eco__cta-meio,.eco__cta-dir{order:99999}
  .eco__receita{width:58%;align-self:center}
  .eco__receita img{width:100%}
  .eco__cta-txt{width:100%;align-self:center;font-size:18px}
  .eco__cta-h{width:100%;font-size:25px}
  .eco__cta .btn{padding:18px;font-size:16px}
  .eco__metricas{width:45%;align-self:center}
  .eco__metricas img{width:100%}

  /* 3. para o seu negócio */
  .pub{padding:0 15px}
  .pub__in{flex-wrap:wrap;padding:40px 0}
  .pub__esq,.pub__dir{width:100%}
  .pub__dir{padding:20px 0 10px}
  .pub__mockups img{width:131%;margin:-3% -24% -3% -7%}
  .pub__h{width:100%;font-size:34px}
  .pub__txt{width:100%;font-size:18px}
  .pub__lista{width:100%;--ico:30px}
  .pub__lista .lista__txt{font-size:22px}
  .pub__c1,.pub__c2{padding:32px}
  .pub__alvo{width:18%}
  .pub__alvo img{width:100%}
  .pub__c1-h{width:90%;font-size:34px}
  .pilula{font-size:15px}
  .pub__seta-txt{font-size:22px}

  /* 4. condições */
  .cond{padding:40px 0}
  .cond__caixa{padding:0 15px}
  .cond__in{justify-content:center;align-items:center;gap:10px;padding:10px 0}
  .cond__linha--2{flex-wrap:wrap-reverse}
  .cond__linha--3{justify-content:center;padding:0}
  .cond__h{font-size:30px}
  .cond__h1{width:71%;text-align:end}
  .cond__h2{width:86%}
  .cond__h3{width:70%;line-height:1.4em}
  .cond__aneis{width:8%}
  .cond__aneis img{width:100%;margin:0}
  .cond__flecha{width:14%}
  .cond__flecha>span{margin:3% 53% 11% -54%;text-align:start}
  .cond__sub{font-size:22px}

  /* 5. ferramentas: o cartão do Claude vem primeiro no celular */
  .ferr{padding:0 15px}
  .ferr__in{padding:40px 0}
  .ferr__linha{flex-wrap:wrap;padding:0}
  .ferr__esq,.ferr__esq-in{min-height:0}
  .ferr__h{width:88%;font-size:34px}
  .ferr__sub{width:100%;font-size:18px}
  .ferr__dir,.ferr__dir-in{padding:0}
  .ferr__card--claude{order:-99999;z-index:0}
  .ferr__nome{--ico:40px}
  .ferr__nome .lista__txt{font-size:22px}
  .ferr__desc{width:98%;font-size:18px}
  .ferr__desc--75{width:92%}
  .ferr__desc--89{width:100%}
  .ferr__desc--94{width:95%}
  .ferr__fim{padding:0 20px}
  .ferr__fim-h{width:100%;align-self:center;font-size:25px;text-align:center}

  /* 6. vendendo na era da IA */
  .venda{padding:0 15px}
  .venda__in{padding:40px 0}
  .venda__h{width:92%;font-size:24px;line-height:1.3em}
  .venda__linha{gap:10px}
  .venda__p{font-size:18px}
  .venda__p--1{width:24%;text-align:start}
  .venda__p--2{width:29%}
  .venda__rostos{width:24%}
  .venda__rostos img{width:100%}

  /* 7. quem vai te guiar */
  .guia{padding:0 15px}
  .guia__in{padding:40px 0}
  .guia__cartao{padding:75% 0 3%;background-image:url(img/guia-fundo-mobile.webp)}
  .guia__h{width:65%;font-size:24px}
  .guia__linha{flex-wrap:wrap;padding:0}
  .guia__esq{width:100%;padding:0 15px}
  .guia__txt{width:100%;align-self:center;font-size:18px;text-align:center}
  .guia__numeros{justify-content:center}
  .guia__num{width:85%;padding:22px}
  .guia__num-txt--85{width:85%;align-self:center}
  .contador{font-size:32px}

  /* 8. o que você encontra aqui */
  .enc__topo{padding:0 10px}
  .enc__topo-in{padding:10px 0}
  .enc__h{width:92%;font-size:34px}
  .enc__faixa-in,.enc__faixa--1 .enc__faixa-in{flex-wrap:wrap;padding:24px 0}
  .enc__esq,.enc__dir{width:100%}
  .enc__item{--ico:28px}
  .enc__item .lista__txt{font-size:22px}
  .enc__item--80{width:100%}
  .enc__txt{width:100%;font-size:18px}
  .enc__txt--96{width:96%}
  .enc__txt--98m{width:98%}

  /* 9. chamada final */
  .final{padding:0 15px}
  .final__in{padding:40px 0}
  .final__h{font-size:24px}
  .final__cartao{min-height:0;margin-top:22px}
  .final__selo{font-size:10px}
  .final__h2{width:100%;font-size:24px}
  .btn--final{padding:15px;font-size:14px}

  /* 10. rodapé */
  .rodape{padding:0 15px}
  .rodape__in{padding:15px 0 20px}
  .rodape__txt{width:85%;font-size:18px}

  /* popup */
  .popup__form{width:100%;padding:20px}
  .form--grande input:not([type=hidden]){font-size:16px}
}

/* Movimento reduzido: sem animações contínuas, sem entrada ao rolar */
@media (prefers-reduced-motion:reduce){
  .flutua,.gira,.btn,.seta__ico svg{animation:none}
  .js .rv-esq,.js .rv-dir,.js .rv-baixo{opacity:1;transform:none;transition:none}
  .barra__cheia,.cresce,.encolhe,.btn,.pilula{transition:none}
}