/* ==========================================================================
   Sienna ERP - site
   Valores (cor, tamanho, raio, espaco) vindos do mockup
   "Website V2 - modelo Conta Azul" (SiteV2.dc.html), que trazia tudo em style
   inline. Aqui viram token + classe, para o site rodar sob CSP style-src 'self'.
   Paleta confere com o design system do app: acao clara #0F6E6A, acao escura
   #2FA39A, fundo escuro #18181B, cards #1C1C1F, Geist.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fontes/geist-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --tinta: #18181B;
  --tinta-2: #3F3F46;
  --tinta-3: #52525B;
  --cinza: #71717A;
  --borda: #E4E4E7;
  --borda-input: #D4D4D8;
  --suave: #FAFAFA;
  --branco: #FFFFFF;

  --petroleo: #0F6E6A;
  --petroleo-fundo: #E6F4F2;
  --menta: #2FA39A;
  --menta-tinta: #0B1F1E;
  --menta-suave: #8FD3C7;

  --esc-fundo: #18181B;
  --esc-card: #1C1C1F;
  --esc-borda: #2C2C31;
  --esc-borda-2: #34343A;
  --esc-borda-3: #3F3F46;
  --esc-texto: #EDEDEF;
  --esc-texto-2: #D4D4D8;
  --esc-texto-3: #A1A1AA;
  --esc-texto-4: #8B9A98;

  --verde: #3FB97F;
  --amarelo: #E5B83B;
  --vermelho: #E5484D;
  --zap: #1E9E53;

  --raio-btn: 10px;
  --raio-card: 12px;
  --raio-grande: 22px;
  --larg: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: 'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--tinta);
  color: var(--branco);
  text-decoration: none;
  border-radius: 0 0 var(--raio-btn) 0;
}
.pular:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--petroleo);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: var(--larg);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* -------------------------------------------------------------- tipografia */
h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.03em; line-height: 1.12; }
h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 3.4vw, 42px); }
h3 { font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
strong { font-weight: 700; }
p { margin: 0; }

.olho { font-size: 15px; font-weight: 500; color: var(--menta-suave); }
.selo {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--petroleo-fundo);
  color: var(--petroleo);
  font-size: 14px;
  font-weight: 600;
}
.selo-escuro {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--esc-texto);
  font-size: 14px;
  font-weight: 500;
}
.num { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- botoes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--raio-btn);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn-g { height: 56px; padding: 0 28px; font-size: 17px; border-radius: 12px; }
.btn-petroleo { background: var(--petroleo); color: var(--branco); }
.btn-menta { background: var(--menta); color: var(--menta-tinta); }
.btn-vazado { border: 1px solid #3F5654; color: var(--esc-texto); background: transparent; }
.btn-vazado:hover { background: rgba(255, 255, 255, 0.06); filter: none; }
.btn-texto { color: var(--tinta); font-weight: 500; background: transparent; }
.btn-texto:hover { background: #F4F4F5; filter: none; }
.link-seta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--petroleo);
  font-weight: 600;
  text-decoration: none;
}
.link-seta svg { transition: transform 0.2s ease; }
.link-seta:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------- cabecalho */
.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}
.topo__linha {
  max-width: var(--larg);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topo__esq { display: flex; align-items: center; gap: 28px; }
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.marca span { font-weight: 400; color: var(--cinza); }
.menu { display: flex; align-items: center; gap: 2px; }
.menu a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--tinta-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.menu a:hover { background: #F4F4F5; }
.topo__acoes { display: flex; align-items: center; gap: 8px; }
.topo__zap { display: none; }
.hamburguer { display: none; }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0B2422 0%, #10302F 45%, #18181B 100%);
  color: var(--esc-texto);
}
.hero__dentro {
  position: relative;
  max-width: var(--larg);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.hero h1 { max-width: 900px; }
.hero__texto { max-width: 640px; font-size: clamp(17px, 1.6vw, 20px); color: #B4B4BB; }
.hero__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero__nota { font-size: 14px; color: var(--esc-texto-4); }

/* mosaico decorativo nas laterais do hero */
.mosaico-hero {
  position: absolute;
  top: 0;
  width: max(0px, calc((100% - 980px) / 2));
  max-width: 300px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.mosaico-hero--esq { left: 0; }
.mosaico-hero--dir { right: 0; }

/* ladrilhos: cor (c0..c7) e forma (f0..f7) iguais as do mockup */
.mosaico-hero i, .mosaico-bloco i, .mosaico-banner i, .mosaico-demo i {
  display: block;
  aspect-ratio: 1;
}
.c0 { background: #27272A; } .c1 { background: #3F3F46; }
.c2 { background: #0F5257; } .c3 { background: #71717A; }
.c4 { background: #D4D4D8; } .c5 { background: #18181B; }
.c6 { background: #2FA39A; } .c7 { background: #147A78; }
.f0, .f6 { border-radius: 0; }
.f1 { border-radius: 100% 0 0 0; }
.f2 { border-radius: 0 100% 0 0; }
.f3 { border-radius: 0 0 100% 0; }
.f4 { border-radius: 0 0 0 100%; }
.f5 { border-radius: 50%; }
.f7 { border-radius: 0 50% 50% 50%; }

/* ---------------------------------------------- tela de exemplo do produto */
.tela { position: relative; width: 100%; max-width: 1040px; margin-top: 28px; }
.tela__janela {
  border: 1px solid #2E4644;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--esc-card);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 -10px 80px rgba(47, 163, 154, 0.18);
}
.tela__barra {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-bottom: 1px solid var(--esc-borda);
}
.tela__barra i { width: 10px; height: 10px; border-radius: 99px; background: var(--esc-borda-3); }
.tela__corpo { display: flex; min-height: 340px; }
.tela__menu {
  flex: 0 0 168px;
  border-right: 1px solid var(--esc-borda);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tela__menu span {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--esc-texto-3);
}
.tela__menu .ativo { background: var(--esc-borda); color: var(--esc-texto); }
.tela__painel {
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tela__ola { font-size: 18px; font-weight: 600; }
.tela__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.kpi {
  padding: 12px;
  border: 1px solid var(--esc-borda);
  border-radius: var(--raio-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi__r { font-size: 12px; color: var(--esc-texto-3); }
.kpi__v { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi__o { font-size: 11px; color: var(--esc-texto-3); }
.kpi__o.sobe { color: var(--verde); }
.kpi__o.cai { color: var(--vermelho); }
.kpi__o.atencao { color: var(--amarelo); }
.tela__grafico {
  padding: 12px;
  border: 1px solid var(--esc-borda);
  border-radius: var(--raio-card);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tela__grafico > span { font-size: 12px; color: var(--esc-texto-3); }
.barras { flex: 1; min-height: 110px; display: flex; align-items: flex-end; gap: 3px; }
.barras i { flex: 1 1 0; border-radius: 3px 3px 0 0; background: var(--menta); }
.h8 { height: 8%; } .h12 { height: 12%; } .h16 { height: 16%; } .h20 { height: 20%; }
.h24 { height: 24%; } .h28 { height: 28%; } .h32 { height: 32%; } .h36 { height: 36%; }
.h40 { height: 40%; } .h44 { height: 44%; } .h48 { height: 48%; } .h52 { height: 52%; }
.h56 { height: 56%; } .h60 { height: 60%; } .h64 { height: 64%; } .h68 { height: 68%; }
.h72 { height: 72%; } .h76 { height: 76%; } .h80 { height: 80%; } .h84 { height: 84%; }
.h88 { height: 88%; } .h92 { height: 92%; } .h96 { height: 96%; } .h100 { height: 100%; }

.tela__fone {
  position: absolute;
  right: clamp(-8px, -1vw, 0px);
  bottom: -40px;
  width: 190px;
  border: 6px solid var(--esc-borda);
  border-radius: 28px;
  background: var(--esc-fundo);
  padding: 14px 12px 18px;
  text-align: left;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tela__fone .r { font-size: 12px; color: var(--esc-texto-3); }
.tela__fone .v { font-size: 18px; font-weight: 600; }
.tela__fone .faixa {
  padding: 8px;
  border-radius: var(--raio-btn);
  background: #10302F;
  color: var(--menta-suave);
  font-size: 12px;
}
.tela__fone .faixa strong { color: var(--esc-texto); font-size: 15px; }
.tela__fone .linha {
  font-size: 12px;
  color: var(--esc-texto-2);
  display: flex;
  gap: 6px;
  align-items: center;
}
.tela__fone .ponto { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.ponto--verde { background: var(--verde); }
.ponto--amarelo { background: var(--amarelo); }

/* ------------------------------------------------------------ blocos 1 a 3 */
.bloco--claro { background: var(--branco); }
.bloco--suave { background: var(--suave); }
.bloco__linha {
  max-width: var(--larg);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.bloco__linha--invertida { flex-direction: row-reverse; }
.bloco__texto {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.checks {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--tinta-2);
  font-size: 17px;
}
.checks svg { flex: none; margin-top: 2px; }

.bloco__arte {
  flex: 1 1 460px;
  min-width: 0;
  position: relative;
  border-radius: 24px;
  background: #10302F;
  padding: clamp(24px, 4vw, 44px);
  overflow: hidden;
}
.mosaico-bloco {
  position: absolute;
  right: -36px;
  top: -36px;
  width: 300px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  opacity: 0.95;
}
.cartao {
  position: relative;
  border-radius: 16px;
  background: var(--esc-card);
  border: 1px solid var(--esc-borda-2);
  color: var(--esc-texto);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.cartao__topo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-weight: 600;
}
.pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.pill--menta { background: #10302F; color: var(--menta-suave); }
.pill--verde { background: #123A2A; color: #6FD3A0; }
.cartao__linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--esc-borda);
  font-size: 14px;
}
.cartao__linha > span:first-child { color: var(--esc-texto-2); }
.cartao__linha .val { color: var(--esc-texto); font-variant-numeric: tabular-nums; }
.cartao__linha .ok { color: var(--verde); font-weight: 500; }
.cartao__linha .atencao { color: var(--amarelo); font-weight: 500; }

/* ---------------------------------------------------------------- modulos */
.modulos { background: var(--esc-fundo); color: var(--esc-texto); }
.modulos__dentro {
  max-width: var(--larg);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 96px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.modulos__cabeca {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
}
.modulos__cabeca h2 { max-width: 620px; }
.modulos__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.modulo {
  min-height: 60px;
  padding: 0 16px;
  border-radius: var(--raio-card);
  border: 1px solid var(--esc-borda);
  background: var(--esc-card);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--esc-texto);
}
.modulo svg { flex: none; }
.modulo span { flex: 1; font-weight: 500; }
.modulo--breve {
  border: 1px dashed var(--esc-borda-3);
  background: transparent;
  color: var(--esc-texto-3);
}
.modulo__breve {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--esc-borda-3);
  font-size: 12px;
  font-weight: 400;
  color: var(--esc-texto-3);
}

/* ----------------------------------------------------------------- planos */
.planos { background: var(--branco); }
.planos__dentro {
  max-width: var(--larg);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 96px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}
.planos__texto { flex: 1 1 400px; display: flex; flex-direction: column; gap: 16px; }
.planos__texto p { color: var(--tinta-3); font-size: 17px; }
.vantagens {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vantagens li { display: flex; gap: 14px; align-items: flex-start; }
.vantagens .ico {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--raio-btn);
  background: var(--petroleo-fundo);
  color: var(--petroleo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vantagens .txt { display: flex; flex-direction: column; }
.vantagens .txt span { color: var(--tinta-3); font-size: 15px; }

.cartao-plano {
  flex: 1 1 400px;
  max-width: 480px;
  padding: 32px;
  border-radius: var(--raio-grande);
  background: var(--tinta);
  color: var(--esc-texto);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 30px 70px rgba(24, 24, 27, 0.25);
}
.cartao-plano__nome { font-size: 22px; font-weight: 600; }
.cartao-plano__antes { font-size: 15px; color: var(--esc-texto-3); }
.cartao-plano__preco { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cartao-plano__preco .v {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cartao-plano__preco .p { color: var(--esc-texto-3); }
.cartao-plano__sem { font-size: 19px; font-weight: 500; line-height: 1.3; }
.cartao-plano__trava { font-size: 14px; font-weight: 600; color: var(--menta-suave); }
.cartao-plano .btn { margin: 6px 0; height: 54px; font-size: 17px; border-radius: 12px; }
.incluso {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.incluso li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--esc-texto-2);
}
.incluso svg { flex: none; margin-top: 3px; }

/* ----------------------------------------------------------------- banner */
.banner-fora { background: var(--branco); }
.banner-fora .wrap { padding-bottom: clamp(64px, 8vw, 96px); }
.banner {
  border-radius: 24px;
  background: var(--petroleo-fundo);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.mosaico-banner {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(420px, 45%);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: center;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent);
  mask-image: linear-gradient(to left, #000 30%, transparent);
}
.banner__texto {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.banner__olho { font-size: 14px; font-weight: 600; color: var(--petroleo); }
.banner__texto h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em; }
.banner__texto p { color: var(--tinta-2); }
.banner .btn {
  position: relative;
  height: 54px;
  padding: 0 24px;
  font-size: 16px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 110, 106, 0.35);
}

/* -------------------------------------------------------------------- faq */
.faq { background: var(--suave); border-top: 1px solid var(--borda); }
.faq__dentro {
  max-width: var(--larg);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 96px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.faq__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px 48px;
}
.faq__item { display: flex; flex-direction: column; gap: 8px; }
.faq__item p { color: var(--tinta-3); }

/* ------------------------------------------------------------------- demo */
.demo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0B2422 0%, #10302F 50%, #18181B 100%);
  color: var(--esc-texto);
}
.mosaico-demo {
  position: absolute;
  left: -60px;
  bottom: -60px;
  width: 340px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to top right, #000 30%, transparent);
  mask-image: linear-gradient(to top right, #000 30%, transparent);
}
.demo__dentro {
  position: relative;
  max-width: var(--larg);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 96px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
}
.demo__texto { flex: 1 1 360px; display: flex; flex-direction: column; gap: 16px; }
.demo__texto h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; }
.demo__texto p { color: #B4B4BB; font-size: 17px; }
.demo__caixa {
  flex: 1 1 440px;
  max-width: 560px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 20px;
  background: var(--branco);
  color: var(--tinta);
}
.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: 14px; font-weight: 500; color: var(--tinta-2); }
.campo input {
  height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--borda-input);
  border-radius: var(--raio-btn);
  color: var(--tinta);
  background: var(--branco);
}
.campo input:focus-visible { outline-offset: 0; border-color: var(--petroleo); }
.form__nota { grid-column: 1 / -1; font-size: 14px; color: var(--tinta-3); }
.form__nota a { color: var(--petroleo); font-weight: 600; }
.form .btn { grid-column: 1 / -1; height: 54px; font-size: 17px; border-radius: 12px; }
.form__erro { grid-column: 1 / -1; font-size: 14px; color: #B42318; }
.form__erro:empty { display: none; }

/* ----------------------------------------------------------------- rodape */
.rodape { background: #121214; color: var(--esc-texto-3); font-size: 14px; }
.rodape__dentro {
  max-width: var(--larg);
  margin: 0 auto;
  padding: 56px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.rodape__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}
.rodape__marca { display: flex; flex-direction: column; gap: 12px; }
.rodape__marca .nome {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--esc-texto);
  font-weight: 600;
  font-size: 18px;
}
.rodape nav { display: flex; flex-direction: column; gap: 10px; }
.rodape nav .t { color: var(--esc-texto); font-weight: 600; }
.rodape nav a { color: var(--esc-texto-3); text-decoration: none; }
.rodape nav a:hover, .rodape__marca a:hover { color: var(--esc-texto); }
.rodape__marca a { color: var(--esc-texto-3); text-decoration: none; }
.rodape__fim {
  padding-top: 24px;
  border-top: 1px solid #27272A;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}
.rodape__fim nav { flex-direction: row; gap: 20px; }

/* ------------------------------------------------------- botao do whatsapp */
.zap-fixo {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  height: 56px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: var(--zap);
  color: var(--branco);
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.zap-fixo:hover { filter: brightness(1.06); }

/* -------------------------------------------------------------- 404 / lei */
.pagina-simples {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pagina-simples h1 { font-size: clamp(30px, 4vw, 44px); }
.pagina-simples h2 { margin-top: 16px; font-size: clamp(22px, 2.4vw, 28px); }
.acoes-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.pagina-simples p, .pagina-simples li { color: var(--tinta-3); }
.pagina-simples ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }

/* ------------------------------------------------------------- responsivo */
@media (max-width: 900px) {
  .menu { display: none; }
  .hamburguer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-btn);
    background: var(--branco);
    cursor: pointer;
  }
  .topo__acoes .btn-petroleo { display: none; }
  .topo[data-aberto='true'] .menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 12px var(--gutter) 20px;
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
  }
  .topo[data-aberto='true'] .menu a { padding: 12px; font-size: 16px; }
  .topo { position: sticky; }
  .topo__linha { position: relative; }
  .tela__menu { display: none; }
  .tela__fone { display: none; }
  .bloco__linha, .bloco__linha--invertida { flex-direction: column; align-items: stretch; }
  .mosaico-bloco { width: 200px; right: -28px; top: -28px; }
}

@media (max-width: 560px) {
  .hero__dentro { padding-top: clamp(40px, 10vw, 56px); }
  .hero__acoes .btn { width: 100%; }
  .tela { margin-top: 20px; }
  .tela__corpo { min-height: 240px; }
  .zap-fixo { height: 52px; padding: 0 16px 0 14px; font-size: 15px; }
  .cartao-plano { padding: 24px; }
  .rodape__fim { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}