/* ==========================================================================
   GAGUIM — DESIGN SYSTEM
   Cores validadas por amostragem do logo oficial e do layout aprovado.
   Estrutura: 1) tokens  2) base  3) utilitários  4) componentes  5) seções
   ========================================================================== */

/* 1) TOKENS ================================================================ */
:root {
  /* Marca */
  --g-navy:       #17266C;
  --g-navy-dark:  #081F4D;
  --g-navy-deep:  #051638;
  --g-sky:        #65C6EB;
  --g-green:      #91C719;
  --g-green-dark: #7CAB13;
  --g-yellow:     #FFC20E;

  /* Neutros */
  --g-bg:         #F5F8FC;
  --g-white:      #FFFFFF;
  --g-ink:        #0E1A33;
  --g-body:       #5A6478;
  --g-muted:      #8A93A6;
  --g-line:       #E3EAF4;
  --g-line-dark:  rgba(255,255,255,.16);

  /* Texto sobre fundo escuro */
  --g-on-dark:        #FFFFFF;
  --g-on-dark-soft:   rgba(255,255,255,.78);

  /* Tipografia */
  --g-font: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --g-font-script: "Caveat", "Segoe Script", cursive;

  --g-fs-eyebrow: .75rem;
  --g-fs-body:    clamp(.95rem, .9rem + .2vw, 1.0625rem);
  --g-fs-lead:    clamp(1rem, .95rem + .3vw, 1.1875rem);
  --g-fs-h3:      clamp(1.05rem, 1rem + .35vw, 1.3rem);
  --g-fs-h2:      clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --g-fs-h1:      clamp(2.1rem, 1.35rem + 3.2vw, 3.9rem);
  --g-fs-stat:    clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);

  /* Ritmo */
  --g-gap:        clamp(1rem, .7rem + 1.2vw, 1.75rem);
  --g-section-y:  clamp(3.5rem, 2.2rem + 5vw, 7rem);
  --g-radius:     14px;
  --g-radius-lg:  22px;
  --g-pill:       999px;

  --g-shadow-sm:  0 2px 10px rgba(8,31,77,.06);
  --g-shadow:     0 12px 34px rgba(8,31,77,.10);
  --g-shadow-lg:  0 26px 60px rgba(5,22,56,.24);

  --g-maxw:       1200px;
  --g-transition: .25s cubic-bezier(.4,0,.2,1);

  /* Gradiente institucional (CTA) */
  --g-gradient: linear-gradient(90deg, var(--g-navy) 0%, #1D63B8 28%, var(--g-green) 68%, var(--g-yellow) 100%);
}

/* 2) BASE ================================================================== */
body.gaguim {
  font-family: var(--g-font);
  font-size: var(--g-fs-body);
  line-height: 1.65;
  color: var(--g-body);
  background: var(--g-white);
  -webkit-font-smoothing: antialiased;
  /* SEM overflow-x: hidden aqui.
     Qualquer overflow != visible transforma o elemento em contêiner de
     rolagem, e `position: sticky` passa a grudar NELE em vez da viewport —
     era o que impedia o mapa de acompanhar a lista em /mapa-de-atuacao/.
     A rede contra rolagem lateral deixou de ser necessária quando as causas
     reais foram corrigidas (min-width: 0 nas grades). Se voltar a estourar,
     o certo é achar o elemento com ?gdebug=1, não escondê-lo aqui. */
}

.gaguim h1, .gaguim h2, .gaguim h3, .gaguim h4 {
  font-family: var(--g-font);
  color: var(--g-navy);
  line-height: 1.14;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0;
}
.gaguim h1 { font-size: var(--g-fs-h1); letter-spacing: -.03em; }
.gaguim h2 { font-size: var(--g-fs-h2); letter-spacing: -.03em; }
.gaguim h3 { font-size: var(--g-fs-h3); }
.gaguim p  { margin: 0 0 1em; }
.gaguim p:last-child { margin-bottom: 0; }
.gaguim img { max-width: 100%; height: auto; }
.gaguim a { color: var(--g-navy); text-decoration: none; transition: color var(--g-transition); }

/* Foco visível — acessibilidade (nunca remover) */
.gaguim :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--g-sky);
  outline-offset: 3px;
  border-radius: 4px;
}
.g-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--g-navy); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--g-radius) 0; font-weight: 600;
}
.g-skip-link:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .gaguim *, .gaguim *::before, .gaguim *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* Itens de grid/flex têm min-width:auto por padrão e se recusam a encolher
   abaixo do próprio conteúdo — é a causa clássica de estouro horizontal no
   mobile. Zerar isso nas nossas grades resolve na raiz. */
.g-stats > *, .g-kpis > *, .g-cards > *, .g-gallery > *, .g-collage > * { min-width: 0; }
.g-card, .g-stat, .g-kpi { min-width: 0; }

/* 3) UTILITÁRIOS =========================================================== */
.g-dark  { background: var(--g-navy-dark); color: var(--g-on-dark-soft); }
.g-soft  { background: var(--g-bg); }

/* Contraste em fundos escuros.
   O Kit do Elementor pinta .elementor-heading-title com a cor Primary e o
   text-editor com a cor Text, ambos com especificidade (0,2,0). Um seletor
   como `.g-dark h2` (0,1,1) PERDE para eles e o título sai azul sobre azul.
   Por isso as regras abaixo miram as classes do Elementor. */
.gaguim :is(.g-dark, .g-hero, .g-pagehead, .g-cta-band) .elementor-heading-title,
.gaguim :is(.g-dark, .g-hero, .g-pagehead, .g-cta-band) :is(h1, h2, h3, h4) {
  color: var(--g-on-dark);
}
.gaguim :is(.g-dark, .g-hero, .g-pagehead, .g-cta-band) .elementor-widget-text-editor,
.gaguim :is(.g-dark, .g-hero, .g-pagehead, .g-cta-band) p {
  color: var(--g-on-dark-soft);
}
.gaguim :is(.g-dark, .g-hero, .g-pagehead) .g-eyebrow { color: var(--g-on-dark); }

.g-lead { font-size: var(--g-fs-lead); }
.g-center { text-align: center; }

/* Eyebrow: rótulo pequeno com os 3 pontos da marca */
.g-eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-size: var(--g-fs-eyebrow); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--g-navy); margin-bottom: 1rem;
}
.g-dark .g-eyebrow { color: var(--g-on-dark); }
.g-eyebrow::before {
  content: ""; flex: 0 0 auto; width: 34px; height: 8px;
  background:
    radial-gradient(circle 4px at 4px 4px,  var(--g-sky)    99%, transparent) 0 0/13px 8px no-repeat,
    radial-gradient(circle 4px at 4px 4px,  var(--g-green)  99%, transparent) 13px 0/13px 8px no-repeat,
    radial-gradient(circle 4px at 4px 4px,  var(--g-yellow) 99%, transparent) 26px 0/8px 8px no-repeat;
}
.g-eyebrow--single::before {
  width: 8px;
  background: radial-gradient(circle 4px at 4px 4px, var(--g-green) 99%, transparent) 0 0/8px 8px no-repeat;
}
.g-center .g-eyebrow { justify-content: center; }

/* Palavra manuscrita colorida do layout aprovado */
.g-script {
  font-family: var(--g-font-script);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--g-sky);
  /* A Caveat tem altura-x baixa: no mesmo corpo do título ela parece menor.
     1.3em equilibra o peso visual das duas fontes. */
  font-size: 1.3em;
  /* line-height um pouco acima de 1 para não cortar as descidas (g, p, ç). */
  line-height: 1.06;
}
.g-script--yellow { color: var(--g-yellow); }
.g-script--green  { color: var(--g-green); }

/* O "444" como elemento gráfico */
.g-444 {
  font-weight: 800; letter-spacing: -.04em; line-height: .85;
  font-size: clamp(4rem, 2rem + 12vw, 9.5rem);
  background: linear-gradient(100deg, var(--g-sky) 0%, var(--g-green) 52%, var(--g-yellow) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  user-select: none;
}

/* 4) COMPONENTES =========================================================== */

/* --- Botões pill ---
   Existem DOIS formatos de botão no site e todo seletor precisa cobrir os dois:

   1) <a class="g-btn g-btn--primary">        — gerado pelos shortcodes do Gaguim Core
   2) widget "Botão" do Elementor             — o campo "Classes CSS" do Elementor é
      aplicado ao WRAPPER do widget (<div class="elementor-widget-button g-btn ...">),
      NUNCA ao <a class="elementor-button"> de dentro. Estilizar o wrapper produz
      uma pílula de largura total com o botão real dentro — o famoso "botão dentro
      do botão". Por isso o alvo é sempre `.g-btn a.elementor-button`.

   O `a` no seletor também garante especificidade acima do CSS do Kit do Elementor,
   que pinta .elementor-button com a cor Accent. */

/* O wrapper é só um marcador: não recebe aparência nenhuma.
   Só evitamos que ele estique dentro dos containers flex. */
.gaguim .elementor-widget-button.g-btn {
  align-self: flex-start;
  max-width: 100%;
}
.gaguim .elementor-widget-button.g-btn .elementor-button-wrapper { display: flex; }

.gaguim a.g-btn,
.gaguim .g-btn a.elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.75rem;
  border-radius: var(--g-pill);
  font-size: .8125rem; font-weight: 700;
  line-height: 1.2;
  letter-spacing: .09em; text-transform: uppercase;
  border: 2px solid transparent;
  text-decoration: none;
  /* Rótulo de CTA não quebra: "FALE COM / GAGUIM" em duas linhas empobrece a
     leitura e desalinha o botão. Se faltar espaço, o container é que se ajusta. */
  white-space: nowrap;
  transition: background var(--g-transition), color var(--g-transition),
              border-color var(--g-transition), transform var(--g-transition),
              box-shadow var(--g-transition);
  /* Sem will-change: ele criava uma camada de composição permanente para CADA
     botão da página, sem ganho real — só custo de memória de GPU e mais
     superfície para artefato de driver. */
}
.gaguim a.g-btn:hover,
.gaguim .g-btn a.elementor-button:hover { transform: translateY(-2px); }

/* O ícone do widget do Elementor não pode herdar espaçamentos do tema */
.gaguim .g-btn a.elementor-button .elementor-button-content-wrapper {
  display: inline-flex; align-items: center; gap: .6rem;
}

/* Sólido verde — a cor de destaque da marca, usada na ação principal.
   O texto é azul-escuro, não branco: branco sobre #91C719 dá contraste 2:1
   (reprova em WCAG AA), enquanto o azul-escuro dá 6,8:1. */
.gaguim a.g-btn--accent,
.gaguim .g-btn--accent a.elementor-button {
  background-color: var(--g-green);
  color: var(--g-navy-dark);
  box-shadow: 0 6px 20px rgba(145,199,25,.30);
}
.gaguim a.g-btn--accent:hover,
.gaguim .g-btn--accent a.elementor-button:hover {
  background-color: var(--g-green-dark);
  color: var(--g-navy-dark);
  box-shadow: 0 10px 26px rgba(145,199,25,.38);
}

/* Sólido azul */
.gaguim a.g-btn--primary,
.gaguim .g-btn--primary a.elementor-button {
  background-color: var(--g-navy); color: #fff; box-shadow: var(--g-shadow-sm);
}
.gaguim a.g-btn--primary:hover,
.gaguim .g-btn--primary a.elementor-button:hover {
  background-color: var(--g-navy-dark); color: #fff; box-shadow: var(--g-shadow);
}

/* Sólido branco (sobre fundo escuro) */
.gaguim a.g-btn--light,
.gaguim .g-btn--light a.elementor-button {
  background-color: #fff; color: var(--g-navy); box-shadow: var(--g-shadow-sm);
}
.gaguim a.g-btn--light:hover,
.gaguim .g-btn--light a.elementor-button:hover {
  background-color: #fff; color: var(--g-navy-dark); box-shadow: var(--g-shadow);
}

/* Contorno sobre fundo escuro */
.gaguim a.g-btn--ghost,
.gaguim .g-btn--ghost a.elementor-button {
  background-color: transparent; color: #fff; border-color: rgba(255,255,255,.45);
}
.gaguim a.g-btn--ghost:hover,
.gaguim .g-btn--ghost a.elementor-button:hover {
  background-color: rgba(255,255,255,.12); color: #fff; border-color: #fff;
}

/* Contorno sobre fundo claro */
.gaguim a.g-btn--outline,
.gaguim .g-btn--outline a.elementor-button {
  background-color: transparent; color: var(--g-navy); border-color: var(--g-line);
}
.gaguim a.g-btn--outline:hover,
.gaguim .g-btn--outline a.elementor-button:hover {
  background-color: var(--g-navy); color: #fff; border-color: var(--g-navy);
}

/* Link discreto "SAIBA MAIS →" */
.g-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--g-navy);
}
.g-link::after { content: "→"; transition: transform var(--g-transition); }
.g-link:hover::after { transform: translateX(4px); }

/* --- Neutraliza o hover cor-de-rosa do reset do Hello Elementor ------------
   O reset.css do tema pai traz:
     [type="button"]:hover, [type="button"]:focus,
     [type="submit"]:hover, [type="submit"]:focus { background: #cc3366 }
   Nossos componentes interativos (card de vídeo, play, setas) são
   <button type="button">, então herdavam esse rosa. Como a regra também vale
   para :focus, a cor PERSISTIA depois do clique.
   Especificidade: a do tema é (0,2,0); estas são (0,3,0) e vencem. */
.gaguim .g-vcard:hover,
.gaguim .g-vcard:focus,
.gaguim .g-video__play:hover,
.gaguim .g-video__play:focus {
  background-color: transparent;
}
.gaguim .g-carousel__nav:hover,
.gaguim .g-carousel__nav:focus {
  background-color: var(--g-green);
  color: var(--g-navy-dark);
  box-shadow: 0 10px 26px rgba(145,199,25,.45);
}

/* --- Grades de cards --- */
.g-cards { display: grid; gap: var(--g-gap); }
.g-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199px) {
  .g-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .g-cards--2, .g-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .g-cards--2, .g-cards--3, .g-cards--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Cards --- */
.g-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--g-line);
  border-radius: var(--g-radius); overflow: hidden; height: 100%;
  transition: box-shadow var(--g-transition), transform var(--g-transition),
              border-color var(--g-transition);
}
.g-card:hover { transform: translateY(-4px); box-shadow: var(--g-shadow); border-color: transparent; }
.g-card__body { padding: clamp(1.25rem, 1rem + .8vw, 1.75rem); display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.g-card__title { font-size: var(--g-fs-h3); font-weight: 700; color: var(--g-navy); }
.g-card__text  { font-size: .9375rem; color: var(--g-body); flex: 1; }
/* Quando o card não tem resumo (Home), era o .g-card__text que empurrava o
   "Leia mais" para baixo. Sem ele, o CTA precisa do próprio espaçador para
   continuar alinhado na base em toda a linha de cards. */
.g-card__body > .g-link { margin-top: auto; }
.g-card__icon  { color: var(--g-green); font-size: 1.75rem; line-height: 1; }
.g-card__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Card de notícia com selo de data */
.g-news__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.g-news__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.g-card:hover .g-news__media img { transform: scale(1.05); }
.g-news__date {
  position: absolute; left: 0; bottom: 0;
  background: var(--g-navy); color: #fff;
  padding: .5rem .7rem; text-align: center; line-height: 1;
  border-radius: 0 var(--g-radius) 0 0;
}
.g-news__date strong { display: block; font-size: 1.15rem; font-weight: 700; }
.g-news__date span { font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.g-news__cat {
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--g-green);
}

/* --- Indicadores (faixa de números) --- */
.g-stats {
  display: grid; gap: clamp(1rem, .5rem + 1.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  background: var(--g-navy-dark);
  border-radius: var(--g-radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--g-shadow-lg);
}
.g-stat { display: flex; align-items: center; gap: .9rem; position: relative; }
.g-stat + .g-stat::before {
  content: ""; position: absolute; left: calc(var(--g-gap) * -1); top: 10%;
  width: 1px; height: 80%; background: var(--g-line-dark);
}
.g-stat__icon { flex: 0 0 auto; color: var(--g-yellow); display: grid; place-items: center; width: 34px; height: 34px; }
.g-stat__icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* Ícone enviado pelo cliente: mesma caixa dos ícones do design system, sem
   distorcer a proporção do arquivo. */
.g-stat__icon .g-stat__img { width: 34px; height: 34px; object-fit: contain; }
.g-stat__label { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: .2rem; }
.g-stat__value { display: block; font-size: 1.0625rem; font-weight: 700; color: #fff; line-height: 1.25; }
.g-stat__value em { font-style: normal; color: var(--g-green); }

/* Indicadores em linha (bloco Realizações).
   Os spans precisam ser bloco: como inline, valor e legenda colavam na mesma
   linha ("R$ 10 milhõesem emenda parlamentar..."). */
.g-kpis { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.g-kpi { display: flex; flex-direction: column; gap: .3rem; }
.g-kpi__value {
  display: block; font-size: var(--g-fs-stat); font-weight: 700;
  color: var(--g-green); line-height: 1.15;
}
.g-kpi__label { display: block; font-size: .8125rem; line-height: 1.45; color: var(--g-on-dark-soft); }

/* --- Dado ainda não confirmado --- */
.g-pending {
  display: inline-block; padding: .1em .5em; border-radius: 5px;
  background: rgba(255,194,14,.16); border: 1px dashed var(--g-yellow);
  color: var(--g-yellow); font-size: .82em; font-weight: 700; letter-spacing: .02em;
}
.g-soft .g-pending, .gaguim:not(.g-dark) .g-pending { color: #8A6A00; }

/* 5) SEÇÕES ================================================================ */

/* --- Logo ---
   A altura vem do shortcode, via --g-logo-h (configurável em
   Gaguim → Configurações → Identidade). A largura acompanha sozinha, então
   trocar o logo por um de outra proporção não distorce nem encolhe nada. */
.g-logo { display: inline-flex; align-items: center; line-height: 0; }
.g-logo img {
  height: var(--g-logo-h, 58px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 767px) {
  /* No topo o espaço é curto: limita sem mexer na configuração do cliente. */
  .gaguim .g-header .g-logo img { height: min(var(--g-logo-h, 58px), 44px); }
}

/* --- Header --- */
/* Fundo sólido, sem backdrop-filter.
   O filtro promovia o header a uma camada de composição própria, repintada a
   cada quadro de rolagem — e, em GPUs Intel no Windows, camadas compositadas
   podem ser pintadas de MAGENTA (a cor clássica de textura inválida). Era a
   origem do rosa relatado no header, na caixa do vídeo e nas setas. */
.g-header {
  position: sticky; top: 0; z-index: 999;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--g-transition), border-color var(--g-transition);
}
.g-header.is-stuck { box-shadow: 0 6px 24px rgba(8,31,77,.08); border-bottom-color: var(--g-line); }
.g-header .elementor-nav-menu .elementor-item {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--g-navy);
}
.g-header .elementor-nav-menu .elementor-item:hover,
.g-header .elementor-nav-menu .current-menu-item .elementor-item {
  color: var(--g-navy-dark);
}
.g-header .elementor-nav-menu .current-menu-item .elementor-item::after {
  content: ""; display: block; height: 3px; border-radius: 2px;
  background: var(--g-yellow); margin-top: 6px;
}

/* --- Hero --- */
.g-hero {
  position: relative; isolation: isolate;
  /* Reserva visual para quando não houver imagem. Propriedades da fotografia
     não são definidas aqui: tamanho, posição, repetição, filtros, opacidade e
     mesclagem continuam inteiramente sob controle do editor do Elementor. */
  background-color: var(--g-navy-deep);
  background-image:
    radial-gradient(115% 85% at 76% 18%, rgba(101,198,235,.30), transparent 62%),
    radial-gradient(90% 70% at 100% 100%, rgba(145,199,25,.16), transparent 60%),
    linear-gradient(105deg, #0A2B63 0%, #14468F 52%, #1B5AA8 100%);
  color: var(--g-on-dark-soft);
  overflow: hidden;
}

/* --- Foto de fundo do herói (definida no editor do Elementor) --------------
   ONDE A IMAGEM MORA: o Elementor renderiza a "sobreposição de plano de fundo"
   de um contêiner no PRÓPRIO ::before dele
   (`content: var(--background-overlay)`), com um seletor de especificidade
   (0,3,0). Ou seja: o ::before do herói deixa de ser nosso no momento em que
   alguém escolhe uma imagem no editor — foi exatamente isso que aconteceu, e é
   por isso que a foto "não aparecia": a regra de cima nunca chegava a valer, e
   a que valia vinha com opacidade 50% + mesclagem `multiply`, que lavava a
   imagem contra o azul.
   A LIÇÃO: para desenhar por cima de um fundo do Elementor, não dispute o
   ::before — use o ::after.

   O ::before fica reservado ao Elementor e não recebe nenhuma normalização do
   tema. O ::after abaixo é a única camada visual criada por nós. */

/* Véu azul + escurecimento, SEMPRE presente.
   (Tentativa que não funcionou, para ninguém repetir: usar
   `content: var(--background-overlay)` como interruptor de "tem foto?". A
   variável existe, mas o Elementor a declara DENTRO do bloco do ::before, e
   propriedade personalizada declarada num pseudo-elemento não chega ao outro.
   O ::after nunca era gerado e o texto ficava ilegível sobre a foto crua.)
   Como o véu vale nos dois estados, o campo azul de reserva acima foi
   clareado para compensar.
   Três camadas, de cima para baixo:
     1. brilho frio no canto onde fica o retrato;
     2. escurecimento em degradê, forte à esquerda (H1 e subtítulo) e leve à
        direita, onde a foto pode respirar;
     3. véu azul institucional sobre a imagem inteira, para ela entrar na
        paleta da marca. */
.g-hero::after {
  content: "";
  display: block;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(115% 85% at 76% 18%, rgba(101,198,235,.16), transparent 62%),
    linear-gradient(90deg,
      rgba(5,22,56,.88) 0%,
      rgba(5,22,56,.70) 38%,
      rgba(5,22,56,.34) 70%,
      rgba(5,22,56,.22) 100%),
    linear-gradient(105deg, rgba(8,31,77,.58) 0%, rgba(13,45,102,.48) 52%, rgba(16,53,115,.40) 100%);
}
/* O Elementor insere um contêiner de layout diretamente dentro do herói.
   Ele precisa formar uma camada acima do ::after; elevar apenas os widgets
   internos não funciona porque continuam presos ao contexto do pai. */
.gaguim .g-hero > .e-con {
  position: relative;
  z-index: 2;
}
.g-hero h1 { color: #fff; }
.g-hero__sub { max-width: 34ch; font-size: var(--g-fs-lead); }
.g-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Card flutuante "COMPROMISSO" */
.g-hero__card {
  background: #fff; border-radius: 10px; padding: 1.15rem 1.35rem;
  border-top: 4px solid var(--g-green);
  box-shadow: var(--g-shadow-lg);
  max-width: 260px;
}
/* Atenção: o card é uma ilha CLARA dentro de uma seção escura. As regras de
   contraste de .g-hero (que pintam todo p de branco) têm especificidade (0,2,1)
   e passariam por cima aqui, deixando texto branco sobre fundo branco. Por isso
   estas regras também carregam .gaguim e vêm depois. */
.gaguim .g-hero__card strong {
  display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--g-navy); margin-bottom: .5rem;
}
.gaguim .g-hero__card p { font-size: .875rem; color: var(--g-body); line-height: 1.5; }

/* Faixa de indicadores sobreposta ao hero */
.g-stats-float { margin-top: calc(var(--g-section-y) * -.55); position: relative; z-index: 5; }

/* --- Colagem da biografia --- */
.g-collage { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: center; }
.g-collage__444 {
  position: absolute; top: -8%; left: 42%; z-index: 0; opacity: .95; pointer-events: none;
}
.g-collage figure { position: relative; z-index: 1; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: var(--g-shadow); }
.g-collage figure:nth-child(1) { transform: rotate(-4deg); }
.g-collage figure:nth-child(2) { transform: rotate(2deg) translateY(12px); z-index: 2; }
.g-collage figure:nth-child(3) { transform: rotate(5deg); }
.g-collage img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }

/* --- Timeline da trajetória --- */
.g-timeline { position: relative; display: grid; gap: 1.25rem; }
.g-timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--g-sky), var(--g-green), var(--g-yellow));
  border-radius: 2px;
}
.g-tl-item { position: relative; padding-left: 2.25rem; }
.g-tl-item::before {
  content: ""; position: absolute; left: 0; top: .45rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--g-navy);
}
.g-tl-item__period {
  display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--g-green); margin-bottom: .2rem;
}
.g-tl-item__role { font-size: .875rem; color: var(--g-muted); }

@media (min-width: 1024px) {
  .g-timeline--alt { grid-template-columns: 1fr 34px 1fr; align-items: start; }
  .g-timeline--alt::before { left: 50%; transform: translateX(-50%); }
  .g-timeline--alt .g-tl-item { padding-left: 0; }
  .g-timeline--alt .g-tl-item:nth-child(odd)  { grid-column: 1; text-align: right; padding-right: 2.25rem; }
  .g-timeline--alt .g-tl-item:nth-child(even) { grid-column: 3; padding-left: 2.25rem; }
  .g-timeline--alt .g-tl-item:nth-child(odd)::before  { left: auto; right: -8px; }
  .g-timeline--alt .g-tl-item:nth-child(even)::before { left: -8px; }
}

/* --- Faixa CTA em gradiente --- */
.g-cta-band { background: var(--g-gradient); color: #fff; }
.g-cta-band :is(h2, h3) { color: #fff; }
.g-cta-band p { color: rgba(255,255,255,.92); }

/* --- Vídeo com carregamento sob demanda --- */
.g-video { position: relative; border-radius: var(--g-radius-lg); overflow: hidden; background: var(--g-navy-dark); aspect-ratio: 16/9; }
.g-video img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
.g-video__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; color: #fff;
}
.g-video__play::before {
  content: ""; width: 84px; height: 84px; border-radius: 50%;
  /* Sem backdrop-filter: ele promovia TODO o .g-video a camada compositada,
     que é o que ficava magenta. O contraste vem da borda e da opacidade. */
  background: rgba(255,255,255,.26); border: 2px solid #fff;
  transition: transform var(--g-transition), background var(--g-transition);
}
.g-video__play::after {
  content: ""; position: absolute;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
  margin-left: 6px;
}
.g-video__play:hover::before { transform: scale(1.08); background: rgba(255,255,255,.3); }
.g-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Vídeos: player principal + carrossel do canal --- */
/* minmax(0,1fr) é obrigatório: a coluna padrão do grid tem min-width auto e
   seria dimensionada pelo conteúdo do trilho do carrossel (medido: 1327px num
   container de 1200), fazendo a seção vazar para fora do container. */
.g-videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.g-videos > * { min-width: 0; }
.g-carousel { min-width: 0; }
.g-videos__caption { font-size: 1rem; color: var(--g-navy); margin: 0; }
.g-dark .g-videos__caption { color: #fff; }
.g-videos__more { margin: 0; }

/* Carrossel por scroll-snap: sem biblioteca, sem JS pesado, e continua
   funcionando com o dedo no mobile e com Tab no teclado. */
.g-carousel {
  position: relative;
  /* Em vw, não em %: a mesma variável é usada na largura do card (onde % valeria
     a largura) e no topo das setas (onde % valeria a ALTURA). vw é igual nos dois. */
  --card-w: clamp(220px, 24vw, 300px);
}
.g-carousel__track {
  display: flex;
  gap: var(--g-gap);
  list-style: none;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.g-carousel__track::-webkit-scrollbar { display: none; }
.g-carousel__item {
  flex: 0 0 var(--card-w);
  min-width: 0;
  scroll-snap-align: start;
}

.g-carousel__nav {
  position: absolute;
  /* Centro da MINIATURA (16/9), não do card inteiro — que inclui data e título
     e jogaria a seta para baixo. 9/16/2 = 0.28125; +4px do padding do trilho;
     -24px = metade da altura do botão (44px + 2px de borda de cada lado).
     Sem translateY: transform no estado base promovia a seta a camada
     compositada — a mesma família de artefato do backdrop-filter. */
  top: calc(var(--card-w) * 0.28125 + 4px - 24px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #fff;
  color: var(--g-navy);
  box-shadow: 0 6px 20px rgba(8,31,77,.18);
  cursor: pointer;
  transition: background var(--g-transition), color var(--g-transition),
              opacity var(--g-transition), box-shadow var(--g-transition);
}
.g-carousel__nav svg { width: 20px; height: 20px; }
/* Verde da marca, igual à ação principal — o azul se confundia com o texto.
   O destaque vem de cor e sombra, não de escala: nada de transform aqui. */
.g-carousel__nav:hover {
  background: var(--g-green);
  color: var(--g-navy-dark);
  box-shadow: 0 10px 26px rgba(145,199,25,.45);
}
.g-carousel__nav--prev { left: -20px; }
.g-carousel__nav--next { right: -20px; }
.g-carousel__nav[hidden],
.g-carousel__nav:disabled { opacity: 0; pointer-events: none; }

/* Em telas menores não há margem sobrando fora do container: as setas entram
   um pouco sobre as miniaturas em vez de vazar para fora da tela. */
@media (max-width: 1279px) {
  .g-carousel__nav--prev { left: 2px; }
  .g-carousel__nav--next { right: 2px; }
}

/* Card de vídeo */
.g-vcard {
  display: flex; flex-direction: column; gap: .7rem;
  width: 100%; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: inherit;
  font-family: inherit;
  /* O user-agent aplica white-space próprio em <button>, e o título saía numa
     linha só, cortado no meio da palavra. */
  white-space: normal;
}
.g-vcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: var(--g-radius);
  overflow: hidden;
  background: var(--g-navy-dark);
  box-shadow: var(--g-shadow-sm);
}
.g-vcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease, opacity var(--g-transition);
}
.g-vcard:hover .g-vcard__media img { transform: scale(1.06); opacity: .85; }
.g-vcard__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.g-vcard__play::before {
  content: "";
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.28);
  border: 2px solid #fff;
  transition: transform var(--g-transition), background var(--g-transition);
}
.g-vcard__play::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}
.g-vcard:hover .g-vcard__play::before { transform: scale(1.1); background: rgba(145,199,25,.85); }
/* min-width: 0 também aqui — sem isso o título usa a largura de max-content,
   estoura o card e o clamp de 2 linhas nunca chega a agir (o texto sai cortado
   no meio da palavra, sem reticências). */
.g-vcard { min-width: 0; }
.g-vcard__body { display: grid; gap: .25rem; min-width: 0; }
.g-vcard__date {
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--g-green);
}
.g-vcard__title {
  font-size: .9375rem; font-weight: 600; line-height: 1.35;
  color: var(--g-navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
}
.g-dark .g-vcard__title { color: #fff; }
.g-vcard[aria-current="true"] .g-vcard__media { outline: 3px solid var(--g-green); outline-offset: 2px; }

/* --- Redes sociais --- */
.g-socials { display: flex; flex-wrap: wrap; gap: .6rem; }
.g-social {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--g-line-dark); color: #fff;
  transition: background var(--g-transition), border-color var(--g-transition), transform var(--g-transition);
}
.g-social:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; transform: translateY(-2px); }
.g-social svg { width: 18px; height: 18px; fill: currentColor; }
.g-socials--light .g-social { border-color: var(--g-line); color: var(--g-navy); }
.g-socials--light .g-social:hover { background: var(--g-navy); color: #fff; border-color: var(--g-navy); }

/* --- Footer --- */
.g-footer { background: var(--g-navy-dark); color: var(--g-on-dark-soft); }
.g-footer :is(h2,h3,h4,strong.g-footer__h) { color: #fff; }
.g-footer__h {
  display: block; font-size: .625rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; margin-bottom: .65rem;
}
.g-footer a { color: var(--g-on-dark-soft); }
.g-footer a:hover { color: #fff; }
.g-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.g-footer__contact { display: grid; gap: .55rem; }
.g-footer__contact li { display: flex; gap: .55rem; align-items: flex-start; font-size: .875rem; }
/* E-mails e endereços longos precisam quebrar: como item flex, o <span> tem
   min-width auto e estourava o card (o e-mail do gabinete saía cortado). */
.g-footer__contact li > span { min-width: 0; overflow-wrap: anywhere; }
.g-footer__contact svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: .22rem; fill: none; stroke: var(--g-green); stroke-width: 1.8; }
.g-footer__bottom {
  border-top: 1px solid var(--g-line-dark);
  font-size: .8125rem; color: rgba(255,255,255,.6);
}

/* --- Galeria ---
   Colunas fixas: com auto-fill o desktop abria 7 colunas e sobrava uma foto
   solta na segunda linha. */
.g-gallery { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-gallery a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1; }
.g-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.g-gallery a:hover img { transform: scale(1.06); }

/* --- Página interna de um item (Proposta / Realização) --------------------
   A faixa escura do topo é a MESMA das listagens (.g-pagehead): o visitante
   que clica num card não muda de linguagem visual, só de conteúdo. */

/* Trilha. As cores precisam de .gaguim porque as regras de contraste de
   .g-pagehead pintam todo `a`/`p` da faixa, com especificidade (0,2,1). */
.g-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem;
  margin-bottom: 1.15rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.gaguim .g-crumbs, .gaguim .g-crumbs a { color: rgba(255,255,255,.62); }
.gaguim .g-crumbs a:hover { color: #fff; }
.gaguim .g-crumbs [aria-current] { color: #fff; }
.g-crumbs__sep { opacity: .45; }

.g-single__title { display: flex; align-items: center; gap: clamp(.85rem, .6rem + .8vw, 1.25rem); }
.g-single__icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(52px, 4vw, 66px); height: clamp(52px, 4vw, 66px);
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  border: 1px solid var(--g-line-dark);
  color: var(--g-green);
}
.g-single__icon svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.6; }

.gaguim .g-single__head .g-lead { max-width: 62ch; margin-top: 1.1rem; }
.g-single__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.15rem; }
.g-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .9rem; border-radius: var(--g-pill);
  border: 1px solid var(--g-line-dark);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
.gaguim .g-single__head .g-tag { color: var(--g-on-dark); }
.g-tag svg { width: 15px; height: 15px; fill: none; stroke: var(--g-green); stroke-width: 1.8; }
.g-single__actions { margin-top: 1.6rem; }

/* Faixa de indicadores da Realização. O bloco não imprime nada quando o item
   não tem nenhum dado confirmado — e uma faixa escura vazia, com o padding
   gravado no Elementor, sobraria no meio da página. */
.gaguim .g-single-kpis:not(:has(.g-kpis)) { display: none; }

/* Capa (as Realizações herdam a imagem da notícia de origem) */
.g-single__cover {
  margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--g-radius-lg); overflow: hidden; box-shadow: var(--g-shadow);
}
.g-single__cover img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }

/* Texto longo do item. O corpo continua vindo do editor do WordPress, então o
   estilo precisa cobrir o HTML que o cliente pode gerar por lá. */
.g-prose { font-size: var(--g-fs-lead); line-height: 1.8; color: var(--g-body); }
.gaguim .g-prose :is(h2, h3, h4) { margin: 2.1rem 0 .8rem; }
.gaguim .g-prose :is(h2, h3, h4):first-child { margin-top: 0; }
.gaguim .g-prose h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }
.gaguim .g-prose h3 { font-size: var(--g-fs-h3); }
.gaguim .g-prose p { margin: 0 0 1.15em; }
.gaguim .g-prose :is(ul, ol) { margin: 0 0 1.15em; padding-left: 1.3rem; display: grid; gap: .45rem; }
.gaguim .g-prose li::marker { color: var(--g-green); }
.gaguim .g-prose a {
  color: var(--g-navy); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--g-sky); text-underline-offset: 3px;
}
.gaguim .g-prose a:hover { color: var(--g-navy-dark); text-decoration-color: var(--g-navy-dark); }
.gaguim .g-prose blockquote {
  margin: 1.75rem 0; padding: .2rem 0 .2rem 1.35rem;
  border-left: 3px solid var(--g-green); color: var(--g-ink);
}
.gaguim .g-prose img { border-radius: var(--g-radius); }
/* As 97 notícias vêm da produção, em blocos do Gutenberg: 12 delas trazem
   figuras dentro do texto. Sem isto a imagem encosta no parágrafo seguinte e
   a legenda vira corpo de texto. */
.gaguim .g-prose :is(figure, .wp-block-image) { margin: 1.75rem 0; }
.gaguim .g-prose :is(figure, .wp-block-image) img { display: block; width: 100%; height: auto; }
.gaguim .g-prose figcaption {
  margin-top: .6rem; font-size: .8125rem; line-height: 1.5;
  color: var(--g-muted); text-align: left;
}
.gaguim .g-prose :is(iframe, video) { max-width: 100%; border-radius: var(--g-radius); }
.gaguim .g-prose > em:only-child, .gaguim .g-prose p:only-child em { color: var(--g-muted); }

/* Coluna lateral com os demais itens.
   Sem `position: sticky` de propósito: aqui ele exigiria que a célula do grid,
   o container do Elementor e o wrapper do widget colaborassem (ver as três
   condições registradas no AI_CONTEXT). O ganho não paga a fragilidade. */
.g-aside__card {
  background: var(--g-bg); border: 1px solid var(--g-line);
  border-radius: var(--g-radius); padding: clamp(1.1rem, .9rem + .6vw, 1.5rem);
}
/* O .gaguim é obrigatório: o título da coluna é um <h2> de verdade (a coluna
   precisa entrar no sumário da página) e `.gaguim h2` — (0,1,1) — venceria um
   seletor de classe sozinho, jogando o rótulo para 48px. */
.gaguim .g-aside__title {
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.4; color: var(--g-navy); margin: 0 0 .9rem;
}
.g-aside__list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: .15rem; }
.g-aside__link {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem; border-radius: 10px;
  transition: background var(--g-transition), box-shadow var(--g-transition);
}
.g-aside__link:hover { background: #fff; box-shadow: var(--g-shadow-sm); }
.g-aside__icon { flex: 0 0 auto; color: var(--g-green); line-height: 0; margin-top: .1rem; }
.g-aside__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* Nas notícias o lugar do ícone é ocupado pela miniatura: é ela que ajuda a
   escolher a próxima leitura. */
.g-aside__thumb {
  flex: 0 0 auto; width: 58px; height: 58px;
  border-radius: 10px; overflow: hidden; background: var(--g-line);
}
.g-aside__thumb img { width: 100%; height: 100%; object-fit: cover; }
.g-aside__text { min-width: 0; }
.g-aside__name { display: block; font-size: .875rem; font-weight: 600; color: var(--g-navy); line-height: 1.35; }
.g-aside__desc { display: block; font-size: .75rem; line-height: 1.45; color: var(--g-muted); margin-top: .15rem; }
.gaguim a.g-aside__cta { width: 100%; }

/* Anterior / próxima */
.g-postnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-gap); }
.g-postnav__item {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.15rem 1.35rem;
  background: #fff; border: 1px solid var(--g-line); border-radius: var(--g-radius);
  transition: box-shadow var(--g-transition), transform var(--g-transition), border-color var(--g-transition);
}
.g-postnav__item:hover { transform: translateY(-3px); box-shadow: var(--g-shadow); border-color: transparent; }
.g-postnav__item--next { align-items: flex-end; text-align: right; }
.g-postnav__label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g-green);
}
.g-postnav__item--prev .g-postnav__label::before { content: "←"; }
.g-postnav__item--next .g-postnav__label::after  { content: "→"; }
.g-postnav__name { font-size: .9375rem; font-weight: 600; color: var(--g-navy); line-height: 1.35; }
/* O cartão de volta à listagem é apoio, não destino: fundo neutro e sem
   competir com o vizinho de verdade do outro lado. */
.g-postnav__item--todas { background: transparent; border-style: dashed; }
.g-postnav__item--todas .g-postnav__label { color: var(--g-muted); }

@media (max-width: 620px) {
  .g-postnav { grid-template-columns: minmax(0, 1fr); }
  .g-postnav__item--next { align-items: flex-start; text-align: left; }
  /* Ao lado de um título de três linhas, o ícone centralizado empurrava o
     texto para dentro e desalinhava o bloco inteiro. */
  .g-single__title { flex-direction: column; align-items: flex-start; gap: .85rem; }
}

/* --- Estado vazio (conteúdo ainda não cadastrado) --- */
.g-empty {
  border: 1px dashed var(--g-line); border-radius: var(--g-radius);
  padding: 2.5rem 1.5rem; text-align: center; color: var(--g-muted);
  background: var(--g-bg); font-size: .9375rem;
}
.g-dark .g-empty { background: rgba(255,255,255,.04); border-color: var(--g-line-dark); color: var(--g-on-dark-soft); }

/* 6) RESPONSIVO ============================================================ */

/* Telas pequenas: recompor, não apenas encolher */
@media (max-width: 767px) {
  /* No desktop o escurecimento é lateral: o texto está à esquerda e a foto
     respira à direita. No celular o texto ocupa a largura inteira, então o
     degradê lateral deixaria metade do H1 sobre a parte clara da imagem. Aqui
     o véu é parelho — um pouco mais leve que o lado escuro do desktop, para a
     foto continuar perceptível sem custar legibilidade. */
  .g-hero::after {
    background:
      radial-gradient(120% 60% at 78% 12%, rgba(101,198,235,.14), transparent 62%),
      linear-gradient(180deg, rgba(5,22,56,.78) 0%, rgba(5,22,56,.62) 52%, rgba(5,22,56,.76) 100%),
      linear-gradient(105deg, rgba(8,31,77,.50) 0%, rgba(16,53,115,.42) 100%);
  }
  .g-hero__sub { max-width: none; }
  /* Os dois CTAs do herói ocupam a linha inteira, um sob o outro. Lado a lado
     eles somavam mais que a largura da tela e vazavam para fora.
     Forçamos pela LARGURA dos widgets em vez de tentar virar o container para
     coluna: o CSS que o Elementor gera por elemento define --flex-direction com
     especificidade maior e venceria o override. Com cada widget a 100%, o
     empilhamento acontece de qualquer jeito. O !important existe porque o
     Elementor também escreve a largura do widget inline por elemento. */
  .gaguim .g-hero__actions > .e-con-inner { flex-wrap: wrap; }
  .gaguim .g-hero__actions .elementor-widget { width: 100% !important; }
  .gaguim .g-hero__actions a.g-btn,
  .gaguim .g-hero__actions .g-btn a.elementor-button { width: 100%; }
  .g-hero__card { max-width: none; }
  .g-stats-float { margin-top: 0; }
  .g-stats { border-radius: var(--g-radius); }
  .g-stat + .g-stat::before { display: none; }
  .g-stats { gap: 1.25rem; }
  .g-collage { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .g-collage figure:nth-child(3) { display: none; }
  .g-collage__444 { position: static; text-align: center; margin-bottom: .5rem; }
  .g-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* 360–390: apertar respiros */
@media (max-width: 400px) {
  :root { --g-gap: .9rem; }
  .gaguim .g-btn { padding: .85rem 1.25rem; font-size: .75rem; }
  .g-stats { padding: 1.25rem; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .g-gallery { grid-template-columns: repeat(3, 1fr); }
}

/* Acima de 1440: não deixar o texto esticar */
@media (min-width: 1441px) {
  .g-hero__sub { max-width: 38ch; }
}

/* Impressão */
@media print {
  .g-header, .g-cta-band, .g-video__play { display: none !important; }
  .gaguim { color: #000; background: #fff; }
}