/* Estilo das páginas públicas do site (início da indústria e página do
   escritório de inspeção). Saiu de dentro do index.html no item 251
   (02/11/2026), quando o site passou a ter duas páginas de venda. */
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:80px;}
body{margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
     color:var(--text); background:#fff; -webkit-font-smoothing:antialiased;}

/* Laranja de arco elétrico — identidade visual do projeto, ainda sem
   variável em css/tokens.css (lacuna já registrada). Declarado local. */
:root{ --arco:#F97316; --arco-bg:#FFF7ED; --arco-borda:#FED7AA; --arco-texto:#9A3412; --arco-titulo:#C2410C; }

.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---------------- botões ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     font-family:inherit; font-size:15px; font-weight:600; line-height:1;
     padding:14px 22px; border-radius:9px; border:1px solid transparent;
     text-decoration:none; cursor:pointer; transition:.15s;}
.btn i{font-size:18px;}
.btn-primary{background:var(--action); color:var(--action-contraste);}
.btn-primary:hover{background:var(--action-hover);}
.btn-ghost{background:#fff; color:var(--primary); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--action); color:var(--action);}
.btn-light{background:#fff; color:var(--primary);}
.btn-light:hover{background:#EFF4FB;}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.35);}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn-sm{font-size:14px; padding:10px 16px; white-space:nowrap;}
.btn:focus-visible{outline:2px solid var(--action); outline-offset:3px;}

/* ---------------- topbar ---------------- */
.topbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
        backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.topbar-inner{display:flex; align-items:center; gap:28px; height:68px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.logo-icon{width:32px; height:32px; border-radius:9px; background:var(--primary-fill);
           display:flex; align-items:center; justify-content:center;}
.logo-icon i{color:#fff; font-size:18px;}
.logo-text{font-size:18px; font-weight:700; color:var(--primary); letter-spacing:-.01em;}
.nav{display:flex; gap:26px; margin-left:auto;}
.nav a{font-size:14.5px; font-weight:500; color:var(--text-2); text-decoration:none;}
.nav a:hover{color:var(--primary);}
/* Seção atual (clicada ou visível na tela) fica marcada no menu. */
.nav a{position:relative; padding:6px 0;}
.nav a.ativo{color:var(--primary); font-weight:600;}
.nav a.ativo::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
                    border-radius:2px; background:var(--action);}

/* Relatório de exemplo para baixar, logo abaixo do carrossel. */
.exemplo-pdf{display:block; width:max-content; margin:16px auto 0; font-size:14.5px; font-weight:600;
             color:var(--action); text-decoration:underline; text-underline-offset:3px;}
.exemplo-pdf:hover{color:var(--action-hover);}
.exemplo-pdf:focus-visible{outline:2px solid var(--action); outline-offset:3px;}
.topbar-acoes{display:flex; align-items:center; gap:10px;}
.link-entrar{font-size:14.5px; font-weight:600; color:var(--primary); text-decoration:none; padding:10px 8px;}
.link-entrar:hover{color:var(--action);}
.link-blog-celular{display:none;}

/* ---------------- hero ---------------- */
.hero{overflow-x:clip; background:linear-gradient(180deg,#F8FAFC 0%,#fff 100%);
      border-bottom:1px solid var(--border); padding:72px 0 80px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.selo-norma{display:inline-flex; align-items:center; gap:8px; background:var(--arco-bg);
            border:1px solid var(--arco-borda); color:var(--arco-texto); font-size:13px;
            font-weight:600; padding:7px 13px; border-radius:999px; margin-bottom:22px;
            line-height:1.4;}
.selo-norma i{font-size:15px; color:var(--arco); flex-shrink:0;}
h1{font-size:46px; line-height:1.12; font-weight:800; color:var(--primary);
   letter-spacing:-.025em; margin:0 0 20px;}
h1 .destaque{color:var(--arco);}
.hero-sub{font-size:18px; line-height:1.62; color:var(--text-2); margin:0 0 30px; max-width:35em;}
.hero-sub b{color:var(--text); font-weight:600;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px;}

/* carrossel de capturas reais */
.mock-viewport{position:relative;}
.mock-carrossel-viewport{position:relative; display:block; width:100%; margin:0; padding:0;
    border:none; background:var(--gray-bg); cursor:zoom-in;
    aspect-ratio:1440/980; overflow:hidden;}
.mock-slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:top; opacity:0; transition:opacity .45s ease; pointer-events:none;}
.mock-slide.ativo{opacity:1;}
.mock-zoom{position:absolute; right:12px; bottom:12px; width:32px; height:32px; border-radius:50%;
    background:rgba(15,23,42,.6); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:16px; opacity:0; transition:opacity .2s; z-index:2;}
.mock-carrossel-viewport:hover .mock-zoom,
.mock-carrossel-viewport:focus-visible .mock-zoom{opacity:1;}

/* modal de expansão da captura */
.lb{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:32px;}
.lb[hidden]{display:none;}
.lb-backdrop{position:absolute; inset:0; background:rgba(15,23,42,.72); backdrop-filter:blur(4px);}
.lb-conteudo{position:relative; max-width:min(1440px,92vw); max-height:88vh; overflow:auto;
    border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.35); background:#fff;}
/* A imagem cabe inteira na janela, no computador e no celular (16/10/2026:
   no celular ela abria em 1440px e rolava de lado). Para ler detalhe no
   celular, a pinça nativa amplia (touch-action:manipulation a mantém). */
.lb-img{display:block; width:auto; height:auto; max-width:min(1440px, 92vw); max-height:86vh;
        object-fit:contain; touch-action:manipulation;}
.lb-fechar{position:fixed; top:20px; right:24px; width:40px; height:40px; border-radius:50%;
    border:none; background:#fff; color:var(--text); font-size:18px; display:flex;
    align-items:center; justify-content:center; cursor:pointer; z-index:2; box-shadow:0 4px 14px rgba(0,0,0,.2);}
/* Setas de navegação do modal — quase transparentes por padrão (pedido
   explícito), só ganham presença no hover/foco para não competir com a
   captura. Fixas na borda da viewport, não dentro de .lb-conteudo, porque
   o conteúdo tem `overflow:auto` (imagem larga rolando) e um botão preso a
   ele rolaria junto, saindo da vista. */
.lb-seta{position:fixed; top:50%; transform:translateY(-50%); width:44px; height:44px;
    border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff;
    font-size:20px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:2; opacity:.45; transition:opacity .15s, background-color .15s;}
.lb-seta:hover, .lb-seta:focus-visible{opacity:1; background:rgba(255,255,255,.28);}
.lb-seta-prev{left:16px;}
.lb-seta-next{right:16px;}
.lb-seta[hidden]{display:none;}
.lb-dica{position:fixed; bottom:16px; left:0; right:0; text-align:center; font-size:12px; color:#fff; display:none;}
@media (max-width:767px){
  .lb{padding:16px;}
  .lb-conteudo{max-width:90vw; max-height:85vh; overflow:hidden;}
  .lb-img{max-width:90vw; max-height:85vh;}
  .lb-dica{display:block;}
}
@media (max-width:640px){
  .lb-seta{width:38px; height:38px; font-size:17px; opacity:.55;}
  .lb-seta-prev{left:6px;}
  .lb-seta-next{right:6px;}
}

/* ---------------- seções ---------------- */
section{padding:84px 0;}
.sec-borda{border-top:1px solid var(--border);}
.sec-cinza{background:var(--bg);}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
         color:var(--action); margin:0 0 12px;}
h2{font-size:34px; line-height:1.2; font-weight:800; color:var(--primary);
   letter-spacing:-.022em; margin:0 0 16px;}
.sec-intro{font-size:17px; line-height:1.62; color:var(--text-2); max-width:44em; margin:0 0 44px;}
.sec-intro b{color:var(--text); font-weight:600;}
.sec-cabecalho{max-width:46em;}
.sec-cabecalho-centro{max-width:46em; margin:0 auto; text-align:center;}
.sec-cabecalho-centro .sec-intro{margin:0 auto 44px;}

/* tese */
.tese{background:var(--primary-fill); color:#fff;}
.tese h2{color:#fff;}
.tese .eyebrow{color:#7FA9E8;}
.tese-grid{max-width:46em; margin:0 auto; text-align:center;}
.tese p{font-size:16.5px; line-height:1.68; color:#C7D6EC; margin:0 0 16px;}
.tese p b{color:#fff; font-weight:600;}
.citacao{border-left:3px solid var(--arco); padding:4px 0 4px 20px; margin:26px 0 0;
         font-size:16.5px; line-height:1.6; color:#fff; font-style:italic;}
.citacao cite{display:block; font-style:normal; font-size:13.5px; color:#8FB3E6; margin-top:10px;}

/* inspeção em campo */
.insp-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
/* Moldura de notebook, desenhada em CSS — nenhuma imagem de moldura é
   baixada. São duas peças: a tampa (que segura o print) e a base, um pouco
   mais larga, com o recorte central de abrir. A base precisa transbordar a
   largura da tampa, e é por isso que o .insp-print não pode ter
   `overflow:hidden`, que a cortaria. */
.insp-print{margin:0;}
/* `--base-extra` é o quanto a base ultrapassa a tampa de cada lado. Fica em
   variável porque o hero tem coluna mais estreita que esta seção, e lá esse
   transbordo precisa ser menor para não encostar na borda da página. */
.notebook{--base-extra:6%; filter:drop-shadow(0 22px 34px rgba(20,48,77,.26));}
/* A moldura usa var(--ink), o MESMO token que a sidebar do sistema lê
   (css/sidebar.css). Os degrades da base sao sobreposicoes translucidas
   por cima dele, e nao hex proprios, para o notebook acompanhar sozinho
   se a cor de marca mudar -- nao duplicar fato. */
.notebook-tampa{background:var(--ink); border-radius:12px 12px 4px 4px;
                padding:12px 12px 12px; }
/* Tela widescreen 16:9 (21/09/2026, pedido do Marciel). As capturas sao
   1440x980 (~3:2), entao entram por `cover` com `object-position:top`: o
   corte sai de BAIXO, onde a tela do sistema tem o rodape da tabela, e
   nunca do topo, que carrega titulo, KPIs e as primeiras linhas. */
.notebook-tela{background:#fff; border-radius:4px; overflow:hidden;
               aspect-ratio:16/9; display:flex; flex-direction:column;}
.notebook-tela > img{display:block; width:100%; height:100%;
                     object-fit:cover; object-position:top;}
.notebook-tela .mock-viewport{flex:1; min-height:0;}
.notebook-tela .mock-carrossel-viewport{aspect-ratio:auto; height:100%;}
.notebook-base{position:relative; height:13px;
               width:calc(100% + var(--base-extra) * 2);
               margin-left:calc(var(--base-extra) * -1);
               background:linear-gradient(180deg, rgba(255,255,255,.17) 0%,
                           rgba(255,255,255,.02) 55%, rgba(0,0,0,.30) 100%), var(--ink);
               border-radius:0 0 9px 9px;}
/* recorte central usado para abrir a tampa */
.notebook-base::after{content:''; position:absolute; top:0; left:50%;
                      transform:translateX(-50%); width:88px; height:5px;
                      background:rgba(0,0,0,.42); border-radius:0 0 6px 6px;}

.notebook-hero{--base-extra:4%;}
.insp-print figcaption{font-size:11.5px; color:var(--text-2); text-align:center;
                       padding:14px 10px 0;}
.insp-lista{list-style:none; margin:0; padding:0; display:flex;
            flex-direction:column; gap:13px;}
.insp-lista li{display:flex; align-items:flex-start; gap:11px; font-size:15px;
               line-height:1.55; color:var(--text-2);}
.insp-lista li i{font-size:19px; color:var(--action); flex-shrink:0; margin-top:1px;}
.insp-lista li b{color:var(--text); font-weight:600;}

/* planos */
/* `stretch` (padrão do grid) em vez do `align-items:start` que havia aqui:
   era ele que deixava cada card fechar na própria altura de conteúdo, e por
   isso os quatro terminavam em linhas diferentes. */
/* ---------------- os tres resultados ----------------
   Acrescentado em 21/09/2026. Diagnostico, painel e Book do PIE existem
   desde sempre e a pagina nunca os nomeava: "diagnostico" e "percentual"
   davam ZERO ocorrencias no texto visivel, e o prontuario so aparecia de
   passagem no CTA final. O bloco nao traz argumento novo -- nomeia o que o
   produto entrega, que era o buraco real. Cores: so tokens que a pagina ja
   usa (--action, --border, --primary, --text-2), nenhuma nova. */
.resultados{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.resultado{background:#fff; border:1px solid var(--border); border-radius:15px;
           padding:26px 22px; display:flex; flex-direction:column;}
.resultado-num{display:inline-flex; align-items:center; justify-content:center;
               width:27px; height:27px; border-radius:999px; flex-shrink:0;
               background:var(--action); color:var(--action-contraste);
               font-size:13px; font-weight:700; margin-bottom:14px;}
/* Sem icone: o titulo alinha pela esquerda com o numero acima dele. */
.resultado h3{font-size:18px; font-weight:700; color:var(--primary); margin:0 0 9px;}
.resultado p{font-size:14.5px; line-height:1.6; color:var(--text-2); margin:0;}
.resultado p b{color:var(--text); font-weight:600;}

.planos{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.plano{background:#fff; border:1px solid var(--border); border-radius:15px;
       padding:26px 20px; position:relative;
       display:flex; flex-direction:column;
       transition:transform .18s ease, box-shadow .18s ease;}
/* Flutuação sutil no hover. Só transform e box-shadow são animados, que o
   navegador compõe na GPU — animar `top`/`margin` reflui a página inteira. */
.plano:hover{transform:translateY(-5px);
             box-shadow:0 14px 32px -14px rgba(20,48,77,.26);}
.plano.destaque:hover{box-shadow:0 20px 44px -18px rgba(45,108,223,.5);}
.plano.destaque{border-color:var(--action); border-width:2px;
                box-shadow:0 16px 40px -20px rgba(45,108,223,.42);}
.plano-tag{position:absolute; top:-11px; left:50%; transform:translateX(-50%);
           background:var(--action); color:var(--action-contraste); font-size:11.5px; font-weight:700;
           letter-spacing:.05em; text-transform:uppercase; padding:5px 13px;
           border-radius:999px; white-space:nowrap;}
.plano h3{font-size:18px; font-weight:700; color:var(--primary); margin:0 0 4px;}
.plano .publico{font-size:13px; color:var(--text-2); margin:0 0 18px; line-height:1.5; min-height:4.5em;}
.plano-preco{display:flex; align-items:baseline; gap:4px; margin-bottom:4px;}
.plano-preco .cifra{font-size:16px; font-weight:600; color:var(--text-2);}
.plano-preco .valor{font-size:34px; font-weight:800; color:var(--primary);
                    letter-spacing:-.03em; line-height:1;}
.plano-preco .periodo{font-size:15px; color:var(--text-2); font-weight:500;}
.plano-cnpj{font-size:12.5px; color:var(--text-2); margin:0 0 22px;}
/* A lista cresce e empurra o botão para o rodapé: é ela que faz os 4 cards
   terminarem na mesma linha mesmo com quantidades diferentes de texto.
   Sem o `margin-top:auto` no botão, igualar a altura só deixaria espaço
   morto embaixo de uns e não de outros. */
.plano ul{list-style:none; margin:0 0 24px; padding:0; display:flex;
          flex-direction:column; gap:11px; flex:1;}
.plano li{display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.5; color:var(--text);}
.plano li i{font-size:17px; color:var(--action); flex-shrink:0; margin-top:1px;}
.plano li b{font-weight:600;}
/* Padding horizontal menor que o do .btn padrão (22px): com ele, "Falar sobre
   o Profissional" e "Falar sobre o Corporativo" quebravam em duas linhas e os
   quatro botões ficavam com alturas diferentes. Medido: faltavam 15px, e o do
   Essencial cabia com só 3px de folga — frágil se a fonte cair no fallback. */
.plano .btn{width:100%; margin-top:auto; padding-left:10px; padding-right:10px;}
/* cta final */
.cta-final{background:var(--primary-fill); color:#fff; text-align:center;}
.cta-final h2{color:#fff; margin-bottom:14px;}
.cta-final > .wrap > p{font-size:17.5px; line-height:1.6; color:#C7D6EC;
                       max-width:38em; margin:0 auto 32px;}
.cta-botoes{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.cta-final > .wrap > p.cta-nota{margin:22px auto 0; font-size:15px; color:#C7D6EC;}
.btn-cta-final{box-shadow:0 14px 30px -10px rgba(45,108,223,.75); padding:16px 26px; font-size:16px;}

/* rodapé */
footer{background:#0F2438; color:#93A9C0; padding:52px 0 32px; font-size:14px;}
.rodape-topo{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
             padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.1);}
.rodape-marca{max-width:30em;}
.rodape-marca .logo-text{color:#fff;}
.rodape-marca p{margin:14px 0 0; line-height:1.65; color:#93A9C0;}
.rodape-cols{display:flex; gap:56px; flex-wrap:wrap;}
.rodape-col h4{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
               color:#fff; margin:0 0 14px;}
.rodape-col a{display:flex; align-items:center; gap:7px; color:#93A9C0;
              text-decoration:none; margin-bottom:10px; line-height:1.5;}
.rodape-col a:hover{color:#fff;}
.rodape-col i{font-size:16px; flex-shrink:0;}
.rodape-col i.rodape-whats{font-size:24px; color:#25D366;}
.rodape-base{padding-top:24px; display:flex; justify-content:space-between;
             gap:16px; flex-wrap:wrap; font-size:13px; color:#7A91A9;}

/* ---------------- abas do carrossel (11/10/2026) ----------------
   As setas com "1/3" viraram abas com o nome de cada tela: com 7 capturas,
   o visitante escolhe o que quer ver em vez de adivinhar o que vem depois.
   A barrinha da aba ativa enche no ritmo do autoplay e congela com o
   mouse em cima (classe .pausado no #heroMock). */
.mock-abas{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:16px;}
.mock-aba{position:relative; overflow:hidden; font-family:inherit; font-size:12.5px; font-weight:600;
    color:var(--text-2); background:#fff; border:1px solid var(--border); border-radius:999px;
    padding:7px 12px; cursor:pointer; transition:color .15s, border-color .15s;}
.mock-aba:hover{color:var(--primary); border-color:var(--action);}
.mock-aba:focus-visible{outline:2px solid var(--action); outline-offset:2px;}
.mock-aba[aria-selected="true"]{color:var(--action-contraste); background:var(--action); border-color:var(--action);}
.mock-aba[aria-selected="true"]::after{content:''; position:absolute; left:0; bottom:0; height:2px;
    width:100%; background:rgba(255,255,255,.75); transform-origin:left;
    animation:aba-tempo var(--intervalo,6s) linear forwards;}
#heroMock.pausado .mock-aba[aria-selected="true"]::after{animation-play-state:paused;}
@keyframes aba-tempo{from{transform:scaleX(0);} to{transform:scaleX(1);}}

/* ---------------- dores ---------------- */
/* Sem ícone no topo (11/10/2026, pedido do Marciel: dava cara de página
   feita por IA). O cartão tem duas partes: o problema em cima e a resposta
   do Alerta10 embaixo, num bloco azul que fica alinhado na base dos quatro. */
.dores{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
/* Subgrade: o problema ocupa a mesma altura nos quatro cartões, e o bloco
   "Com o Alerta10" começa na mesma linha em todos. */
.dor{background:#fff; border:1px solid var(--border); border-top:3px solid var(--red);
     border-radius:13px; overflow:hidden; display:grid; grid-row:span 2;
     grid-template-rows:subgrid; row-gap:0;}
.dor-problema{padding:24px 22px 20px;}
.dor h3{font-size:17px; font-weight:700; color:var(--primary); margin:0 0 10px; line-height:1.35;}
.dor p{font-size:14px; line-height:1.6; color:var(--text-2); margin:0;}
.dor-resposta{background:var(--action-tint); border-top:1px solid var(--border);
              padding:18px 22px 22px;}
.dor-rotulo{display:block; font-size:11.5px; font-weight:700; letter-spacing:.07em;
            text-transform:uppercase; color:var(--action); margin-bottom:7px;}
.dor-resposta p{color:var(--text);}
.dor-resposta b{font-weight:700; color:var(--primary);}
.dor-rotulo-antes{color:var(--red-text);}
.dor-resposta-titulo{font-size:15px; font-weight:700; color:var(--primary) !important; margin:0 0 6px !important;}

/* ---------------- para quem é ---------------- */
.publicos{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.publico-card{background:#fff; border:1px solid var(--border); border-radius:15px; padding:30px 28px;}
.publico-card .eyebrow{margin-bottom:8px;}
.publico-card h3{font-size:21px; font-weight:700; color:var(--primary); margin:0 0 12px; line-height:1.3;}
.publico-card > p{font-size:15px; line-height:1.62; color:var(--text-2); margin:0 0 18px;}
.publico-card ul{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px;}
.publico-card li{display:flex; gap:9px; align-items:flex-start; font-size:14.5px; line-height:1.55; color:var(--text);}
.publico-card li i{font-size:17px; color:var(--action); flex-shrink:0; margin-top:2px;}

/* ---------------- FAQ ---------------- */
.faq{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px;}
.faq details{background:#fff; border:1px solid var(--border); border-radius:12px; padding:0 22px;}
.faq summary{list-style:none; cursor:pointer; padding:18px 30px 18px 0; position:relative;
             font-size:15.5px; font-weight:600; color:var(--primary);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%);
                    font-size:22px; font-weight:400; color:var(--action);}
.faq details[open] summary::after{content:'–';}
.faq summary:focus-visible{outline:2px solid var(--action); outline-offset:4px; border-radius:6px;}
.faq details p{font-size:14.5px; line-height:1.65; color:var(--text-2); margin:0 0 18px;}
.faq details p b{color:var(--text); font-weight:600;}
.faq details .btn{white-space:normal; text-align:left; line-height:1.3;}

/* ---------------- responsivo ---------------- */
@media (max-width:1000px){
  .dores{grid-template-columns:repeat(2,1fr);}
  .publicos{grid-template-columns:1fr;}
  .hero-grid,.insp-grid{grid-template-columns:1fr; gap:44px;}
  /* O print vem antes do texto no desktop (ordem visual invertida para dar
     ritmo depois de dois blocos texto-à-esquerda). Empilhado, o texto volta
     a vir primeiro: uma imagem sozinha no topo não diz do que trata. */
  .insp-grid .insp-print{order:2;}
  .planos{grid-template-columns:repeat(2,1fr);}
  /* Sem order: os planos seguem a ordem natural (Teste > Essencial > Profissional >
     Corporativo). Havia um .plano.destaque{order:-1} aqui, que promovia o plano do meio
     ao topo no empilhamento — removido a pedido do Marciel em 05/09/2026. O destaque
     continua, mas só visual (borda + etiqueta). */
  .plano .publico{min-height:0;}
  h1{font-size:38px;}
  .nav{display:none;}
  .topbar-acoes{margin-left:auto;}
  .topbar-acoes .link-blog-celular{display:inline-block;}
}
@media (max-width:640px){
  .planos{grid-template-columns:1fr;}
  .resultados{grid-template-columns:1fr;}
  .dores{grid-template-columns:1fr;}
  .publico-card{padding:26px 20px;}
  .faq details{padding:0 16px;}
  section{padding:60px 0;}
  .hero{padding:48px 0 60px;}
  h1{font-size:31px;} h2{font-size:26px;}
  .hero-sub{font-size:16.5px;}
  /* alvo de toque confortavel no celular */
  .mock-aba{padding:10px 13px; min-height:44px;}
  .btn{width:100%;}
  .btn-sm{width:auto;}
  .hero-ctas,.cta-botoes{flex-direction:column;}
  .topbar .wrap{padding:0 16px;}
  .topbar-inner{gap:8px;}
  .topbar-acoes{gap:2px;}
  .topbar-acoes .link-entrar{font-size:14px; padding:10px 7px;}
  .topbar-acoes .btn-sm{font-size:13.5px; padding:10px 12px; margin-left:4px;}
  .rodape-cols{gap:32px;}
}
/* Celular estreito: o ícone do logo basta para caber Blog, Entrar e o botão. */
@media (max-width:374px){
  .topbar .logo-text{display:none;}
}

/* Quem pede menos movimento no sistema operacional continua vendo a sombra
   (que comunica "isto responde ao mouse"), mas sem o deslocamento. */
/* ---------------- landing do inspetor (12/10/2026) ---------------- */
.hero-lista{list-style:none; margin:-14px 0 26px; padding:0; display:flex; flex-direction:column; gap:10px; max-width:35em;}
.hero-lista li{display:flex; gap:10px; align-items:flex-start; font-size:16.5px; line-height:1.5; color:var(--text);}
.hero-lista li i{font-size:20px; color:var(--green); flex-shrink:0; margin-top:1px;}
.link-secundario{display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:600;
                 color:var(--primary); text-decoration:none; padding:14px 6px;}
.link-secundario:hover{color:var(--action);}
.hero-ctas .btn-primary{box-shadow:0 12px 26px -10px rgba(45,108,223,.6); padding:16px 26px; font-size:16px;}
.relatorio-cta{display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:22px;}
.hero-autor{display:flex; align-items:center; gap:16px; margin-top:20px; padding:6px 4px; width:100%;
            font:inherit; font-size:15px; line-height:1.45; color:var(--text-2); text-align:left;
            background:none; border:none; border-radius:12px; cursor:pointer;}
.hero-autor:hover .hero-autor-ver{color:var(--action);}
.hero-autor:focus-visible{outline:2px solid var(--action); outline-offset:2px;}
.hero-autor-ver{display:inline-flex; align-items:center; gap:4px; margin-top:4px;
                font-size:13.5px; font-weight:600; color:var(--primary);}
.hero-autor > span{display:flex; flex-direction:column; align-items:flex-start;}
.hero-autor img{width:84px; height:84px; border-radius:50%; object-fit:cover; flex-shrink:0;
                border:2px solid #fff; box-shadow:0 0 0 1px var(--border), 0 6px 16px -6px rgba(20,48,77,.35);}
.hero-autor b{font-weight:700; color:var(--primary);}
/* modal "Quem criou", aberto pelo selo do hero */
.autor-modal{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px;}
.autor-modal[hidden]{display:none;}
.autor-modal .lb-backdrop{position:absolute; inset:0;}
.autor-card{position:relative; display:grid; grid-template-columns:240px 1fr; gap:32px; align-items:start;
            width:min(860px,100%); max-height:90vh; overflow:auto; background:#fff; border-radius:16px;
            padding:32px; box-shadow:0 24px 60px rgba(0,0,0,.35);}
.autor-card h2{font-size:26px; margin:0 0 10px;}
.autor-fechar{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
              border:none; background:var(--bg); color:var(--text); font-size:17px; cursor:pointer;
              display:flex; align-items:center; justify-content:center;}
.autor-foto{display:block; width:100%; height:auto; border-radius:12px;}
.autor-nome{font-size:17px; font-weight:700; color:var(--text); margin:0 0 2px;}
.autor-registro{font-size:14.5px; color:var(--text-2); margin:0 0 18px;}
.autor-registro .mono{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13.5px;}
.autor-texto{font-size:15.5px; line-height:1.65; color:var(--text-2); margin:0 0 12px;}
.whats-flutuante{display:none;}
@media (max-width:640px){
  .autor-modal{padding:12px;}
  .autor-card{grid-template-columns:1fr; gap:18px; padding:24px 20px;}
  .autor-foto{max-width:160px;}
  .autor-card h2{font-size:22px; padding-right:36px;}
  .whats-flutuante{display:flex; position:fixed; right:16px; bottom:16px; z-index:50;
                   width:56px; height:56px; border-radius:50%; align-items:center; justify-content:center;
                   background:#25D366; color:#fff; font-size:30px; text-decoration:none;
                   box-shadow:0 10px 24px -8px rgba(0,0,0,.45);}
}
#heroMock .notebook{position:relative;}
.celular.celular-hero{position:absolute; width:24%; right:-3%; top:16%; padding:5px; border-radius:18px; z-index:3;
              transform:rotate(4deg);}
.celular.celular-hero img{border-radius:12px;}
.hero-selo-checklist{display:flex; gap:10px; align-items:flex-start; margin:0 0 26px;
                     font-size:15px; line-height:1.55; color:var(--text-2); max-width:35em;}
.hero-selo-checklist i{font-size:22px; color:var(--green); flex-shrink:0;}
.hero-selo-checklist b{color:var(--text); font-weight:600;}
.sec-cabecalho-largo{max-width:none;}
.sec-cabecalho-largo .sec-intro{max-width:none; text-align:justify; hyphens:auto;}
/* celulares e folhas do relatório (imagens da campanha) */
.abre-imagem{font:inherit; cursor:zoom-in; padding:0; border:none; background:none; text-align:left;}
.abre-imagem:focus-visible{outline:2px solid var(--action); outline-offset:4px;}
.vitrine-fotos{display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center;}
.celulares{position:relative; height:520px;}
.celular{position:absolute; width:230px; padding:9px; border-radius:34px; background:var(--ink);
         box-shadow:0 26px 50px -18px rgba(20,48,77,.45); transition:transform .2s;}
.celular img{display:block; width:100%; height:auto; border-radius:26px;}
.celular-1{left:4%; top:30px; transform:rotate(-4deg);}
.celular-2{left:44%; top:0; transform:rotate(3deg);}
.celular:hover{transform:rotate(0) translateY(-6px);}
.folhas{position:relative; height:520px;}
.folha{position:absolute; width:56%; background:#fff; border-radius:6px;
       box-shadow:0 24px 50px -20px rgba(20,48,77,.5); transition:transform .2s;}
.folha img{display:block; width:100%; height:auto; border-radius:6px;}
.folha-1{left:0; top:50px; transform:rotate(-6deg);}
.folha-3{right:0; top:50px; transform:rotate(6deg);}
.folha-2{left:22%; top:0; z-index:2;}
.folha:hover{transform:rotate(0) translateY(-6px); z-index:3;}
/* em desenvolvimento, clicável */
.futuro-item.abre-imagem{display:block; width:100%; color:inherit; cursor:pointer;}
.futuro-item.abre-imagem:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.3);}
.futuro-ver{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:13px;
            font-weight:600; color:#8FB3E6;}
.pacotes{display:grid; grid-template-columns:repeat(2,minmax(0,300px)); justify-content:center; gap:16px;}
.precos-regras{list-style:none; margin:16px 0 0; padding:0; display:grid;
               grid-template-columns:1fr; gap:16px;}
.precos-regras li{display:flex; gap:10px; align-items:flex-start; font-size:14px;
                  line-height:1.55; color:var(--text-2);}
.precos-regras li i{font-size:19px; color:var(--action); flex-shrink:0; margin-top:1px;}
.precos-regras b{color:var(--text); font-weight:600;}
.plano-economia{margin:-14px 0 18px; font-size:12.5px; font-weight:700; color:var(--green-text);}
.plano.destaque{background:var(--action-tint); box-shadow:0 22px 48px -18px rgba(45,108,223,.55);}
.pagamento{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 22px;
           margin-top:24px; font-size:14px; color:var(--text);}
.pagamento span{display:inline-flex; align-items:center; gap:7px; font-weight:600;}
.pagamento i{font-size:20px; color:var(--primary);}
.pagamento .pagamento-rotulo{font-weight:500; color:var(--text-2);}
.precos-regras li{justify-content:center;}
.futuro{display:grid; grid-template-columns:repeat(3,minmax(0,300px)); justify-content:center; gap:16px; margin-top:28px;}
.futuro-item{border:1px solid rgba(255,255,255,.16); border-radius:13px; padding:22px 20px;
             background:rgba(255,255,255,.04);}
.futuro-titulo{display:block; font-size:16px; font-weight:700; color:#fff; margin:10px 0 8px; line-height:1.35;}
.futuro-texto{display:block; font-size:14px; line-height:1.6; color:#C7D6EC;}
.futuro-selo{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em;
             text-transform:uppercase; color:var(--arco-texto); background:var(--arco-bg);
             border-radius:999px; padding:4px 10px;}
@media (max-width:1000px){
  .pacotes,.futuro{grid-template-columns:repeat(2,1fr);}
  .precos-regras{grid-template-columns:1fr;}
  .vitrine-fotos{grid-template-columns:1fr; gap:24px;}
}
@media (max-width:640px){
  .celular.celular-hero{width:20%; right:2%; top:10%; border-radius:12px; padding:3px;}
  .celular.celular-hero img{border-radius:9px;}
  .pacotes,.futuro{grid-template-columns:1fr;}
  .celulares,.folhas{height:400px;}
  .celular{width:170px;}
  .sec-cabecalho-largo .sec-intro{text-align:left;}
}

@media (prefers-reduced-motion:reduce){
  .plano{transition:box-shadow .18s ease;}
  .plano:hover{transform:none;}
  .mock-slide{transition:none;}
  .mock-aba{transition:none;}
  .mock-aba[aria-selected="true"]::after{display:none;}
  html{scroll-behavior:auto;}
}

/* link dentro da faixa escura da assinatura (página do escritório) */
.link-tese{color:#fff; font-weight:600; text-underline-offset:3px;}

/* ---------------- página da indústria (item 251, 02/11/2026) ---------------- */
.faixa-escritorio{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px;
                  background:var(--action-tint); border-bottom:1px solid var(--border);
                  font-size:14px; font-weight:600; color:var(--primary); text-decoration:none; text-align:center;}
.faixa-escritorio:hover{color:var(--action);}
.faixa-escritorio i{font-size:16px; flex-shrink:0;}
/* "Hoje" x "Com o Alerta10": grade de duas colunas, uma linha por dor. */
.virada{display:grid; grid-template-columns:1fr 1fr; border-radius:18px; overflow:hidden;
        border:1px solid var(--border); box-shadow:0 24px 50px -24px rgba(20,48,77,.45);}
.virada-hoje{background:var(--ink);}
.virada-com{background:#fff;}
.virada-titulo{margin:0; padding:30px 34px 14px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;}
.virada-titulo.virada-hoje{color:var(--arco);}
.virada-titulo.virada-com{color:var(--action);}
.virada-item{display:flex; gap:12px; align-items:flex-start; padding:16px 34px;}
/* Filhos 1 e 2 são os títulos, 3 e 4 a primeira dor: a linha divisória começa na segunda. */
.virada-item:nth-child(n+5){border-top:1px solid rgba(127,148,170,.25);}
.virada-item:last-child, .virada-item:nth-last-child(2){padding-bottom:30px;}
.virada-item > i{font-size:20px; flex-shrink:0; margin-top:2px;}
.virada-item h3{font-size:16px; font-weight:700; margin:0 0 4px;}
.virada-item p{font-size:14px; line-height:1.55; margin:0;}
.virada-item.virada-hoje > i{color:var(--arco);}
.virada-item.virada-hoje h3{color:#fff;}
.virada-item.virada-hoje p{color:#B9C8DA;}
.virada-item.virada-com > i{color:var(--green);}
.virada-item.virada-com h3{color:var(--primary);}
.virada-item.virada-com p{color:var(--text-2);}
.entrega{display:flex; flex-direction:column; gap:56px;}
.entrega-linha{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center;}
.entrega-linha:nth-child(even) .entrega-texto{order:2;}
.entrega-norma{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12.5px; color:var(--action); margin:0 0 8px;}
.entrega-texto h3{font-size:24px; font-weight:800; color:var(--primary); letter-spacing:-.015em; margin:0 0 18px;}
.entrega-tela{display:block; width:100%; border-radius:12px; overflow:hidden; background:#fff;
              box-shadow:0 0 0 1px var(--border), 0 22px 44px -22px rgba(20,48,77,.45); transition:transform .2s;}
.entrega-tela img{display:block; width:100%; height:auto;}
.entrega-tela:hover{transform:translateY(-4px);}
.fiscal-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center;}
.fiscal-grid h2{color:#fff;}
.fiscal-lista{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
.fiscal-lista li{display:flex; gap:11px; align-items:flex-start; font-size:16px; line-height:1.55; color:#C7D6EC;}
.fiscal-lista li i{font-size:19px; color:var(--arco); flex-shrink:0; margin-top:2px;}
.assinatura{display:grid; grid-template-columns:1.2fr 1fr; gap:32px; max-width:880px; margin:0 auto;
            background:#fff; border:2px solid var(--action); border-radius:16px; padding:34px;
            box-shadow:0 22px 48px -18px rgba(45,108,223,.45);}
.assinatura ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.assinatura li{display:flex; gap:9px; align-items:flex-start; font-size:15px; line-height:1.5; color:var(--text);}
.assinatura li i{font-size:18px; color:var(--action); flex-shrink:0; margin-top:1px;}
.assinatura-acao{display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:6px;
                 border-left:1px solid var(--border); padding-left:32px;}
.assinatura-preco{font-size:26px; font-weight:800; color:var(--primary); letter-spacing:-.02em; margin:0;}
.assinatura-nota{font-size:14px; color:var(--text-2); margin:0 0 16px;}
.assinatura-acao .link-secundario{justify-content:center;}
.assinatura-rodape{max-width:880px; margin:18px auto 0; text-align:center; font-size:14px; color:var(--text-2);}
.faq details p a{color:var(--action);}
@media (max-width:1000px){
  .entrega-linha,.fiscal-grid{grid-template-columns:1fr; gap:24px;}
  .entrega-linha:nth-child(even) .entrega-texto{order:0;}
  .assinatura{grid-template-columns:1fr;}
  .assinatura-acao{border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:24px;}
}
@media (max-width:640px){
  /* Uma coluna: cada dor seguida da resposta. Os títulos de coluna saem; o
     ícone (x laranja / visto verde) e o fundo dizem qual é qual. */
  .virada{grid-template-columns:1fr;}
  .virada-titulo{display:none;}
  .virada-item{padding:18px 20px;}
  .virada-item:nth-child(n+5){border-top:none;}
  .virada-item:last-child{padding-bottom:22px;}
  .virada-item:nth-last-child(2){padding-bottom:18px;}
  .assinatura{padding:24px 20px;}
  .entrega{gap:44px;}
  .faixa-escritorio{font-size:13px;}
}
@media (prefers-reduced-motion:reduce){
  .entrega-tela{transition:none;}
  .entrega-tela:hover{transform:none;}
}
.entrega-resumo{font-size:17px; line-height:1.5; font-weight:600; color:var(--text); margin:-6px 0 18px;}
/* Tela do sistema com a folha impressa do Prontuário por cima, no canto. */
.entrega-dupla{position:relative; padding-bottom:9%;}
.entrega-folha{position:absolute; width:30%; right:-2%; bottom:-6%; z-index:2; border-radius:4px; overflow:hidden;
               background:#fff; transform:rotate(3deg); box-shadow:0 22px 40px -16px rgba(20,48,77,.55); transition:transform .2s;}
.entrega-folha img{display:block; width:100%; height:auto;}
.entrega-folha:hover{transform:rotate(0) translateY(-4px);}
@media (max-width:640px){
  .entrega-folha{width:34%; right:0;}
}
/* Nada de vermelho no site (Marciel, 02/11/2026): as dores usam o laranja de
   arco elétrico, o mesmo do destaque do título. */
.dor{border-top-color:var(--arco);}
.dor-rotulo-antes{color:var(--arco-texto);}
.dor h3{color:var(--arco-titulo);}