/* ================================================================
  Regularize Consultoria — CSS separado (rascunho técnico)
   ----------------------------------------------------------------
  Gerado a partir de assets/css/custom.css para a fase de separação.
  Não substitui custom.css/custom.min.css automaticamente.
   Preserve a ordem de carregamento indicada no README antes de usar.
   ================================================================ */

/* ---------- 3. Navbar: sombra suave ao fazer scroll ---------- */
/* Classe adicionada via JavaScript (main.js) quando window.scrollY > 10 */
.site-regulatory-banner{position:sticky;top:0;z-index:60;background-color:#1a3a5c;color:#fff}.site-regulatory-banner__link{display:flex;align-items:center;justify-content:center;gap:.5rem;height:4.8rem;min-height:4.8rem;padding:.625rem 1rem;color:inherit;font-size:.875rem;font-weight:600;line-height:1.35;text-align:center;text-decoration:none}.site-regulatory-banner__link:hover{background-color:#234d78}.site-regulatory-banner__link:focus-visible{outline:3px solid #fbbf24;outline-offset:-3px}.site-regulatory-banner__label{flex:0 0 auto;padding:.125rem .375rem;border-radius:.25rem;background-color:#dc2626;color:#fff;line-height:1.2}.site-regulatory-banner__arrow{flex:0 0 auto;font-size:1rem}#navbar{top:4.8rem}html{scroll-padding-top:10.8rem}@media (max-width:420px){.site-regulatory-banner__link{position:relative;flex-direction:column;gap:.2rem;height:4.8rem;min-height:4.8rem;padding:.375rem 2.5rem;font-size:.8125rem}.site-regulatory-banner__label{align-self:center;padding:.1rem .325rem;font-size:.75rem;white-space:nowrap}.site-regulatory-banner__arrow{position:absolute;top:50%;right:.875rem;transform:translateY(-50%)}}@media (min-width:768px){.site-regulatory-banner__link{height:2.75rem;min-height:2.75rem;padding-block:.5rem;font-size:.9375rem}#navbar{top:2.75rem}html{scroll-padding-top:9.75rem}}

#navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* ---------- 4. Link ativo na navbar ---------- */
/* Classe adicionada via JavaScript com base na URL atual da página */
/* Escopo restrito a <nav> para não afetar o botão CTA do header */
/* Sem font-weight aqui: evita layout shift quando o JS adiciona a classe pós-render */
#navbar nav a.active {
  color: var(--color-brand) !important;
}

/* ---------- 5. Focus ring acessível ---------- */
/* Substitui o outline padrão do browser por um mais limpo e consistente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sobre superfícies escuras (heros em degradê, faixas bg-brand-dark e rodapé) o
   contorno azul some no fundo; ali o foco fica branco. */
:is([class*="bg-gradient-to-"], .article-hero-informativo, .bg-brand-dark, footer) :is(a, button, input, textarea, select):focus-visible {
  outline-color: #fff;
}

/* ---------- 6. Contato: estilos de formulário ----------
  Base reutilizável dos campos de formulário.
  Não depende da página /contato/ e pode ser usada em outros formulários. */
.form-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: #1e293b;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  appearance: none;
}

.form-input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
}

/* slate-500 com opacidade explícita: 4,76:1 sobre o branco do campo (o
   slate-400 ficava em 2,56:1; o Firefox ainda aplicaria 0,54 por padrão). */
.form-input::placeholder {
  color: #64748b;
  opacity: 1;
}

/* ---------- 7. Animação de entrada suave (opcional para cards) ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.45s ease forwards;
}

/* ---------- 9. Navbar logo — transição suave ---------- */
#navbar img {
  transition: opacity 0.2s ease;
}
#navbar img:hover {
  opacity: 0.85;
}

/* ---------- 10. Navbar tablet: evita compressao em larguras intermediarias ---------- */
/* Abaixo de 900px: hamburger; de 900px a 1180px: nav visível compacta; acima: nav completa */
@media (max-width: 899px) {
  #navbar > div:first-child > div > nav {
    display: none !important;
  }

  #navbar > div:first-child > div > div > a[href="/comunicado/"] {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Botão do menu com 44 x 44 px (antes 40 x 40, desde 23/10/2026). */
  #navbar #menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  /* O menu aberto fica na altura que sobra abaixo da faixa (4,8rem) e da
     linha principal (5rem) e rola por dentro. Sem limite, em paisagem no
     celular os últimos destinos ficavam abaixo da borda: o cabeçalho é fixo e
     rolar a janela não o move. dvh acompanha a barra do navegador. */
  #navbar #mobile-menu:not(.hidden) {
    display: block !important;
    max-height: calc(100vh - 9.8rem);
    max-height: calc(100dvh - 9.8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Com o menu aberto, voltar ao topo e WhatsApp recolhem: em telas baixas
     ficariam sobre os destinos. Como em pages/noticias.css, a regra vai em
     cada botão, porque o voltar ao topo visível declara visibility própria. */
  body:has(#mobile-menu:not(.hidden)) .floating-buttons .floating-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* De 768 a 899 px a faixa tem 2,75rem e a linha principal, 6rem. */
@media (min-width: 768px) and (max-width: 899px) {
  #navbar #mobile-menu:not(.hidden) {
    max-height: calc(100vh - 8.75rem);
    max-height: calc(100dvh - 8.75rem);
  }
}

/* Controles do cabeçalho com pelo menos 44 px de altura (desde 23/10/2026):
   o "AVISOS!" do lado direito (antes 40 px) e os destinos do menu do celular
   (antes 40 px; o "AVISOS!" do menu já tinha 44). */
#navbar > div:first-child > div > div > a[href="/comunicado/"] {
  min-height: 2.75rem;
}

#navbar #mobile-menu nav a {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Nav compacta em telas intermediárias (900–1180px) */
@media (min-width: 900px) and (max-width: 1180px) {
  #navbar > div:first-child > div > nav {
    gap: 1.25rem;
  }
}

/* ---------- 12. Global: footer e ajustes de links ---------- */
/* O logo tem fundo branco; o badge aplica padding + rounded para encaixar no footer escuro */
footer img[alt="Regularize Consultoria"] {
  display: block;
}

footer li,
footer li a {
  min-width: 0;
}

footer li a {
  overflow-wrap: anywhere;
}

/* ---------- 16. Componentes globais: botões flutuantes ---------- */
.floating-buttons {
  position: fixed;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  right: max(1.5rem, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 9999;
}

.floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              opacity 0.3s ease, visibility 0.3s ease;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.floating-btn svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.floating-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* WhatsApp – verde oficial */
.floating-btn--whatsapp {
  background-color: #128c7e;
}

.floating-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff;
}

footer .text-slate-500 {
  color: #94a3b8;
}

/* Voltar ao topo – cor da brand; oculto por padrão */
.floating-btn--top {
  background-color: var(--color-brand);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.floating-btn--top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Os créditos do rodapé e o fechamento do comunicado ficam na largura toda do
   container, sem reserva lateral nem inferior. Quando esses blocos chegam à
   coluna fixa, o main.js a ancora 1rem acima deles e ela rola com a página.
   Ancorada, ela passa sob a faixa e o cabeçalho fixos, como o resto da
   página: em telas baixas, no fim da rolagem, a posição acima dos créditos
   caía sobre o botão do menu (z-index 9999 contra 50). */
.floating-buttons.is-docked {
  position: absolute;
  bottom: auto;
  z-index: 40;
}

/* Mobile: botões levemente menores — continua válido dentro de max-width:1375px */
@media (max-width: 640px) {
  .floating-btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .floating-btn svg {
    width: 1.375rem;
    height: 1.375rem;
  }
}

/* No celular a fileira de botões do CTA institucional chega à borda.
   O recuo é só dessa fileira, nas páginas em que a medição mostrou a
   colisão. O CTA final dos manuais já fica livre e não entra aqui. */
@media (max-width: 639px) {
  body:has(.home-hero-section) .institutional-cta-section .flex.flex-col.sm\:flex-row,
  body:has(.services-hero-section) .institutional-cta-section .flex.flex-col.sm\:flex-row,
  body:has(.team-hero-section) .institutional-cta-section .flex.flex-col.sm\:flex-row,
  body:has(.about-principles-section) .institutional-cta-section .flex.flex-col.sm\:flex-row {
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - 1rem);
  }
}

/* De 768 a 1279px a fileira do CTA final da Home e de Serviços é
   centralizada com largura máxima fixa (38rem a 42rem). Com a barra de
   rolagem clássica a fileira desloca só metade da barra e a coluna
   desloca a barra inteira: em 768px "Conhecer os Serviços" ficava a 0,5px
   do WhatsApp. A fileira passa a ter, além da largura máxima de sempre, a
   largura do bloco menos a faixa (recuo max(1.5rem, safe-area), botão de
   3rem e 0.5rem de folga) de cada lado, descontado o que já existe entre o
   bloco e a borda da largura útil, (100cqw - 100%) / 2, com a seção como
   contêiner de consulta. Sem barra e onde há folga, a conta dá a largura
   original e nada muda. Folga de 0.5rem: os dois botões têm contorno de
   foco de 4px e só o primeiro tem sombra (alcance visível de 4,5px). A
   primeira declaração repete a conta com 100vw, sem var(). */
body:is(:has(.home-hero-section), :has(.services-hero-section)) .institutional-cta-section {
  container-type: inline-size;
}

@media (min-width: 768px) and (max-width: 1279px) {
  body:is(:has(.home-hero-section), :has(.services-hero-section)) .institutional-cta-section .flex.flex-col.sm\:flex-row {
    width: calc(100% - 2 * max(0px, 1.5rem + 3rem + 0.5rem - (100vw - 100%) / 2));
    width: calc(100% - 2 * max(0px, max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - (100cqw - 100%) / 2));
  }
}

/* ---------- 17. Rodapé fora da faixa dos controles flutuantes ----------
   Layout comum (10/10/2026). Até 1375px as colunas do rodapé chegam à
   faixa de Voltar ao topo e WhatsApp: o parágrafo de apresentação no
   celular e os contatos da terceira coluna no tablet. A coluna só é
   ancorada acima dos créditos (main.js), e as colunas acima deles passam
   sob ela durante a rolagem e ao lado dela quando ancorada. A grade
   reserva à direita a faixa (recuo max(1.5rem, safe-area), botão de 3rem,
   2.75rem até 640px, e 0.5rem de folga) menos o que já existe entre a
   grade e a borda da largura útil: (100cqw - 100%) / 2, com o rodapé como
   contêiner de consulta (100cqw não inclui a barra clássica). Negativo, a
   reserva vai a zero; os créditos continuam na largura toda. A primeira
   declaração repete a conta com 100vw para navegador sem unidades de
   contêiner. De 768 a 1023px as colunas mudam de proporção e de
   espaçamento para o e-mail e o Instagram caberem numa linha. */
footer {
  container-type: inline-size;
}

footer > .max-w-7xl > .grid {
  padding-right: max(0px, calc(1.5rem + 3rem + 0.5rem - (100vw - 100%) / 2));
  padding-right: max(0px, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - (100cqw - 100%) / 2));
}

@media (max-width: 640px) {
  footer > .max-w-7xl > .grid {
    padding-right: max(0px, calc(1.5rem + 2.75rem + 0.5rem - (100vw - 100%) / 2));
    padding-right: max(0px, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - (100cqw - 100%) / 2));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  footer > .max-w-7xl > .grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 1.5rem;
  }
}

/* ---------- 18. Herói institucional e seções fora da faixa ----------
   Layout comum (10/10/2026). Mesma faixa do rodapé (seção 17).
   Herói institucional de Contato, Manuais e POPs, Farmácia Popular,
   Notícias e Política (Sobre e Equipe já têm reserva própria e ficam de
   fora; Serviços, abaixo): cada filho do container (breadcrumb, título,
   resumo, ações) recebe como margem direita a faixa menos o que já existe
   entre o container e a borda da largura útil. Margem, e não padding: o
   título e o resumo têm largura máxima, e a margem só estreita o bloco
   quando falta espaço. O herói fica no topo e só entra no alcance da
   coluna em tela baixa (paisagem), mas a regra vale em qualquer altura.
   O que já existe é o padding do container (px-4 sm:px-6 lg:px-8) mais a
   margem direita dele. Até 639px e de 1280px em diante o container é
   centralizado e isso é (100cqw - 100%) / 2, com a seção como contêiner de
   consulta; de 640 a 1279px ele tem margem esquerda própria (clamp(0.5rem,
   2vw, 2rem), mais abaixo) e a direita é zero, então a margem do filho é a
   faixa menos o padding. Os botões do herói dos manuais reservam 1rem de
   folga (contorno de foco e sombra).
   Serviços: até 639px o resumo já tinha a reserva da 1P
   (pages/equipe-servicos.css); de 640 a 1279px os filhos do herói recebem
   a mesma margem dos outros heróis. De 1280px em diante a largura máxima
   do título e do resumo já os deixa longe da coluna.
   Seções de conteúdo de Contato, Manuais e POPs e Política: o container
   de cada seção (max-w-7xl, 5xl, 4xl, 3xl e 820px, com px-4 sm:px-6
   lg:px-8) recebe a faixa como recuo. Até 639px a margem do container é
   zero e o recuo é só à direita; de 640px em diante, dos dois lados, para
   o conteúdo centralizado não sair do eixo, e nunca menor que o recuo
   original. A conta usa a margem do container, max(0, (100cqw - largura
   máxima) / 2). Cada regra com cqw é precedida da mesma conta com 100vw,
   para navegador sem unidades de contêiner (que descarta a declaração
   com cqw); as contas não usam var(), que tornaria a declaração inválida
   só no cálculo e zeraria o recuo nesses navegadores. */
.institutional-hero-section:not(.services-hero-section, .team-hero-section, .about-hero-section),
body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) {
  container-type: inline-size;
}

.institutional-hero-section:not(.services-hero-section, .team-hero-section, .about-hero-section) > .institutional-hero-content > * {
  margin-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 0.5rem));
  margin-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem));
}

.institutional-hero-section:not(.services-hero-section, .team-hero-section, .about-hero-section) > .institutional-hero-content > .manuals-hero-actions {
  margin-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 3rem + 1rem));
  margin-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 1rem));
}

@media (max-width: 640px) {
  .institutional-hero-section:not(.services-hero-section, .team-hero-section, .about-hero-section) > .institutional-hero-content > * {
    margin-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 0.5rem));
    margin-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem));
  }

  .institutional-hero-section:not(.services-hero-section, .team-hero-section, .about-hero-section) > .institutional-hero-content > .manuals-hero-actions {
    margin-right: max(0px, calc((100% - 100vw) / 2 + 1.5rem + 2.75rem + 1rem));
    margin-right: max(0px, calc((100% - 100cqw) / 2 + max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 1rem));
  }
}

/* 640 a 1279px: margem direita do container zero; a margem do filho é a
   faixa menos o padding do container (1.5rem até 1023px, 2rem de 1024px em
   diante). A 640px o botão ainda tem 2.75rem. Inclui Serviços. */
@media (min-width: 640px) and (max-width: 1279px) {
  .institutional-hero-section:not(.team-hero-section, .about-hero-section) > .institutional-hero-content > * {
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - 1.5rem);
  }

  .institutional-hero-section:not(.team-hero-section, .about-hero-section) > .institutional-hero-content > .manuals-hero-actions {
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 1rem - 1.5rem);
  }
}

@media (width: 640px) {
  .institutional-hero-section:not(.team-hero-section, .about-hero-section) > .institutional-hero-content > * {
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem - 1.5rem);
  }

  .institutional-hero-section:not(.team-hero-section, .about-hero-section) > .institutional-hero-content > .manuals-hero-actions {
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 1rem - 1.5rem);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .institutional-hero-section:not(.team-hero-section, .about-hero-section) > .institutional-hero-content > * {
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - 2rem);
  }

  .institutional-hero-section:not(.team-hero-section, .about-hero-section) > .institutional-hero-content > .manuals-hero-actions {
    margin-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 1rem - 2rem);
  }
}

/* Política: o e-mail e o domínio do site (em negrito no primeiro
   parágrafo), uma palavra só cada, não cabiam na linha que sobra no
   celular depois da reserva e passavam sob os botões; quebram onde for
   preciso, como no rodapé. */
body:has(#identificacao) main :is(a[href^="mailto:"], strong) {
  overflow-wrap: anywhere;
}

/* Títulos dos heróis institucionais (mesma regra dos títulos das
   matérias, pages/noticias-tipos.css): com a reserva, o título dos
   manuais tem 228px a 320px (213px com a barra clássica);
   "Transportadoras", "personalizados" e "Gerenciamento" têm no HTML um
   hífen opcional (&shy;) num limite de sílaba em que as duas partes cabem.
   Ele só vale com largura útil menor que 375px; acima, é ignorado e o
   título quebra como antes. Fonte e texto não mudam. */
.institutional-hero-title {
  -webkit-hyphens: none;
  hyphens: none;
}

@media (max-width: 374px) {
  .institutional-hero-title {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

@container (max-width: 374px) {
  .institutional-hero-title {
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

@media (max-width: 639px) {
  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > :is(.max-w-7xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-\[820px\]) {
    padding-right: calc(1.5rem + 2.75rem + 0.5rem);
    padding-right: calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 2.75rem + 0.5rem);
  }
}

@media (min-width: 640px) {
  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-7xl {
    padding-inline: max(1.5rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 80rem) / 2)));
    padding-inline: max(1.5rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 80rem) / 2)));
  }

  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-5xl {
    padding-inline: max(1.5rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 64rem) / 2)));
    padding-inline: max(1.5rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 64rem) / 2)));
  }

  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-4xl {
    padding-inline: max(1.5rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 56rem) / 2)));
    padding-inline: max(1.5rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 56rem) / 2)));
  }

  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-3xl {
    padding-inline: max(1.5rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 48rem) / 2)));
    padding-inline: max(1.5rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 48rem) / 2)));
  }

  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-\[820px\] {
    padding-inline: max(1.5rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 820px) / 2)));
    padding-inline: max(1.5rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 820px) / 2)));
  }
}

@media (min-width: 1024px) {
  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-7xl {
    padding-inline: max(2rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 80rem) / 2)));
    padding-inline: max(2rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 80rem) / 2)));
  }

  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-5xl {
    padding-inline: max(2rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 64rem) / 2)));
    padding-inline: max(2rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 64rem) / 2)));
  }

  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-4xl {
    padding-inline: max(2rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 56rem) / 2)));
    padding-inline: max(2rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 56rem) / 2)));
  }

  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-3xl {
    padding-inline: max(2rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 48rem) / 2)));
    padding-inline: max(2rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 48rem) / 2)));
  }

  body:is(:has(.contact-hero-section), :has(.manuals-hero-section), :has(#identificacao)) main > section:not(.institutional-hero-section) > .max-w-\[820px\] {
    padding-inline: max(2rem, calc(1.5rem + 3rem + 0.5rem - max(0px, (100vw - 820px) / 2)));
    padding-inline: max(2rem, calc(max(1.5rem, env(safe-area-inset-right, 0px)) + 3rem + 0.5rem - max(0px, (100cqw - 820px) / 2)));
  }
}

/* ---------- Hero institucional compartilhado ----------
  Padroniza breadcrumb, título, subtítulo e espaçamento dos heroes azuis
  das páginas internas: Sobre, Serviços, Equipe, Contato e Notícias. */
.institutional-hero-section {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.institutional-hero-content {
  position: relative;
}

.institutional-hero-breadcrumb {
  margin-bottom: 1rem !important;
}

.institutional-hero-breadcrumb-list {
  /* 90%: o breadcrumb também passa sobre o trecho mais claro do degradê. */
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.institutional-hero-title {
  color: #fff !important;
  font-size: clamp(1.875rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
  margin-bottom: 0.75rem !important;
  max-width: 56rem;
}

.institutional-hero-lead {
  color: #e2e8f0 !important;
  font-size: clamp(1rem, 2vw, 1.125rem) !important;
  line-height: 1.58 !important;
  margin-bottom: 0 !important;
  max-width: 48rem !important;
}

@media (max-width: 639px) {
  .institutional-hero-section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .institutional-hero-breadcrumb {
    margin-bottom: 0.875rem !important;
  }

  .institutional-hero-title {
    font-size: 1.875rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.625rem !important;
  }

  .institutional-hero-lead {
    line-height: 1.55 !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .institutional-hero-section {
    padding-top: clamp(2.625rem, 5vw, 3rem) !important;
    padding-bottom: clamp(2.625rem, 5vw, 3rem) !important;
  }

  .institutional-hero-content {
    margin-left: clamp(0.5rem, 2vw, 2rem) !important;
  }

  .institutional-hero-title {
    margin-bottom: 0.625rem !important;
  }

  .institutional-hero-lead {
    line-height: 1.48 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .institutional-hero-section {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  .institutional-hero-content {
    margin-left: clamp(0.5rem, 2vw, 2rem) !important;
  }
}