:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand: #D12B2B;
  --ink: #111111;
  --muted: #5f5f5f;
  --line: #E8E7E5;
  --alt: #FAF8F5;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); }
a:not(.btn):hover { color: #B21F1F; }
img { max-width: 100%; display: block; }
.eyebrow { font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.btn { transition: background-color .15s ease, transform .05s ease, color .15s ease; }
.btn:active { transform: translateY(1px); }
.grecaptcha-badge { z-index: 2147483000 !important; }
.grecaptcha-badge[data-style="bottomleft"]:hover,
.grecaptcha-badge[data-style="bottomleft"]:focus-within { left: 0 !important; }


/* ============================================================
   Navegação mobile (< 1024px)

   O nav do topo usa `hidden lg:flex`, então abaixo de 1024px não havia
   navegação alguma — só o logo e o CTA, que ainda estouravam a largura da
   viewport em telas de ~375px. Hambúrguer + drawer resolvem os dois.

   Escrito em CSS próprio (e não em utilitários Tailwind) porque
   css/tailwind.css é pré-compilado: um utilitário novo só passaria a existir
   depois do build do pipeline e não apareceria no preview local.

   As regras da barra do topo são prefixadas com #nav de propósito: base.css
   é carregado ANTES de tailwind.css, então sem o ID as classes utilitárias
   (px-6, h-8) venceriam por ordem de cascata.
   ============================================================ */

/* --- barra do topo em telas estreitas --- */
@media (max-width: 520px) {
  #nav .nav-bar { padding-left: 14px; padding-right: 14px; gap: 8px; }
  #nav .nav-logo { height: 26px; }
  #nav .nav-cta { padding-left: 12px; padding-right: 12px; font-size: 13px; }
}

/* CTA do topo: rótulo curto onde não cabe o texto completo */
.nav-cta-short { display: none; }
@media (max-width: 620px) {
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
}

/* --- botão hambúrguer --- */
.nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  flex-direction: column; flex: none;
  width: 44px; height: 44px; margin-right: -10px;
  padding: 0; border: 0; background: transparent; color: var(--ink);
  cursor: pointer; border-radius: 10px;
}
.nav-burger:hover { background: var(--alt); }
.nav-burger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-burger > span { display: block; width: 21px; height: 2px; border-radius: 2px; background: currentColor; }
.nav-burger > span + span { margin-top: 5px; }
@media (min-width: 1024px) { .nav-burger { display: none; } }

/* --- camada do menu ---
   O painel fica deslocado para fora da tela quando fechado. Sem este
   contêiner com overflow:hidden ele geraria ~330px de rolagem horizontal no
   documento inteiro. Clipar aqui evita mexer no overflow do html/body, que
   quebraria o `position: sticky` do header. */
.nav-overlay {
  position: fixed; inset: 0; z-index: 60;
  overflow: hidden; pointer-events: none;
  visibility: hidden;
  /* sem atraso ao abrir (o foco precisa entrar no painel na hora); ao fechar,
     espera a animação de saída terminar */
  transition: visibility 0s linear .26s;
}
body.nav-open .nav-overlay { visibility: visible; pointer-events: auto; transition: visibility 0s; }
@media (min-width: 1024px) { .nav-overlay { display: none; } }

.nav-scrim {
  position: absolute; inset: 0;
  background: rgba(17, 17, 17, .45);
  opacity: 0; transition: opacity .22s ease;
}
body.nav-open .nav-scrim { opacity: 1; }

/* --- painel --- */
.nav-drawer {
  position: absolute; top: 0; right: 0;
  width: min(88vw, 340px); height: 100%;
  display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(0, 0, 0, .12);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
  overscroll-behavior: contain;
}
body.nav-open .nav-drawer { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .nav-overlay, .nav-scrim, .nav-drawer { transition: none; }
}

/* trava a rolagem do fundo com o menu aberto */
body.nav-open { overflow: hidden; }

/* Widgets flutuantes de terceiros (Leadster, reCAPTCHA) usam z-index na casa
   dos 32 mil / 2 bilhoes e ficariam por cima do painel, cobrindo justamente o
   CTA do rodape. Some com eles enquanto o menu estiver aberto. */
body.nav-open .nld-avatar,
body.nav-open .nld-conversation,
body.nav-open .nld-backdrop,
body.nav-open .ls-modal-overlay,
body.nav-open .grecaptcha-badge { visibility: hidden !important; }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); flex: none;
}
.nav-drawer-head img { height: 26px; width: auto; }
.nav-drawer-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px;
  padding: 0; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; border-radius: 10px;
}
.nav-drawer-close:hover { background: var(--alt); color: var(--ink); }
.nav-drawer-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-drawer-close i, .nav-drawer-close svg { width: 20px; height: 20px; }

.nav-drawer-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding: 8px 10px 16px;
}

.nav-drawer-link {
  display: flex; align-items: center; min-height: 46px;
  padding: 6px 10px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav-drawer-link:hover { background: var(--alt); color: var(--ink); }

.nav-drawer-label {
  margin: 14px 10px 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #999;
}

/* itens de módulo — espelham o dropdown do desktop */
.nav-drawer-mod {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px; border-radius: 10px; text-decoration: none; color: inherit;
}
.nav-drawer-mod:hover { background: var(--alt); color: inherit; }
.nav-drawer-mod[aria-current="page"] { background: var(--alt); }
.nav-drawer-ic {
  flex: none; width: 32px; height: 32px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(209, 43, 43, .07); border: 1px solid rgba(209, 43, 43, .18);
  color: var(--brand);
}
.nav-drawer-ic i, .nav-drawer-ic svg { width: 16px; height: 16px; }
.nav-drawer-mod-t { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.nav-drawer-mod-d { display: block; font-size: 11.5px; color: #999; line-height: 1.35; margin-top: 2px; }

.nav-drawer-foot {
  flex: none; padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: #fff;
}
.nav-drawer-login {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.nav-drawer-login:hover { color: var(--brand); }
.nav-drawer-cta {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  margin-top: 8px; padding: 0 18px; border-radius: 12px;
  background: var(--brand); color: #fff; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px;
}
.nav-drawer-cta:hover { background: #B21F1F; color: #fff; }

/* ============================================================
   Ajustes de layout em telas pequenas
   ============================================================ */

/* Os carrosséis de logo têm largura `max-content` (~1700px). Mesmo com
   overflow:hidden no wrapper, esse min-content sobe pela árvore e infla a
   coluna do grid que os contém: no /contato a coluna ia a 448px dentro de um
   container de 327px e o texto do hero aparecia cortado no celular. */
.logo-track-wrap, .mini-logo-wrap { min-width: 0; }

/* Rede de segurança: item de grid não deve estourar o container no mobile. */
@media (max-width: 1023px) {
  .grid > * { min-width: 0; }
}