/* ===== Tokens: as MESMAS variáveis do design system da plataforma ===== */
:root{
  --marca:#cf4520;
  --acento:#a63111;
  --preto-marca:#160804;
  --marca-tinta:#faece9;
  --texto-titulo:#131313;
  --texto:#414141;
  --texto-muted:#696969;
  --borda:#e5e5e5;
  --fundo-claro:#ffffff;
  --fundo-cinza:#f5f5f5;
  --whatsapp:#25d366;
  --instagram:#e1306c;
  --raio:16px;
  --sombra:0 12px 40px rgba(22,8,4,.10);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--texto);
  background:var(--fundo-claro);
  font-size:16px;
  line-height:1.65;
  margin:0;
  overflow-x:hidden; /* trava o estouro horizontal sem esconder conteúdo vertical */
}
h1,h2,h3,h4,h5,h6{font-weight:800;color:var(--texto-titulo);line-height:1.18;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5.4vw,3.9rem)}
h2{font-size:clamp(1.6rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem)}
p{margin-bottom:1rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--marca);text-decoration:none}
.container{max-width:1180px}

/* Faixas de fundo — as três que o projeto pediu */
.faixa-clara{background:linear-gradient(180deg,#ffffff 0%,var(--fundo-cinza) 100%)}
.faixa-preta{background:var(--preto-marca)}
.faixa-marca{background:linear-gradient(135deg,var(--preto-marca) 0%,#3d1208 45%,var(--marca) 100%)}
.faixa-preta,.faixa-marca{color:rgba(255,255,255,.88)}
.faixa-preta h1,.faixa-preta h2,.faixa-preta h3,
.faixa-marca h1,.faixa-marca h2,.faixa-marca h3{color:#fff}
.faixa-preta p,.faixa-marca p{color:rgba(255,255,255,.80)}
section{padding:88px 0;position:relative}

.olho{
  display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marca);margin-bottom:14px
}
.faixa-preta .olho,.faixa-marca .olho{color:#ffb59d}

/* CTA — verde do framework, na íntegra. É a cor de ação da página e
   contrasta de propósito com o vermelho da marca: o botão precisa se
   destacar do fundo, não se fundir com ele. */
button.cta, a.cta{
  clear:both;
  display:block;
  font-size:22px;
  font-weight:700;
  text-transform:uppercase;
  fill:#FFFFFF;
  color:#FFFFFF;
  padding:15px 75px;
  margin:35px auto 0 auto;
  border:none;
  background-color:#61CE70;
  background:linear-gradient(106deg,#59F370 1.19%,#158828 89.9%);
  box-shadow:0px 0px 111px 0px #43D059;
  border-radius:200px 200px 200px 200px;
  -moz-border-radius:200px 200px 200px 200px;
  -webkit-border-radius:200px 200px 200px 200px;
  cursor:pointer;
  text-align:center;
  width:fit-content;
  max-width:100%;
  transition:transform .18s ease, box-shadow .18s ease;
  line-height:1.25;
}
button.cta:hover, a.cta:hover{transform:translateY(-2px);box-shadow:0 0 130px 0 #43D059;color:#fff}
button.cta:focus-visible, a.cta:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Revelação ao rolar — ver script 3 */
.revela{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.revela.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .revela{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ===== Header ===== */
.header{
  position:sticky;top:0;z-index:1000;
  background:rgba(22,8,4,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .25s ease;
}
.header.rolado{background:rgba(22,8,4,.97)}
.header .barra{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.header img{height:34px;width:auto}
.menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.menu a{color:rgba(255,255,255,.82);font-weight:600;font-size:.94rem}
.menu a:hover{color:#fff}
.btn-topo{
  background:linear-gradient(106deg,#59F370 1.19%,#158828 89.9%);
  color:#fff;font-weight:700;font-size:.9rem;
  padding:10px 22px;border-radius:200px;border:none;white-space:nowrap;
  box-shadow:0 0 26px rgba(67,208,89,.45);transition:box-shadow .18s ease,transform .18s ease
}
.btn-topo:hover{color:#fff;transform:translateY(-1px);box-shadow:0 0 40px rgba(67,208,89,.7)}
.abre-menu{display:none;background:none;border:0;padding:6px}

/* ===== Hero ===== */
.hero{
  padding:50px 0 90px;
  background:
    linear-gradient(180deg,rgba(22,8,4,.90) 0%,rgba(22,8,4,.80) 40%,rgba(166,49,17,.88) 100%),
    url('img/fundo-login.webp') center/cover no-repeat;
  color:#fff;text-align:center;
}
.hero h1{color:#fff;max-width:23ch;margin:0 auto 20px}
.hero .chamada{font-size:clamp(1rem,1.6vw,1.22rem);color:rgba(255,255,255,.86);max-width:60ch;margin:0 auto}
.selos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.selo{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  border-radius:200px;padding:8px 18px;font-size:.875rem;font-weight:600;color:#fff
}
.selo svg{width:16px;height:16px;flex:none}
.moldura{
  margin:56px auto 0;max-width:960px;border-radius:var(--raio);overflow:hidden;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 80px rgba(0,0,0,.5)
}

/* ===== Tese (atribuição) ===== */
.trilha{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px;counter-reset:passo}
.passo{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--raio);padding:22px 16px;text-align:center
}
.passo b{display:block;color:#fff;font-size:1rem;margin-bottom:4px}
.passo span{font-size:.875rem;color:rgba(255,255,255,.72)}
.passo .num{
  width:30px;height:30px;border-radius:50%;background:var(--marca);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.875rem;margin:0 auto 12px
}

/* ===== Tour do produto (abas) ===== */
.abas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:32px;padding:0;list-style:none}
.aba{
  background:#fff;border:1px solid var(--borda);color:var(--texto);
  font-weight:600;font-size:.9rem;padding:10px 22px;border-radius:200px;cursor:pointer;
  transition:all .2s ease
}
.aba:hover{border-color:var(--marca);color:var(--marca)}
.aba[aria-selected="true"]{background:var(--marca);border-color:var(--marca);color:#fff}
.painel-tour{display:none}
.painel-tour.ativo{display:block;animation:aparece .35s ease}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tour-img{
  border-radius:var(--raio);overflow:hidden;border:1px solid var(--borda);
  box-shadow:var(--sombra);background:#fff
}
.tour-texto{max-width:56ch;margin:0 auto 26px;text-align:center}

/* ===== Recursos ===== */
.cartao{
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  padding:28px 24px;height:100%;transition:transform .2s ease,box-shadow .2s ease
}
.cartao:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.cartao h3{font-size:1.08rem;margin:16px 0 8px}
.cartao p{font-size:.94rem;color:var(--texto-muted);margin:0}
.icone{
  width:46px;height:46px;border-radius:12px;background:var(--marca-tinta);
  display:flex;align-items:center;justify-content:center
}
.icone svg{width:23px;height:23px;stroke:var(--marca)}

/* ===== Segurança ===== */
.lista-check{list-style:none;padding:0;margin:28px 0 0}
.lista-check li{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.lista-check svg{width:22px;height:22px;flex:none;margin-top:3px;stroke:#8ee6a0}
.lista-check b{color:#fff;display:block;margin-bottom:2px}
.lista-check span{color:rgba(255,255,255,.76);font-size:.94rem}

/* ===== Tarja rolante de integrações ===== */
.tarja{overflow:hidden;padding:20px 0;border-top:1px solid var(--borda);border-bottom:1px solid var(--borda);background:#fff}
.tarja-trilho{display:flex;width:max-content;animation:desliza 26s linear infinite}
.tarja-item{
  display:flex;align-items:center;gap:10px;padding:0 34px;white-space:nowrap;
  font-weight:700;color:var(--texto-muted);font-size:.98rem
}
.tarja-item svg{width:20px;height:20px;flex:none}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tarja-trilho{animation:none}}

/* ===== Fechamento ===== */
.fechamento{text-align:center}
.fechamento h2{max-width:20ch;margin:0 auto 16px}
.fechamento p{max-width:56ch;margin:0 auto}

/* ===== Footer ===== */
.footer{background:var(--preto-marca);color:rgba(255,255,255,.62);padding:72px 0 28px;font-size:.9375rem}
.footer a{color:rgba(255,255,255,.68);transition:color .15s ease}
.footer a:hover{color:#fff}
.footer h4{
  color:#fff;font-size:.875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:18px
}

/* Rodapé — topo */
.footer-logo{height:34px;width:auto;margin-bottom:20px}
.footer-sobre{max-width:38ch;font-size:.9375rem;line-height:1.7;margin-bottom:20px}
.footer-selos{display:flex;flex-wrap:wrap;gap:8px}
.footer-selo{
  display:inline-flex;align-items:center;gap:7px;font-size:.875rem;font-weight:600;
  color:rgba(255,255,255,.72);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:200px;padding:6px 14px
}
.footer-selo svg{width:15px;height:15px;flex:none}

.footer-lista{list-style:none;padding:0;margin:0}
.footer-lista li{margin-bottom:11px}

.footer-contato{list-style:none;padding:0;margin:0}
.footer-contato li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;line-height:1.6}
.footer-contato svg{width:18px;height:18px;flex:none;margin-top:3px;stroke:var(--marca)}

/* Rodapé — dados cadastrais.
   Grade de rótulo/valor: a versão anterior empilhava dez linhas de texto
   coladas à esquerda, com metade do rodapé vazia. Em grade, cada dado é
   localizável de relance — e é assim que a Meta confere a empresa. */
.footer-cadastro{
  margin-top:52px;padding:30px 32px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--raio)
}
.footer-cadastro h5{
  color:#fff;font-size:.875rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 22px
}
.cadastro-grade{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:22px 32px;margin:0
}
.cadastro-item{min-width:0}
.cadastro-largo{grid-column:1 / -1}
.cadastro-grade dt{
  font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:5px
}
.cadastro-grade dd{margin:0;color:rgba(255,255,255,.86);font-size:.9375rem;line-height:1.55}

/* Rodapé — barra final */
.footer-barra{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 32px;
  border-top:1px solid rgba(255,255,255,.10);margin-top:34px;padding-top:24px
}
.footer-copy{margin:0;font-size:.875rem;color:rgba(255,255,255,.72)}
.footer-marcas{margin:0;font-size:.875rem;color:rgba(255,255,255,.42);max-width:62ch}

/* ===== Responsivo ===== */
@media (max-width: 700px) {
  /* Base — nunca abaixo de 14px, conforme a regra do projeto.
     Medido: .olho saía 12,48px, .num 13,6px e o bloco legal 13px. */
  body{font-size:15px}
  .olho{font-size:14px;letter-spacing:.10em}
  section{padding:60px 0}
  p{font-size:15px}

  /* Header — o menu vira gaveta e o botão de abrir aparece */
  .abre-menu{display:block}
  /* A gaveta é `position:absolute` ancorada no .header, então o padding do
     .container NÃO vale para ela — precisa do seu próprio, senão os itens
     encostam na borda da tela. */
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(22,8,4,.99);
    padding:8px 24px 20px;
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 18px 40px rgba(0,0,0,.45)
  }
  .menu.aberto{display:flex}
  .menu a{display:block;padding:13px 0;font-size:15px;border-bottom:1px solid rgba(255,255,255,.07)}
  .header .btn-topo{display:none} /* o CTA do topo some: já existe um no herói */
  .header img{height:28px}
  .header .barra{padding:12px 4px}

  /* Herói — texto centralizado e imagem sem transbordar */
  .hero{padding:64px 0 56px}
  .hero h1{max-width:100%;font-size:1.9rem}
  .hero .chamada{font-size:15px}
  .selo{font-size:14px;padding:7px 14px}
  .moldura{margin-top:34px;border-radius:12px}

  /* Tese — a trilha de 5 colunas empilha em 1 */
  .trilha{grid-template-columns:1fr;gap:10px;margin-top:30px}
  .passo{display:flex;align-items:center;gap:14px;text-align:left;padding:16px}
  .passo .num{margin:0;font-size:14px;width:32px;height:32px}
  .passo b{font-size:15px}
  .passo span{font-size:14px}

  /* Tour — abas roláveis na horizontal, sem quebrar a linha */
  .abas{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:8px;padding-bottom:8px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none
  }
  .abas::-webkit-scrollbar{display:none}
  .aba{font-size:14px;padding:9px 17px;flex:none}
  .tour-texto{font-size:15px;margin-bottom:20px}

  /* Recursos — um cartão por linha */
  .cartao{padding:22px 20px}
  .cartao h3{font-size:16px}
  .cartao p{font-size:14px}

  /* Segurança */
  .lista-check li{margin-bottom:15px}
  .lista-check span{font-size:14px}

  /* CTA — centralizado com precisão e sem estourar a tela */
  button.cta, a.cta{
    font-size:17px;
    padding:15px 26px;
    width:calc(100% - 24px);
    max-width:400px;
    margin:28px auto 0 auto
  }

  /* Tarja de integrações */
  .tarja-item{padding:0 20px;font-size:14px}

  /* Footer — blocos empilhados com respiro */
  /* Rodapé — alinhado à ESQUERDA no mobile. Centralizar listas e pares de
     rótulo/valor destrói a leitura em coluna estreita. */
  .footer{padding:52px 0 26px;text-align:left}
  .footer-sobre{max-width:100%}
  .footer h4{margin-bottom:14px}
  .footer-cadastro{margin-top:38px;padding:24px 20px}
  .cadastro-grade{grid-template-columns:1fr;gap:18px}
  .footer-barra{flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
  .footer-copy,.footer-marcas{font-size:14px;max-width:100%}
}
/* Responsivo */

/* ===== Utilitários (substituem os style="" que existiam no HTML) ===== */
.medida-60{max-width:60ch;margin-left:auto;margin-right:auto}
.sem-margem{margin:0}
.nota-contato{margin-top:26px;font-size:.95rem}
.link-claro{color:#fff;text-decoration:underline}