.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   Instituto Agronelli — global.css
   Base do site institucional (WordPress + Elementor, módulos HTML).
   Tokens extraídos do layout "instituto_agronelli" no Figma (página home).

   Convenções
   - Tudo usa o prefixo "ia-" para não colidir com classes do Elementor/tema.
   - Envolva cada módulo HTML em <div class="ia"> … </div>: a base
     tipográfica e o box-sizing valem só dentro desse wrapper.
   - Breakpoints iguais aos padrões do Elementor: 1024px (tablet) e 767px (mobile).
   - Não use @import aqui: o Elementor coloca este CSS depois das regras dele,
     e o navegador descarta @import que não esteja no início do arquivo.
   ========================================================================== */

/* Fontes (Inter, Roboto) são carregadas pelo secoes/menu.html.
   Os ícones (Font Awesome 6 Free) são declarados aqui mesmo, na seção 14,
   com @font-face, que funciona em qualquer ponto do CSS. */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Verdes */
  --ia-verde-escuro: #275633;   /* rodapé, botões principais, títulos escuros */
  --ia-verde: #428124;          /* card "Criando Conexões" */
  --ia-verde-menu: #41811e;     /* menu em pílula */
  --ia-verde-claro: #7cc335;    /* títulos de seção, card "Mãos que transformam" */
  --ia-verde-neon: #99ff66;     /* destaque sobre o verde */

  /* Amarelos */
  --ia-amarelo: #e9d12d;        /* card do hero, card "Socioculturais" */
  --ia-amarelo-claro: #ffde37;  /* destaque sobre o laranja */
  --ia-mostarda: #fdb035;       /* CTA voluntariado, títulos do rodapé, ícones */

  /* Laranjas */
  --ia-laranja: #f26537;        /* card "Infância e Adolescência" */
  --ia-laranja-vivo: #ff6600;   /* destaque sobre o amarelo */
  --ia-laranja-claro: #f89833;  /* card "Educação, esporte e cidadania" */
  --ia-laranja-escuro: #c73f00; /* destaque sobre o laranja claro */
  --ia-laranja-redes: #d25224;  /* pílula das redes sociais no header */

  /* Neutros */
  --ia-branco: #ffffff;
  --ia-cinza-fundo: #f4f4f4;    /* fundo de seções e cards de notícia */
  --ia-cinza-texto: #737a75;    /* placeholder, texto secundário */
  --ia-texto: #1f2a22;          /* texto corrido sobre fundo claro */

  /* Tipografia */
  --ia-fonte-titulo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ia-fonte-texto: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ia-fs-display: 46px;   /* "Projetos que renovam", título do hero */
  --ia-lh-display: 51px;
  --ia-fs-h2: 32px;        /* "Notícias", "Siga-nos", CTA */
  --ia-fs-h3: 24px;        /* título dos cards */
  --ia-fs-btn: 16px;
  --ia-fs-texto: 14px;
  --ia-lh-texto: 21px;
  --ia-fs-texto-lg: 16px;
  --ia-fs-eyebrow: 13px;
  --ia-fs-menu: 12px;

  /* Raios */
  --ia-raio-sm: 10px;      /* botões dos cards */
  --ia-raio-md: 20px;      /* cards */
  --ia-raio-lg: 28px;      /* faixa de CTA */
  --ia-raio-xl: 48px;      /* topo do rodapé */
  --ia-raio-folha: 50px;   /* cantos opostos (card do hero) */
  --ia-raio-pilula: 999px;

  /* Espaçamento e layout */
  --ia-container: 1138px;  /* 1440 - 151 × 2 */
  --ia-gutter: 16px;
  --ia-gap-cards: 36px;
  --ia-pad-card: 30px;
  --ia-secao-y: 96px;

  --ia-transicao: 180ms ease;
}

/* --------------------------------------------------------------------------
   2. Base (dentro do wrapper .ia)
   -------------------------------------------------------------------------- */
.ia,
.ia *,
.ia *::before,
.ia *::after {
  box-sizing: border-box;
}

.ia {
  font-family: var(--ia-fonte-texto);
  font-weight: 500;
  font-size: var(--ia-fs-texto);
  line-height: var(--ia-lh-texto);
  color: var(--ia-texto);
  -webkit-font-smoothing: antialiased;
}

.ia :where(h1, h2, h3, h4, p, ul, ol, figure) {
  margin: 0;
}

.ia :where(h1, h2, h3, h4) {
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  line-height: 1.1;
}

.ia img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ia :where(a) {
  color: inherit;
  text-decoration: none;
}

.ia :focus-visible {
  outline: 3px solid var(--ia-mostarda);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.ia-container {
  width: 100%;
  max-width: calc(var(--ia-container) + var(--ia-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--ia-gutter);
}

.ia-secao {
  padding-block: var(--ia-secao-y);
}

.ia-secao--cinza {
  background: var(--ia-cinza-fundo);
}

.ia-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ia-gap-cards);
}

.ia-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ia-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. Tipografia
   -------------------------------------------------------------------------- */
.ia-display {
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  font-size: var(--ia-fs-display);
  line-height: var(--ia-lh-display);
  color: var(--ia-verde-claro);
}

.ia-titulo-secao {
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  font-size: var(--ia-fs-h2);
  line-height: 1.2;
  color: var(--ia-verde-escuro);
}

.ia-subtitulo-secao {
  font-size: var(--ia-fs-texto-lg);
  line-height: 1.4;
  color: var(--ia-texto);
}

/* Cabeçalho de seção com ícone ("Notícias", "Siga-nos") */
.ia-cabecalho-secao {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}

.ia-cabecalho-secao__icone {
  flex: none;
  width: 54px;
  height: auto;
}

.ia-eyebrow {
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  font-size: var(--ia-fs-eyebrow);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ia-texto {
  font-size: var(--ia-fs-texto);
  line-height: var(--ia-lh-texto);
}

.ia-texto-lg {
  font-size: var(--ia-fs-texto-lg);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   5. Botões
   Cor configurável por variáveis: --ia-btn-bg e --ia-btn-cor.
   -------------------------------------------------------------------------- */
.ia-btn {
  --ia-btn-bg: var(--ia-verde-escuro);
  --ia-btn-cor: var(--ia-branco);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 153px;
  height: 36px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--ia-raio-sm);
  background: var(--ia-btn-bg);
  color: var(--ia-btn-cor);
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  font-size: var(--ia-fs-btn);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--ia-transicao), filter var(--ia-transicao);
}

.ia-btn:hover {
  filter: brightness(1.08);
}

.ia-btn--pilula {
  height: auto;
  min-width: 0;
  padding: 14px 26px;
  border-radius: var(--ia-raio-pilula);
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   6. Header / menu
   Logo, menu e redes centralizados na página, no topo e na barra fixa.
   -------------------------------------------------------------------------- */
.ia-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 19px;
  padding-top: 37px;
}

/* Topo fixo: transparente sobre o hero; vira barra ao rolar a página */
.ia-topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: background-color var(--ia-transicao), box-shadow var(--ia-transicao);
}

/* Barra de administração do WordPress (usuário logado) */
.admin-bar .ia-topo { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .ia-topo { top: 46px; }
}

.ia-topo .ia-header {
  padding-bottom: 12px;
  transition: padding var(--ia-transicao);
}

.ia-topo--fixo {
  background: var(--ia-branco);
  box-shadow: 0 6px 24px rgba(39, 86, 51, 0.12);
  animation: ia-topo-entra 280ms ease-out;
}

.ia-topo--fixo .ia-header {
  padding-top: 12px;
}

.ia-topo--fixo .ia-header__logo { width: 64px; }

/* Com o logo de 64px (≈53px de altura), 1px alinha menu e redes ao centro dele */
.ia-topo--fixo .ia-menu,
.ia-topo--fixo .ia-redes { margin-top: 1px; }

@keyframes ia-topo-entra {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Âncoras não ficam escondidas atrás da barra */
.ia [id] { scroll-margin-top: 110px; }

.ia-header__logo {
  flex: none;
  width: 123px;
  margin-right: 16px;
  transition: width var(--ia-transicao);
}

.ia .ia-header__logo img {
  width: 100%;
  height: auto;
}

.ia-menu,
.ia-redes {
  margin-top: 31px;
  transition: margin-top var(--ia-transicao);
}

.ia-menu ul {
  display: flex;
  align-items: center;
  gap: 31px;
  margin: 0;
  padding: 18px 31px 18px 35px;
  border-radius: var(--ia-raio-pilula);
  background: var(--ia-verde-menu);
  list-style: none;
}

.ia-menu a {
  display: block;
  font-family: var(--ia-fonte-texto);
  font-weight: 700;
  font-size: var(--ia-fs-menu);
  line-height: 14px;
  color: var(--ia-branco);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--ia-transicao);
}

.ia-menu a:hover {
  color: var(--ia-amarelo-claro);
}

.ia-redes {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--ia-raio-pilula);
  background: var(--ia-laranja-redes);
}

.ia-redes a {
  display: grid;
  place-items: center;
  color: var(--ia-branco);
  transition: opacity var(--ia-transicao);
}

.ia-redes a:hover {
  opacity: 0.8;
}

.ia-redes svg {
  display: block;
  fill: currentColor;
}

/* Botão do menu mobile (aparece só até 1024px) */
.ia-menu-toggle {
  display: none;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--ia-raio-pilula);
  background: var(--ia-verde-menu);
  color: var(--ia-branco);
  cursor: pointer;
}

.ia-menu-toggle svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.ia-menu-toggle .ia-icone-fechar { display: none; }
.ia-menu-toggle[aria-expanded="true"] .ia-icone-abrir { display: none; }
.ia-menu-toggle[aria-expanded="true"] .ia-icone-fechar { display: block; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.ia-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ia-verde-escuro);
}

.ia .ia-hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* Degradê verde na base da foto (208px no Figma) */
.ia-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: 208px;
  background: linear-gradient(
    to bottom,
    rgba(66, 129, 36, 0) 0%,
    rgba(66, 129, 36, 0.74) 72%
  );
  pointer-events: none;
}

.ia-hero__conteudo {
  display: grid;
  grid-template-columns: 416px 523px;
  column-gap: 43px;
  align-items: end;
  min-height: 757px;
}

.ia-hero__card {
  align-self: start;
  margin-top: 293px;
  padding: 48px 8px 53px 58px;
  border-radius: 0 var(--ia-raio-folha) 0 var(--ia-raio-folha);
  background: var(--ia-amarelo);
}

.ia-hero__titulo {
  margin-bottom: 8px;
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  font-size: var(--ia-fs-display);
  line-height: var(--ia-lh-display);
  color: var(--ia-verde-escuro);
}

.ia-hero__texto {
  max-width: 350px;
  font-size: 16px;
  line-height: 30px;
  color: #000;
}

.ia .ia-hero__familia {
  width: 523px;
  height: auto;
}

/* Header + hero: tablet */
@media (max-width: 1024px) {
  .ia-header {
    align-items: center;
    justify-content: flex-start;
    padding-top: 24px;
  }

  .ia-menu,
  .ia-redes { margin-top: 0; }

  .ia-menu-toggle { display: grid; order: 3; }
  .ia-redes { order: 2; margin-left: auto; }
  .ia-menu-toggle { margin-left: 0; }

  .ia-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: var(--ia-gutter);
    width: min(300px, calc(100% - var(--ia-gutter) * 2));
    display: none;
  }

  .ia-menu[data-aberto] { display: block; }

  .ia-menu ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px;
    border-radius: var(--ia-raio-md);
    box-shadow: 0 12px 32px rgba(39, 86, 51, 0.25);
  }

  .ia-menu a {
    padding: 14px 16px;
    font-size: 14px;
    border-radius: var(--ia-raio-sm);
  }

  .ia-menu a:hover { background: rgba(255, 255, 255, 0.1); }

  .ia-hero__conteudo {
    grid-template-columns: minmax(0, 416px) minmax(0, 1fr);
    column-gap: 24px;
    min-height: 620px;
  }

  .ia-hero__card { margin-top: 200px; }
  .ia .ia-hero__familia { width: 100%; max-width: 523px; justify-self: end; }
}

/* Header + hero: mobile */
@media (max-width: 767px) {
  .ia-header__logo { width: 84px; margin-right: 0; }
  .ia-topo--fixo .ia-header__logo { width: 56px; }
  .ia-redes { display: none; }
  .ia-menu-toggle { margin-left: auto; }

  .ia-hero__conteudo {
    grid-template-columns: 1fr;
    row-gap: 24px;
    min-height: 0;
  }

  .ia-hero__card {
    margin-top: 150px;
    padding: 32px 28px 36px;
    border-radius: 0 36px 0 36px;
  }

  .ia-hero__texto { line-height: 26px; }

  .ia .ia-hero__familia {
    width: 100%;
    max-width: 380px;
    justify-self: center;
  }
}

/* --------------------------------------------------------------------------
   7b. Projetos que renovam (vídeo + texto)
   Fundo branco.
   -------------------------------------------------------------------------- */
.ia-projetos {
  padding: 89px 0 120px;
  background: var(--ia-branco);
  overflow-x: clip; /* entradas laterais não criam rolagem horizontal */
}

.ia-projetos__grid {
  display: grid;
  grid-template-columns: 573px minmax(0, 423px);
  column-gap: 50px;
  align-items: start;
  padding-left: 11px;
}

.ia-projetos__conteudo {
  padding-top: 16px;
}

.ia-projetos__titulo {
  margin-bottom: 18px;
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  font-size: var(--ia-fs-display);
  line-height: var(--ia-lh-display);
  color: var(--ia-verde-claro);
}

.ia-projetos__texto {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 30px;
  color: #000;
}

/* Vídeo do YouTube: mostra a capa e só carrega o player ao clicar */
.ia-video {
  position: relative;
  aspect-ratio: 573 / 340;
  border-radius: 34px;
  overflow: hidden;
  background: var(--ia-verde-escuro);
}

.ia-video__capa {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.ia .ia-video__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ia-video__play {
  position: absolute;
  left: 28px;
  bottom: 28px;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: var(--ia-raio-pilula);
  background: var(--ia-verde-escuro);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: transform var(--ia-transicao), background-color var(--ia-transicao);
}

.ia-video__play svg {
  width: 26px;
  height: 26px;
  margin-left: 4px;
  fill: var(--ia-branco);
}

.ia-video__capa:hover .ia-video__play {
  transform: scale(1.06);
  background: var(--ia-verde);
}

.ia-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1024px) {
  .ia-projetos { padding: 72px 0; }
  .ia-projetos__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding-left: 0;
  }
  .ia-projetos__conteudo { padding-top: 0; max-width: 560px; }
}

@media (max-width: 767px) {
  .ia-projetos { padding: 56px 0; }
  .ia-video { border-radius: 24px; }
  .ia-video__play { left: 16px; bottom: 16px; width: 56px; height: 56px; }
  .ia-video__play svg { width: 20px; height: 20px; }
  .ia-projetos__texto { line-height: 26px; }
}

/* --------------------------------------------------------------------------
   8. Cards de atuação
   Cada cor define fundo, cor do título e do botão.
   -------------------------------------------------------------------------- */
.ia-card-atuacao {
  --ia-card-bg: var(--ia-verde-claro);
  --ia-card-destaque: var(--ia-verde-escuro);
  --ia-card-btn-texto: var(--ia-branco);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  min-height: 329px;
  padding: var(--ia-pad-card);
  border-radius: var(--ia-raio-md);
  background: var(--ia-card-bg);
  color: var(--ia-branco);
}

.ia-card-atuacao__icone {
  display: flex;
  align-items: center;
  height: 46px;
  font-size: 42px;
  line-height: 1;
  color: var(--ia-card-destaque);
}

.ia-card-atuacao__titulo {
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  font-size: var(--ia-fs-h3);
  line-height: 29px;
  color: var(--ia-card-destaque);
}

.ia-card-atuacao__texto {
  font-size: var(--ia-fs-texto);
  line-height: var(--ia-lh-texto);
  color: var(--ia-branco);
}

.ia-card-atuacao .ia-btn {
  --ia-btn-bg: var(--ia-card-destaque);
  --ia-btn-cor: var(--ia-card-btn-texto);
  margin-top: auto;
}

.ia-card-atuacao--verde-claro {
  --ia-card-bg: var(--ia-verde-claro);
  --ia-card-destaque: var(--ia-verde-escuro);
  --ia-card-btn-texto: var(--ia-branco);
}

.ia-card-atuacao--amarelo {
  --ia-card-bg: var(--ia-amarelo);
  --ia-card-destaque: var(--ia-laranja-vivo);
  --ia-card-btn-texto: var(--ia-branco);
}

.ia-card-atuacao--verde {
  --ia-card-bg: var(--ia-verde);
  --ia-card-destaque: var(--ia-verde-neon);
  --ia-card-btn-texto: var(--ia-verde);
}

.ia-card-atuacao--laranja {
  --ia-card-bg: var(--ia-laranja);
  --ia-card-destaque: var(--ia-amarelo-claro);
  --ia-card-btn-texto: var(--ia-laranja);
}

.ia-card-atuacao--laranja-claro {
  --ia-card-bg: var(--ia-laranja-claro);
  --ia-card-destaque: var(--ia-laranja-escuro);
  --ia-card-btn-texto: var(--ia-laranja-claro);
}

/* Grade da seção "Onde atuamos": 3 colunas de 328px, como no Figma */
.ia-atuacao {
  padding: 0 0 120px;
}

.ia-atuacao__grid {
  display: grid;
  grid-template-columns: repeat(3, 328px);
  gap: 43px 36px;
}

/* Card da Nelli ("Saiba mais sobre o nosso projeto"): a imagem já traz o fundo */
.ia-card-mascote {
  display: block;
  align-self: end;
  justify-self: end;
  width: 324px;
  border-radius: 20px 105px 20px 73px;
  transition: transform var(--ia-transicao);
}

.ia .ia-card-mascote img {
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .ia-atuacao { padding-bottom: 72px; }
  .ia-atuacao__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .ia-card-mascote { justify-self: center; width: 100%; max-width: 324px; }
}

@media (max-width: 767px) {
  .ia-atuacao { padding-bottom: 56px; }
  .ia-atuacao__grid { grid-template-columns: 1fr; }
  .ia-card-atuacao { min-height: 0; }
  .ia-card-atuacao .ia-btn { margin-top: 4px; }
}

/* --------------------------------------------------------------------------
   9. Cards de notícia
   -------------------------------------------------------------------------- */
.ia-card-noticia {
  display: flex;
  flex-direction: column;
  border-radius: var(--ia-raio-md);
  background: var(--ia-cinza-fundo);
  overflow: hidden;
}

.ia-card-noticia__imagem {
  aspect-ratio: 370 / 270;
  width: 100%;
  object-fit: cover;
}

.ia-card-noticia__corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 16px 28px;
}

.ia-card-noticia__texto {
  font-size: var(--ia-fs-texto);
  line-height: var(--ia-lh-texto);
  color: var(--ia-texto);
}

/* --------------------------------------------------------------------------
   10. CTA voluntariado / newsletter
   -------------------------------------------------------------------------- */
.ia-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 40px 48px;
  border-radius: var(--ia-raio-lg);
  background: var(--ia-mostarda);
}

.ia-cta__eyebrow {
  color: rgba(39, 86, 51, 0.7);
  margin-bottom: 8px;
}

.ia-cta__titulo {
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  font-size: var(--ia-fs-h2);
  line-height: 1.2;
  color: var(--ia-verde-escuro);
  margin-bottom: 8px;
}

.ia-cta__texto {
  font-size: var(--ia-fs-texto-lg);
  color: rgba(39, 86, 51, 0.85);
}

.ia-newsletter {
  display: flex;
  align-items: center;
  flex: 0 1 456px;
  padding: 6px 6px 6px 24px;
  border-radius: var(--ia-raio-pilula);
  background: var(--ia-branco);
}

.ia-newsletter input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--ia-fonte-texto);
  font-weight: 500;
  font-size: 15px;
  color: var(--ia-texto);
  outline: none;
}

.ia-newsletter input::placeholder {
  color: var(--ia-cinza-texto);
}

.ia-newsletter:focus-within {
  box-shadow: 0 0 0 3px var(--ia-verde-escuro);
}

/* --------------------------------------------------------------------------
   11. Rodapé
   -------------------------------------------------------------------------- */
.ia-rodape {
  padding: 72px 0 32px;
  border-radius: var(--ia-raio-xl) var(--ia-raio-xl) 0 0;
  background: var(--ia-verde-escuro);
  color: var(--ia-branco);
}

.ia-rodape__colunas {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

.ia-rodape__logo {
  display: inline-block;
  padding: 14px 18px;
  border-radius: var(--ia-raio-md);
  background: var(--ia-branco);
  margin-bottom: 20px;
}

.ia-rodape__logo img {
  width: 120px;
}

.ia-rodape__sobre {
  max-width: 190px;
  font-size: var(--ia-fs-texto);
  line-height: 22px;
  color: rgba(255, 255, 255, 0.7);
}

.ia-rodape__titulo {
  font-family: var(--ia-fonte-titulo);
  font-weight: 700;
  font-size: var(--ia-fs-eyebrow);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ia-mostarda);
  margin-bottom: 18px;
}

.ia-rodape__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
  max-width: 180px;
}

.ia-rodape__links a {
  font-size: var(--ia-fs-texto);
  line-height: 20px;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--ia-transicao);
}

.ia-rodape__links a:hover {
  color: var(--ia-mostarda);
}

.ia-rodape__contatos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 56px;
}

.ia-contato {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ia-raio-md);
  background: rgba(255, 255, 255, 0.06);
}

.ia-contato__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--ia-raio-pilula);
  background: var(--ia-mostarda);
}

.ia-contato__icone img,
.ia-contato__icone svg {
  width: 20px;
  height: 20px;
}

.ia-contato__rotulo {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.ia-contato__valor {
  font-size: 15px;
  line-height: 22px;
  color: var(--ia-branco);
}

.ia-rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.ia-rodape__legal {
  display: flex;
  gap: 24px;
}

.ia-rodape__redes {
  display: flex;
  gap: 10px;
}

.ia-rodape__redes img,
.ia-rodape__redes svg {
  width: 44px;
  height: 44px;
}

/* --------------------------------------------------------------------------
   12. Utilitários
   -------------------------------------------------------------------------- */
.ia-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;
}

.ia-centro { text-align: center; }
.ia-mt-0 { margin-top: 0; }
.ia-mb-16 { margin-bottom: 16px; }
.ia-mb-24 { margin-bottom: 24px; }
.ia-mb-40 { margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   13. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --ia-fs-display: 38px;
    --ia-lh-display: 44px;
    --ia-fs-h2: 28px;
    --ia-gap-cards: 24px;
    --ia-secao-y: 72px;
  }

  .ia-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-split { grid-template-columns: 1fr; gap: 32px; }

  .ia-cta { flex-direction: column; align-items: flex-start; }
  .ia-newsletter { width: 100%; flex-basis: auto; }

  .ia-rodape__colunas { flex-wrap: wrap; }
  .ia-rodape__contatos { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root {
    --ia-fs-display: 32px;
    --ia-lh-display: 38px;
    --ia-fs-h2: 24px;
    --ia-fs-h3: 21px;
    --ia-secao-y: 56px;
  }

  .ia-grid-3,
  .ia-grid-4 { grid-template-columns: 1fr; }

  .ia-cta { padding: 32px 24px; }
  .ia-newsletter { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: var(--ia-raio-lg); }
  .ia-newsletter input { padding: 10px 14px; }
  .ia-newsletter .ia-btn { width: 100%; }

  .ia-rodape { border-radius: 32px 32px 0 0; }
  .ia-rodape__colunas { flex-direction: column; gap: 28px; }
  .ia-rodape__base { flex-direction: column; align-items: flex-start; }
  .ia-rodape__legal { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ia,
  .ia * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   14. Ícones — Font Awesome 6 Free (solid), só os ícones usados no site
   Para usar outro ícone: copie o código dele em fontawesome.com e
   acrescente uma linha ".ia .fa-NOME::before { content: "\CODIGO"; }".
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.woff2") format("woff2"),
       url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.ttf") format("truetype");
}

.ia .fa-solid {
  display: inline-block;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.ia .fa-people-group::before    { content: "\e533"; } /* Mãos que transformam */
.ia .fa-people-roof::before     { content: "\e537"; } /* Programas Socioculturais */
.ia .fa-users-viewfinder::before { content: "\e595"; } /* Criando Conexões */
.ia .fa-children::before        { content: "\e4e1"; } /* Infância e Adolescência */
.ia .fa-person-running::before  { content: "\f70c"; } /* Educação, esporte e cidadania */
.ia .fa-futbol::before          { content: "\f1e3"; } /* alternativa para esporte */

/* --------------------------------------------------------------------------
   15. Animações e transições
   - Hero e menu: sequência de entrada ao carregar a página.
   - Demais seções: elementos com data-ia-anima aparecem ao entrar na tela
     (o script fica no secoes/menu.html). Valores: sobe, esquerda, direita, zoom.
     Atraso opcional por elemento: style="--ia-atraso: 120ms".
   - Sem JavaScript nada fica escondido; com "reduzir movimento" tudo fica estático.
   -------------------------------------------------------------------------- */
:root {
  --ia-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ia-ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ia-sobe      { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes ia-desce     { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes ia-esquerda  { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes ia-direita   { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes ia-zoom      { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes ia-fundo     { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes ia-flutua    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ia-pulso     { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ia-pulo      { 0% { transform: none; } 40% { transform: translateY(-6px) rotate(-6deg) scale(1.08); } 70% { transform: translateY(1px) rotate(2deg); } 100% { transform: none; } }

/* Revelar ao rolar */
html.ia-js .ia [data-ia-anima]:not(.ia-visivel) { opacity: 0; }

.ia [data-ia-anima].ia-visivel {
  animation: ia-sobe 0.85s var(--ia-ease) var(--ia-atraso, 0ms) backwards;
}
.ia [data-ia-anima="esquerda"].ia-visivel { animation-name: ia-esquerda; }
.ia [data-ia-anima="direita"].ia-visivel  { animation-name: ia-direita; }
.ia [data-ia-anima="zoom"].ia-visivel     { animation-name: ia-zoom; }

/* Menu: entra descendo ao carregar */
.ia-topo { animation: ia-desce 0.7s var(--ia-ease) 0.1s backwards; }
.ia-topo.ia-topo--fixo { animation: ia-topo-entra 280ms ease-out; }

/* Itens do menu: sublinhado que cresce do centro */
.ia-menu a {
  position: relative;
}

.ia-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--ia-amarelo-claro);
  transform: scaleX(0);
  transition: transform 0.3s var(--ia-ease);
}

.ia-menu a:hover::after,
.ia-menu a:focus-visible::after,
.ia-menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Redes: ícones sobem um pouco */
.ia-redes a {
  transition: transform 0.25s var(--ia-ease-mola), opacity var(--ia-transicao);
}
.ia-redes a:hover { transform: translateY(-3px); opacity: 1; }

/* Hero: sequência de entrada */
.ia .ia-hero__fundo { animation: ia-fundo 1.8s var(--ia-ease) backwards; }
.ia-hero__card { animation: ia-esquerda 0.9s var(--ia-ease) 0.25s backwards; }
.ia-hero__titulo { animation: ia-sobe 0.8s var(--ia-ease) 0.5s backwards; }
.ia-hero__texto { animation: ia-sobe 0.8s var(--ia-ease) 0.65s backwards; }
.ia .ia-hero__familia { animation: ia-sobe 1s var(--ia-ease) 0.45s backwards; }

/* Botões: brilho que atravessa no hover */
.ia-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s var(--ia-ease), filter var(--ia-transicao), box-shadow 0.25s var(--ia-ease);
}

.ia-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  z-index: -1;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ia-ease);
}

.ia-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.ia-btn:hover::after { left: 120%; }
.ia-btn:active { transform: translateY(0); box-shadow: none; }

/* Vídeo: capa aproxima e o play pulsa */
.ia .ia-video__capa img { transition: transform 0.7s var(--ia-ease); }
.ia-video__capa:hover img { transform: scale(1.04); }

.ia-video__play::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ia-verde-escuro);
  animation: ia-pulso 2.2s ease-out infinite;
  z-index: -1;
}

.ia-video__play { z-index: 0; }
.ia-video__play svg { position: relative; }

/* Cards de atuação: elevam e o ícone dá um pulo */
.ia-card-atuacao {
  transition: transform 0.35s var(--ia-ease), box-shadow 0.35s var(--ia-ease);
}

.ia-card-atuacao:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(39, 86, 51, 0.18);
}

.ia-card-atuacao:hover .ia-card-atuacao__icone i {
  animation: ia-pulo 0.6s var(--ia-ease);
}

/* Nelli flutuando */
.ia .ia-card-mascote img { animation: ia-flutua 4.5s ease-in-out infinite; }
.ia-card-mascote:hover { transform: none; }

/* Movimento reduzido: tudo estático e visível */
@media (prefers-reduced-motion: reduce) {
  html.ia-js .ia [data-ia-anima]:not(.ia-visivel) { opacity: 1; }
  .ia-topo,
  .ia .ia-hero__fundo,
  .ia-hero__card,
  .ia-hero__titulo,
  .ia-hero__texto,
  .ia .ia-hero__familia,
  .ia .ia-card-mascote img,
  .ia-video__play::before { animation: none !important; }
}/* End custom CSS */