/* ==========================================================================
   IARGS - main.css
   Fundacao apenas. Componentes de pagina sao construidos por fase (ver SPECs).
   Fonte da verdade visual: docs/DESIGN-SPEC.md
   Fonte canonica dos tokens: theme.json (este arquivo apenas mapeia - secao 17)
   --------------------------------------------------------------------------
   1. Tokens
   2. Reset
   3. Base
   4. Layout / container
   5. Acessibilidade
   6. Header
   7. Navegacao
   8. Conteudo (cabecalho de secao e listagem)
   9. Footer
   10. Utilitarios
   11. Conteudo e midia (artigo, imagens, video, galeria - os dois editores)
   12. Eventos (agenda, pagina do evento, widget)
   13. Home (composicao da capa)
   14. Carrossel (setas, pontos, pausa)
   15. Banners de divulgacao (slides do topo da capa)
   16. Foto da diretoria (largura total)
   17. Celular para os associados (tamanhos, alvos, capa, busca, autor)
   18. Banner em pop-up
   19. Compartilhar, agenda e mapa, letra maior, impressao
   20. Botao do WhatsApp
   ========================================================================== */

/* 1. Tokens ================================================================ */

:root {
  /* Mapeamento dos presets do theme.json. Nao redeclarar valores aqui. */
  --color-primary: var(--wp--preset--color--primary, #64140d);
  --color-primary-dark: var(--wp--preset--color--primary-dark, #470e09);
  --color-primary-light: var(--wp--preset--color--primary-light, #8a2a1f);
  --color-accent: var(--wp--preset--color--accent, #d29a32);
  --color-accent-dark: var(--wp--preset--color--accent-dark, #af7a1e);
  --color-text: var(--wp--preset--color--text, #222);
  --color-text-muted: var(--wp--preset--color--text-muted, #666);
  --color-background: var(--wp--preset--color--background, #fff);
  --color-surface: var(--wp--preset--color--surface, #f6f6f6);
  --color-paper: var(--wp--preset--color--paper, #f7f3ec);
  --color-border: var(--wp--preset--color--border, #ddd);

  --font-heading: var(--wp--preset--font-family--heading, Georgia, serif);
  --font-body: var(--wp--preset--font-family--body, Arial, sans-serif);

  --text-meta: var(--wp--preset--font-size--meta, 0.8125rem);
  --text-small: var(--wp--preset--font-size--small, 0.9375rem);
  --text-base: var(--wp--preset--font-size--base, 1.0625rem);
  --text-lead: var(--wp--preset--font-size--lead, 1.1875rem);
  --text-h3: var(--wp--preset--font-size--h3, 1.375rem);
  --text-h2: var(--wp--preset--font-size--h2, 1.875rem);
  --text-h1: var(--wp--preset--font-size--h1, 2.75rem);

  --space-3xs: var(--wp--preset--spacing--3xs, 4px);
  --space-2xs: var(--wp--preset--spacing--2xs, 8px);
  --space-xs: var(--wp--preset--spacing--xs, 12px);
  --space-sm: var(--wp--preset--spacing--sm, 16px);
  --space-md: var(--wp--preset--spacing--md, 24px);
  --space-lg: var(--wp--preset--spacing--lg, 32px);
  --space-xl: var(--wp--preset--spacing--xl, 48px);
  --space-2xl: var(--wp--preset--spacing--2xl, 64px);
  --space-3xl: var(--wp--preset--spacing--3xl, 96px);

  --container-max: var(--wp--style--global--wide-size, 1200px);
  --container-text: var(--wp--style--global--content-size, 760px);

  /* Tokens sem equivalente no theme.json (DESIGN-SPEC secao 17, excecao). */
  --gutter: 16px;
  --radius: 2px;
  --border-thin: 1px solid var(--color-border);
  --transition: 150ms ease;
  --focus-ring: 2px solid var(--color-accent);
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

/* 2. Reset ================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul[class], ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, picture, video, iframe, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

/* 3. Base ================================================================== */

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: hidden; /* nunca scroll horizontal - DESIGN-SPEC secao 12 */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: 1.15; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: 1.3; }

p + p,
p + ul,
p + ol { margin-top: var(--space-md); }

a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

a:hover { color: var(--color-primary-dark); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

hr {
  border: 0;
  border-top: var(--border-thin);
  margin: var(--space-xl) 0;
}

address { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* excecao documentada: reduced motion */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4. Layout / container ==================================================== */

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

.iargs-container--text { max-width: calc(var(--container-text) + (var(--gutter) * 2)); }

.iargs-main { display: block; }

/* .iargs-button--secondary esta especificado no DESIGN-SPEC (secao 9) e entra junto
   com a SPEC que o usar; nao ha regra aqui ainda para nao criar CSS sem uso.
   O ritmo de secao e o .iargs-link-more nasceram com a home (secao 13). */

/* 5. Acessibilidade ======================================================== */

.screen-reader-text {
  position: absolute !important; /* excecao documentada: padrao WordPress */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.iargs-skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 100;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-primary);
  color: #fff;
  text-decoration: none;
}

.iargs-skip-link:focus {
  top: var(--space-sm);
  color: #fff;
}

/* 6. Header ================================================================ */

/* O fio inferior que fechava o cabecalho agora fecha a barra contextual (7.5): a
   barra principal saiu do <header> (SPEC-014). */

/* Faixas diagonais discretas na margem esquerda (SPEC-007, decisao 10). So em
   telas largas: a largura e a sobra entre a borda da tela e o container, e vale
   zero quando nao ha sobra. Desligavel em Personalizar > IARGS > Cabecalho.
   Excecao documentada: rgba direto como fallback para o color-mix da paleta. */
body.iargs-has-stripes {
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(100, 20, 13, 0.05) 14px 17px);
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--color-primary) 5%, transparent) 14px 17px);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: max(0px, calc((100% - var(--container-max) - (var(--gutter) * 2)) / 2 - 8px)) 100%;
}

/* Icones desenhados a mao (iargs_icon): alinhados ao texto, nunca em bloco. */
.iargs-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.15em;
}

/* 6.1 Faixa institucional: ate tres avisos, centralizados. */
.iargs-topbar {
  background-color: var(--color-primary-dark);
  color: #fff;
  font-size: var(--text-meta);
}

.iargs-topbar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: 36px;
  padding-block: var(--space-2xs);
  text-align: center;
}

.iargs-topbar a { color: #fff; }

/* 6.2 Branding: logo | busca | links utilitarios e texto livre. */
.iargs-branding__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
}

/* A logo do IARGS e quadrada (SPEC-018): 72px no tablet, 80px no computador. */
.iargs-branding__logo img {
  width: auto;
  max-height: 72px;
}

/* Celular: logo centralizado e maior (o selo some abaixo de 640px), sem o nome
   por extenso ao lado. */
@media (max-width: 639px) {
  .iargs-branding__inner { justify-items: center; }

  .iargs-branding__logo img { max-height: 88px; margin-inline: auto; }

  .iargs-branding__logo .iargs-branding__name { display: none; }
}

/* Sem logo no Personalizar: a logo do tema e o nome em versalete, separados por
   um fio dourado. */
.iargs-branding__lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-primary);
  text-decoration: none;
}

.iargs-branding__name {
  max-width: 24ch;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: lowercase;
}

.iargs-branding__center,
.iargs-branding__aside { display: none; }

.iargs-branding__note {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: 1.4;
}

/* Tablet: logo e selo lado a lado, encostados a esquerda. Numa coluna so, o selo
   esticava na largura toda e o "100" se afastava do "anos 1926 · 2026". */
@media (min-width: 640px) {
  .iargs-branding__inner {
    grid-template-columns: auto auto;
    justify-content: start;
  }
}

@media (min-width: 1024px) {
  .iargs-branding__inner { grid-template-columns: auto auto 1fr auto; justify-content: normal; }

  .iargs-branding__logo img { max-height: 80px; }

  .iargs-branding__center {
    display: flex;
    justify-content: center;
  }

  .iargs-branding__center .iargs-search { width: min(100%, 380px); }

  .iargs-branding__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2xs);
    text-align: right;
  }
}

/* 6.3 Busca do header */
.iargs-search { display: flex; }

.iargs-search__field {
  flex: 1;
  min-width: 0;
  padding: 10px var(--space-xs);
  border: var(--border-thin);
  border-radius: var(--radius) 0 0 var(--radius);
  background-color: var(--color-background);
  font-size: 1rem; /* 16px: abaixo disso o Safari do iPhone amplia a pagina ao tocar no campo */
}

.iargs-search__field:focus-visible { border-color: var(--color-primary); }

.iargs-search__submit {
  padding: 10px var(--space-md);
  border: 1px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--text-small);
  font-weight: 600;
  transition: background-color var(--transition);
}

.iargs-search__submit:hover { background-color: var(--color-primary-dark); }

/* 7. Navegacao ============================================================= */
/* Um menu principal, dois niveis (SPEC-005): primeiro nivel na barra bordo,
   segundo no dropdown (desktop) e na barra contextual da secao atual. */

/* 7.1 Barra do celular: Menu · Buscar · Agenda (SPEC-014)
   Abaixo do menu de computador a barra vermelha fica presa no topo ao rolar, com
   tres botoes grandes, com texto. Ela esta fora do <header> para isso (header.php). */
.iargs-nav-primary {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: var(--color-primary);
}

/* Barra do WordPress (usuario logado): fixa a partir de 601px. */
@media (min-width: 601px) and (max-width: 782px) {
  .admin-bar .iargs-nav-primary { top: 46px; }
}

@media (min-width: 783px) {
  .admin-bar .iargs-nav-primary { top: 32px; }
}

.iargs-nav-primary__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.iargs-nav-toggle,
.iargs-search-toggle,
.iargs-nav-primary .iargs-nav-agenda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 52px;
  padding: var(--space-3xs) var(--space-2xs);
  border: 0;
  background-color: transparent;
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
}

.iargs-search-toggle,
.iargs-nav-primary .iargs-nav-agenda { border-left: 1px solid rgba(255, 255, 255, 0.25); }

.iargs-nav-toggle[aria-expanded="true"],
.iargs-search-toggle[aria-expanded="true"] { background-color: var(--color-primary-dark); }

.iargs-search-toggle .iargs-icon,
.iargs-nav-agenda .iargs-icon { width: 20px; height: 20px; }

.iargs-nav-toggle__icon {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

/* Aberto, as tres linhas viram um X (e o texto, "Fechar"). */
.iargs-nav-toggle[aria-expanded="true"] .iargs-nav-toggle__icon {
  background-color: transparent;
  box-shadow: none;
}

.iargs-nav-toggle[aria-expanded="true"] .iargs-nav-toggle__icon::before,
.iargs-nav-toggle[aria-expanded="true"] .iargs-nav-toggle__icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: currentColor;
  transform: rotate(45deg);
}

.iargs-nav-toggle[aria-expanded="true"] .iargs-nav-toggle__icon::after { transform: rotate(-45deg); }

/* Painel da busca: so o campo, com o cursor dentro (main.js). */
.iargs-search-panel {
  display: none;
  grid-column: 1 / -1;
  padding-block: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.iargs-search-panel.is-open { display: block; }

.iargs-search-panel .iargs-search__field,
.iargs-nav-primary__search .iargs-search__field { border-color: #fff; }

.iargs-search-panel .iargs-search__submit,
.iargs-nav-primary__search .iargs-search__submit {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: var(--color-primary-dark);
}

/* "Fechar menu" no fim do painel: quem rolou o menu todo nao precisa voltar. */
.iargs-nav-close {
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  background-color: transparent;
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
}

/* 7.2 Barra principal */

.iargs-nav-primary a {
  display: block;
  padding-block: var(--space-xs);
  border-bottom: 3px solid transparent;
  color: #fff;
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
}

.iargs-nav-primary a:hover,
.iargs-nav-primary a:focus-visible { color: #fff; }

/* Secao ativa: o item de primeiro nivel ganha o fio dourado. */
.iargs-nav-primary__menu > li > a:hover,
.iargs-nav-primary__menu > .iargs-is-section > a { border-bottom-color: var(--color-accent); }

/* 7.3 Painel: no mobile abre pelo botao; no desktop e so a barra.
   Sem JavaScript fica aberto (ver <noscript> em header.php). */
.iargs-nav-primary__panel { display: none; grid-column: 1 / -1; width: 100%; }

/* Com a barra presa no topo, o painel cabe na tela e rola por dentro: mais alto que
   a tela, o fim dele nunca apareceria. */
.iargs-nav-primary__panel.is-open {
  display: block;
  max-height: calc(100vh - 52px);
  max-height: calc(100dvh - 52px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.iargs-nav-primary__menu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 0;
}

/* Mobile: subitens sempre abertos, indentados (DESIGN-SPEC secao 12). */
.iargs-nav-primary .sub-menu {
  margin: 0 0 var(--space-2xs);
  padding-left: var(--space-md);
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  list-style: none;
}

.iargs-nav-primary .sub-menu a {
  min-height: 40px;
  padding-block: var(--space-2xs);
  font-size: var(--text-small);
  font-weight: 400;
}

/* Pagina atual no painel: sublinhado dourado (o WordPress ja marca aria-current). */
.iargs-nav-primary__menu [aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Busca no topo do painel mobile: com o menu inteiro aberto, no fim ela exigiria
   rolar dezenas de itens. Links utilitarios no fim. */
.iargs-nav-primary__search { padding-block: var(--space-sm) var(--space-xs); }

.iargs-nav-primary__extra {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.iargs-nav-primary__extra .iargs-utility-menu a { min-height: 44px; color: #fff; }

/* Menu de computador: 1024px ou mais E com mouse (SPEC-014, decisao 12). Num tablet
   de toque o submenu de hover nunca abriria: ali vale a barra do celular. */
@media (min-width: 1024px) and (hover: hover) {
  .iargs-nav-primary { position: static; }

  .iargs-nav-primary__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--space-sm);
  }

  .iargs-nav-toggle,
  .iargs-search-toggle,
  .iargs-nav-primary .iargs-nav-agenda,
  .iargs-search-panel,
  .iargs-search-panel.is-open,
  .iargs-nav-close { display: none; }

  .iargs-nav-primary__panel,
  .iargs-nav-primary__panel.is-open {
    display: block;
    width: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
    border-top: 0;
  }

  .iargs-nav-primary__search,
  .iargs-nav-primary__extra { display: none; }

  .iargs-nav-primary__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-lg);
  }

  /* A borda que marca hover e secao ativa volta no desktop (no mobile e zerada). */
  .iargs-nav-primary__menu a { min-height: 0; }

  .iargs-nav-primary__menu > li > a { border-bottom: 3px solid transparent; }

  /* Dropdown de um nivel, so CSS: abre no hover e quando o foco entra
     (teclado). SPEC-005, decisao 2. */
  .iargs-nav-primary__menu > li { position: relative; }

  .iargs-nav-primary .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(var(--space-md) * -1);
    z-index: 50;
    min-width: 260px;
    margin: 0;
    padding: var(--space-2xs) 0;
    border: var(--border-thin);
    border-top: 3px solid var(--color-accent);
    background-color: var(--color-background);
  }

  .iargs-nav-primary__menu > li:hover > .sub-menu,
  .iargs-nav-primary__menu > li:focus-within > .sub-menu { display: block; }

  .iargs-nav-primary .sub-menu a {
    min-height: 0;
    padding: var(--space-2xs) var(--space-md);
    color: var(--color-text);
    font-size: var(--text-small);
  }

  .iargs-nav-primary .sub-menu a:hover,
  .iargs-nav-primary .sub-menu a:focus-visible {
    background-color: var(--color-surface);
    color: var(--color-primary);
  }

  .iargs-nav-primary .sub-menu .current-menu-item > a { color: var(--color-primary); font-weight: 600; }

  /* Indicador de submenu: decorativo, a estrutura de lista ja informa. */
  .iargs-nav-primary__menu > .menu-item-has-children > a::after {
    content: "";
    margin-left: var(--space-2xs);
    border: 4px solid transparent;
    border-top-color: currentColor;
    border-bottom-width: 0;
    opacity: 0.8;
  }
}

/* 7.4 Links utilitarios (camada de branding, no desktop) */
.iargs-utility-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  font-size: var(--text-meta);
}

.iargs-utility-menu a {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
}

.iargs-utility-menu a:hover { color: var(--color-primary); text-decoration: underline; }

/* 7.5 Barra contextual: os filhos da secao atual, fundo branco. */
.iargs-nav-secondary {
  background-color: var(--color-background);
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
}

.iargs-nav-secondary__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-lg);
}

.iargs-nav-secondary__section {
  padding-block: var(--space-xs);
  color: var(--color-primary);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.iargs-nav-secondary__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
}

/* Em serifa, como no layout de referencia (SPEC-007 secao 7). */
.iargs-nav-secondary__menu a {
  display: block;
  padding-block: var(--space-xs);
  border-bottom: 2px solid transparent;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-lead);
  text-decoration: none;
}

.iargs-nav-secondary__menu a:hover { color: var(--color-primary); }

.iargs-nav-secondary__menu .is-current > a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* 8. Conteudo ============================================================== */

.iargs-page-header { padding-block: var(--space-xl) var(--space-lg); }

.iargs-page-header__eyebrow {
  margin-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iargs-page-header__eyebrow a { text-decoration: none; }

.iargs-page-header__description {
  color: var(--color-text-muted);
  font-size: var(--text-lead);
}

.iargs-page-header__description:empty { display: none; }

/* Fio dourado sob o cabecalho de categoria/arquivo. */
.iargs-page-header--term::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: var(--space-md);
  background-color: var(--color-accent);
}

/* 8.1 Listagem: destaques dividem colunas, compactos ocupam a linha inteira. */
.iargs-entries { display: grid; gap: var(--space-xl); }

@media (min-width: 640px) {
  .iargs-entries { grid-template-columns: repeat(2, 1fr); }
  .iargs-entry--compact { grid-column: 1 / -1; }
}

.iargs-entry { padding-bottom: var(--space-lg); border-bottom: var(--border-thin); }

.iargs-entry__media { display: block; margin-bottom: var(--space-sm); }

.iargs-entry__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.iargs-entry__media--empty {
  aspect-ratio: 3 / 2;
  background-color: var(--color-surface);
  border: var(--border-thin);
}

/* 8.2 Variante compacta: miniatura 1:1 ao lado do titulo. */
.iargs-entry--compact {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-md);
  align-items: start;
}

.iargs-entry--compact .iargs-entry__media { margin-bottom: 0; }

.iargs-entry--compact .iargs-entry__media img,
.iargs-entry--compact .iargs-entry__media--empty { aspect-ratio: 1; }

@media (max-width: 400px) {
  .iargs-entry--compact {
    grid-template-columns: 72px 1fr;
    gap: var(--space-sm);
  }
}

.iargs-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--text-meta);
}

.iargs-entry__date {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.iargs-entry__date .iargs-icon { width: 14px; height: 14px; }

/* Categoria em cinza: o vermelho fica para superficies, nao para rotulos repetidos
   (SPEC-007, decisao 6). */
.iargs-entry__category {
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.iargs-entry__category:hover { color: var(--color-primary); }

.iargs-entry__title { margin-bottom: var(--space-2xs); }

.iargs-entry__title a { color: var(--color-text); text-decoration: none; }

.iargs-entry__title a:hover { color: var(--color-primary); text-decoration: underline; }

.iargs-entry__excerpt { color: var(--color-text-muted); font-size: var(--text-small); }

.iargs-entry__excerpt p { margin: 0; }

.iargs-pagination { padding-block: var(--space-xl); }

.iargs-pagination .page-numbers {
  display: inline-block;
  padding: var(--space-2xs) var(--space-xs);
  text-decoration: none;
}

.iargs-pagination .current { color: var(--color-text); font-weight: 600; }

/* 9. Footer ================================================================ */
/* Tres faixas (SPEC-007 secao 7): vermelha "Acesse", branca com sede e contato,
   vermelho escuro com direitos. */

.iargs-footer { margin-top: var(--space-2xl); }

/* 9.1 Faixa "Acesse": titulo, colunas de widgets e redes sociais. */
.iargs-footer__access {
  padding-block: var(--space-xl);
  border-top: 4px solid var(--color-accent);
  background-color: var(--color-primary);
  color: #fff;
}

.iargs-footer__access-inner {
  display: grid;
  gap: var(--space-lg);
}

/* Cor explicita: o theme.json da aos titulos a cor do texto, que venceria o branco
   herdado da faixa (1,58:1 na auditoria axe). */
.iargs-footer__access-title {
  color: #fff;
  font-size: var(--text-h3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.iargs-footer__columns {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 640px) {
  .iargs-footer__columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .iargs-footer__access-inner { grid-template-columns: 160px 1fr auto; }

  .iargs-footer__columns { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.iargs-footer__heading {
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Titulos das colunas em branco, com o dourado so no fio. Com o vinho antigo o
   dourado dava 4,38:1 em texto de 13px (abaixo do AA); no vermelho da logo da
   5,1:1 e passaria, mas o fio dourado ficou como linguagem (SPEC-018). */
.iargs-footer__access .iargs-footer__heading,
.iargs-footer__access .wp-block-heading {
  display: inline-block;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-3xs);
  border-bottom: 2px solid var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Widgets de bloco herdam a cor escura do texto; no fundo vermelho, tudo em branco. */
.iargs-footer__access .iargs-widget { color: #fff; }

.iargs-footer__menu { display: grid; gap: var(--space-2xs); }

.iargs-footer__access a { color: #fff; text-decoration: none; font-size: var(--text-small); }

.iargs-footer__access a:hover { color: #fff; text-decoration: underline; }

/* Widgets do rodape: qualquer widget ou bloco cai neste ritmo. */
.iargs-footer__column > .iargs-widget + .iargs-widget { margin-top: var(--space-lg); }

.iargs-footer__access .iargs-widget ul { display: grid; gap: var(--space-2xs); }

.iargs-footer__access .iargs-widget li { font-size: var(--text-small); }

.iargs-footer__access .iargs-widget p { font-size: var(--text-small); }

/* Redes sociais: icones em quadrados dourados (SPEC-007, decisao 8). */
.iargs-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  max-width: 200px;
}

.iargs-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background-color: var(--color-accent);
  color: var(--color-primary-dark);
  transition: background-color var(--transition);
}

.iargs-social__link:hover { background-color: #fff; color: var(--color-primary-dark); }

.iargs-social__link .iargs-icon { width: 22px; height: 22px; }

/* Formularios dentro do rodape vermelho (widget de busca, por exemplo). */
.iargs-footer__access input[type="search"],
.iargs-footer__access input[type="text"],
.iargs-footer__access input[type="email"] {
  width: 100%;
  padding: 10px var(--space-xs);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem; /* 16px, pelo mesmo motivo da busca do cabecalho */
}

.iargs-footer__access input::placeholder { color: rgba(255, 255, 255, 0.7); }

.iargs-footer__access input[type="submit"],
.iargs-footer__access button[type="submit"] {
  margin-top: var(--space-2xs);
  padding: 10px var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  background-color: transparent;
  color: #fff;
  font-size: var(--text-small);
  font-weight: 600;
}

.iargs-footer__access input[type="submit"]:hover,
.iargs-footer__access button[type="submit"]:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.iargs-footer__access label { display: block; font-size: var(--text-meta); }

/* 9.2 Faixa branca: sede, fale conosco, coluna livre. Titulos em serifa. */
.iargs-footer__info {
  padding-block: var(--space-xl);
  background-color: var(--color-background);
}

.iargs-footer__info-columns { display: grid; gap: var(--space-lg); }

@media (min-width: 640px) {
  .iargs-footer__info-columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .iargs-footer__info-columns { grid-template-columns: repeat(3, 1fr); }
}

.iargs-footer__info-heading {
  margin-bottom: var(--space-sm);
  font-size: var(--text-h3);
}

.iargs-footer__info p,
.iargs-footer__info address,
.iargs-footer__info li {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.iargs-footer__info p + p { margin-top: var(--space-3xs); }

.iargs-footer__label { font-weight: 600; }

.iargs-footer__info .iargs-widget ul { display: grid; gap: var(--space-3xs); }

/* 9.3 Barra inferior */
.iargs-footer__bottom {
  padding-block: var(--space-md);
  background-color: var(--color-primary-dark);
  color: #fff;
  font-size: var(--text-meta);
}

.iargs-footer__bottom-inner {
  display: grid;
  gap: var(--space-xs);
}

@media (min-width: 1024px) {
  .iargs-footer__bottom-inner {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-lg);
  }

  .iargs-footer__bottom-inner > :last-child:not(:first-child) { text-align: right; }
}

.iargs-footer__bottom a { color: #fff; }

/* Comentarios: sobrios, fora da coluna de leitura principal do artigo. */
.iargs-comments {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--border-thin);
}

.iargs-comments__title { font-size: var(--text-h3); margin-bottom: var(--space-md); }

.iargs-comments__list { margin-bottom: var(--space-xl); }

.iargs-comments__list ol { list-style: none; padding-left: var(--space-lg); }

.iargs-comments .comment-body {
  padding-block: var(--space-md);
  border-bottom: var(--border-thin);
  font-size: var(--text-small);
}

.iargs-comments .comment-meta { font-size: var(--text-meta); color: var(--color-text-muted); }

.iargs-comments .comment-form-comment textarea,
.iargs-comments input[type="text"],
.iargs-comments input[type="email"],
.iargs-comments input[type="url"] {
  width: 100%;
  max-width: 100%;
  padding: var(--space-xs);
  border: var(--border-thin);
  border-radius: var(--radius);
  background-color: var(--color-background);
}

.iargs-comments label { display: block; font-size: var(--text-meta); font-weight: 600; }

.iargs-comments p { margin-top: var(--space-md); }

/* 10. Utilitarios ========================================================== */

.iargs-button {
  display: inline-block;
  padding: 12px var(--space-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition);
}

.iargs-button:hover { background-color: var(--color-primary-dark); color: #fff; }

/* 11. Conteudo e midia ===================================================== */
/* Regras escritas para valer nos DOIS editores: classico (TinyMCE) e blocos.
   Ver DESIGN-SPEC secao 19 e SPEC-001. Estilizar pelo elemento semantico
   primeiro; classes especificas de cada editor entram so quando necessario. */

/* 11.1 Ritmo do artigo */
.iargs-entry__content > * + * { margin-top: var(--space-md); }

.iargs-entry__content > h2 { margin-top: var(--space-xl); }

.iargs-entry__content > h3 { margin-top: var(--space-lg); }

/* Lide: so quando o texto abre a materia, nao quando ela comeca por imagem. */
.iargs-entry__content > p:first-child { font-size: var(--text-lead); }

/* Imagem flutuada exige clear ao fim do artigo. */
.iargs-entry__content::after { content: ""; display: table; clear: both; }

/* 11.2 Figuras, alinhamentos e legendas */
.iargs-entry__content figure { margin: var(--space-lg) 0; }

.iargs-entry__content figure img { width: 100%; }

/* Imagem redimensionada a mao no editor de blocos: o Gutenberg grava a largura
   como estilo inline no proprio img, que vence a regra acima por si so. A
   figure precisa encolher junto, senao o float ocupa a coluna inteira. */
.iargs-entry__content figure.wp-block-image.is-resized { width: fit-content; max-width: 100%; }

.iargs-entry__content figcaption,
.iargs-entry__content .wp-caption-text {
  margin-top: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--text-meta);
  line-height: 1.4;
  text-align: left;
}

.iargs-entry__content .wp-caption { max-width: 100%; margin: var(--space-lg) 0; }

.iargs-entry__content .wp-caption img { width: 100%; }

.iargs-entry__content .aligncenter { margin-inline: auto; }

@media (min-width: 640px) {
  .iargs-entry__content .alignleft {
    float: left;
    max-width: 50%;
    margin: var(--space-3xs) var(--space-md) var(--space-md) 0;
  }

  .iargs-entry__content .alignright {
    float: right;
    max-width: 50%;
    margin: var(--space-3xs) 0 var(--space-md) var(--space-md);
  }
}

/* Abaixo de 640px nao existe imagem flutuada (DESIGN-SPEC 19.3). */
@media (max-width: 639px) {
  .iargs-entry__content .alignleft,
  .iargs-entry__content .alignright {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }
}

/* 11.3 Largura ampliada (so no editor de blocos) */
.iargs-entry__content > .alignwide {
  width: min(var(--container-max), calc(100vw - (var(--gutter) * 2)));
  max-width: none;
  margin-inline: calc(50% - min(var(--container-max), calc(100vw - (var(--gutter) * 2))) / 2);
}

.iargs-entry__content > .alignfull {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
}

/* 11.4 Video: cobre o iframe solto do classico e o bloco de embed. */
.iargs-entry__content iframe,
.iargs-entry__content .wp-block-embed__wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.iargs-entry__content .wp-embed-aspect-4-3 iframe { aspect-ratio: 4 / 3; }

.iargs-entry__content .wp-embed-aspect-1-1 iframe { aspect-ratio: 1; }

.iargs-entry__content .wp-embed-aspect-9-16 iframe { aspect-ratio: 9 / 16; }

.iargs-entry__content .wp-block-embed { margin-block: var(--space-lg); }

/* 11.5 Galeria: mesmo resultado nos dois editores, por caminhos diferentes.
   - [gallery] do editor classico nao tem layout proprio: o grid abaixo e nosso.
   - O bloco de galeria ja traz o layout do core, com seletores de especificidade
     alta (:first-child:nth-last-child(n+3)). Brigar com eles exigiria !important
     ou seletores artificiais, e quebraria a cada versao do WordPress. Em vez
     disso ajustamos o que o core expoe: o gap e a proporcao da imagem. */
.iargs-entry__content .gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xs);
  margin-block: var(--space-lg);
}

.iargs-entry__content .wp-block-gallery {
  --wp--style--unstable-gallery-gap: var(--space-2xs);
  gap: var(--space-2xs);
  margin-block: var(--space-lg);
}

@media (min-width: 640px) {
  .iargs-entry__content .gallery { grid-template-columns: repeat(3, 1fr); }

  .iargs-entry__content .gallery-columns-1 { grid-template-columns: 1fr; }

  .iargs-entry__content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
}

.iargs-entry__content .gallery-item { width: auto; max-width: none; margin: 0; }

.iargs-entry__content .gallery-icon { margin: 0; }

/* O core da flex-grow:1 aos itens, o que estica a ultima linha quando ela fica
   incompleta (8 fotos = 3+3+2). Zerar mantem todas as fotos do mesmo tamanho,
   como no grid do editor classico. */
.iargs-entry__content .wp-block-gallery.has-nested-images figure.wp-block-image {
  flex-grow: 0;
}

/* A proporcao uniforme e o outro ponto em que precisamos vencer o core: ele
   define width/height auto na imagem aninhada. Mesma especificidade + o
   prefixo do tema resolve, sem !important. */
.iargs-entry__content .gallery-item img,
.iargs-entry__content .wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* 11.6 Citacao, listas e tabela */
.iargs-entry__content blockquote {
  margin: var(--space-xl) 0;
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-lead);
}

.iargs-entry__content blockquote cite {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-style: normal;
}

.iargs-entry__content ul,
.iargs-entry__content ol { padding-left: var(--space-md); }

.iargs-entry__content li + li { margin-top: var(--space-2xs); }

.iargs-entry__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.iargs-entry__content th,
.iargs-entry__content td {
  padding: var(--space-2xs) var(--space-xs);
  border-bottom: var(--border-thin);
  text-align: left;
}

.iargs-entry__content th { font-weight: 600; }

/* O bloco de tabela desenha borda em volta de cada celula; o editor classico
   nao. Iguala os dois no fio inferior do DESIGN-SPEC. */
.iargs-entry__content .wp-block-table td,
.iargs-entry__content .wp-block-table th {
  border: 0;
  border-bottom: var(--border-thin);
}

.iargs-entry__content .wp-block-table { margin-block: var(--space-lg); }

/* Unico scroll horizontal permitido no projeto: tabela larga no mobile. */
@media (max-width: 639px) {
  .iargs-entry__content table { display: block; overflow-x: auto; }
}

/* 11.7 Imagem destacada do artigo */
.iargs-entry__media--featured { margin-block: var(--space-lg); }

.iargs-entry__media--featured img { aspect-ratio: 16 / 9; object-fit: cover; }

/* 11.8 Rodape de termos */
.iargs-entry__terms {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--border-thin);
  color: var(--color-text-muted);
  font-size: var(--text-meta);
}

.iargs-entry__terms p + p { margin-top: var(--space-3xs); }

.iargs-entry__terms-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 12. Eventos ============================================================== */
/* Agenda, pagina do evento e widget. SPEC-003, DESIGN-SPEC secao 7.5. */

/* 12.1 Agenda (SPEC-020): agrupada por mes, bloco de data a esquerda, cartaz a
   direita. O item inteiro e clicavel (link do titulo + ::after), como na capa. */
.iargs-container--events { max-width: calc(1000px + (var(--gutter) * 2)); }

.iargs-events-group + .iargs-events-group { margin-top: var(--space-xl); }

.iargs-events-group__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iargs-events-group__title::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--color-accent);
}

.iargs-events { display: grid; }

.iargs-event {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding-block: var(--space-lg);
  border-bottom: var(--border-thin);
}

.iargs-event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs) var(--space-3xs);
  border-top: 3px solid var(--color-primary);
  background-color: var(--color-paper);
  color: var(--color-primary);
  line-height: 1;
  text-align: center;
}

.iargs-event__weekday {
  margin-bottom: var(--space-3xs);
  color: var(--color-text-muted);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iargs-event__day {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 600;
  white-space: nowrap;
}

/* Varios dias ("25–27"): o numero diminui para caber no bloco. */
.iargs-event__date--range .iargs-event__day { font-size: var(--text-h3); }

.iargs-event__month {
  margin-top: var(--space-3xs);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iargs-event__year {
  margin-top: var(--space-3xs);
  color: var(--color-text-muted);
  font-size: var(--text-meta);
}

.iargs-event__title {
  margin-bottom: var(--space-2xs);
  font-size: var(--text-h3);
  line-height: 1.3;
}

.iargs-event__title a { color: var(--color-text); text-decoration: none; }

.iargs-event .iargs-event__title a::after { content: ""; position: absolute; inset: 0; }

.iargs-event:hover .iargs-event__title a,
.iargs-event__title a:focus-visible { color: var(--color-primary); text-decoration: underline; }

/* Links proprios do item ficam acima da area clicavel. */
.iargs-event__signup a,
.iargs-event__tags a { position: relative; z-index: 1; }

.iargs-event__when {
  color: var(--color-text);
  font-size: var(--text-small);
  font-weight: 600;
}

.iargs-event__place {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-top: var(--space-3xs);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.iargs-event__place .iargs-icon { width: 1em; height: 1em; color: var(--color-primary); }

/* Selos (SPEC-020): pequenos, em texto; nunca so cor. */
.iargs-event__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}

.iargs-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px var(--space-2xs);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-primary);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.iargs-tag--live { background-color: var(--color-primary); color: #fff; }

.iargs-event__excerpt {
  display: -webkit-box;
  margin-top: var(--space-xs);
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-small);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.iargs-events__empty { color: var(--color-text-muted); }

/* Inscricao na agenda: link com alvo de 44px; o botao fica na pagina do evento. */
.iargs-event__signup { margin-top: var(--space-2xs); }

.iargs-event__signup a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  color: var(--color-primary);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* Cartaz inteiro, sem corte: caixa 4:5 cor de papel, a arte cabe dentro. */
.iargs-event-poster {
  margin: 0;
  background-color: var(--color-paper);
}

.iargs-event .iargs-event-poster { display: none; aspect-ratio: 4 / 5; }

.iargs-event-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.iargs-events__switch {
  margin-top: var(--space-xl);
  font-size: var(--text-small);
  font-weight: 600;
}

/* Realizados: bloco de data e cartaz apagados; o cartaz ganha cor no hover. */
.iargs-event--past .iargs-event__date {
  border-top-color: var(--color-border);
  color: var(--color-text-muted);
}

.iargs-event--past .iargs-event-poster img { filter: grayscale(1); opacity: 0.8; transition: filter var(--transition), opacity var(--transition); }

.iargs-event--past:hover .iargs-event-poster img { filter: none; opacity: 1; }

@media (min-width: 640px) {
  .iargs-event--poster { grid-template-columns: 88px minmax(0, 1fr) 128px; }

  .iargs-event .iargs-event-poster { display: block; }
}

/* Celular: bloco de data menor, ao lado do texto; sem cartaz na lista. */
@media (max-width: 639px) {
  .iargs-event { grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-sm); }

  .iargs-event__day { font-size: var(--text-h3); }

  .iargs-event__date--range .iargs-event__day { font-size: var(--text-base); }
}

/* 12.2 Pagina do evento (SPEC-020): titulo, ficha e cartaz inteiro a direita a
   partir de 1024px; uma coluna abaixo disso (titulo, ficha, cartaz, texto). */
.iargs-event-single {
  display: grid;
  grid-template-areas: "header" "sheet" "poster" "content";
  grid-template-columns: minmax(0, 1fr);
}

.iargs-event-single:not(.iargs-event-single--poster) { max-width: var(--container-text); }

.iargs-event-single__header { grid-area: header; padding-bottom: var(--space-md); }

.iargs-event-single__header .iargs-event__tags { margin-top: var(--space-sm); }

.iargs-event-sheet {
  grid-area: sheet;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 3px solid var(--color-accent);
  background-color: var(--color-paper);
}

.iargs-event-sheet__list { margin: 0; }

.iargs-event-sheet__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-bottom: 1px solid #e4dccd;
}

.iargs-event-sheet__row dt {
  display: flex;
  align-items: center;
  align-self: start;
  padding-top: 0.2em;
  gap: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.iargs-event-sheet__row dt .iargs-icon { width: 1.1em; height: 1.1em; color: var(--color-primary); }

.iargs-event-sheet__row dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-base);
}

.iargs-event-sheet .iargs-event__when { font-size: var(--text-base); font-weight: 700; }

.iargs-event-sheet__countdown {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--color-primary);
  font-size: var(--text-small);
  font-weight: 700;
}

.iargs-event-notice {
  margin: var(--space-xs) 0;
  padding: var(--space-xs) var(--space-sm);
  border-left: 3px solid var(--color-border);
  background-color: var(--color-background);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.iargs-event-signup { margin-top: var(--space-md); }

.iargs-event-signup .iargs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font-size: var(--text-base);
}

/* Acoes da ficha como links com icone, numa linha (no lugar dos botoes contornados). */
.iargs-actions--links { gap: 0 var(--space-lg); margin-top: var(--space-xs); }

.iargs-event-sheet__row .iargs-actions--links { margin-top: 0; }

.iargs-actions--links .iargs-action {
  min-height: 44px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-primary);
  font-size: var(--text-small);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iargs-actions--links .iargs-action:hover { background-color: transparent; color: var(--color-primary-dark); }

.iargs-event-single__poster { grid-area: poster; margin-top: var(--space-lg); }

.iargs-event-poster--zoom a { display: block; }

.iargs-event-poster--zoom img { height: auto; }

.iargs-event-single .iargs-entry__content { grid-area: content; margin-top: var(--space-lg); }

@media (max-width: 639px) {
  .iargs-event-sheet { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  .iargs-event-sheet__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }

  .iargs-event-signup .iargs-button { width: 100%; }

  .iargs-actions.iargs-actions--links { flex-direction: row; }

  .iargs-actions--links .iargs-action { justify-content: flex-start; width: auto; }
}

@media (min-width: 1024px) {
  .iargs-event-single--poster {
    grid-template-areas: "header poster" "sheet poster" "content poster";
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-2xl);
  }

  .iargs-event-single--poster .iargs-event-single__poster {
    position: sticky;
    top: var(--space-lg);
    align-self: start;
    margin-top: var(--space-xl);
  }
}

/* Proximos eventos, no fim da pagina do evento. O fio de cima e o do fim do
   artigo (.iargs-entry). */
.iargs-event-next { margin-top: var(--space-xl); }

.iargs-event-next__title {
  margin-bottom: var(--space-md);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iargs-event-next__list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.iargs-event-next__item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}

.iargs-event-next__item .iargs-event__day { font-size: var(--text-h3); }

.iargs-event-next__item .iargs-event__date--range .iargs-event__day { font-size: var(--text-base); }

.iargs-event-next__item .iargs-event__title { font-size: var(--text-base); }

.iargs-event-next__item .iargs-event__title a::after { content: ""; position: absolute; inset: 0; }

.iargs-event-next__item:hover .iargs-event__title a { color: var(--color-primary); text-decoration: underline; }

.iargs-event-next__when { color: var(--color-text-muted); font-size: var(--text-small); }

.iargs-event-next .iargs-events__switch { margin-top: var(--space-lg); }

@media (min-width: 768px) {
  .iargs-event-next__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 12.3 Widget "Proximos eventos": herda a cor da area onde for colocado. */
.iargs-widget-events__list { display: grid; gap: var(--space-sm); }

.iargs-widget-events__item { display: grid; gap: var(--space-3xs); }

.iargs-widget-events__date,
.iargs-widget-events__place {
  font-size: var(--text-meta);
  opacity: 0.85;
}

.iargs-widget-events__date {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iargs-widget-events__more {
  margin-top: var(--space-sm);
  font-size: var(--text-meta);
  font-weight: 600;
}

/* 13. Home ================================================================= */
/* Composicao da capa, SPEC-011: faixas em largura total; algumas com duas
   secoes lado a lado (manchete + agenda, noticias + mural). Nenhum carrossel.
   A assinatura: "§" dourado nos titulos, faixa cor de papel e filete dourado
   duplo entre as faixas. */

/* 13.1 Faixas e linhas */
.iargs-home-band { padding-block: var(--space-xl); }

.iargs-home-band + .iargs-home-band { border-top: 3px double var(--color-accent); }

/* first-of-type, nao first-child: o primeiro filho do main e o H1 oculto. */
.iargs-home-band:first-of-type { padding-top: var(--space-lg); }

.iargs-home-band--paper { background-color: var(--color-paper); }

.iargs-home-row { display: grid; gap: var(--space-xl); }

.iargs-home-block { min-width: 0; }

@media (min-width: 1024px) {
  .iargs-home-row--lead.is-split { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }

  .iargs-home-row--paper.is-split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}

/* 13.2 Cabecalho de secao: "§" dourado, titulo em serifa, fio fino, "Ver todas". */
.iargs-home-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: var(--border-thin);
}

.iargs-home-section__title {
  min-width: 0;
  font-size: var(--text-h2);
  text-wrap: pretty;
}

/* O paragrafo juridico: so decoracao, fora da leitura (o CSS nao entra no nome). */
.iargs-home-section__title::before {
  content: "§";
  margin-right: 0.3em;
  color: var(--color-accent-dark);
  font-weight: 400;
}

.iargs-home-section__header .iargs-link-more { margin-left: auto; }

.iargs-link-more {
  flex-shrink: 0;
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.iargs-link-more:hover { text-decoration: underline; }

.iargs-home-block__footer { margin-top: var(--space-md); }

/* 13.3 Manchete: foto a esquerda, painel vermelho a direita; secundarias abaixo. */
.iargs-home-lead {
  position: relative;
  display: grid;
}

.iargs-home-lead__media { display: block; margin: 0; background-color: var(--color-surface); }

.iargs-home-lead__media img,
.iargs-home-lead__media.iargs-entry__media--empty {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.iargs-home-lead__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-bottom: 4px solid var(--color-accent);
  background-color: var(--color-primary);
  color: #fff;
}

.iargs-home-lead__kicker {
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.iargs-home-lead__title {
  color: #fff;
  font-size: var(--text-h2);
  line-height: 1.2;
}

.iargs-home-lead__title a { color: #fff; text-decoration: none; }

.iargs-home-lead__title a::after { content: ""; position: absolute; inset: 0; }

.iargs-home-lead__title a:hover { text-decoration: underline; }

.iargs-home-lead__title a:focus-visible { outline: none; }

.iargs-home-lead:focus-within { outline: var(--focus-ring); outline-offset: 3px; }

.iargs-home-lead__excerpt { font-size: var(--text-small); line-height: 1.55; opacity: 0.92; }

.iargs-home-lead__meta { font-size: var(--text-meta); opacity: 0.85; }

@media (min-width: 768px) {
  .iargs-home-lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Secundarias: miniatura + data + titulo, em linha. */
/* Dois seletores: o reset ul[class] { margin: 0; padding: 0 } tem
   especificidade maior que uma classe so, e colava as chamadas na foto. */
.iargs-home-hero .iargs-home-lead__more {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

@media (min-width: 640px) {
  .iargs-home-lead__more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.iargs-home-lead__item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-xs);
  align-items: start;
}

.iargs-home-lead__thumb { display: block; margin: 0; background-color: var(--color-surface); }

.iargs-home-lead__thumb img,
.iargs-home-lead__thumb.iargs-entry__media--empty { width: 72px; aspect-ratio: 1; object-fit: cover; }

.iargs-home-lead__item .iargs-entry__meta { margin-bottom: 2px; }

.iargs-home-lead__item-title { font-size: var(--text-small); line-height: 1.35; }

.iargs-home-lead__item-title a,
.iargs-home-agenda__title a,
.iargs-home-news__title a,
.iargs-home-note__title a,
.iargs-home-link__title a { color: var(--color-text); text-decoration: none; }

.iargs-home-lead__item-title a:hover,
.iargs-home-agenda__title a:hover,
.iargs-home-news__title a:hover,
.iargs-home-note__title a:hover { color: var(--color-primary); text-decoration: underline; }

/* 13.4 Agenda: dia e mes grandes, em coluna ao lado da manchete. */
.iargs-home-agenda__list { display: grid; }

.iargs-home-agenda__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: var(--border-thin);
}

.iargs-home-agenda__item:first-child { padding-top: 0; }

.iargs-home-agenda__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--space-2xs);
  border-top: 3px solid var(--color-primary);
  background-color: var(--color-paper);
  color: var(--color-primary);
  line-height: 1;
}

.iargs-home-agenda__day { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; }

/* Varios dias ("25–27", SPEC-020): menor, para caber na coluna da data. */
.iargs-home-agenda__day--range { font-size: var(--text-base); white-space: nowrap; }

.iargs-home-agenda__month {
  margin-top: var(--space-3xs);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.iargs-home-agenda__title { font-size: var(--text-base); line-height: 1.3; }

.iargs-home-agenda__when,
.iargs-home-agenda__place { color: var(--color-text-muted); font-size: var(--text-meta); }

/* Sem o respiro de paragrafo (p + p) do texto corrido. */
.iargs-home-agenda__body p + p { margin-top: 2px; }

.iargs-home-agenda__when { margin-top: 2px; color: var(--color-primary); font-weight: 600; }

/* 13.5 Acesso rapido: os botoes com imagem em linha. */
.iargs-home-buttons__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .iargs-home-buttons__list { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

.iargs-home-button figure { margin: 0; }

.iargs-home-button a { display: block; }

.iargs-home-button img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  transition: opacity var(--transition);
}

.iargs-home-button a:hover img { opacity: 0.88; }

/* 13.6 Noticias: data e titulo em duas colunas, sobre o papel. */
.iargs-home-news__list { display: grid; column-gap: var(--space-xl); }

@media (min-width: 640px) {
  .iargs-home-news__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.iargs-home-news__item {
  padding-block: var(--space-sm);
  border-bottom: 1px solid #e4dccd;
}

.iargs-home-news__item .iargs-entry__meta { margin-bottom: 2px; }

.iargs-home-news__title {
  font-size: var(--text-lead);
  line-height: 1.3;
  text-wrap: pretty;
}

/* 13.7 Mural e cursos: a arte inteira, sem recorte (SPEC-007, decisao 5). */
.iargs-home-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.iargs-home-note__media { display: block; background-color: var(--color-background); }

.iargs-home-note__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.iargs-home-note__title { font-size: var(--text-base); line-height: 1.35; }

.iargs-home-note__excerpt {
  display: flex;
  align-items: center;
  aspect-ratio: 1;
  padding: var(--space-md);
  border-top: 3px solid var(--color-primary);
  background-color: var(--color-paper);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

/* Mural: a primeira com arte; as seguintes so em texto, com fio. */
.iargs-home-mural .iargs-home-mural__list { margin-top: var(--space-sm); }

.iargs-home-mural__list .iargs-home-note {
  padding-block: var(--space-xs);
  border-top: 1px solid #e4dccd;
}

.iargs-home-mural__list .iargs-home-note__title::before {
  content: "›";
  margin-right: var(--space-2xs);
  color: var(--color-accent-dark);
}

/* Cursos: grade de cartazes. */
.iargs-home-posters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
}

/* 13.8 Institucional: banners em grade e atalhos com seta dourada. */
.iargs-home-banners {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
  .iargs-home-banners { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.iargs-home-banner figure { margin: 0; }

.iargs-home-banner a { display: block; }

.iargs-home-banner img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  transition: opacity var(--transition);
}

.iargs-home-banner a:hover img { opacity: 0.88; }

.iargs-home-links__list { display: grid; gap: var(--space-sm); }

@media (min-width: 640px) {
  .iargs-home-links__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .iargs-home-links__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.iargs-home-link {
  position: relative;
  padding: var(--space-sm) var(--space-md);
  border: var(--border-thin);
  border-left: 3px solid var(--color-accent);
  transition: border-color var(--transition);
}

.iargs-home-link:hover { border-color: var(--color-primary); border-left-color: var(--color-accent); }

.iargs-home-link__title { font-size: var(--text-lead); line-height: 1.3; }

.iargs-home-link__title a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.iargs-home-link__title .iargs-icon { width: 20px; height: 20px; color: var(--color-accent-dark); }

.iargs-home-link__title a::after { content: ""; position: absolute; inset: 0; }

.iargs-home-link:hover .iargs-home-link__title a { color: var(--color-primary); }

.iargs-home-link__title a:focus-visible { outline: none; }

.iargs-home-link:focus-within { outline: var(--focus-ring); outline-offset: 2px; }

.iargs-home-link__desc { margin-top: var(--space-3xs); color: var(--color-text-muted); font-size: var(--text-meta); }

/* 13.9 Faixa de categoria (opcional): cards de 3 colunas. */
.iargs-home-band .iargs-entries { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .iargs-home-band .iargs-entries { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .iargs-home-band .iargs-entries { grid-template-columns: repeat(3, 1fr); }
}

/* 13.10 Vitrine: dois blocos lado a lado, cartoes de widget. */
.iargs-home-vitrine__grid { display: grid; gap: var(--space-xl); }

@media (min-width: 1024px) {
  .iargs-home-vitrine__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Titulo em painel: nao e mais usado na capa (SPEC-011), mas continua como o
   estilo de bloco "Titulo em painel" para as paginas (inc/content.php). */
.iargs-panel-title,
.wp-block-heading.is-style-iargs-panel {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-right: 4px solid var(--color-accent);
  border-bottom: 4px solid var(--color-accent);
  background-color: var(--color-primary);
  color: #fff;
  font-size: var(--text-h3);
}

.iargs-home-vitrine__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.iargs-home-vitrine__item {
  padding: var(--space-md);
  border: var(--border-thin);
  text-align: center;
}

.iargs-home-vitrine__item-title { margin-bottom: var(--space-sm); font-size: var(--text-lead); }

.iargs-home-vitrine__item figure { margin: 0; }

.iargs-home-vitrine__item img { width: 100%; height: auto; margin-inline: auto; }

.iargs-home-vitrine__item p { font-size: var(--text-small); }

.iargs-home-vitrine__item > * + * { margin-top: var(--space-sm); }

/* 13.11 Selo do centenario (cabecalho) e faixa do centenario (rodape). */
.iargs-seal {
  display: none;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border-left: 1px solid var(--color-accent);
  color: var(--color-primary);
  line-height: 1;
}

.iargs-seal__big { grid-row: span 2; font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; }

.iargs-seal__small { font-family: var(--font-heading); font-size: var(--text-small); font-style: italic; }

.iargs-seal__line { color: var(--color-text-muted); font-size: var(--text-meta); letter-spacing: 0.06em; }

@media (min-width: 640px) {
  .iargs-seal { display: grid; }
}

/* Selo como link para a pagina do centenario (plugin, SPEC-015). */
.iargs-seal--link { text-decoration: none; }

.iargs-seal--link:hover .iargs-seal__small { text-decoration: underline; }

/* Medalha dos 100 anos (SPEC-019), ate o fim de 2026.
   Celular: a direita da logo centralizada. 640-1279px (e telas de toque): no fluxo,
   no lugar do selo de texto. 1280px+ com mouse: pendurada na ponta direita da barra
   do menu, com o disco atravessando a barra e as fitas no respiro abaixo dela.
   So o disco e clicavel (o ::before); as fitas deixam passar o clique. */
.iargs-branding__inner { position: relative; }

.iargs-seal--medal {
  display: block;
  position: absolute;
  top: 50%;
  right: var(--gutter);
  padding: 0;
  border: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.iargs-seal--medal img {
  display: block;
  width: auto;
  height: 84px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.iargs-seal--medal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: auto;
}

.iargs-seal--medal:focus-visible { outline-offset: 4px; }

@media (min-width: 640px) {
  .iargs-seal--medal { position: relative; top: auto; right: auto; transform: none; }

  .iargs-seal--medal img { height: 88px; }
}

@media (min-width: 1024px) {
  .iargs-seal--medal img { height: 96px; }
}

@media (min-width: 1280px) and (hover: hover) {
  /* Sem o selo no fluxo, a grade do cabecalho perde uma coluna. */
  .iargs-branding__inner:has(.iargs-seal--medal) { grid-template-columns: auto 1fr auto; }

  .iargs-seal--medal {
    position: absolute;
    top: auto;
    right: var(--gutter);
    bottom: -98px;
    z-index: 40; /* acima da barra do menu (estatica aqui), abaixo dos submenus (50) */
  }

  .iargs-seal--medal img { height: 120px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35)); }

  /* Reserva na barra: com mais itens, o menu quebra linha antes de passar por
     baixo da medalha. */
  .iargs-has-medal .iargs-nav-primary__menu { padding-right: 112px; }
}

.iargs-footer__centenary a { color: inherit; text-underline-offset: 3px; }

.iargs-footer__centenary {
  padding: var(--space-xs) var(--gutter);
  background-color: var(--color-paper);
  border-top: 3px double var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-style: italic;
  text-align: center;
}

/* 14. Carrossel ============================================================ */
/* SPEC-007 secao 6. Scroll-snap faz o trabalho; sem JavaScript e uma faixa que
   rola de lado. main.js so poe as setas no slot .iargs-carousel__nav. */

.iargs-carousel {
  --per-view: 1;
  --carousel-gap: var(--space-sm);
  position: relative;
}

.iargs-carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  padding: 3px; /* espaco para o anel de foco dos itens */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 3px; /* sem isto o snap alinha o item em scrollLeft=3 e a seta "anterior" nunca desativa */
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.iargs-carousel__track::-webkit-scrollbar { display: none; }

.iargs-carousel__item {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--carousel-gap)) / var(--per-view));
  min-width: 0;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .iargs-carousel[data-per-view="2"],
  .iargs-carousel[data-per-view="3"],
  .iargs-carousel[data-per-view="4"] { --per-view: 2; }
}

@media (min-width: 1024px) {
  .iargs-carousel[data-per-view="3"] { --per-view: 3; }

  .iargs-carousel[data-per-view="4"] { --per-view: 4; }
}

.iargs-carousel__nav {
  display: flex;
  gap: var(--space-3xs);
}

.iargs-carousel__nav[hidden] { display: none; }

.iargs-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: var(--border-thin);
  border-radius: var(--radius);
  background-color: var(--color-background);
  color: var(--color-primary);
  transition: border-color var(--transition);
}

.iargs-carousel__btn:hover { border-color: var(--color-primary); }

.iargs-carousel__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

.iargs-carousel__btn .iargs-icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .iargs-carousel__track { scroll-behavior: auto; }
}

/* 14.1 Pontos e pausa (banners de divulgacao, SPEC-012). */
.iargs-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

/* O alvo tem 44px; o ponto visivel e o ::before de 12px. */
.iargs-carousel__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.iargs-carousel__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  background-color: var(--color-background);
  transition: background-color var(--transition);
}

.iargs-carousel__dot[aria-current="true"]::before { background-color: var(--color-primary); }

/* 15. Banners de divulgacao ================================================ */
/* SPEC-012. A arte inteira, sem recorte (contain sobre o papel): artes trazem
   texto. 4:1 no desktop, 4:3 no celular (onde entra a arte de celular). */

.iargs-home-slides .iargs-carousel { --carousel-gap: 0px; }

.iargs-home-slides .iargs-carousel__track { padding: 0; scroll-padding: 0; }

.iargs-slide { position: relative; }

.iargs-slide picture,
.iargs-slide__link { display: block; }

.iargs-slide__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  object-fit: contain;
}

@media (max-width: 639px) {
  .iargs-slide__img { aspect-ratio: 4 / 3; }
}

.iargs-slide__link:focus-visible { outline-offset: -4px; }

.iargs-slides__controls {
  justify-content: center;
  align-items: center;
  margin-top: var(--space-xs);
}

.iargs-slides__controls .iargs-carousel__btn { width: 44px; height: 44px; }

/* O banner abre a capa colado na manchete: sem filete nem respiro duplo. */
.iargs-home-band--slides { padding-bottom: 0; }

.iargs-home-band--slides + .iargs-home-band { border-top: 0; padding-top: var(--space-lg); }

/* 16. Foto da diretoria ==================================================== */
/* SPEC-013. A janela inteira de largura, na segunda dobra. Ate 1600px a foto
   mostra a proporcao original (1800x700); acima disso, em telas muito largas,
   limita a altura e corta so em cima e embaixo, nunca as laterais (as pessoas
   das pontas). */

/* O filete dourado duplo acima da foto fica (vem da regra entre faixas). */
.iargs-home-band--board { padding-block: 0 var(--space-lg); }

.iargs-home-board__figure { margin: 0; }

.iargs-home-board__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: cover;
  object-position: center 35%;
}

.iargs-home-board__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-top: var(--space-md);
}

.iargs-home-board__text {
  margin-top: var(--space-3xs);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.iargs-home-board__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 600;
  text-decoration: none;
}

.iargs-home-board__more:hover { text-decoration: underline; }

.iargs-home-board__more .iargs-icon { color: var(--color-accent-dark); }

/* A faixa seguinte a foto nao precisa do filete: a foto ja separa. */
.iargs-home-band--board + .iargs-home-band { border-top: 0; padding-top: 0; }

/* 17. Celular para os associados ========================================== */
/* SPEC-014. Publico de mais idade: texto maior, alvos grandes, menu, busca e
   agenda sempre a mao (a barra fica na secao 7.1). O desktop nao muda. */

/* 17.1 Tamanhos: abaixo de 1024px, metadado 15px e texto pequeno 16px.
   Excecao documentada a secao 17 do DESIGN-SPEC: o desktop segue o theme.json. */
@media (max-width: 1023px) {
  :root {
    --text-meta: 0.9375rem;
    --text-small: 1rem;
  }
}

/* 17.2 Alvos de 44px: "ver mais" vira botao contornado; rodape e barra
   contextual com altura de toque. */
@media (max-width: 1023px) {
  .iargs-link-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-sm);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
  }

  .iargs-nav-secondary__section,
  .iargs-nav-secondary__menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }

  .iargs-footer__access a,
  .iargs-footer__info a,
  .iargs-footer__bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .iargs-footer__access .iargs-widget ul,
  .iargs-footer__menu { gap: 0; }

  .iargs-footer__access .iargs-social__link { width: 44px; height: 44px; }

  /* Avisos do topo: compactos, mas tocaveis. */
  .iargs-topbar__inner { gap: 0; padding-block: var(--space-3xs); }

  .iargs-topbar a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    line-height: 1.35;
  }
}

/* Consentimento dos comentarios: a caixa nativa tinha 13px. */
.iargs-comments input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0 var(--space-2xs) 0 0;
  vertical-align: middle;
}

/* 17.3 Capa no celular: manchete, agenda e so depois as secundarias. A secao da
   manchete "some" como caixa (display: contents) e os tres pedacos se ordenam na
   linha. Muda so a ordem visual (SPEC-014 §6). */
@media (max-width: 1023px) {
  .iargs-home-row--lead.is-split > .iargs-home-hero { display: contents; }

  .iargs-home-row--lead.is-split .iargs-home-lead { order: 1; }

  .iargs-home-row--lead.is-split > .iargs-home-agenda { order: 2; }

  .iargs-home-row--lead.is-split .iargs-home-hero .iargs-home-lead__more { order: 3; margin-top: 0; }
}

/* Inscricao na agenda da capa (duas classes: vence o p + p da agenda). */
.iargs-home-agenda__body .iargs-home-agenda__signup { margin-top: var(--space-2xs); }

.iargs-home-agenda__signup a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: var(--text-small);
  font-weight: 700;
  text-decoration: none;
}

.iargs-home-agenda__signup a:hover { background-color: var(--color-primary); color: #fff; }

@media (max-width: 1023px) {
  .iargs-home-agenda__signup a { min-height: 44px; }
}

/* 17.4 Busca: campo no topo, contagem, resultados compactos. */
.iargs-search-page .iargs-search {
  max-width: 560px;
  margin-top: var(--space-md);
}

.iargs-search-count {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.iargs-entry--compact.iargs-entry--no-media { grid-template-columns: 1fr; }

.iargs-entry__type {
  padding: 0 var(--space-2xs);
  border-radius: var(--radius);
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.iargs-search-empty { margin-top: var(--space-lg); }

.iargs-search-empty__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.iargs-search-empty__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: var(--space-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}

/* 17.5 Autor do artigo ("Por Fulana de Tal"). */
.iargs-entry__byline {
  margin: 2px 0 var(--space-3xs);
  color: var(--color-text);
  font-size: var(--text-small);
  font-weight: 600; /* sem italico: a secao 3 do DESIGN-SPEC reserva o italico a citacoes */
}

.iargs-page-header .iargs-entry__byline { margin-top: var(--space-xs); font-size: var(--text-lead); }

/* Titulos dos resultados no tamanho de H3: sao H2 na estrutura, mas uma lista. */
.iargs-search-page .iargs-entry__title { font-size: var(--text-h3); }

/* 17.6 Artigos dos associados na capa: o desenho das Noticias (13.6), com o autor. */
.iargs-home-articles__list { display: grid; column-gap: var(--space-xl); }

@media (min-width: 640px) {
  .iargs-home-articles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.iargs-home-articles__item {
  padding-block: var(--space-sm);
  border-bottom: var(--border-thin);
}

.iargs-home-articles__title {
  font-size: var(--text-lead);
  line-height: 1.3;
  text-wrap: pretty;
}

.iargs-home-articles__title a { color: var(--color-text); text-decoration: none; }

.iargs-home-articles__title a:hover { color: var(--color-primary); text-decoration: underline; }

.iargs-home-articles__item .iargs-entry__meta { margin: 0; }

/* 18. Banner em pop-up ===================================================== */
/* SPEC-016. Um <dialog> nativo: arte inteira, sem recorte, botao Fechar grande
   acima dela. A pagina por tras escurece e nao rola enquanto ele esta aberto. */

html.iargs-popup-open { overflow: hidden; }

/* A janela tem a largura da arte (em pe ou deitada), sem faixas sobrando. */
.iargs-popup {
  width: fit-content;
  max-width: none;
  max-height: calc(100vh - (var(--gutter) * 2));
  max-height: calc(100dvh - (var(--gutter) * 2));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background-color: transparent;
  overflow: visible;
}

.iargs-popup::backdrop { background-color: rgba(20, 8, 6, 0.78); }

.iargs-popup.is-animated[open] { animation: iargs-popup-in 200ms ease-out; }

@keyframes iargs-popup-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.iargs-popup__box { display: grid; gap: var(--space-2xs); }

.iargs-popup__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.iargs-popup__timer {
  margin: 0;
  color: #fff;
  font-size: var(--text-small);
}

.iargs-popup__close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding-inline: var(--space-md);
  border: 2px solid #fff;
  border-radius: var(--radius);
  background-color: var(--color-primary-dark);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
}

.iargs-popup__close:hover { background-color: #fff; color: var(--color-primary-dark); }

.iargs-popup__close:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.iargs-popup__link { display: block; }

.iargs-popup__link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* A arte inteira, do tamanho que couber na tela (descontada a barra do Fechar). */
.iargs-popup__img {
  display: block;
  width: auto;
  max-width: min(720px, calc(100vw - (var(--gutter) * 2)));
  height: auto;
  max-height: calc(100vh - (var(--gutter) * 2) - 56px);
  max-height: calc(100dvh - (var(--gutter) * 2) - 56px);
  object-fit: contain;
  background-color: var(--color-paper);
}

/* 19. Compartilhar, levar junto e ler melhor ================================= */
/* SPEC-017. Botoes de acao (WhatsApp, agenda do celular, mapa), "A+ Letra maior"
   e a folha de impressao. */

/* 19.1 Botoes de acao: contornados, com icone e texto, 48px. */
.iargs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.iargs-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding-inline: var(--space-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  background-color: var(--color-background);
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.iargs-action:hover { background-color: var(--color-primary); color: #fff; }

.iargs-action[hidden] { display: none; }

.iargs-action .iargs-icon { width: 20px; height: 20px; }

@media (max-width: 639px) {
  .iargs-actions { flex-direction: column; }

  .iargs-action { justify-content: center; width: 100%; }
}

/* 19.2 "A+ Letra maior": tudo no tema e em rem, entao tudo cresce junto. */
html.iargs-large-text { font-size: 118.75%; }

.iargs-text-size {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 36px;
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: var(--text-meta);
  font-weight: 600;
}

.iargs-text-size[hidden] { display: none; }

.iargs-text-size__icon { font-family: var(--font-heading); font-size: 1.125em; font-weight: 700; }

.iargs-text-size[aria-pressed="true"] {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
}

/* No painel do celular, sobre o vermelho. */
.iargs-nav-primary__textsize { padding-bottom: var(--space-xs); }

.iargs-nav-primary__textsize .iargs-text-size {
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.6);
  background-color: transparent;
  color: #fff;
  font-size: var(--text-base);
}

.iargs-nav-primary__textsize .iargs-text-size[aria-pressed="true"] {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-primary-dark);
}

@media (min-width: 1024px) and (hover: hover) {
  .iargs-nav-primary__textsize { display: none; }
}

/* 19.3 Impressao: folha limpa, texto preto sobre branco, sem navegacao.
   Excecao documentada: !important para vencer as regras de tela. */
@media print {
  .iargs-skip-link,
  .iargs-topbar,
  .iargs-nav-primary,
  .iargs-nav-secondary,
  .iargs-branding__center,
  .iargs-branding__aside,
  .iargs-seal,
  .iargs-footer__access,
  .iargs-footer__info,
  .iargs-footer__centenary,
  .iargs-popup,
  .iargs-carousel__nav,
  .iargs-actions,
  .iargs-event-signup,
  .iargs-event__signup,
  .iargs-home-agenda__signup,
  .iargs-text-size,
  .iargs-comments,
  .iargs-pagination,
  .iargs-events__switch,
  iframe,
  video,
  .wp-block-embed { display: none !important; }

  html,
  html.iargs-large-text { font-size: 100%; }

  body {
    background: #fff !important;
    color: #000;
    font-size: 11.5pt;
  }

  a { color: #000; }

  /* O endereco dos links do texto, porque no papel nao se clica. */
  .iargs-entry__content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .iargs-container { max-width: none; padding-inline: 0; }

  h1, h2, h3, h4 { break-after: avoid; }

  img, figure, li, .iargs-event { break-inside: avoid; }

  .iargs-footer { margin-top: 12pt; }

  .iargs-footer__bottom { padding: 6pt 0; background: none !important; color: #000; }
}

/* 20. Botao do WhatsApp ==================================================== */
/* SPEC-021. Fixo num canto de baixo, em todas as paginas. Quatro formatos: so o
   icone, icone com texto, icone com balao, cartao de atendimento. Cores do
   WhatsApp: o verde vivo so no circulo (a marca, reconhecivel); onde ha texto
   branco, o verde escuro, com contraste de 5,4:1 (decisao 5). */

.iargs-wa {
  --wa-green: #25d366;
  --wa-dark: #0f7a40;
  --wa-darker: #0b6533;
  --wa-head: #075e54;
  --wa-edge: 20px;
  --wa-size: 3.75rem;
  position: fixed;
  right: var(--wa-edge);
  bottom: var(--wa-edge);
  z-index: 55; /* abaixo da barra presa do celular (60) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
  max-width: calc(100vw - (var(--wa-edge) * 2));
  pointer-events: none; /* so os filhos recebem toque: a caixa nao bloqueia a pagina */
  animation: iargs-wa-in 300ms ease-out both;
}

.iargs-wa--left {
  right: auto;
  left: var(--wa-edge);
  align-items: flex-start;
}

.iargs-wa > * { pointer-events: auto; }

@keyframes iargs-wa-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* 20.1 O botao (circulo) */
.iargs-wa__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  width: var(--wa-size);
  height: var(--wa-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--wa-green);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.iargs-wa__button:hover {
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
  transform: translateY(-2px);
}

.iargs-wa__button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.iargs-wa__button .iargs-icon {
  flex: none;
  width: 2rem;
  height: 2rem;
}

/* 20.2 Icone com texto: pilula verde escura */
.iargs-wa--text .iargs-wa__button {
  width: auto;
  height: auto;
  min-height: 3.5rem;
  padding: 0 var(--space-md) 0 var(--space-sm);
  border-radius: 999px;
  background-color: var(--wa-dark);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
}

.iargs-wa--text .iargs-wa__button:hover { background-color: var(--wa-darker); }

.iargs-wa--text .iargs-wa__button .iargs-icon { width: 1.75rem; height: 1.75rem; }

/* 20.3 Balao e botao de fechar */
.iargs-wa__balloon[hidden],
.iargs-wa__card[hidden] { display: none; }

.iargs-wa__balloon {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3xs);
  max-width: 18rem;
  padding: var(--space-xs) var(--space-3xs) var(--space-xs) var(--space-sm);
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  animation: iargs-wa-in 300ms ease-out both;
}

/* A ponta do balao, sobre o centro do circulo. */
.iargs-wa__balloon::after {
  content: "";
  position: absolute;
  right: calc(var(--wa-size) / 2 - 8px);
  bottom: -8px;
  border: 8px solid transparent;
  border-bottom: 0;
  border-top-color: #fff;
}

.iargs-wa--left .iargs-wa__balloon::after { right: auto; left: calc(var(--wa-size) / 2 - 8px); }

.iargs-wa__balloon-text {
  padding-top: var(--space-2xs);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.4;
  text-decoration: none;
}

.iargs-wa__balloon-text:hover { color: var(--color-text); text-decoration: underline; }

.iargs-wa__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}

.iargs-wa__close:hover { background-color: var(--color-surface); color: var(--color-text); }

/* 20.4 Cartao de atendimento */
.iargs-wa__card {
  width: 21rem;
  max-width: 100%;
  max-height: calc(100vh - var(--wa-size) - (var(--wa-edge) * 2) - 72px);
  max-height: calc(100dvh - var(--wa-size) - (var(--wa-edge) * 2) - 72px);
  overflow-y: auto;
  border-radius: 12px;
  background-color: #efeae2; /* o fundo da conversa do WhatsApp */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  animation: iargs-wa-in 200ms ease-out both;
}

.iargs-wa__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-3xs) var(--space-xs) var(--space-sm);
  background-color: var(--wa-head);
  color: #fff;
}

.iargs-wa__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: 50%;
  background-color: #fff;
  color: var(--wa-green);
}

.iargs-wa__avatar .iargs-icon { width: 1.625rem; height: 1.625rem; }

.iargs-wa__avatar img { width: 100%; height: 100%; object-fit: cover; }

.iargs-wa__card-titles { display: grid; flex: 1; min-width: 0; }

.iargs-wa__card-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
}

.iargs-wa__card-sub { font-size: var(--text-meta); opacity: 0.9; }

.iargs-wa__card-head .iargs-wa__close { color: #fff; }

.iargs-wa__card-head .iargs-wa__close:hover { background-color: rgba(255, 255, 255, 0.16); color: #fff; }

.iargs-wa__card-head .iargs-wa__close:focus-visible { outline-color: #fff; }

.iargs-wa__card-body {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

/* A mensagem como um balao de conversa recebido. */
.iargs-wa__message {
  justify-self: start;
  max-width: 92%;
  margin: 0;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 0 10px 10px 10px;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.45;
}

.iargs-wa__start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  padding: 0 var(--space-sm);
  border-radius: 999px;
  background-color: var(--wa-dark);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
}

.iargs-wa__start:hover { background-color: var(--wa-darker); color: #fff; }

.iargs-wa__start .iargs-icon { width: 1.25rem; height: 1.25rem; }

/* O botao do cartao vira X enquanto ele esta aberto. */
.iargs-wa__x { display: none; font-size: 1.5rem; line-height: 1; }

.iargs-wa.is-open .iargs-wa__button .iargs-icon { display: none; }

.iargs-wa.is-open .iargs-wa__x { display: block; }

/* 20.5 Onde aparece; celular */
@media (max-width: 639px) {
  .iargs-wa {
    --wa-edge: 16px;
    --wa-size: 3.5rem;
  }

  .iargs-wa--on-desktop { display: none; }

  /* "Icone com texto" vira so o icone: a pilula cobriria a pagina (decisao 6).
     O texto continua para o leitor de tela. */
  .iargs-wa--text .iargs-wa__button {
    width: var(--wa-size);
    min-height: 0;
    height: var(--wa-size);
    padding: 0;
    border-radius: 50%;
    background-color: var(--wa-green);
  }

  .iargs-wa--text .iargs-wa__button:hover { background-color: var(--wa-green); }

  .iargs-wa--text .iargs-wa__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .iargs-wa__balloon { max-width: 15rem; }

  .iargs-wa__card { width: calc(100vw - (var(--wa-edge) * 2)); }
}

@media (min-width: 640px) {
  .iargs-wa--on-mobile { display: none; }
}

/* Com o painel do menu ou da busca aberto no celular, o botao sai da frente. */
body:has(.iargs-nav-primary__panel.is-open) .iargs-wa,
body:has(.iargs-search-panel.is-open) .iargs-wa { display: none; }

/* No fim da pagina, o rodape guarda lugar para o botao nao cobrir a ultima linha. */
.iargs-has-whatsapp .iargs-footer__bottom { padding-bottom: calc(var(--space-md) + 4.5rem); }

@media (prefers-reduced-motion: reduce) {
  .iargs-wa,
  .iargs-wa__balloon,
  .iargs-wa__card { animation: none; }

  .iargs-wa__button:hover { transform: none; }
}

@media print {
  .iargs-wa { display: none !important; }

  .iargs-has-whatsapp .iargs-footer__bottom { padding-bottom: 6pt; }
}