/* ============================================================
   Tapera — overrides loaded after components.css.
   Mantém o HTML original 100% fiel quando o WordPress/Elementor
   tentam injetar paleta, tipografia ou layout próprios.
   ============================================================ */

/* Syncopate continua sendo enfileirada via wp_enqueue_style (usada em h1, h2,
   h3 globais do projeto). Aqui adicionamos Sansation (self-hosted) que será
   aplicada APENAS aos elementos de menu/CTA/footer-title.

   Sansation v1.31 (c) Bernd Montag — freeware, uso pessoal e comercial.
   Arquivos em tapera-pages/assets/fonts/sansation/. */
@font-face {
  font-family: 'Sansation';
  src: url('../fonts/sansation/Sansation_Light.ttf')   format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sansation';
  src: url('../fonts/sansation/Sansation_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sansation';
  src: url('../fonts/sansation/Sansation_Bold.ttf')    format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 0) RESET DEFENSIVO contra Elementor/hello-elementor ---------- */
/* Alguns plugins definem cores nativas (pink/roxo) em a/button/.menu-item.
   Forçamos o herdar do componente local ANTES de qualquer cor herdada. */
.site-header a,
.site-header button,
.site-footer a,
.site-footer button,
.nav-main a, .nav-main button,
.nav-dropdown a, .nav-dropdown button,
.mobile-nav a, .mobile-nav button,
.footer-menu a {
  color: inherit;
  background: transparent;
  border: 0;
  text-decoration: none;
}

/* Cancela qualquer ::before/::after que o Elementor adicione no header */
.site-header *::before,
.site-header *::after,
.site-footer *::before,
.site-footer *::after {
  background: none;
}
/* Mantém os ::after de keyframes/animações do projeto */
.site-header .reveal::before,
.site-footer .reveal::before { background: rgba(255,255,255,0.6); }

/* Garantir paleta verde nos itens do menu (sobrescreve hello-elementor) */
.nav-link, .nav-link:visited,
.nav-dropdown a, .nav-dropdown a:visited,
.lang-option, .lang-option:visited,
.footer-menu a, .footer-menu a:visited {
  color: var(--branco-puro);
}
.site-header.scrolled .nav-link,
.site-header.scrolled .nav-link:visited {
  color: var(--verde-floresta);
}
/* Hovers reproduzindo o projeto original */
.nav-link:hover, .nav-link.is-active,
.has-dropdown.is-open > .nav-link {
  background: rgba(255,255,255,0.18);
  color: var(--branco-puro);
}
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.is-active,
.site-header.scrolled .has-dropdown.is-open > .nav-link {
  background: var(--verde-medio);
  color: var(--branco-puro);
}

/* Tipografia: bloqueia Roboto/Inter herdados do Elementor */
.site-header, .site-header *,
.site-footer, .site-footer *,
.mobile-nav, .mobile-nav * {
  font-family: var(--font-sans);
}
.site-header h1, .site-header h2, .site-header h3,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
  font-family: var(--font-display);
}

/* ---------- 1) HEADER: largura alinhada com .container ---------- */
/* Mesma fórmula do .container do projeto:
   - mobile: 100% com padding
   - >=1280px: 88vw centralizado (mesmo cálculo do .container) */
.header-shell {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left:  var(--container-pad);
  padding-right: var(--container-pad);
}
@media (min-width: 1280px) {
  .header-shell {
    width: 88vw;
    max-width: var(--container-max);
    padding-left: 0;
    padding-right: 0;
  }
}

/* Fontes do menu / idioma / CTA — +2-3px sobre o tamanho anterior */
@media (min-width: 1024px) {
  .header-pill  { gap: 14px; padding: 10px 14px 10px 22px; flex-wrap: nowrap; }
  .nav-main ul.nav-list { gap: 4px; }
  .nav-link             { padding: 0 18px; font-size: 1rem; height: 44px; white-space: nowrap; }
  .header-actions       { gap: 10px; flex: 0 0 auto; }
  .lang-current         { padding: 0 14px; height: 44px; font-size: 0.95rem; }
  .lang-current .lang-flag { width: 22px; height: 22px; flex: 0 0 22px; }
  .header-cta           { min-height: 44px; padding: 10px 20px; font-size: 0.95rem; white-space: nowrap; }
}
@media (min-width: 1280px) {
  .nav-link     { padding: 0 20px; font-size: 1.05rem; height: 46px; }
  .lang-current { height: 46px; font-size: 1rem; padding: 0 16px; }
  .header-cta   { min-height: 46px; padding: 11px 22px; font-size: 1rem; }
}

/* ---------- 2) DROPDOWN DE IDIOMAS: forçar visual original ---------- */
/* Sobrescreve Elementor: bg branco, raio, sombra do projeto, texto verde. */
.lang-list {
  background: var(--branco-puro) !important;
  border: 1px solid rgba(27,67,50,0.08) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 48px rgba(27,67,50,0.18) !important;
  padding: 8px !important;
  min-width: 220px;
}
.lang-list li { list-style: none; padding: 0; margin: 0; background: transparent; }
.lang-option {
  background: transparent !important;
  color: var(--verde-floresta) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 14px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9375rem !important;
  font-weight: 500;
  text-align: left;
  width: 100% !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.lang-option:hover, .lang-option.is-active {
  background: var(--verde-medio) !important;
  color: var(--branco-puro) !important;
}
.lang-option img {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex: 0 0 20px;
}
.lang-current .lang-flag {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 22px;
}

/* Dropdown "O Projeto" também */
.nav-dropdown {
  background: var(--branco-puro) !important;
  border: 1px solid rgba(27,67,50,0.08) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 48px rgba(27,67,50,0.18) !important;
  padding: 8px !important;
}
.nav-dropdown a {
  color: var(--verde-floresta) !important;
  background: transparent !important;
  padding: 12px 16px !important;
  border-radius: var(--radius-pill) !important;
}
.nav-dropdown a:hover,
.nav-dropdown a.is-active {
  background: var(--verde-medio) !important;
  color: var(--branco-puro) !important;
}

/* ---------- 3) FOOTER ---------- */
.footer-contact-item {
  align-items: flex-start;
  min-width: 0;
}
.footer-contact-item > span,
.footer-contact-item > a {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: inline-block;
}
.footer-contact-item span > span { display: inline; }
.footer-col ul { width: 100%; min-width: 0; }
.site-footer .auto-reveal { opacity: 1; transform: none; }
.footer-contact-item svg { margin-top: 2px; color: var(--verde-vivo); }

/* Footer ocupa 100% do viewport, conteúdo interno alinha com .container */
.site-footer { width: 100%; }
.site-footer > .container {
  /* já é var(--container-max) / 88vw — só reforça para evitar override do Elementor */
  max-width: var(--container-max);
}

/* ---------- 4) Tipografia global do CORPO Tapera ---------- */
/* hello-elementor define body { font-family: Roboto } — re-aplica o projeto */
body { font-family: var(--font-sans); color: var(--quase-preto); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
.h2-section { font-family: var(--font-display); color: var(--verde-floresta); }
.label { font-family: var(--font-sans); }

/* ============================================================
   AJUSTES VISUAIS — round de polimento final
   ============================================================ */

/* ---------- 5) HEADER: design original — pílula translúcida sobre o conteúdo ---------- */
/* IMPORTANTE: o <header> em si é TRANSPARENTE. A "ilha" verde é a .header-pill,
   que tem fundo translúcido por cima do hero/video. Nenhum background-color
   verde é aplicado ao container do nav inteiro — só ao pill e aos itens com
   hover/active. */
.site-header {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 20px 0 !important;          /* +2px vertical conforme pedido */
  box-shadow: none !important;
}
.site-header .header-pill {
  background: rgba(27,67,50,0.55) !important;     /* verde-floresta @55% */
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 8px 28px rgba(27,67,50,0.18);
  backdrop-filter: blur(8px);
  /* Centralização vertical garantida + padding interno maior */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 24px !important;
}
/* Ao rolar a página, a pill fica branca translúcida — como no design original */
.site-header.scrolled {
  background: transparent !important;
}
.site-header.scrolled .header-pill {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(27,67,50,0.10) !important;
  box-shadow: 0 8px 28px rgba(27,67,50,0.12) !important;
}

/* Logo: posicionamento idêntico ao original (components.css:96-107).
   logo-dark é absolute por cima do logo-light pra crossfade sem deslocar nada. */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  padding: 4px 6px;
  position: relative !important;
}
.brand img {
  height: 48px !important;            /* +26% sobre 38px original */
  width: auto !important;
  transition: opacity 380ms cubic-bezier(.4,0,.2,1);
}
.brand img.logo-light {
  display: block !important;
  opacity: 1;
  position: static !important;
  transform: none !important;
}
.brand img.logo-dark {
  display: block !important;
  opacity: 0;
  position: absolute !important;
  top: 50% !important;
  left: 6px !important;
  transform: translateY(-50%) !important;
  pointer-events: none;
  height: 48px !important;
  width: auto !important;
}
.site-header.scrolled .brand img.logo-light { opacity: 0 !important; }
.site-header.scrolled .brand img.logo-dark  { opacity: 1 !important; }

/* Breakpoints específicos pra logo maior em desktops largos */
@media (min-width: 1024px) {
  .brand img, .brand img.logo-dark { height: 52px !important; }
}

/* ---------- 6) HOVER/active do menu: só o item mexe — nada no nav ---------- */
.nav-main, .nav-main ul.nav-list, .header-actions {
  background: transparent !important;     /* sem fundo no container */
}
.nav-link, .nav-link:visited {
  color: var(--branco-puro) !important;
  background: transparent !important;     /* default: sem fundo */
}
/* Hover/active SOMENTE no item específico, pill verde-medio */
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active,
.has-dropdown.is-open > .nav-link {
  background: var(--verde-medio) !important;   /* #2D6A4F */
  color: var(--branco-puro) !important;
  border-radius: var(--radius-pill) !important;
}
/* Estado "scrolled" (pill branca): texto verde escuro, mesmo hover verde */
.site-header.scrolled .nav-link, .site-header.scrolled .nav-link:visited {
  color: var(--verde-floresta) !important;
}
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.is-active,
.site-header.scrolled .has-dropdown.is-open > .nav-link {
  background: var(--verde-medio) !important;
  color: var(--branco-puro) !important;
}

/* Lang switch — herda a estética da pill ao redor */
.lang-current, .lang-current:visited {
  color: var(--branco-puro) !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
.lang-current:hover { background: rgba(255,255,255,0.18) !important; }
.site-header.scrolled .lang-current {
  color: var(--verde-floresta) !important;
  background: rgba(27,67,50,0.06) !important;
  border-color: rgba(27,67,50,0.10) !important;
}
.site-header.scrolled .lang-current:hover { background: rgba(45,106,79,0.10) !important; }

/* ---------- 7) Botão "Entre em contato" fiel ao original ---------- */
.header-cta,
.header-cta:visited {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  min-height: 40px;
  padding: 8px 16px 8px 22px !important;
  background: var(--verde-medio) !important;        /* #2D6A4F */
  color: var(--branco-puro) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;     /* 999px */
  font-family: var(--font-sans) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-fast);
  box-shadow: 0 4px 14px rgba(27,67,50,0.18);
}
.header-cta:hover {
  background: var(--verde-floresta) !important;
  transform: translateY(-1px);
}
/* Seta circular */
.header-cta .arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.22) !important;
  color: var(--branco-puro) !important;
  font-size: 12px !important;
  line-height: 1;
}

/* ---------- 8) Título "SAIBA MAIS..." em 1 linha, fonte Syncopate ---------- */
.footer-cta {
  max-width: 1280px !important;       /* +28% pra caber a frase em uma linha */
  padding-left: 16px;
  padding-right: 16px;
}
/* Força Syncopate em TODOS os caminhos possíveis do seletor pra esse h2
   exato — id #contact ancora a árvore, e ainda combino classes específicas
   pra vencer qualquer Elementor / hello-elementor / theme.json. */
html body #contact .footer-cta h2,
html body .site-footer .footer-cta h2.type-in,
html body .site-footer .footer-cta h2.auto-reveal,
html body .site-footer .footer-cta h2,
.footer-cta h2.h2-section,
.footer-cta h2 {
  font-family: 'Sansation', sans-serif !important;
  font-weight: 300 !important;               /* Sansation Light */
  text-transform: uppercase !important;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  color: var(--branco-puro) !important;
}
/* Cada <span class="word"> e <span class="ch"> dentro do type-in herda fonte e peso */
.footer-cta h2 .word,
.footer-cta h2 .ch {
  font-family: 'Sansation', sans-serif !important;
  font-weight: 300 !important;
}
@media (min-width: 900px) {
  .footer-cta h2 { white-space: nowrap !important; }
}

/* ---------- 9) Reduzir o espaço branco antes do footer ---------- */
.site-footer {
  padding: clamp(40px, 5vw, 64px) 0 0 !important;
}
.footer-cta {
  margin: 0 auto clamp(28px, 4vw, 56px) !important;
}
.footer-grid {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.footer-bottom { padding: 18px 0 !important; }

/* Cancela qualquer margin-top que hello-elementor coloque entre <main> e <footer> */
.site-footer { margin-top: 0 !important; }
main + .site-footer, body > .site-footer { margin-top: 0 !important; }

/* ============================================================
   LAYOUTS DE PÁGINA — estilos faltando porque o CSS original
   estava em home.css mas as páginas filhas (nossa-missao, etc.)
   só carregam o seu próprio CSS de página. Replico aqui o que
   é genérico para que tudo funcione em qualquer page-tapera-*.
   ============================================================ */

/* ---------- Ornaments centralizados (Comunidades hero, Biodiversidade) ---------- */
/* `.ornaments-grid` no original é `repeat(4, 1fr)` no desktop. Quando há
   menos de 4 itens (Comunidades=3, Biodiversidade=3) fica encostado à
   esquerda. Reescrevo pra flex centralizado mantendo o layout responsivo. */
.ornaments-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: stretch;
  gap: 16px !important;
}
.ornaments-grid > .ornament {
  flex: 1 1 260px;
  max-width: 360px;
  min-width: 240px;
}
@media (min-width: 1024px) {
  .ornaments-grid > .ornament { flex: 1 1 280px; max-width: 340px; }
}
.ornaments-grid.solid { justify-content: center !important; }
.ornaments-grid.solid > .ornament { flex: 1 1 260px; max-width: 340px; }

/* ---------- Nossa Missão: parágrafos boxed lado a lado ---------- */
/* O HTML tem 1 <p> intro + 2 <p class="boxed">. O intro fica full-width
   e os dois boxes ficam lado a lado >=768px. */
.text-block .paragraphs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.text-block .paragraphs > p {
  flex: 1 1 100%;
  margin: 0;
  color: var(--cinza-suave);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.text-block .paragraphs > p.boxed {
  flex: 1 1 calc(50% - 12px);
  background: var(--verde-nevoa);
  border: 1px solid var(--verde-claro);
  border-radius: var(--radius);
  padding: clamp(20px, 2.5vw, 28px) clamp(20px, 2.5vw, 32px);
  color: var(--verde-floresta);
}
@media (max-width: 768px) {
  .text-block .paragraphs > p.boxed { flex: 1 1 100%; }
}

/* ---------- Nossa Missão: seção Localização (texto + imagem) ---------- */
/* Replica de home.css o `.location-grid` (texto esq + imagem dir). */
.section.location .location-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px);
  align-items: center;
}
.section.location .location-text h2 { margin-bottom: 24px !important; }
.section.location .location-text p {
  color: var(--cinza-suave);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 16px !important;
  max-width: 580px;
}
.section.location .location-text p:last-child { margin-bottom: 0 !important; }
.section.location .location-map {
  border-radius: var(--radius-lg) !important;     /* 28px arredondado */
  overflow: hidden !important;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}
.section.location .location-map img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (min-width: 900px) {
  .section.location .location-grid {
    grid-template-columns: 40fr 55fr;    /* 40% / 55% conforme pedido */
    gap: 40px;
  }
}

/* ============================================================
   RESPONSIVIDADE — ajustes mobile
   ============================================================ */

/* ---------- 1) Esconde "Entre em contato" da pílula no mobile ----------
   Esse CTA já aparece DENTRO do drawer hambúrguer. Sem ele a pílula fica
   com logo + idioma + toggle, dando mais espaço pra logo crescer. */
@media (max-width: 1023px) {
  .header-pill .header-cta,
  .site-header .header-cta {
    display: none !important;
  }
}

/* ---------- 2) Logo maior no mobile (+27%) ---------- */
@media (max-width: 1023px) {
  .brand img, .brand img.logo-dark { height: 52px !important; }
}
@media (max-width: 600px) {
  /* Em telas pequenas, dá uma respiradinha mas mantém o aumento */
  .brand img, .brand img.logo-dark { height: 48px !important; }
}

/* ---------- 3) MOBILE-NAV como OVERLAY com fade-in ----------
   Substitui o drawer (slide da direita) por overlay full-screen escuro
   com fade-in. Itens centralizados, sem background verde nos inativos. */
@keyframes taperaMobileFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mobile-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;

  /* Remove slide, troca por opacidade */
  transform: none !important;
  transition: opacity 0.3s ease !important;
  opacity: 0;
  pointer-events: none;

  background: rgba(0, 0, 0, 0.85) !important;
  z-index: 9999 !important;

  /* Centralizado vertical e horizontalmente */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 80px 24px 40px !important;
  overflow-y: auto;
}
.mobile-nav.open {
  opacity: 1;
  pointer-events: auto;
  animation: taperaMobileFadeIn 0.3s ease forwards;
  transform: none !important;
}

.mobile-nav ul {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100%;
  list-style: none;
  margin: 0; padding: 0;
}
.mobile-nav ul li { width: 100%; display: flex; justify-content: center; }

/* ---------- 4) Itens INATIVOS: pill branca translúcida com texto verde ---------- */
.mobile-nav a,
.mobile-nav summary {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 80%;
  max-width: 360px;
  padding: 14px 24px !important;
  border-radius: 36px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;

  /* INATIVO */
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: var(--verde-floresta) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: none !important;

  transition: all 0.2s ease !important;
}
/* Hover — branco sólido, mantém texto verde */
.mobile-nav a:hover,
.mobile-nav summary:hover,
.mobile-nav a:focus-visible,
.mobile-nav summary:focus-visible {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: var(--verde-floresta) !important;
}
/* ATIVO (página atual) — pill verde com texto branco. Sem hover diferenciado. */
.mobile-nav a.is-active,
.mobile-nav a[aria-current="page"],
.mobile-nav .current-menu-item > a,
.mobile-nav a.is-active:hover,
.mobile-nav a[aria-current="page"]:hover,
.mobile-nav .current-menu-item > a:hover {
  background: var(--verde-medio) !important;        /* #2D6A4F */
  border: 1px solid var(--verde-medio) !important;
  color: var(--branco-puro) !important;
  border-radius: 36px !important;
}

/* Submenu "O Projeto" — sub-itens com mesmas cores dos principais ---------- */
.mobile-nav details {
  width: 80%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.mobile-nav details > summary { width: 100%; max-width: none; }

/* Container do dropdown: animação suave de max-height
   (display sempre ativo, browsers escondem nativamente <details> não-open) */
.mobile-nav details > .sub-list {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: calc(100% - 16px);             /* leve indentação */
  margin-left: 16px !important;
  padding: 0 !important;

  /* Animação smooth */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
  margin-top: 0;
}
.mobile-nav details[open] > .sub-list {
  max-height: 600px;                    /* maior que qualquer dropdown real */
  opacity: 1;
  margin-top: 8px !important;
}

/* Cada link do sub-list usa o MESMO visual dos itens principais */
.mobile-nav details > .sub-list a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: none !important;
  padding: 12px 20px !important;
  border-radius: 36px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;

  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: var(--verde-floresta) !important;
  transition: all 0.2s ease !important;
}
.mobile-nav details > .sub-list a:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  color: var(--verde-floresta) !important;
}
/* Sub-item ativo: verde com texto branco (mesma regra dos principais) */
.mobile-nav details > .sub-list a.is-active,
.mobile-nav details > .sub-list a[aria-current="page"],
.mobile-nav details > .sub-list a.is-active:hover,
.mobile-nav details > .sub-list a[aria-current="page"]:hover {
  background: var(--verde-medio) !important;
  border: 1px solid var(--verde-medio) !important;
  color: var(--branco-puro) !important;
}

.mobile-nav summary::after { color: inherit; font-size: 0.875rem; }

/* CTA dentro do overlay — destaque verde */
.mobile-nav .btn.btn-primary {
  margin-top: 16px !important;
  width: 80%;
  max-width: 360px;
  background: var(--verde-medio) !important;
  color: var(--branco-puro) !important;
  border-radius: 36px !important;
  padding: 14px 24px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-align: center;
  text-transform: capitalize !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  box-shadow: none;
}
.mobile-nav .btn.btn-primary:hover {
  background: var(--verde-vivo) !important;
  transform: translateY(-1px);
}

/* ---------- Botão X dedicado (injetado via JS dentro do overlay) ----------
   Fica ACIMA dos itens, alinhado com a borda direita dos itens (80%/360px
   centralizados → borda direita a 10% do viewport). Por isso margin-right:10%. */
.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 0;
  margin-bottom: 24px;
  margin-right: 10%;
  align-self: flex-end;            /* canto direito do flex column */
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  position: relative;              /* contexto pra os <span> absolutos do X */
  transition: all 0.2s ease;
  flex: 0 0 44px;                  /* não estica em flex column */
}
.mobile-nav-close span {
  position: absolute;
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--branco-puro);
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transition: background 0.2s ease;
}
.mobile-nav-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.mobile-nav-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
.mobile-nav-close:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.6);
}
.mobile-nav-close:focus-visible {
  outline: 2px solid var(--verde-vivo);
  outline-offset: 4px;
}

/* ---------- Hambúrguer do header: permanece no header, some quando overlay abre ----------
   Reverte o reposicionamento anterior do menu-toggle. Ele continua dentro da
   pílula. Quando .mobile-nav está aberto (corpo recebe overflow:hidden via JS),
   escondemos o toggle via :has() para não disputar espaço com o X.            */
.menu-toggle span { background: var(--branco-puro); }
.site-header.scrolled .menu-toggle span { background: var(--verde-floresta); }

/* Esconde o hambúrguer enquanto o overlay está aberto (fallback p/ browsers
   sem :has(): usamos um seletor irmão que valha pelo aria-expanded="true"). */
body:has(.mobile-nav.open) .menu-toggle,
body:has(#mobileNav.open) .menu-toggle { visibility: hidden !important; }
/* Fallback adicional via aria-expanded no próprio toggle (suporte amplo) */
.menu-toggle[aria-expanded="true"] { visibility: hidden !important; }

/* ---------- 5) Footer menu vertical no mobile ---------- */
@media (max-width: 768px) {
  .footer-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
  }
  .footer-menu a {
    width: 100%;
    text-align: center;
    margin-bottom: 12px !important;
    height: auto !important;
    padding: 12px 18px !important;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-pill);
  }
  .footer-menu a:last-child { margin-bottom: 0 !important; }
}

/* ============================================================
   FONTES DOS MENUS — DM Sans (revertido de Sansation).
   Sansation continua disponível só pro h2 do footer-cta.
   ============================================================ */
.nav-main, .nav-main ul, .nav-main li,
.nav-link, .nav-link span,
.nav-dropdown, .nav-dropdown a,
.lang-current, .lang-current span,
.lang-list, .lang-option, .lang-option span,
.header-cta, .header-cta span,
.mobile-nav, .mobile-nav ul, .mobile-nav li,
.mobile-nav a, .mobile-nav a span,
.mobile-nav summary, .mobile-nav summary span,
.mobile-nav details, .mobile-nav .sub-list, .mobile-nav .sub-list a,
.mobile-nav .btn, .mobile-nav .btn span {
  font-family: 'DM Sans', sans-serif !important;
}
/* Pesos coerentes com o que cada elemento já usava */
.nav-link, .nav-dropdown a, .lang-current, .lang-option,
.mobile-nav a, .mobile-nav summary {
  font-weight: 500 !important;
}
.header-cta, .mobile-nav .btn.btn-primary {
  font-weight: 700 !important;
}

/* ---------- Mobile-nav: capitalize (não uppercase) ---------- */
.mobile-nav a,
.mobile-nav summary,
.mobile-nav summary span,
.mobile-nav .sub-list a,
.mobile-nav .btn.btn-primary {
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
}

/* ---------- Hero ornaments: 4 colunas desktop / 2 colunas mobile ----------
   Container real (verificado no HTML): .hero-stats-grid */
.hero-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;     /* DESKTOP: 4 colunas */
  gap: 32px !important;
}
/* MOBILE — breakpoint padrão 768px */
@media (max-width: 768px) {
  .hero-stats-grid {
    grid-template-columns: 1fr 1fr !important;          /* 2 colunas */
    gap: 24px 16px !important;
  }
  .hero-stat { border-right: none !important; }
}
/* Divisórias verticais entre stats só no desktop (preserva o visual original) */
@media (min-width: 769px) {
  .hero-stat { border-right: 1px solid rgba(255,255,255,0.18); }
  .hero-stat:last-child { border-right: none; }
}