/* 1. Fonte ------------------------------------------------------------- */
@font-face {
  font-family: "Inter N1";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  size-adjust: 96.85%;
  src: url("/assets/fonts/inter-latin-opsz-normal.woff2") format("woff2-variations");
  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;
}
@font-face {
  font-family: "Inter N1";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  size-adjust: 96.85%;
  src: url("/assets/fonts/inter-latin-ext-opsz-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. Tokens ------------------------------------------------------------ */
:root {
  color-scheme: light;

  --petroleo: #1f5659;          /* 8,29:1 sobre branco */
  --petroleo-hover: #225d61;
  --petroleo-ativo: #1d5053;
  --esmeralda: #42bd8e;         /* 3,51:1 sobre petróleo: só gráfico */
  --texto: #1e3638;             /* 12,81:1 branco · 11,87:1 sobre --fundo-2 */
  --texto-2: #546a67;           /* 5,78:1 branco · 5,35:1 sobre --fundo-2 */
  --fundo: #ffffff;
  --fundo-2: #f3f7f7;
  --fundo-3: #f9fbfb;           /* painéis da navegação; o vidro da barra usa o mesmo tom */
  --pressionado: #e5edec;       /* cartão pressionado */
  --linha: #d9e2e1;             /* fio de 1px */
  --borda-campo: #7f9290;       /* 3,27:1 branco · 3,03:1 sobre --fundo-2: contorno de campo visível (WCAG 1.4.11) */
  --erro: #d70015;              /* só estado de erro do formulário, sempre com ícone e texto (4,99:1 sobre --fundo-2) */
  --whatsapp: #01b16d;
  --whatsapp-hover: #20ba5c;
  /* sobre o petróleo */
  --sobre-cor: #ffffff;         /* 8,29:1 */
  --sobre-cor-2: #cadcd9;       /* 5,82:1 */

  --fonte: -apple-system, BlinkMacSystemFont, "Inter N1", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h1: 5rem;       --h1-lh: 1.1;        --h1-ls: -0.02em;    /* 80/88 */
  --h2: 3rem;       --h2-lh: 1.125;      --h2-ls: -0.015em;   /* 48/54 */
  --h3: 1.75rem;    --h3-lh: 1.142857;   --h3-ls: -0.008em;   /* 28/32: cartões, formulário */
  --h4: 1.5rem;     --h4-lh: 1.166667;   --h4-ls: -0.005em;   /* 24/28: ficha, rede, painel */
  --sub: 1.3125rem; --sub-lh: 1.5625rem; --sub-ls: -0.005em;  /* 21/25: número do WhatsApp no contato */
  --int: 1.3125rem; --int-lh: 1.8125rem; --int-ls: -0.005em;  /* 21/29: introduções */
  --cor: 1.0625rem; --cor-lh: 1.5625rem; --cor-ls: -0.005em;  --cor-lh-justa: 1.3125rem;  /* 17/25 (21) */
  --not: 0.875rem;  --not-lh: 1.25rem;   --not-ls: -0.005em;  --not-lh-justa: 1.125rem;   /* 14/20 (18) */
  --leg: 0.75rem;   --leg-lh: 1rem;                                                        /* 12/16 */
  --menu: 1.75rem;  --menu-lh: 1.142857; --menu-ls: -0.008em; /* 28/32: menu do celular */

  /* Espaço (múltiplos de 4 px) */
  --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.25rem; --e6: 1.5rem;
  --e7: 2rem; --e8: 2.5rem; --e9: 3rem; --e10: 4rem;
  --secao: 6rem;              /* 96: respiro vertical de toda seção */
  --cabeca-conteudo: 3.5rem;  /* 56: do cabeçalho da seção ao conteúdo */
  --titulo-intro: 1rem;       /* 16: do h2 à introdução, quando empilhados */
  --calha: 24px;              /* calha da grade (12 colunas) */
  --cartao-pad: 2.5rem;       /* 40 */
  --ficha-pad: 1.25rem;       /* 20 */

  --coluna: 980px;

  --topo-a: 60px;
  --logo-a: 36px;

  /* Forma: só três raios */
  --raio-cartao: 18px;
  --raio-campo: 12px;
  --raio-pilula: 980px;

  /* Ícones de interface: o mesmo espaço entre o texto e o ícone em toda parte */
  --icone-gap: 0.35em;

  /* Movimento: curto, só cor e opacidade */
  --curva: cubic-bezier(0.4, 0, 0.6, 1);
  --rapido: 0.2s;            /* cor e opacidade */
  --medio: 0.24s;            /* giro da divisa */

  --painel: 0.24s;
  --painel-item: 0.24s;
  --painel-item-sai: 0.12s;
  --painel-atraso: 0.04s;
  --painel-passo: 0.02s;
  --painel-cortina-atraso: 0s;
  --menu-cortina: 0.32s;
  --menu-item: 0.24s;
  --menu-item-sai: 0.1s;
  --menu-atraso: 0.12s;
  --menu-passo: 0.03s;

  --revelar-dist: 30px;                                        /* deslocamento inicial */
  --revelar-op: 0.9s;                                          /* opacidade 0 → 1 */
  --revelar-mov: 0.65s;                                        /* deslocamento → 0 */
  --revelar-curva: cubic-bezier(0.455, 0.03, 0.515, 0.955);    /* ease-in-out quadrática */

  --desenho: 0.7s;
  --desenho-atraso: 0.65s;
  --desenho-curva: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media (max-width: 66.75em) {
  :root {
    --h1: 4rem;       --h1-lh: 1.09375;    --h1-ls: -0.018em;   /* 64/70 */
    --h2: 2.5rem;                          --h2-ls: -0.012em;   /* 40/45 */
    --h3: 1.5rem;     --h3-lh: 1.166667;   --h3-ls: -0.005em;   /* 24/28 */
    --h4: 1.3125rem;  --h4-lh: 1.190476;                        /* 21/25 */
    --secao: 5rem;
    --cabeca-conteudo: 3rem;
    --cartao-pad: 2rem;
    --ficha-pad: 1.125rem;
    --coluna: 692px;
  }
}

@media (max-width: 45.875em) {
  :root {
    --h1: 3rem;       --h1-lh: 1.125;      --h1-ls: -0.015em;   /* 48/54 */
    --h2: 2rem;                            --h2-ls: -0.01em;    /* 32/36 */
    --sub: 1.1875rem; --sub-lh: 1.4375rem;                      /* 19/23 */
    --int: 1.1875rem; --int-lh: 1.6875rem;                      /* 19/27 */
    --secao: 4rem;
    --cabeca-conteudo: 2.5rem;
    --titulo-intro: 0.75rem;
    --calha: 16px;
    --cartao-pad: 1.75rem;
    --ficha-pad: 1rem;
    --coluna: 87.5%;
  }
}


/* 3. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-tap-highlight-color: transparent;   /* sem o realce azul do toque no Android */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--topo-a);
}

main :is(a, button, input, select, textarea, [tabindex], [id]):not(section),
.rodape :is(a, button) { scroll-margin-top: 16px; }

@media (max-width: 833px) {
  html { scroll-padding-bottom: 88px; }
}

body {
  margin: 0;
  padding-top: var(--topo-a);   /* o lugar da barra fixa */
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--cor);
  line-height: var(--cor-lh);
  letter-spacing: var(--cor-ls);
  font-weight: 400;
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;   /* rede de segurança: só age se uma palavra não couber na linha */
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
img, svg { display: block; }
input, button, textarea, select { font: inherit; letter-spacing: inherit; color: inherit; }
abbr[title] { text-decoration: none; cursor: help; }
a { color: inherit; }
[hidden] { display: none !important; }

/* Títulos equilibrados; parágrafos e introduções só evitam a palavra órfã */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, address, .t-int { text-wrap: pretty; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

/* Anel de foco único do site: 2px sólido, petróleo (branco sobre petróleo) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 3px; }

.pular {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 20px; border-radius: var(--raio-pilula);
  background: var(--petroleo); color: #fff; text-decoration: none;
}
.pular:focus-visible { top: 8px; outline-color: var(--petroleo); }


/* 4. Tipografia ---------------------------------------------------------- */
.t-h1 {
  font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: var(--h1-ls);
  font-weight: 600; max-inline-size: 12em;
}
.t-h2 {
  font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: var(--h2-ls);
  font-weight: 600; max-inline-size: 18em;
}
.t-h3 {
  font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: var(--h3-ls);
  font-weight: 600;
}
.t-h4 {
  font-size: var(--h4); line-height: var(--h4-lh); letter-spacing: var(--h4-ls);
  font-weight: 600;
}
.t-int {
  font-size: var(--int); line-height: var(--int-lh); letter-spacing: var(--int-ls);
  font-weight: 400; max-inline-size: 28em;
}
.t-not { font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls); }

.rotulo {
  font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls);
  font-weight: 600; color: var(--texto-2);
}

.t-2 { color: var(--texto-2); }
.t-2 strong { color: var(--texto); font-weight: inherit; }


/* 5. Layout -------------------------------------------------------------- */
.coluna { width: var(--coluna); margin-inline: auto; }

.secao { padding-block: var(--secao); }
.secao--cinza { background: var(--fundo-2); }
.secao--cor { background: var(--petroleo); color: var(--sobre-cor); }

.secao-cabeca {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha); align-items: baseline;
  margin-bottom: var(--cabeca-conteudo);
}
.secao-cabeca .t-h2 { grid-column: 1 / span 7; padding-right: var(--e9); } /* respiro mínimo até a introdução */
.secao-cabeca .t-int { grid-column: 8 / span 5; }

.secao-cabeca--empilhada { display: block; }
.secao-cabeca--empilhada .t-h2 { padding-right: 0; max-inline-size: none; }
.secao-cabeca--empilhada .t-int { margin-top: var(--titulo-intro); }
@media (max-width: 1068px) {
  .secao-cabeca { display: block; }
  .secao-cabeca .t-h2 { padding-right: 0; }
  .secao-cabeca .t-int { margin-top: var(--titulo-intro); }
}


/* 6. Botões, links, ícones ------------------------------------------------ */

.botao, .form-success .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 11px 21px;
  border: 1px solid var(--petroleo); border-radius: var(--raio-pilula);
  background: var(--petroleo); color: #fff;
  font-size: var(--cor); line-height: var(--cor-lh-justa); letter-spacing: var(--cor-ls);
  font-weight: 400; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.botao:hover, .form-success .btn:hover { background: var(--petroleo-hover); border-color: var(--petroleo-hover); }
.botao:active, .form-success .btn:active { background: var(--petroleo-ativo); border-color: var(--petroleo-ativo); }

.botao--contorno { background: transparent; color: var(--petroleo); }
.botao--contorno:hover { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.botao--contorno:active { background: var(--petroleo-ativo); border-color: var(--petroleo-ativo); color: #fff; }

/* Link com divisa ("Saiba mais ›") ou seta externa: petróleo, sublinha no hover */
.link {
  color: var(--petroleo); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--icone-gap);
  border-radius: var(--raio-campo);   /* o anel de foco acompanha os outros */
}
.link:hover .link-texto { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
/* Divisa com o peso do texto vizinho (400): traço de ~1,5 px a 17 px */
.divisa {
  width: 0.45em; height: 0.75em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  transform: translateY(0.02em);
}
.seta-externa {
  width: 0.62em; height: 0.62em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}


/* 7. Barra, painel "Serviços" e menu do celular ------------------------ */

.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--topo-a);
}

.topo::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1;
  clip-path: inset(0 0 40px 0);
  background: rgba(255, 255, 255, 0.92);
  transition: background-color var(--painel) var(--curva);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topo::before {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.painel-aberto .topo::before { background: var(--fundo-3); }

.topo-barra {
  height: 100%;
  display: flex; align-items: center;
}

@media (min-width: 834px) {
  .topo-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .topo-logo { justify-self: start; }
  .topo-nav { justify-self: center; }
  .topo-cta { justify-self: end; }
  /* sem lugar para os três grupos (espaçamento de texto aumentado): links à direita */
  .cta-sem-lugar .topo-barra { display: flex; }
}

.topo-logo {
  display: flex; flex: none; align-items: center; min-height: 44px;
  margin-right: auto; border-radius: var(--raio-campo);
}

.topo-logo img { height: var(--logo-a); width: auto; }
.topo-logo:focus-visible { outline-offset: 4px; }

.topo-nav { display: flex; align-items: center; gap: var(--e5); }
.topo-links { display: flex; align-items: center; gap: var(--e1); }

.topo-link {
  display: inline-flex; align-items: center; gap: var(--icone-gap);
  min-height: 44px; padding: 0 10px;
  border: 0; background: none; cursor: pointer;
  color: var(--texto); text-decoration: none; white-space: nowrap;
  font-size: var(--not); line-height: 1; letter-spacing: var(--not-ls);
  border-radius: var(--raio-campo);
  transition: color var(--rapido) var(--curva);
}
.topo-link:hover, .topo-menu-botao[aria-expanded="true"] { color: var(--petroleo); }
.topo-link:focus-visible { outline-offset: -4px; }

.chevron-baixo {
  width: 10px; height: 6px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--medio) var(--curva);
}
.topo-menu.aberto .chevron-baixo { transform: rotate(180deg); }

/* só opacidade e transform: animam na GPU, sem redesenhar a página a cada quadro */
.topo-painel {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--fundo-3);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--painel) var(--curva), transform var(--painel) var(--curva), visibility 0s linear var(--painel);
}
.topo-menu.aberto .topo-painel {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--painel) var(--curva), transform var(--painel) var(--curva), visibility 0s;
}
.painel-lista li {
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--painel-item-sai) var(--curva), transform var(--painel-item-sai) var(--curva);
}
.painel-lista li:nth-child(2) { --i: 1; }
.painel-lista li:nth-child(3) { --i: 2; }
.painel-lista li:nth-child(4) { --i: 3; }
.topo-menu.aberto .painel-lista li {
  opacity: 1; transform: none;
  transition-duration: var(--painel-item);
  transition-delay: calc(var(--painel-atraso) + var(--i, 0) * var(--painel-passo));
}
/* sem JavaScript o painel abre por hover e foco */
html:not(.js) .topo-menu:hover .topo-painel,
html:not(.js) .topo-menu:focus-within .topo-painel { visibility: visible; opacity: 1; transform: none; }
html:not(.js) .painel-lista li { opacity: 1; transform: none; }

.painel-cortina { display: none; }
@media (min-width: 834px) {
  .painel-cortina {
    display: block; position: fixed; inset: 0; z-index: -2;
    background: rgba(217, 226, 225, 0.6);
    opacity: 0; visibility: hidden;
    transition: opacity var(--painel) var(--curva) var(--painel-cortina-atraso), visibility 0s linear calc(var(--painel) + var(--painel-cortina-atraso));
  }
  .painel-aberto .painel-cortina {
    opacity: 1; visibility: visible;
    transition: opacity var(--painel) var(--curva) var(--painel-cortina-atraso), visibility 0s;
  }
}

.painel-lista {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha); row-gap: var(--e2);
  padding: var(--e7) 0 var(--e9);
}
/* dois por linha, na mesma ordem e no mesmo eixo dos cartões de serviço */
.painel-lista li:nth-child(odd) { grid-column: 1 / span 6; }
.painel-lista li:nth-child(even) { grid-column: 8 / span 5; }
.painel-item {
  display: flex; flex-direction: column; gap: 2px;
  padding-block: var(--e2); border-radius: var(--raio-campo);
  text-decoration: none; color: var(--texto);
}
.painel-nome {
  font-size: var(--h4); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); font-weight: 600;
  transition: color var(--rapido) var(--curva);
}
/* a mesma medida e quebra equilibrada nas quatro descrições */
.painel-desc {
  max-inline-size: 26em; text-wrap: balance;
  font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls); color: var(--texto-2);
}
.painel-item:hover .painel-nome { color: var(--petroleo); }
.painel-item:focus-visible { outline-offset: 4px; }
@media (max-width: 1068px) {
  /* telas médias: metades da coluna, para os nomes caberem numa linha */
  .painel-lista li:nth-child(even) { grid-column: 7 / span 6; }
}

.topo-cta { flex: none; }

.sistema-sem-lugar .topo-sistema { display: none; }
.cta-sem-lugar .topo-cta { display: none; }
.pilula-nav {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 15px; margin-left: var(--e6);
  color: #fff; text-decoration: none; white-space: nowrap;
  font-size: var(--not); line-height: var(--not-lh-justa); letter-spacing: var(--not-ls);
}
.pilula-nav::before {
  content: ""; position: absolute; inset: 6px 0; z-index: -1;
  border: 1px solid var(--petroleo); border-radius: var(--raio-pilula);
  background: var(--petroleo);
  transition: background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.pilula-nav:hover::before { background: var(--petroleo-hover); border-color: var(--petroleo-hover); }
.pilula-nav:active::before { background: var(--petroleo-ativo); border-color: var(--petroleo-ativo); }
.pilula-nav:focus-visible { outline: none; }
.pilula-nav:focus-visible::before { outline: 2px solid var(--petroleo); outline-offset: 2px; }

@media (min-width: 834px) and (max-width: 1068px) {
  :root { --logo-a: 30px; }   /* a mesma altura do celular: sobra espaço para o logotipo ficar sozinho */
  .topo-barra { grid-template-columns: auto minmax(0, 1fr) auto; }
  .topo-nav { justify-self: end; gap: 16px; }
  .topo-link { padding-inline: 8px; }
  .pilula-nav { margin-left: 32px; }
}

.topo-hamburguer {
  display: none; flex: none;   /* nunca encolhe: o alvo é sempre 44 x 44 */
  width: 44px; height: 44px; margin-right: -13px; padding: 0; /* traço alinhado à margem da coluna */
  border: 0; background: none; cursor: pointer; color: var(--texto);
  border-radius: var(--raio-campo);
  align-items: center; justify-content: center;
}

.topo-hamburguer svg { width: 18px; height: 18px; }
.topo-hamburguer .linha { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.topo-hamburguer:focus-visible { outline-offset: -4px; }

.menu-movel {
  position: fixed; left: 0; right: 0; top: var(--topo-a); bottom: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fundo-3);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--menu-cortina) var(--curva);
}
.menu-movel.visivel { clip-path: inset(0 0 0 0); }

.menu-movel .entra {
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--menu-item-sai) var(--curva), transform var(--menu-item-sai) var(--curva);
}
.menu-movel.visivel .entra {
  opacity: 1; transform: none;
  transition-duration: var(--menu-item);
  transition-delay: calc(var(--menu-atraso) + var(--i, 0) * var(--menu-passo));
}
.menu-movel-conteudo { padding: var(--e3) 0 var(--e10); }
.menu-movel-rotulo { padding-block: var(--e2) var(--e1); }
.menu-movel-lista a {
  display: flex; align-items: center; gap: var(--icone-gap);
  min-height: 48px; padding-block: 6px;
  color: var(--texto); text-decoration: none; border-radius: var(--raio-campo);
  font-size: var(--menu); line-height: var(--menu-lh); letter-spacing: var(--menu-ls); font-weight: 600;
  transition: color var(--rapido) var(--curva);
}
.menu-movel-lista--servicos a { flex-direction: column; align-items: flex-start; gap: 2px; padding-block: var(--e2); }
.menu-movel-desc {
  max-inline-size: 26em; text-wrap: balance;
  font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls); font-weight: 400;
  color: var(--texto-2);
}
.menu-movel-lista a:hover { color: var(--petroleo); }
.menu-movel-lista a:hover .menu-movel-desc { color: var(--texto-2); }
/* o anel não encosta na primeira letra */
.menu-movel-lista a:focus-visible { outline-offset: 4px; }
.menu-movel-lista + .menu-movel-lista { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linha); }
.menu-movel-lista--util a {
  min-height: 44px;
  font-size: var(--cor); line-height: var(--cor-lh-justa); letter-spacing: var(--cor-ls); font-weight: 400;
}
/* ações na largura do rótulo, como na abertura: empilhadas até 480 px */
.menu-movel-acoes { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e7); }
@media (max-width: 480px) {
  .menu-movel-acoes { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 833px) {
  :root { --logo-a: 32px; }
  .topo-nav { display: none; }
  .topo-hamburguer { display: inline-flex; }

  .pilula-nav {
    margin: 0 var(--e2) 0 16px; padding: 0 11px;
    font-size: var(--leg); line-height: 1rem; letter-spacing: 0;
  }
  .pilula-nav::before { inset: 9px 0; }

  .topo-cta { transition: opacity var(--rapido) var(--curva), visibility 0s; }
  .menu-aberto .topo-cta { opacity: 0; visibility: hidden; transition: opacity var(--rapido) var(--curva), visibility 0s linear var(--rapido); }
  /* sem JavaScript não há menu: o botão some e os links continuam no rodapé */
  html:not(.js) .topo-hamburguer { display: none; }
}
/* abaixo de 390 px: logotipo de 30 px, para a pílula caber até em 360 px */
@media (max-width: 389px) {
  :root { --logo-a: 30px; }
}

@media (max-width: 319px) {
  html:not(.js) .topo-cta { display: none; }
}

html.menu-aberto { overflow: hidden; }
.menu-aberto .topo::before { background: var(--fundo-3); }


/* 8. Abertura ------------------------------------------------------------ */

.abertura { padding-block: calc(var(--secao) + 8px) var(--secao); }
.abertura-grade {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha); align-items: end;
}
.abertura-titulo { grid-column: 1 / span 7; }
.abertura-texto { grid-column: 8 / span 5; padding-bottom: 16px; }

.abertura-grade--foto { align-items: center; }
.abertura-grade--foto .abertura-titulo { grid-column: 1 / span 6; grid-row: 1; align-self: end; }
.abertura-grade--foto .abertura-texto {
  grid-column: 1 / span 6; grid-row: 2; align-self: start;
  padding-bottom: 0; margin-top: var(--e6);
}
.mosaico-marca {
  grid-column: 7 / span 6; grid-row: 1 / span 2;
  display: block; width: 100%; height: auto; aspect-ratio: 133 / 132;
}
.mm-junta { fill: none; stroke: var(--fundo); stroke-width: 1.4; stroke-linejoin: round; }
.abertura-acoes {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  margin-top: var(--e7);
}

/* Imagens: cantos de 18 px, como os cartões */
.abertura-foto { margin: var(--e10) auto 0; }
.abertura-foto img,
.fotos-par img {
  display: block; width: 100%; height: auto;
  object-fit: cover; border-radius: var(--raio-cartao);
  background: var(--fundo-2);
}
.abertura-foto img { aspect-ratio: 16 / 9; }
.fotos-par {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--calha);
  margin-bottom: var(--cabeca-conteudo);
}
.fotos-par figure { margin: 0; }
.fotos-par img { aspect-ratio: 3 / 2; }

@media (max-width: 1068px) {
  .abertura-grade { display: block; }
  .abertura-texto { padding-bottom: 0; margin-top: var(--e6); }
  .abertura .t-int { max-inline-size: 30em; }
  .abertura-grade--foto { display: grid; }
  .abertura-grade--foto .abertura-titulo,
  .abertura-grade--foto .abertura-texto { grid-column: 1 / span 7; }
  .mosaico-marca { grid-column: 8 / span 5; }
}
@media (max-width: 734px) {
  .abertura { padding-top: var(--e9); }
  .abertura-texto { margin-top: var(--e5); }
  .abertura-foto { margin-top: var(--e8); }
  .abertura-foto img { aspect-ratio: 4 / 3; object-position: 30% 50%; }
  .abertura-grade--foto { display: block; }
  .abertura-grade--foto .abertura-texto { margin-top: var(--e5); }
  .mosaico-marca { margin-top: var(--e8); }
  .fotos-par { grid-template-columns: 1fr; gap: var(--e4); }
}

@media (max-width: 480px) {
  .abertura-acoes { flex-direction: column; align-items: flex-start; }
}


/* 9. Serviços ----------------------------------------------------------- */

.cartoes {
  display: grid; gap: var(--calha);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* O cartão inteiro é o link: alvo grande; nome acessível = título, descrição = texto */
.cartoes > li { display: flex; min-width: 0; }
.cartao {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: var(--cartao-pad);
  background: var(--fundo); border-radius: var(--raio-cartao);
  color: inherit; text-decoration: none;
  transition: background-color var(--rapido) var(--curva);
}

.cartao :is(h3, p) { overflow-wrap: anywhere; }
.cartao p { margin-top: var(--e3); max-inline-size: 30em; }
/* "Saiba mais" sempre no pé do cartão: alinhado entre cartões da mesma linha */
.cartao-mais { margin-top: auto; padding-top: var(--e7); align-self: flex-start; }
.cartao:hover .link-texto { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.cartao:active { background: var(--pressionado); }

.cartao-icone { display: flex; align-items: center; height: 56px; margin-bottom: var(--e4); }
.cartao-glifo { display: block; width: 44px; height: 44px; color: var(--petroleo); --i-traco: 1.15; }  /* traço de 2,5 px na tela */

@supports (grid-template-rows: subgrid) {
  .cartoes { row-gap: 0; }
  .cartoes > li {
    display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
    padding-bottom: var(--calha);
  }
  .cartao { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .cartao-mais { margin-top: 0; align-self: end; }
  .cartoes { margin-bottom: calc(-1 * var(--calha)); }
}

@media (max-width: 734px) {
  .cartoes { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .cartao-mais { padding-top: var(--e6); }
  @supports (grid-template-rows: subgrid) {
    .cartoes { row-gap: 0; margin-bottom: calc(-1 * var(--e3)); }
    .cartoes > li { padding-bottom: var(--e3); }
  }
}


/* 10. Ficha técnica e razões ------------------------------------------- */

.ficha li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha); align-items: baseline;
  padding-block: var(--ficha-pad);
  border-top: 1px solid var(--linha);
}
.ficha-nome {
  grid-column: 1 / span 7;
  font-size: var(--h4); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); font-weight: 600;
}
.ficha p { grid-column: 8 / span 5; color: var(--texto-2); }

.razoes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--calha); row-gap: var(--e6);
}
.razoes li { max-inline-size: 22em; color: var(--texto-2); }
.razoes strong { color: var(--texto); font-weight: 600; }

@media (max-width: 1068px) {
  /* telas médias: nome | descrição em metades da coluna */
  .ficha li { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-nome, .ficha p { grid-column: auto; }
}
@media (max-width: 734px) {
  .ficha li { display: block; }
  .ficha p { margin-top: var(--e1); }
  .razoes { grid-template-columns: minmax(0, 1fr); }
  .razoes li { max-inline-size: 30em; }
}


/* 11. Rede: a única seção de cor ---------------------------------------- */

.secao--cor { overflow-x: clip; }
.secao--cor .t-2 { color: var(--sobre-cor-2); }
.secao--cor .t-2 strong { color: var(--sobre-cor); }
.secao--cor :focus-visible { outline-color: #fff; }

.rede {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha); align-items: start;
}
.rede-texto { grid-column: 8 / span 5; grid-row: 1; }
.rede-mapa { grid-column: 1 / span 6; grid-row: 1; }

.rede-texto p { margin-top: var(--e2); color: var(--sobre-cor-2); max-inline-size: 30em; }

.rede-fatos { display: grid; gap: var(--e2); margin-top: var(--e5); }
.rede-sub { margin-top: var(--e8); }

.map-wrapper { position: relative; }
.rede-mapa svg { width: 100%; height: auto; max-width: 520px; }

@supports (height: round(down, 10.5px, 1px)) {
  .rede-mapa { container-type: inline-size; }
  .rede-mapa svg { height: round(down, calc(min(100cqw, 520px) * 460 / 450), 1px); }
}
#svg-map a { cursor: pointer; }
#svg-map a path {
  fill: var(--esmeralda); stroke: var(--petroleo); stroke-width: 1.2; stroke-linejoin: round;
  transition: fill var(--rapido) var(--curva);
}
#svg-map a path.circle { fill: transparent; stroke: none; }
#svg-map text { opacity: 0; pointer-events: none; }
#svg-map a:hover path:not(.circle),
#svg-map a.active path:not(.circle),
#svg-map a:focus-visible path:not(.circle) { fill: #fff; }

#svg-map a:focus { outline: none; }

#generated-tooltip.map-tooltip {
  background: #fff !important; color: var(--texto) !important;
  border: 0 !important; border-radius: var(--raio-campo) !important;
  box-shadow: none !important;
  padding: 8px 14px !important; min-width: 0 !important; margin-top: -12px !important;
  font-size: var(--not) !important; line-height: var(--not-lh); letter-spacing: var(--not-ls);
  white-space: nowrap;
  transition: opacity var(--rapido) ease, visibility 0s !important;
}
#generated-tooltip.map-tooltip::after {
  content: ""; position: absolute; top: 100%; left: var(--seta-x, 50%);
  width: 12px; height: 6px; margin-left: -6px;
  background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#generated-tooltip.map-tooltip.abaixo { transform: translate(-50%, 0) !important; margin-top: 12px !important; }
#generated-tooltip.map-tooltip.abaixo::after { top: auto; bottom: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#generated-tooltip.map-tooltip.oculta {
  visibility: hidden;
  transition: opacity var(--rapido) ease, visibility 0s linear var(--rapido) !important;
}
#generated-tooltip.map-tooltip strong { font-weight: 600; }

@media (max-width: 1068px) {
  .rede-texto { grid-column: 1 / span 6; }
  .rede-mapa { grid-column: 7 / span 6; align-self: center; }
  .rede-mapa svg { margin-left: auto; }
}
@media (max-width: 734px) {
  .rede { grid-template-columns: minmax(0, 1fr); row-gap: var(--e9); }
  .rede-texto, .rede-mapa { grid-column: auto; grid-row: auto; }
  .rede-mapa svg { margin-inline: auto; }
}


/* 12. Contato e formulário --------------------------------------------- */
.contato {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--calha); align-items: start;
}
.contato .formulario { grid-column: 1 / span 6; }
.contato-canais { grid-column: 8 / span 5; }

@media (min-width: 1069px) {
  .contato-canais { position: sticky; top: calc(var(--topo-a) + 16px); }
}

.canal { border-top: 1px solid var(--linha); padding-top: var(--e3); }
.canal + .canal { margin-top: var(--e4); }
.canal-rotulo { font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls); color: var(--texto-2); }
.canal .link {
  min-height: 44px;
  font-size: var(--sub); line-height: var(--sub-lh); letter-spacing: var(--sub-ls); font-weight: 400;
}
.canal .seta-externa { width: 0.5em; height: 0.5em; }
/* "Já é cliente? Acesso ao Sistema": link utilitário, no corpo de texto */
.canal--cliente .link { font-size: var(--cor); line-height: var(--cor-lh-justa); letter-spacing: var(--cor-ls); }
.canal--cliente .seta-externa { width: 0.62em; height: 0.62em; }

.formulario {
  padding: var(--cartao-pad);
  background: var(--fundo-2); border-radius: var(--raio-cartao);
}
.formulario-nota { margin-top: var(--e2); color: var(--texto-2); }

.campos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e5) var(--e4);
  margin-top: var(--e7);
}
.campo--largo { grid-column: 1 / -1; }
.campo label {
  display: block; margin-bottom: var(--e2);
  font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls); font-weight: 600;
}
.campo input {
  display: block; width: 100%; height: 3.25rem; padding: 0 16px;  /* 52 px */
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda-campo); border-radius: var(--raio-campo);
  font-size: var(--cor); line-height: var(--cor-lh-justa);
  transition: border-color var(--rapido) var(--curva);
  -moz-appearance: textfield;
}
.campo input::-webkit-outer-spin-button,
.campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo input::placeholder { color: var(--texto-2); opacity: 1; }
.campo input:hover { border-color: var(--texto-2); }
.campo input:focus-visible { border-color: var(--petroleo); outline-offset: 2px; }
.campo-dica { margin-top: var(--e2); font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls); color: var(--texto-2); }

.campo-erro {
  display: none; align-items: flex-start; gap: 6px;
  margin-top: var(--e2);
  font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls); color: var(--erro);
}
.campo-erro svg, .form-aviso svg { width: 16px; height: 16px; margin-top: 2px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.campo--erro input, .campo--erro input:hover, .campo--erro input:focus-visible { border-color: var(--erro); }  /* o anel mostra o foco; a borda, o erro */
.campo--erro .campo-erro { display: flex; }
html:not(.js) .campo:has(input:user-invalid) input { border-color: var(--erro); }
html:not(.js) .campo:has(input:user-invalid) .campo-erro { display: flex; }

.g-recaptcha { margin-top: var(--e6); }
.g-recaptcha:empty { margin-top: 0; }

.botao-enviar {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 3.25rem; margin-top: var(--e7); padding: 14px 24px;
  border: 0; border-radius: var(--raio-campo);
  background: var(--petroleo); color: #fff; cursor: pointer;
  font-size: var(--cor); line-height: var(--cor-lh-justa); letter-spacing: var(--cor-ls);
  transition: background-color var(--rapido) var(--curva);
}
.botao-enviar:hover { background: var(--petroleo-hover); }
.botao-enviar:active { background: var(--petroleo-ativo); }

.botao-enviar:disabled,
.botao-enviar[aria-disabled="true"] { background: var(--petroleo-ativo); cursor: progress; }

.form-aviso {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.form-aviso svg { display: none; }
.form-aviso--erro {
  position: static; width: auto; height: auto; margin: var(--e3) 0 0;
  overflow: visible; clip-path: none; white-space: normal;
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls); color: var(--erro);
}
.form-aviso--erro svg { display: block; }

.form-lgpd { margin-top: var(--e4); color: var(--texto-2); max-inline-size: 36em; }

.form-success { display: grid; justify-items: start; gap: var(--e3); }
.form-success h3 { font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); font-weight: 600; }
.form-success p { color: var(--texto-2); max-inline-size: 30em; }
.form-success .btn { margin-top: var(--e3); }

@media (max-width: 1068px) {
  .contato .formulario { grid-column: 1 / -1; }
  .campo--par { grid-column: auto; }

  .contato-canais {
    grid-column: 1 / -1; margin-top: var(--e9);
    display: grid; gap: var(--e4) var(--calha);
    grid-template-columns: repeat(auto-fit, minmax(max(14em, calc(50% - var(--calha))), 1fr));
  }
  .canal + .canal { margin-top: 0; }
  .canal--cliente { grid-column: 1 / -1; }
}
@media (max-width: 734px) {
  .contato .formulario {
    margin-inline: calc(-100% / 14);
    padding: var(--e8) calc(100% / 14);
    border-radius: 0;
  }
  .campos { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }

  .contato-canais { display: block; margin-top: var(--e8); }
  .canal {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    column-gap: var(--e4); padding-block: 2px 0;
  }
  .canal + .canal { margin-top: 0; }
  .canal .link { font-size: var(--cor); line-height: var(--cor-lh-justa); letter-spacing: var(--cor-ls); }
}


/* 13. Rodapé ------------------------------------------------------------ */
.rodape {
  background: var(--fundo-2);
  padding-top: var(--e10); padding-bottom: var(--e7);
  font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls);
  color: var(--texto-2);
}
.rodape-marca .topo-logo { display: inline-flex; margin-right: 0; }

.rodape-marca img { height: 48px; width: auto; }
/* no celular, a mesma altura do logotipo da barra (32 px; 30 abaixo de 390 px) */
@media (max-width: 833px) {
  .rodape-marca img { height: var(--logo-a); }
}
.rodape-marca p { margin-top: var(--e4); max-inline-size: 34em; }

.rodape-grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--calha); row-gap: var(--e7);
  margin-top: var(--e9);
}
.rodape h2 {
  font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls);
  font-weight: 600; color: var(--texto);
}
.rodape ul a {
  display: inline-flex; align-items: center; gap: var(--icone-gap); min-height: 28px;
  color: var(--texto); text-decoration: none; border-radius: var(--raio-campo);
}
.rodape a[href^="tel:"] { white-space: nowrap; }
.rodape ul a:hover { color: var(--petroleo); text-decoration: underline; text-underline-offset: 0.18em; }

.rodape h2 + ul, .rodape address { margin-top: 4px; }
.rodape address { line-height: 28px; }

@media (max-width: 833px), (pointer: coarse) {
  .rodape ul a { min-height: 44px; }
  .rodape address { margin-top: var(--e2); line-height: var(--not-lh); }
  .rodape address + .rodape-tels { margin-top: var(--e1); }
  .rodape-tels { display: flex; flex-wrap: wrap; column-gap: var(--e4); }
}
.rodape-base {
  margin-top: var(--e9); padding-top: var(--e5);
  border-top: 1px solid var(--linha);
  font-size: var(--leg); line-height: var(--leg-lh); letter-spacing: 0;
}

@media (max-width: 1068px) {
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--e8); }
}

@media (max-width: 833px) {
  .rodape { padding-top: var(--e9); }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); row-gap: var(--e6); margin-top: var(--e7); }
  .rodape-links { border-block: 1px solid var(--linha); }
  .rodape-links ul { padding-bottom: var(--e2); }
  .rodape-links h2 + ul { margin-top: 0; }
  .rodape address br { display: none; }
  .rodape-base { margin-top: var(--e7); }
}
.rodape-abre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  width: 100%; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-weight: 600; color: var(--texto);
  border-radius: var(--raio-campo);
}
.rodape-abre .chevron-baixo { margin-right: 2px; }
.rodape-abre[aria-expanded="true"] .chevron-baixo { transform: rotate(180deg); }


/* 14. WhatsApp e avisos ------------------------------------------------- */
.whatsapp-btn {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--whatsapp); color: #fff;
  box-shadow: 0 4px 12px rgba(6, 42, 44, 0.16);
  transition: background-color var(--rapido) var(--curva), opacity var(--rapido) var(--curva), visibility 0s;
}
.whatsapp-btn:hover { background: var(--whatsapp-hover); }
.whatsapp-btn svg { width: 28px; height: 28px; fill: currentColor; }

.whats-oculto .whatsapp-btn {
  opacity: 0; visibility: hidden;
  transition: background-color var(--rapido) var(--curva), opacity var(--rapido) var(--curva), visibility 0s linear var(--rapido);
}
@media (max-width: 734px) {
  .whatsapp-btn { right: 16px; bottom: 16px; }
}

@media (max-height: 480px) {
  html { scroll-padding-top: 0; scroll-padding-bottom: 0; }
  body { padding-top: 0; }
  .topo { position: relative; }
  .menu-aberto .topo { position: sticky; top: 0; }
  .whatsapp-btn { width: 44px; height: 44px; right: 12px; bottom: 12px; }
  .whatsapp-btn svg { width: 24px; height: 24px; }
}

.toast-container {
  position: fixed; z-index: 60; top: calc(var(--topo-a) + 12px); right: 24px;
  display: grid; gap: var(--e2); width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; column-gap: var(--e3);
  padding: 14px 8px 14px 16px;
  background: var(--fundo-3); color: var(--texto);
  border: 1px solid var(--linha); border-radius: var(--raio-cartao);
  box-shadow: 0 4px 16px rgba(6, 42, 44, 0.08);
  font-size: var(--not); line-height: var(--not-lh); letter-spacing: var(--not-ls);
  opacity: 0; pointer-events: auto;
  transition: opacity var(--rapido) var(--curva);
}
.toast.show { opacity: 1; }
.toast.hide { opacity: 0; }
.toast-icon {
  width: 24px; height: 24px; margin-top: -2px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--texto); color: #fff; font-size: 0.8125rem; line-height: 1; font-weight: 600;
}
.toast-success .toast-icon { background: var(--petroleo); }
.toast-error .toast-icon { background: var(--erro); }
.toast-title { font-weight: 600; }
.toast-message { margin: 0; color: var(--texto-2); }
.toast-close {
  width: 44px; height: 44px; margin: -12px -4px -12px 0; padding: 0;
  border: 0; border-radius: var(--raio-campo); background: none; cursor: pointer;
  color: var(--texto-2); font-size: 1.25rem; line-height: 1;
}
.toast-close:hover { color: var(--texto); }
@media (max-width: 734px) {
  .toast-container { right: 16px; left: 16px; width: auto; }
}


/* 15. Movimento ao rolar ------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .revelar-pronto .fade-in-up:not(.visible) {
    opacity: 0;
    translate: 0 var(--revelar-dist);
    pointer-events: none;
  }

  .revelar-pronto .fade-in-up.visible {
    transition:
      opacity var(--revelar-op) var(--revelar-curva) var(--atraso, 0s),
      translate var(--revelar-mov) var(--revelar-curva) var(--atraso, 0s);
  }

  .revelar-pronto .fade-in-up .desenho {
    stroke-dasharray: 1 2;
    transition: stroke-dashoffset var(--desenho) var(--desenho-curva) calc(var(--atraso, 0s) + var(--desenho-atraso));
  }
  .revelar-pronto .fade-in-up:not(.visible) .desenho { stroke-dashoffset: 1.05; }

  .revelar-pronto .fade-in-up.ja,
  .revelar-pronto .fade-in-up.ja * { transition: none !important; }
}

@media print {
  .fade-in-up { opacity: 1 !important; translate: none !important; }
  .desenho { stroke-dashoffset: 0 !important; }
}


/* 16. Preferências do sistema ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --painel: 0s; --painel-item: 0s; --painel-item-sai: 0s; --painel-atraso: 0s; --painel-passo: 0s; --painel-cortina-atraso: 0s;
    --rapido: 0s; --medio: 0s; --menu-cortina: 0s; --menu-item: 0s; --menu-item-sai: 0s; --menu-atraso: 0s; --menu-passo: 0s;
    --revelar-dist: 0px; --revelar-op: 0s; --revelar-mov: 0s;
    --desenho: 0s; --desenho-atraso: 0s;
  }
  /* o script.js remove o aviso no transitionend: precisa de uma duração */
  .toast { transition-duration: 0.01s; }
}
@media (prefers-reduced-transparency: reduce) {
  .topo::before { background: var(--fundo-3); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --texto-2: #1e3638; --linha: #7f9290; --sobre-cor-2: #ffffff; }
}

@media (forced-colors: active) {
  .cartao, .formulario, .topo-painel, .menu-movel, .botao, .botao-enviar,
  .pilula-nav::before, .whatsapp-btn, .topo::before, #generated-tooltip.map-tooltip { border: 1px solid CanvasText; }
  :focus-visible, .pilula-nav:focus-visible::before { outline-color: Highlight; }
  #svg-map a:focus-visible path:not(.circle) { stroke: Highlight; stroke-width: 3; }
  #generated-tooltip.map-tooltip::after { display: none; }
  /* ícones na cor do texto do sistema */
  .cartao-glifo { color: CanvasText; --i-acento: CanvasText; }
}