/* =========================================================================
   Componentes das páginas — home, blog, post, equipe, perfil, áreas, sobre
   e contato. Carregado depois de styles.css; usa os mesmos tokens de :root.
   ========================================================================= */

/* O cabeçalho é fixo: quem compensa a altura dele é `.pagina`. */
.pagina { padding-top: var(--header-h); }

/* -------------------------------- Migalhas -------------------------------
   Vêm ANTES do <main>, então precisam da mesma compensação — e aí o <main>
   seguinte não pode aplicá-la de novo. */
.migalhas {
  padding-block: calc(var(--header-h) + 22px) 0;
  font-family: var(--f-display);
  font-size: 13.5px;
}
.migalhas ol { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.migalhas li { display: flex; align-items: center; gap: 10px; color: var(--c-text-muted); }
.migalhas li + li::before { content: "/"; color: #6B6977; }
.migalhas a { color: var(--c-text-body); }
.migalhas a:hover { color: var(--c-text-strong); }
.migalhas + .pagina { padding-top: 0; }

/* --------------------------- Cabeçalho da página ------------------------- */
.page-head { padding-block: clamp(40px, 5vw, 56px) clamp(28px, 3.5vw, 40px); }
.page-head__inner { display: flex; flex-direction: column; gap: 18px; }
.page-head__inner--lado {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 64px;
}
.page-head__texto { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.page-head__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--c-text-strong);
}
.page-head__title--frase {
  max-width: 880px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.08;
}
.page-head__pagina {
  font-size: .5em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-text-muted);
}
.page-head__lead {
  max-width: 640px;
  font-size: clamp(16.5px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--c-text-body);
}
.page-head__nota { font-size: 15px; color: var(--c-text-muted); white-space: nowrap; }
.page-head__acao { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ------------------------------ Busca e filtros -------------------------- */
.busca { position: relative; flex: 0 1 340px; }
.busca[hidden] { display: none; }
.busca__icone { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--c-text-muted); }
.busca input {
  width: 100%;
  height: 50px;
  padding: 0 16px 0 46px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: 16px;   /* 16 px evita o zoom automático do iOS ao focar */
}
.busca input::placeholder { color: var(--c-text-muted); }
.busca input:focus { border-color: var(--c-accent-hi); outline: none; }

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 18px;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--c-text-soft);
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.chip:hover { color: var(--c-text-strong); border-color: rgba(242, 78, 30, .5); }
.chip__n { color: var(--c-text-dim); font-variant-numeric: tabular-nums; }
.chip[aria-current="page"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 600;
}
.chip[aria-current="page"] .chip__n { color: inherit; opacity: .72; }

.chips__mais { position: relative; }
.chips__mais > summary { list-style: none; border-style: dashed; border-color: rgba(255, 255, 255, .22); }
.chips__mais > summary::-webkit-details-marker { display: none; }
.chips__mais[open] > summary svg { rotate: 180deg; }
.chips__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 240px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
}

.contagem { margin-top: 20px; font-size: 14.5px; color: var(--c-text-muted); }
.contagem:empty { display: none; }
.listagem__ponte { margin-top: 4px; font-size: 15.5px; color: var(--c-text-body); }

/* ---------------------------- Post em destaque --------------------------- */
.destaque {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 48px);
}
.destaque[hidden] { display: none; }
.destaque__media { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--c-surface-2); }
.destaque__media img { width: 100%; height: 100%; object-fit: cover; }
.destaque__corpo { display: flex; flex-direction: column; gap: 18px; }
.destaque__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-muted);
}
.destaque__selo {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(242, 78, 30, .14);
  color: #FF8A66;
  font-weight: 600;
}
.destaque__cat { font-weight: 600; }
.destaque__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.14;
  letter-spacing: -.015em;
}
.destaque__titulo a { color: var(--c-text-strong); }
.destaque__titulo a:hover { color: var(--c-accent-hi); }
.destaque__resumo { font-size: 17.5px; line-height: 1.6; color: var(--c-text-body); }
.destaque__autoria { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.destaque__autoria p { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; }
.destaque__autoria a { color: var(--c-text); font-weight: 600; }
.destaque__autoria span { color: var(--c-text-muted); }

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar--g { width: 48px; height: 48px; }

/* --------------------------------- Grade -------------------------------- */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(40px, 5vw, 60px) clamp(24px, 3vw, 36px);
  margin-block: clamp(40px, 5vw, 64px);
}
.grade--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 0; }

/* ------------------------------ Card de post ----------------------------
   Sem caixa em volta: a foto e o título já separam um card do outro. No
   hover, só a foto e a cor do título mudam (nada de sombra animada, que
   obriga o navegador a repintar o card inteiro a cada quadro). */
.post-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.post-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--c-surface-2);
  margin-bottom: 4px;
}
.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.post-card:hover .post-card__media img { transform: scale(1.03); }

.post-card__meta {
  font-family: var(--f-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text-muted);
}
.post-card__cat { font-weight: 600; }
.post-card__titulo {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}
.post-card__titulo a { color: var(--c-text); }
.post-card__titulo a:hover, .post-card:hover .post-card__titulo a { color: var(--c-accent-hi); }
.post-card__resumo { font-size: 15.5px; line-height: 1.6; color: #B9B9C3; }
.post-card__autor { font-size: 14px; }
.post-card__autor a { color: var(--c-text-muted); }
.post-card__autor a:hover { color: var(--c-text-strong); }

/* -------------------------------- Paginação ------------------------------ */
.paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(56px, 7vw, 80px);
  padding-top: 28px;
  border-top: 1px solid var(--c-line);
}
.paginacao[hidden] { display: none; }
.paginacao__status { font-size: 14.5px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.paginacao__status strong { color: var(--c-text); font-weight: 600; }
.paginacao__controles {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
}
/* A lista numerada é <ol> por semântica; os números são os do link. */
.paginacao__nums { display: flex; gap: 6px; font-variant-numeric: tabular-nums; }
.paginacao__nums a {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--c-text-soft);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.paginacao__nums a:hover { border-color: rgba(242, 78, 30, .55); background: rgba(242, 78, 30, .12); color: var(--c-text-strong); }
.paginacao__nums a[aria-current="page"] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 600;
}
.paginacao__pulo { display: grid; place-items: center; width: 28px; height: 44px; color: var(--c-text-dim); }
.paginacao__passo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding-inline: 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--c-text);
}
a.paginacao__passo:hover { border-color: rgba(242, 78, 30, .55); color: var(--c-text-strong); }
.paginacao__passo[aria-disabled="true"] { border-color: transparent; color: #5E5C68; }
.paginacao__passo--ant { margin-right: 4px; }
.paginacao__passo--prox { margin-left: 4px; }

/* ------------------------------- Estados -------------------------------- */
.estado {
  grid-column: 1 / -1;
  padding: clamp(40px, 7vw, 72px) 24px;
  border-radius: var(--raio);
  border: 1px dashed rgba(255, 255, 255, .16);
  text-align: center;
  font-size: 16px;
  color: var(--c-text-body);
}

/* =========================================================================
   Post
   ========================================================================= */
.post-cab {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-block: clamp(32px, 4vw, 44px) clamp(32px, 4vw, 48px);
}
.post-cab__cat { font-family: var(--f-display); font-weight: 600; font-size: 15px; }
.post-cab__titulo {
  max-width: 900px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--c-text-strong);
}
.post-cab__resumo {
  max-width: 760px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--c-text-muted);
}
.post-cab__autoria { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 15px; }
.post-cab__autoria > div { display: flex; flex-direction: column; gap: 3px; }
.post-cab__autor { color: var(--c-text-strong); font-weight: 600; }
.post-cab__autor:hover { color: var(--c-accent-hi); }
.post-cab__meta { color: var(--c-text-muted); }

/* A capa fica no mesmo grid do título e do texto: antes ela saía do .shell
   e herdava a margem padrão do <figure>, desalinhada de todo o resto. */
.post-hero {
  aspect-ratio: 2 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-surface-2);
}
.post-hero img { width: 100%; height: 100%; object-fit: cover; }

.post__grade {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(260px, 320px);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
  padding-top: clamp(40px, 5vw, 64px);
}
.post__principal { min-width: 0; }
.post__lado { align-self: stretch; }
.post__lado-fixo {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Corpo vindo do CMS — estilos por tag, o HTML não tem classes nossas.
   700 px a 19 px dá ~68 caracteres por linha; eram ~85 (720 px a 17 px). */
.post-body {
  font-size: 19px;
  line-height: 1.72;
  color: #D4D4DA;
}
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 {
  margin-top: 2.2em;
  font-family: var(--f-display);
  font-size: clamp(23px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-text-strong);
}
.post-body h3 { margin-top: 1.8em; font-family: var(--f-display); font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--c-text-strong); }
.post-body h4, .post-body h5, .post-body h6 { margin-top: 1.5em; font-size: 19px; font-weight: 600; color: var(--c-text-strong); }
.post-body h2 + *, .post-body h3 + * { margin-top: .7em; }
.post-body strong, .post-body b { color: var(--c-text-strong); font-weight: 600; }
.post-body__destaque { font-size: 1.08em; line-height: 1.6; color: var(--c-text-strong); }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { padding-left: .3em; }
.post-body li + li { margin-top: .6em; }
.post-body li::marker { color: var(--c-accent); }
.post-body img { width: 100%; height: auto; border-radius: var(--raio); }
.post-body figure { margin-block: 2em; }
.post-body figcaption { margin-top: .7em; font-size: 14.5px; color: var(--c-text-muted); text-align: center; }
/* Sem borda lateral colorida: a citação se distingue por escala e aspa. */
.post-body blockquote {
  position: relative;
  margin: 2em 0;
  padding-left: 1.6em;
  font-size: 1.1em;
  line-height: 1.55;
  color: var(--c-text-strong);
}
.post-body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -.08em;
  font-family: var(--f-display);
  font-size: 2.4em;
  line-height: 1;
  color: var(--c-accent);
}
.post-body a { text-decoration: underline; text-underline-offset: 3px; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.post-body th, .post-body td { padding: 10px 12px; border: 1px solid var(--c-line); text-align: left; }
.post-body pre { padding: 16px; border-radius: 10px; background: rgba(0, 0, 0, .4); font-size: 14px; }
/* Conteúdo largo não pode empurrar a página no eixo horizontal. */
.post-body table, .post-body pre { display: block; overflow-x: auto; max-width: 100%; }

/* Índice do artigo */
.indice ol { display: flex; flex-direction: column; counter-reset: none; }
.indice a {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--c-text-muted);
}
.indice a:hover { color: var(--c-text-strong); }
.indice a.is-atual, .indice a[aria-current] { color: var(--c-text-strong); font-weight: 500; }
.indice a.is-atual .indice__n { color: var(--c-accent-hi); }
.indice__n { font-family: var(--f-display); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.indice__titulo { margin-bottom: 8px; font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--c-text-muted); }

.indice--movel { display: none; margin-bottom: 28px; border-block: 1px solid var(--c-line); }
.indice--movel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
  list-style: none;
  cursor: pointer;
}
.indice--movel > summary::-webkit-details-marker { display: none; }
.indice--movel[open] > summary svg { rotate: 180deg; }
.indice--movel ol { padding-bottom: 12px; }

/* Compartilhar */
.compartilhar { display: flex; align-items: center; gap: 10px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.compartilhar__titulo { margin-right: 6px; font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--c-text-muted); }
.compartilhar__botao {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: none;
  color: var(--c-text-soft);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.compartilhar__botao:hover { border-color: rgba(242, 78, 30, .6); color: var(--c-text-strong); }
.compartilhar__botao[hidden] { display: none; }
.compartilhar__botao svg { width: 17px; height: 17px; }
.compartilhar__botao.is-copiado { border-color: #60C882; color: #A8E9C0; }

/* Contato ao lado do texto */
.lado-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--c-surface);
}
.lado-cta__titulo { font-family: var(--f-display); font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--c-text-strong); }
.lado-cta__texto { font-size: 15px; line-height: 1.55; color: var(--c-text-body); }
.lado-cta .btn { margin-top: 6px; height: 48px; }

/* Temas e autor ao pé do texto */
.post-temas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: clamp(40px, 5vw, 56px); }
.post-temas__titulo { margin-right: 8px; font-family: var(--f-display); font-size: 14px; font-weight: 600; color: var(--c-text-muted); }
.post-temas .chips { padding: 0; border: 0; }
.post-temas .chip { height: 36px; padding-inline: 14px; }

.autor-box {
  display: flex;
  gap: clamp(18px, 2.5vw, 24px);
  align-items: flex-start;
  margin-top: clamp(36px, 4vw, 48px);
  padding: clamp(22px, 3vw, 28px);
  border-radius: 16px;
  background: var(--c-surface);
}
.autor-box__foto { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: none; }
.autor-box__texto { display: flex; flex-direction: column; gap: 4px; }
.autor-box__rotulo { font-family: var(--f-display); font-size: 13.5px; color: var(--c-text-muted); }
.autor-box__nome { font-family: var(--f-display); font-size: 20px; font-weight: 600; }
.autor-box__nome a { color: var(--c-text-strong); }
.autor-box__cargo { font-size: 14.5px; color: var(--c-text-muted); }
.autor-box__bio { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--c-text-body); }
.autor-box__mais { margin-top: 10px; font-family: var(--f-display); font-size: 14.5px; font-weight: 500; }

.relacionados { margin-top: clamp(72px, 9vw, 104px); padding-top: clamp(48px, 5vw, 56px); border-top: 1px solid var(--c-line); }
.relacionados__titulo {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--c-text-strong);
}
.relacionados .grade { margin-top: 32px; margin-bottom: 0; }

/* =========================================================================
   Home
   ========================================================================= */
/* ------------------------------- Abertura --------------------------------
   Foto da equipe na tela inteira e texto centralizado sobre ela. Tudo que se
   move aqui se move uma vez, na carga, e só com transform/opacity. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(840px, 100svh);
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(64px, 9vw, 112px);
  overflow: hidden;
  isolation: isolate;
}
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  animation: hero-zoom 2.4s var(--ease) both;
}
/* Véu: escurece o topo (atrás do menu), uma área suave atrás do texto e a
   borda de baixo, que funde com o fundo da página. O meio da foto é claro
   demais para texto branco sem ele. */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 46% at 50% 70%, rgba(24,24,24,.62) 0%, rgba(24,24,24,.18) 70%, rgba(24,24,24,0) 100%),
    linear-gradient(180deg,
      rgba(24,24,24,.62) 0%,
      rgba(24,24,24,.12) 20%,
      rgba(24,24,24,0) 40%,
      rgba(24,24,24,.34) 72%,
      var(--c-bg) 100%);
}
.hero__conteudo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__titulo {
  max-width: 800px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.06;
  letter-spacing: -.04em;
  color: var(--c-text-strong);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
  animation: hero-sobe .8s var(--ease) both;
}
.hero__lead {
  max-width: 620px;
  margin-top: clamp(20px, 2.6vw, 30px);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.75;
  color: var(--c-text-strong);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .55);
  animation: hero-sobe .8s var(--ease) .18s both;
}
.hero__cta { margin-top: clamp(28px, 3.6vw, 40px); animation: hero-sobe .8s var(--ease) .32s both; }

/* Pincel laranja sob "escritório full". O SVG é um traço de 377x66; o design
   o inclina e recorta uma faixa de 385x12. A janela mantém a razão 385:12 e
   o traço lá dentro mantém 377,45:66,18, então tudo acompanha o texto. */
.pincel { position: relative; display: inline-block; white-space: nowrap; }
.pincel__recorte {
  position: absolute;
  left: 2%;
  bottom: -.06em;
  width: 100%;
  aspect-ratio: 385 / 12;
  overflow: hidden;
  pointer-events: none;
}
.pincel__traco {
  position: absolute;
  left: 0;
  top: 0;
  width: 98.04%;
  aspect-ratio: 377.45 / 66.183;
  background: var(--c-accent);
  -webkit-mask: url("/assets/underline-orange.svg") no-repeat 0 0 / 100% 100%;
          mask: url("/assets/underline-orange.svg") no-repeat 0 0 / 100% 100%;
  transform: translate(5.08%, -41.39%) matrix(0.992, 0.123, -0.510, 0.860, 0, 0);
  transform-origin: 0 0;
  animation: pincel-desenha 1.1s var(--ease) .55s both;
}

@keyframes hero-zoom { from { transform: scale(1.07); } to { transform: none; } }
@keyframes hero-sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pincel-desenha { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Texto de um lado, lista do outro */
.dupla-texto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px clamp(48px, 7vw, 96px);
  align-items: start;
}
.dupla-texto .section__title + .prose { margin-top: 22px; }
.dupla-texto--linha { padding-top: 48px; border-top: 1px solid var(--c-line); }
.dupla-texto--base { align-items: end; margin-bottom: clamp(32px, 4vw, 44px); }
.dupla-texto--base .texto-apoio { margin-top: 0; }

.passos { margin-top: 10px; border-bottom: 1px solid var(--c-line); }
.passo {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  padding-block: 24px;
  border-top: 1px solid var(--c-line);
}
.passo__n { padding-top: 3px; font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--c-accent-hi); font-variant-numeric: tabular-nums; }
.passo__titulo { font-family: var(--f-display); font-size: 21px; font-weight: 600; color: var(--c-text-strong); }
.passo p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: #B9B9C3; }

/* ------------------------------ Lista de áreas --------------------------- */
.areas-lista { border-bottom: 1px solid var(--c-line); }
.areas-lista li { border-top: 1px solid var(--c-line); }
.areas-lista__item {
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr) 24px;
  gap: 8px 32px;
  align-items: center;
  padding-block: 26px;
  color: inherit;
}
.areas-lista__nome {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 25px);
  letter-spacing: -.01em;
  color: var(--c-text-strong);
  transition: color .2s ease;
}
.areas-lista__texto { font-size: 16.5px; line-height: 1.55; color: #B9B9C3; }
.areas-lista .seta { color: var(--c-accent-hi); transition: transform .25s var(--ease); }
.areas-lista__item:hover .areas-lista__nome { color: var(--c-accent-hi); }
.areas-lista__item:hover .seta { transform: translateX(4px); }

/* Na home: duas colunas, nome em cima da descrição. */
.areas-lista--duas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  border-bottom: 0;
}
.areas-lista--duas li:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
.areas-lista--duas .areas-lista__item {
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-areas: "nome seta" "texto seta";
  padding-block: 22px;
}
.areas-lista--duas .areas-lista__nome { grid-area: nome; font-size: 21px; }
.areas-lista--duas .areas-lista__texto { grid-area: texto; font-size: 15.5px; color: var(--c-text-muted); }
.areas-lista--duas .seta { grid-area: seta; }

/* =========================================================================
   Equipe
   ========================================================================= */
.equipe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 44px 24px;
  margin-block: clamp(16px, 2vw, 24px) clamp(24px, 3vw, 40px);
}
.equipe--seis { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 20px; margin: 0; }

.pessoa { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pessoa__foto {
  width: 100%;
  height: auto;   /* o atributo height="600" anularia o aspect-ratio */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--raio);
  margin-bottom: 10px;
  background: var(--c-surface-2);
  /* Preto e branco une fundos de foto diferentes; a cor volta no hover. */
  filter: grayscale(1);
  transition: filter .35s ease;
}
.pessoa__foto--vazia {
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--c-text-muted);
}
.pessoa:hover .pessoa__foto, .pessoa:focus-within .pessoa__foto { filter: none; }
.pessoa__nome { font-family: var(--f-display); font-weight: 600; font-size: 16.5px; line-height: 1.3; }
.pessoa__nome a { color: var(--c-text-strong); }
/* Link esticado: o cartão inteiro abre o perfil, com um único link. */
.pessoa__nome a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio); }
.pessoa__nome a:focus-visible { outline: none; }
.pessoa__nome a:focus-visible::after { outline: 2px solid var(--c-accent-hi); outline-offset: 4px; }
.pessoa:hover .pessoa__nome a { color: var(--c-accent-hi); }
.pessoa__cargo { font-size: 14px; line-height: 1.4; color: var(--c-text-muted); }
.equipe--seis .pessoa__nome { font-size: 15.5px; }
.equipe--seis .pessoa__cargo { font-size: 13.5px; }

/* --------------------------------- Perfil ------------------------------- */
.perfil-topo { padding-block: clamp(32px, 5vw, 56px) 0; }
.perfil-topo__inner {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.perfil-topo__media { border-radius: var(--raio); overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-surface-2); }
.perfil-topo__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.perfil-topo__nome {
  margin-top: 8px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--c-text-strong);
}
.perfil-topo__area { margin-top: 10px; font-family: var(--f-display); font-size: 16px; color: var(--c-text-muted); }
.perfil-topo__bio { margin-top: 20px; max-width: 64ch; }
.perfil-topo__contatos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-size: 15px; color: var(--c-text-muted); }
.perfil-topo__voltar { margin-top: 24px; font-family: var(--f-display); font-size: 15px; }

.perfil-posts { padding-top: clamp(56px, 7vw, 88px); }
.perfil-posts__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--c-text-strong);
}
.perfil-posts__contagem {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding-inline: 8px;
  border-radius: 999px;
  background: rgba(242, 78, 30, .16);
  color: var(--c-accent-hi);
  font-size: 13.5px;
  font-weight: 600;
}
.perfil-posts__mais { font-size: 15.5px; }

/* =========================================================================
   Sobre
   ========================================================================= */
.page-head--sobre { padding-block: clamp(40px, 5vw, 56px) 0; }
.page-head--sobre .page-head__inner--lado { align-items: flex-end; }

.numeros { border-bottom: 1px solid var(--c-line); margin-top: 12px; }
.numero {
  display: grid;
  grid-template-columns: minmax(150px, 170px) minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding-block: 20px;
  border-top: 1px solid var(--c-line);
}
.numero__valor {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 30px);
  letter-spacing: -.02em;
  color: var(--c-accent-hi);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.numero__rotulo { font-size: 16.5px; line-height: 1.5; color: var(--c-text-body); }

/* =========================================================================
   Área de atuação
   ========================================================================= */
.area-hero { padding-block: clamp(32px, 4vw, 48px) clamp(16px, 3vw, 32px); }
.area-hero__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 72px; align-items: end; }
.area-hero__grade--quem { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.area-hero__texto { max-width: 780px; }
.area-hero__titulo {
  margin-top: 12px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--c-text-strong);
}
.area-hero__lead { margin-top: 20px; max-width: 60ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--c-text-body); }
.area-hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Quem cuida da área */
.quem {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: var(--c-surface);
}
.quem__lista { display: flex; flex-direction: column; gap: 4px; }
.quem__pessoa { display: flex; align-items: center; gap: 14px; padding: 8px 0; color: inherit; }
.quem__pessoa > span { display: flex; flex-direction: column; gap: 2px; }
.quem__nome { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--c-text-strong); transition: color .2s ease; }
.quem__cargo { font-size: 14px; line-height: 1.4; color: var(--c-text-muted); }
.quem__pessoa:hover .quem__nome { color: var(--c-accent-hi); }
.quem__pessoa .avatar { width: 56px; height: 56px; filter: grayscale(1); transition: filter .3s ease; }
.quem__pessoa:hover .avatar { filter: none; }
.quem__mais { padding-top: 12px; border-top: 1px solid var(--c-line); font-family: var(--f-display); font-size: 14.5px; font-weight: 500; }

.area-bloco { padding-block: clamp(40px, 5vw, 64px); }
.area-bloco + .area-bloco { padding-top: 0; }
.area-bloco__titulo {
  margin-bottom: clamp(20px, 2.5vw, 28px);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  color: var(--c-text-strong);
}
.area-bloco .prose--claro { max-width: 68ch; }

.area-servicos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 32px;
}
.area-servicos li { display: flex; gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--c-line); }
.area-servico__n { min-width: 20px; font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--c-accent-hi); }
.area-servico__t { font-size: 16.5px; line-height: 1.5; color: var(--c-text-soft); }

.area-fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px clamp(24px, 3vw, 40px);
}
.area-fato { padding-top: 20px; border-top: 2px solid var(--c-accent); }
.area-fato__titulo { margin-bottom: 8px; font-family: var(--f-display); font-size: 18px; font-weight: 600; color: var(--c-text-strong); }
.area-fato__texto { font-size: 15.5px; line-height: 1.6; color: var(--c-text-body); }

.area-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px clamp(20px, 3vw, 32px); }
.area-check__item { position: relative; padding-left: 28px; }
/* Marcador de conferido, desenhado em CSS: não custa requisição nem fonte. */
.area-check__item::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}
.area-check__item h3 { margin-bottom: 4px; font-family: var(--f-display); font-size: 16.5px; font-weight: 600; color: var(--c-text-strong); }
.area-check__item p { font-size: 15.5px; line-height: 1.6; color: var(--c-text-body); }


.area-outras { display: flex; flex-wrap: wrap; gap: 10px; }
.area-outras a {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--f-display);
  font-size: 14.5px;
  color: var(--c-text-soft);
}
.area-outras a:hover { color: var(--c-text-strong); border-color: rgba(242, 78, 30, .5); }
.area-posts__mais { margin-top: 8px; font-size: 15.5px; }
.area-bloco .grade { margin-top: 0; }
.area-bloco .section__cab { margin-bottom: clamp(24px, 3vw, 32px); }
.area-bloco .section__cab .area-bloco__titulo { margin-bottom: 0; }
.area-bloco .dupla-texto .prose { margin-top: 0; }
.area-bloco .dupla-texto > div > .section__title + .prose { margin-top: 20px; }

/* =========================================================================
   Faixa de chamada
   ========================================================================= */
.faixa-cta {
  margin-top: clamp(80px, 10vw, 128px);
  padding-block: clamp(56px, 7vw, 80px);
  background: var(--c-surface);
  border-top: 1px solid var(--c-line-soft);
}
.faixa-cta__inner { display: grid; justify-items: center; gap: 14px; text-align: center; }
.faixa-cta__titulo {
  max-width: 24ch;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  color: var(--c-text-strong);
}
.faixa-cta__texto { max-width: 56ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--c-text-body); }
.faixa-cta .btn { margin-top: 10px; }

.faixa-cta--lado .faixa-cta__inner {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-items: start;
  align-items: center;
  gap: 24px 48px;
  text-align: left;
}
.faixa-cta--lado .faixa-cta__texto { margin-top: 12px; }
.faixa-cta__acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.faixa-cta--lado .btn { margin-top: 0; height: 56px; }

/* =========================================================================
   Contato
   ========================================================================= */
.contato { padding-top: clamp(40px, 5vw, 56px); }
.contato__grade {
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  gap: 40px clamp(48px, 7vw, 96px);
  align-items: start;
}
.contato__intro { display: flex; flex-direction: column; gap: 18px; }
.contato__titulo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--c-text-strong);
}
.contato__lead { font-size: clamp(16.5px, 1.4vw, 18px); line-height: 1.6; color: var(--c-text-body); }
.contato__alt-titulo { margin-top: 14px; }
.contato__whats { display: flex; flex-direction: column; gap: 10px; }
/* O número vai no próprio botão: pode quebrar linha em tela estreita. */
.contato__whats .btn { height: auto; min-height: 52px; padding-block: 12px; font-size: 15.5px; line-height: 1.35; white-space: normal; text-align: left; }

.form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #1C1C1C;
}
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo--par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.campo label { font-family: var(--f-display); font-weight: 500; font-size: 14.5px; color: var(--c-text-soft); }
.campo label span { color: #FF8A66; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: 16px;   /* 16 px evita o zoom automático do iOS ao focar */
  line-height: 1.4;
}
.campo input, .campo select { height: 50px; }
.campo textarea { resize: vertical; min-height: 130px; }
.campo input::placeholder { color: var(--c-text-dim); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--c-accent-hi); }
.campo input.campo--erro, .campo textarea.campo--erro { border-color: #FF7A5C; }
.campo__dica { font-size: 13.5px; line-height: 1.45; color: var(--c-text-muted); }
.campo__erro { font-size: 13.5px; line-height: 1.45; color: #FF9478; }
.campo__erro:empty { display: none; }

/* Isca antispam: fora da tela, mas não `display:none` (robô ignora o oculto). */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__pe { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 4px; }
.form__enviar { flex: none; height: 54px; }
.form__nota { max-width: 46ch; font-size: 13.5px; line-height: 1.55; color: var(--c-text-muted); }
.form__aviso { font-size: 15px; line-height: 1.5; }
.form__aviso:empty { display: none; }
.form__aviso--ok, .form__aviso--erro { padding: 13px 16px; border-radius: 9px; }
.form__aviso--ok   { background: rgba(38, 92, 58, .3);  border: 1px solid rgba(96, 200, 130, .45); color: #A8E9C0; }
.form__aviso--erro { background: rgba(242, 78, 30, .12); border: 1px solid rgba(242, 78, 30, .45); color: #FFB59E; }

.unidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.unidade {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .09);
}
.unidade__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.unidade__cidade { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 30px); color: var(--c-text-strong); }
.unidade__uf { font-family: var(--f-display); font-size: 14px; color: var(--c-text-muted); }
.unidade__endereco { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--c-text-body); }
.contatos { display: grid; grid-template-columns: 110px minmax(0, 1fr); row-gap: 10px; font-size: 16px; }
.contatos dt { color: var(--c-text-muted); }
.unidade__rota { margin-top: auto; font-family: var(--f-display); font-weight: 500; font-size: 15.5px; }

/* ----------------------------------- 404 --------------------------------- */
.lista-atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(44px, 6vw, 68px); }
.lista-atalhos a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--c-text-soft);
}
.lista-atalhos a:hover { color: var(--c-text-strong); border-color: rgba(242, 78, 30, .5); }

/* =========================================================================
   Responsivo
   ========================================================================= */
@media (max-width: 1100px) {
  .equipe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .equipe--seis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .post__grade { grid-template-columns: minmax(0, 1fr); }
  .post__lado { display: none; }
  .indice--movel { display: block; }
  .post-body { max-width: 700px; }
  .grade--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade--tres > :nth-child(3) { display: none; }
}

@media (max-width: 900px) {
  .page-head__inner--lado { flex-direction: column; align-items: stretch; }
  .busca { flex-basis: auto; }
  .destaque { grid-template-columns: 1fr; }
  .dupla-texto, .contato__grade { grid-template-columns: minmax(0, 1fr); }
  .areas-lista__item { grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "nome seta" "texto seta"; }
  .areas-lista__nome { grid-area: nome; }
  .areas-lista__texto { grid-area: texto; }
  .areas-lista .seta { grid-area: seta; }
  .areas-lista--duas { grid-template-columns: 1fr; }
  .areas-lista--duas li:nth-last-child(2) { border-bottom: 0; }
  .equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faixa-cta--lado .faixa-cta__inner { grid-template-columns: 1fr; }
  .unidades { grid-template-columns: 1fr; }
  .perfil-topo__inner { grid-template-columns: 1fr; }
  .area-hero__grade--quem { grid-template-columns: 1fr; }
  .perfil-topo__media { max-width: 260px; }
}

/* Celular: a paginação vira anterior · posição · próxima (sete botões de 44 px
   não cabem em 350 px), e a lista de posts vira linhas compactas. */
@media (max-width: 700px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .chips::-webkit-scrollbar { display: none; }
  .chips__menu { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; bottom: var(--gutter); max-height: 60vh; overflow-y: auto; }

  .grade:not(.grade--tres) { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
  .grade:not(.grade--tres) .post-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    grid-template-areas: "meta media" "titulo media";
    align-items: start;
    gap: 6px 14px;
    padding-block: 18px;
    border-bottom: 1px solid var(--c-line);
  }
  .grade:not(.grade--tres) .post-card:first-child { border-top: 1px solid var(--c-line); }
  .grade:not(.grade--tres) .post-card__media { grid-area: media; width: 96px; aspect-ratio: 3 / 2; margin: 0; border-radius: 8px; }
  .grade:not(.grade--tres) .post-card__meta { grid-area: meta; font-size: 12.5px; }
  .grade:not(.grade--tres) .post-card__titulo { grid-area: titulo; font-size: 16.5px; line-height: 1.32; }
  .grade:not(.grade--tres) .post-card__resumo,
  .grade:not(.grade--tres) .post-card__autor { display: none; }

  .grade--tres { grid-template-columns: 1fr; gap: 40px; }
  .grade--tres > :nth-child(3) { display: flex; }

  /* A última linha da lista já traz a régua: a da paginação seria a segunda. */
  .paginacao { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; margin-top: 32px; padding-top: 0; border-top: 0; }
  /* O título do post já está logo abaixo: repetir na trilha só quebrava linha. */
  .migalhas li[aria-current] { display: none; }
  .paginacao__controles { display: contents; }
  .paginacao__nums, .paginacao__total { display: none; }
  .paginacao__status { grid-column: 2; grid-row: 1; text-align: center; }
  .paginacao__passo--ant { grid-column: 1; grid-row: 1; width: 48px; height: 48px; justify-content: center; padding: 0; margin: 0; }
  .paginacao__passo--ant .paginacao__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .paginacao__passo--prox { grid-column: 3; grid-row: 1; height: 48px; margin: 0; }
  a.paginacao__passo--prox { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); font-weight: 600; }

  .equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .equipe--seis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pessoa__nome { font-size: 15px; }
  .pessoa__cargo { font-size: 13px; }

  .post-hero { aspect-ratio: 16 / 10; border-radius: 0; width: 100%; }
  .post-body { font-size: 18px; line-height: 1.7; }
  .autor-box { flex-direction: column; }

  .campo--par { grid-template-columns: 1fr; }
  .form__pe { flex-direction: column-reverse; align-items: stretch; }
  .form__enviar { width: 100%; }
  .contatos { grid-template-columns: 96px minmax(0, 1fr); }
  .numero { grid-template-columns: 1fr; gap: 4px; }
  .hero { min-height: min(720px, 100svh); padding-bottom: 56px; }
  .hero__foto { object-position: 50% 30%; }
  /* No celular o texto ocupa a metade de baixo: o véu sobe junto. */
  .hero__veu {
    background: linear-gradient(180deg,
      rgba(24,24,24,.55) 0%, rgba(24,24,24,.05) 22%, rgba(24,24,24,.25) 45%,
      rgba(24,24,24,.82) 72%, var(--c-bg) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pessoa__foto, .post-card__media img { transition: none; }
}