@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --preto: #0a0c10;
  --preto-2: #14181f;
  --branco: #fff;
  --cinza: #f3f5f8;
  --linha: #dfe4ec;
  --linha-escura: #262c36;
  --texto: #10141b;
  --suave: #5a6472;
  --suave-claro: #a3adbb;
  --azul: #1a7dff;
  --azul-texto: #0b5fd6;
  --largura: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--branco);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-texto); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.03em; font-weight: 800; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }

.largura { width: min(100% - 40px, var(--largura)); margin-inline: auto; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--azul); color: #fff; padding: 8px 14px; z-index: 100; }
.pular:focus { left: 8px; }
.seta { width: 1.1em; height: 1.1em; flex: none; transition: transform .2s; }
.zap { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- logo ---------- */
.logo { font-weight: 800; font-size: 1.75rem; letter-spacing: -.05em; line-height: 1; text-decoration: none; color: #fff; display: inline-block; }
.logo b { color: var(--azul); font-weight: 800; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--azul); color: #fff; border: 2px solid var(--azul);
  font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none;
  padding: .85em 1.35em; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.botao:hover { background: #0b5fd6; border-color: #0b5fd6; }
.botao:hover .seta, a:hover > .seta { transform: translateX(4px); }
.botao-linha { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.botao-linha:hover { background: #fff; border-color: #fff; color: var(--preto); }
.botao-linha-escura { background: transparent; border-color: var(--texto); color: var(--texto); }
.botao-linha-escura:hover { background: var(--texto); border-color: var(--texto); color: #fff; }
.botao-claro { background: #fff; border-color: #fff; color: var(--preto); }
.botao-claro:hover { background: var(--preto); border-color: var(--preto); color: #fff; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--preto); color: #fff; border-bottom: 1px solid var(--linha-escura); }
.topo-linha { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.menu { display: flex; align-items: center; flex: 1; gap: 24px; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu > ul { display: flex; gap: 4px; }
.menu > ul > li > a { display: block; padding: 10px 14px; color: #fff; text-decoration: none; font-weight: 600; font-size: .98rem; border-radius: 999px; }
.menu > ul > li > a:hover { background: var(--preto-2); }
.tem-sub { position: relative; }
.tem-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-3px) rotate(45deg); }
.sub { position: absolute; top: 100%; left: 0; min-width: 310px; background: #fff; border: 1px solid var(--linha); box-shadow: 0 18px 40px rgba(10, 12, 16, .18); padding: 8px; border-radius: 14px; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.tem-sub:hover .sub, .tem-sub:focus-within .sub { visibility: visible; opacity: 1; transform: none; }
.sub a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: var(--texto); text-decoration: none; font-weight: 500; font-size: .97rem; border-radius: 8px; }
.sub a:hover { background: var(--cinza); color: var(--azul-texto); }
.sub-todos { border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 6px; }
.sub-todos a { font-weight: 700; }
.menu-acoes { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.menu-fone { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.menu-fone:hover { color: var(--azul); }
.menu-acoes .botao { padding: .65em 1.15em; font-size: .95rem; }
.menu-botao { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; padding: 0; position: relative; }
.menu-botao span { position: absolute; left: 10px; right: 10px; height: 2px; background: #fff; transition: transform .2s, top .2s; }
.menu-botao span:first-child { top: 17px; }
.menu-botao span:last-child { top: 26px; }
.menu-botao[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-botao[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- faixa das 17 cores ---------- */
.faixa-cores { display: flex; height: 8px; }
.faixa-cores i { flex: 1; }

/* ---------- herói (home) ---------- */
.heroi { background: var(--preto); color: #fff; }
.heroi-grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding-block: 72px 80px; }
.sobrelinha { font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--azul); margin-bottom: 1.4rem; }
.heroi h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); line-height: 1.02; letter-spacing: -.045em; }
.heroi h1 em { font-style: normal; color: var(--azul); }
.lead { font-size: 1.16rem; line-height: 1.6; color: var(--suave-claro); max-width: 58ch; margin: 1.5rem 0 0; }
.heroi-foto img { border-radius: 24px; width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- cabeçalho das páginas internas ---------- */
.cab { background: var(--preto); color: #fff; padding-block: 44px 60px; border-bottom: 8px solid var(--azul); }
.cab h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -.04em; max-width: 20ch; }
.cab-com-foto .cab-grade { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; }
.cab-foto img { border-radius: 20px; width: 100%; max-height: 380px; object-fit: cover; object-position: center 85%; }
.migalhas { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 1.6rem; padding: 0; font-size: .88rem; color: var(--suave-claro); }
.migalhas li + li::before { content: "/"; margin-inline: 10px; opacity: .5; }
.migalhas a { color: inherit; text-decoration: none; }
.migalhas a:hover { color: #fff; text-decoration: underline; }

/* ---------- seções ---------- */
.secao { padding-block: 84px; }
.secao-cinza { background: var(--cinza); }
.secao-preta { background: var(--preto); color: #fff; }
.titulo { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.titulo-menor { font-size: 1.6rem; }
.sub-titulo { color: var(--suave); font-size: 1.08rem; margin: .8rem 0 0; max-width: 70ch; }
.duas { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.duas > .titulo { position: sticky; top: 104px; }

/* ---------- índice numerado de produtos ---------- */
.indice { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 2px solid var(--texto); }
.indice li { border-bottom: 1px solid var(--linha); }
.indice a { display: grid; grid-template-columns: 44px 1fr 24px; grid-template-rows: auto 1fr; column-gap: 12px; align-items: start; padding: 26px 4px; color: inherit; text-decoration: none; height: 100%; transition: background .2s, padding .2s; }
.indice .num { grid-row: span 2; font-size: .85rem; font-weight: 700; color: var(--azul-texto); padding-top: .32em; font-variant-numeric: tabular-nums; }
.indice h2, .indice h3 { font-size: 1.3rem; letter-spacing: -.025em; }
.indice p { grid-column: 2; margin: .5rem 0 0; color: var(--suave); font-size: .98rem; line-height: 1.55; }
.indice .seta { grid-column: 3; grid-row: 1; margin-top: .25em; color: var(--azul-texto); }
.indice a:hover { background: var(--cinza); padding-inline: 14px 10px; }
.secao-cinza .indice a:hover { background: #fff; }
.indice a:hover h2, .indice a:hover h3 { color: var(--azul-texto); }

/* ---------- por que comprar ---------- */
.porque { display: grid; grid-template-columns: .75fr 1.25fr; gap: 64px; align-items: center; }
.porque-foto img { border-radius: 24px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center bottom; }
.motivos { list-style: none; margin: 32px 0 36px; padding: 0; border-top: 1px solid var(--linha-escura); }
.motivos li { padding: 16px 0 16px 34px; border-bottom: 1px solid var(--linha-escura); color: #c6ced9; position: relative; }
.motivos li::before { content: ""; position: absolute; left: 4px; top: 1.65em; width: 14px; height: 4px; border-radius: 2px; background: var(--azul); }
.motivos strong { color: #fff; }
.secao-preta a:not(.botao) { color: #6fb0ff; }

/* ---------- clientes ---------- */
.clientes { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.clientes li { background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 14px 22px; display: grid; place-items: center; }
.clientes img { width: 100%; max-width: 200px; }

/* ---------- FAQ ---------- */
.faq { border-top: 2px solid var(--texto); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-weight: 700; font-size: 1.1rem; letter-spacing: -.015em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-52%); font-size: 1.7rem; font-weight: 400; color: var(--azul-texto); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--azul-texto); }
.faq p { margin: 0 0 24px; color: var(--suave); max-width: 68ch; }

/* ---------- chamada final ---------- */
.chamada { background: var(--azul); color: #fff; padding-block: 64px; }
.chamada-linha { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.chamada h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.chamada p { margin: .7rem 0 0; font-size: 1.1rem; max-width: 56ch; color: #eaf3ff; }

/* ---------- texto corrido ---------- */
.prosa { max-width: 74ch; }
.prosa > :first-child { margin-top: 0; }
.prosa h2 { font-size: 1.65rem; margin: 2.6rem 0 1rem; }
.prosa h3 { font-size: 1.22rem; margin: 2rem 0 .7rem; letter-spacing: -.02em; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prosa li { margin-bottom: .5em; }
.prosa li::marker { color: var(--azul-texto); font-weight: 700; }
.prosa img { border-radius: 14px; margin-block: 1.5rem; }
.prosa blockquote { margin: 1.5rem 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--azul); color: var(--suave); }
.prosa hr { border: 0; border-top: 1px solid var(--linha); margin: 2.5rem 0; }
.tabela-rolagem { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--linha); border-radius: 14px; background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th { text-align: left; background: var(--preto); color: #fff; font-weight: 700; padding: 12px 16px; white-space: nowrap; }
td { padding: 12px 16px; border-top: 1px solid var(--linha); vertical-align: top; }
.destaque { background: var(--cinza); border-left: 4px solid var(--azul); border-radius: 0 14px 14px 0; padding: 18px 22px; margin: 1.5rem 0; }
.secao-cinza .destaque { background: #fff; }
.destaque > :last-child { margin-bottom: 0; }
.fonte { font-size: .88rem; color: var(--suave); }
.cor-amostra { display: inline-block; width: 30px; height: 12px; border-radius: 3px; margin-right: 10px; vertical-align: baseline; box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .22); }
.prosa ul.cores { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.prosa ul.cores li { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--linha); }

/* ---------- página de produto ---------- */
.artigo-grade { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 64px; align-items: start; }
.sumario { position: sticky; top: 104px; border-top: 2px solid var(--texto); padding-top: 16px; }
.sumario h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--suave); margin-bottom: 10px; }
.sumario ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.sumario li { counter-increment: s; }
.sumario a { display: flex; gap: 10px; padding: 7px 0; color: var(--texto); text-decoration: none; font-size: .93rem; line-height: 1.35; font-weight: 500; }
.sumario a::before { content: counter(s, decimal-leading-zero); color: var(--azul-texto); font-weight: 700; font-size: .8rem; padding-top: .12em; font-variant-numeric: tabular-nums; }
.sumario a:hover { color: var(--azul-texto); }

/* ---------- blog ---------- */
.posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.posts a { display: block; color: inherit; text-decoration: none; }
.posts img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 85%; border-radius: 16px; background: var(--preto); }
.etiqueta { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-texto); margin: 18px 0 8px; }
.posts h2 { font-size: 1.28rem; letter-spacing: -.025em; line-height: 1.2; }
.posts p:not(.etiqueta) { color: var(--suave); font-size: .96rem; line-height: 1.55; margin: .6rem 0 .9rem; }
.ler { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--azul-texto); }
.posts a:hover h2 { color: var(--azul-texto); }
.posts a:hover .seta { transform: translateX(4px); }
.post-cab { padding-block: 48px 36px; max-width: 860px; }
.post-cab .migalhas { color: var(--suave); }
.post-cab .migalhas a:hover { color: var(--texto); }
.post-cab .etiqueta { margin-top: 0; }
.post-cab h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -.04em; }
.post-datas { color: var(--suave); font-size: .93rem; margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 2px solid var(--texto); }
.post-corpo { max-width: 860px; padding-bottom: 84px; }
.post-corpo .capa { width: 100%; max-height: 440px; object-fit: cover; border-radius: 20px; margin-bottom: 40px; }

/* ---------- sobre ---------- */
.sobre-grade { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
.sobre-grade img { border-radius: 24px; }
.sobre-grade h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.numeros { background: var(--preto); color: #fff; padding-block: 56px; }
.numeros dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-block: 0; }
.numeros div { border-top: 4px solid var(--azul); padding-top: 16px; display: flex; flex-direction: column-reverse; }
.numeros dd { margin: 0; font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.numeros dt { color: var(--suave-claro); font-size: .95rem; margin-top: 10px; }

/* ---------- contato ---------- */
.contato-grade { display: grid; grid-template-columns: 1.25fr .75fr; gap: 64px; align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.form label { display: block; font-weight: 600; font-size: .93rem; }
.form .cheio { grid-column: 1 / -1; }
.form input, .form textarea { display: block; width: 100%; margin-top: 7px; font: inherit; font-size: 1rem; color: var(--texto); background: #fff; border: 1.5px solid #c3cad6; border-radius: 10px; padding: 12px 14px; }
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(26, 125, 255, .22); }
.form-fim { display: flex; flex-wrap: wrap; gap: 12px; }
.form-nota { font-size: .88rem; color: var(--suave); margin: 0; }
.agilizar { margin-top: 56px; }
.agilizar h2 { font-size: 1.3rem; }
.direto { border-top: 2px solid var(--texto); padding-top: 24px; }
.direto dl { margin: 20px 0 0; }
.direto dl div { padding: 14px 0; border-bottom: 1px solid var(--linha); }
.direto dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--suave); }
.direto dd { margin: 4px 0 0; }
.direto dd a { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--texto); }
.direto dd a:hover { color: var(--azul-texto); }
.direto .destaque h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.direto .destaque p { font-size: .95rem; color: var(--suave); }
.direto .destaque a { font-weight: 700; font-size: .95rem; }

/* ---------- rodapé ---------- */
.rodape { background: var(--preto); color: var(--suave-claro); font-size: .95rem; }
.rodape-grade { display: grid; grid-template-columns: 1.5fr 1.2fr .8fr 1.2fr; gap: 40px; padding-block: 64px 48px; }
.rodape .logo { font-size: 2rem; margin-bottom: 18px; }
.rodape p { max-width: 36ch; }
.rodape h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 16px; font-weight: 700; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 9px; }
.rodape a { color: inherit; text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape-fim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid var(--linha-escura); padding-block: 22px; font-size: .86rem; }
.rodape-fim p { margin: 0; max-width: none; }
.zap-fixo { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #1fa855; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(10, 12, 16, .3); transition: transform .2s; }
.zap-fixo:hover { transform: scale(1.08); }
.zap-fixo .zap { width: 28px; height: 28px; }

/* ---------- telas menores ---------- */
@media (max-width: 1020px) {
  .menu-botao { display: block; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--preto); border-bottom: 1px solid var(--linha-escura); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 24px; max-height: calc(100vh - 72px); overflow-y: auto; }
  .menu.aberto { display: flex; }
  .menu > ul { flex-direction: column; gap: 0; }
  .menu > ul > li > a { padding: 14px 0; border-bottom: 1px solid var(--linha-escura); border-radius: 0; font-size: 1.05rem; }
  .menu > ul > li > a:hover { background: none; }
  .tem-sub > a::after { display: none; }
  .sub { position: static; visibility: visible; opacity: 1; transform: none; background: none; border: 0; box-shadow: none; padding: 6px 0 6px 14px; min-width: 0; border-bottom: 1px solid var(--linha-escura); border-radius: 0; }
  .sub a { color: var(--suave-claro); padding: 8px 0; }
  .sub a:hover { background: none; color: #fff; }
  .sub-todos { display: none; }
  .menu-acoes { margin: 20px 0 0; flex-direction: column; align-items: stretch; gap: 14px; }
  .menu-fone { justify-content: center; }
  .artigo-grade { grid-template-columns: 1fr; gap: 32px; }
  .sumario { position: static; }
  .sumario ol { columns: 2; column-gap: 32px; }
  .posts { grid-template-columns: 1fr 1fr; }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  body { font-size: 1rem; }
  .secao { padding-block: 60px; }
  .heroi-grade, .cab-com-foto .cab-grade, .duas, .porque, .sobre-grade, .contato-grade { grid-template-columns: 1fr; gap: 36px; }
  .heroi-grade { padding-block: 48px 56px; }
  .heroi-foto img { aspect-ratio: 16 / 10; }
  .cab-foto img { max-height: 260px; }
  .duas > .titulo { position: static; }
  .indice { grid-template-columns: 1fr; }
  .porque-foto img { aspect-ratio: 16 / 11; }
  .clientes { grid-template-columns: 1fr 1fr; }
  .numeros dl { grid-template-columns: 1fr 1fr; }
  .prosa ul.cores { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .posts, .form, .rodape-grade { grid-template-columns: 1fr; }
  .sumario ol { columns: 1; }
  .acoes .botao, .form-fim .botao, .chamada .botao { width: 100%; }
  .logo { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}