/* =====================================================================
   ACIPOÁ — Blocos usados nas páginas institucionais
   ===================================================================== */

.pagina { padding-block: var(--secao-y); }
.pagina > .container > *:first-child { margin-top: 0; }

/* Bloco de texto padrão */
.bloco { margin-bottom: 64px; }
.bloco:last-child { margin-bottom: 0; }
.bloco > :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { font-size: var(--fs-h2); margin-bottom: 8px; }
.bloco > :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) { font-size: var(--fs-h3); color: var(--azul); margin-bottom: 16px; }
.bloco > :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) { font-size: var(--fs-h4); color: var(--texto-suave); font-weight: 500; margin-bottom: 20px; }
.bloco p { font-size: 16px; line-height: 1.44; margin-bottom: 20px; }

.bloco--centro { text-align: center; }
.bloco--centro p { max-width: 800px; margin-inline: auto; }

.bloco--destaque {
  background: var(--cinza-100);
  border-radius: var(--raio-card);
  padding: 40px;
}

.bloco--azul {
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-escuro) 100%);
  border-radius: var(--raio-card);
  padding: 48px 40px;
  color: #fff;
  text-align: center;
}

.bloco--azul :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.bloco--azul :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.bloco--azul :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) { color: #fff; }

.bloco--azul p { color: rgba(255, 255, 255, 0.92); max-width: 780px; margin-inline: auto; }

.bloco--verde {
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde-fundo) 100%);
  border-radius: var(--raio-card);
  padding: 48px 40px;
  color: #fff;
  text-align: center;
}

.bloco--verde :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.bloco--verde :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) { color: #fff; }

.bloco--verde p { color: rgba(255, 255, 255, 0.92); max-width: 780px; margin-inline: auto; }

/* Lista com marcador de conferido */
.lista-check {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 12px;
}

.lista-check li {
  position: relative;
  padding-left: 34px;
  font-size: 16.5px;
  line-height: 1.5;
  margin: 0;
}

.lista-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.lista-check--2 { grid-template-columns: repeat(2, 1fr); gap: 12px 32px; }

.bloco--azul .lista-check,
.bloco--verde .lista-check { text-align: left; max-width: 720px; margin-inline: auto; }

.bloco--azul .lista-check li::before { background-color: var(--amarelo); }
.bloco--azul .lista-check li { color: #fff; }
.bloco--verde .lista-check li { color: #fff; }
.bloco--verde .lista-check li::before { background-color: var(--amarelo); }

.bloco--azul .lista-check li::before,
.bloco--verde .lista-check li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23010B19'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z'/%3E%3C/svg%3E");
}

/* Cartões de solução (Boa Vista, FAC…) */
.solucoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.solucao {
  background: #fff;
  border: 1px solid var(--cinza-200);
  border-left: 5px solid var(--azul);
  border-radius: var(--raio-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.solucao :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) { font-size: 21px; color: var(--escuro-2); margin-bottom: 12px; }

.solucao :is(h5:where(:not([class*="nivel-"])), :where(.nivel-5)) {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--azul);
  margin: 14px 0 4px;
}

.solucao p { font-size: 15.5px; margin-bottom: 0; }
.solucao .lista-check { margin: 8px 0 20px; }
.solucao .lista-check li { font-size: 15.5px; }
.solucao .btn { margin-top: auto; align-self: flex-start; }

/* Linha do tempo de presidentes */
.presidentes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.presidente { text-align: center; }

.presidente img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio-card);
  margin-bottom: 12px;
  background: var(--cinza-200);
}

.presidente strong { display: block; font-size: 15px; line-height: 1.3; }
.presidente span { display: block; font-size: 13px; color: var(--texto-suave); margin-top: 4px; }

/* Grade de diretores */
.diretores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}

.diretor {
  background: #fff;
  border: 1px solid var(--cinza-200);
  border-radius: var(--raio-card);
  overflow: hidden;
  text-align: center;
  transition: box-shadow var(--transicao), transform var(--transicao);
}

.diretor:hover { box-shadow: var(--sombra-media); transform: translateY(-4px); }

.diretor__foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--cinza-200);
  display: block;
}

.diretor__corpo { padding: 20px 16px 24px; }
.diretor__cargo {
  display: block;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--azul);
  margin-bottom: 6px;
}

.diretor__nome { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.diretor__empresa { font-size: 14px; color: var(--texto-suave); }

.diretor__links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.diretor__links a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cinza-100);
  color: var(--texto-suave);
}

.diretor__links a:hover { background: var(--azul); color: #fff; }
.diretor__links svg { width: 16px; height: 16px; }

/* Cartão de contato */
.contato-grade {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.contato-info { display: grid; gap: 20px; }

.contato-info__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contato-info__icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--azul-claro);
  color: var(--azul);
}

.contato-info__icone svg { width: 20px; height: 20px; }
.contato-info__rotulo { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.contato-info__valor { font-size: 16.5px; font-weight: 500; }

.contato-mapa {
  border-radius: var(--raio-card);
  overflow: hidden;
  margin-top: 48px;
  line-height: 0;
}

.contato-mapa iframe { width: 100%; height: 380px; border: 0; }

/* Tabela de feriados */
.tabela-feriados { font-size: 16px; }
.tabela-feriados th,
.tabela-feriados td { padding: 14px 16px; border-bottom: 1px solid var(--cinza-200); text-align: left; }
.tabela-feriados thead th { background: var(--cinza-100); font-weight: 700; }
.tabela-feriados tbody tr:hover { background: var(--cinza-50); }

/* Responsivo */
@media (max-width: 1024px) {
  .solucoes { grid-template-columns: 1fr; }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .presidentes { grid-template-columns: repeat(3, 1fr); }
  .diretores { grid-template-columns: repeat(3, 1fr); }
  .contato-grade { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .lista-check--2 { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; }
  .presidentes { grid-template-columns: repeat(2, 1fr); }
  .diretores { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .bloco--azul, .bloco--verde, .bloco--destaque { padding: 28px 20px; }
  .solucao { padding: 22px; }
  .bloco { margin-bottom: 40px; }
}

/* =====================================================================
   Blocos que reproduzem o layout das páginas internas do site original
   ===================================================================== */

/* ---------------------------------------------------------------------
   Bloco de abertura: ilustração + texto lado a lado.
   É assim que todas as páginas internas começam no site original.
   --------------------------------------------------------------------- */

.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 72px;
}

.intro--texto-esquerda .intro__imagem { order: 2; }

.intro__imagem img {
  width: 100%;
  height: auto;
  border-radius: var(--raio-card);
}

.intro__texto h1,
.intro__texto :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) {
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin-bottom: 12px;
}

.intro__texto :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--azul);
  margin-bottom: 20px;
}

.intro__texto p { font-size: 16px; line-height: 1.44; }
.intro__texto .btn { margin-top: 12px; }

/* Variante em coluna única, com a imagem acima do texto */
.intro--empilhada {
  grid-template-columns: 1fr;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  gap: 32px;
}

.intro--empilhada .intro__imagem img { max-width: 420px; margin-inline: auto; }

/* ---------------------------------------------------------------------
   Banner de topo em largura total (Cidade de Poá, Feriados)
   --------------------------------------------------------------------- */

.banner-pagina {
  margin-bottom: 56px;
  border-radius: var(--raio-card);
  overflow: hidden;
  line-height: 0;
}

.banner-pagina img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}

/* ---------------------------------------------------------------------
   Galeria de fotos (Auditório)
   --------------------------------------------------------------------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.galeria a {
  display: block;
  border-radius: var(--raio);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cinza-200);
}

.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.galeria a:hover img { transform: scale(1.06); }

/* ---------------------------------------------------------------------
   Linha do tempo dos presidentes (Acipoá)
   Medidas conferidas no site original: itens de 312px, cartões de 538px
   alternados e marcos de 34px sobre uma linha central de 3px.
   --------------------------------------------------------------------- */

.linha-tempo { position: relative; }

.linha-tempo::before {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ccc;
}

.linha-tempo__progresso {
  position: absolute;
  left: 50%;
  margin-left: -1.5px;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--verde);
  z-index: 1;
  transition: height 120ms linear;
}

.linha-tempo__item { position: relative; min-height: 312px; }

.linha-tempo__cartao {
  width: 538px;
  max-width: calc(50% - 32px);
  min-height: 312px;
  padding: 20px;
  background: #f1f1f1;
  border-radius: 30px;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.linha-tempo__item.esta-visivel .linha-tempo__cartao { opacity: 1; transform: none; }

.linha-tempo__item:nth-child(even) .linha-tempo__cartao { margin-right: auto; }
.linha-tempo__item:nth-child(odd) .linha-tempo__cartao { margin-left: auto; }

.linha-tempo__cartao img {
  width: 144px;
  height: 217px;
  object-fit: cover;
  margin: 0 auto 14px;
  background: var(--cinza-200);
}

.linha-tempo__nome {
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
  color: var(--escuro-2);
  margin: 0;
}

.linha-tempo__marco {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--escuro-2);
  color: #fff;
  z-index: 2;
}

.linha-tempo__marco svg { width: 18px; height: 18px; }
.linha-tempo__item.esta-marcado .linha-tempo__marco { background: var(--verde); }

.linha-tempo__ano {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: var(--verde);
  z-index: 2;
}

.linha-tempo__item:nth-child(even) .linha-tempo__ano { left: calc(50% + 33px); }
.linha-tempo__item:nth-child(odd) .linha-tempo__ano { right: calc(50% + 33px); }

@media (max-width: 768px) {
  .linha-tempo::before,
  .linha-tempo__progresso { left: 17px; }
  .linha-tempo__item { min-height: 0; margin-bottom: 24px; }

  .linha-tempo__cartao,
  .linha-tempo__item:nth-child(odd) .linha-tempo__cartao,
  .linha-tempo__item:nth-child(even) .linha-tempo__cartao {
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0 0 0 56px;
  }

  .linha-tempo__marco { left: 17px; top: 40px; }

  .linha-tempo__item:nth-child(odd) .linha-tempo__ano,
  .linha-tempo__item:nth-child(even) .linha-tempo__ano {
    left: 56px;
    right: auto;
    top: 8px;
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   Título de página, quando não há bloco de abertura com imagem
   --------------------------------------------------------------------- */

.titulo-pagina {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 56px;
}

.titulo-pagina h1 { font-size: var(--fs-h2); margin-bottom: 12px; }
.titulo-pagina :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { font-size: var(--fs-h3); font-weight: 500; color: var(--azul); margin-bottom: 18px; }
.titulo-pagina p { font-size: 16px; line-height: 1.44; color: var(--texto-suave); }

/* ---------------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .intro { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
  .intro--texto-esquerda .intro__imagem { order: 0; }
  .intro__imagem img { max-width: 460px; margin-inline: auto; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .linha-tempo::before { left: 17px; }
  .linha-tempo__item,
  .linha-tempo__item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding-left: 50px;
    padding-right: 0;
  }
  .linha-tempo__marco,
  .linha-tempo__item:nth-child(even) .linha-tempo__marco { left: 0; right: auto; }
  .linha-tempo__item:nth-child(odd) .linha-tempo__cartao { flex-direction: row; text-align: left; }
  .galeria { grid-template-columns: 1fr; }
  .banner-pagina img { max-height: 220px; }
}

/* O cargo do diretor é um título, mas visualmente é uma linha de apoio.
   As medidas do original estão em .diretor__cargo, mais abaixo. */
:is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)).diretor__cargo {
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  margin: 0;
}

/* =====================================================================
   Tipografia das páginas internas
   Valores medidos no site original: H2 34/32 peso 700 e H3 24/24 peso 700,
   ambos em #051B3A — e não no azul da marca.
   ===================================================================== */

.pagina h1,
.pagina :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) {
  font-size: 34px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--escuro-2);
}

.pagina :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--escuro-2);
}

.pagina :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) {
  font-size: 20px;
  font-weight: 500;
  color: var(--texto-suave);
}

/* Dentro dos blocos coloridos o texto é branco */
.pagina .bloco--azul h1, .pagina .bloco--azul :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.pagina .bloco--azul :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)), .pagina .bloco--azul :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)),
.pagina .bloco--verde h1, .pagina .bloco--verde :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.pagina .bloco--verde :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)), .pagina .bloco--verde :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) { color: #fff; }

.pagina .bloco--azul .btn--amarelo,
.pagina .bloco--verde .btn--amarelo { background: var(--escuro-2); color: #fff; }

.pagina .bloco--azul .btn--amarelo:hover,
.pagina .bloco--verde .btn--amarelo:hover { background: var(--escuro); color: #fff; }

/* O subtítulo do bloco de abertura acompanha o título, sem o azul */
.intro__texto :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) {
  font-size: 24px;
  font-weight: 700;
  color: var(--escuro-2);
  margin-bottom: 20px;
}

/* Rótulos que continuam em azul */
/* o cargo do original é branco, 16px — ver .diretor__cargo */
.pagina .solucao :is(h5:where(:not([class*="nivel-"])), :where(.nivel-5)) { color: var(--azul); }
.pagina .titulo-pagina :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { color: var(--azul); font-weight: 500; font-size: 24px; }

/* =====================================================================
   Bloco de abertura escuro

   Sete páginas do site original abrem com uma faixa escura de ponta a
   ponta, com as diagonais da bandeira no canto superior esquerdo.
   O bloco sangra para fora do container mantendo o texto alinhado.
   ===================================================================== */

.abertura {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: 104px;
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter)));
  background: var(--escuro) url('/uploads/2025/01/A-01-Cipoa.png') top left no-repeat;
  color: #fff;
  margin-bottom: 72px;
}

/* A página Acipoá usa o azul-marinho mais claro */
.abertura--marinho { background-color: var(--escuro-2); }

/* Anula o respiro do topo: a faixa já encosta na navegação */
.pagina > .container > .abertura:first-child { margin-top: calc(var(--secao-y) * -1); }

.abertura .intro,
.abertura .titulo-pagina { margin-bottom: 0; }

.abertura h1,
.abertura :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.abertura :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.abertura :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)),
.pagina .abertura h1,
.pagina .abertura :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.pagina .abertura :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.pagina .abertura :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) { color: #fff; }

.abertura p,
.abertura li,
.abertura .titulo-pagina p { color: rgba(255, 255, 255, 0.92); }

/* Nessas seções o botão principal é verde, como no original */
.abertura .btn--azul { background: var(--verde); }
.abertura .btn--azul:hover { background: var(--verde-fundo); }

/* Proporção das colunas medida no site original: 441px + 20px + 679px */
.abertura .intro {
  grid-template-columns: 441fr 679fr;
  gap: 20px;
  margin-bottom: 0;
}

.abertura .intro__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.abertura .intro__texto > * { margin: 0; }
.abertura .intro__texto h1 { font-size: 34px; line-height: 32px; }
.abertura .intro__texto p + .btn { margin-top: 20px; }

@media (max-width: 768px) {
  .abertura .intro { grid-template-columns: 1fr; }

  .abertura {
    padding-block: 48px;
    margin-bottom: 48px;
    background-size: 220px auto;
  }
}

/* ---------------------------------------------------------------------
   Página Acipoá
   A foto e as faixas vêm do fundo da seção, como no site original.
   --------------------------------------------------------------------- */

.abertura--acipoa {
  padding-block: 80px;
  background-image: url('/uploads/2025/02/B-2-1Bg-acipoa.png');
  background-position: top left;
  background-size: auto;
  margin-bottom: 0;
}

.abertura--acipoa > * + * { margin-top: 20px; }
.abertura--acipoa .duas-colunas { gap: 20px; }

/* Ritmo vertical do texto de abertura, medido no original */
.abertura--acipoa h1 { font-size: 34px; line-height: 32px; margin-bottom: 20px; }
.abertura--acipoa .duas-colunas p { margin-bottom: 20px; }

.duas-colunas--texto-direita { align-items: start; }

/* Cartões verdes de missão, visão e valores */
/* As duas colunas de cartões ficam recuadas 20px e com a mesma altura */
.duas-colunas--cartoes {
  align-items: stretch;
  padding-inline: 20px;
}

/* No original o preenchimento dos cartões é de 20px. */
.cartao-verde {
  padding: 20px;
  border-radius: var(--raio-card);
  background: linear-gradient(var(--verde), #017c41);
  color: #fff;
  text-align: center;
}

/* O bloco do ícone tem 110px de altura no original (o glifo ocupa 100px). */
.cartao-verde__icone { display: block; height: 110px; margin: 0 auto 48px; }

.cartao-verde :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) {
  font-size: 34px;
  line-height: 32px;
  color: #fff;
  margin-bottom: 20px;
}

.cartao-verde p {
  font-size: 16px;
  line-height: 23px;
  color: #fff;
  margin-bottom: 16px;
}

.cartao-verde p:last-child { margin-bottom: 20px; }
.cartao-verde strong { color: #fff; }

.cartao-verde--valores {
  width: 560px;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}

.cartao-verde--valores :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { text-align: center; }
.cartao-verde--valores .cartao-verde__icone { margin-inline: auto; }

/* Faixa de foto que fecha a seção escura, com a curva branca embaixo */
.faixa-foto {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: 300px;
  background: center / cover no-repeat;
  overflow: hidden;
}

.faixa-foto--drone { background-image: url('/uploads/2025/02/A-2-Bg-Acipoa-drone.png'); }

.faixa-foto::after {
  content: '';
  position: absolute;
  inset: auto -10% -34px;
  height: 60px;
  background: var(--branco);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* Nesta página os títulos de seção são azuis e menores, como no original */
.pagina :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)).titulo-azul {
  font-size: 24px;
  line-height: 1.15;
  color: var(--azul);
}

/* Seção de fundo cinza (linha do tempo dos presidentes) */
.bloco--cinza {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter)));
  padding-block: 72px;
  background: #e9e9e9;
}

@media (max-width: 768px) {
  .abertura--acipoa { padding-block: 48px; background-size: 260px auto; }
  .cartao-verde :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { font-size: 28px; }
  .faixa-foto { height: 180px; }
}


/* ---------------------------------------------------------------------
   Decoração e curva do bloco de abertura, como no site original:
   faixas no topo à esquerda, grafismos embaixo à direita e uma curva de
   44px fechando a seção.
   --------------------------------------------------------------------- */

.abertura { position: relative; margin-bottom: 0; }
.abertura > * { position: relative; z-index: 1; }

.abertura::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/uploads/2025/01/A-02-Cipoa.png') bottom right no-repeat;
  pointer-events: none;
}

.abertura::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 44px;
  background: var(--branco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Em Associados o original não usa os grafismos do canto inferior */
.abertura--sem-grafismo::before { content: none; }

/* Associe-se e Diretores fecham com a curva verde */
.abertura--curva-verde::after { background: var(--verde); }

/* Acipoá tem fundo próprio e termina na faixa de foto, sem curva */
.abertura--acipoa::before,
.abertura--acipoa::after { content: none; }

/* ---------------------------------------------------------------------
   Diretoria: no original os cartões são azul-marinho sobre fundo verde,
   dois por linha, com foto e cantos de 30px.
   --------------------------------------------------------------------- */

.pagina .bloco--diretores {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 50px 80px;
  background: var(--verde);
}

/* Presidência: dois cartões de 389px centralizados.
   Demais integrantes: grade de três colunas de 367px. */
.diretores {
  grid-template-columns: repeat(3, 367px);
  justify-content: center;
  gap: 20px;
}

.diretores.diretores--presidencia {
  grid-template-columns: repeat(2, 389px);
  margin-bottom: 30px;
}

.diretor {
  background: var(--escuro-2);
  border: 0;
  border-radius: 30px;
  padding: 20px;
  overflow: visible;
  text-align: center;
}

.diretor:hover { box-shadow: none; transform: none; }

.diretor__foto {
  width: 100%;
  aspect-ratio: 349 / 523;
  object-fit: cover;
  border-radius: 30px;
  background: #fff;
}

.diretor__foto--vazia { display: grid; place-items: center; color: var(--cinza-500); }

.diretor__corpo { padding: 15px 0 0; }

.pagina .diretor__nome,
.diretor__nome {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 5px;
}

.pagina .diretor__cargo,
.diretor__cargo {
  font-size: 16px;
  line-height: 23px;
  font-weight: 400;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.diretor__divisor {
  display: block;
  height: 0;
  border-top: 3px solid var(--azul);
  margin: 15px 0;
}

.diretor__links {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 23px;
  color: #fff;
}

.diretor__links li { margin: 0 0 5px; }
.diretor__links li:last-child { margin-bottom: 0; }

.diretor__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
}

.diretor__links a:hover { color: var(--amarelo); background: none; }
.diretor__links svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 1200px) {
  .diretores { grid-template-columns: repeat(2, 367px); }
}

@media (max-width: 820px) {
  .diretores,
  .diretores--presidencia { grid-template-columns: minmax(0, 389px); }
}

/* O texto de abertura desta página ocupa uma coluna estreita e centralizada */
.abertura--curva-verde .titulo-pagina {
  width: 770px;
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

@media (max-width: 900px) {
  .diretores { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Título de página fora do bloco escuro (Contato, Busca): azul, alinhado
   à esquerda e ocupando a largura toda, como no original.
   --------------------------------------------------------------------- */

.pagina > .container > .titulo-pagina {
  max-width: none;
  text-align: left;
  margin: 0 0 40px;
}

.pagina > .container > .titulo-pagina:first-child {
  margin-top: calc(40px - var(--secao-y));
}

.pagina > .container > .titulo-pagina h1 {
  font-size: 34px;
  line-height: 32px;
  color: var(--azul);
  margin-bottom: 20px;
}

.pagina > .container > .titulo-pagina :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 20px;
}

.pagina > .container > .titulo-pagina p {
  color: var(--texto);
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------
   Contato: cartão azul-marinho à esquerda e formulário em caixa cinza,
   como no site original (535×613 e 565×656, colunas iguais com 20px).
   --------------------------------------------------------------------- */

.contato-grade {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contato-cartao {
  background: var(--escuro-2);
  border-radius: 24px;
  padding: 40px;
  color: #fff;
}

.contato-cartao img { display: block; margin-inline: auto; }
.pagina .contato-cartao :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { font-size: 24px; line-height: 24px; color: #fff; }

.contato-cartao .contato-info__rotulo { color: rgba(255, 255, 255, 0.7); }
.contato-cartao .contato-info__valor,
.contato-cartao .contato-info__valor a { color: #fff; }
.contato-cartao .contato-info__valor a:hover { color: var(--amarelo); }
.contato-cartao .contato-info__icone { background: rgba(255, 255, 255, 0.12); color: #fff; }

.contato-grade .card {
  background: rgba(1, 11, 25, 0.05);
  border: 0;
  box-shadow: none;
  border-radius: 20px;
  padding: 20px;
}

.contato-grade .card .btn {
  border-radius: 15px;
  padding: 14px 20px;
  font-size: 16px;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .contato-grade { grid-template-columns: 1fr; }
  .contato-cartao { padding: 24px; }
}

/* ---------------------------------------------------------------------
   Páginas de serviço: faixa escura com cartão verde, faixa verde com
   cartão azul-marinho e chamada final escura — como no site original.
   Cartões com 798px, raio 24px e 40px de respiro.
   --------------------------------------------------------------------- */

.faixa {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 80px;
  padding-inline: max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter)));
  margin-bottom: 0;
}

.faixa--escura {
  background:
    url('/uploads/2025/01/A-01-Cipoa.png') top left no-repeat,
    url('/uploads/2025/01/A-02-Cipoa.png') bottom right no-repeat,
    var(--escuro);
  color: #fff;
}

.faixa--verde { background: var(--verde); }

.faixa > * { position: relative; z-index: 1; }

.cartao-verde--largo,
.cartao-marinho {
  width: 798px;
  max-width: 100%;
  margin-inline: auto;
  padding: 40px;
  border-radius: 24px;
  text-align: left;
}

.cartao-marinho {
  background: var(--escuro-2);
  color: #fff;
}

.pagina .cartao-verde--largo h1, .pagina .cartao-verde--largo :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.pagina .cartao-verde--largo :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)), .pagina .cartao-verde--largo :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)),
.pagina .cartao-marinho h1, .pagina .cartao-marinho :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.pagina .cartao-marinho :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)), .pagina .cartao-marinho :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) {
  line-height: 1.15;
  color: #fff;
  text-align: left;
  margin-bottom: 24px;
}

/* O original mantém a escala das tags: H2 com 34px e H3/H4 com 24px. */
.pagina .cartao-verde--largo h1, .pagina .cartao-verde--largo :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.pagina .cartao-marinho h1, .pagina .cartao-marinho :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) { font-size: 34px; line-height: 32px; }

.pagina .cartao-verde--largo :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)), .pagina .cartao-verde--largo :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)),
.pagina .cartao-marinho :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)), .pagina .cartao-marinho :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) { font-size: 24px; }

.cartao-verde--largo p,
.cartao-marinho p,
.cartao-verde--largo li,
.cartao-marinho li { color: #fff; }

.cartao-verde--largo .btn:not([class*="btn--"]),
.cartao-marinho .btn:not([class*="btn--"]) { background: var(--azul); color: #fff; }

.cartao-verde--largo .btn:not([class*="btn--"]):hover,
.cartao-marinho .btn:not([class*="btn--"]):hover { background: var(--azul-escuro, #0b8ac6); color: #fff; }

/* Chamada final em faixa escura, com título e botão centralizados */
.faixa--chamada { padding-block: 70px; text-align: center; }
.pagina .faixa--chamada h1, .pagina .faixa--chamada :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.pagina .faixa--chamada :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) {
  font-size: 24px;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 20px;
}
.faixa--chamada p { color: #fff; margin-bottom: 20px; }
.faixa--chamada .btn { background: var(--azul); color: #fff; }

/* Passo a passo numerado */
.passos {
  list-style: none;
  counter-reset: passo;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.passos li {
  counter-increment: passo;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 12px 20px 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 16px;
  line-height: 1.44;
}

.passos li::before {
  content: counter(passo);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  color: var(--escuro-2);
  font-size: 28px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .faixa { padding-block: 48px; }
  .cartao-verde--largo,
  .cartao-marinho { padding: 24px; }
}


/* ---------------------------------------------------------------------
   Curvas entre as faixas, com as mesmas medidas do original:
   26px no topo da faixa escura e 44px na passagem para a faixa verde.
   --------------------------------------------------------------------- */

.faixa--escura::before,
.faixa--escura::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  z-index: 2;
  pointer-events: none;
}

.faixa--escura::before {
  top: 0;
  height: 26px;
  background: var(--branco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.faixa--verde + .faixa--escura::before { background: var(--verde); }

.faixa--escura:has(+ .faixa--verde)::after {
  bottom: 0;
  height: 44px;
  background: var(--verde);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.cartao-marinho__figura {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}

/* Cartões de solução dentro das faixas coloridas */
.faixa--escura .solucoes,
.cartao-marinho .solucoes {
  width: 798px;
  max-width: 100%;
  margin-inline: auto;
}

.cartao-marinho .solucoes { width: auto; }

.faixa--escura .solucao {
  padding: 32px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(var(--verde), #017c41);
  color: #fff;
}

.cartao-marinho .solucao {
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.faixa--escura .solucao h1, .faixa--escura .solucao :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.faixa--escura .solucao :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)), .faixa--escura .solucao :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)),
.faixa--escura .solucao :is(h5:where(:not([class*="nivel-"])), :where(.nivel-5)),
.cartao-marinho .solucao h1, .cartao-marinho .solucao :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.cartao-marinho .solucao :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)), .cartao-marinho .solucao :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)),
.cartao-marinho .solucao :is(h5:where(:not([class*="nivel-"])), :where(.nivel-5)) { color: #fff; }

.faixa--escura .solucao p, .faixa--escura .solucao li,
.cartao-marinho .solucao p, .cartao-marinho .solucao li { color: #fff; }

.faixa--escura .solucao .btn,
.cartao-marinho .solucao .btn { background: var(--azul); color: #fff; }

/* Títulos e subtítulos que ficam soltos sobre a faixa escura */
.pagina .faixa--escura > h1, .pagina .faixa--escura > :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)),
.pagina .faixa--escura > :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)), .pagina .faixa--escura > :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) { color: #fff; }
.faixa--escura > p { color: rgba(255, 255, 255, 0.92); }

/* ---------------------------------------------------------------------
   Notícia: data acima do título e imagens do texto alinhadas à esquerda,
   como no site original.
   --------------------------------------------------------------------- */

.noticia-topo__data {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--texto-suave);
  margin-bottom: 20px;
}

.noticia-topo__data svg { width: 14px; height: 14px; fill: currentColor; }

.pagina .noticia-topo h1 {
  font-size: 34px;
  line-height: 32px;
  color: var(--escuro-2);
  margin-bottom: 24px;
}

.conteudo img { max-width: 100%; height: auto; }

/* As imagens do texto acompanham o conteúdo pela esquerda */
.conteudo > img,
.conteudo p > img:only-child {
  float: left;
  margin: 4px 24px 12px 0;
}

/* Parágrafos vazios vindos do editor não ocupam espaço */
.conteudo p:empty { display: none; }

.conteudo::after { content: ''; display: block; clear: both; }

@media (max-width: 640px) {
  .conteudo > img,
  .conteudo p > img:only-child { float: none; margin: 0 0 16px; }
}

/* ---------------------------------------------------------------------
   Página do associado: abertura escura com a categoria em pílula verde,
   logo em caixa cinza e nome em branco, como no site original.
   --------------------------------------------------------------------- */

.abertura--empresa {
  padding-block: 100px 80px;
  text-align: center;
}

.empresa-categoria { margin: 0 0 20px; }

.empresa-categoria a {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 20px;
  background: var(--verde);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.empresa-categoria a:hover { background: #017c41; color: #fff; }

.empresa-logo {
  display: grid;
  place-items: center;
  width: 741px;
  max-width: 100%;
  min-height: 210px;
  margin: 0 auto 20px;
  border-radius: 20px;
  background: #ececec;
  color: var(--cinza-500);
}

.empresa-logo img { width: 150px; height: 150px; object-fit: contain; }

.pagina .abertura--empresa .empresa-nome {
  font-size: 36px;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 20px;
}

.abertura--empresa .empresa-acoes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.empresa-descricao {
  margin: 48px 0 32px;
  font-size: 16px;
  line-height: 1.44;
}

/* Barra de título das seções internas do associado */
.pagina :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)).barra-secao {
  margin: 32px 0 24px;
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--escuro-2);
  color: #fff;
  font-size: 20px;
  line-height: 1.2;
}

.empresa-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
}

.empresa-info dl { margin: 0; }
.empresa-info dl > div { display: flex; gap: 6px; margin-bottom: 6px; }
.empresa-info dt { font-weight: 700; }
.empresa-info dd { margin: 0; }
.empresa-info__vazio { color: var(--texto-suave); }

.empresa-vazio { text-align: center; color: var(--texto-suave); margin: 24px 0 32px; }

@media (max-width: 768px) {
  .empresa-info { grid-template-columns: 1fr; }
  .abertura--empresa { padding-block: 56px 48px; }
  .empresa-logo { min-height: 160px; }
}

/* ---------------------------------------------------------------------
   Página da vaga: faixa verde com o título em caixa cinza e barras de
   seção verdes, como no site original.
   --------------------------------------------------------------------- */

.abertura--vaga {
  padding-block: 100px;
  background: var(--verde) url('/uploads/2025/01/A-01-Cipoa.png') top left no-repeat;
}

.abertura--vaga::before { content: none; }

.vaga-cartao {
  width: 741px;
  max-width: 100%;
  margin-inline: auto;
  padding: 30px 20px;
  border-radius: 20px;
  background: #ececec;
  text-align: center;
}

.pagina .vaga-cartao h1 {
  font-size: 34px;
  line-height: 32px;
  color: var(--escuro-2);
  margin-bottom: 0;
}

.vaga-cartao__empresa { margin: 10px 0 0; font-size: 16px; color: var(--texto-suave); }

.pagina :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)).barra-secao--verde {
  background: var(--verde);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 20px;
}

/* Formulário da busca no site */
.busca-form {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 720px;
  margin: 40px auto 48px;
}

.busca-form .campo { flex: 1; margin: 0; position: relative; }

.busca-form .entrada { padding-right: 44px; }

.busca-form .campo > svg {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--texto-suave);
  pointer-events: none;
}

@media (max-width: 560px) {
  .busca-form { flex-direction: column; }
  .busca-form .btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   Página "A Cidade de Poá" — no original a foto ocupa a largura toda
   (1512×360) e o texto corre em uma coluna de 1004px.
   --------------------------------------------------------------------- */

.pagina > .container > .banner-pagina--largo,
.banner-pagina--largo {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: calc(-1 * var(--secao-y));
  margin-bottom: 104px;
  border-radius: 0;
}

.banner-pagina--largo img { height: 360px; max-height: none; }

.texto-corrido {
  width: 1004px;
  max-width: 100%;
  margin-inline: auto;
  font-size: 16px;
  line-height: 23px;
  color: #000;
}

.texto-corrido h1 { margin-bottom: 20px; }
.texto-corrido p { margin: 0 0 20px; }
.texto-corrido ul { margin: 0 0 20px; padding-left: 20px; }
.texto-corrido li { margin: 0; }

@media (max-width: 768px) {
  .banner-pagina--largo img { height: 220px; }
}

/* ---------------------------------------------------------------------
   Páginas de serviço — medidas conferidas no original.
   O conteúdo corre numa coluna de 1004px; a abertura tem a imagem em
   388px e o texto em 596px, com 20px entre elas.
   --------------------------------------------------------------------- */

.pagina > .container > .intro,
.faixa > .intro {
  width: 1004px;
  max-width: 100%;
  margin-inline: auto;
  grid-template-columns: 388px 596px;
  gap: 20px;
  margin-bottom: 80px;
}

.intro__imagem img { border-radius: 0; }

.pagina .intro__texto h1,
.intro__texto h1 {
  font-size: 36px;
  line-height: 1.11;
  color: var(--escuro);
  margin-bottom: 8px;
}

.pagina .intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.pagina .intro__texto :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.intro__texto :is(h2:where(:not([class*="nivel-"])), :where(.nivel-2)) + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) {
  font-weight: 700;
  color: var(--escuro);
  margin-bottom: 20px;
}

/* Páginas em que o título da abertura tem 34px, e não os 36px padrão. */
.pagina .intro--titulo-medio .intro__texto h1,
.intro--titulo-medio .intro__texto h1 { font-size: 34px; line-height: 32px; }

/* Algumas páginas trazem o subtítulo da abertura em 34px (Boa Vista SCPC). */
.pagina .intro--subtitulo-grande .intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.intro--subtitulo-grande .intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) { font-size: 34px; line-height: 32px; }

/* O subtítulo das faixas internas tem 20px no original. O título segue o
   nível da tag (H2 = 34px, H3 = 24px), porque o original alterna os dois. */
.pagina .faixa :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)),
.faixa :is(h4:where(:not([class*="nivel-"])), :where(.nivel-4)) { font-size: 20px; line-height: 24px; }

@media (max-width: 1024px) {
  .intro { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .intro { grid-template-columns: 1fr; }
}

/* As colunas fixas do bloco de abertura (388px + 596px) precisam ceder no
   mobile — sem isto a página rola na horizontal e o Google, que indexa a
   versão mobile, vê o conteúdo cortado. */
@media (max-width: 1023px) {
  .pagina > .container > .intro,
  .faixa > .intro {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pagina > .container > .intro .intro__imagem img,
  .faixa > .intro .intro__imagem img { max-width: 460px; margin-inline: auto; }
}

/* ---------------------------------------------------------------------
   Cartões de solução das páginas de serviço — medidas do original:
   dois cartões de 550px com 40px de preenchimento e blocos internos
   em branco 18% com cantos de 20px.
   --------------------------------------------------------------------- */

.solucoes {
  grid-template-columns: repeat(2, 550px);
  justify-content: center;
  gap: 40px;
}

.faixa--escura .solucao,
.solucao { padding: 40px; gap: 0; }

.pagina .solucao :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.solucao :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

.pagina .solucao :is(h5:where(:not([class*="nivel-"])), :where(.nivel-5)),
.solucao :is(h5:where(:not([class*="nivel-"])), :where(.nivel-5)) {
  /* medido no original: 20px, peso 500, entrelinha 20px */
  font-size: 20px;
  line-height: 20px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 20px 20px 0 0;
  padding: 15px 15px 0;
  margin: 0;
}

.solucao :is(h5:where(:not([class*="nivel-"])), :where(.nivel-5)) + p,
.solucao :is(h5:where(:not([class*="nivel-"])), :where(.nivel-5)) + ul {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 0 0 20px 20px;
  padding: 0 15px 15px;
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 23px;
}

.solucao .lista-check { margin: 0 0 20px; }
.solucao .lista-check li { font-size: 16px; line-height: 23px; }
.solucao .btn { margin-top: auto; align-self: flex-start; padding: 18px; }

@media (max-width: 1200px) {
  .solucoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .solucoes { grid-template-columns: 1fr; }
  .faixa--escura .solucao,
  .solucao { padding: 24px; }
}

/* Dentro das aberturas escuras o título continua branco (a regra das
   páginas de serviço acima vale só para fundo claro) e o subtítulo tem
   24px, não os 34px das páginas de serviço. */
.pagina .abertura .intro__texto h1 { font-size: 34px; line-height: 32px; }

.abertura .intro__texto h1,
.pagina .abertura .intro__texto h1,
.abertura .intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.pagina .abertura .intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) { color: #fff; }

.pagina .abertura .intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)),
.abertura .intro__texto h1 + :is(h3:where(:not([class*="nivel-"])), :where(.nivel-3)) {
  font-size: 24px;
  line-height: 24px;
  margin-bottom: 0;
}

/* No original a data e o título ocupam a mesma largura do texto e o
   espaçamento acima do topo é menor. */
.pagina .noticia-topo { max-width: none; margin-inline: 0; }

.pagina > .container > .noticia-topo:first-child {
  margin-top: calc(43px - var(--secao-y));
}

.noticia-topo__data { font-size: 16px; color: var(--escuro-2); margin-bottom: 8px; }
.noticia-topo__data svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   Botão vermelho do YouTube (ACIPOÁcast), na cor do original.
   --------------------------------------------------------------------- */

.btn--vermelho { background: #ff0033; color: #fff; }
.btn--vermelho:hover { background: #d60029; color: #fff; }

.pagina .cartao-verde--largo .btn--vermelho,
.pagina .cartao-marinho .btn--vermelho { background: #ff0033; color: #fff; }

/* Nos cartões largos o ícone fica à esquerda, acima do título, em amarelo. */
.cartao-verde--largo .cartao-verde__icone,
.cartao-marinho .cartao-verde__icone {
  margin: 0 0 20px;
  height: auto;
  color: var(--amarelo);
}

.cartao-marinho__figura {
  width: 100%;
  height: auto;
  border-radius: 16px;
  margin-bottom: 20px;
}

/* Galeria de quatro colunas do auditório: 279×186 com 8px de gap. */
.galeria--4 { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 40px; }
.galeria--4 a { border-radius: 12px; }

@media (max-width: 900px) { .galeria--4 { grid-template-columns: repeat(2, 1fr); } }

/* Dois botões nas pontas do cartão marinho (Banco de Currículos). */
.cartao-marinho__acoes {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
}

/* Título grande dentro dos cartões (36px), abaixo de um rótulo de 24px. */
.pagina .faixa .titulo-destaque,
.pagina .cartao-marinho .titulo-destaque,
.pagina .cartao-verde--largo .titulo-destaque,
.pagina .titulo-destaque,
.titulo-destaque {
  font-size: 36px;
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
}

/* Dois cartões marinhos lado a lado (FAC). */
.cartoes-dois {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 560px));
  justify-content: center;
  gap: 20px;
  align-items: stretch;
}

.cartoes-dois .cartao-marinho {
  width: auto;
  display: flex;
  flex-direction: column;
}

.cartoes-dois .cartao-marinho > p:last-child { margin-top: auto; margin-bottom: 0; }

@media (max-width: 900px) { .cartoes-dois { grid-template-columns: 1fr; } }

/* Lista com rótulo em negrito e a descrição na linha de baixo. */
.lista-check--rotulos li { display: block; }
.lista-check--rotulos strong,
.lista-check--rotulos span { display: block; font-size: 16px; line-height: 1.4; }

/* No original o check é só o traço, sem o círculo verde, e acompanha a
   cor do texto (branco dentro dos cartões, escuro no fundo claro). */
.lista-check li::before {
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.9 439.4 7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2l-294.4 294.4c-10 10-26.2 10-36.2 0z'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.9 439.4 7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2l-294.4 294.4c-10 10-26.2 10-36.2 0z'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.lista-check li { padding-left: 28px; }

.cartao-marinho__nota { margin-top: 20px; }

/* ---------------------------------------------------------------------
   Última faixa colorida da página: encosta no rodapé e recebe a curva
   marinha de 60px, como no original (não existe respiro branco entre a
   faixa e o rodapé).
   --------------------------------------------------------------------- */

.pagina > .container > .faixa:last-child { margin-bottom: calc(-1 * var(--secao-y)); }

.faixa:last-child::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 60px;
  z-index: 2;
  pointer-events: none;
  background: var(--escuro-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Faixa escura logo depois de um bloco verde de largura total (Diretoria):
   encosta no bloco anterior e a curva de topo sai do verde, como no original. */
.faixa--apos-verde { margin-top: 0; }
.faixa--apos-verde::before { background: var(--verde); }
.bloco--diretores:has(+ .faixa--apos-verde) { margin-bottom: 0; }

/* Faixa colorida seguida de conteúdo em fundo claro: fecha com a curva
   branca, como o original faz em toda transição entre seções. */
.faixa--escura:has(+ *:not(.faixa))::after,
.faixa--verde:has(+ *:not(.faixa))::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 44px;
  z-index: 2;
  pointer-events: none;
  background: var(--branco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* =====================================================================
   Perguntas frequentes
   Faixa clara no fim da página, no mesmo ritmo das faixas coloridas: a
   faixa anterior fecha com a curva branca e esta recebe a curva marinha
   que encosta no rodapé.
   ===================================================================== */

.faixa--claro {
  background: var(--branco);
  color: var(--escuro-2);
}

/* A faixa colorida anterior precisa fechar com a curva branca, como faz
   diante de qualquer conteúdo em fundo claro. */
.faixa--escura:has(+ .faixa--claro)::after,
.faixa--verde:has(+ .faixa--claro)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 44px;
  z-index: 2;
  pointer-events: none;
  background: var(--branco);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%20preserveAspectRatio='none'%3E%3Cg%20transform='translate%280%2C100%29%20scale%281%2C-1%29'%3E%3Cpath%20d='M1000%2C4.3V0H0v4.3C0.9%2C23.1%2C126.7%2C99.2%2C500%2C100S1000%2C22.7%2C1000%2C4.3z'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}


/* Ícone no topo dos cartões de solução (Boa Vista SCPC): 72×72 em amarelo,
   17px acima do título — medidas do original. */
.pagina .solucao .cartao-verde__icone,
.solucao .cartao-verde__icone {
  width: 72px;
  height: 72px;
  margin: 0 0 17px;
  color: #fdf109;
}

/* ---------------------------------------------------------------------
   Ajustes finais de mobile — ver a mesma observação em site.css: as
   medidas fixas do original precisam ceder nas telas pequenas.
   --------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .diretores,
  .diretores.diretores--presidencia { grid-template-columns: repeat(2, minmax(0, 389px)); }
}

@media (max-width: 900px) {
  .diretores,
  .diretores.diretores--presidencia { grid-template-columns: minmax(0, 389px); }
}

/* Tabelas largas rolam dentro do próprio contêiner, nunca a página. */
.tabela-rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabela-rolagem > table { min-width: 420px; }