/* Planet Aduana — folha de estilos única do site.
   Cores e medidas ficam nos tokens do :root; as cores vêm do logo, do cartão e da assinatura de e-mail. */

@font-face { font-family: Barlow; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Barlow; src: url("/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Barlow; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Barlow; src: url("/fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --indigo: #2e3192;          /* cor principal da marca */
  --indigo-escuro: #23266f;
  --marinho: #14173d;         /* títulos e fundos escuros */
  --ciano: #00aeef;           /* destaque */
  --ciano-hover: #4cc6f3;
  --texto: #2b2d42;
  --texto-2: #4a4d68;
  --texto-3: #676b83;
  --linha: #e3e6f0;
  --borda-campo: #cdd1e0;     /* bordas decorativas (pílulas, tracejados, botão claro) */
  --borda-entrada: #868aa3;   /* borda dos campos de texto: 3,40:1 no branco e 3,12:1 no #f4f5fa (WCAG 1.4.11) */
  --fundo: #fff;
  --fundo-2: #f4f5fa;
  --whatsapp: #189a4a;
  /* anel de foco: índigo nos fundos claros (10,66:1 no branco); ciano nos escuros (ver "Anel de foco") */
  --anel-foco: var(--indigo);

  --raio: 14px;
  --raio-g: 28px;
  --sombra: 0 1px 2px rgb(20 23 61 / 6%), 0 14px 32px -10px rgb(20 23 61 / 16%);
  --largura: 1180px;
  --cabecalho: 72px;

  /* padrão de cubos: o ladrilho tem 776 x 756 e repete sem emenda (scripts/gerar-assets.py) */
  --padrao: url("/img/padrao.svg");
  --padrao-1x: 776px 756px;
  --padrao-meio: 388px 378px;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecalho) + 8px);
}

body {
  margin: 0;
  font-family: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; color: var(--marinho); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--anel-foco); outline-offset: 3px; border-radius: 4px; }
/* Anel de foco: o ciano só tem 2,5:1 no branco, mas funciona nos fundos índigo e marinho (4,21:1 ou mais) */
.hero, .pagina-topo, .secao--escura, .chamada, .contato__cartao, .rodape, .resultado-fixo { --anel-foco: var(--ciano); }

.conteiner { width: min(100% - 32px, var(--largura)); margin-inline: auto; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pular {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--marinho); color: #fff; font-weight: 600; text-decoration: none;
}
.pular:focus { top: 12px; }

.icone {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.sobretitulo {
  display: flex; align-items: center; gap: 12px;
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--indigo);
}
.sobretitulo::before { content: ""; flex: none; width: 32px; height: 3px; border-radius: 2px; background: var(--ciano); }
.nowrap { white-space: nowrap; }

@media (max-width: 420px) {
  .sobretitulo { gap: 10px; font-size: .75rem; letter-spacing: .1em; }
  .sobretitulo::before { width: 24px; }
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.botao .icone { width: 20px; height: 20px; transition: transform .2s; }
.botao:hover .icone--seta { transform: translateX(3px); }

.botao--primario { background: var(--indigo); color: #fff; }
.botao--primario:hover { background: var(--indigo-escuro); }
.botao--ciano { background: var(--ciano); color: var(--marinho); }
.botao--ciano:hover { background: var(--ciano-hover); }
.botao--contorno { border-color: rgb(255 255 255 / 45%); color: #fff; }
.botao--contorno:hover { border-color: #fff; background: rgb(255 255 255 / 8%); }
.botao--claro { background: #fff; border-color: var(--borda-campo); color: var(--indigo); }
.botao--claro:hover { border-color: var(--indigo); }

/* ---------- Cabeçalho ---------- */

.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / 94%);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.cabecalho.rolado { border-bottom-color: var(--linha); box-shadow: 0 6px 24px -16px rgb(20 23 61 / 35%); }
.cabecalho__barra { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--cabecalho); }
.marca img { width: auto; height: 42px; }

.menu { display: flex; align-items: center; gap: 32px; }
.menu__links { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.menu__links a { position: relative; display: block; padding: 6px 0; font-weight: 500; color: var(--texto-2); text-decoration: none; transition: color .2s; }
.menu__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--ciano); transition: right .25s;
}
.menu__links a:hover, .menu__links a[aria-current] { color: var(--indigo); }
.menu__links a[aria-current]::after { right: 0; }
.menu__links a:hover::after { right: 0; }
.menu .botao { min-height: 42px; padding: 10px 20px; }

/* link de idioma (English / Português), entre os links do menu e o botão */
.menu__idioma {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0 6px 24px;
  border-left: 1px solid var(--linha);
  font-weight: 500; color: var(--texto-2); text-decoration: none; transition: color .2s;
}
.menu__idioma .icone { width: 20px; height: 20px; color: var(--indigo); }
.menu__idioma:hover { color: var(--indigo); }

.menu-botao {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--linha); border-radius: 10px; background: #fff; color: var(--marinho); cursor: pointer;
}
.menu-botao .icone--fechar,
.menu-botao[aria-expanded="true"] .icone--abrir { display: none; }
.menu-botao[aria-expanded="true"] .icone--fechar { display: block; }

@media (max-width: 1100px) {
  .marca img { height: 38px; }
  .menu-botao { display: grid; }
  .menu {
    display: none; position: absolute; inset: var(--cabecalho) 0 auto;
    flex-direction: column; align-items: stretch; gap: 20px;
    padding: 8px 16px 24px; background: #fff;
    border-bottom: 1px solid var(--linha); box-shadow: 0 20px 32px -20px rgb(20 23 61 / 35%);
  }
  .menu-aberto .menu { display: flex; }
  .menu__links { flex-direction: column; gap: 0; }
  .menu__links a { padding: 14px 4px; border-bottom: 1px solid var(--linha); font-size: 1.0625rem; }
  .menu__links a::after { display: none; }
  /* no menu do celular o link de idioma vira mais uma linha da lista */
  .menu__idioma { margin-top: -20px; padding: 14px 4px; border-left: 0; border-bottom: 1px solid var(--linha); font-size: 1.0625rem; }
}

/* Sem JavaScript o botão do menu não abre nada: os links ficam à vista, quebrando linha no cabeçalho */
@media (scripting: none) and (max-width: 1100px) {
  .cabecalho { position: relative; } /* alto demais para ficar preso no topo do celular */
  .cabecalho__barra { flex-wrap: wrap; height: auto; row-gap: 6px; padding-block: 14px 0; }
  .menu-botao { display: none; }
  .menu {
    display: flex; position: static; flex-basis: 100%;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    padding: 0 0 14px; background: none; border: 0; box-shadow: none;
  }
  .menu__links { flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
  .menu__links a { padding: 6px 0; border-bottom: 0; font-size: inherit; }
  .menu__idioma { margin-top: 0; padding: 6px 0; border-left: 0; border-bottom: 0; font-size: inherit; }
}

/* ---------- Hero ---------- */

.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--indigo); color: #fff; }
.hero__conteudo { padding-block: clamp(72px, 10vw, 136px); }
.hero__texto { max-width: min(36rem, 52vw); }
.hero .sobretitulo { color: rgb(255 255 255 / 88%); }
.hero h1 {
  margin-top: 22px; color: #fff;
  font-size: clamp(2.375rem, 1.4rem + 3.4vw, 3.875rem); line-height: 1.04; letter-spacing: -.015em;
}
.hero h1 em { font-style: normal; color: var(--ciano); }
.hero__lead { margin-top: 24px; max-width: 32em; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: rgb(255 255 255 / 84%); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.hero__padrao {
  position: absolute; z-index: -1; top: 0; right: 0; bottom: 0;
  width: min(42vw, 620px);
  background: var(--padrao) 0 0 / var(--padrao-1x);
  border-bottom-left-radius: 120px;
}

@media (max-width: 880px) {
  .hero__conteudo { padding-block: 56px 48px; }
  .hero__texto { max-width: none; }
  .hero__padrao { position: relative; z-index: auto; width: auto; height: 120px; border-radius: 56px 0 0 0; margin-left: 16px; }
}

/* ---------- Seções ---------- */

.secao { padding-block: clamp(72px, 9vw, 120px); }
.secao--suave { background: var(--fundo-2); }
.cabeca-secao { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 56px); }
.cabeca-secao h2, .empresa h2 { margin-top: 16px; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.625rem); letter-spacing: -.01em; }
.cabeca-secao > p:not(.sobretitulo) { margin-top: 16px; font-size: 1.125rem; color: var(--texto-2); }

/* ---------- Serviços ---------- */

.servicos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.servico {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 30px 28px 32px; background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.servico::before {
  content: ""; position: absolute; top: -1px; left: 28px; width: 40px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--acento);
}
.servico:hover { border-color: color-mix(in srgb, var(--acento) 30%, white); box-shadow: var(--sombra); transform: translateY(-2px); }
.servico__icone {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px;
  border-radius: 14px; color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, white);
}
.servico__icone .icone { width: 26px; height: 26px; }
.servico h3 { font-size: 1.25rem; }
.servico p { font-size: 1rem; color: var(--texto-2); }

.acento-indigo   { --acento: #2e3192; }
.acento-oceano   { --acento: #016cac; }
.acento-mata     { --acento: #135242; }
.acento-vinho    { --acento: #682527; }
.acento-aco      { --acento: #476bad; }
.acento-ferrugem { --acento: #a54e1e; }

.chamada {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px;
  margin-top: 32px; padding: 36px calc(40px + 150px) 36px 40px;
  border-radius: var(--raio); background: var(--marinho); color: #fff;
}
.chamada::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 150px;
  background: var(--padrao) 0 0 / var(--padrao-meio);
  border-bottom-left-radius: 48px;
}
.chamada h3 { font-size: 1.5rem; color: #fff; }
.chamada p { margin-top: 8px; max-width: 40em; color: rgb(255 255 255 / 80%); }
.chamada .botao { flex: none; }

@media (max-width: 880px) {
  .chamada { flex-direction: column; align-items: flex-start; padding: 44px 24px 28px; }
  .chamada::after { top: 0; left: 0; bottom: auto; width: auto; height: 12px; border-radius: 0; }
}

/* ---------- Como atuamos ---------- */

.etapas {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin: 0; padding: 0; list-style: none;
}
.etapa { position: relative; padding-top: 28px; border-top: 2px solid var(--linha); }
.etapa::before { content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 2px; background: var(--ciano); }
.etapa__numero {
  display: block; font-size: 2.75rem; font-weight: 600; line-height: 1;
  letter-spacing: -.02em; color: var(--indigo); font-variant-numeric: tabular-nums;
}
.etapa h3 { margin-top: 18px; font-size: 1.25rem; }
.etapa p { margin-top: 10px; font-size: 1rem; color: var(--texto-2); }

@media (max-width: 1000px) { .etapas { grid-template-columns: repeat(2, 1fr); gap: 44px 32px; } }
@media (max-width: 560px)  { .etapas { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- A empresa ---------- */

.empresa { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.empresa__texto > p:not(.sobretitulo) { margin-top: 20px; font-size: 1.125rem; color: var(--texto-2); }
.empresa__texto > h2 + p { margin-top: 24px; }

.valores {
  display: grid; gap: 30px; margin: 0; padding: clamp(28px, 4vw, 44px);
  list-style: none; border-radius: var(--raio-g); background: var(--fundo-2);
}
.secao--suave .valores { background: #fff; border: 1px solid var(--linha); }
.valor { padding-left: 22px; border-left: 3px solid var(--indigo); }
.valor h3 { font-size: 1.25rem; }
.valor p { margin-top: 6px; font-size: 1rem; color: var(--texto-2); }

@media (max-width: 880px) { .empresa { grid-template-columns: 1fr; } }

/* ---------- Contato ---------- */

.contato { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }

/* cartão inspirado no cartão de visita: faixa de cubos à esquerda, dados no índigo */
.contato__cartao {
  position: relative; overflow: hidden;
  padding: 40px 32px 40px calc(96px + 32px);
  border-radius: var(--raio-g); background: var(--indigo); color: rgb(255 255 255 / 90%);
}
.contato__cartao::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 96px;
  background: var(--padrao) 0 0 / var(--padrao-meio);
}
.contato__cartao h3 { margin-bottom: 30px; font-size: 1.5rem; color: #fff; }
.contato__lista { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.contato__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; overflow-wrap: anywhere; }
.contato__item > .icone { margin-top: 2px; color: var(--ciano); }
.contato__rotulo {
  display: block; margin-bottom: 2px;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / 66%);
}
.contato__item a { font-weight: 500; color: #fff; text-decoration: none; }
.contato__item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contato__item .contato__mapa { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--ciano-hover); font-weight: 600; } /* 5,42:1 no índigo */
.contato__mapa .icone { width: 18px; height: 18px; }

.formulario { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--linha); border-radius: var(--raio-g); background: #fff; }
.formulario h3 { font-size: 1.5rem; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 24px; }
.campo { display: grid; gap: 6px; align-content: start; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: .9375rem; font-weight: 600; color: var(--marinho); }
.campo label span { font-weight: 400; color: var(--texto-3); }

.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--texto);
  background: #fff; border: 1px solid var(--borda-entrada); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea { min-height: 136px; resize: vertical; }
.campo select {
  appearance: none; padding-right: 42px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e3192' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); opacity: 1; } /* 5,24:1: os exemplos também são informação */
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgb(46 49 146 / 18%);
}
.campo input:user-invalid, .campo textarea:user-invalid { border-color: #b3261e; }
.campo textarea[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: #b3261e; background: #fdf5f4; }

.campo-armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formulario { position: relative; }
.formulario__turnstile:not(:empty) { margin-top: 20px; }
.formulario__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.botao:disabled { opacity: .7; cursor: progress; }
.formulario__nota { margin-top: 16px; font-size: .875rem; color: var(--texto-3); }
.formulario__nota a { color: var(--indigo); text-underline-offset: 2px; }

.formulario__status { margin-top: 16px; padding: 12px 16px; border-left: 3px solid; border-radius: 4px 10px 10px 4px; font-size: .9375rem; }
.formulario__status:empty { display: none; }
.formulario__status a { color: inherit; font-weight: 600; text-underline-offset: 2px; overflow-wrap: anywhere; }
.formulario__status--sucesso { background: #e8f5ee; border-color: var(--whatsapp); color: #145c37; }
.formulario__status--erro    { background: #fdecea; border-color: #b3261e; color: #8c1d18; }
.formulario__status--aviso   { background: #fdf5e1; border-color: #e6be58; color: #5c4300; }

@media (max-width: 960px) { .contato { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .contato__cartao { padding: calc(64px + 28px) 24px 32px; }
  .contato__cartao::before { right: 0; bottom: auto; width: auto; height: 64px; }
  .campos { grid-template-columns: 1fr; }
  .formulario__acoes .botao { flex: 1 1 100%; }
}

/* ---------- Rodapé ---------- */

.rodape { background: var(--marinho); color: rgb(255 255 255 / 72%); font-size: .9375rem; }
.rodape::before { content: ""; display: block; height: 12px; background: var(--padrao) 0 0 / var(--padrao-meio); }
.rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; padding-block: 64px 48px; }
.rodape__marca img { width: auto; height: 46px; }
.rodape__marca p { max-width: 28em; margin-top: 20px; }
.rodape h2 { margin-bottom: 16px; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.rodape ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rodape a { color: rgb(255 255 255 / 86%); text-decoration: none; overflow-wrap: anywhere; }
.rodape a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 20px 28px; border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: .875rem; color: rgb(255 255 255 / 60%);
}

.rodape__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }

@media (max-width: 1000px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .rodape__base { padding-bottom: 96px; } /* espaço para o botão do WhatsApp */
}
@media (max-width: 560px) { .rodape__grade { grid-template-columns: 1fr; padding-top: 48px; } }

/* ---------- Onde atuamos ---------- */

.atuacao { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

.mapa { margin: 0; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-g); background: #fff; }
.mapa svg { width: 100%; height: auto; font-family: inherit; }
.mapa figcaption { margin-top: 10px; font-size: .8125rem; color: var(--texto-3); text-align: center; }
.mapa__terra { fill: #f3f4f8; }
.mapa__mar { fill: #dff1fb; }
.mapa__costa { fill: none; stroke: #8cc3e3; stroke-width: 1.5; stroke-linejoin: round; }
.mapa__oceano { font-size: 13px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; fill: #6aa3c8; }
.mapa__cidade { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; fill: #a3a7ba; }
.mapa__ponto circle { fill: var(--indigo); stroke: #fff; stroke-width: 3; }
.mapa__ponto text {
  font-size: 16px; font-weight: 600; fill: var(--marinho);
  paint-order: stroke; stroke: #f3f4f8; stroke-width: 5px; stroke-linejoin: round;
}
.mapa__ponto--sede circle { fill: var(--ciano); }
.mapa__ponto--sede .mapa__halo { fill: rgb(0 174 239 / 22%); stroke: none; }
.mapa__ponto--sede text { font-weight: 700; fill: var(--indigo); stroke: #dff1fb; }
.mapa__norte path { fill: var(--marinho); }
.mapa__norte text, .mapa__escala text { font-size: 13px; font-weight: 700; fill: var(--texto-2); }
.mapa__escala path { fill: none; stroke: var(--texto-2); stroke-width: 1.5; }

.locais { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.local {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 24px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
}
.local__icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--indigo); background: color-mix(in srgb, var(--indigo) 9%, white); }
.local__icone .icone { width: 26px; height: 26px; }
.local h3 { font-size: 1.25rem; }
.local__cidade { margin-top: 2px; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.local p:not(.local__cidade) { margin-top: 8px; font-size: 1rem; color: var(--texto-2); }

@media (max-width: 880px) {
  .atuacao { grid-template-columns: 1fr; }
}

/* ---------- Dúvidas frequentes ---------- */

.duvidas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.duvidas .cabeca-secao { position: sticky; top: calc(var(--cabecalho) + 32px); margin-bottom: 0; }
.duvidas .cabeca-secao a { color: var(--indigo); font-weight: 600; text-underline-offset: 3px; }

.perguntas { border-top: 1px solid var(--linha); }
.pergunta { border-bottom: 1px solid var(--linha); }
.pergunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--marinho);
  transition: color .2s;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary:hover { color: var(--indigo); }
.pergunta summary .icone {
  width: 32px; height: 32px; padding: 6px; border-radius: 50%;
  color: var(--indigo); background: color-mix(in srgb, var(--indigo) 8%, white);
  transition: transform .25s, background-color .2s, color .2s;
}
.pergunta[open] summary .icone { transform: rotate(45deg); color: #fff; background: var(--indigo); }
.pergunta__resposta { padding: 0 56px 24px 4px; color: var(--texto-2); }
.pergunta__resposta p + p, .pergunta__resposta p + ul { margin-top: 12px; }
.pergunta__resposta ul { margin: 0; padding-left: 1.2em; }
.pergunta__resposta li + li { margin-top: 6px; }
.pergunta__resposta strong { color: var(--texto); }

@media (max-width: 880px) {
  .duvidas { grid-template-columns: 1fr; }
  .duvidas .cabeca-secao { position: static; }
  .pergunta summary { font-size: 1.0625rem; }
  .pergunta__resposta { padding-right: 4px; }
}

/* ---------- Páginas de texto (política de privacidade) ---------- */

.pagina-topo { position: relative; isolation: isolate; overflow: hidden; background: var(--indigo); color: #fff; }
.pagina-topo .conteiner { padding-block: clamp(56px, 7vw, 88px); }
.pagina-topo .sobretitulo { color: rgb(255 255 255 / 88%); }
.pagina-topo h1 { margin-top: 18px; max-width: 18em; color: #fff; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -.01em; }
.pagina-topo p:not(.sobretitulo) { margin-top: 16px; max-width: 38em; font-size: 1.125rem; color: rgb(255 255 255 / 84%); }
.pagina-topo::after {
  content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(28vw, 360px);
  background: var(--padrao) 0 0 / var(--padrao-1x); border-bottom-left-radius: 96px;
}

.texto-legal { max-width: 46rem; padding-block: clamp(48px, 7vw, 88px); }
.texto-legal h2 { margin-top: 44px; font-size: 1.375rem; }
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal p, .texto-legal ul { margin-top: 14px; color: var(--texto-2); }
.texto-legal ul { padding-left: 1.2em; }
.texto-legal li + li { margin-top: 8px; }
.texto-legal strong { color: var(--texto); }
.texto-legal a { color: var(--indigo); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.texto-legal__data { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linha); font-size: .9375rem; }
/* resumo em outro idioma no fim da política (privacidade.html#english) */
.texto-legal__resumo { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--linha); }

/* acima de 880px os cubos ocupam a direita do topo: o texto para antes deles (contraste do texto branco) */
@media (min-width: 881px) {
  .pagina-topo h1 { max-width: min(18em, 100% - min(28vw, 360px) - 32px); }
  .pagina-topo p:not(.sobretitulo) { max-width: min(38em, 100% - min(28vw, 360px) - 32px); }
}
@media (max-width: 880px) {
  .pagina-topo::after { display: none; }
}

/* ---------- Simulador de importação ---------- */

.simulador { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
.simulador__form { display: grid; gap: 20px; }
.simulador__aviso {
  padding: 14px 18px; border-left: 3px solid var(--ciano); border-radius: 4px 10px 10px 4px;
  background: #fff; font-size: .9375rem; color: var(--texto-2);
}

.grupo { min-width: 0; margin: 0; padding: 26px 28px 28px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; }
.grupo legend {
  float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 20px;
  font-size: 1.1875rem; font-weight: 600; color: var(--marinho);
}
.grupo legend + * { clear: both; }
.grupo__num {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: .875rem; font-weight: 700; color: #fff; background: var(--indigo);
}
.grupo__ajuda { margin-bottom: 18px; font-size: .9375rem; color: var(--texto-2); }
.grupo__ajuda a, .campo__ajuda a { color: var(--indigo); font-weight: 600; text-underline-offset: 2px; }
.grupo .campos { margin-top: 0; }
.campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo__ajuda { margin-top: 12px; font-size: .875rem; color: var(--texto-3); }
.campos .campo__ajuda { margin-top: -8px; }
.campo__nome { font-size: .8125rem; color: var(--texto-3); }
.campo__link { justify-self: start; font-size: .8125rem; font-weight: 600; color: var(--indigo); text-underline-offset: 2px; }
.campo__marca {
  justify-self: start; padding: 2px 8px; border-radius: 6px;
  font-size: .75rem; font-weight: 600; line-height: 1.4; color: #5c4300; background: #fdf5e1;
}
.campo__marca[hidden] { display: none; }
.campo input[aria-invalid="true"] { border-color: #b3261e; background: #fdf5f4; }
/* motivo do erro junto ao campo (simulador): o texto e o prefixo "Erro:" não dependem só da cor */
.campo__erro { font-size: .8125rem; font-weight: 600; line-height: 1.4; color: #8c1d18; }
.campo__erro::before { content: "Erro: "; font-weight: 700; }
.campo__erro[hidden] { display: none; }
.botao-texto {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--indigo); text-decoration: underline; text-underline-offset: 2px;
}
.simulador-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* NCM do produto: campo de busca com lista de sugestões (combobox) e a NCM escolhida */
.ncm-campo { margin-bottom: 20px; }
.ncm-busca { position: relative; }
.ncm-busca > .icone { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.campo .ncm-busca input { padding-left: 44px; }
.ncm-campo__ajuda a { color: var(--indigo); font-weight: 600; text-underline-offset: 2px; white-space: nowrap; }
.ncm-campo__erro { color: #8c1d18; }
.ncm-lista {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  max-height: min(380px, 60vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--borda-campo); border-radius: 12px; box-shadow: var(--sombra);
}
.ncm-lista[hidden] { display: none; }
.ncm-opcao {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: .9375rem; line-height: 1.35;
}
.ncm-opcao + .ncm-opcao { margin-top: 2px; }
.ncm-opcao__codigo { font-weight: 700; color: var(--indigo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ncm-opcao__descricao { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--texto); }
.ncm-opcao__caminho {
  grid-column: 2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .8125rem; color: var(--texto-3);
}
.ncm-opcao:hover { background: var(--fundo-2); }
.ncm-opcao[aria-selected="true"] {
  background: color-mix(in srgb, var(--indigo) 9%, white); box-shadow: inset 3px 0 0 var(--indigo);
  outline: 2px solid transparent; /* aparece no modo de alto contraste */
}
.ncm-opcao[aria-selected="true"] .ncm-opcao__caminho { color: var(--texto-2); } /* texto-3 fica abaixo de 4,5:1 neste fundo */

.ncm-escolhida {
  margin-top: 12px; padding: 14px 16px; font-size: .9375rem;
  border: 1px solid color-mix(in srgb, var(--indigo) 20%, white); border-radius: 12px;
  background: color-mix(in srgb, var(--indigo) 4%, white);
}
.ncm-escolhida[hidden] { display: none; }
.ncm-escolhida__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ncm-escolhida__titulo { font-weight: 600; line-height: 1.4; color: var(--marinho); overflow-wrap: anywhere; }
.ncm-escolhida__codigo { color: var(--indigo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ncm-escolhida__limpar {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--borda-campo); border-radius: 999px; background: #fff; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--indigo); transition: border-color .15s;
}
.ncm-escolhida__limpar:hover { border-color: var(--indigo); }
.ncm-escolhida__limpar .icone { width: 16px; height: 16px; stroke-width: 2; }
.ncm-escolhida__caminho {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  margin-top: 4px; font-size: .8125rem; color: var(--texto-3);
}
.ncm-escolhida__caminho[hidden] { display: none; }
.ncm-escolhida__aliquotas { margin-top: 8px; font-weight: 600; color: var(--texto-2); }
.ncm-escolhida__fonte { margin-top: 10px; font-size: .8125rem; color: var(--texto-3); }
.ncm-escolhida__fonte:empty { display: none; }
.ncm-avisos { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.ncm-avisos[hidden] { display: none; }
.ncm-avisos li {
  padding: 8px 12px; border-left: 3px solid #e6be58; border-radius: 4px 8px 8px 4px;
  background: #fdf5e1; font-size: .8125rem; line-height: 1.45; color: #5c4300;
}
.ncm-avisos__mais { margin-top: 8px; }
.ncm-avisos__mais summary {
  display: inline-block; padding: 4px 0; cursor: pointer;
  font-size: .8125rem; font-weight: 600; color: var(--indigo); text-decoration: underline; text-underline-offset: 2px;
}
.ncm-avisos__mais .ncm-avisos { margin-top: 6px; max-height: 320px; overflow-y: auto; }

.entrada { position: relative; }
.entrada__prefixo, .entrada__sufixo {
  position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-size: .9375rem; font-weight: 600; color: var(--texto-3);
}
.entrada__prefixo { left: 14px; }
.entrada__sufixo { right: 14px; }
.campo .entrada input { padding-left: 54px; font-variant-numeric: tabular-nums; }
.campo .entrada--sufixo input { padding-left: 14px; padding-right: 34px; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao span {
  display: inline-block; padding: 9px 18px; border: 1px solid var(--borda-campo); border-radius: 999px;
  font-size: .9375rem; font-weight: 600; color: var(--texto-2); cursor: pointer; transition: all .15s;
}
.opcao span:hover { border-color: var(--indigo); color: var(--indigo); }
.opcao input:checked + span { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.opcao input:focus-visible + span { outline: 3px solid var(--anel-foco); outline-offset: 2px; }

.resultado {
  position: sticky; top: calc(var(--cabecalho) + 20px);
  padding: 28px; border: 1px solid var(--linha); border-radius: var(--raio-g); background: #fff;
  box-shadow: var(--sombra);
}
.resultado__total {
  margin-top: 10px; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.625rem); font-weight: 600; line-height: 1.1;
  color: var(--marinho); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.resultado__sub { margin-top: 6px; font-size: .9375rem; color: var(--texto-2); }

/* Composição do custo: barra empilhada. Paleta validada (scripts do dataviz) a partir das cores do logo. */
.composicao { position: relative; margin-top: 24px; }
.composicao__barra { display: flex; gap: 2px; height: 26px; }
.composicao__parte {
  flex: 1 1 0; min-width: 0; display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; cursor: default;
}
.composicao__parte:first-child { border-radius: 4px 0 0 4px; }
.composicao__parte:last-child { border-radius: 0 4px 4px 0; }
.composicao__parte:only-child { border-radius: 4px; }
.composicao__parte--1 { background: #4a57c4; }
.composicao__parte--2 { background: #0aa6e6; color: var(--marinho); }
.composicao__parte--3 { background: #a54e1e; }
.composicao__parte--4 { background: #d3a53f; color: var(--marinho); }
.composicao__dica {
  /* abaixo da barra, sobre a legenda (que repete os mesmos dados), e não sobre o total */
  position: absolute; top: calc(26px + 8px); transform: translateX(-50%); z-index: 2;
  display: grid; gap: 2px; padding: 8px 12px; border-radius: 8px; white-space: nowrap;
  background: var(--marinho); color: #fff; font-size: .8125rem;
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / 40%);
}
.composicao__dica span { color: rgb(255 255 255 / 80%); font-variant-numeric: tabular-nums; }
.composicao__dica[hidden] { display: none; }
.composicao__legenda { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.composicao__legenda li { display: grid; grid-template-columns: 12px 1fr auto 52px; align-items: center; gap: 10px; }
.composicao__cor { width: 12px; height: 12px; border-radius: 3px; }
.composicao__rotulo { color: var(--texto-2); }
.composicao__valor { font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.composicao__pct { text-align: right; font-size: .875rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }

.detalhe { width: 100%; margin-top: 24px; border-collapse: collapse; font-size: .9375rem; }
.detalhe caption {
  padding-bottom: 8px; text-align: left;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3);
}
.detalhe th { padding: 7px 12px 7px 0; text-align: left; font-weight: 400; color: var(--texto-2); }
.detalhe td { padding: 7px 0; text-align: right; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; white-space: nowrap; }
.detalhe tbody tr + tr { border-top: 1px solid var(--linha); }
.detalhe tbody tr:first-child th, .detalhe tbody tr:first-child td { color: var(--texto-3); font-weight: 400; }
.detalhe tfoot { border-top: 2px solid var(--marinho); }
.detalhe tfoot th { font-weight: 600; color: var(--marinho); }
.detalhe tfoot th span { display: block; font-size: .8125rem; font-weight: 400; color: var(--texto-3); }
.detalhe tfoot td { color: var(--marinho); font-size: 1.0625rem; }

.resultado__enviar { width: 100%; margin-top: 24px; }
.resultado__nota { margin-top: 12px; font-size: .8125rem; color: var(--texto-3); text-align: center; }

/* ações secundárias do resultado: WhatsApp, copiar link, PDF */
.resultado__acoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.acao {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 68px; padding: 10px 6px; border: 1px solid var(--linha); border-radius: 12px; background: #fff;
  font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.25; color: var(--indigo);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.acao .icone { width: 22px; height: 22px; }
.acao:hover { border-color: var(--indigo); background: var(--fundo-2); }
.acao--whatsapp .icone { color: var(--whatsapp); }
.acao--feito, .acao--feito:hover { border-color: var(--whatsapp); background: #e8f5ee; color: #145c37; }
.resultado__erro {
  margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  font-size: .8125rem; font-weight: 600; line-height: 1.4; color: #8c1d18; background: #fdf5f4;
}
.resultado__erro[hidden] { display: none; }
.resultado__link { display: grid; gap: 6px; margin-top: 12px; font-size: .8125rem; color: var(--texto-2); }
.resultado__link[hidden] { display: none; }
.resultado__link input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borda-entrada); border-radius: 10px;
  font: inherit; font-size: .8125rem; color: var(--texto);
}
.resultado__link input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgb(46 49 146 / 18%); }

/* relatório impresso: estas partes só aparecem no @media print, no fim do arquivo */
.relatorio-topo, .relatorio-dados, .relatorio-rodape { display: none; }

.resultado-fixo { display: none; }

.calculo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.calculo .cabeca-secao { margin-bottom: 0; }
.calculo__texto { padding-block: 0; }
.calculo__texto h3 { margin-top: 32px; font-size: 1.1875rem; }
.formulas { margin: 0; padding-left: 1.3em; color: var(--texto-2); }
.formulas li + li { margin-top: 10px; }

@media (max-width: 1100px) {
  .simulador { grid-template-columns: 1fr; }
  .resultado { position: static; }
  .resultado-fixo {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--marinho); color: #fff; box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 45%);
    transition: transform .25s;
  }
  .resultado-fixo--oculto { transform: translateY(110%); }
  .resultado-fixo__rotulo { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / 70%); }
  .resultado-fixo__total { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .resultado-fixo .botao { min-height: 42px; padding: 8px 18px; }
  .pagina-simulador .whatsapp-flutuante { display: none; }
  .pagina-simulador .rodape__base { padding-bottom: 96px; }
  /* a barra fixa cobre o pé da tela: o campo que recebe o foco para acima dela (como na cubagem) */
  html:has(> body.pagina-simulador) { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .calculo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grupo { padding: 22px 18px 24px; }
  .campos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resultado { padding: 22px 18px; }
  .resultado__enviar { padding-inline: 16px; font-size: .9375rem; }
}
@media (max-width: 560px) {
  .grupo .campos:not(.campos--3) { grid-template-columns: 1fr; }
  /* "Limpar NCM" vira só o ×, para a descrição da NCM usar a largura da caixa (o texto fica para leitores de tela) */
  .ncm-escolhida__topo { gap: 8px; }
  .ncm-escolhida__limpar { position: relative; justify-content: center; width: 40px; height: 40px; min-height: 0; margin: -6px -8px 0 0; padding: 0; }
  .ncm-escolhida__limpar .icone { width: 18px; height: 18px; }
  .ncm-escolhida__limpar-texto {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* ---------- Seção escura e cartões de ferramentas ---------- */

.secao--escura { background: var(--marinho); color: rgb(255 255 255 / 80%); }
.secao--escura .sobretitulo { color: rgb(255 255 255 / 88%); }
.secao--escura h2 { color: #fff; }
.secao--escura .cabeca-secao > p:not(.sobretitulo) { color: rgb(255 255 255 / 78%); }

.ferramentas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.ferramenta {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; align-items: start;
  align-content: start; /* na linha esticada, a sobra vai para baixo da descrição, não entre título e texto */
  padding: 22px 52px 22px 22px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.ferramenta__icone {
  grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  color: var(--indigo); background: color-mix(in srgb, var(--indigo) 9%, white);
}
.ferramenta h2, .ferramenta h3 { font-size: 1.125rem; }
.ferramenta p { grid-column: 2; font-size: .9375rem; color: var(--texto-2); }
/* o cartão inteiro é clicável: o ::after do link cobre o cartão */
.ferramenta__link { color: inherit; text-decoration: none; }
.ferramenta__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ferramenta__link:focus-visible { outline: none; }
.ferramenta:focus-within { outline: 3px solid var(--anel-foco); outline-offset: 3px; }
.ferramenta__seta {
  position: absolute; top: 50%; right: 18px; width: 20px; height: 20px;
  color: var(--texto-3); transform: translateY(-50%); transition: transform .2s, color .2s;
}
.ferramenta:hover { border-color: color-mix(in srgb, var(--indigo) 30%, white); box-shadow: var(--sombra); }
.ferramenta:hover .ferramenta__seta { color: var(--indigo); transform: translate(3px, -50%); }

.secao--escura .ferramenta { background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 12%); }
.secao--escura .ferramenta:hover { background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 28%); box-shadow: none; }
.secao--escura .ferramenta__icone { color: var(--ciano); background: rgb(0 174 239 / 14%); }
.secao--escura .ferramenta h3 { color: #fff; }
.chamada .chamada__titulo { font-size: 1.5rem; color: #fff; }
.ferramentas + .chamada { margin-top: 32px; }
.secao--escura .ferramenta p { color: rgb(255 255 255 / 74%); }
.secao--escura .ferramenta__seta { color: rgb(255 255 255 / 55%); }
.secao--escura .ferramenta:hover .ferramenta__seta { color: var(--ciano); }

/* ---------- WhatsApp flutuante ---------- */

.whatsapp-flutuante {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--whatsapp); color: #fff;
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 40%);
  transition: transform .2s;
}
.whatsapp-flutuante:hover { transform: scale(1.06); }
.whatsapp-flutuante .icone { width: 28px; height: 28px; stroke-width: 1.8; }

/* ---------- Página de erro ---------- */

.erro { min-height: calc(100svh - var(--cabecalho)); display: grid; align-items: center; }
.erro .hero__conteudo { padding-block: 96px; }
.erro__codigo { font-size: 1rem; }

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

/* ---------- Simulador impresso ou salvo em PDF (relatório em A4) ---------- */

@media print {
  /* página nomeada: o A4 e as margens valem só para o simulador, não para as outras páginas do site */
  @page simulador { size: A4; margin: 12mm 14mm 14mm; }

  .pagina-simulador { page: simulador; font-size: 9.5pt; line-height: 1.45; background: #fff; }
  .pagina-simulador .cabecalho, .pagina-simulador .rodape, .pagina-simulador .whatsapp-flutuante,
  .pagina-simulador .pular, .pagina-simulador .resultado-fixo, .pagina-simulador .pagina-topo,
  .pagina-simulador .simulador__form, .pagina-simulador .resultado__enviar, .pagina-simulador .resultado__acoes,
  .pagina-simulador .resultado__link, .pagina-simulador .resultado__nota, .pagina-simulador .composicao__dica,
  .pagina-simulador .resultado__erro { display: none !important; }
  .pagina-simulador * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pagina-simulador .conteiner { width: auto; margin: 0; }

  /* topo: logo, título e data */
  .pagina-simulador .relatorio-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 8mm;
    padding-bottom: 4mm; margin-bottom: 5mm; border-bottom: 2px solid var(--indigo);
  }
  .relatorio-topo img { width: auto; height: 13mm; }
  .relatorio-topo > div { text-align: right; }
  .relatorio-topo__titulo { font-size: 15pt; font-weight: 600; line-height: 1.2; color: var(--marinho); }
  .relatorio-topo__data { margin-top: 1mm; font-size: 8.5pt; color: var(--texto-3); }

  .pagina-simulador .secao { padding-block: 0; background: none; }
  .pagina-simulador .simulador { display: block; }

  /* dados informados */
  .pagina-simulador .relatorio-dados { display: block; break-inside: avoid; }
  .relatorio-dados h2, .pagina-simulador .detalhe caption {
    padding: 0 0 2mm; text-align: left;
    font-size: 8pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo);
  }
  .relatorio-tabela { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .relatorio-tabela th, .relatorio-tabela td { padding: 1.4mm 2.5mm; border: 1px solid var(--linha); text-align: left; vertical-align: top; }
  .relatorio-tabela th { width: 19%; font-weight: 400; color: var(--texto-2); background: var(--fundo-2); }
  .relatorio-tabela td { width: 31%; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
  .relatorio-tabela td[colspan] { font-weight: 400; }
  .relatorio-dados__cambio { margin-top: 1.5mm; font-size: 8pt; color: var(--texto-3); }
  .relatorio-invalido {
    margin-top: 2mm; padding: 1.5mm 2.5mm; border-left: 2px solid #b3261e; background: #fdf5f4;
    font-size: 8.5pt; font-weight: 600; color: #8c1d18;
  }
  .relatorio-dados__cambio[hidden], .relatorio-avisos[hidden], .relatorio-invalido[hidden] { display: none; }
  .relatorio-avisos { display: grid; gap: 1mm; margin: 2mm 0 0; padding: 0; list-style: none; }
  .relatorio-avisos li {
    padding: 1.2mm 2.5mm; border-left: 2px solid #e6be58; background: #fdf5e1;
    font-size: 8pt; line-height: 1.4; color: #5c4300;
  }

  /* resultado em duas colunas: total e composição | tributos */
  .pagina-simulador .resultado {
    position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 8mm; align-items: start;
    margin-top: 5mm; padding: 5mm 6mm; border: 1px solid var(--linha); border-radius: 3mm; box-shadow: none;
    break-inside: avoid;
  }
  .pagina-simulador .resultado > * { grid-column: 1; }
  .pagina-simulador .resultado .detalhe { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; font-size: 9pt; }
  .pagina-simulador .resultado .sobretitulo { font-size: 8pt; }
  .pagina-simulador .resultado__total { margin-top: 1.5mm; font-size: 22pt; }
  .pagina-simulador .resultado__sub { margin-top: 1mm; font-size: 9pt; }
  .pagina-simulador .composicao { margin-top: 4mm; }
  .pagina-simulador .composicao__barra { height: 5.5mm; }
  .pagina-simulador .composicao__parte { font-size: 7.5pt; }
  .pagina-simulador .composicao__legenda { gap: 1.2mm; margin-top: 3mm; font-size: 9pt; }
  .pagina-simulador .composicao__legenda li { grid-template-columns: 3mm 1fr auto 12mm; gap: 2.5mm; }
  .pagina-simulador .composicao__cor { width: 3mm; height: 3mm; }
  .pagina-simulador .detalhe th, .pagina-simulador .detalhe td { padding-block: 1.2mm; }
  .pagina-simulador .detalhe tfoot td { font-size: 10pt; }

  /* como calculamos, resumido */
  .pagina-simulador #como-calculamos { margin-top: 5mm; padding-top: 4mm; border-top: 1px solid var(--linha); break-inside: avoid; }
  .pagina-simulador .calculo { display: block; }
  .pagina-simulador .calculo .cabeca-secao { max-width: none; margin-bottom: 2mm; }
  .pagina-simulador .calculo .sobretitulo { font-size: 8pt; }
  .pagina-simulador .calculo .sobretitulo::before { width: 6mm; height: 2px; }
  .pagina-simulador .calculo h2 { display: none; }
  .pagina-simulador .calculo__texto { max-width: none; font-size: 8.5pt; line-height: 1.4; }
  .pagina-simulador .calculo__texto h3 { margin-top: 2.5mm; font-size: 9pt; }
  .pagina-simulador .calculo__texto p, .pagina-simulador .calculo__texto ul { margin-top: 1.5mm; }
  .pagina-simulador .calculo__texto li + li, .pagina-simulador .formulas li + li { margin-top: .6mm; }
  .pagina-simulador .calculo__texto a { font-weight: 400; color: inherit; text-decoration: none; }

  /* aviso, link da simulação e contatos */
  .pagina-simulador .relatorio-rodape { display: block; margin-top: 5mm; break-inside: avoid; }
  .relatorio-rodape__aviso { padding: 2.5mm 3.5mm; border-left: 2px solid var(--ciano); background: var(--fundo-2); font-size: 8.5pt; color: var(--texto-2); }
  .relatorio-rodape__aviso strong { color: var(--marinho); }
  .relatorio-rodape__link { margin-top: 2mm; font-size: 7.5pt; color: var(--texto-3); overflow-wrap: anywhere; }
  .relatorio-rodape__contatos {
    margin-top: 4mm; padding-top: 3mm; border-top: 2px solid var(--indigo);
    font-size: 8.5pt; color: var(--texto-2);
  }
  .relatorio-rodape__contatos strong { color: var(--indigo); }
}