/* Sistema Exato — LP de campanha · Agência Maximum
   Paleta e tipografia MEDIDAS do site do cliente em 24/08/2026 (extract-brand.js).
   Cor de ação: laranja #f39200 — já está na paleta do cliente e não colide com
   nenhum concorrente de balcão (Jacsys e SigeCloud usam verde). */

:root{
  --azul:#185688;        /* institucional, medido */
  --azul-esc:#0f3a5c;
  --ciano:#61c2c7;       /* secundária, medida */
  --lima:#a9cf46;        /* do logo — SÓ detalhe: check, borda, ícone.
                            REGRA DE MARCA (Layla, card da LP em 27/08, alinhada
                            em reunião): verde NUNCA em texto ou fonte. Texto é
                            branco, preto ou azul escuro. */
  --laranja:#f39200;     /* AÇÃO */
  --laranja-esc:#d97f00;
  --tinta:#1d1d1b;
  --texto:#4a4a4a;
  --suave:#f4f7f9;
  --borda:#e3e9ee;
  --branco:#fff;
  --raio:8px;            /* mediana do mercado: 5 a 10px */
  --sombra:0 2px 14px rgba(24,86,136,.10);
  --max:1180px;

  /* Foto de fundo do hero e do fechamento. Cada segmento sobrescreve a sua,
     logo abaixo — assim o CSS é um só para as quatro campanhas. */
  --foto-hero:url('../img/hero-autopecas.jpg');
}
body[data-nicho="construcao"]{--foto-hero:url('../img/hero-construcao.jpg')}
body[data-nicho="ferragens"] {--foto-hero:url('../img/hero-ferragens.jpg')}
body[data-nicho="eletrico"]  {--foto-hero:url('../img/hero-eletrico.jpg')}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 17px/1.65 'Open Sans',system-ui,sans-serif;color:var(--texto);background:var(--branco);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.d{font-family:'Montserrat','Open Sans',sans-serif;color:var(--tinta);line-height:1.15;font-weight:700}
section{padding:88px 0}
section[id]{scroll-margin-top:84px}
.w{width:min(var(--max),92vw);margin:0 auto}
.c{text-align:center}
.eyebrow{font:700 13px/1 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:14px}
.eyebrow.on-dark{color:#fff}
h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
.lead{font-size:19px;max-width:68ch}
.c .lead{margin-inline:auto}

/* ── botões ─────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:700 15.5px/1 'Montserrat',sans-serif;padding:15px 27px;border-radius:var(--raio);
  border:2px solid transparent;cursor:pointer;transition:.18s;text-align:center}
.btn-1{background:var(--laranja);color:#fff;box-shadow:0 4px 16px rgba(243,146,0,.32)}
.btn-1:hover{background:var(--laranja-esc);transform:translateY(-2px)}
.btn-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-2:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-3{background:transparent;color:var(--azul);border-color:var(--azul)}
.btn-3:hover{background:var(--azul);color:#fff}
.btn-bloco{width:100%}

/* ── header ─────────────────────────────────── */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--borda)}
.hd{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px}
.hd img{height:38px;width:auto}
nav{display:flex;align-items:center;gap:26px}
nav a{font:600 15px/1 'Montserrat',sans-serif;color:var(--tinta)}
nav a:hover{color:var(--azul)}
#burger{display:none;background:none;border:0;font-size:26px;color:var(--tinta);cursor:pointer;line-height:1}

/* ── hero ───────────────────────────────────── */
.hero{position:relative;color:#fff;padding:0;overflow:hidden;
  min-height:70vh;display:flex;align-items:stretch}
/* na página da ST tudo mora num .w só — centraliza o bloco na altura mínima.
   A perpétua usa .hb (grid) e tem a própria regra, por isso o :not(). */
.hero>.w:not(.hb){display:flex;flex-direction:column;justify-content:center}
.hero::before{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(15,58,92,.96) 0%,rgba(24,86,136,.92) 46%,rgba(24,86,136,.72) 100%),
             var(--foto-hero) center/cover no-repeat;}
.hero>.w{position:relative;padding:32px 0 0}
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(169,207,70,.16);
  border:1px solid rgba(169,207,70,.5);color:#fff;
  font:700 12.5px/1 'Montserrat',sans-serif;letter-spacing:.09em;text-transform:uppercase;
  padding:8px 15px;border-radius:100px;margin-bottom:15px;align-self:flex-start}
.hero h1{color:#fff;font-size:clamp(31px,3.7vw,46px);letter-spacing:-.015em;max-width:24ch;line-height:1.1}
/* O destaque do h1 sai por brilho, não por cor: o termo em foco fica branco
   puro e o resto do título recua um pouco. */
.hero h1{color:rgba(255,255,255,.84)}
.hero h1 em{font-style:normal;color:#fff}
.hero p.sub{font-size:17.5px;color:#e6eef5;max-width:66ch;margin:15px 0 24px}
.acoes{display:flex;gap:14px;flex-wrap:wrap;align-self:flex-start}
.micro{margin-top:13px;font-size:14px;color:#b9cfe2}
.micro b{color:#fff;font-weight:600}

/* barra de números — tem que caber na primeira dobra */
.nums{position:relative;margin-top:30px;border-top:1px solid rgba(255,255,255,.2);
  display:grid;grid-template-columns:repeat(4,1fr)}
.nums div{padding:16px 14px 20px;border-right:1px solid rgba(255,255,255,.14)}
.nums div:last-child{border-right:0}
.nums b{display:block;font:800 24px/1 'Montserrat',sans-serif;color:#fff;margin-bottom:4px}
.nums span{font-size:12.5px;color:#c5d8e7;line-height:1.4;display:block}

/* ── selos fiscais ──────────────────────────── */
.selos{background:var(--suave);padding:26px 0;border-bottom:1px solid var(--borda)}
.selos .w{display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap}
.selos p{font:600 14px/1.4 'Montserrat',sans-serif;color:var(--azul);margin-right:8px}
.selos img{height:46px;width:auto;opacity:.9;filter:grayscale(.35) contrast(1.15);transition:.2s}
.selos img:hover{opacity:1;filter:none}

/* ── urgência ───────────────────────────────── */
.urg{background:var(--tinta);color:#fff}
.urg h2{color:#fff}
.urg .lead{color:#c9cfd4}
.linha{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.13);border-radius:var(--raio);overflow:hidden;margin-top:36px}
.linha div{background:var(--tinta);padding:26px 22px}
.linha b{display:block;font:800 17px/1.2 'Montserrat',sans-serif;color:var(--laranja);margin-bottom:9px}
.linha p{font-size:15px;color:#c9cfd4;line-height:1.55}
.fonte{margin-top:22px;font-size:13.5px;color:#8d949a}
.fonte a{color:var(--ciano);text-decoration:underline}

/* ── cards genéricos ────────────────────────── */
.grid{display:grid;gap:26px;margin-top:44px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;
  transition:.2s;display:flex;flex-direction:column}
.card:hover{box-shadow:var(--sombra);transform:translateY(-3px)}
.card img{height:172px;object-fit:cover;width:100%}
.card .in{padding:24px}
.card h3{font-size:19px;margin-bottom:9px}
.card p{font-size:15.5px;line-height:1.6}
.ico{width:44px;height:44px;border-radius:10px;background:rgba(24,86,136,.09);
  display:grid;place-items:center;margin-bottom:14px}
.ico svg{width:23px;height:23px;stroke:var(--azul);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}


/* ═══ PÁGINA PERPÉTUA ═══
   Hero com o PRODUTO em janela de aplicativo — nenhum dos 18 concorrentes
   medidos mostra o sistema na primeira dobra. */
.hero-b::before{
  background:
    radial-gradient(90% 120% at 78% 8%, rgba(97,194,199,.22) 0%, rgba(97,194,199,0) 55%),
    radial-gradient(120% 130% at 10% 15%, #1d6ba6 0%, #14476f 48%, #0b2c47 100%)}

/* o check da marca, gigante e discreto, dá profundidade sem poluir */
.hero-b::after{content:'';position:absolute;right:-6%;bottom:-28%;width:62%;height:118%;
  background:url('../img/check-marca.png') right bottom/contain no-repeat;
  opacity:.06;pointer-events:none}

.hero>.hb{display:grid;grid-template-columns:.94fr 1.06fr;gap:52px;align-items:center;
  position:relative;z-index:2;min-height:70vh;padding:52px 0}
.hero-b h1{font-size:clamp(33px,4.15vw,54px);letter-spacing:-.02em;max-width:15ch}
.hero-b p.sub{font-size:18.5px;max-width:44ch;color:#cfe0ee}

/* janela de aplicativo */
.janela{border-radius:12px;overflow:hidden;background:#1b2733;
  box-shadow:0 34px 90px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.10);
  transform:perspective(1500px) rotateY(-7deg) rotateX(1.2deg);
  transform-origin:left center;transition:transform .45s ease}
.janela:hover{transform:perspective(1500px) rotateY(-3deg) rotateX(0deg)}
.janela .barra{height:36px;background:#22303e;display:flex;align-items:center;gap:7px;
  padding:0 15px;border-bottom:1px solid rgba(255,255,255,.07)}
.janela .barra i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.20)}
.janela .barra span{margin-left:12px;font:600 12px/1 'Open Sans',sans-serif;color:#8fa6b8}
.janela img{display:block;width:100%;height:clamp(300px,34vw,430px);
  object-fit:cover;object-position:top center}

@media(max-width:960px){
  /* No celular o texto vem primeiro: promessa, apoio e botão antes da imagem.
     A tela do sistema entra como prova DEPOIS do CTA, não como cartão de visita. */
  .hero>.hb{grid-template-columns:1fr;gap:0;min-height:0;padding:34px 0 46px}
  .hb .tela-hero{margin-top:30px}
  .janela{transform:none;box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.10)}
  .janela .barra{height:32px}
  /* Painel denso não fica legível a 358px de largura. O enquadramento vai para a
     área de dados — tabela, filtros e gráfico — que é o que comunica "sistema real". */
  .janela img{height:186px;object-position:center 86%}
  .hero-b h1{max-width:none;font-size:clamp(29px,7.6vw,38px)}
  .hero-b p.sub{max-width:none;font-size:16.5px}
  .hero-b::after{opacity:.05;right:-20%;bottom:auto;top:-6%;width:92%;height:60%}
  /* CTA em uma linha só: "Agendar demonstração de 30 minutos" quebrava em duas. */
  .hero .acoes .btn-1{font-size:15px;padding:17px 18px;line-height:1.25}
}
/* A regra geral do responsivo zera o min-height do hero; a perpétua mantém os 70vh
   também no celular, senão em telas largas (430px) o bloco encolhia para ~62vh. */
@media(max-width:720px){
  .hero.hero-b{min-height:70vh}
  .hero-b>.hb{align-content:center}
}
/* Celular estreito (360px): o rótulo do botão ainda quebrava em duas linhas. */
@media(max-width:400px){
  .hero .acoes .btn-1{font-size:13.5px;padding:16px 10px}
}


/* tira fina de credibilidade */
.tira{background:var(--azul-esc);border-top:1px solid rgba(255,255,255,.13)}
.tira .w{display:flex;align-items:center;justify-content:space-between;gap:30px;
  flex-wrap:wrap;padding:18px 0}
.tira span{font-size:14.5px;color:#bed3e3}
.tira b{color:#fff;font:700 15px/1 'Montserrat',sans-serif;margin-right:5px}
@media(max-width:720px){.tira .w{flex-direction:column;align-items:flex-start;gap:9px}}

/* selos dentro de uma seção, não como faixa de página */
.selos-inline{background:transparent;border:0;border-top:1px solid var(--borda);
  margin-top:40px;padding:26px 0 0}
.selos-inline .w{width:100%}

/* lista de dores — numerada, sem cards */
/* Lista editorial, não grade de cartões. A seção de funcionalidades logo abaixo
   também é feita de blocos de texto — se as duas forem grade, a página fica
   repetitiva. Aqui a leitura é em linhas largas, com o número em marca-d'água. */
.dores{list-style:none;counter-reset:d;margin-top:44px;border-top:1px solid var(--borda)}
.dores li{counter-increment:d;position:relative;display:grid;
  grid-template-columns:96px 1fr;gap:26px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--borda);transition:.25s}
/* b e p são irmãos do ::before. Sem fixar a coluna, o parágrafo cai na faixa
   estreita do número. */
.dores li::before{content:counter(d,decimal-leading-zero);
  grid-column:1;grid-row:1 / span 2;
  font:800 46px/1 'Montserrat',sans-serif;color:var(--borda);
  transition:color .25s}
.dores b,.dores p{grid-column:2}
.dores li:hover{background:var(--suave);padding-left:14px;padding-right:14px}
.dores li:hover::before{color:var(--azul)}
.dores b{display:block;font:700 20px/1.3 'Montserrat',sans-serif;color:var(--tinta);margin-bottom:8px}
.dores p{font-size:16.5px;line-height:1.65;max-width:62ch}
@media(max-width:720px){.dores{grid-template-columns:1fr}.dores li{padding:20px 20px 20px 62px}}

/* zigzag — imagem e texto alternando lado */
.zz{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:52px}
.zz:nth-of-type(even) .zz-img{order:2}
.zz-img img{border-radius:var(--raio);width:100%;height:340px;object-fit:cover}
.zz h3{font-size:26px;margin-bottom:12px}
.zz p{font-size:16.5px;line-height:1.7}
.zz .marca{display:inline-block;font:700 11.5px/1 'Montserrat',sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--laranja);margin-bottom:12px}
/* Bloco sem foto. O 03 ("A gente diz quando não serve") perdeu a foto em 11/09: o
   documento do cliente pede remover a do senhor com potes, e nenhuma substituta
   passou. Uma coluna só, centrada, com a borda da marca — senão sobra meia seção vazia. */
.zz.zz-texto{grid-template-columns:1fr;max-width:760px;margin-inline:auto;
  border-left:4px solid var(--lima);padding:6px 0 6px 32px}
@media(max-width:860px){.zz{grid-template-columns:1fr;gap:24px;margin-top:38px}
  .zz:nth-of-type(even) .zz-img{order:0}.zz-img img{height:230px}
  .zz.zz-texto{padding-left:20px}}

/* funcionalidades — lista compacta, sem card */
.abas{margin-top:42px;display:grid;grid-template-columns:250px 1fr;gap:0;
  border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden}
.abas-nav{display:flex;flex-direction:column;background:var(--suave);
  border-right:1px solid var(--borda)}
.aba{appearance:none;background:none;border:0;border-bottom:1px solid var(--borda);
  text-align:left;padding:17px 22px;cursor:pointer;position:relative;
  font:600 15.5px/1.3 'Montserrat',sans-serif;color:var(--texto);transition:.2s}
.aba:last-child{border-bottom:0}
.aba::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--laranja);transform:scaleY(0);transition:transform .22s}
.aba:hover{color:var(--azul);background:#fff}
.aba.on{background:#fff;color:var(--azul)}
.aba.on::before{transform:scaleY(1)}
.abas-corpo{background:#fff;padding:34px 36px;min-height:210px}
.painel{display:none}
.painel.on{display:block;animation:sobe .32s cubic-bezier(.22,.8,.3,1) both}
.painel h3{font-size:21px;color:var(--tinta);margin-bottom:10px}
.painel p{font-size:16.5px;line-height:1.7;max-width:60ch}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  /* No celular vira lista aberta: aba lateral não cabe e esconder conteúdo
     em tela pequena só faz o visitante rolar às cegas. */
  .abas{grid-template-columns:1fr}
  .abas-nav{display:none}
  .abas-corpo{padding:0}
  .painel{display:block;padding:22px 24px;border-bottom:1px solid var(--borda);animation:none}
  .painel:last-child{border-bottom:0}
}
@media(max-width:860px){.func{grid-template-columns:1fr}}

/* depoimento em destaque, um só */
.dest{display:grid;grid-template-columns:210px 1fr;gap:40px;align-items:center;
  background:#fff;border:1px solid var(--borda);border-left:5px solid var(--lima);
  border-radius:var(--raio);padding:38px 42px;margin-top:42px;box-shadow:var(--sombra)}
.dest img{width:100%;height:auto;filter:grayscale(.2)}
.dest blockquote{font:400 21px/1.6 'Open Sans',sans-serif;color:var(--tinta);margin-bottom:18px}
.dest cite{font-style:normal;font:700 15.5px/1.4 'Montserrat',sans-serif;color:var(--tinta)}
.dest cite span{display:block;font-weight:400;font-size:13.5px;color:#7a8288;margin-top:3px;
  font-family:'Open Sans',sans-serif}
@media(max-width:860px){.dest{grid-template-columns:1fr;gap:22px;padding:26px}
  .dest img{max-width:170px}.dest blockquote{font-size:18px}}

/* frases curtas de apoio, em linha */
.curtas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
.curtas div{border-top:3px solid var(--lima);padding-top:16px}
.curtas q{display:block;font-size:15.5px;line-height:1.6;color:var(--texto);margin-bottom:10px}
.curtas b{font:700 14.5px/1.3 'Montserrat',sans-serif;color:var(--tinta)}
.curtas span{display:block;font-size:13px;color:#7a8288}
@media(max-width:860px){.curtas{grid-template-columns:1fr;gap:20px}}

/* oferta centrada, formato diferente do da outra página */
.oferta-b{max-width:760px;margin:44px auto 0;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);border-radius:var(--raio);padding:38px 42px}
.oferta-b ul{list-style:none}
.oferta-b li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.11);
  font-size:16.5px;color:#dbe8f2;line-height:1.55}
.oferta-b li:last-child{border-bottom:0}
.oferta-b li b{flex:0 0 132px;color:#fff;font:700 15px/1.55 'Montserrat',sans-serif}
@media(max-width:720px){.oferta-b{padding:26px 22px}.oferta-b li{flex-direction:column;gap:3px}
  .oferta-b li b{flex:none}}

/* ── faixa de imagem ────────────────────────── */
.faixa{position:relative;min-height:340px;display:grid;place-items:center;text-align:center;color:#fff;padding:70px 0}
.faixa::before{content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(29,29,27,.78),rgba(29,29,27,.78)),url('../img/faixa-loja.jpg') center/cover no-repeat}
.faixa .w{position:relative}
.faixa h2{color:#fff;max-width:22ch;margin-inline:auto}
.faixa p{color:#d5dade;max-width:56ch;margin:14px auto 0;font-size:18px}

/* ── segmentos ──────────────────────────────── */
.seg{background:var(--azul-esc);color:#fff}
.seg h2{color:#fff}
.seg .lead{color:#bed3e3}
.seg .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.seg .card h3{color:#fff}
.seg .card p{color:#bed3e3}
.seg .card.on{border-color:var(--lima);background:rgba(169,207,70,.09)}
.tagora{display:inline-block;font:700 11px/1 'Montserrat',sans-serif;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 10px;border-radius:5px;margin-bottom:10px}
.t-sai{background:var(--laranja);color:#fff}
.t-fica{background:rgba(255,255,255,.16);color:#dfe9f1}

/* ── comparativo ────────────────────────────── */
.tab{width:100%;border-collapse:collapse;margin-top:40px;font-size:15.5px;
  border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden}
.tab th,.tab td{padding:17px 20px;text-align:left;border-bottom:1px solid var(--borda);vertical-align:top}
.tab thead th{background:var(--suave);font:700 14px/1.3 'Montserrat',sans-serif;color:var(--tinta)}
.tab thead th:last-child{background:var(--azul);color:#fff}
.tab td:last-child{background:rgba(169,207,70,.09);font-weight:600;color:var(--tinta)}
.tab tbody tr:last-child td{border-bottom:0}
.tab td:first-child{font-weight:600;color:var(--tinta)}

/* ── depoimentos ────────────────────────────── */
.dep{background:var(--suave)}
.dep .card{padding:26px;background:#fff}
.dep blockquote{font-size:16.5px;line-height:1.7;color:var(--texto);margin-bottom:18px}
.dep blockquote::before{content:'“';font:800 46px/0 'Montserrat',sans-serif;color:var(--azul);
  display:block;margin-bottom:16px}
.dep cite{font-style:normal;display:block;font:700 15px/1.4 'Montserrat',sans-serif;color:var(--tinta)}
.dep cite span{display:block;font-weight:400;font-size:13.5px;color:#7a8288;margin-top:3px;font-family:'Open Sans',sans-serif}


/* faixa de logos de clientes — dessaturado em repouso, cor no hover.
   Logos de clientes têm paletas conflitantes; coloridos ao mesmo tempo viram poluição. */
.logos{display:flex;align-items:center;justify-content:center;gap:46px;flex-wrap:wrap;
  margin-top:40px;padding:26px 30px;background:#fff;border:1px solid var(--borda);border-radius:var(--raio)}
.logos img{height:54px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:.22s}
.logos img:hover{filter:none;opacity:1}
.logos .mais{font-size:15px;color:var(--texto);max-width:24ch;line-height:1.5}
.logos .mais b{color:var(--tinta);font-weight:600}
@media(max-width:720px){.logos .mais{max-width:none;text-align:center}}
@media(max-width:720px){.logos{gap:28px;padding:20px}.logos img{height:42px}}

/* ── oferta ─────────────────────────────────── */
.oferta{background:var(--azul);color:#fff}
.oferta h2,.oferta h3{color:#fff}
.oferta .lead{color:#cadcea}
/* Estas regras apontavam para `.cx`, classe que NÃO existe em nenhuma página — o HTML
   do bloco da oferta usa `.caixa`. O efeito no ar era pior do que parecia: listas com
   marcador padrão do navegador em vez dos checks, os passos sem os números, tabulações
   diferentes entre as duas colunas e — o mais visível — o contador de passos renderizado
   solto POR CIMA do título "O que você recebe", porque `position:absolute` sem ancestral
   posicionado sobe até o primeiro que houver.

   O layout em duas colunas do CSS antigo não foi restaurado de propósito: o cliente
   validou a página com os blocos empilhados. Aqui se conserta o que está quebrado —
   marcadores, numeração e tabulação —, não se redesenha o que foi aprovado. */
/* Sem o layout de duas colunas do CSS antigo, a caixa herdava a largura da
   seção — 1180px — e o campo de nome atravessava a tela. Largura de leitura
   resolve sem mexer no empilhamento que o cliente validou. */
.oferta .caixa{max-width:620px;margin-inline:auto;text-align:left}
.oferta .caixa ul{list-style:none;margin-top:18px;padding-left:0}
.oferta .caixa li{padding-left:30px;position:relative;margin-bottom:14px;
  font-size:16px;color:#dbe8f2;line-height:1.55}
.oferta .caixa li::before{content:'';position:absolute;left:0;top:7px;width:16px;height:9px;
  border-left:2.5px solid var(--lima);border-bottom:2.5px solid var(--lima);transform:rotate(-45deg)}

/* O número ocupa a MESMA faixa de 30px do check, para as duas listas começarem na
   mesma tabulação — que foi o ajuste pedido. */
.oferta .caixa .passos{counter-reset:p}
.oferta .caixa .passos li{counter-increment:p}
.oferta .caixa .passos li::before{content:counter(p);top:0;
  width:22px;height:22px;border:0;border-radius:50%;background:var(--laranja);color:#fff;
  display:grid;place-items:center;transform:none;font:700 12px/1 'Montserrat',sans-serif}

/* ── FAQ ────────────────────────────────────── */
.faq{max-width:840px;margin:44px auto 0}
details{border:1px solid var(--borda);border-radius:var(--raio);margin-bottom:12px;background:#fff}
summary{padding:20px 24px;cursor:pointer;font:700 16.5px/1.4 'Montserrat',sans-serif;
  color:var(--tinta);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font:400 25px/1 'Montserrat',sans-serif;color:var(--laranja);flex:0 0 auto}
details[open] summary::after{content:'–'}
details p{padding:0 24px 22px;font-size:16px;line-height:1.7}

/* ── CTA final ──────────────────────────────── */
.final{position:relative;color:#fff;text-align:center}
.final::before{content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(15,58,92,.95),rgba(15,58,92,.95)),var(--foto-hero) center/cover no-repeat}
.final .w{position:relative}
.final h2{color:#fff;max-width:20ch;margin-inline:auto}
.final p{color:#cadcea;max-width:56ch;margin:16px auto 30px;font-size:18px}
.final .acoes{justify-content:center}

/* oferta permanente, no fim */
.perm{background:var(--suave);border-top:1px solid var(--borda);padding:56px 0;text-align:center}
.perm h3{font-size:23px;margin-bottom:10px}
.perm p{max-width:60ch;margin:0 auto 22px}

/* ── rodapé ─────────────────────────────────── */
footer{background:var(--tinta);color:#9aa1a7;padding:52px 0 30px;font-size:14.5px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.11)}
/* A placa clara existe para o cabeçalho do formulário: o cliente disse não
   querer a versão branca da logo (Layla no card da LP, 25/08), e a original é
   escura demais para fundo escuro. No RODAPÉ das LPs a decisão foi outra —
   João, 25/08: ali não tem como, fica a logo branca mesmo. */
.marca-placa{display:inline-flex;background:#fff;border-radius:9px;
  padding:10px 15px;margin-bottom:16px}
.marca-placa img{height:36px;width:auto;display:block;margin:0}
footer img{height:40px;width:auto;margin-bottom:16px}
footer h4{color:#fff;font-size:15px;margin-bottom:13px}
footer a:hover{color:#fff}
footer li{list-style:none;margin-bottom:9px}
.fim{padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px}
.fim a{color:var(--ciano)}

/* ── responsivo ─────────────────────────────── */
@media(max-width:960px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .cx{grid-template-columns:1fr}
  .linha{grid-template-columns:repeat(2,1fr)}
  .fg{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  section{padding:60px 0}
  #burger{display:block}
  nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:10px 0;
    border-bottom:1px solid var(--borda);box-shadow:var(--sombra)}
  nav.on{display:flex}
  nav a{padding:13px 6vw}
  nav .btn{margin:10px 6vw}
  .hero{min-height:0}
  .hero>.w{padding-top:36px}
  .hero h1{font-size:31px;max-width:none}
  .nums{grid-template-columns:repeat(2,1fr);margin-top:32px}
  .nums div{border-right:0;border-top:1px solid rgba(255,255,255,.14);padding:16px 12px 18px}
  .nums b{font-size:22px}
  .g2,.g3,.g4,.fg{grid-template-columns:1fr}
  .acoes .btn{width:100%}
  .tab{display:block;overflow-x:auto;white-space:nowrap}
  .selos .w{gap:22px}
  .selos img{height:34px}
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRA DE AVISO, POP-UP DE SAÍDA E MOVIMENTO
   ══════════════════════════════════════════════════════════════════════════ */

/* ── barra de aviso ─────────────────────────────────────────────────────── */
.aviso{background:var(--azul-esc);color:#fff;font-size:14.5px;position:relative;z-index:70}
.aviso .w{display:flex;align-items:center;gap:14px;padding:11px 0;flex-wrap:wrap}
.aviso p{margin:0;flex:1;min-width:220px}
.aviso b{font-weight:700}
.aviso .conta{white-space:nowrap}
.aviso a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  font:600 14px/1 'Montserrat',sans-serif;white-space:nowrap}
.aviso a:hover{text-decoration-thickness:2px}
.aviso .ponto{width:8px;height:8px;border-radius:50%;background:var(--laranja);
  flex:none;animation:pulsa 2.4s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.fechar-aviso{background:none;border:0;color:rgba(255,255,255,.6);font-size:20px;
  line-height:1;cursor:pointer;padding:0 2px}
.fechar-aviso:hover{color:#fff}
.aviso.oculto{display:none}
@media(max-width:720px){
  .aviso{font-size:13px}
  .aviso .w{gap:9px;padding:9px 0}
  .aviso a{width:100%;order:3}
}

/* ── pop-up de saída ────────────────────────────────────────────────────── */
.saida{position:fixed;inset:0;z-index:220;display:none;place-items:center;padding:22px;
  background:rgba(11,44,71,.72);backdrop-filter:blur(3px)}
.saida.on{display:grid;animation:aparece .22s ease both}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.saida .caixa{background:#fff;border-radius:14px;max-width:520px;width:100%;
  padding:38px 36px 32px;position:relative;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:entra-caixa .3s cubic-bezier(.22,.8,.3,1) both}
@keyframes entra-caixa{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.saida h3{font-size:25px;line-height:1.25;margin-bottom:12px}
.saida p{font-size:16.5px;line-height:1.6;margin-bottom:24px}
.saida .btn{width:100%}
.saida .btn+.btn{margin-top:10px}
.saida .fechar{position:absolute;top:12px;right:16px;background:none;border:0;
  font-size:26px;color:#9aa1a7;cursor:pointer;line-height:1}
.saida .fechar:hover{color:var(--tinta)}
.saida .selo{display:inline-block;font:700 12px/1 'Montserrat',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;color:var(--azul);
  background:var(--suave);border-radius:20px;padding:8px 15px;margin-bottom:16px}

/* ── movimento ──────────────────────────────────────────────────────────── */
/* Blocos sobem ao entrar na tela. Sem JS, ou com movimento reduzido no
   sistema, tudo aparece normalmente — a animação nunca esconde conteúdo. */
.js .rev{opacity:0;transform:translateY(24px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1)}
.js .rev.vis{opacity:1;transform:none}
.js .rev-1{transition-delay:.06s}
.js .rev-2{transition-delay:.12s}
.js .rev-3{transition-delay:.18s}

/* A tela do sistema no hero flutua de leve — dá vida sem distrair. */
.janela{animation:flutua 7s ease-in-out infinite}
@keyframes flutua{0%,100%{transform:perspective(1500px) rotateY(-7deg) rotateX(1.2deg) translateY(0)}
                  50%{transform:perspective(1500px) rotateY(-7deg) rotateX(1.2deg) translateY(-12px)}}
.janela:hover{animation-play-state:paused}

/* A foto do hero da campanha aproxima devagar: o fundo deixa de ser estático. */
.hero::before{animation:aproxima 26s ease-in-out infinite alternate}
@keyframes aproxima{from{transform:scale(1)}to{transform:scale(1.07)}}

@media(prefers-reduced-motion:reduce){
  .js .rev{opacity:1;transform:none;transition:none}
  .janela,.hero::before,.aviso .ponto{animation:none}
  .saida.on,.saida .caixa,.painel.on{animation:none}
}

/* ── formulário curto do eBook, no cartão da hero ────────────────────────────
   O cartão é claro sobre o azul da hero: o formulário tem de ser a coisa mais
   clara da primeira dobra, senão compete com o título em vez de completá-lo.
   A hero da ST passa a usar a mesma grade .hb da página perpétua. */
/* A hero da ST passou a ter DOIS filhos — a grade com o formulário e a faixa de
   números. O `.hero` é flex: sem trocar a direção, os dois viram colunas lado a
   lado com metade da largura cada, que foi exatamente o que quebrou na primeira
   montagem. Classe própria em vez de :has() para não depender de suporte. */
.hero-st{flex-direction:column;justify-content:center}
.hero-st>.hb{width:min(var(--max),92vw);margin-inline:auto;
  /* a perpétua dá mais espaço à direita porque lá mora um print do produto;
     aqui é um formulário de três campos e quem precisa de largura é o texto */
  grid-template-columns:1.18fr .82fr;
  /* 52px do padrão empurravam a faixa de números 23px abaixo da dobra num
     monitor de 900px — e ela é parte da primeira impressão da campanha. */
  padding:30px 0 26px;min-height:0}
.hero-st>.w:not(.hb){width:min(var(--max),92vw);margin-inline:auto;padding:0 0 6px}

.cartao-form{background:#fff;border-radius:var(--raio);padding:28px 26px;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.55);align-self:center}
.cartao-form h3{font-size:20px;margin-bottom:6px}
.cartao-form .cf-sub{font-size:14.5px;color:var(--texto);line-height:1.5;margin-bottom:4px}
.cartao-form .fe-campo span{color:var(--tinta)}
.cartao-form .fe-campo input{border-color:var(--borda)}
.cartao-form .fe-campo .erro-campo{color:#c0392b}
.cartao-form .fe .erro-envio{color:#c0392b}
.cartao-form .fe-nota{color:#7a8288}

/* A barra de números sai da grade e volta a ocupar a largura inteira. */
.hero>.w+.w{position:relative;padding:0 0 4px}

@media(max-width:900px){
  /* No celular o cartão vem DEPOIS do texto: quem chega pelo anúncio precisa
     ler do que se trata antes de ver três campos pedindo o WhatsApp. */
  .cartao-form{margin-top:26px}
}

/* ── formulário curto do eBook — campos ──────────────────────────────────────
   Vive sobre o azul da seção, então os campos são claros e o rótulo é branco.
   Sem placeholder fazendo papel de rótulo: placeholder some quando a pessoa
   digita, e num formulário de três campos isso já basta para ela perder o fio. */
.fe{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.fe-campo{display:block}
.fe-campo span{display:block;font:600 13.5px/1.4 'Montserrat',sans-serif;
  color:#dbe8f2;margin-bottom:6px}
.fe-campo input{width:100%;background:#fff;border:1px solid rgba(255,255,255,.25);
  border-radius:var(--raio-sm,6px);padding:13px 15px;font:400 16px/1.4 'Open Sans',sans-serif;
  color:var(--tinta);transition:border-color .15s,box-shadow .15s}
.fe-campo input:focus{outline:none;border-color:var(--lima);
  box-shadow:0 0 0 3px rgba(169,207,70,.28)}
.fe-campo input[aria-invalid]{border-color:#e2696e;box-shadow:0 0 0 3px rgba(226,105,110,.22)}
.fe-campo .erro-campo{display:block;min-height:16px;margin-top:5px;
  font:600 12.5px/1.3 'Open Sans',sans-serif;color:#ffc9cb;font-style:normal}
.fe .btn{margin-top:4px}
.fe .erro-envio{display:block;font:600 13px/1.4 'Open Sans',sans-serif;
  color:#ffc9cb;font-style:normal}
.fe-nota{font-size:13px;color:#a9c2d6;margin-top:2px}