/* Design system do Portal ASMPF (spec §8). Sobrescreve variáveis do Bootstrap 5.3. */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-normal.30164609c163.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-normal.c6ba61588d7d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-normal.311d352d9323.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-wght-normal.d16dfe26bcd7.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-narrow-latin-600-normal.27d3a5cca9b8.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-narrow-latin-700-normal.b1df10292e50.woff2") format("woff2");
}

:root {
  /* Paleta da marca da ASMPF (estudo do Estúdio Orizuru). O contraste de cada cor está no comentário. */
  --asmpf-verde-floresta: #1F4D2C;  /* títulos, cabeçalho, rodapé, botão primário — branco sobre ele: 9,7:1 */
  --asmpf-verde-escuro: #3F7F33;    /* links e texto verde — 4,9:1 sobre branco */
  --asmpf-verde: #4E9B3E;           /* verde da marca: superfícies, ícones, barras. Nunca texto sobre claro (3,4:1) */
  --asmpf-verde-limao: #A5CD52;     /* realce sobre fundo escuro; como fundo, só com texto grafite */
  --asmpf-verde-noite: #123020;     /* fundo do palco e das faixas escuras */
  --asmpf-musgo: #8A9686;           /* bordas e ícones; não serve para texto */
  --asmpf-texto-suave: #5B6659;     /* texto secundário — 6:1 sobre branco */
  --asmpf-ambar: #E8A33D;           /* destaque; como fundo, só com texto grafite (6,6:1) */
  --asmpf-vermelho: #A3282B;
  --asmpf-grafite: #2B2B2B;
  --asmpf-nevoa: #F4F7F0;           /* branco esverdeado: fundo das seções */
  --asmpf-branco: #FFFFFF;
  /* Verde neon #39E17A está marcado como proibido no estudo de marca: não usar. */

  /* Escala tipográfica: base 16px, razão 1.25 */
  --asmpf-fs-0: 1rem;
  --asmpf-fs-1: 1.25rem;
  --asmpf-fs-2: 1.5625rem;
  --asmpf-fs-3: 1.953rem;
  --asmpf-fs-4: 2.441rem;

  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--asmpf-grafite);
  --bs-body-color-rgb: 43, 43, 43;
  --bs-emphasis-color: var(--asmpf-verde-floresta);
  --bs-primary: var(--asmpf-verde-floresta);
  --bs-primary-rgb: 31, 77, 44;
  --bs-success: var(--asmpf-verde);
  --bs-success-rgb: 78, 155, 62;
  --bs-warning: var(--asmpf-ambar);
  --bs-warning-rgb: 232, 163, 61;
  --bs-danger: var(--asmpf-vermelho);
  --bs-danger-rgb: 163, 40, 43;
  --bs-secondary-bg: var(--asmpf-nevoa);
  --bs-tertiary-bg: var(--asmpf-nevoa);
  --bs-link-color: var(--asmpf-verde-escuro);
  --bs-link-color-rgb: 63, 127, 51;
  --bs-link-hover-color: var(--asmpf-verde-floresta);
  --bs-link-hover-color-rgb: 31, 77, 44;
  --bs-border-radius: .375rem;

  /* Profundidade: sombra tingida com o verde do fundo, nunca preto puro. */
  --sombra-1: 0 1px 2px rgba(18, 48, 32, .06);
  --sombra-2: 0 .75rem 1.5rem -.5rem rgba(18, 48, 32, .16);
  --sombra-3: 0 1.75rem 3rem -1rem rgba(18, 48, 32, .28);
  /* Curvas com peso: nada de linear nem ease-in-out. */
  --mola: cubic-bezier(.32, .72, 0, 1);
  --mola-suave: cubic-bezier(.2, .7, .3, 1);
  /* Raio concêntrico: a casca é mais macia que o miolo. */
  --raio-casca: 1.5rem;
  --raio-miolo: 1.125rem;
  --bs-focus-ring-color: rgba(63, 127, 51, .45);
}

/* ---------- Textura ---------- */

/* Grão finíssimo sobre a página inteira. Fixo e pointer-events: none — não repinta ao rolar. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
@media print { body::after { display: none; } }

/* ---------- Tipografia ---------- */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Montserrat", "Source Sans 3", system-ui, sans-serif;
  font-weight: 700;
  color: var(--asmpf-verde-floresta);
  text-transform: none;
  line-height: 1.18;
  letter-spacing: -.015em;
}

/* Etiquetas, datas e selos: a condensada da marca, em caixa alta e com respiro entre letras. */
.etiqueta {
  font-family: "Archivo Narrow", "Source Sans 3", system-ui, sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--asmpf-texto-suave);
}
h1, .h1 { font-size: var(--asmpf-fs-4); }
h2, .h2 { font-size: var(--asmpf-fs-3); }
h3, .h3 { font-size: var(--asmpf-fs-2); }
h4, .h4 { font-size: var(--asmpf-fs-1); }
h5, .h5, h6, .h6 { font-size: var(--asmpf-fs-0); }

@media (max-width: 575.98px) {
  h1, .h1 { font-size: var(--asmpf-fs-3); }
  h2, .h2 { font-size: var(--asmpf-fs-2); }
}

.texto-corrido { max-width: 70ch; }
.texto-corrido p, .texto-corrido li { margin-bottom: 1rem; }

/* ---------- Layout ---------- */

.container, .container-lg, .container-xl, .container-xxl { max-width: 1200px; }

.secao { padding-block: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }
.secao-ampla { padding-block: clamp(2.75rem, 1.75rem + 3vw, 4.5rem); }
.secao-nevoa { background: var(--asmpf-nevoa); }

/* ---------- Acessibilidade ---------- */

.pular-para-conteudo {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  padding: .5rem 1rem;
  background: var(--asmpf-verde-floresta);
  color: var(--asmpf-branco);
  border-radius: var(--bs-border-radius);
}
.pular-para-conteudo:focus { top: 1rem; color: var(--asmpf-branco); }

:focus-visible {
  outline: 3px solid var(--asmpf-verde-escuro);
  outline-offset: 2px;
}
.rodape :focus-visible { outline-color: var(--asmpf-ambar); }

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

/* ---------- Botões ---------- */

.btn { font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--asmpf-verde-floresta);
  --bs-btn-border-color: var(--asmpf-verde-floresta);
  --bs-btn-hover-bg: #17381F;
  --bs-btn-hover-border-color: #17381F;
  --bs-btn-active-bg: #17381F;
  --bs-btn-active-border-color: #17381F;
}
.btn-destaque {
  --bs-btn-color: var(--asmpf-grafite);
  --bs-btn-bg: var(--asmpf-ambar);
  --bs-btn-border-color: var(--asmpf-ambar);
  --bs-btn-hover-color: var(--asmpf-grafite);
  --bs-btn-hover-bg: #D08E27;
  --bs-btn-hover-border-color: #D08E27;
  --bs-btn-active-color: var(--asmpf-grafite);
  --bs-btn-active-bg: #BC7E1E;
  --bs-btn-active-border-color: #BC7E1E;
}

/* ---------- Estados (verde/âmbar/vermelho carregam informação) ---------- */

.selo {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
}
.selo-ativo { background: #DFEFD6; color: #22571C; }
.selo-pendente { background: #FBEBD2; color: #7A5210; }
.selo-erro { background: #f4dcdc; color: var(--asmpf-vermelho); }

/* ---------- Alerta institucional ---------- */

.alerta-institucional {
  background: var(--asmpf-ambar);
  color: var(--asmpf-grafite);
  font-weight: 600;
}
.alerta-institucional a { color: var(--asmpf-grafite); }

/* ---------- Cabeçalho ---------- */

/* Fundo branco: o logotipo oficial é verde e perde leitura sobre o azul profundo. */
.cabecalho {
  background: var(--asmpf-branco);
  border-bottom: 4px solid var(--asmpf-verde);
}
.cabecalho .navbar-brand img { height: 52px; width: auto; }
.cabecalho .nav-link {
  color: var(--asmpf-verde-floresta);
  font-weight: 600;
  padding-block: .75rem;
}
.cabecalho .nav-link:hover,
.cabecalho .nav-link:focus,
.cabecalho .nav-link.active,
.cabecalho .nav-link[aria-expanded="true"] { color: var(--asmpf-verde-escuro); }
.cabecalho .dropdown-menu { border: 1px solid #DDE4D6; box-shadow: 0 .5rem 1rem rgba(18, 48, 32, .1); }
.cabecalho .dropdown-item { padding-block: .5rem; color: var(--asmpf-grafite); }
.cabecalho .dropdown-item:active { background: var(--asmpf-verde-escuro); color: var(--asmpf-branco); }

@media (max-width: 991.98px) {
  .cabecalho .navbar-brand img { height: 40px; }
  .cabecalho .navbar-nav { padding-block: .5rem; }
  .cabecalho .dropdown-menu { border: 0; box-shadow: none; padding-top: 0; }
  .cabecalho .dropdown-item { padding-left: 1rem; }
  .cabecalho .acoes-conta { padding-bottom: 1rem; }
}

/* ---------- Rodapé ---------- */

.rodape {
  background: var(--asmpf-verde-floresta);
  color: rgba(255, 255, 255, .88);
  font-size: .9375rem;
}
.rodape h2 {
  color: var(--asmpf-branco);
  font-size: var(--asmpf-fs-0);
  margin-bottom: .75rem;
}
.rodape a { color: var(--asmpf-branco); }
.rodape ul { list-style: none; padding-left: 0; }
.rodape li { margin-bottom: .375rem; }
.rodape .rodape-base { border-top: 1px solid rgba(255, 255, 255, .15); }

/* ---------- Acesso rápido ---------- */

.acesso-rapido a {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 4.5rem;
  padding: 1rem 1.25rem;
  background: var(--asmpf-branco);
  border: 1px solid #DDE4D6;
  border-radius: var(--bs-border-radius);
  color: var(--asmpf-verde-floresta);
  font-weight: 600;
  text-decoration: none;
}
.acesso-rapido a:hover { border-color: var(--asmpf-verde-escuro); color: var(--asmpf-verde-escuro); }
.acesso-rapido svg { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; }

/* ---------- Formulários ---------- */

.form-label { font-weight: 600; }
.form-control, .form-select { min-height: 2.75rem; }
.invalid-feedback, .form-text { font-size: .9375rem; }

/* ---------- Busca no cabeçalho ---------- */

.busca-cabecalho .form-control { min-width: 12rem; }

/* ---------- Conteúdo editorial ---------- */

.conteudo-html h2 { font-size: var(--asmpf-fs-2); margin-top: 2.5rem; margin-bottom: 1rem; }
.conteudo-html h3 { font-size: var(--asmpf-fs-1); margin-top: 2rem; }
.conteudo-html blockquote {
  margin: 0 0 2rem;
  padding-left: 1.25rem;
  border-left: 4px solid var(--asmpf-verde-escuro);
  font-size: var(--asmpf-fs-1);
  color: var(--asmpf-verde-floresta);
}
.conteudo-html ul { padding-left: 1.25rem; }
.conteudo-html img { max-width: 100%; height: auto; }
.conteudo-html table { width: 100%; margin-bottom: 1.5rem; }


.lista-documentos li, .lista-resultados li { padding-block: .5rem; border-bottom: 1px solid #E4E9DE; }

/* ---------- Núcleos ---------- */

/* Disco com a sigla: o que aparece quando o núcleo não é de um estado (ASEMPT, PMPU). */
.sigla-nucleo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 3rem;
  height: 3rem;
  padding-inline: .25rem;
  border-radius: 50%;
  background: var(--asmpf-verde-floresta);
  color: var(--asmpf-branco);
  font-family: "Archivo Narrow", sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
}
.sigla-nucleo-grande { min-width: 4.5rem; height: 4.5rem; font-size: 1rem; }

.lista-diretoria li { display: flex; flex-direction: column; padding-block: .5rem; border-bottom: 1px solid #E4E9DE; }
.caixa-contato { padding: 1.25rem; background: var(--asmpf-nevoa); border-radius: var(--bs-border-radius); }
.caixa-contato dt { font-weight: 600; }
.caixa-contato dd { margin-bottom: .75rem; overflow-wrap: anywhere; }

/* ---------- Notícias ---------- */

.grade-noticias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19.5rem, 1fr));
  gap: 1.75rem;
}
.cartao-noticia {
  position: relative;          /* o cartão inteiro é clicável sem aninhar links */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Casca: bandeja clara que segura o miolo, como uma placa assentada numa moldura. */
  padding: .4rem;
  background: linear-gradient(180deg, rgba(31, 77, 44, .07), rgba(31, 77, 44, .03));
  border-radius: var(--raio-casca);
  box-shadow: var(--sombra-1);
  transition: transform .5s var(--mola), box-shadow .5s var(--mola);
}
.cartao-noticia > * {          /* miolo: fundo próprio, raio concêntrico e brilho interno */
  background: var(--asmpf-branco);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.cartao-noticia-imagem { border-radius: var(--raio-miolo) var(--raio-miolo) 0 0; }
.cartao-noticia-corpo { border-radius: 0 0 var(--raio-miolo) var(--raio-miolo); flex: 1; }
.cartao-noticia:not(:has(.cartao-noticia-imagem)) .cartao-noticia-corpo { border-radius: var(--raio-miolo); }
.cartao-noticia::after {       /* fio da marca que corre na base do miolo no hover */
  content: "";
  position: absolute;
  inset-inline: .4rem;
  bottom: .4rem;
  height: 3px;
  border-radius: 0 0 var(--raio-miolo) var(--raio-miolo);
  background: linear-gradient(90deg, var(--asmpf-verde), var(--asmpf-verde-limao));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--mola);
  z-index: 1;
}
.cartao-noticia:hover, .cartao-noticia:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--sombra-2);
}
.cartao-noticia:hover::after, .cartao-noticia:focus-within::after { transform: scaleX(1); }
.cartao-noticia-imagem {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--asmpf-nevoa);
  transition: transform .8s var(--mola);
}
.cartao-noticia:hover .cartao-noticia-imagem { transform: scale(1.05); }
.cartao-noticia-corpo { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.5rem 1.5rem; }
.cartao-noticia-meta, .noticia-meta {
  font-family: "Archivo Narrow", "Source Sans 3", system-ui, sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--asmpf-texto-suave);
  margin-bottom: 0;
}
.cartao-noticia-titulo { font-size: 1.1875rem; line-height: 1.25; margin-bottom: 0; text-wrap: balance; }
.cartao-noticia-titulo a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.cartao-noticia-titulo a::after { content: ""; position: absolute; inset: 0; }
.cartao-noticia:hover .cartao-noticia-titulo a { color: var(--asmpf-verde-escuro); }
.cartao-noticia-chamada { margin-bottom: 0; color: var(--asmpf-texto-suave); font-size: .9375rem; }

.noticia-destaque {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 992px) { .noticia-destaque { grid-template-columns: 3fr 2fr; } }
.noticia-destaque-imagem { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bs-border-radius); }
.noticia-destaque h1 a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.noticia-destaque h1 a:hover { text-decoration: underline; }

.noticia-capa { margin: 1.5rem 0 2rem; }
.noticia-capa img { width: 100%; max-height: 32rem; object-fit: cover; border-radius: var(--bs-border-radius); }
.conteudo-html figure { margin: 1.5rem 0; }

.chip {
  display: inline-block;
  padding: .25rem .75rem;
  border: 1px solid #CBD5C2;
  border-radius: 999px;
  color: var(--asmpf-verde-floresta);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
}
.chip:hover { border-color: var(--asmpf-verde-escuro); color: var(--asmpf-verde-escuro); }
.chip-ativo { background: var(--asmpf-verde-floresta); border-color: var(--asmpf-verde-floresta); color: var(--asmpf-branco); }
.chip-ativo:hover { color: var(--asmpf-branco); }

.caixa-newsletter { max-width: 42rem; }

/* ---------- Convênios ---------- */

.filtros-convenios {
  padding: 1.25rem;
  background: var(--asmpf-nevoa);
  border-radius: var(--bs-border-radius);
}
.filtro-selects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.grade-convenios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}
.cartao-convenio {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  padding: 1rem;
  background: var(--asmpf-branco);
  border: 1px solid #DDE4D6;
  border-radius: var(--bs-border-radius);
}
.cartao-convenio:hover { border-color: var(--asmpf-verde-escuro); }
.cartao-convenio-titulo { font-size: var(--asmpf-fs-0); margin-bottom: .25rem; }
.cartao-convenio-titulo a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.cartao-convenio-titulo a::after { content: ""; position: absolute; inset: 0; }
.cartao-convenio-meta { font-size: .875rem; color: #5B6659; margin-bottom: .5rem; }
.logo-convenio {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  background: var(--asmpf-branco);
  border: 1px solid #E4E9DE;
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  color: var(--asmpf-verde-floresta);
  font-weight: 700;
}
.logo-convenio img { width: 100%; height: 100%; object-fit: contain; }
.logo-convenio-grande { width: 7rem; height: 7rem; font-size: var(--asmpf-fs-2); }
.cabecalho-convenio { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.selo-desconto {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: var(--bs-border-radius);
  background: var(--asmpf-ambar);
  color: var(--asmpf-grafite);
  font-weight: 700;
  font-size: .875rem;
}
.lista-beneficios .beneficio { padding: 1rem 0; border-bottom: 1px solid #E4E9DE; }
.beneficio-condicoes { color: #4A5347; }
.beneficio-condicoes p { margin-bottom: .5rem; }
.beneficio-acesso { margin-top: .75rem; padding: .75rem 1rem; background: var(--asmpf-nevoa); border-radius: var(--bs-border-radius); }
.lista-unidades li { padding-block: .75rem; border-bottom: 1px solid #E4E9DE; }
.caixa-cupom { padding: 1.25rem; border: 2px dashed var(--asmpf-ambar); border-radius: var(--bs-border-radius); }

/* ---------- Conta e área do associado ---------- */

.conta-estreita { max-width: 32rem; }

.area-associado { display: grid; gap: 2rem; }
@media (min-width: 992px) { .area-associado { grid-template-columns: 15rem 1fr; } }
.menu-area { padding: 1rem; background: var(--asmpf-nevoa); border-radius: var(--bs-border-radius); align-self: start; }
.menu-area-nome { font-weight: 700; color: var(--asmpf-verde-floresta); margin-bottom: .5rem; overflow-wrap: anywhere; }
.menu-area li { padding-block: .25rem; }
.menu-area a { text-decoration: none; }
.menu-area a[aria-current="page"] { font-weight: 700; color: var(--asmpf-verde-floresta); }
@media (max-width: 991.98px) {
  .menu-area ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
}

.atalhos-area { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.atalhos-area a {
  display: flex; flex-direction: column; height: 100%; padding: 1rem;
  border: 1px solid #DDE4D6; border-radius: var(--bs-border-radius); text-decoration: none; color: var(--asmpf-verde-floresta);
}
.atalhos-area a:hover { border-color: var(--asmpf-verde-escuro); }
.atalhos-area span { color: #5B6659; font-size: .9375rem; }

.dados-lista { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .25rem 1rem; }
.dados-lista dt { font-weight: 600; }
.dados-lista dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .dados-lista { grid-template-columns: 1fr; } .dados-lista dd { margin-bottom: .5rem; } }
.grade-formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  column-gap: 1.5rem;
  align-items: start;
}

/* Texto longo e grupo de opções pedem a linha inteira: espremidos numa coluna de 16rem,
   a descrição vira um buraco de agulha e os radios quebram no meio da frase. */
.grade-formulario > div:has(textarea),
.grade-formulario > div:has(fieldset) { grid-column: 1 / -1; }

.lista-simples li { display: flex; flex-direction: column; padding-block: .75rem; border-bottom: 1px solid #E4E9DE; }
.lista-notificacoes li { padding: .75rem 0 .75rem .75rem; border-bottom: 1px solid #E4E9DE; border-left: 4px solid transparent; }
.lista-notificacoes li.nao-lida { border-left-color: var(--asmpf-ambar); }

.carteirinha {
  max-width: 26rem;
  border-radius: .75rem;
  overflow: hidden;
  border: 1px solid #CBD5C2;
  background: var(--asmpf-branco);
  box-shadow: 0 .25rem .75rem rgba(18, 48, 32, .08);
}
.carteirinha-topo { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 4px solid var(--asmpf-verde-floresta); }
.carteirinha-topo span { font-weight: 700; font-size: .8125rem; color: var(--asmpf-verde-floresta); }
.carteirinha-corpo { display: flex; gap: 1rem; padding: 1rem; }
.carteirinha-foto { width: 5.25rem; height: 6.5rem; object-fit: cover; border-radius: .375rem; }
.carteirinha dt { font-size: .75rem; color: #5B6659; font-weight: 400; }
.carteirinha dd { margin-bottom: .375rem; font-weight: 600; }
.carteirinha-nome { font-size: var(--asmpf-fs-1); color: var(--asmpf-verde-floresta); }
.carteirinha-rodape { display: flex; gap: 1rem; align-items: center; padding: .75rem 1rem; background: var(--asmpf-nevoa); font-size: .875rem; }
.carteirinha-qr svg, .cupom-qr svg { display: block; width: 7rem; height: 7rem; }
.qr-2fa { margin-block: 1rem; }
.qr-2fa svg { display: block; width: 16rem; max-width: 100%; height: auto; }

.cupom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; max-width: 34rem; padding: 1.25rem; border: 2px dashed var(--asmpf-verde-floresta); border-radius: var(--bs-border-radius); }
.cupom-parceiro { font-size: var(--asmpf-fs-1); font-weight: 700; color: var(--asmpf-verde-floresta); margin-bottom: .25rem; }
.cupom-codigo code { font-size: var(--asmpf-fs-2); color: var(--asmpf-grafite); letter-spacing: .05em; }
.cupom dt { font-weight: 600; }
.cupom dd { margin-bottom: .25rem; }
.codigos-reserva { display: grid; grid-template-columns: repeat(2, max-content); gap: .25rem 2rem; font-size: var(--asmpf-fs-1); }

/* ---------- Filiação ---------- */

.etapas-filiacao { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: 1.5rem; counter-reset: etapa; }
.etapas-filiacao li { color: #5B6659; }
.etapas-filiacao a { text-decoration: none; }
.etapas-filiacao .numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; margin-right: .25rem; border-radius: 50%;
  border: 2px solid currentColor; font-weight: 700; font-size: .875rem;
}
.etapas-filiacao .feita { color: var(--asmpf-verde); }
.etapas-filiacao .atual { color: var(--asmpf-verde-floresta); font-weight: 700; }
.etapas-filiacao .atual .numero { background: var(--asmpf-verde-floresta); border-color: var(--asmpf-verde-floresta); color: var(--asmpf-branco); }
.caixa-etapa { max-width: 52rem; padding: 1.5rem; border: 1px solid #DDE4D6; border-radius: var(--bs-border-radius); }
@media (max-width: 575.98px) { .caixa-etapa { padding: 1rem; } }
.linha-formset { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); column-gap: 1rem; padding-top: .75rem; border-top: 1px solid #E4E9DE; }
.citacao-juridica { padding: 1rem; background: var(--asmpf-nevoa); border-left: 4px solid var(--asmpf-verde-escuro); }
/* ---------- Quadro de assinatura ----------
   É o único jeito de assinar, e na maioria das vezes vai ser usado com o dedo. Daí o quadro alto o
   bastante para caber uma assinatura de verdade no celular, a linha de base como no papel e
   `touch-action: none`, sem o qual o dedo rola a página em vez de desenhar. */

.bloco-assinatura {
  margin-block: 1.5rem;
  padding: 1.25rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  border: 1px solid rgba(31, 77, 44, .1);
}

.apoio-assinatura { color: var(--asmpf-texto-suave); font-size: .95rem; }

.quadro-assinatura-caixa { position: relative; max-width: 36rem; }

.quadro-assinatura {
  display: block;
  width: 100%;
  height: 11rem;
  border: 2px dashed var(--asmpf-musgo);
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  touch-action: none;             /* o dedo desenha; a página não rola */
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
  transition: border-color .4s var(--mola);
}

.assinatura-pronta .quadro-assinatura { border-style: solid; border-color: var(--asmpf-verde); }

/* Linha de base, como a do papel. */
.linha-assinatura {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 2.75rem;
  height: 1px;
  background: rgba(31, 77, 44, .18);
  pointer-events: none;
}

.dica-assinatura {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
  pointer-events: none;
}

.acoes-assinatura { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .75rem; }
.estado-assinatura { font-size: .9rem; color: var(--asmpf-verde-escuro); font-weight: 600; }

@media (min-width: 48rem) {
  .quadro-assinatura { height: 13rem; }
}

@media (max-width: 30rem) {
  .quadro-assinatura { height: 10rem; }
  .linha-assinatura { left: 1rem; right: 1rem; bottom: 2.25rem; }
  .dica-assinatura { left: 1rem; bottom: 1rem; }
}
.caixa-codigo { margin-block: 1.5rem; padding: 1rem; background: var(--asmpf-nevoa); border-radius: var(--bs-border-radius); }

/* ---------- Eventos e pagamentos ---------- */

.lista-eventos { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.cartao-evento { position: relative; display: flex; gap: 1rem; align-items: center; padding: 1rem; background: var(--asmpf-branco); border: 1px solid #DDE4D6; border-radius: var(--bs-border-radius); height: 100%; }
.cartao-evento:hover { border-color: var(--asmpf-verde-escuro); }
.cartao-evento-titulo { font-size: var(--asmpf-fs-1); margin-bottom: .25rem; }
.cartao-evento-titulo a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.cartao-evento-titulo a::after { content: ""; position: absolute; inset: 0; }
.data-evento { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto;
               width: 4rem; height: 4rem; margin: 0; border-radius: var(--bs-border-radius); background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); line-height: 1; }
.data-evento .dia { font-size: 1.5rem; font-weight: 700; }
.data-evento .mes { font-size: .75rem; font-weight: 600; }
.lote-ingresso { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .75rem; border-bottom: 1px solid #DDE4D6; }
.lote-ingresso select { width: 5.5rem; }
.conta-media { max-width: 44rem; }
.caixa-pix { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; padding: 1.25rem; border: 2px solid var(--asmpf-verde); border-radius: var(--bs-border-radius); }
.caixa-pix > div:first-child { flex: 1 1 18rem; }
.grade-ingressos { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.ingresso { display: flex; gap: 1rem; align-items: center; padding: 1rem; border: 2px dashed var(--asmpf-verde-floresta); border-radius: var(--bs-border-radius); page-break-inside: avoid; }
.ingresso-usado { opacity: .6; }
.leitor-checkin video { width: 100%; max-width: 28rem; border-radius: var(--bs-border-radius); background: #000; }
.resultado-checkin { padding: 1.5rem; border-radius: var(--bs-border-radius); color: var(--asmpf-branco); }
.resultado-checkin.liberado { background: var(--asmpf-verde); }
.resultado-checkin.recusado { background: var(--asmpf-vermelho); }

/* ---------- Reservas ---------- */

.galeria-imovel { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; margin-bottom: 1.5rem; }
.galeria-imovel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bs-border-radius); }
.tabela-calendario { width: 100%; min-width: 20rem; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.tabela-calendario th { text-align: center; font-size: .8125rem; color: #5B6659; }
.tabela-calendario td { height: 3.5rem; padding: .25rem; vertical-align: top; border-radius: .25rem; font-size: .8125rem; }
.numero-dia { display: block; font-weight: 700; }
.preco-dia, .quem-dia { display: block; font-size: .6875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-livre { background: #DFEFD6; }
.dia-reservado { background: #E4E9DE; color: #5B6659; }
.dia-bloqueado { background: #f4dcdc; }
.dia-alta { background: #f7ecd4; }
.dia-passado { color: #9aa3ad; }
.legenda-calendario span { display: inline-block; padding: .125rem .5rem; margin: .25rem .25rem 0 0; border-radius: .25rem; }

/* ---------- Assembleias ---------- */

.lista-pauta li { margin-bottom: 1rem; }
.caixa-votacao { margin-block: .75rem; padding: 1rem; border: 1px solid #D3DCCB; border-radius: var(--bs-border-radius); }
.resultado-votacao li { margin-bottom: .75rem; }
.barra-resultado { display: block; width: 100%; height: .5rem; appearance: none; border: 0; border-radius: .25rem; overflow: hidden; background: #E4E9DE; color: var(--asmpf-verde-floresta); }
.barra-resultado::-webkit-progress-bar { background: #E4E9DE; }
.barra-resultado::-webkit-progress-value { background: var(--asmpf-verde-floresta); }
.barra-resultado::-moz-progress-bar { background: var(--asmpf-verde-floresta); }
.grade-chapas { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.cartao-chapa { display: flex; gap: .75rem; padding: .75rem; border: 1px solid #D3DCCB; border-radius: var(--bs-border-radius); }
.cartao-chapa img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .25rem; }
.opcao-cedula { display: flex; align-items: center; gap: .75rem; padding: 1rem; margin-bottom: .5rem; border: 2px solid #D3DCCB; border-radius: var(--bs-border-radius); font-size: 1.125rem; cursor: pointer; }
.opcao-cedula:has(input:checked) { border-color: var(--asmpf-verde-floresta); background: #EDF3E6; }
.opcao-cedula input { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.codigo-grande { font-family: ui-monospace, monospace; font-size: 1.75rem; font-weight: 700; letter-spacing: .08em; }

/* ---------- Jurídico ---------- */

.linha-do-tempo li { position: relative; padding: 0 0 1.25rem 1.25rem; border-left: 2px solid #D3DCCB; }
.linha-do-tempo li::before { content: ""; position: absolute; left: -.4rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--asmpf-verde-floresta); }

/* ---------- Aviso de cookies ---------- */

.aviso-cookies { position: sticky; bottom: 0; z-index: 1030; padding-block: 1rem; background: var(--asmpf-verde-floresta); color: #fff; box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .15); }
.aviso-cookies a { color: #fff; text-decoration: underline; }

/* ---------- Mapa dos núcleos ----------
   Os estados com núcleo **saltam** no hover: sobem alguns pixels, crescem um tiquinho e ganham uma
   sombra que cresce junto, o que dá a sensação de a peça levantar do mapa (o "3D" aqui é sombra e
   escala, não perspectiva: SVG não leva transform 3D de forma confiável entre navegadores).
   `transform-box: fill-box` é o que faz o estado crescer a partir do próprio centro, e não do
   canto do viewBox. Quem pede menos movimento recebe só a troca de cor. */

.mapa-nucleos svg {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;             /* deixa a sombra do estado levantado passar da borda */
}

.mapa-nucleos .estado, .mapa-nucleos .estado path { fill: #dfe4ea; stroke: #fff; stroke-width: 1; }

.mapa-nucleos .com-nucleo {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .45s var(--mola), filter .45s var(--mola);
  will-change: transform;
}

.mapa-nucleos .com-nucleo path {
  fill: var(--asmpf-verde-escuro);
  cursor: pointer;
  transition: fill .3s var(--mola), stroke-width .3s var(--mola);
}

/* A peça levantada: sobe, cresce de leve, escurece a borda e projeta sombra no mapa. */
.mapa-nucleos .com-nucleo:hover,
.mapa-nucleos .com-nucleo:focus-visible {
  transform: translateY(-6px) scale(1.045);
  filter: drop-shadow(0 8px 10px rgba(18, 48, 32, .38));
}

.mapa-nucleos .com-nucleo:hover path,
.mapa-nucleos .com-nucleo:focus path { fill: var(--asmpf-verde-floresta); }

.mapa-nucleos .com-nucleo:active { transform: translateY(-2px) scale(1.015); }

.mapa-nucleos .com-nucleo:focus { outline: none; }
.mapa-nucleos .com-nucleo:focus-visible path { stroke: var(--asmpf-ambar); stroke-width: 3; }

@media (prefers-reduced-motion: reduce) {
  .mapa-nucleos .com-nucleo,
  .mapa-nucleos .com-nucleo path { transition: none; }
  .mapa-nucleos .com-nucleo:hover,
  .mapa-nucleos .com-nucleo:focus-visible { transform: none; filter: none; }
}

/* ---------- Página inicial: palco ---------- */

.palco {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(6rem, 4rem + 6vw, 9rem);
  background:
    radial-gradient(105% 85% at 8% 0%, rgba(78, 155, 62, .5), transparent 58%),
    radial-gradient(70% 60% at 95% 6%, rgba(232, 163, 61, .16), transparent 60%),
    radial-gradient(85% 75% at 80% 100%, rgba(165, 205, 82, .18), transparent 58%),
    linear-gradient(158deg, var(--asmpf-verde-floresta), var(--asmpf-verde-noite) 70%);
  color: var(--asmpf-branco);
}
/* Malha de linhas finas: dá textura sem virar imagem. */
.palco-textura {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 35%, transparent 78%);
}
.palco-grade { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 992px) { .palco-grade { grid-template-columns: 1fr 1fr; } }

.palco-selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .3rem .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: .9375rem;
  font-weight: 600;
  color: #DCEBB8;
}
.palco-selo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--asmpf-verde-limao); }
.palco h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--asmpf-branco);
}
.palco-chamada {
  max-width: 34rem;
  margin-bottom: 1.75rem;
  font-size: var(--asmpf-fs-1);
  line-height: 1.55;
  color: #D8E6CB;
}
.palco-acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-contorno-claro {
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--asmpf-branco);
  background: transparent;
  font-weight: 600;
}
.btn-contorno-claro:hover, .btn-contorno-claro:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: var(--asmpf-branco);
  color: var(--asmpf-branco);
}
.palco .btn-lg { padding-inline: 1.5rem; }

.palco-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, .5rem + 2vw, 2.75rem);
  margin: 2.5rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.palco-numeros dt {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--asmpf-branco);
}
.palco-numeros dd { margin: .35rem 0 0; font-size: .9375rem; color: #BCCFA8; }

.palco-destaque {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 1.5rem 3rem rgba(8, 26, 16, .45);
  backdrop-filter: blur(6px);
}
.palco-destaque-imagem { display: block; overflow: hidden; }
.palco-destaque-imagem img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.palco-destaque:hover .palco-destaque-imagem img { transform: scale(1.04); }
.palco-destaque-texto { padding: 1.25rem 1.5rem 1.5rem; }
.palco-destaque-meta { margin-bottom: .6rem; color: var(--asmpf-verde-limao); }
.palco-destaque h2 { font-size: var(--asmpf-fs-2); line-height: 1.25; margin-bottom: .5rem; text-wrap: balance; }
.palco-destaque h2 a { color: var(--asmpf-branco); text-decoration: none; }
.palco-destaque h2 a::after { content: ""; position: absolute; inset: 0; }
.palco-destaque { position: relative; }
.palco-destaque:hover h2 a, .palco-destaque:focus-within h2 a { text-decoration: underline; }
.palco-destaque-chamada { margin-bottom: 0; color: #D8E6CB; }

/* ---------- Página inicial: seções ---------- */

.cabecalho-secao {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.25rem;
}
.cabecalho-secao h2 { letter-spacing: -.01em; }
.link-secao { font-weight: 600; text-decoration: none; }
.link-secao:hover { text-decoration: underline; }

.secao-atalhos { padding-top: clamp(2rem, 1.5rem + 1vw, 3rem); }
.acesso-rapido a {
  position: relative;
  align-items: flex-start;
  height: 100%;
  padding: 1.25rem;
  border-color: #E3E9DC;
  box-shadow: 0 1px 2px rgba(18, 48, 32, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.acesso-rapido a::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  background: linear-gradient(90deg, var(--asmpf-verde-escuro), var(--asmpf-verde-limao));
  opacity: 0;
  transition: opacity .25s ease;
}
.acesso-rapido a:hover, .acesso-rapido a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 .75rem 1.5rem rgba(18, 48, 32, .12);
  border-color: #cdd7e3;
}
.acesso-rapido a:hover::before, .acesso-rapido a:focus-visible::before { opacity: 1; }
.acesso-rapido span { display: flex; flex-direction: column; gap: .2rem; }
.acesso-rapido small { font-weight: 400; font-size: .875rem; color: #5B6659; }
.acesso-rapido svg { margin-top: .15rem; color: var(--asmpf-verde-escuro); }


.lista-acoes { display: grid; gap: 1rem; }
.lista-acoes a {
  display: grid;
  gap: .35rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #E3E9DC;
  border-left: 4px solid var(--asmpf-verde-escuro);
  border-radius: var(--bs-border-radius);
  background: var(--asmpf-branco);
  color: var(--asmpf-grafite);
  text-decoration: none;
  transition: border-left-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lista-acoes a:hover, .lista-acoes a:focus-visible {
  border-left-color: var(--asmpf-ambar);
  transform: translateX(3px);
  box-shadow: 0 .5rem 1rem rgba(18, 48, 32, .1);
}
.acao-situacao { font-size: .8125rem; font-weight: 600; color: var(--asmpf-verde-escuro); }
.lista-acoes strong { font-size: var(--asmpf-fs-1); color: var(--asmpf-verde-floresta); }
.acao-resumo { color: #4a5360; }
.acao-data { font-size: .875rem; color: #5B6659; }

.faixa-newsletter, .faixa-convite {
  padding-block: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(165, 205, 82, .28), transparent 62%),
    linear-gradient(120deg, var(--asmpf-verde-floresta), var(--asmpf-verde-noite));
  color: var(--asmpf-branco);
}
.faixa-newsletter .caixa-newsletter {
  max-width: 44rem;
  margin-inline: auto;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: center;
}
.faixa-newsletter .caixa-newsletter h2 { color: var(--asmpf-branco); font-size: var(--asmpf-fs-2); }
.faixa-newsletter .caixa-newsletter p { color: #D8E6CB; }
.faixa-newsletter .caixa-newsletter form { max-width: 32rem; margin-inline: auto; }

/* ---------- Movimento (desligado em prefers-reduced-motion: o JS só marca a página quando é permitido) ---------- */

.com-revelacao [data-revelar] {
  opacity: 0;
  transform: translateY(2.5rem);
  filter: blur(6px);
  transition: opacity .9s var(--mola), transform .9s var(--mola), filter .9s var(--mola);
  transition-delay: calc(var(--atraso, 0) * 90ms);
}
.com-revelacao [data-revelar].revelado { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: no-preference) {
  .palco-conteudo > *, .palco-destaque { animation: palco-subir .95s var(--mola) both; }
  .palco-conteudo > :nth-child(2) { animation-delay: .08s; }
  .palco-conteudo > :nth-child(3) { animation-delay: .16s; }
  .palco-conteudo > :nth-child(4) { animation-delay: .24s; }
  .palco-conteudo > :nth-child(5) { animation-delay: .32s; }
  .palco-destaque { animation-delay: .2s; }
}

@keyframes palco-subir {
  from { opacity: 0; transform: translateY(2rem); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------- Marca: a condensada nas etiquetas, e o verde nos detalhes ---------- */

.palco-selo, .palco-destaque-meta, .data-evento .mes, .cartao-convenio-meta,
.selo, .selo-desconto, .chip, .acao-situacao, .acesso-rapido small {
  font-family: "Archivo Narrow", "Source Sans 3", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.palco-selo, .palco-destaque-meta, .cartao-convenio-meta, .acao-situacao { font-size: .8125rem; }
.acesso-rapido small { font-size: .75rem; letter-spacing: .06em; }
.selo-desconto { background: var(--asmpf-verde-limao); color: var(--asmpf-grafite); }
.data-evento .dia { font-family: "Montserrat", sans-serif; font-weight: 800; }
.logo-convenio { background: var(--asmpf-nevoa); }
.cartao-convenio { border-radius: 1rem; transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease; }
.cartao-convenio:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(18, 48, 32, .1); }
.cartao-evento { border-radius: 1rem; }
.secao-nevoa + .secao-nevoa { padding-top: 0; }

/* ---------- Console de serviços: uma peça só, encaixada na borda do palco ---------- */

.secao-servicos { padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.console-servicos {
  display: grid;
  margin: clamp(-5rem, -4vw - 2rem, -3rem) 0 0;   /* sobe e monta sobre o palco */
  position: relative;
  padding: .5rem;
  background: rgba(255, 255, 255, .92);
  border-radius: var(--raio-casca);
  box-shadow: var(--sombra-3), inset 0 0 0 1px rgba(31, 77, 44, .1);
  backdrop-filter: blur(10px);
}
@media (min-width: 48em) { .console-servicos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) { .console-servicos { grid-template-columns: repeat(4, 1fr); } }

.console-servicos > li { position: relative; }
/* Filete entre os serviços: divide sem transformar cada um num cartão. */
.console-servicos > li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: rgba(31, 77, 44, .12);
}
@media (max-width: 74.98em) { .console-servicos > li:nth-child(odd) + li::before { content: none; } }
@media (max-width: 47.98em) {
  .console-servicos > li + li::before {
    inset: 0 1.25rem auto 1.25rem;
    width: auto;
    height: 1px;
  }
}

.console-servicos a {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  height: 100%;
  padding: 1.35rem 1.25rem;
  border-radius: var(--raio-miolo);
  color: var(--asmpf-verde-floresta);
  text-decoration: none;
  transition: background-color .45s var(--mola), transform .45s var(--mola);
}
.console-servicos a:hover, .console-servicos a:focus-visible {
  background: linear-gradient(180deg, rgba(78, 155, 62, .1), rgba(165, 205, 82, .12));
  transform: translateY(-2px);
}
.console-servicos a:active { transform: translateY(0) scale(.99); }

.disco-servico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--asmpf-verde-floresta);
  color: var(--asmpf-verde-limao);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .5s var(--mola), background-color .5s var(--mola);
}
.disco-servico svg { width: 1.35rem; height: 1.35rem; }
.console-servicos a:hover .disco-servico { transform: rotate(-6deg) scale(1.06); background: var(--asmpf-verde); color: var(--asmpf-branco); }

.texto-servico { display: flex; flex-direction: column; gap: .15rem; }
.texto-servico .etiqueta { font-size: .6875rem; color: var(--asmpf-verde-escuro); }
.texto-servico strong {
  font-family: "Montserrat", "Source Sans 3", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.detalhe-servico { font-size: .875rem; line-height: 1.35; color: var(--asmpf-texto-suave); }

/* ---------- Convênios em destaque na página inicial ---------- */

.subtitulo-secao { max-width: 52ch; color: var(--asmpf-texto-suave); }
.etiqueta-secao { margin-bottom: .35rem; color: var(--asmpf-verde-escuro); }

/* Banners vindos do Guia de Vantagens: 1200x300 (4:1), um por vez, girando sozinhos. */
.palco-banners { position: relative; margin-bottom: 2rem; }
.palco-banners .trilha-pista.pista-banners {
  grid-auto-columns: 100%;
  gap: 1rem;
  border-radius: var(--raio-casca);
}
.banner-guia {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .08);
  transition: transform .5s var(--mola), box-shadow .5s var(--mola);
}
/* Sem proporção fixa: a altura sai dos atributos width/height da própria imagem (o Guia já
   mudou de 4:1 para 7:3, e recortar no CSS cortava a arte). */
.banner-guia img { display: block; width: 100%; height: auto; }
a.banner-guia:hover, a.banner-guia:focus-visible { transform: translateY(-3px); box-shadow: var(--sombra-2); }

/* Setas sobre o banner, nas laterais; no celular voltam para baixo, fora da imagem. */
.controles-banners { position: absolute; inset-inline: .75rem; top: 50%; transform: translateY(-50%); justify-content: space-between; pointer-events: none; }
.controles-banners .botao-trilha { pointer-events: auto; background: rgba(255, 255, 255, .92); box-shadow: var(--sombra-2); }
@media (max-width: 47.9375em) {
  .controles-banners { position: static; transform: none; justify-content: flex-end; margin-top: .75rem; }
  .controles-banners .botao-trilha { background: var(--asmpf-branco); }
}

.grade-destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
}
.grade-destaques > li { min-width: 0; }

/* Cartão em duas peças: capa da marca (verde) e miolo branco, com a moldura do logo entre as duas. */
.convenio-destaque {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .08);
  transition: transform .5s var(--mola), box-shadow .5s var(--mola);
}
.convenio-destaque:hover, .convenio-destaque:focus-within { transform: translateY(-6px); box-shadow: var(--sombra-3); }

.convenio-capa {
  position: relative;
  height: 6.25rem;
  padding: .9rem 1.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(165, 205, 82, .55), transparent 62%),
    linear-gradient(135deg, var(--asmpf-verde-floresta), var(--asmpf-verde-noite));
}
.convenio-capa::after {                 /* brilho diagonal que atravessa a capa no hover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 50%, transparent 62%);
  transform: translateX(-100%);
  transition: transform .9s var(--mola);
}
.convenio-destaque:hover .convenio-capa::after, .convenio-destaque:focus-within .convenio-capa::after { transform: translateX(100%); }

/* Selo do benefício: é o que a pessoa lê primeiro. */
.convenio-selo {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--asmpf-ambar);
  color: #2B2B2B;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.convenio-selo strong {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.convenio-selo-discreto { background: rgba(255, 255, 255, .92); color: var(--asmpf-verde-floresta); }

/* A marca do parceiro numa moldura própria, montada na quina da capa: logo alheio nunca encosta na borda. */
.convenio-marca {
  position: absolute;
  left: 1.4rem;
  bottom: -1.6rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: .6rem;
  border-radius: 1.25rem;
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-2), inset 0 0 0 1px rgba(31, 77, 44, .07);
  transition: transform .5s var(--mola);
}
.convenio-marca img { max-width: 100%; max-height: 100%; object-fit: contain; }
.convenio-destaque:hover .convenio-marca { transform: translateY(-3px) scale(1.04); }
.convenio-iniciais { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--asmpf-verde-floresta); }

.convenio-corpo { display: flex; flex-direction: column; gap: .3rem; padding: 2.4rem 1.4rem 1.4rem; }
.convenio-meta { margin: 0; font-size: .6875rem; color: var(--asmpf-texto-suave); }
.convenio-nome { font-size: 1.125rem; line-height: 1.25; margin: 0; }
.convenio-nome a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.convenio-nome a::after { content: ""; position: absolute; inset: 0; }
.convenio-oferta { margin: 0; font-size: .9375rem; line-height: 1.4; color: var(--asmpf-texto-suave); }
.convenio-acao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: 1rem;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--asmpf-verde-escuro);
}
.convenio-acao svg { width: 1rem; height: 1rem; transition: transform .4s var(--mola); }
.convenio-destaque:hover .convenio-acao svg, .convenio-destaque:focus-within .convenio-acao svg { transform: translateX(.25rem); }

/* ---------- Páginas internas: abertura verde, folha de texto e faixa de convite ---------- */

/* O mesmo palco da home, mais baixo: aqui ele abre a página, não vende a entidade. */
.palco-interno { padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.25rem) clamp(2.5rem, 1.75rem + 3vw, 4rem); }
.palco-interno h1 { max-width: 22ch; }
.palco-chamada-larga { max-width: 46rem; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); color: #E3EFD6; }
.palco-interno .palco-numeros { margin-top: 2rem; padding-top: 1.5rem; }

/* Fotografia de fundo da abertura: entra em luminosidade, então adota o verde da marca em vez de
   brigar com ele, e some com uma máscara do lado do texto — o contraste do título não depende dela. */
.palco-foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 45%;
  opacity: .32;
  mix-blend-mode: luminosity;
  filter: brightness(.78) contrast(1.08);   /* segura o estouro das janelas na foto */
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, rgba(0, 0, 0, .45) 52%, #000 88%);
  mask-image: linear-gradient(100deg, transparent 20%, rgba(0, 0, 0, .45) 52%, #000 88%);
}
/* No celular o texto ocupa a largura toda: a foto sai de cima e fica só no rodapé da abertura. */
@media (max-width: 61.9375em) {
  .palco-foto {
    opacity: .18;
    -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 18%, #000 100%);
  }
}
@media (prefers-contrast: more) { .palco-foto { display: none; } }

.trilha-clara {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
  font-family: "Archivo Narrow", sans-serif;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #BCCFA8;
}
.trilha-clara a { color: #DCEBB8; text-decoration: none; }
.trilha-clara a:hover { color: var(--asmpf-branco); text-decoration: underline; text-underline-offset: .25em; }

/* Folha: o texto da página num cartão branco que sobe sobre a abertura. */
.folha {
  max-width: 48rem;
  margin: clamp(-6rem, -4vw - 2.5rem, -4rem) auto 0;
  padding: clamp(1.75rem, 1.25rem + 2.5vw, 3.25rem);
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-3), inset 0 0 0 1px rgba(31, 77, 44, .07);
}
.folha-texto { font-size: 1.0625rem; line-height: 1.75; color: #3A463C; }
.folha-texto > p { margin-bottom: 1.35rem; }
.folha-texto > p:last-child { margin-bottom: 0; }
/* Capitular no primeiro parágrafo: marca o começo da leitura sem precisar de subtítulo. */
.folha-texto > p:first-of-type::first-letter {
  float: left;
  margin: .35rem .6rem 0 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 3.6rem;
  line-height: .78;
  color: var(--asmpf-verde-escuro);
}

.faixa-convite-grade {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}
.lema {
  margin: 0;
  max-width: 20ch;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: var(--asmpf-branco);
}

/* ---------- Diretoria e conselhos ---------- */

.atalhos-orgaos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.atalhos-orgaos a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #DCEBB8;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  transition: background-color .4s var(--mola), color .4s var(--mola), border-color .4s var(--mola);
}
.atalhos-orgaos a:hover, .atalhos-orgaos a:focus-visible {
  background: rgba(255, 255, 255, .16);
  border-color: var(--asmpf-branco);
  color: var(--asmpf-branco);
}
.atalhos-orgaos span {
  min-width: 1.5rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: rgba(165, 205, 82, .28);
  font-family: "Archivo Narrow", sans-serif;
  font-size: .8125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.galeria-diretoria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 1.5rem;
}
.galeria-diretoria > li { min-width: 0; }
@media (min-width: 62em) { .galeria-diretoria { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); } }

.retrato {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .08);
  transition: transform .5s var(--mola), box-shadow .5s var(--mola);
}
.retrato:hover { transform: translateY(-5px); box-shadow: var(--sombra-3); }
.retrato-moldura {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, #EDF3E6, var(--asmpf-nevoa));
}
.retrato-moldura img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mola); }
.retrato:hover .retrato-moldura img { transform: scale(1.05); }
.retrato-moldura::after {                 /* véu verde de baixo para cima: unifica fotos de origens diferentes */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(18, 48, 32, .38), transparent);
  opacity: .8;
}
.retrato-iniciais {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 2.75rem;
  color: var(--asmpf-verde-escuro);
}
.retrato-texto { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.15rem; }
.retrato-nome { margin: 0; font-size: 1rem; line-height: 1.25; color: var(--asmpf-verde-floresta); }
.retrato-cargo { color: var(--asmpf-verde-escuro); }

/* ---------- Página dos núcleos: mapa de um lado, bandeiras do outro ---------- */

.painel-nucleos { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62em) {
  .painel-nucleos { grid-template-columns: .95fr 1.05fr; gap: 2.5rem; }
  .coluna-mapa { position: sticky; top: 1.5rem; }   /* o mapa acompanha a rolagem da lista */
}
.painel-nucleos > * { min-width: 0; }

.cartao-mapa {
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .08);
}
.cartao-mapa h2 { margin-bottom: 1rem; color: var(--asmpf-verde-floresta); }
.legenda-mapa { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .35rem; font-size: .875rem; color: var(--asmpf-texto-suave); }
.amostra-mapa { width: .9rem; height: .9rem; border-radius: .25rem; background: var(--asmpf-verde-escuro); }
.credito-mapa { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--asmpf-texto-suave); }
.credito-mapa a { color: inherit; }

.grade-nucleos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .85rem;
  margin: 0;
}
.grade-nucleos > li { min-width: 0; }

.cartao-nucleo {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  height: 100%;
  padding: .7rem .9rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
  color: var(--asmpf-verde-floresta);
  text-decoration: none;
  transition: transform .4s var(--mola), box-shadow .4s var(--mola);
}
.cartao-nucleo:hover, .cartao-nucleo:focus-visible {
  transform: translateX(4px);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(78, 155, 62, .4);
  color: var(--asmpf-verde-escuro);
}

/* A bandeira entra numa moldura de proporção fixa: 27 bandeiras, 27 proporções diferentes. */
.emblema-nucleo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.5rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: .5rem;
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .12);
}
.bandeira-uf { width: 100%; height: 100%; object-fit: cover; }
.brasao-nucleo { max-width: 90%; max-height: 90%; object-fit: contain; }
.emblema-nucleo .sigla-nucleo {
  min-width: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-size: .75rem;
  letter-spacing: .02em;
}

.cartao-nucleo-texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cartao-nucleo-sigla { color: var(--asmpf-texto-suave); font-size: .6875rem; }
.cartao-nucleo-nome { font-weight: 600; line-height: 1.25; }
.cartao-nucleo-seta { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-left: auto; opacity: .45; transition: transform .4s var(--mola), opacity .4s var(--mola); }
.cartao-nucleo:hover .cartao-nucleo-seta { opacity: 1; transform: translateX(.2rem); }

/* Emblema grande na abertura da página do núcleo, sobre o verde. */
.cabecalho-nucleo { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.emblema-nucleo-grande {
  width: 6.5rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), var(--sombra-2);
}
.cabecalho-nucleo .palco-selo { margin-bottom: .5rem; }

/* ---------- TV ASMPF na página inicial ---------- */

.secao-tv {
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(78, 155, 62, .35), transparent 60%),
    linear-gradient(150deg, var(--asmpf-verde-floresta), var(--asmpf-verde-noite));
  color: var(--asmpf-branco);
}
.secao-tv h2, .secao-tv h3 { color: var(--asmpf-branco); }
.secao-tv .subtitulo-secao { color: #C8D9B8; }
.etiqueta-secao-clara {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .35rem;
  color: var(--asmpf-verde-limao);
}
.etiqueta-secao-clara::before {          /* pontinho de "no ar" */
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--asmpf-ambar);
}
.link-secao-claro { color: #DCEBB8; }
.link-secao-claro:hover { color: var(--asmpf-branco); }

.grade-tv { display: grid; gap: 1.5rem; }
@media (min-width: 62em) { .grade-tv { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.grade-tv > * { min-width: 0; }

.video-destaque { display: grid; gap: .9rem; }
.video-palco {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-casca);
  background: #000;
  box-shadow: 0 1.5rem 3rem rgba(8, 26, 16, .45), inset 0 0 0 1px rgba(255, 255, 255, .14);
  cursor: pointer;
}
.video-palco img, .video-palco iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-palco img { object-fit: cover; transition: transform .8s var(--mola), opacity .5s var(--mola); }
.video-palco:hover img { transform: scale(1.03); opacity: .85; }

.botao-assistir {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}
.disco-play {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--asmpf-verde-floresta);
  box-shadow: 0 .75rem 1.5rem rgba(8, 26, 16, .5);
  transition: transform .5s var(--mola), background-color .4s var(--mola);
}
.disco-play svg { width: 1.9rem; height: 1.9rem; margin-left: .15rem; }
.video-palco:hover .disco-play { transform: scale(1.08); background: var(--asmpf-branco); }
.botao-assistir:focus-visible .disco-play { outline: 3px solid var(--asmpf-ambar); outline-offset: 4px; }

.lista-tv { display: grid; gap: .75rem; margin: 0; align-content: start; }
.item-tv {
  display: flex;
  gap: .85rem;
  align-items: center;
  padding: .55rem;
  border-radius: var(--raio-miolo);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: var(--asmpf-branco);
  text-decoration: none;
  transition: transform .4s var(--mola), background-color .4s var(--mola);
}
.item-tv:hover, .item-tv:focus-visible { transform: translateX(4px); background: rgba(255, 255, 255, .12); color: var(--asmpf-branco); }
.item-tv-miniatura { position: relative; flex: 0 0 auto; width: 7.5rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .6rem; }
.item-tv-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.marca-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .9);
  background: rgba(8, 26, 16, .25);
}
.marca-play svg { width: 1.5rem; height: 1.5rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.item-tv-texto { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.item-tv-titulo { font-weight: 600; line-height: 1.3; font-size: .9375rem; }
.item-tv .etiqueta { color: #BCCFA8; }

.aviso-tv { margin: 1.25rem 0 0; font-size: .8125rem; color: #A8BD97; }

/* ---------- Contato ---------- */

.grade-canais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
  margin: 0 0 2.5rem;
}
.grade-canais > li { min-width: 0; }
.canal {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  padding: 1.35rem;
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .08);
  transition: transform .5s var(--mola), box-shadow .5s var(--mola);
}
.canal:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.canal-icone {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .5rem;
  border-radius: .9rem;
  background: rgba(78, 155, 62, .12);
  color: var(--asmpf-verde-floresta);
}
.canal-icone svg { width: 1.4rem; height: 1.4rem; }
.canal-titulo { margin: 0; font-size: 1.0625rem; color: var(--asmpf-verde-floresta); }
.canal-detalhe { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.canal-detalhe a { color: var(--asmpf-verde-escuro); text-decoration: none; }
.canal-detalhe a:hover { text-decoration: underline; text-underline-offset: .25em; }
.canal-nota { margin: auto 0 0; padding-top: .5rem; font-size: .875rem; color: var(--asmpf-texto-suave); }

.painel-contato { display: grid; gap: 1.5rem; }
@media (min-width: 62em) { .painel-contato { grid-template-columns: 1.55fr 1fr; gap: 2rem; align-items: stretch; } }
.painel-contato > * { min-width: 0; }

.cartao-formulario {
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-2), inset 0 0 0 1px rgba(31, 77, 44, .08);
}
.texto-apoio { max-width: 52ch; margin-bottom: 1.5rem; color: var(--asmpf-texto-suave); }

.formulario-contato { display: grid; gap: 1rem; }
@media (min-width: 40em) { .formulario-contato { grid-template-columns: 1fr 1fr; } }
.campo { display: flex; flex-direction: column; gap: .35rem; margin: 0; min-width: 0; }
.campo-largo { grid-column: 1 / -1; }
.campo label { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; color: var(--asmpf-texto-suave); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid #D7E0CF;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  font: inherit;
  color: inherit;
  transition: border-color .3s var(--mola), box-shadow .3s var(--mola), background-color .3s var(--mola);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  background: var(--asmpf-branco);
  border-color: var(--asmpf-verde);
  box-shadow: 0 0 0 3px rgba(78, 155, 62, .18);
}
.campo textarea { resize: vertical; min-height: 8rem; }
.erro-campo { font-size: .8125rem; color: #A32E22; }
.ajuda-campo { font-size: .8125rem; color: var(--asmpf-texto-suave); }
.formulario-encaixe { max-width: 46rem; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.acoes-formulario { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.aviso-lgpd { font-size: .8125rem; color: var(--asmpf-texto-suave); }

/* O cartão da sede acompanha a altura do formulário: o mapa abre, as redes fecham no rodapé. */
.cartao-sede {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--raio-casca);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.cartao-sede > :not(.minimapa) { margin-inline: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.cartao-sede > :nth-child(2) { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.cartao-sede > :last-child { margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

/* Mapa estático, servido por nós: nenhuma requisição do visitante sai para serviço de mapa. */
.minimapa {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #E8EDE3;
}
.minimapa img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mola); }
.minimapa:hover img { transform: scale(1.05); }
.minimapa-acao {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--sombra-1);
  color: var(--asmpf-verde-floresta);
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.minimapa:hover .minimapa-acao { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); }
.cartao-sede h2 { color: var(--asmpf-verde-floresta); }
.endereco-sede { margin: 0 0 .75rem; font-style: normal; line-height: 1.6; }
.link-mapa { font-weight: 600; color: var(--asmpf-verde-escuro); }
.dados-sede { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0 0 1.25rem; font-size: .9375rem; }
.dados-sede dt { font-family: "Archivo Narrow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; color: var(--asmpf-texto-suave); align-self: center; }
.dados-sede dd { margin: 0; font-variant-numeric: tabular-nums; }
.redes-contato { display: flex; flex-wrap: wrap; gap: .5rem; margin: auto 0 0; }
.redes-contato a {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .14);
  color: var(--asmpf-verde-escuro);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .3s var(--mola), color .3s var(--mola);
}
.redes-contato a:hover { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); }

/* ---------- Transparência ---------- */

.acervo { display: grid; gap: 1.25rem; }
.filtros-acervo { display: grid; gap: .75rem; }
.anos-acervo { display: flex; flex-wrap: wrap; gap: .4rem; }
.ano {
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
  color: var(--asmpf-texto-suave);
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color .3s var(--mola), color .3s var(--mola);
}
.ano:hover { background: rgba(78, 155, 62, .12); color: var(--asmpf-verde-floresta); }
.ano-ativo, .ano-ativo:hover { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); box-shadow: none; }

.contagem-acervo { margin: 0; font-size: .9375rem; color: var(--asmpf-texto-suave); }

.grade-documentos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: .85rem;
  margin: 0;
}
.grade-documentos > li { min-width: 0; }
.documento { height: 100%; }
.documento-abrir {
  display: flex;
  gap: 1rem;
  align-items: center;
  height: 100%;
  padding: .9rem 1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
  color: inherit;
  text-decoration: none;
  transition: transform .4s var(--mola), box-shadow .4s var(--mola);
}
.documento-abrir:hover, .documento-abrir:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(78, 155, 62, .4);
  color: inherit;
}
.documento-icone {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3.5rem;
  border-radius: .6rem;
  background: rgba(163, 46, 34, .08);
  color: #A32E22;
}
.documento-icone svg { width: 1.5rem; height: 1.5rem; }
.documento-tipo {
  position: absolute;
  bottom: .3rem;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .625rem;
  letter-spacing: .06em;
}
.documento-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.documento-categoria { font-size: .6875rem; color: var(--asmpf-texto-suave); }
.documento-titulo { font-weight: 600; line-height: 1.3; color: var(--asmpf-verde-floresta); }
.documento-meta { font-size: .8125rem; color: var(--asmpf-texto-suave); font-variant-numeric: tabular-nums; }
.documento-seta { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-left: auto; color: var(--asmpf-verde-escuro); opacity: .45; transition: transform .4s var(--mola), opacity .4s var(--mola); }
.documento-abrir:hover .documento-seta { opacity: 1; transform: translateY(2px); }

.acervo-vazio { margin: 0; color: var(--asmpf-texto-suave); }
.acervo-vazio-inicial {
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  border-radius: var(--raio-casca);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}

/* Acervo fechado para quem entrou mas não é associado: o mesmo cartão do acervo vazio, com o
   motivo e a saída. */
.acervo-restrito {
  max-width: 44rem;
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.25rem);
  border-radius: var(--raio-casca);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.acervo-restrito h2 { margin: 0 0 .6rem; font-size: 1.35rem; color: var(--asmpf-verde-floresta); }

/* Primeiro acesso, na tela de entrar: caminho de quem é associado antigo e nunca teve senha. */
.caixa-primeiro-acesso {
  margin-top: 1.75rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--raio-casca);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.caixa-primeiro-acesso h2 { margin: 0 0 .4rem; font-size: 1.125rem; color: var(--asmpf-verde-floresta); }
.caixa-primeiro-acesso p { margin-bottom: .9rem; font-size: .9375rem; }
.acervo-restrito p { margin-bottom: .75rem; }

/* Filtro de período na listagem de notícias: anos em cima, meses do ano escolhido embaixo. */
.filtro-periodo { display: grid; gap: .6rem; margin-bottom: 1.75rem; }
.ano-total, .mes-total {
  margin-left: .3rem;
  font-size: .6875rem;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.meses-noticias {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .7rem .85rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .08);
}
.mes {
  padding: .25rem .7rem;
  border-radius: 999px;
  color: var(--asmpf-texto-suave);
  font-size: .875rem;
  text-decoration: none;
  transition: background-color .3s var(--mola), color .3s var(--mola);
}
.mes:hover { background: rgba(78, 155, 62, .14); color: var(--asmpf-verde-floresta); }
.mes-ativo, .mes-ativo:hover { background: var(--asmpf-verde-escuro); color: var(--asmpf-branco); font-weight: 600; }

/* ---------- Jurídico ---------- */

.painel-juridico { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62em) {
  .painel-juridico { grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: stretch; }
}
.coluna-escritorio { display: flex; flex-direction: column; gap: 1rem; }
.painel-juridico > * { min-width: 0; }

.lista-acoes { display: grid; gap: 1rem; margin: 0; }
.acao { height: 100%; }
.acao-abrir {
  display: grid;
  gap: .4rem;
  height: 100%;
  padding: 1.25rem 1.35rem;
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .08);
  color: inherit;
  text-decoration: none;
  transition: transform .4s var(--mola), box-shadow .4s var(--mola);
}
.acao-abrir:hover, .acao-abrir:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--sombra-2), inset 0 0 0 1px rgba(78, 155, 62, .35);
  color: inherit;
}
.acao-situacao { justify-self: start; }
.acao-titulo { margin: 0; font-size: 1.125rem; line-height: 1.3; color: var(--asmpf-verde-floresta); }
.acao-resumo { margin: 0; color: var(--asmpf-texto-suave); line-height: 1.5; }
.acao-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: .25rem 0 0; font-size: .8125rem; color: var(--asmpf-texto-suave); }
.acao-meta span { position: relative; }
.acao-meta span + span::before { content: "·"; position: absolute; left: -.55rem; }
.acao-acao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--asmpf-verde-escuro);
}
.acao-acao svg { width: 1rem; height: 1rem; transition: transform .4s var(--mola); }
.acao-abrir:hover .acao-acao svg { transform: translateX(.25rem); }

/* Situação da ação: a cor diz em que pé está, e o texto repete — cor sozinha não informa. */
.selo-em_preparacao, .selo-suspensa { background: #EDEFEA; color: #4A5547; }
.selo-ajuizada, .selo-em_andamento { background: #DFEFD6; color: #22571C; }
.selo-sentenciada, .selo-em_recurso { background: #FBEBD2; color: #7A5210; }
.selo-transitada, .selo-em_execucao { background: #D9EAF6; color: #1B4A66; }
.selo-encerrada { background: #E8E4DE; color: #5A4F43; }

/* O cartão preenche a coluna: o botão e a nota descem para o rodapé, alinhados com o fim da lista. */
.cartao-escritorio {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  overflow: hidden;
  border-radius: var(--raio-casca);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.cartao-escritorio > :not(.faixa-escritorio) { margin-inline: clamp(1.35rem, 1rem + 1.2vw, 1.85rem); }
.cartao-escritorio > :last-child { margin-bottom: clamp(1.35rem, 1rem + 1.2vw, 1.85rem); }
.cartao-escritorio .btn { margin-top: auto; align-self: start; }

/* A marca do escritório é dourada e vazada, feita para fundo escuro: por isso a faixa. */
.faixa-escritorio {
  display: grid;
  gap: .9rem;
  justify-items: center;
  padding: 1.5rem 1.25rem 1.6rem;
  margin-bottom: 1.25rem;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(78, 155, 62, .35), transparent 65%),
    linear-gradient(160deg, var(--asmpf-verde-floresta), var(--asmpf-verde-noite));
}
.faixa-escritorio .etiqueta { margin: 0; color: #BCCFA8; }
.logo-escritorio { width: min(100%, 13rem); height: auto; }
.nome-escritorio { color: var(--asmpf-branco); text-align: center; }
.cartao-escritorio .etiqueta { margin: 0; color: var(--asmpf-verde-escuro); }
.cartao-escritorio h3 { margin: 0; color: var(--asmpf-verde-floresta); }
.dados-escritorio { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .25rem 0 1.25rem; font-size: .9375rem; }
.dados-escritorio dt { font-family: "Archivo Narrow", sans-serif; font-weight: 700; text-transform: uppercase; font-size: .6875rem; letter-spacing: .06em; color: var(--asmpf-texto-suave); align-self: center; }
.dados-escritorio dd { margin: 0; }
.cartao-escritorio .btn { justify-self: start; }
/* Próximas datas com vaga: preenche o cartão com informação viva, não com enfeite. Sai da mesma
   conta da tela de agendamento, então nenhuma data mostrada aqui some no clique seguinte. */
.datas-livres { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
.datas-livres > ul { display: grid; gap: .45rem; }
.datas-livres li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .6rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .08);
}
.data-livre-dia {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  padding: .25rem 0;
  border-radius: .6rem;
  background: rgba(78, 155, 62, .12);
  line-height: 1;
  color: var(--asmpf-verde-floresta);
}
.data-livre-dia strong { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.data-livre-dia span {
  margin-top: .15rem;
  font-family: "Archivo Narrow", sans-serif;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.data-livre-texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.data-livre-semana { font-weight: 600; font-size: .9375rem; text-transform: capitalize; }
.data-livre-vagas { font-size: .8125rem; color: var(--asmpf-texto-suave); }

.nota-escritorio { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--asmpf-texto-suave); }

/* Chamada de campanha (a ação da VPNI, no jurídico e na home). */
.chamada-campanha {
  position: relative;
  display: grid;
  gap: 1.5rem;
  overflow: hidden;
  margin-bottom: 2rem;
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem);
  border-radius: var(--raio-casca);
  background:
    radial-gradient(85% 130% at 100% 0%, rgba(232, 163, 61, .20), transparent 60%),
    linear-gradient(135deg, var(--asmpf-verde-floresta), var(--asmpf-verde-noite));
  color: var(--asmpf-branco);
  box-shadow: var(--sombra-3);
}
.chamada-campanha > * { min-width: 0; }
.chamada-campanha::before {          /* fio âmbar na borda: é campanha, não é o conteúdo de sempre */
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(var(--asmpf-ambar), var(--asmpf-verde-limao));
}
@media (min-width: 56em) {
  .chamada-com-imagem { grid-template-columns: 1.35fr .9fr; gap: 2rem; align-items: center; }
}

.chamada-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .4rem;
  color: var(--asmpf-ambar);
}
.chamada-etiqueta::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--asmpf-ambar); }
.chamada-titulo {
  margin: 0 0 .6rem;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--asmpf-branco);
}
.chamada-corpo { margin: 0; max-width: 58ch; line-height: 1.55; color: #D8E6CB; }

/* O que a pessoa precisa levar, em etiquetas: some o parágrafo com lista embutida. */
.chamada-itens { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; }
.chamada-itens li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem .3rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font-size: .8125rem;
  color: #E3EFD6;
}
.chamada-itens svg { width: .9rem; height: .9rem; flex: 0 0 auto; color: var(--asmpf-verde-limao); }

.chamada-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.4rem; }
.chamada-secundaria { color: #DCEBB8; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chamada-secundaria:hover { color: var(--asmpf-branco); text-decoration: underline; text-underline-offset: .25em; }

/* A fotografia do escritório e a logo de quem opera a plataforma: explica para onde o botão leva. */
.chamada-figura { position: relative; margin: 0; border-radius: var(--raio-miolo); overflow: hidden; box-shadow: var(--sombra-2); }
.chamada-figura > img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.chamada-parceiro {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .85rem;
  background: linear-gradient(to top, rgba(8, 26, 16, .92), rgba(8, 26, 16, .55) 70%, transparent);
  font-size: .75rem;
  line-height: 1.3;
  color: #D8E6CB;
}
.chamada-parceiro img { width: 4.5rem; height: auto; flex: 0 0 auto; filter: brightness(0) invert(1); opacity: .95; }


/* Paginação reaproveitável (jurídico e o que vier depois). */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.paginacao-posicao { font-size: .875rem; color: var(--asmpf-texto-suave); font-variant-numeric: tabular-nums; }
.btn-contorno {
  border: 1px solid #D7E0CF;
  border-radius: var(--raio-miolo);
  padding: .5rem 1.1rem;
  background: var(--asmpf-branco);
  color: var(--asmpf-verde-escuro);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .3s var(--mola), background-color .3s var(--mola);
}
a.btn-contorno:hover { border-color: var(--asmpf-verde); background: rgba(78, 155, 62, .08); color: var(--asmpf-verde-floresta); }
.btn-contorno[aria-disabled="true"] { opacity: .45; }

/* Faixa da simulação de acesso: precisa ser impossível de não notar, senão o administrador
   esquece que está na pele de outra pessoa e conclui coisa errada sobre o que o portal mostra. */
.faixa-simulacao {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: .6rem 0;
  background: repeating-linear-gradient(135deg, #7A5210, #7A5210 12px, #8A5D12 12px, #8A5D12 24px);
  color: var(--asmpf-branco);
  font-size: .9375rem;
}
.faixa-simulacao .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.faixa-simulacao .btn { padding: .25rem .9rem; font-size: .875rem; }

/* Barra de quem entra por um módulo (o escritório), no lugar do menu de gestão da equipe. */
.barra-modulo { display: flex; align-items: baseline; gap: .6rem; color: var(--asmpf-verde-floresta); font-weight: 600; }
.barra-modulo .etiqueta { color: var(--asmpf-texto-suave); font-weight: 700; }

/* ---------- Agendamento jurídico: uma decisão por tela ----------
   Público com muitos aposentados: alvo grande (nada abaixo de 3rem de altura), texto maior que o
   do resto do portal e uma pergunta por vez. */

.passos { margin-bottom: 1.5rem; }
.passos ol { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; }
.passos li { display: flex; align-items: center; gap: .5rem; color: var(--asmpf-texto-suave); font-size: .9375rem; }
.passos span {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #E7ECE2;
  color: var(--asmpf-texto-suave);
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .875rem;
}
.passos .passo-atual { color: var(--asmpf-verde-floresta); font-weight: 700; }
.passos .passo-atual span { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); }
.passos .passo-feito span { background: var(--asmpf-verde-limao); color: var(--asmpf-verde-noite); }

.titulo-agendar { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin-bottom: .35rem; }
.apoio-agendar { font-size: 1.0625rem; color: var(--asmpf-texto-suave); margin-bottom: 1.75rem; }
/* Explica a opção que já veio marcada para quem mora em outro estado. Discreto de propósito:
   é um recado, não um alerta. */
/* Lista dos arquivos entregues para análise: nome de um lado, botão de apagar do outro. */
.lista-arquivos-analise li {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: .9rem 0;
  border-bottom: 1px solid rgba(31, 77, 44, .12);
}

.apoio-sugestao {
  padding: .7rem .9rem;
  margin-bottom: .6rem;
  border-left: 3px solid var(--asmpf-verde-floresta);
  border-radius: 0 var(--raio-casca) var(--raio-casca) 0;
  background: rgba(31, 77, 44, .06);
}
.pergunta-agendar {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  margin-bottom: 1rem;
  color: var(--asmpf-verde-floresta);
}

.escolhas { display: grid; gap: .6rem; margin: 0; max-width: 34rem; }
.escolha {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4rem;
  padding: .75rem 1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 2px #DDE4D6;
  color: var(--asmpf-verde-floresta);
  font-size: 1.0625rem;
  text-decoration: none;
  transition: box-shadow .3s var(--mola), transform .3s var(--mola);
}
.escolha:hover, .escolha:focus-visible {
  box-shadow: inset 0 0 0 2px var(--asmpf-verde), var(--sombra-1);
  transform: translateX(3px);
  color: var(--asmpf-verde-floresta);
}
.escolha-numero {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: .75rem;
  background: rgba(78, 155, 62, .12);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.escolha-texto { display: flex; flex-direction: column; gap: .1rem; }
.escolha-texto span { font-size: .9375rem; color: var(--asmpf-texto-suave); }
.escolha svg { width: 1.25rem; height: 1.25rem; margin-left: auto; opacity: .5; }

/* Calendário da marcação: mês a mês, com o dia livre em verde e o alvo do tamanho do dedo.
   É <table> de propósito — um calendário é uma grade de dias, e o leitor de tela anuncia a coluna. */
.apoio-calendario { font-size: 1.0625rem; margin-bottom: 1.25rem; }
/* Quatro meses de uma vez: dois por linha a partir de tela média, um embaixo do outro no celular. */
.grade-calendarios { display: grid; gap: 1.5rem 2rem; max-width: 52rem; }
@media (min-width: 48em) { .grade-calendarios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.calendario-sem-vaga { opacity: .55; }

.calendario {
  width: 100%;
  max-width: 34rem;
  margin: 0;
  border-collapse: separate;
  border-spacing: .3rem;
  table-layout: fixed;
}
.calendario caption {
  caption-side: top;
  padding-bottom: .6rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--asmpf-verde-floresta);
  text-align: left;
}
.calendario th {
  padding-bottom: .3rem;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--asmpf-texto-suave);
}
.calendario th abbr { text-decoration: none; }
.calendario td { padding: 0; text-align: center; vertical-align: top; }

.dia-livre, .dia-ocupado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: 3.25rem;
  border-radius: .7rem;
  font-variant-numeric: tabular-nums;
}
.dia-livre {
  background: rgba(78, 155, 62, .14);
  box-shadow: inset 0 0 0 2px rgba(78, 155, 62, .45);
  color: var(--asmpf-verde-floresta);
  text-decoration: none;
  transition: background-color .25s var(--mola), transform .25s var(--mola), box-shadow .25s var(--mola);
}
.dia-livre:hover, .dia-livre:focus-visible {
  background: var(--asmpf-verde-floresta);
  box-shadow: var(--sombra-1);
  color: var(--asmpf-branco);
  transform: translateY(-2px);
}
.dia-numero { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.125rem; line-height: 1; }
.dia-vagas { font-size: .625rem; opacity: .85; }
.dia-ocupado { color: #A9B3A5; }
.calendario .fora-do-mes { visibility: hidden; }

@media (max-width: 26rem) {
  .calendario { border-spacing: .2rem; }
  .dia-livre, .dia-ocupado { min-height: 2.9rem; }
  .dia-vagas { display: none; }        /* em tela estreita, o número do dia é o que tem de caber */
}

/* Horas: grade de botões grandes, que é o que a mão encontra no celular. */
.escolhas-horas { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.escolha-hora {
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* Rádio que vira cartão: o controle some e o rótulo inteiro é o alvo.
   Usado na escolha do assunto e na de como será o atendimento. */
.escolhas-radio { max-width: 34rem; }
.escolhas-radio li { display: block; }
.escolhas-radio input { position: absolute; opacity: 0; pointer-events: none; }
.escolhas-radio label {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: .75rem 1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 2px #DDE4D6;
  font-size: 1.0625rem;
  cursor: pointer;
  transition: box-shadow .3s var(--mola), background-color .3s var(--mola);
}
.escolhas-radio label:hover { box-shadow: inset 0 0 0 2px var(--asmpf-verde); }
.escolhas-radio input:checked + label {
  background: rgba(78, 155, 62, .12);
  box-shadow: inset 0 0 0 2px var(--asmpf-verde-escuro);
  font-weight: 600;
}
.escolhas-radio input:focus-visible + label { outline: 3px solid var(--asmpf-ambar); outline-offset: 3px; }

.resumo-agendar {
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.75rem;
  border-radius: var(--raio-casca);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.resumo-quando {
  margin: 0 0 .25rem;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  font-weight: 700;
  color: var(--asmpf-verde-floresta);
}

/* Quem lê o que o associado escreve. Fica acima das perguntas sobre o assunto, porque é o medo
   de expor o problema que faz a pessoa desistir antes de responder. */
.quadro-sigilo {
  display: flex;
  gap: .9rem;
  max-width: 34rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 2px rgba(31, 77, 44, .16);
}
.quadro-sigilo > svg {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .2rem;
  color: var(--asmpf-verde-escuro);
}
.quadro-sigilo h2 {
  margin: 0 0 .4rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--asmpf-verde-floresta);
}
.quadro-sigilo p { margin: 0 0 .5rem; font-size: 1rem; }
.quadro-sigilo p:last-child { margin-bottom: 0; }

.detalhes-agendar { margin-bottom: 1.75rem; max-width: 34rem; }
.detalhes-agendar summary { cursor: pointer; font-size: 1.0625rem; color: var(--asmpf-verde-escuro); font-weight: 600; }
.botao-confirmar { min-height: 3.5rem; font-size: 1.125rem; }
.voltar-agendar { font-size: 1.0625rem; color: var(--asmpf-verde-escuro); }
.aviso-agendar { font-size: 1.0625rem; max-width: 34rem; }

/* Atendimento jurídico do associado. */
.cartao-marcar {
  max-width: 34rem;
  padding: 1.4rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: var(--raio-casca);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.marcar-quando { font-size: 1.125rem; font-weight: 600; color: var(--asmpf-verde-floresta); margin-bottom: .25rem; }
.marcar-saldo { margin-bottom: 1.1rem; color: var(--asmpf-texto-suave); }

.lista-atendimentos { display: grid; gap: .75rem; max-width: 40rem; margin: 0; }
.atendimento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.atendimento-quando {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.5rem;
  padding: .4rem 0;
  border-radius: .75rem;
  background: rgba(78, 155, 62, .12);
  line-height: 1;
  color: var(--asmpf-verde-floresta);
}
.atendimento-dia { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.atendimento-mes { margin-top: .2rem; font-family: "Archivo Narrow", sans-serif; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; }
.atendimento-texto { flex: 1 1 14rem; min-width: 0; }
.atendimento form { margin-left: auto; }

/* ---------- Administração ---------- */

.secao-gestao { padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }

/* Navegação: os módulos que esta conta abre, em pílulas que quebram linha. */
.barra-gestao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid #E4E9DE;
}
.barra-gestao-inicio {
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--asmpf-verde-floresta);
  text-decoration: none;
  margin-right: .5rem;
}
.barra-gestao ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.barra-gestao ul a {
  display: inline-block;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--asmpf-nevoa);
  color: var(--asmpf-texto-suave);
  font-size: .875rem;
  text-decoration: none;
  transition: background-color .25s var(--mola), color .25s var(--mola);
}
.barra-gestao ul a:hover { background: rgba(78, 155, 62, .14); color: var(--asmpf-verde-floresta); }
.barra-gestao ul a[aria-current="page"] { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); }

.titulo-gestao { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin-bottom: 1.5rem; }

/* O que está esperando alguém: número grande, porque é o que se procura ao abrir a tela. */
.pendencias { margin-bottom: 2.5rem; }
.pendencias > .etiqueta { display: block; margin-bottom: .75rem; color: var(--asmpf-texto-suave); }
.pendencias ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .85rem; margin: 0; }
.pendencias a {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  height: 100%;
  padding: 1rem 1.15rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(232, 163, 61, .35);
  color: inherit;
  text-decoration: none;
  transition: transform .35s var(--mola), box-shadow .35s var(--mola);
}
.pendencias a:hover { transform: translateY(-3px); box-shadow: var(--sombra-2), inset 0 0 0 1px var(--asmpf-ambar); color: inherit; }
.pendencias strong {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--asmpf-verde-floresta);
}
.pendencias span { font-size: .9375rem; color: var(--asmpf-texto-suave); }
.nada-pendente {
  padding: 1rem 1.15rem;
  margin-bottom: 2.5rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  color: var(--asmpf-texto-suave);
}

.grupo-modulos { margin-bottom: 2.25rem; }
.titulo-grupo {
  margin-bottom: .9rem;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--asmpf-texto-suave);
}
.grade-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .85rem; margin: 0; }
.modulo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .2rem .75rem;
  height: 100%;
  padding: 1rem 1.15rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
  color: inherit;
  text-decoration: none;
  transition: transform .35s var(--mola), box-shadow .35s var(--mola);
}
.modulo:hover, .modulo:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(78, 155, 62, .45);
  color: inherit;
}
.modulo-nome { font-weight: 700; font-size: 1.0625rem; color: var(--asmpf-verde-floresta); }
.modulo-resumo { grid-column: 1 / -1; font-size: .875rem; line-height: 1.4; color: var(--asmpf-texto-suave); }
.modulo-seta { width: 1.1rem; height: 1.1rem; color: var(--asmpf-verde-escuro); opacity: .4; transition: transform .35s var(--mola), opacity .35s var(--mola); }
.modulo:hover .modulo-seta { opacity: 1; transform: translateX(.2rem); }

/* ---------- Guarda contra transbordo horizontal ----------
   Item de grade/flex tem min-width: auto e se recusa a encolher abaixo do próprio conteúdo:
   é o que empurra a página e cria a barra de rolagem lateral. */

html { overflow-x: clip; }   /* clip, não hidden: não quebra position: sticky */
.vitrine > *, .trilha, .palco-grade > *, .console-servicos > li, .cabecalho-secao > *,
.grade-noticias > *, .grade-convenios > *, .lista-eventos > *, .trilha-item, .texto-servico { min-width: 0; }
.trilha-item > * { max-width: 100%; }

/* ---------- Vitrine de notícias: uma em evidência à esquerda, as outras em lista à direita ---------- */

.vitrine { display: grid; gap: 1.5rem; }
.editorial { display: grid; gap: 1.5rem; }
@media (min-width: 62em) { .editorial { grid-template-columns: 1.4fr 1fr; align-items: start; } }

/* A notícia em evidência: capa larga em cima, texto embaixo. */
.editorial-principal {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .08);
  transition: transform .5s var(--mola), box-shadow .5s var(--mola);
}
.editorial-principal:hover, .editorial-principal:focus-within { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.editorial-capa { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--asmpf-verde-noite); }
.editorial-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mola); }
.editorial-principal:hover .editorial-capa img { transform: scale(1.04); }
.editorial-corpo { display: flex; flex-direction: column; gap: .55rem; padding: 1.5rem; }
.editorial-corpo .etiqueta { color: var(--asmpf-verde-escuro); }
.editorial-corpo h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.editorial-corpo h3 a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.editorial-corpo h3 a::after { content: ""; position: absolute; inset: 0; }
.editorial-chamada { margin: 0; color: var(--asmpf-texto-suave); line-height: 1.55; }
.editorial-acao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .35rem;
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--asmpf-verde-escuro);
}
.editorial-acao svg { width: 1rem; height: 1rem; transition: transform .4s var(--mola); }
.editorial-principal:hover .editorial-acao svg { transform: translateX(.25rem); }

/* A lista ao lado: miniatura, título e data, uma embaixo da outra. */
.editorial-lista { display: grid; gap: .75rem; align-content: start; list-style: none; margin: 0; padding: 0; }
.editorial-item {
  position: relative;
  display: flex;
  gap: .9rem;
  align-items: center;
  padding: .7rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .08);
  transition: transform .4s var(--mola), box-shadow .4s var(--mola);
}
.editorial-item:hover, .editorial-item:focus-within { transform: translateX(4px); box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(78, 155, 62, .35); }
.editorial-miniatura {
  flex: 0 0 auto;
  width: 11rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--asmpf-nevoa);
}
@media (max-width: 30em) { .editorial-miniatura { width: 7.5rem; } }
.editorial-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.editorial-item-texto { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.editorial-item h4 { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.editorial-item h4 a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.editorial-item h4 a::after { content: ""; position: absolute; inset: 0; }
.editorial-item .etiqueta { color: var(--asmpf-texto-suave); }
.editorial-vazia { margin: 0; padding: 1.5rem .25rem; color: var(--asmpf-texto-suave); }

.temas-noticias { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .25rem; }
.tema {
  padding: .45rem 1rem;
  border-radius: 999px;
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .14);
  color: var(--asmpf-verde-floresta);
  font-family: "Archivo Narrow", "Source Sans 3", system-ui, sans-serif;
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .4s var(--mola), color .4s var(--mola), box-shadow .4s var(--mola);
}
.tema:hover { background: rgba(78, 155, 62, .12); color: var(--asmpf-verde-floresta); }
.tema-ativo, .tema-ativo:hover {
  background: var(--asmpf-verde-floresta);
  color: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px var(--asmpf-verde-floresta);
}
.htmx-request .tema-ativo { opacity: .7; }

/* Trilha: três cartões por vez no desktop, dois no tablet, um no celular. */
.trilha { position: relative; }
.trilha-pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  padding: .25rem .25rem 1.25rem;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.trilha-pista::-webkit-scrollbar { display: none; }
@media (min-width: 40em) { .trilha-pista { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (min-width: 62em) { .trilha-pista { grid-auto-columns: calc((100% - 3rem) / 3); } }
.trilha-pista > * { scroll-snap-align: start; }
.trilha-pista:focus-visible { outline: 3px solid var(--asmpf-verde-escuro); outline-offset: 4px; border-radius: var(--raio-casca); }
.trilha-vazia { padding: 2rem .25rem; color: var(--asmpf-texto-suave); }

/* Barra de progresso no lugar de bolinhas: mostra onde a trilha está. */
.trilha-progresso { height: 3px; border-radius: 999px; background: rgba(31, 77, 44, .12); overflow: hidden; }
.trilha-progresso span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--asmpf-verde), var(--asmpf-verde-limao));
  transition: width .35s var(--mola-suave);
}

.trilha-controles { display: flex; gap: .5rem; }
.botao-trilha {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--asmpf-branco);
  color: var(--asmpf-verde-floresta);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .14);
  transition: transform .4s var(--mola), background-color .4s var(--mola), color .4s var(--mola), opacity .4s var(--mola);
}
.botao-trilha svg { width: 1.25rem; height: 1.25rem; }
.botao-trilha:hover:not(:disabled) { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); transform: translateY(-2px); }
.botao-trilha:active:not(:disabled) { transform: scale(.95); }
.botao-trilha:disabled { opacity: .3; }

/* Presença nacional no palco: o mapa em linhas sem moldura, como parte do próprio fundo. */
.palco-lateral { display: grid; gap: 1.5rem; align-content: start; }
.presenca-palco { position: relative; display: grid; gap: .9rem; justify-items: center; }
.presenca-palco::before {          /* brilho por trás do mapa: é o que o integra ao fundo, no lugar de um cartão */
  content: "";
  position: absolute;
  inset: -12% -6% 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(60% 55% at 50% 45%, rgba(165, 205, 82, .20), transparent 70%);
  filter: blur(6px);
}
.mapa-linhas {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin-block: clamp(-3.5rem, -2.5vw, -1rem) -.5rem;   /* sobe e encosta nas bandeiras */
  filter: drop-shadow(0 .75rem 1.75rem rgba(8, 26, 16, .45));
}
/* Em tela larga o mapa passa da coluna e avança sobre a margem do container — só até onde essa
   margem existe de verdade, medida na hora, para nunca encostar na borda nem criar rolagem. */
@media (min-width: 992px) {
  .presenca-palco {
    --sangria: clamp(0rem, calc((100vw - 1156px) / 2), 4.5rem);
    width: calc(100% + var(--sangria));
    margin-right: calc(-1 * var(--sangria));
  }
  .mapa-linhas { max-width: none; margin-top: clamp(-5rem, -3.5vw, -1.5rem); }
  .fileira-bandeiras { margin-right: var(--sangria); }   /* as bandeiras seguem centradas na coluna */
}
.presenca-titulo { margin: 0; color: #BCCFA8; }

/* Oito bandeiras em cima e as cinco restantes embaixo, centralizadas: a largura máxima é a de
   exatamente oito, então a quebra acontece sozinha, sem separar a lista em dois blocos. */
.fileira-bandeiras {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0;
  width: min(100%, 24.35rem);
  justify-content: center;
}
.fileira-bandeiras a {
  display: block;
  width: 2.5rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: .3rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 .25rem .5rem rgba(8, 26, 16, .35);
  transition: transform .4s var(--mola), box-shadow .4s var(--mola);
}
.fileira-bandeiras a:hover, .fileira-bandeiras a:focus-visible {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 0 0 1px var(--asmpf-verde-limao), 0 .5rem 1rem rgba(8, 26, 16, .5);
}
.fileira-bandeiras img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Painel da agenda no palco. */
.palco-agenda {
  position: relative;
  display: grid;
  gap: .5rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border-radius: var(--raio-casca);
  background: rgba(255, 255, 255, .08);
  box-shadow: var(--sombra-3), inset 0 0 0 1px rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
}
.palco-agenda .etiqueta { color: var(--asmpf-verde-limao); }
.palco-agenda-data { display: flex; align-items: baseline; gap: .5rem; margin: 0; color: var(--asmpf-branco); }
.palco-agenda-data .dia { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.palco-agenda-data .mes {
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--asmpf-verde-limao);
}
.palco-agenda h2 { font-size: var(--asmpf-fs-1); margin: 0; }
.palco-agenda h2 a { color: var(--asmpf-branco); text-decoration: none; }
.palco-agenda h2 a::after { content: ""; position: absolute; inset: 0; }
.palco-agenda:hover h2 a { text-decoration: underline; }
.palco-agenda-detalhe { margin: 0; color: #D8E6CB; font-size: .9375rem; }

/* ---------- Botão com o ícone no próprio disco ---------- */

.btn-com-disco { display: inline-flex; align-items: center; gap: .85rem; padding-right: .55rem; }
.btn-com-disco .disco {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: rgba(31, 77, 44, .14);
  transition: transform .5s var(--mola), background-color .5s var(--mola);
}
.btn-com-disco .disco svg { width: 1rem; height: 1rem; stroke-width: 1.5; }
.btn-com-disco:hover .disco { transform: translate(2px, -1px) scale(1.06); background: rgba(31, 77, 44, .22); }
.btn-com-disco:active { transform: scale(.985); }
.btn-contorno-claro.btn-com-disco .disco { background: rgba(255, 255, 255, .16); }
.btn-contorno-claro.btn-com-disco:hover .disco { background: rgba(255, 255, 255, .26); }

@media print {
  .aviso-cookies { display: none !important; }
  .cabecalho, .rodape, .menu-area, .pular-para-conteudo, .btn { display: none !important; }
}
.campo-armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Grupos de módulos na área da conta: a lista do painel vem do que foi liberado. */
.grupo-conta { margin-bottom: 2rem; }
.grupo-conta > .etiqueta-secao { display: block; margin-bottom: .75rem; }

/* ---------- Telas da gestão: cabeçalho, números, filtros, tabela e formulários ----------
   Vocabulário comum às telas internas (/gestao/). A ideia é a mesma do site público: casca clara
   com miolo branco, raio concêntrico e nada de sombra dura. */

.topo-gestao {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

.acoes-gestao { display: flex; flex-wrap: wrap; gap: .5rem; }

.voltar-gestao {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.voltar-gestao::before { content: "←"; }
.voltar-gestao:hover, .voltar-gestao:focus-visible { text-decoration: underline; }

/* Números por situação: cada um é um filtro. */
.cartoes-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.cartao-numero {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(31, 77, 44, .12);
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1);
  color: inherit;
  text-decoration: none;
  transition: transform .4s var(--mola), box-shadow .4s var(--mola), border-color .4s var(--mola);
}

a.cartao-numero:hover,
a.cartao-numero:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
  border-color: var(--asmpf-verde);
}

.cartao-numero-valor {
  font-family: "Montserrat", var(--bs-body-font-family);
  font-size: var(--asmpf-fs-2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--asmpf-verde-floresta);
  font-variant-numeric: tabular-nums;
}

.cartao-numero-rotulo {
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
}

.cartao-numero-ativo { border-color: var(--asmpf-verde); box-shadow: inset 0 0 0 1px var(--asmpf-verde), var(--sombra-1); }
.cartao-numero-suspenso .cartao-numero-valor { color: var(--asmpf-vermelho); }

/* Busca e filtros numa caixa só. */
.caixa-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.25rem 1.25rem .25rem;
  margin-bottom: 1.25rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  border: 1px solid rgba(31, 77, 44, .08);
}

.grade-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 1rem;
  flex: 1 1 24rem;
}

.acoes-filtros { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }

.resumo-resultados { color: var(--asmpf-texto-suave); margin-bottom: .75rem; }

/* Tabela: linhas respiradas, cabeçalho em etiqueta, nome em destaque. */
.tabela-gestao { --bs-table-bg: transparent; margin-bottom: 0; }

.tabela-gestao thead th {
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
  border-bottom: 1px solid rgba(31, 77, 44, .18);
  padding-bottom: .6rem;
}

.tabela-gestao tbody td { padding-top: .85rem; padding-bottom: .85rem; border-color: rgba(31, 77, 44, .08); }
.tabela-gestao tbody tr:hover { background: var(--asmpf-nevoa); }
.tabela-vazia { color: var(--asmpf-texto-suave); padding: 2rem 0; text-align: center; }

.celula-pessoa { display: flex; align-items: center; gap: .75rem; }

.iniciais {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--asmpf-verde), var(--asmpf-verde-floresta));
  color: var(--asmpf-branco);
  font-weight: 700;
}

.nome-associado { font-weight: 600; text-decoration: none; }
.nome-associado:hover, .nome-associado:focus-visible { text-decoration: underline; }
.linha-apoio { display: block; font-size: .82rem; color: var(--asmpf-texto-suave); }

.paginacao-gestao { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }

/* Formulário em blocos. */
.bloco-formulario {
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  border: 1px solid rgba(31, 77, 44, .1);
  box-shadow: var(--sombra-1);
}

.bloco-formulario-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--asmpf-verde-escuro);
  margin-bottom: 1rem;
}

.acoes-formulario { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.5rem 0 .5rem; }

.duas-colunas-gestao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Relatório da importação. */
.relatorio-importacao {
  padding: 1.5rem;
  border-radius: var(--raio-casca);
  background: var(--asmpf-nevoa);
  border: 1px solid rgba(31, 77, 44, .1);
}

.nome-arquivo { font-family: var(--bs-body-font-family); font-size: .85rem; letter-spacing: 0; text-transform: none; color: var(--asmpf-texto-suave); }
.colunas-lidas { font-size: .9rem; color: var(--asmpf-texto-suave); }
.lista-colunas { columns: 2; column-gap: 1.5rem; margin: 0; padding-left: 1.1rem; }
.lista-colunas-densa { font-size: .92rem; }
.lista-colunas li { break-inside: avoid; }
.lista-problemas li { padding: .6rem 0; border-top: 1px solid rgba(31, 77, 44, .1); }
.nota-importacao { font-size: .92rem; color: var(--asmpf-texto-suave); }

@media (max-width: 48rem) {
  .duas-colunas-gestao { grid-template-columns: 1fr; }
  .topo-gestao { align-items: flex-start; }
  .lista-colunas { columns: 1; }
}

/* ---------- Menu lateral da administração ----------
   Sempre visível, para a pessoa pular de módulo em módulo sem voltar ao painel. No celular ele
   vira uma faixa que rola na horizontal: ocupar meia tela de menu lá não ajudaria ninguém. */

.layout-gestao {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.25rem, .75rem + 1.5vw, 2.5rem);
  align-items: start;
}

.layout-gestao-simples { grid-template-columns: minmax(0, 1fr); }

.menu-gestao {
  position: sticky;
  top: 1.5rem;
  padding: 1.25rem 1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  border: 1px solid rgba(31, 77, 44, .1);
}

.menu-gestao-inicio {
  display: block;
  padding: .5rem .75rem;
  margin-bottom: .75rem;
  border-radius: .6rem;
  background: var(--asmpf-branco);
  border: 1px solid rgba(31, 77, 44, .12);
  color: var(--asmpf-verde-floresta);
  font-family: "Montserrat", var(--bs-body-font-family);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .35s var(--mola), color .35s var(--mola);
}

.menu-gestao-inicio:hover,
.menu-gestao-inicio:focus-visible { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); }
.menu-gestao-inicio[aria-current="page"] { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); border-color: var(--asmpf-verde-floresta); }

.menu-gestao-grupo {
  margin: 1rem .75rem .35rem;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
}

.menu-gestao ul { display: flex; flex-direction: column; gap: .15rem; margin: 0; }

.menu-gestao ul a {
  display: block;
  padding: .45rem .75rem;
  border-radius: .55rem;
  color: var(--asmpf-grafite);
  text-decoration: none;
  font-size: .95rem;
  transition: background-color .3s var(--mola), color .3s var(--mola);
}

.menu-gestao ul a:hover,
.menu-gestao ul a:focus-visible { background: rgba(78, 155, 62, .14); color: var(--asmpf-verde-floresta); }

.menu-gestao ul a[aria-current="page"] {
  background: var(--asmpf-branco);
  color: var(--asmpf-verde-floresta);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .12), var(--sombra-1);
}

.conteudo-gestao { min-width: 0; }

@media (max-width: 62rem) {
  .layout-gestao { grid-template-columns: minmax(0, 1fr); }
  .menu-gestao {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
    overflow-x: auto;
    padding: .75rem;
    scrollbar-width: thin;
  }
  .menu-gestao-inicio { margin-bottom: 0; flex-shrink: 0; }
  .menu-gestao-grupo { display: none; }
  .menu-gestao ul { flex-direction: row; flex-wrap: nowrap; gap: .35rem; }
  .menu-gestao ul a { white-space: nowrap; }
}

/* Caminho do papel na etapa 5: alternativa de quem não assina na tela. */
.caminho-papel {
  margin-top: 2rem;
  padding: 1.25rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  border: 1px solid rgba(31, 77, 44, .14);
  border-left: 4px solid var(--asmpf-ambar);
}

.passos-papel { margin: 0 0 1rem; padding-left: 1.25rem; font-size: .95rem; }
.passos-papel li { margin-bottom: .25rem; }
.aviso-papel { margin-top: .9rem; font-size: .88rem; color: var(--asmpf-texto-suave); }

/* ---------- Fichas de filiação na gestão ---------- */

.abas-gestao { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }

.aba-gestao {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 77, 44, .14);
  background: var(--asmpf-branco);
  color: var(--asmpf-grafite);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  transition: background-color .35s var(--mola), color .35s var(--mola), border-color .35s var(--mola);
}

.aba-gestao:hover, .aba-gestao:focus-visible { border-color: var(--asmpf-verde); color: var(--asmpf-verde-floresta); }

.aba-gestao-ativa,
.aba-gestao-ativa:hover { background: var(--asmpf-verde-floresta); border-color: var(--asmpf-verde-floresta); color: var(--asmpf-branco); }

.aba-gestao-numero {
  min-width: 1.5rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--asmpf-nevoa);
  color: var(--asmpf-verde-floresta);
  font-size: .82rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.aba-gestao-ativa .aba-gestao-numero { background: rgba(255, 255, 255, .22); color: var(--asmpf-branco); }

.protocolo { font-family: "Archivo Narrow", var(--bs-body-font-family); letter-spacing: .04em; font-weight: 700; }
.motivo-recusa { max-width: 22rem; font-size: .9rem; color: var(--asmpf-texto-suave); }

.duas-colunas-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.bloco-decisao { border-left: 4px solid var(--asmpf-verde); }
.botao-recusar { color: var(--asmpf-vermelho); border-color: rgba(163, 40, 43, .4); }
.botao-recusar:hover, .botao-recusar:focus-visible { background: var(--asmpf-vermelho); border-color: var(--asmpf-vermelho); color: var(--asmpf-branco); }

.imagem-assinatura {
  display: block;
  max-width: 100%;
  max-height: 7rem;
  margin-bottom: 1rem;
  padding: .5rem;
  background: var(--asmpf-branco);
  border: 1px solid rgba(31, 77, 44, .12);
  border-radius: var(--raio-miolo);
}

.assinatura-digitada-ficha { font-family: "Dancing Script", cursive; font-size: 2rem; color: var(--asmpf-verde-floresta); }
.hash-documento { margin-top: 1rem; font-size: .82rem; }
.hash-documento .etiqueta { display: block; color: var(--asmpf-texto-suave); }

@media (max-width: 62rem) {
  .duas-colunas-ficha { grid-template-columns: 1fr; }
}

/* Fichas de filiação dentro do cadastro do associado. */
.lista-fichas { display: grid; gap: .6rem; margin: 0; }
.lista-fichas li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(31, 77, 44, .08);
}
.lista-fichas li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-fichas .linha-apoio { display: inline; flex: 1 1 12rem; }
.acoes-ficha { display: flex; gap: .75rem; font-size: .9rem; font-weight: 600; }

/* ---------- Voltar ao topo ----------
   Canto inferior esquerdo (decisão do João), onde não briga com o aviso de cookies nem com os
   botões de ação das telas de gestão, que ficam à direita. Área de toque de 2,75rem, acima do
   mínimo confortável no celular. */

.voltar-ao-topo {
  position: fixed;
  left: clamp(.75rem, .5rem + 1vw, 1.5rem);
  bottom: clamp(.75rem, .5rem + 1vw, 1.5rem);
  z-index: 1020;                  /* abaixo do aviso de cookies (1030), que é decisão pendente */
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgba(31, 77, 44, .14);
  border-radius: 50%;
  background: var(--asmpf-branco);
  color: var(--asmpf-verde-floresta);
  box-shadow: var(--sombra-2);
  cursor: pointer;
  transition: transform .4s var(--mola), background-color .4s var(--mola), color .4s var(--mola);
}

.voltar-ao-topo svg { width: 1.25rem; height: 1.25rem; }

.voltar-ao-topo:hover,
.voltar-ao-topo:focus-visible {
  background: var(--asmpf-verde-floresta);
  color: var(--asmpf-branco);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: no-preference) {
  .voltar-ao-topo { animation: surgir-topo .4s var(--mola) both; }
  @keyframes surgir-topo { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Impressão e telas estreitas com o aviso de cookies aberto: o botão não disputa espaço. */
@media print {
  .voltar-ao-topo { display: none !important; }
}

/* ---------- Lista de notícias na gestão ---------- */

.celula-noticia { display: flex; align-items: center; gap: .75rem; }

.miniatura-noticia {
  width: 4.5rem;
  height: 3rem;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: .5rem;
  background: var(--asmpf-nevoa);
}

.miniatura-vazia {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: .5rem;
  border: 1px dashed rgba(31, 77, 44, .2);
  font-size: .7rem;
  color: var(--asmpf-texto-suave);
}

.celula-categorias { max-width: 14rem; }

.etiqueta-categoria {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--asmpf-nevoa);
  font-size: .78rem;
  color: var(--asmpf-verde-floresta);
}

.numero-tabela { font-variant-numeric: tabular-nums; }

.botao-destaque {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(31, 77, 44, .14);
  border-radius: 50%;
  background: var(--asmpf-branco);
  color: var(--asmpf-texto-suave);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .35s var(--mola), background-color .35s var(--mola), transform .35s var(--mola);
}

.botao-destaque:hover, .botao-destaque:focus-visible { color: var(--asmpf-ambar); transform: translateY(-1px); }
.botao-destaque-ativo { color: var(--asmpf-ambar); border-color: var(--asmpf-ambar); background: #FDF6E7; }

.botoes-linha { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------- Painel da administração (a casa única, desde 11/10/2026) ---------- */

.pendencias-painel, .grupo-painel { margin-bottom: 2rem; }
.grupo-painel > .etiqueta-secao, .pendencias-painel > .etiqueta-secao { display: block; margin-bottom: .75rem; }
.nada-pendente { color: var(--asmpf-texto-suave); margin-bottom: 2rem; }

.grade-pendencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin: 0; }

.cartao-pendencia {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: 100%;
  padding: .9rem 1rem;
  border-radius: var(--raio-miolo);
  background: #FDF6E7;
  border: 1px solid rgba(232, 163, 61, .45);
  color: var(--asmpf-grafite);
  text-decoration: none;
  transition: transform .4s var(--mola), box-shadow .4s var(--mola);
}

.cartao-pendencia:hover, .cartao-pendencia:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra-2); }

.cartao-pendencia-valor {
  font-family: "Montserrat", var(--bs-body-font-family);
  font-size: var(--asmpf-fs-2);
  font-weight: 700;
  line-height: 1;
  color: #7A5210;
  font-variant-numeric: tabular-nums;
}

.cartao-pendencia-texto { font-size: .92rem; }

.grade-quadros { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .9rem; margin: 0; }

.quadro-modulo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  height: 100%;
  padding: 1.25rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  border: 1px solid rgba(31, 77, 44, .12);
  box-shadow: var(--sombra-1);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .45s var(--mola), box-shadow .45s var(--mola), border-color .45s var(--mola);
}

.quadro-modulo:hover, .quadro-modulo:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sombra-2);
  border-color: var(--asmpf-verde);
}

.quadro-modulo-icone {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .35rem;
  border-radius: .85rem;
  background: linear-gradient(145deg, var(--asmpf-verde), var(--asmpf-verde-floresta));
  color: var(--asmpf-branco);
  box-shadow: 0 8px 18px -10px rgba(18, 48, 32, .6);
}

.quadro-modulo-icone .material-symbols-outlined { font-size: 1.35rem; }

.quadro-modulo-nome {
  font-family: "Montserrat", var(--bs-body-font-family);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--asmpf-verde-floresta);
}

.quadro-modulo-resumo { font-size: .88rem; color: var(--asmpf-texto-suave); line-height: 1.45; }

.quadro-modulo-seta {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: auto;
  border-radius: 50%;
  background: var(--asmpf-nevoa);
  color: var(--asmpf-verde-escuro);
  transition: background-color .4s var(--mola), color .4s var(--mola), transform .4s var(--mola);
}

.quadro-modulo-seta svg { width: 1rem; height: 1rem; }
.quadro-modulo:hover .quadro-modulo-seta { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); transform: translateX(2px); }

.menu-gestao-tecnico { font-size: .9rem; color: var(--asmpf-texto-suave) !important; }

/* ---------- Seletor de cor (cadastro de categorias) ---------- */

.seletor-cor { display: flex; flex-wrap: wrap; gap: .5rem; }

.amostra-cor { position: relative; cursor: pointer; }
.amostra-cor input { position: absolute; opacity: 0; width: 0; height: 0; }

.amostra-cor-disco {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  transition: transform .35s var(--mola), box-shadow .35s var(--mola);
}

.amostra-cor:hover .amostra-cor-disco { transform: translateY(-2px); }

.amostra-cor input:checked + .amostra-cor-disco {
  box-shadow: 0 0 0 2px var(--asmpf-branco), 0 0 0 4px var(--asmpf-verde-floresta);
  transform: translateY(-2px);
}

.amostra-cor input:focus-visible + .amostra-cor-disco {
  box-shadow: 0 0 0 2px var(--asmpf-branco), 0 0 0 4px var(--asmpf-ambar);
}

/* O nome da cor fica para o leitor de tela e para o `title` do mouse. */
.amostra-cor-nome {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.amostra-na-lista {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: .4rem;
  border-radius: 50%;
  vertical-align: -.15rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Formulário de uma coluna: textos longos (corpo da notícia) não devem dividir espaço. */
.coluna-formulario { display: grid; gap: 0; }
.coluna-formulario textarea { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .92rem; }

/* ---------- Prévia do resultado de busca e contador de caracteres ---------- */

.previa-busca {
  max-width: 34rem;
  margin-top: .25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  border: 1px solid rgba(31, 77, 44, .1);
}

.previa-busca-etiqueta {
  margin: 0 0 .6rem;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
}

.previa-busca-url { margin: 0; font-size: .82rem; color: #4D6B52; }
.previa-busca-titulo { margin: .1rem 0 .2rem; font-size: 1.1rem; color: #1A0DAB; line-height: 1.3; }
.previa-busca-texto { margin: 0; font-size: .9rem; color: #4D5156; line-height: 1.45; }

.contador-caracteres { margin: .3rem 0 0; font-size: .8rem; color: var(--asmpf-texto-suave); }
.contador-cheio { color: var(--asmpf-vermelho); font-weight: 600; }

@media (prefers-color-scheme: dark) {
  .previa-busca-titulo { color: #8AB4F8; }
  .previa-busca-texto { color: var(--asmpf-texto-suave); }
}

/* ---------- Dropdown de múltipla escolha ---------- */

.selecao-multipla { position: relative; }

.selecao-multipla-resumo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid #C9D2C2;
  border-radius: var(--bs-border-radius);
  background: var(--asmpf-branco);
  cursor: pointer;
  list-style: none;
}

.selecao-multipla-resumo::-webkit-details-marker { display: none; }
.selecao-multipla-resumo:hover { border-color: var(--asmpf-verde-escuro); }

.selecao-multipla[open] .selecao-multipla-resumo {
  border-color: var(--asmpf-verde-escuro);
  box-shadow: 0 0 0 .2rem rgba(78, 155, 62, .15);
}

.selecao-multipla-texto { color: var(--asmpf-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecao-multipla-cheia .selecao-multipla-texto { color: var(--asmpf-grafite); font-weight: 600; }
.selecao-multipla-seta svg { width: 1.1rem; height: 1.1rem; transition: transform .3s var(--mola); }
.selecao-multipla[open] .selecao-multipla-seta svg { transform: rotate(180deg); }

.selecao-multipla-lista {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow-y: auto;
  margin-top: .25rem;
  padding: .4rem;
  border-radius: var(--bs-border-radius);
  background: var(--asmpf-branco);
  border: 1px solid #C9D2C2;
  box-shadow: var(--sombra-2);
}

.selecao-multipla-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border-radius: .4rem;
  cursor: pointer;
}

.selecao-multipla-item:hover { background: var(--asmpf-nevoa); }
.selecao-multipla-item input { width: 1rem; height: 1rem; accent-color: var(--asmpf-verde-escuro); }

/* ---------- Interruptor do destaque ---------- */

.cartao-destaque {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  border: 1px solid rgba(31, 77, 44, .12);
  transition: background-color .45s var(--mola), border-color .45s var(--mola);
}

.cartao-destaque-ligado { background: #FDF6E7; border-color: rgba(232, 163, 61, .5); }

.cartao-destaque-titulo {
  margin: 0 0 .15rem;
  font-family: "Montserrat", var(--bs-body-font-family);
  font-weight: 600;
  color: var(--asmpf-verde-floresta);
}

.cartao-destaque-apoio { font-size: .9rem; color: var(--asmpf-texto-suave); max-width: 34rem; }

.interruptor { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; flex-shrink: 0; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }

.interruptor-trilho {
  position: relative;
  display: block;
  width: 3.25rem;
  height: 1.75rem;
  border-radius: 999px;
  background: #C9D2C2;
  transition: background-color .35s var(--mola);
}

.interruptor-bolinha {
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--asmpf-branco);
  box-shadow: 0 1px 3px rgba(18, 48, 32, .35);
  transition: transform .35s var(--mola);
}

.interruptor input:checked + .interruptor-trilho { background: var(--asmpf-ambar); }
.interruptor input:checked + .interruptor-trilho .interruptor-bolinha { transform: translateX(1.5rem); }
.interruptor input:focus-visible + .interruptor-trilho { box-shadow: 0 0 0 .2rem rgba(232, 163, 61, .45); }

.interruptor-rotulo {
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
  min-width: 7rem;
}

.cartao-destaque-ligado .interruptor-rotulo { color: #7A5210; }

/* ---------- TV ASMPF na gestão ---------- */

.lista-videos { display: grid; gap: .6rem; margin: 0; }

.cartao-video {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: .75rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  border: 1px solid rgba(31, 77, 44, .12);
  transition: border-color .4s var(--mola), background-color .4s var(--mola);
}

.cartao-video-destaque { border-color: rgba(232, 163, 61, .55); background: #FDF6E7; }

.video-miniatura { width: 10rem; height: 5.625rem; flex-shrink: 0; object-fit: cover; border-radius: .6rem; background: var(--asmpf-nevoa); }

.video-miniatura-vazia {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(31, 77, 44, .2);
  font-size: .78rem;
  color: var(--asmpf-texto-suave);
}

.video-texto { flex: 1 1 14rem; min-width: 0; }
.video-titulo { font-weight: 600; color: var(--asmpf-verde-floresta); }
.video-acao { flex-shrink: 0; }

/* Interruptor em forma de botão, para a tela da TV: o estado é o próprio botão. */
.interruptor-botao {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .75rem .4rem .5rem;
  border: 1px solid rgba(31, 77, 44, .14);
  border-radius: 999px;
  background: var(--asmpf-branco);
  cursor: pointer;
  transition: border-color .35s var(--mola), background-color .35s var(--mola);
}

.interruptor-botao:hover { border-color: var(--asmpf-ambar); }
.interruptor-botao .interruptor-trilho { width: 2.5rem; height: 1.4rem; }
.interruptor-botao .interruptor-bolinha { width: 1rem; height: 1rem; top: .2rem; left: .2rem; }
.interruptor-botao-ligado .interruptor-trilho { background: var(--asmpf-ambar); }
.interruptor-botao-ligado .interruptor-bolinha { transform: translateX(1.1rem); }
.interruptor-botao .interruptor-rotulo { min-width: 6rem; text-align: left; }
.interruptor-botao-ligado .interruptor-rotulo { color: #7A5210; }

/* ---------- Imagens de abertura na gestão ---------- */

.aviso-tamanho {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  border: 1px solid rgba(31, 77, 44, .12);
  border-left: 4px solid var(--asmpf-verde);
}

.aviso-tamanho-titulo {
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--asmpf-verde-escuro);
  margin-bottom: .75rem;
}

.aviso-tamanho-lista { margin: 0; padding-left: 1.1rem; font-size: .95rem; }
.aviso-tamanho-lista li { margin-bottom: .3rem; }
.aviso-tamanho-nota { margin-top: .75rem; font-size: .88rem; color: var(--asmpf-texto-suave); }

.lista-aberturas { display: grid; gap: .75rem; margin: 0; }

.cartao-abertura {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 16rem);
  gap: 1.25rem;
  align-items: start;
  padding: 1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  border: 1px solid rgba(31, 77, 44, .12);
}

.abertura-previa { position: relative; aspect-ratio: 3 / 1; border-radius: .6rem; overflow: hidden; background: var(--asmpf-nevoa); }
.abertura-previa img { width: 100%; height: 100%; object-fit: cover; }

.abertura-vazia {
  display: grid;
  place-items: center;
  height: 100%;
  border: 1px dashed rgba(31, 77, 44, .2);
  border-radius: .6rem;
  font-size: .78rem;
  color: var(--asmpf-texto-suave);
}

.abertura-selo {
  position: absolute;
  left: .4rem;
  bottom: .4rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(18, 48, 32, .82);
  color: var(--asmpf-branco);
  font-size: .72rem;
}

.abertura-nome { font-family: "Montserrat", var(--bs-body-font-family); font-weight: 600; color: var(--asmpf-verde-floresta); }
.abertura-acoes { display: grid; gap: .35rem; }
.abertura-envio .form-text { margin-bottom: .4rem; }

@media (max-width: 62rem) {
  .cartao-abertura { grid-template-columns: 1fr; }
  .abertura-previa { max-width: 22rem; }
}

/* ---------- Núcleos na gestão ----------
   Redesenho de 13/10/2026. O que havia antes eram cartões com borda contendo discos com borda
   contendo texto: moldura dentro de moldura, e a bandeira do estado recortada em círculo, o que
   nenhuma bandeira aceita. Agora:

   * a lista é a **mesma tabela** das telas de associados e notícias, porque o conteúdo é
     comparável linha a linha (contato, tamanho da diretoria, associados, quem responde);
   * a bandeira é **retangular**, inteira, dentro de uma caixa 3:2 com `object-fit: contain`;
   * a diretoria é uma tabela dentro do bloco do formulário, sem caixa por linha. */

/* `white-space: nowrap`: no celular a tabela espremia "R$ 60,00" em duas linhas e cortava o
   cabeçalho. Número é para ler de uma vez — se não couber, o container rola. */
.coluna-numero { text-align: right; font-variant-numeric: tabular-nums; width: 6rem; white-space: nowrap; }
.linha-inativa { opacity: .62; }
.texto-alerta { color: #7A5210; font-weight: 600; }

.celula-nucleo { display: flex; align-items: center; gap: .75rem; }

/* Bandeira e brasão: a forma é a do arquivo, nunca um recorte redondo. */
.simbolo-uf {
  width: 2.75rem;
  height: 1.85rem;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 3px;
  background: var(--asmpf-nevoa);
  box-shadow: 0 0 0 1px rgba(31, 77, 44, .12);
}

.simbolo-uf-vazio {
  display: grid;
  place-items: center;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--asmpf-texto-suave);
}

.simbolo-uf-grande { width: 4.5rem; height: 3rem; border-radius: 4px; }

.topo-com-simbolo { display: flex; align-items: center; gap: 1rem; }

/* Avisos de uma linha, no lugar de uma caixa colorida para cada recado. */
.aviso-linha {
  margin: -.25rem 0 1.25rem;
  padding-left: .75rem;
  border-left: 3px solid rgba(31, 77, 44, .22);
  font-size: .92rem;
  color: var(--asmpf-texto-suave);
}

.aviso-linha-atencao { border-left-color: var(--asmpf-ambar); }
.nota-bloco { font-family: var(--bs-body-font-family); font-size: .82rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--asmpf-texto-suave); }

/* Diretoria: tabela de edição. Campos soltos na célula, sem moldura própria. */
.tabela-diretoria { margin-bottom: .75rem; }
.tabela-diretoria thead th { padding-bottom: .5rem; }
.tabela-diretoria td { padding-top: .5rem; padding-bottom: .5rem; vertical-align: middle; }
.tabela-diretoria .coluna-foto { width: 7.5rem; }
.tabela-diretoria .coluna-numero { width: 5.5rem; }
.tabela-diretoria .coluna-remover { width: 6rem; }
.tabela-diretoria input[type="file"] { margin-top: .35rem; max-width: 7rem; font-size: .72rem; }
.tabela-diretoria .form-control { min-width: 7rem; }

.retrato-diretor {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: .5rem;
  background: var(--asmpf-nevoa);
}

.retrato-vazio { box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .14); }

.remover-linha { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--asmpf-vermelho); cursor: pointer; }
.linha-sem-diretor td { color: var(--asmpf-texto-suave); }

@media (max-width: 48rem) {
  .tabela-diretoria .coluna-foto { width: 5rem; }
  .simbolo-uf-grande { width: 3.5rem; height: 2.35rem; }
}

/* A matriz na lista: a sede vem marcada, sem virar uma caixa à parte. */
.linha-matriz { background: rgba(165, 205, 82, .1); }
.marca-matriz {
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--asmpf-verde-escuro);
}

/* Sigla do núcleo no cartão de notícia, na faixa de /nucleos/. */
.cartao-noticia-nucleo {
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--asmpf-verde-escuro);
}

/* ---------- Jurídico na gestão: a fila de processos (13/10/2026) ----------
   A lista de ações não é uma tabela: o que se lê aqui é um parágrafo — o último andamento —, e
   parágrafo não cabe em célula sem quebrar no celular. Cada processo é uma faixa em três partes:
   identidade à esquerda, última movimentação à direita, e um rodapé de marcas e ações. A cor do
   estado vem da família da situação (anda, parou, acabou, nem começou), não de nove cores. */

.resumo-acervo {
  margin-bottom: 1rem;
  color: var(--asmpf-texto-suave);
  font-variant-numeric: tabular-nums;
}
.resumo-acervo strong { color: var(--asmpf-verde-floresta); }

.barra-fila {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .85rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #E4E9DE;
}

.abas-filtro { display: flex; flex-wrap: wrap; gap: .25rem; }

.aba-filtro {
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .9rem;
  color: var(--asmpf-texto-suave);
  text-decoration: none;
  transition: background-color .2s var(--mola-suave), color .2s var(--mola-suave);
}
.aba-filtro:hover, .aba-filtro:focus-visible { background: var(--asmpf-nevoa); color: var(--asmpf-verde-floresta); }
.aba-filtro-atual,
.aba-filtro-atual:hover { background: var(--asmpf-verde-floresta); color: #fff; }

.busca-fila { display: flex; gap: .5rem; align-items: center; flex: 1 1 18rem; max-width: 26rem; }
.busca-fila .form-control { min-width: 0; }

/* Cada processo. A borda esquerda colorida é o estado: some a necessidade de uma etiqueta grande. */
.fila-acoes { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }

.processo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem 2rem;
  padding: 1.1rem 1.25rem 1rem;
  border: 1px solid rgba(31, 77, 44, .1);
  border-left: 3px solid var(--cor-estado, var(--asmpf-musgo));
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1);
  transition: box-shadow .25s var(--mola-suave), border-color .25s var(--mola-suave);
}
.processo:hover { box-shadow: var(--sombra-2); }

.processo-andando  { --cor-estado: var(--asmpf-verde); }
.processo-parada   { --cor-estado: var(--asmpf-ambar); }
.processo-fim      { --cor-estado: var(--asmpf-musgo); }
.processo-preparo  { --cor-estado: #9BB0C4; }
.processo-rascunho { background: #FBFCF9; }

.estado-processo {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .2rem;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
}
.ponto-estado { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cor-estado, var(--asmpf-musgo)); }
.estado-andando { --cor-estado: var(--asmpf-verde); }
.estado-parada  { --cor-estado: var(--asmpf-ambar); }
.estado-fim     { --cor-estado: var(--asmpf-musgo); }
.estado-preparo { --cor-estado: #9BB0C4; }

.processo-titulo { font-size: var(--asmpf-fs-1); margin-bottom: .15rem; text-wrap: balance; }
.processo-titulo a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.processo-titulo a:hover, .processo-titulo a:focus-visible { text-decoration: underline; }

.processo-referencia { margin-bottom: 0; font-size: .9rem; color: var(--asmpf-texto-suave); }

.movimento-quando {
  margin-bottom: .15rem;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
  font-variant-numeric: tabular-nums;
}
.movimento-texto { margin-bottom: 0; max-width: 60ch; text-wrap: pretty; }
.movimento-vazio { color: var(--asmpf-texto-suave); font-style: italic; }

.processo-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: .35rem;
  padding-top: .65rem;
  border-top: 1px dashed #E4E9DE;
}
.processo-marcas, .processo-acoes { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-bottom: 0; }
.processo-marcas { font-size: .85rem; }
.marca-acompanhando { color: var(--asmpf-verde-escuro); font-weight: 600; }
.marca-neutra { color: var(--asmpf-texto-suave); }
.marca-rascunho { color: var(--asmpf-ambar); font-weight: 600; }

/* A partir do tablet, identidade e movimentação dividem a faixa; o rodapé atravessa as duas. */
@media (min-width: 62em) {
  .processo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .processo-rodape { grid-column: 1 / -1; }
}

.link-discreto {
  padding: 0;
  border: 0;
  background: none;
  font-size: .9rem;
  color: var(--asmpf-verde-escuro);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.link-discreto:hover, .link-discreto:focus-visible { color: var(--asmpf-verde-floresta); }
.link-perigo { color: var(--asmpf-vermelho); }
.link-perigo:hover, .link-perigo:focus-visible { color: #7E1F21; }

.fila-vazia {
  padding: 2.5rem 1.5rem;
  border: 1px dashed rgba(31, 77, 44, .25);
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  text-align: center;
  color: var(--asmpf-texto-suave);
}
.fila-vazia p { max-width: 42ch; margin-inline: auto; }

/* Ficha da ação: dados em grade de definição, texto da tese com largura de leitura. */
.chamada-ficha { max-width: 60ch; font-size: var(--asmpf-fs-1); color: var(--asmpf-texto-suave); margin-bottom: 1.5rem; }

.ficha-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.5rem; margin-bottom: 0; }
.ficha-dados dt {
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
}
.ficha-dados dd { margin-bottom: 0; font-variant-numeric: tabular-nums; }

.texto-ficha { max-width: 65ch; }
.texto-ficha h2, .texto-ficha h3 { font-size: var(--asmpf-fs-1); margin-top: 1.5rem; }
.texto-ficha p:last-child { margin-bottom: 0; }

.linha-do-tempo-editavel li { padding-bottom: 1.75rem; }
.movimento-pe { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin: .4rem 0 0; font-size: .9rem; }
.sem-andamento { color: var(--asmpf-texto-suave); border-left-color: transparent !important; }
.sem-andamento::before { display: none; }

/* O que não tem volta fica separado do resto, no pé da ficha. */
.zona-de-risco {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(163, 40, 43, .25);
  border-radius: var(--raio-miolo);
  background: #FDF7F7;
  color: var(--asmpf-texto-suave);
}
.zona-de-risco h2 { color: var(--asmpf-vermelho); }
.btn-perigo { border-color: var(--asmpf-vermelho); color: var(--asmpf-vermelho); }
.btn-perigo:hover, .btn-perigo:focus-visible { background: var(--asmpf-vermelho); border-color: var(--asmpf-vermelho); color: #fff; }

/* ---------- Agenda jurídica na gestão: o mês inteiro, e o dia ao lado ---------- */
/* O calendário é <table> de propósito: um mês é uma grade de dias, e o leitor de tela anuncia a
   coluna. O que muda em relação ao calendário público é o que cada dia precisa dizer — o que está
   marcado, o que foi fechado e até onde dá para fechar. */

.troca-escritorio { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-bottom: 1.5rem; max-width: 26rem; }
.troca-escritorio .form-label { margin-bottom: .25rem; }

.agenda-mes { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 62em) { .agenda-mes { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); } }

.navegacao-mes { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mes-da-agenda {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: var(--asmpf-fs-2);
  color: var(--asmpf-verde-floresta);
}

.calendario-agenda { max-width: none; }
.calendario-agenda td { padding: 0; }

.dia-agenda {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 3.4rem;
  padding: .3rem .2rem;
  border-radius: .7rem;
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .08);
  color: var(--asmpf-texto-suave);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: transform .2s var(--mola), box-shadow .2s var(--mola);
}
.dia-agenda:hover, .dia-agenda:focus-visible { transform: translateY(-2px); box-shadow: var(--sombra-1); color: var(--asmpf-verde-floresta); }
.dia-agenda .dia-numero { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1; }
.dia-marca { font-size: .625rem; line-height: 1; text-transform: uppercase; letter-spacing: .04em; }

/* Dia em que o escritório atende, sem nada marcado: só o contorno diz que a grade abre nele. */
.dia-aberto { background: var(--asmpf-branco); box-shadow: inset 0 0 0 1px rgba(78, 155, 62, .35); color: var(--asmpf-verde-floresta); }
/* Dia com gente marcada: é o que o escritório procura na tela. */
.dia-cheio { background: rgba(78, 155, 62, .16); box-shadow: inset 0 0 0 2px rgba(78, 155, 62, .5); color: var(--asmpf-verde-floresta); }
/* Dia fechado: a agenda não oferece horário nenhum. */
.dia-fechado { background: rgba(163, 40, 43, .1); box-shadow: inset 0 0 0 1px rgba(163, 40, 43, .3); color: var(--asmpf-vermelho); }
.dia-ja-passou { opacity: .5; }
.dia-hoje { box-shadow: inset 0 0 0 2px var(--asmpf-ambar); }
.dia-escolhido { background: var(--asmpf-verde-floresta); color: var(--asmpf-branco); box-shadow: var(--sombra-1); }
.dia-escolhido:hover, .dia-escolhido:focus-visible { color: var(--asmpf-branco); }

.legenda-agenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; margin: 1rem 0 .5rem; font-size: .8125rem; color: var(--asmpf-texto-suave); }
.amostra-dia { display: inline-block; width: .85rem; height: .85rem; margin-right: -.6rem; border-radius: .25rem; vertical-align: -.1rem; }
.amostra-cheio { background: rgba(78, 155, 62, .16); box-shadow: inset 0 0 0 2px rgba(78, 155, 62, .5); }
.amostra-aberto { background: var(--asmpf-branco); box-shadow: inset 0 0 0 1px rgba(78, 155, 62, .35); }
.amostra-fechado { background: rgba(163, 40, 43, .1); box-shadow: inset 0 0 0 1px rgba(163, 40, 43, .3); }

/* O dia escolhido: quem está marcado, e o que dá para fazer com o dia. */
.painel-dia { padding: 1.25rem; border: 1px solid #DDE4D6; border-radius: var(--raio-casca); background: var(--asmpf-branco); }
.titulo-dia { font-size: var(--asmpf-fs-1); color: var(--asmpf-verde-floresta); }
.dia-sem-escolha { margin: 0; color: var(--asmpf-texto-suave); }
.faixa-dia { padding: .6rem .8rem; border-radius: var(--raio-miolo); background: var(--asmpf-nevoa); font-size: .9rem; color: var(--asmpf-texto-suave); }
.faixa-dia-fechada { background: #FDF7F7; color: var(--asmpf-vermelho); }

.atendimentos-do-dia { margin: 0; }
.atendimento { padding-block: .9rem; border-top: 1px solid #E4E9DE; }
.atendimento:first-child { border-top: 0; }
.atendimento p { margin-bottom: .2rem; }
.atendimento-hora { display: flex; gap: .6rem; align-items: baseline; font-family: "Montserrat", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.atendimento-assunto, .atendimento-relato { font-size: .875rem; color: var(--asmpf-texto-suave); }
.atendimento-relato { margin-top: .4rem; padding-left: .7rem; border-left: 2px solid #E4E9DE; }
.atendimento-reservado { font-style: italic; }
.atendimento-acoes { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-top: .6rem; }
.atendimento-acoes form { margin: 0; }
.form-cancelar-atendimento { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.form-cancelar-atendimento .mb-3 { margin-bottom: 0 !important; }
.dia-vazio { padding-block: .9rem; color: var(--asmpf-texto-suave); }

.fechar-dia { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed rgba(31, 77, 44, .2); }
.fechar-dia h3 { color: var(--asmpf-verde-floresta); }
.apoio-fechar { font-size: .875rem; color: var(--asmpf-texto-suave); }

@media (max-width: 26rem) {
  .dia-agenda { min-height: 2.9rem; gap: 0; }
  .dia-marca { font-size: .5625rem; letter-spacing: 0; }
}

/* ---------- Eventos na gestão ---------- */
/* A ficha abre por uma faixa que diz em uma linha onde o evento está: rascunho, vendendo,
   vendas fechadas ou encerrado. É a primeira pergunta de quem abre a tela. */
.faixa-situacao {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: baseline;
  margin-bottom: 1.5rem;
  padding: .7rem 1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  font-size: .9375rem;
  color: var(--asmpf-texto-suave);
}
.marca-vendendo { color: var(--asmpf-verde-escuro); font-weight: 600; }
.tabela-gestao .coluna-numero .linha-apoio { text-align: right; }

/* ---------- Vitrine de eventos: cartazes ---------- */
/* Evento se vende pela imagem e pela data. Por isso o cartaz tem capa, selo de dia sobreposto e,
   logo abaixo do título, as três coisas que decidem a ida: quando, onde e a partir de quanto. */

.abertura-eventos { max-width: 46rem; margin-bottom: 2rem; }
.abertura-eventos h1 { margin-bottom: .5rem; }

.cartaz-destaque {
  position: relative;
  display: grid;
  gap: 0;
  margin-bottom: 2.5rem;
  overflow: hidden;
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-2), inset 0 0 0 1px rgba(31, 77, 44, .08);
}
@media (min-width: 62em) { .cartaz-destaque { grid-template-columns: 1.25fr 1fr; align-items: stretch; } }

.cartaz-destaque-capa { position: relative; overflow: hidden; background: var(--asmpf-verde-floresta); aspect-ratio: 16 / 9; }
@media (min-width: 62em) { .cartaz-destaque-capa { aspect-ratio: auto; min-height: 22rem; } }
.cartaz-destaque-capa img { width: 100%; height: 100%; object-fit: cover; }

.cartaz-destaque-corpo { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.cartaz-destaque-titulo { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); line-height: 1.15; text-wrap: balance; }
.cartaz-destaque-titulo a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.cartaz-destaque-titulo a::after { content: ""; position: absolute; inset: 0; }
.cartaz-destaque-quando { display: flex; flex-direction: column; gap: .15rem; margin: 0; color: var(--asmpf-texto-suave); }
.cartaz-destaque-quando time { font-weight: 600; color: var(--asmpf-grafite); }
.cartaz-destaque-chamada { margin: 0; max-width: 54ch; color: var(--asmpf-texto-suave); line-height: 1.55; }
.cartaz-destaque-preco { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .2rem 0 .4rem; }
.cartaz-destaque .btn { align-self: flex-start; position: relative; z-index: 1; }

.titulo-faixa { font-size: var(--asmpf-fs-2); color: var(--asmpf-verde-floresta); margin-bottom: 1.25rem; }

.grade-cartazes { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; }

.cartaz {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .08);
  transition: transform .4s var(--mola), box-shadow .4s var(--mola);
}
.cartaz:hover, .cartaz:focus-within { transform: translateY(-4px); box-shadow: var(--sombra-3); }
.cartaz-capa { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--asmpf-verde-floresta); }
.cartaz-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--mola); }
.cartaz:hover .cartaz-capa img { transform: scale(1.04); }
/* Sem foto, a capa ainda tem de ter cara de cartaz: fundo verde e a data em corpo grande. */
.cartaz-capa-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  color: rgba(255, 255, 255, .22);
  letter-spacing: -.03em;
}
.cartaz-data {
  position: absolute;
  left: .85rem;
  bottom: .85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: .4rem .6rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .94);
  color: var(--asmpf-verde-floresta);
  line-height: 1;
  box-shadow: var(--sombra-1);
}
.cartaz-data .dia { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.4rem; }
.cartaz-data .mes { font-family: "Archivo Narrow", sans-serif; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }

.cartaz-corpo { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem 1.3rem; }
.cartaz-meta { margin: 0; font-family: "Archivo Narrow", sans-serif; font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; color: var(--asmpf-texto-suave); }
.cartaz-titulo { margin: 0; font-size: 1.15rem; line-height: 1.25; text-wrap: balance; }
.cartaz-titulo a { color: var(--asmpf-verde-floresta); text-decoration: none; }
.cartaz-titulo a::after { content: ""; position: absolute; inset: 0; }
.cartaz-local { margin: 0; font-size: .9rem; color: var(--asmpf-texto-suave); }
.cartaz-preco { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .35rem 0 0; }
.cartaz-valor { font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--asmpf-verde-escuro); }
.cartaz-esgotado .cartaz-capa img { filter: grayscale(.7); }

.vitrine-vazia {
  padding: 3rem 1.5rem;
  border: 1px dashed rgba(31, 77, 44, .25);
  border-radius: var(--raio-casca);
  background: var(--asmpf-branco);
  text-align: center;
  color: var(--asmpf-texto-suave);
}
.vitrine-vazia-titulo { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: var(--asmpf-fs-1); color: var(--asmpf-verde-floresta); }
.vitrine-vazia p { max-width: 46ch; margin-inline: auto; }

/* Três passos da compra: responde "é só para associado?" e "como pago?" sem a pessoa ligar. */
.passos-compra { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; margin: 0; counter-reset: passo; }
.passos-compra li { position: relative; padding-left: 3.25rem; }
.passos-compra h3 { font-size: 1.0625rem; margin-bottom: .3rem; color: var(--asmpf-verde-floresta); }
.passos-compra p { margin: 0; color: var(--asmpf-texto-suave); line-height: 1.55; }
.passo-numero {
  position: absolute;
  left: 0;
  top: -.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--asmpf-verde-floresta);
  color: var(--asmpf-branco);
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
}

/* Links de check-in: um por celular/portão, com QR para o aparelho abrir sem digitar. */
.form-chave { max-width: 28rem; margin-bottom: 1.5rem; }
.chaves-checkin { display: grid; gap: .75rem; margin: 0; }
.chave {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  padding: 1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.chave-fora { opacity: .6; }
.chave-identidade { flex: 1 1 14rem; min-width: 0; }
.chave-rotulo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .2rem; font-weight: 600; }
.chave-apoio { margin: 0; font-size: .85rem; color: var(--asmpf-texto-suave); }
.chave-endereco { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; flex: 2 1 22rem; }
.chave-endereco input { flex: 1 1 14rem; font-size: .85rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.chave-qr { width: 5.5rem; margin: 0; text-align: center; }
.chave-qr svg { width: 100%; height: auto; }
.chave-qr figcaption { font-size: .7rem; color: var(--asmpf-texto-suave); }
.chave-vazia { padding: 1rem; color: var(--asmpf-texto-suave); }
.apoio-checkin { margin-top: 1.5rem; font-size: .9rem; color: var(--asmpf-texto-suave); }

/* ---------- Painel do financeiro: fila de conferência ---------- */

/* O formulário da baixa é uma coluna: observação, anexo, botão. Em tela larga o anexo abre em duas
   colunas, porque arquivo e descrição são a mesma informação partida em dois campos. */
.form-conferencia { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.form-conferencia .acoes-formulario { margin: 0; }
.form-label-sm { margin-bottom: .25rem; font-size: .82rem; font-weight: 600; }

.campo-anexo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .08);
}

.documentos-cobranca { margin: .5rem 0 0; }
.documentos-cobranca li { padding: .4rem 0 .4rem 1.35rem; position: relative; }
.documentos-cobranca li::before { content: "📎"; position: absolute; left: 0; font-size: .9rem; }

/* Recusar é exceção: fica fechado para não competir com o botão de dar baixa. */
.recusar-comprovante, .anexar-depois { margin-top: 1rem; }
.recusar-comprovante summary, .anexar-depois summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--asmpf-texto-suave);
}
.recusar-comprovante[open] summary, .anexar-depois[open] summary { margin-bottom: .75rem; }
.recusar-comprovante form { max-width: 32rem; }

.lista-baixas li { padding-block: .9rem; border-bottom: 1px solid rgba(31, 77, 44, .1); }
.lista-baixas .selo { margin-left: .35rem; }

/* Evento exclusivo de um núcleo: o aviso vem antes da imagem, para ninguém descobrir só no fim. */
.aviso-exclusivo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }

/* ---------- Cadastro do evento: os tipos de ingresso ----------
   Era uma tabela de sete colunas: não cabia em 360px e, no desktop, os campos encostavam uns nos
   outros. Cada tipo de ingresso virou um bloco com os campos rotulados, numa grade de doze que
   recolhe para duas colunas no tablet e uma no celular. */
.lotes-cadastro { display: grid; gap: 1rem; margin-bottom: 1rem; }

.lote-cadastro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .85rem 1.25rem;
  padding: .9rem 1.15rem 1.15rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .09);
}

.lote-cadastro > * { grid-column: 1 / -1; }

.lote-cadastro-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.lote-cadastro-marca {
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
}

.campo-lote .form-label-sm { display: block; }
.apoio-campo { display: block; margin-top: .3rem; font-size: .78rem; color: var(--asmpf-texto-suave); }
.aviso-sem-lote { color: var(--asmpf-texto-suave); }

/* Já no celular de 360px os campos curtos andam em dupla: preço com vagas, limite com ordem.
   O `min-height` do rótulo é o que mantém as caixas alinhadas quando um deles quebra em duas
   linhas na coluna estreita. */
@media (min-width: 22rem) {
  .campo-lote-preco, .campo-lote-vagas,
  .campo-lote-limite, .campo-lote-ordem { grid-column: span 6; }
  .campo-lote .form-label-sm { min-height: 2.7em; }
}

@media (min-width: 56rem) {
  .campo-lote-nome, .campo-lote-quem { grid-column: span 6; }
  .campo-lote-preco, .campo-lote-vagas,
  .campo-lote-limite, .campo-lote-ordem { grid-column: span 3; }
  .campo-lote .form-label-sm { min-height: 0; }
}

/* Grupo de opções: uma por linha quando o rótulo é uma frase, lado a lado quando é curto. */
.opcoes-radio { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin-top: .15rem; }
.opcoes-radio .form-check { margin-bottom: 0; }

/* ---------- "Em breve" ----------
   Parte que já existe no portal mas ainda não foi acertada com a ASMPF. O selo avisa antes do
   clique, no menu do site e no painel da equipe; a página explica o que vai aparecer ali. */
.selo-menu {
  display: inline-block;
  vertical-align: .08em;
  padding: .1rem .4rem;
  border-radius: .35rem;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--asmpf-verde-escuro);
  background: rgba(165, 205, 82, .3);
}

.selo-palco {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 2rem;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--asmpf-branco);
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.caixa-em-breve {
  max-width: 48rem;
  padding: 1.75rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.caixa-em-breve p:not(:last-child) { margin-bottom: .75rem; }

/* Prêmio do sorteio: a descrição ocupa o que sobra, a quantidade é um número curto ao lado. */
@media (min-width: 30rem) {
  .campo-premio-descricao { grid-column: span 9; }
  .campo-premio-quantidade { grid-column: span 3; }
}

/* Chamar o suplente fica recolhido: é a exceção, não deve disputar espaço com a lista. */
.chamar-suplente { margin-top: .75rem; }
.chamar-suplente summary {
  display: inline-block;
  font-size: .85rem;
  color: var(--asmpf-texto-suave);
  cursor: pointer;
}
.chamar-suplente[open] summary { margin-bottom: .5rem; }

/* Item do sorteio: o prêmio em cima, as regras de quem concorre embaixo, separadas por uma faixa. */
.faixa-regras {
  grid-column: 1 / -1;
  margin: .35rem 0 -.35rem;
  font-family: "Archivo Narrow", var(--bs-body-font-family);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--asmpf-texto-suave);
  border-top: 1px solid rgba(31, 77, 44, .12);
  padding-top: .85rem;
}

@media (min-width: 30rem) {
  .campo-item-qtd, .campo-item-ordem, .campo-item-regra { grid-column: span 6; }
}

@media (min-width: 56rem) {
  .campo-item-nome { grid-column: span 5; }
  .campo-item-obs { grid-column: span 3; }
  .campo-item-qtd, .campo-item-ordem { grid-column: span 2; }
  .campo-item-regra { grid-column: span 3; }
}

/* Ações de quem foi sorteado: entregar e anular lado a lado, sem empurrar a lista. */
.acoes-contemplado { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .5rem; }
.acoes-contemplado form { margin: 0; }

/* Cadastro pelo QR: tela de celular, em pé, no meio do evento — uma coluna estreita e centrada. */
.caixa-cadastro-sorteio {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.75rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-branco);
  box-shadow: var(--sombra-1), inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.texto-centro { text-align: center; }

/* Cartaz com o QR, feito para imprimir. */
.cartaz-sorteio { max-width: 34rem; margin: 0 auto; padding: 2rem 1.5rem; text-align: center; }
.cartaz-chamada { font-size: 1.15rem; margin-bottom: 1.5rem; }
.cartaz-qr { display: flex; justify-content: center; margin-bottom: 1rem; }
.cartaz-qr svg { width: min(16rem, 70vw); height: auto; }
.cartaz-endereco { font-size: .78rem; word-break: break-all; color: var(--asmpf-texto-suave); }
.cartaz-apoio { margin-top: 1.25rem; }

/* Módulos de uma conta: caixa de marcar à esquerda, nome e explicação à direita, em duas colunas
   quando há espaço — são quase trinta, e uma lista única viraria rolagem sem fim. */
.lista-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: .35rem 1.5rem;
  margin-bottom: 1.25rem;
}
.lista-modulos .form-check {
  display: flex;
  align-items: start;
  gap: .6rem;
  padding: .5rem .25rem;
  margin: 0;
  cursor: pointer;
}
.lista-modulos .form-check-input { flex: none; margin: .15rem 0 0; float: none; }
.lista-modulos .linha-apoio { display: block; }

/* Atalho que não leva a lugar nenhum (quem não abre o /admin/): o número continua informando. */
.atalho-sem-link { display: block; color: inherit; }

/* Encarregado de dados: fecha as páginas legais, destacado do texto corrido porque é o contato
   que a pessoa procura quando chega ali com um pedido na mão. */
.bloco-encarregado {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}
.bloco-encarregado h2 { margin-top: 0; }

/* Aviso de finalidade no cadastro por QR: a pessoa está entregando CPF e telefone a uma
   associação de que não faz parte, e precisa ler para que serve antes de marcar o aceite. */
.aviso-dados {
  margin-bottom: 1.25rem;
  padding: .9rem 1rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  font-size: .875rem;
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}

/* Avisos no celular: o convite fica no alto das notificações, e só aparece em navegador que
   aceita — o JS tira o `hidden` depois de conferir o suporte. */
.caixa-avisos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .1);
}

/* Central de ajuda: uma pergunta por linha, resposta que abre no clique sem JavaScript. */
.atalhos-ajuda { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.atalhos-ajuda a {
  padding: .35rem .85rem;
  border-radius: 2rem;
  font-size: .85rem;
  text-decoration: none;
  color: var(--asmpf-verde-escuro);
  background: var(--asmpf-nevoa);
  box-shadow: inset 0 0 0 1px rgba(31, 77, 44, .12);
}
.atalhos-ajuda a:hover, .atalhos-ajuda a:focus { background: rgba(165, 205, 82, .25); }

.bloco-ajuda { margin-bottom: 2.5rem; scroll-margin-top: 1.5rem; }
.pergunta-ajuda { border-bottom: 1px solid rgba(31, 77, 44, .12); scroll-margin-top: 1.5rem; }
.pergunta-ajuda summary {
  padding: .9rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style-position: outside;
}
.pergunta-ajuda summary:hover { color: var(--asmpf-verde-floresta); }
.pergunta-ajuda[open] summary { color: var(--asmpf-verde-escuro); }
.pergunta-ajuda .conteudo-html { padding: 0 0 1rem; max-width: 60ch; }

/* Estatuto lido na própria página: o quadro ocupa a altura de leitura e rola por dentro. */
.acoes-documento { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.leitor-pdf {
  width: 100%;
  height: min(80vh, 50rem);
  border: 1px solid rgba(31, 77, 44, .18);
  border-radius: var(--raio-miolo);
  background: var(--asmpf-nevoa);
}

/* Atendimento por telefone na agenda do escritório: distingue de "agendado" sem competir com ele. */
.selo-telefone { background: #E7EFF8; color: #1F3F63; }

/* Como será o atendimento: duas opções curtas, que cabem lado a lado quando há largura. */
.escolhas-modalidade { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* ---- O que falta no cadastro (gestão de associados, 26/10/2026) ---- */
.quadro-faltando {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--asmpf-superficie-suave, #f5f7f5);
  border-radius: .75rem;
}

.etiqueta-faltando {
  display: inline-block;
  padding: .35rem .7rem;
  border: 1px solid rgba(31, 77, 44, .18);
  border-radius: 2rem;
  font-size: .85rem;
  text-decoration: none;
  color: inherit;
  background: #fff;
}

.etiqueta-faltando:hover,
.etiqueta-faltando:focus-visible { border-color: var(--asmpf-verde, #1f4d2c); }

.etiqueta-faltando-ativa {
  background: var(--asmpf-verde, #1f4d2c);
  border-color: var(--asmpf-verde, #1f4d2c);
  color: #fff;
}

.lista-pendencias li {
  padding: .15rem 0;
  font-size: .92rem;
}

.pendencia-do-associado {
  color: var(--asmpf-verde, #1f4d2c);
  font-weight: 600;
}

.botao-como-link {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}