/* ============================================================
   LOCFORT Garantidora — Design System
   Tipografia: Newsreader (display) + IBM Plex Sans (texto) + IBM Plex Mono (dados)
   ============================================================ */
:root{
  --ink:#0E1216;
  --ink-2:#161C22;
  --ink-3:#222A32;
  --slate:#F1F2F4;
  --paper:#FFFFFF;
  --blue:#00A2FC;
  --blue-700:#0072C4;
  --blue-900:#004C86;
  --blue-050:#E8F5FE;--blue-800:#005A9E;
  --gray:#5B6470;
  --gray-2:#626B76;
  --line:#DEE2E7;--line-card:#C4CDD7;--line-card-dark:#414E5C;
  --line-dark:#2A333C;

  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-text:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --sec:clamp(72px,9vw,124px);
  --r:14px;
  --shadow:0 1px 2px rgba(14,18,22,.04),0 12px 32px -18px rgba(14,18,22,.28);
  --shadow-l:0 2px 4px rgba(14,18,22,.05),0 28px 60px -28px rgba(14,18,22,.35);
  color-scheme: only light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--slate);color:var(--ink);
  font-family:var(--f-text);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga";
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blue-800);text-decoration:none}
a:hover{color:var(--blue-900)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;letter-spacing:-.015em;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.35rem,6.2vw,4.05rem);line-height:1.04}
h2{font-size:clamp(1.95rem,4.4vw,3.05rem);line-height:1.09}
h3{font-size:clamp(1.3rem,2.4vw,1.66rem);line-height:1.2}
h4{font-size:1.1rem;line-height:1.3}
p{margin:0 0 1.05em}
em,.i{font-style:italic}
.accent{color:var(--blue-700);font-style:italic}
.on-dark .accent,.hero .accent,.band .accent{color:var(--blue);-webkit-text-fill-color:var(--blue)}
.lede{font-size:clamp(1.06rem,1.9vw,1.28rem);line-height:1.6;color:var(--gray);max-width:64ch}
/* Quando um .lede e seguido por paragrafos comuns no mesmo bloco, os corpos
   ficavam visivelmente diferentes dentro do mesmo texto. O paragrafo seguinte
   passa a acompanhar o .lede, mantendo uma so voz tipografica no bloco. */
.lede + p,.lede + p + p{font-size:clamp(1.06rem,1.9vw,1.28rem);line-height:1.6;
  color:var(--gray);max-width:64ch}

/* Texto corrido justificado com hifenizacao, apenas no desktop. No mobile fica
   alinhado a esquerda de proposito: coluna estreita + justificado abre "rios"
   de espaco entre as palavras e piora a leitura. */
/* JUSTIFICACAO GERAL DO TEXTO CORRIDO
   Todo paragrafo e item de lista de conteudo fica justificado com hifenizacao,
   como o "Justify" do Word: as duas margens ficam retas. Medido em 390px, a
   sobra na margem direita cai de ~35px medios (61px no pior caso) para zero.
   A hifenizacao e o que evita o buraco entre palavras na coluna estreita. */
/* Cada bloco de conteudo vira um "container", para o CSS poder consultar a
   largura REAL da coluna, e nao a da tela. */
/* ATENCAO: nunca colocar container-type em item de flex sem flex-basis.
   `contain: inline-size` remove a contribuicao intrinseca do item e ele
   encolhe para zero. Foi o que quebrou o selo do Google no desktop.
   Item de grid com trilha 1fr nao sofre esse efeito. */
.wrap,.card,.metric,.sp,.faq .a,.answer,.legal-box,.sim-out,
.split > div,.grid > div{container-type:inline-size}
.gbox-r{flex:1 1 auto;min-width:0}

p,li,.lede,.card p,.metric .l,.gbox-r p,.faq .a p,.sim-note{
  text-align:left;hyphens:auto;-webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}
/* Justifica quando a coluna comporta. Abaixo de 300px o justificado abriria
   buracos em vez de deixar a margem reta, entao ali fica alinhado a esquerda.
   O par hyphens:auto + lang="pt-BR" faz o navegador hifenizar e fechar os vaos. */
@container (min-width:300px){
  p,li,.lede,.card p,.metric .l,.gbox-r p,.faq .a p,.sim-note{
    text-align:justify;text-justify:inter-word;
  }
}
.legal-box p,.answer p{text-align:justify;text-justify:inter-word}
/* Fora da justificacao: rotulos curtos, navegacao e blocos centralizados. */
.eyebrow,.crumb,.crumb *,.ft h4,.ft ul,.ft ul *,.ft-contact,.ft-contact *,
.nav a,.btn,.chip,.spec th,.spec caption,.spec td,.ladder .yr,.steps .sp .n,
.card .more,.more,.tag,.pill,.ft-base,.ft-base *{
  text-align:inherit;hyphens:manual;-webkit-hyphens:manual;
}
.ft-slogan{text-align:left;hyphens:manual;-webkit-hyphens:manual}

/* text-wrap:pretty evita a "viuva": ultima linha do paragrafo com uma palavra
   sozinha. text-wrap:balance equilibra as linhas dos titulos, evitando a
   "orfa". Ambos sao progressivos: navegador antigo simplesmente ignora. */
p{text-wrap:pretty}
h1,h2,h3,h4,.metric .k,.card h3{text-wrap:balance}
.small{font-size:.9rem;line-height:1.55}
.muted{color:var(--gray)}
strong,b{font-weight:600}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-tight{max-width:900px}
section{padding-block:var(--sec)}
.sec-tight{padding-block:clamp(52px,6vw,84px)}
.sec-flush-top{padding-top:0}

/* ---------- eyebrow + keyline (assinatura visual: a chave do logo) ---------- */
.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue-900);margin:0 0 18px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);flex:none;border-radius:2px}
.on-dark .eyebrow{color:var(--blue)}
.keyline{width:100%;height:14px;margin:0;border:0;overflow:visible}
.keyline svg{width:100%;height:14px;display:block}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:20px;min-height:78px}
.hd-logo{flex:none;display:block;padding:8px 0}
.hd-logo img{width:158px;height:auto}
.hd-nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.hd-nav a{
  font-size:.93rem;font-weight:500;color:var(--ink-3);letter-spacing:-.005em;
  padding:10px 0;position:relative;
}
.hd-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;background:var(--blue);transition:right .28s ease}
.hd-nav a:hover::after,.hd-nav a[aria-current="page"]::after{right:0}
.hd-nav a[aria-current="page"]{color:var(--ink)}
.hd-cta{flex:none}
.hd-burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);background:var(--paper);border-radius:10px;align-items:center;justify-content:center;cursor:pointer}
.hd-burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.hd-burger span::before,.hd-burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.hd-burger span::before{top:-6px}.hd-burger span::after{top:6px}
@media (max-width:1040px){
  .hd-nav{display:none}
  .hd-cta{display:none}
  .hd-burger{display:flex}
  .hd-in{min-height:68px}
  .hd-logo img{width:138px}
}
.drawer{position:fixed;inset:0;z-index:70;background:var(--ink);color:#fff;padding:22px var(--pad) 40px;display:none;overflow-y:auto}
.drawer.open{display:block}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.drawer-top img{width:138px}
.drawer-close{width:46px;height:46px;border:1px solid var(--line-dark);background:transparent;border-radius:10px;color:#fff;-webkit-text-fill-color:#fff;font-size:22px;line-height:1;cursor:pointer}
.drawer a.dl{
  display:block;padding:17px 0;border-bottom:1px solid var(--line-dark);
  font-family:var(--f-display);font-size:1.42rem;color:#fff;-webkit-text-fill-color:#fff;
}
.drawer .btn{margin-top:28px;width:100%}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:100px;border:1px solid transparent;
  font-family:var(--f-text);font-size:.97rem;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;transition:transform .18s ease,background .2s ease,box-shadow .2s ease,color .2s ease;
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--blue-700);color:#fff;-webkit-text-fill-color:#fff;box-shadow:0 10px 24px -12px rgba(0,162,252,.9)}
.btn-p:hover{background:var(--blue-900);color:#fff;-webkit-text-fill-color:#fff;box-shadow:0 14px 30px -12px rgba(0,114,196,.85)}
.btn-s{background:transparent;color:var(--ink);-webkit-text-fill-color:var(--ink);border-color:var(--ink)}
.btn-s:hover{background:var(--ink);color:#fff;-webkit-text-fill-color:#fff}
.on-dark .btn-s,.btn-s-light{background:transparent;color:#fff;-webkit-text-fill-color:#fff;border-color:rgba(255,255,255,.45)}
.on-dark .btn-s:hover,.btn-s-light:hover{background:#fff;color:var(--ink);-webkit-text-fill-color:var(--ink);border-color:#fff}
.btn-sm{min-height:44px;padding:10px 20px;font-size:.9rem}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.wa-ico{width:18px;height:18px;flex:none}

/* ---------- hero home ---------- */
.hero{position:relative;background:var(--ink);color:#fff;-webkit-text-fill-color:#fff;overflow:hidden;padding-block:clamp(64px,9vw,116px) clamp(72px,10vw,124px)}
.hero h1,.hero h2,.hero h3{color:#fff;-webkit-text-fill-color:#fff}
.hero-ghost{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:min(46vw,520px);opacity:.055;pointer-events:none;filter:none}
.hero-in{position:relative;z-index:2;max-width:840px}
.hero h1{font-size:clamp(2.5rem,6.4vw,4.35rem)}
.hero .lede{margin-top:26px;font-size:clamp(1.08rem,2vw,1.32rem);max-width:60ch}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px}
.tag{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-dark);border-radius:100px;padding:8px 15px;color:#C8D1DA;-webkit-text-fill-color:#C8D1DA;
}
.hero-strip{border-top:1px solid var(--line-dark);margin-top:clamp(48px,6vw,74px);padding-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;z-index:2}
.hero-strip > div{padding-inline:22px;border-right:1px solid var(--line-dark)}
.hero-strip > div:first-child{padding-left:0}
.hero-strip > div:last-child{border-right:0;padding-right:0}
.hero-strip .k{font-family:var(--f-display);font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--blue);-webkit-text-fill-color:var(--blue);line-height:1}
.hero-strip .l{font-size:.88rem;color:#98A3AE;-webkit-text-fill-color:#98A3AE;margin-top:8px;line-height:1.4}
@media (max-width:860px){
  .hero-strip{grid-template-columns:1fr 1fr;gap:0}
  .hero-strip > div{padding-inline:16px;padding-block:2px}
  .hero-strip > div:nth-child(odd){padding-left:0}
  .hero-strip > div:nth-child(even){border-right:0;padding-right:0}
  .hero-strip > div:nth-child(-n+2){border-bottom:1px solid var(--line-dark);padding-bottom:18px;margin-bottom:16px}
  .hero-ghost{opacity:.04;right:-140px}
}

/* ---------- hero de página interna ---------- */
.phero{background:var(--paper);border-bottom:1px solid var(--line);padding-block:clamp(44px,6vw,74px) clamp(48px,6.5vw,80px)}
.crumb{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-2);margin-bottom:22px}
.crumb a{color:var(--gray-2)}.crumb a:hover{color:var(--blue-700)}
.crumb span{margin:0 8px;opacity:.6}
.phero h1{max-width:20ch}
.phero .lede{margin-top:22px}

/* bloco Resposta direta (GEO) */
.answer{
  background:var(--blue-050);border:1px solid #C8E7FB;border-left:4px solid var(--blue);
  border-radius:10px;padding:22px 24px;margin-top:34px;max-width:74ch;
}
.answer p{margin:0;font-size:1.03rem;line-height:1.62;color:var(--ink-2)}
/* fonte menor no bloco estreito: reduz o vao maximo entre palavras de 31px
   para 18px, mantendo a margem direita reta. Precisa vir DEPOIS da regra base. */
@media (max-width:600px){.answer p{font-size:.96rem}}
.answer .t{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-900);display:block;margin-bottom:10px}

/* ---------- grids e cards ---------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,22px)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:start}
.split-4-6{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:1fr 1fr}.split,.split-4-6{grid-template-columns:1fr;gap:34px}}
@media (max-width:660px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:var(--paper);border:1px solid var(--line-card);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);
  box-shadow:0 1px 2px rgba(14,18,22,.05),0 6px 18px rgba(14,18,22,.06);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card-link:hover{border-color:var(--blue);box-shadow:0 2px 4px rgba(14,18,22,.08),0 14px 32px rgba(14,18,22,.14);transform:translateY(-3px)}
.card .n{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--blue-700);display:block;margin-bottom:16px}
.card .more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  min-height:46px;font-weight:600;font-size:.93rem;color:var(--blue-700)}
.card .more::after{content:"→";transition:transform .2s ease;display:inline-block}
.card-link:hover .more::after{transform:translateX(4px)}
.card-dark{
  background:#1B222A;border-color:var(--line-card-dark);
  color:#D6DDE4;-webkit-text-fill-color:#D6DDE4;
  box-shadow:0 1px 2px rgba(0,0,0,.30),0 10px 28px rgba(0,0,0,.26);
}
.card-link.card-dark:hover{border-color:var(--blue);background:#202932}
.card-dark h3,.card-dark h4{color:#fff;-webkit-text-fill-color:#fff}

/* ---------- seção escura ---------- */
.on-dark{background:var(--ink);color:#C4CDD6;-webkit-text-fill-color:#C4CDD6;position:relative;overflow:hidden}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff;-webkit-text-fill-color:#fff}
.on-dark .lede{color:#A9B4BF;-webkit-text-fill-color:#A9B4BF}
.on-dark .muted{color:#8E99A5;-webkit-text-fill-color:#8E99A5}
.on-dark a:not(.btn){color:var(--blue);-webkit-text-fill-color:var(--blue)}

/* ---------- tabela ficha técnica ---------- */
.spec{width:100%;border-collapse:collapse;margin-top:8px}
.spec caption{text-align:left;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-2);padding-bottom:14px}
.spec th{
  text-align:left;font-family:var(--f-mono);font-weight:500;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray-2);padding:0 0 12px;border-bottom:1px solid var(--line);
}
.spec th:last-child,.spec td:last-child{text-align:right}
.spec td{padding:17px 0;border-bottom:1px solid var(--line);font-size:1rem;vertical-align:top}
.spec td.v{font-family:var(--f-display);font-size:clamp(1.15rem,2vw,1.5rem);white-space:nowrap;line-height:1.2}
/* variante flat: todas as celulas com o mesmo corpo, sem coluna dominante */
.spec-flat td.v{font-family:var(--f-text);font-size:1rem;line-height:1.55;font-weight:400}
.spec-flat td{font-variant-numeric:tabular-nums}
.spec-flat .hl td.v{font-weight:600}
.spec tr:last-child td{border-bottom:0}
.spec td a{display:inline-flex;align-items:center;min-height:46px}
.spec .hl td{color:var(--blue-700)}
.spec .hl td.v{color:var(--blue-700)}
.on-dark .spec .hl td.v{color:var(--blue);-webkit-text-fill-color:var(--blue)}
.on-dark .spec th{color:#7E8994;border-color:var(--line-dark)}
.on-dark .spec td{border-color:var(--line-dark);color:#D6DDE4;-webkit-text-fill-color:#D6DDE4}
.spec th,.spec td{padding-inline:14px}
.spec th:first-child,.spec td:first-child{padding-left:0}
.spec th:last-child,.spec td:last-child{padding-right:0}

/* No mobile a tabela vira lista: cada linha é um bloco com rótulo e valor.
   Sem isso as colunas se encostam e o texto quebra em cima do vizinho. */
@media (max-width:720px){
  .spec,.spec tbody,.spec tr,.spec td{display:block;width:100%}
  .spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .spec caption{display:block;width:100%;padding-bottom:18px;text-align:left}
  .spec tr{
    border-bottom:1px solid var(--line);padding:20px 0;
  }
  .spec tr:last-child{border-bottom:0}
  .spec td{
    border-bottom:0;padding:0;text-align:left !important;
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  }
  .spec td + td{margin-top:10px}
  .spec td::before{
    content:attr(data-rot);flex:0 0 auto;
    font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gray-2);line-height:1.5;padding-top:3px;
  }
  .spec td:first-child{
    display:block;font-family:var(--f-display);
    font-size:clamp(1.2rem,5.4vw,1.5rem);line-height:1.24;margin-bottom:14px;
  }
  .spec td:first-child::before{display:none}
  .spec td.v{font-size:1.12rem;white-space:normal;text-align:right}

  /* Tabela de 2 colunas: no mobile o rotulo da coluna se repetia embaixo de
     cada linha ("TAXA DE ATIVACAO" 4 vezes), o que polui e confunde. Aqui a
     linha vira rotulo a esquerda e valor a direita, sem repetir o cabecalho. */
  .spec-2 tr{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:18px;padding:16px 0;
  }
  .spec-2 td{display:block;margin:0}
  .spec-2 td:first-child{
    font-family:var(--f-text);font-size:1rem;line-height:1.45;margin-bottom:0;flex:1 1 auto;
  }
  .spec-2 td::before{display:none}
  .spec-2 td.v{
    flex:0 1 auto;text-align:right;
    font-family:var(--f-display);font-size:1.2rem;
  }
  .spec-2.spec-flat td.v{font-family:var(--f-text);font-size:1rem}
  /* link dentro da célula precisa manter alvo de toque de 44px */
  .spec td a{display:inline-flex;align-items:center;min-height:46px}
  .on-dark .spec tr{border-color:var(--line-dark)}
  .on-dark .spec td::before{color:#8A96A2;-webkit-text-fill-color:#8A96A2}
}

/* ---------- escada da garantia (assinatura) ---------- */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:44px;border-top:1px solid var(--line)}
.ladder .st{padding:22px 18px 24px;border-right:1px solid var(--line);position:relative}
.ladder .st:last-child{border-right:0}
.ladder .st::before{content:"";position:absolute;top:-1px;left:0;height:3px;background:var(--blue);width:0;transition:width .9s cubic-bezier(.2,.7,.3,1)}
.ladder .st.on::before{width:100%}
.ladder .yr{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2)}
.ladder .mx{font-family:var(--f-display);font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.05;
  margin-top:10px;font-weight:400}
@media (min-width:861px){
  /* alinha as descricoes de todos os degraus na mesma altura */
  .ladder .mx{min-height:3.1rem;display:flex;align-items:flex-end}
}
/* O primeiro degrau traz uma frase, nao um numero. No corpo de numero ela
   quebrava em duas linhas e parecia outra fonte, em negrito e noutra cor. */
.ladder .st:first-child .mx{
  font-size:clamp(1.1rem,2.2vw,1.42rem);line-height:1.2;font-weight:400;
  color:var(--blue-800);
}
.ladder .st:not(:first-child) .mx{color:var(--blue-700)}
.on-dark .ladder .st:not(:first-child) .mx{color:var(--blue);-webkit-text-fill-color:var(--blue)}
.ladder .ds{font-size:.87rem;color:var(--gray);margin-top:8px;line-height:1.45}
.on-dark .ladder,.on-dark .ladder .st{border-color:var(--line-dark)}
.on-dark .ladder .yr{color:#7E8994}
.on-dark .ladder .st:first-child .mx{color:var(--blue);-webkit-text-fill-color:var(--blue)}
.on-dark .ladder .ds{color:#98A3AE;-webkit-text-fill-color:#98A3AE}
@media (max-width:860px){
  .ladder{grid-template-columns:1fr 1fr;border-top:0}
  .ladder .st{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;padding:18px}
  .ladder .st::before{border-radius:10px 10px 0 0}
  .on-dark .ladder .st{border-color:var(--line-dark)}
}

/* ---------- passos ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,20px);margin-top:44px;counter-reset:s}
.steps .sp{border-top:2px solid var(--line);padding-top:20px;position:relative}
.steps .sp:nth-child(-n+4){border-top-color:var(--blue)}
.steps .sp .n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2);display:block;margin-bottom:10px}
.steps .sp h3{font-size:1.12rem;margin-bottom:8px}
.steps .sp p{font-size:.9rem;color:var(--gray);margin:0;line-height:1.5}
.on-dark .steps .sp{border-top-color:var(--line-dark)}
.on-dark .steps .sp:nth-child(-n+4){border-top-color:var(--blue)}
.on-dark .steps .sp p{color:#98A3AE;-webkit-text-fill-color:#98A3AE}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){
  .steps{grid-template-columns:1fr;gap:0}
  /* empilhado, o filete cinza do ultimo item parecia erro. Todos iguais. */
  .steps .sp,.steps .sp:nth-child(-n+4){border-top-color:var(--blue)}
  .steps .sp,.steps .sp p,.steps .sp h3{text-align:center;hyphens:manual;
    -webkit-hyphens:manual}
  .steps .sp{padding:22px 4px 26px}
  .steps .sp p{margin-inline:auto;max-width:34ch}
  .on-dark .steps .sp,.on-dark .steps .sp:nth-child(-n+4){border-top-color:var(--blue)}
}

/* ---------- lista com marcador de chave ---------- */
.checks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.checks li{position:relative;padding-left:32px;line-height:1.55}
.checks li::before{
  content:"";position:absolute;left:0;top:.52em;width:16px;height:2px;background:var(--blue);border-radius:2px;
}
.checks li::after{content:"";position:absolute;left:16px;top:calc(.52em - 3px);width:2px;height:8px;background:var(--blue);border-radius:2px}

/* lista simples com marcador — usada nos cards escuros */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:24px;line-height:1.55;font-size:.98rem;
  color:#C8D1DA;-webkit-text-fill-color:#C8D1DA}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;
  background:var(--blue);border-radius:2px}
.card:not(.card-dark) .ticks li{color:var(--gray);-webkit-text-fill-color:var(--gray)}

/* ---------- selo de avaliação no Google ---------- */
.gbox{
  display:flex;align-items:center;gap:clamp(20px,3vw,34px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:clamp(22px,3vw,30px);text-decoration:none;color:inherit;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
  max-width:640px;
}
.gbox:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}
.gbox-l{flex:0 0 auto;text-align:center;padding-right:clamp(18px,2.4vw,28px);
  border-right:1px solid var(--line)}
.gbox-n{display:block;font-family:var(--f-display);font-size:clamp(2.4rem,6vw,3.1rem);
  line-height:1;color:var(--ink);margin-bottom:8px}
.stars{display:inline-flex;gap:2px}
.gbox-r strong{display:block;font-size:1.02rem;color:var(--ink);margin-bottom:6px}
.gbox-r p{margin:0 0 10px;font-size:.94rem;color:var(--gray);line-height:1.5}
.gbox-r .more{font-size:.88rem;font-weight:600;color:var(--blue-800);
  display:inline-flex;align-items:center;min-height:44px}
.on-dark .gbox{background:var(--ink-3);border-color:var(--line-dark)}
.on-dark .gbox-l{border-right-color:var(--line-dark)}
.on-dark .gbox-n,.on-dark .gbox-r strong{color:#fff;-webkit-text-fill-color:#fff}
.on-dark .gbox-r p{color:#A2ADB8;-webkit-text-fill-color:#A2ADB8}
.on-dark .gbox-r .more{color:var(--blue);-webkit-text-fill-color:var(--blue)}
@media (max-width:600px){
  .gbox{flex-direction:column;align-items:flex-start;gap:18px}
  .gbox-l{border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px;
    width:100%;text-align:left}
  .on-dark .gbox-l{border-bottom-color:var(--line-dark)}
}

/* ---------- bloco de base legal ---------- */
.legal-box{
  border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r);
  background:var(--paper);padding:clamp(24px,3.2vw,36px);
}
.legal-box p{font-size:1rem;line-height:1.68;color:var(--gray)}
.legal-box p:last-child{margin-bottom:0}
.legal-box strong{color:var(--ink)}
.legal-t{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-800);margin:0 0 16px !important;
}
.legal-alert{
  background:var(--blue-050);border-radius:8px;padding:18px 20px;margin-top:22px !important;
}
.on-dark .legal-box{background:var(--ink-3);border-color:var(--line-dark);border-left-color:var(--blue)}
.on-dark .legal-box p{color:#C8D1DA;-webkit-text-fill-color:#C8D1DA}
.on-dark .legal-box strong{color:#fff;-webkit-text-fill-color:#fff}
.on-dark .legal-alert{background:rgba(0,162,252,.10)}

/* ---------- métricas ---------- */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);margin-top:40px}
.metric{border-top:1px solid var(--line);padding-top:22px}
.metric .k{font-family:var(--f-display);font-size:clamp(2rem,4.6vw,3.15rem);line-height:1;color:var(--blue-700)}
.on-dark .metric .k{color:var(--blue);-webkit-text-fill-color:var(--blue)}
.metric .l{margin-top:10px;font-size:.95rem;color:var(--gray);line-height:1.5}

/* variante de texto: .k aqui carrega frase, não número. No corpo de número a
   frase quebrava em duas linhas e desalinhava o parágrafo das colunas vizinhas. */
/* --blue-700 so passa em AA como texto GRANDE (>=24px). Nesta variante a
   fonte cai para ~2rem, entao o azul precisa ser um tom mais escuro. */
.metrics-text .k{font-size:clamp(1.44rem,2.5vw,2rem);line-height:1.18;letter-spacing:-.02em;
  color:var(--blue-800)}
@media (min-width:860px){
  /* reserva exatamente 1 linha: com a fonte menor os tres titulos cabem em
     uma linha, entao nao ha razao para reservar duas e abrir um vao. */
  .metrics-text .k{min-height:1.18em;display:flex;align-items:flex-start}
}
.on-dark .metric{border-color:var(--line-dark)}
.on-dark .metric .l{color:#98A3AE;-webkit-text-fill-color:#98A3AE}
@media (max-width:660px){.metrics{grid-template-columns:1fr}}

/* ---------- simulador ---------- */
.sim{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
.sim label{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2);margin-bottom:10px}
.sim input[type=range]{width:100%;accent-color:var(--blue);height:46px}
.sim .val{font-family:var(--f-display);font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.1;color:var(--ink)}
.sim .row{margin-bottom:26px}
.sim .chips{display:flex;flex-wrap:wrap;gap:8px}
.sim .chip{
  border:1px solid var(--line);background:var(--paper);border-radius:100px;padding:12px 18px;min-height:46px;
  font-family:var(--f-text);font-size:.9rem;font-weight:500;color:var(--ink-3);cursor:pointer;transition:.18s ease;
}
.sim .chip[aria-pressed=true]{background:var(--ink);color:#fff;-webkit-text-fill-color:#fff;border-color:var(--ink)}
.sim .chip:hover{border-color:var(--blue)}
.sim-out{background:var(--ink);color:#fff;-webkit-text-fill-color:#fff;border-radius:var(--r);padding:clamp(24px,3vw,34px)}
.sim-out .t{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#8E99A5;-webkit-text-fill-color:#8E99A5}
.sim-out .big{font-family:var(--f-display);font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.02;color:var(--blue);-webkit-text-fill-color:var(--blue);margin-top:12px}
.sim-out .brk{border-top:1px solid var(--line-dark);margin-top:26px;padding-top:20px;display:grid;gap:12px}
.sim-out .brk div{display:flex;justify-content:space-between;gap:16px;font-size:.94rem;color:#B9C2CC;-webkit-text-fill-color:#B9C2CC}
.sim-out .brk b{color:#fff;-webkit-text-fill-color:#fff;font-weight:500;font-family:var(--f-mono);font-size:.9rem;white-space:nowrap;flex:0 0 auto}
.sim-out .brk div > span:first-child{min-width:0}
.sim-note{font-size:.8rem;color:var(--gray-2);margin-top:18px;line-height:1.5}
.on-dark .sim-note{color:#7E8994;-webkit-text-fill-color:#7E8994}

/* ---------- FAQ ---------- */
.faq{margin-top:36px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--f-display);font-size:clamp(1.08rem,2vw,1.3rem);line-height:1.35;color:var(--ink);
  min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:31px;width:13px;height:13px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(225deg);top:34px}
.faq .a{padding:0 44px 24px 0;color:var(--gray);max-width:82ch}
.faq .a p:last-child{margin-bottom:0}
.on-dark .faq,.on-dark .faq details{border-color:var(--line-dark)}
.on-dark .faq summary{color:#fff;-webkit-text-fill-color:#fff}
.on-dark .faq .a{color:#A9B4BF;-webkit-text-fill-color:#A9B4BF}

/* ---------- faixa de CTA ---------- */
.band{background:var(--ink);color:#fff;-webkit-text-fill-color:#fff;position:relative;overflow:hidden}
.band h2{color:#fff;-webkit-text-fill-color:#fff;max-width:22ch}
.band p{color:#B9C2CC;-webkit-text-fill-color:#B9C2CC;max-width:56ch}
.band-ghost{position:absolute;left:-70px;bottom:-140px;width:min(38vw,400px);opacity:.05;pointer-events:none}

/* marca d'agua da logo em seções de fundo claro — evita o branco totalmente liso */
.has-ghost{position:relative;overflow:hidden}
.has-ghost > .wrap{position:relative;z-index:2}
.has-ghost::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  right:-70px;top:50%;transform:translateY(-50%);
  width:min(44vw,480px);aspect-ratio:460/613;opacity:.10;
  background-image:url("mark-ghost-dark.png");
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
/* alterna o lado para a marca não repetir sempre na mesma posição */
.has-ghost.gm-left::after{right:auto;left:-90px}
@media (max-width:860px){
  .has-ghost::after{width:min(64vw,340px);opacity:.085;right:-100px}
  .has-ghost.gm-left::after{right:auto;left:-120px}
}

/* variante para seções de fundo ESCURO com uma única coluna de texto:
   sem visual do lado direito, sobrava um vao vazio grande em telas largas.
   Mesmo mecanismo do .has-ghost, mas com a marca clara (mark-ghost.png). */
.has-ghost-dark{position:relative;overflow:hidden}
.has-ghost-dark > .wrap{position:relative;z-index:2}
.has-ghost-dark::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  right:-70px;top:50%;transform:translateY(-50%);
  width:min(44vw,480px);aspect-ratio:460/613;opacity:.10;
  background-image:url("mark-ghost.png");
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.has-ghost-dark.gm-left::after{right:auto;left:-90px}
@media (max-width:860px){
  .has-ghost-dark::after{width:min(64vw,340px);opacity:.085;right:-100px}
  .has-ghost-dark.gm-left::after{right:auto;left:-120px}
}
@media (prefers-reduced-motion:no-preference){.has-ghost::after{will-change:auto}}
.band .wrap{position:relative;z-index:2}

/* ---------- "veja também" (SXO) ---------- */
.also{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:30px}
.also a{
  display:block;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 24px;
  color:var(--ink);transition:.2s ease;
}
.also a:hover{border-color:#B9DDF7;box-shadow:var(--shadow);transform:translateY(-2px);color:var(--ink)}
.also .t{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-700);display:block;margin-bottom:9px}
.also .h{font-family:var(--f-display);font-size:1.14rem;line-height:1.28}
@media (max-width:820px){.also{grid-template-columns:1fr}}

/* ---------- formulário ---------- */
.form{display:grid;gap:20px}
.field label{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-2);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-text);font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-height:52px;transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,162,252,.14);outline:none}
.form-note{font-size:.83rem;color:var(--gray-2);line-height:1.55}

/* ---------- contato ---------- */
.contact-card{background:var(--ink);color:#fff;-webkit-text-fill-color:#fff;border-radius:var(--r);padding:clamp(26px,3.4vw,38px)}
.contact-card a:not(.btn){color:var(--blue);-webkit-text-fill-color:var(--blue);word-break:break-word}
.contact-card .it{border-top:1px solid var(--line-dark);padding-top:20px;margin-top:20px}
.contact-card .it:first-of-type{border-top:0;padding-top:0;margin-top:0}
.contact-card .lb{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#8E99A5;-webkit-text-fill-color:#8E99A5;margin-bottom:8px}
.contact-card .vl{font-size:1.12rem;line-height:1.4}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:#A2ADB8;-webkit-text-fill-color:#A2ADB8;padding-block:clamp(56px,7vw,84px) 34px;font-size:.93rem}
.ft a:not(.btn){color:#C4CDD6;-webkit-text-fill-color:#C4CDD6}
.ft a:hover{color:var(--blue);-webkit-text-fill-color:var(--blue)}
.ft-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,52px)}
.ft-slogan{font-family:var(--f-display);font-size:1.14rem;line-height:1.4;
  max-width:24ch;color:#C6CFD8;-webkit-text-fill-color:#C6CFD8;margin:18px 0 0;
  text-align:left;text-wrap:balance}
.ft-contact{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
.ft-contact li{display:flex;align-items:center;gap:10px;font-size:.9rem}
.ft-contact li + li{margin-top:-14px}
.ft-contact svg{flex:0 0 auto;color:var(--blue);opacity:.9}
.ft-contact a{display:inline-flex;align-items:center;min-height:44px;line-height:1.3}
.ft-logo{width:186px;margin-bottom:22px}
.ft .ft-h{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#8A96A2;-webkit-text-fill-color:#8A96A2;font-weight:500;margin-bottom:18px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ft-btm{border-top:1px solid var(--line-dark);margin-top:clamp(38px,5vw,58px);
  padding-top:26px;display:flex;flex-wrap:wrap;gap:8px 28px;
  justify-content:center;text-align:center;font-size:.83rem;
  color:#8A96A2;-webkit-text-fill-color:#8A96A2}
/* aviso legal centralizado e com a mesma medida da barra acima */
.ft-legal{margin:14px auto 0 !important;max-width:82ch !important;text-align:center !important;
  hyphens:manual;-webkit-hyphens:manual}
@media (max-width:860px){.ft-top{grid-template-columns:1fr 1fr}.ft-top>div:first-child{grid-column:1/-1}}
@media (max-width:520px){.ft-top{grid-template-columns:1fr}}

/* ---------- botões flutuantes ---------- */
.floats{
  position:fixed;right:16px;bottom:16px;z-index:55;
  display:flex;flex-direction:column;gap:12px;
}
.floats a{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease;
}
.floats a:hover{transform:scale(1.06)}
.floats svg{width:29px;height:29px}
.wa-float{background:#25D366;box-shadow:0 10px 30px -8px rgba(16,50,30,.5)}
/* gradiente oficial do Instagram, do canto inferior esquerdo ao superior direito */
.ig-float{
  background:radial-gradient(circle at 30% 107%,
    #FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%);
  box-shadow:0 10px 30px -8px rgba(150,30,90,.55);
}
.floats svg{color:#fff}
@media (min-width:1041px){.floats{right:26px;bottom:26px}}
@media (max-width:400px){.floats a{width:52px;height:52px}.floats svg{width:26px;height:26px}}

/* ---------- reveal ---------- */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1!important;transform:none!important;transition:none}
  .ladder .st::before{transition:none;width:100%}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}