/* ==========================================================================
   Capucelli Advocacia — folha de estilo
   Tokens extraídos do build de produção (Lovable/Tailwind) em 07/08/2026.
   ========================================================================== */

:root {
  --navy:        hsl(213 56% 14%);   /* rgb(16,34,56)   */
  --navy-dark:   hsl(213 60% 8%);    /* rgb(8,19,33)    */
  --navy-light:  hsl(213 40% 22%);
  --gold:        hsl(43 72% 52%);    /* rgb(221,171,44) — só sobre fundo escuro */
  --gold-light:  hsl(43 60% 68%);    /* rgb(222,195,124)*/
  /* Dourado para texto sobre fundo claro. O --gold puro dá 2.0:1 sobre o
     bg-light, muito abaixo do mínimo WCAG AA. Este dá 4.94:1. */
  --gold-dark:   hsl(43 80% 30%);
  --silver:      hsl(220 14% 71%);   /* rgb(171,178,191)*/
  --bg-light:    hsl(216 50% 98%);   /* rgb(247,249,252)*/
  --fg:          hsl(213 56% 14%);
  --fg-inverse:  hsl(0 0% 98%);
  /* Etapa 5: era hsl(215 16% 47%) — dava 4.45:1 sobre o bg-light, logo abaixo
     do mínimo AA de 4.5. Escurecido para 42%, que dá 5.30:1. */
  --muted:       hsl(215 16% 42%);
  --border:      hsl(214 20% 88%);
  --border-navy: hsl(213 40% 26%);

  --font-heading: "EB Garamond", "Book Antiqua", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 0.375rem;
  --wrap: 72rem;
  --header-h: 76px;
}

/* --- reset enxuto ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg-light);
  -webkit-font-smoothing: antialiased;
}
img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

/* --- utilitários -------------------------------------------------------- */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.gold { color: var(--gold); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--gold); color: var(--navy);
  padding: .7rem 1.1rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }

/* foco visível de teclado, em toda a página */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.section-navy :focus-visible, .hero :focus-visible, .cta :focus-visible,
.site-header :focus-visible, .site-footer :focus-visible {
  outline-color: var(--gold-light);
}

/* --- botões ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: .85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-light); }
.btn-outline { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--navy); }
.btn-ghost { background: transparent; color: hsl(216 14% 90%); border-color: hsl(213 30% 45%); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* --- cabeçalho ---------------------------------------------------------- */
/* A opacidade não é decorativa: a .82 original deixava a imagem do hero aparecer
   através do cabeçalho, e o dourado do botão "Contato" caía para 4.35:1 sobre o
   azul composto — reprovado no Lighthouse desktop. A .96 mantém o efeito de
   profundidade e devolve o contraste para 7.2:1. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: hsl(213 56% 14% / .97);
  border-bottom: 1px solid hsl(213 40% 26% / .8);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: hsl(213 56% 14% / .96); backdrop-filter: blur(10px); }
}
.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--header-h);
}
.logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.logo img { width: 40px; height: 40px; object-fit: contain; }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-name { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--fg-inverse); }
.logo-sub { font-size: .75rem; letter-spacing: .22em; color: var(--gold-light); }

.main-nav { display: flex; gap: 1.75rem; }
.main-nav a {
  font-size: .875rem; text-decoration: none; color: hsl(216 14% 90%);
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.menu-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; background: var(--fg-inverse); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(5rem, 14vh, 9rem) 0 clamp(5rem, 14vh, 9rem);
  /* JPG primeiro como reserva; navegadores que entendem image-set pegam o WebP,
     que é 59% menor. Quem não entende ignora a segunda declaração. */
  background:
    linear-gradient(hsl(213 60% 8% / .88), hsl(213 56% 14% / .92)),
    url("/assets/hero-bg.jpg") center / cover no-repeat;
  background-image:
    linear-gradient(hsl(213 60% 8% / .88), hsl(213 56% 14% / .92)),
    image-set(url("/assets/hero-bg.webp") type("image/webp"),
              url("/assets/hero-bg.jpg")  type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--fg-inverse);
}
.hero-inner { max-width: 54rem; }
.hero h1 { font-size: clamp(2rem, 5.2vw, 3rem); margin-bottom: 1.25rem; }
.hero-lead { font-size: 1.125rem; color: var(--silver); max-width: 42rem; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Etapa 5: o --gold puro sobre fundo claro dava 2.0:1. O padrão passa a ser o
   dourado escuro; o dourado claro só volta sobre os fundos escuros, onde tem 7.7:1. */
.eyebrow {
  font-size: .75rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: .75rem;
}
.hero .eyebrow, .section-navy .eyebrow, .cta .eyebrow { color: var(--gold); }

/* --- seções ------------------------------------------------------------- */
.section { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.section-tight { padding-top: 0; }
.section-light { background: var(--bg-light); color: var(--fg); }
.section-navy  { background: var(--navy); color: var(--fg-inverse); }
.section h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); margin-bottom: 1rem; }
.section-navy h2 { color: var(--fg-inverse); }

.oab-tag { font-size: .875rem; color: var(--muted); margin-bottom: 1.25rem; }
.lead-text { color: var(--muted); max-width: 62rem; margin-bottom: 2.5rem; }

/* --- cartões genéricos --------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.card p  { color: var(--muted); margin: 0; font-size: .9375rem; }
.card ul li {
  position: relative;
  padding-left: 1.1rem; margin-bottom: .5rem;
  color: var(--muted); font-size: .9375rem;
}
.card ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dark);
}

.sobre-grid, .diferenciais-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.diferenciais-grid .card h3 { font-size: 1.125rem; }

/* --- áreas de atuação ---------------------------------------------------- */
.atuacao-grupo {
  border: 1px solid var(--border-navy);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  background: hsl(213 50% 17%);
}
.grupo-head { margin-bottom: 1.5rem; }
.grupo-head h3 { font-size: 1.25rem; color: var(--gold); margin-bottom: .35rem; }
.grupo-head p  { color: var(--silver); margin: 0; font-size: .9375rem; }
.grupo-itens {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.grupo-itens h4 { font-size: 1rem; color: var(--fg-inverse); margin-bottom: .3rem; }
.grupo-itens p  { color: hsl(220 14% 71% / .85); font-size: .875rem; margin: 0; }

/* --- artigos ------------------------------------------------------------- */
.artigos-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.artigo-card {
  display: flex; flex-direction: column;
  background: hsl(213 50% 17%);
  border: 1px solid var(--border-navy);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.artigo-tag {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .6rem;
}
.artigo-card h3 { font-size: 1.125rem; color: var(--fg-inverse); }
.artigo-card > p:not(.artigo-tag) { color: hsl(220 14% 71% / .85); font-size: .875rem; flex-grow: 1; }
.artigo-card a {
  font-size: .875rem; font-weight: 500; color: var(--gold);
  text-decoration: none; margin-top: .5rem; align-self: flex-start;
}
.artigo-card a:hover { text-decoration: underline; }

.artigos-todos { margin: 1.75rem 0 0; }
.artigos-todos a {
  color: var(--gold); text-decoration: none; font-size: .9375rem; font-weight: 500;
  border-bottom: 1px solid hsl(43 72% 52% / .45); padding-bottom: 2px;
}
.artigos-todos a:hover { border-bottom-color: var(--gold); }

/* --- presença digital ---------------------------------------------------- */
.social-list { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.social-list a { font-size: .9375rem; color: var(--silver); text-decoration: none; border-bottom: 1px solid hsl(220 14% 71% / .4); }
.social-list a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* --- contato ------------------------------------------------------------- */
.contato-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.contato-info { display: grid; gap: 1.5rem; }
.contato-info h3 { font-size: 1.125rem; margin-bottom: .2rem; }
.contato-info p { color: var(--muted); margin: 0; }
.contato-info a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.contato-alt { margin-top: .25rem !important; font-size: .875rem; }
.contato-info a:hover { color: var(--gold); }
.mapa-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mapa-wrap iframe { display: block; width: 100%; border: 0; }

/* Placeholder de consentimento do mapa (Etapa 3.2). Nenhuma requisição ao
   Google acontece enquanto este bloco estiver na tela. */
.mapa-consentimento {
  display: grid; place-items: center; gap: .6rem;
  min-height: 320px; padding: 2rem 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, hsl(216 30% 94%) 0 12px, hsl(216 40% 96%) 12px 24px);
}
.mapa-icone { color: var(--gold-dark); }
.mapa-consentimento h4 { font-size: 1.0625rem; margin: 0; }
.mapa-aviso { color: var(--muted); font-size: .875rem; max-width: 30rem; margin: 0; }
.mapa-alternativa { margin: 0; font-size: .8125rem; }
.mapa-alternativa a { color: var(--muted); text-underline-offset: 3px; }
.mapa-alternativa a:hover { color: var(--gold-dark); }

/* Sem JS o botão não faria nada: esconde o botão e deixa só o link externo. */
html:not(.js-nav) #mapa-carregar { display: none; }

/* --- CTA final ----------------------------------------------------------- */
.cta {
  padding: clamp(3.5rem, 9vh, 5.5rem) 0;
  background: linear-gradient(hsl(213 60% 8%), hsl(213 56% 14%));
  color: var(--fg-inverse);
  text-align: center;
}
.cta-inner { max-width: 46rem; }
.cta h2 { font-size: clamp(1.5rem, 3.6vw, 2.25rem); }
.cta p { color: var(--silver); }

/* --- rodapé -------------------------------------------------------------- */
.site-footer {
  background: var(--navy-dark);
  color: var(--silver);
  padding: 2.5rem 0;
  font-size: .8125rem;
}
.footer-inner { display: grid; gap: .75rem; max-width: 60rem; }
.footer-brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.footer-brand .logo-name { font-size: 1rem; }
.footer-brand .oab-tag { color: var(--gold-light); margin: 0; font-size: .75rem; letter-spacing: .06em; }
.site-footer p { margin: 0; }

/* Identificação profissional e avisos obrigatórios (Provimento 205/2021 CFOAB).
   Cor em opacidade cheia: é informação que precisa ser efetivamente legível. */
.footer-id { color: var(--silver); }
.footer-avisos {
  display: grid; gap: .4rem;
  border-top: 1px solid hsl(220 14% 71% / .18);
  padding-top: .85rem; margin-top: .25rem;
}
.footer-avisos p { color: var(--silver); max-width: 54rem; }
.footer-copy { color: hsl(220 14% 71% / .78); padding-top: .35rem; }

/* --- páginas de artigo ----------------------------------------------------- */
.artigo-pagina { background: var(--bg-light); padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(3rem, 8vh, 5rem); }
.artigo-inner { max-width: 44rem; }
.artigo-inner h1 { font-size: clamp(1.7rem, 4.2vw, 2.35rem); margin-bottom: .75rem; }
.artigo-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
  color: var(--muted); font-size: .8125rem;
  padding-bottom: 1.5rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.artigo-corpo p { color: var(--muted); margin-bottom: 1.15rem; }
.artigo-corpo h2 {
  font-size: 1.375rem; margin-top: 2.25rem; margin-bottom: .65rem; color: var(--fg);
}
.artigo-corpo h3 { font-size: 1.0625rem; margin-top: 1.75rem; margin-bottom: .4rem; color: var(--fg); }
.artigo-corpo ul, .artigo-corpo ol { margin: 0 0 1.15rem; display: grid; gap: .45rem; }
.artigo-corpo li { color: var(--muted); font-size: .9375rem; padding-left: 1.15rem; position: relative; }
.artigo-corpo ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dark);
}
.artigo-corpo ol { counter-reset: passo; }
.artigo-corpo ol li { counter-increment: passo; padding-left: 1.6rem; }
.artigo-corpo ol li::before {
  content: counter(passo) "."; position: absolute; left: 0; top: 0;
  color: var(--gold-dark); font-weight: 600; font-size: .875rem;
}
.artigo-corpo blockquote {
  margin: 1.5rem 0; padding: .9rem 1.25rem;
  border-left: 3px solid var(--gold-dark);
  background: hsl(216 35% 95%);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.artigo-corpo blockquote p { margin: 0; font-size: .9375rem; font-style: italic; }
.artigo-corpo strong { color: var(--fg); font-weight: 600; }

/* Nota de atualização no topo de um artigo, quando o texto original envelheceu.
   Fica visualmente separada para não se confundir com o texto do autor. */
.artigo-atualizacao {
  margin: 0 0 2rem;
  padding: 1.1rem 1.35rem;
  background: hsl(216 40% 95%);
  border-left: 3px solid var(--gold-dark);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.artigo-atualizacao .atualizacao-titulo {
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: .5rem;
}
.artigo-atualizacao p { color: var(--muted); font-size: .9375rem; margin-bottom: .6rem; }
.artigo-atualizacao p:last-child { margin-bottom: 0; }
.artigo-atualizacao strong { color: var(--fg); }

.artigo-origem {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .8125rem; color: var(--muted);
}
.artigo-origem a { color: var(--gold-dark); text-underline-offset: 3px; }
.artigo-voltar { margin-top: 1.5rem; }
.artigo-voltar a { color: var(--gold-dark); text-decoration: none; font-size: .9375rem; }
.artigo-voltar a:hover { text-decoration: underline; }

/* listagem de artigos */
.artigos-lista { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
.artigos-lista article {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
}
.artigos-lista h2 { font-size: 1.1875rem; margin-bottom: .5rem; }
.artigos-lista h2 a { color: var(--fg); text-decoration: none; }
.artigos-lista h2 a:hover { color: var(--gold-dark); text-decoration: underline; }
.artigos-lista p { color: var(--muted); font-size: .9375rem; margin-bottom: .5rem; }
.artigos-lista .artigo-tag { color: var(--gold-dark); }
.artigos-lista time { color: var(--muted); font-size: .8125rem; }

/* --- página legal (política de privacidade) -------------------------------- */
.pagina-legal { background: var(--bg-light); padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(3rem, 8vh, 5rem); }
.legal-inner { max-width: 48rem; }
.legal-inner h1 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); margin-bottom: .35rem; }
.legal-data { color: var(--muted); font-size: .875rem; margin-bottom: 2.5rem; }
.legal-inner h2 {
  font-size: 1.375rem; margin-top: 2.5rem; margin-bottom: .75rem;
  padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.legal-inner h3 { font-size: 1.0625rem; margin-top: 1.75rem; margin-bottom: .5rem; color: var(--fg); }
.legal-inner p { color: var(--muted); }
.legal-inner a { color: var(--gold-dark); text-underline-offset: 3px; }
.legal-inner strong { color: var(--fg); font-weight: 600; }
.legal-inner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em; background: hsl(216 30% 93%);
  padding: .1em .38em; border-radius: 3px; color: var(--fg);
}
.legal-lista { margin: 0 0 1rem; display: grid; gap: .45rem; }
.legal-lista li {
  position: relative; padding-left: 1.15rem;
  color: var(--muted); font-size: .9375rem;
}
.legal-lista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dark);
}
.legal-voltar { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

.footer-links { padding-top: .35rem; }
.footer-links a { color: var(--silver); text-underline-offset: 3px; }
.footer-links a:hover { color: var(--gold-light); }

/* --- páginas simples (404, legais) ---------------------------------------- */
.erro-wrap {
  display: grid; place-items: center;
  min-height: calc(100vh - var(--header-h) - 160px);
  padding: clamp(3rem, 10vh, 6rem) 0;
  background: var(--bg-light);
}
.erro-inner { text-align: center; }
.erro-inner h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); margin-bottom: .75rem; }
.erro-inner p { color: var(--muted); }
.erro-inner .btn { margin-top: 1rem; }

/* --- WhatsApp flutuante --------------------------------------------------- */
.whatsapp-float {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  /* Etapa 5: o verde de marca do WhatsApp (#25d366) com o ícone branco dá 1.98:1,
     abaixo dos 3:1 que a WCAG 1.4.11 exige para elementos gráficos. Escurecido. */
  background: hsl(142 72% 32%); color: #fff;
  box-shadow: 0 6px 18px hsl(213 60% 8% / .35);
  transition: transform .18s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }

/* ==========================================================================
   Animações de entrada — Etapa 1.4
   Regra: o estado inicial é SEMPRE visível. A animação só existe quando o JS
   confirma suporte e adiciona .js-anim em <html>, e apenas se o usuário não
   pediu redução de movimento. Sem JS, ou com JS quebrado, nada some.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease-out, transform .55s ease-out;
  }
  html.js-anim .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Redução de movimento: versão totalmente estática, sem transições nem smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --- responsivo ----------------------------------------------------------- */
@media (max-width: 880px) {
  .menu-toggle { display: flex; }
  /* Esconde o botão do cabeçalho SÓ quando existe menu ao lado para substituí-lo
     (isto é, na home). Nas páginas de artigo, política e 404 não há nav nem
     hambúrguer — esconder o botão deixaria o cabeçalho só com o logo. */
  .main-nav + .header-cta { display: none; }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--navy);
    border-bottom: 1px solid var(--border-navy);
    padding: .5rem 1.5rem 1rem;
    display: none;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: .8rem 0; border-bottom: 1px solid hsl(213 40% 26% / .6); }
  .main-nav a:last-child { border-bottom: 0; }
}

/* Sem JS o menu hambúrguer não funciona: some o botão e mostra a navegação. */
html:not(.js-nav) .menu-toggle { display: none; }
@media (max-width: 880px) {
  html:not(.js-nav) .main-nav {
    position: static; display: flex; flex-direction: row; flex-wrap: wrap;
    gap: .25rem 1.25rem; background: none; border: 0; padding: .25rem 0 .75rem;
    width: 100%;
  }
  html:not(.js-nav) .main-nav a { border-bottom: 0; padding: .3rem 0; }
  html:not(.js-nav) .header-inner { flex-wrap: wrap; padding-block: .75rem; }
}

@media (max-width: 560px) {
  .hero-actions .btn { width: 100%; text-align: center; }
  .atuacao-grupo { padding: 1.25rem; }
  .whatsapp-float { width: 52px; height: 52px; right: 1rem; bottom: 1rem; }
}