/*
  LAYOUT.CSS — Hospital do Cerrado
  Estrutura usada em TODAS as páginas: barra superior, header (com dropdown e
  menu mobile), utilitários de seção, faixa CTA antes do rodapé e footer.
  Depende de tokens.css, boot.css e components.css.
*/

/* ==========================================================================
   Barra superior (contatos rápidos)
   ========================================================================== */
.topbar {
  background-color: var(--cor-neutro-900);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--texto-caption);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-4);
  min-height: 40px;
}

.topbar__grupo {
  display: flex;
  align-items: center;
  gap: var(--espaco-5);
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2);
  white-space: nowrap;
  transition: color var(--transicao-padrao);
}

a.topbar__item:hover { color: var(--cor-branco); }

.topbar__item .icon {
  width: 15px;
  height: 15px;
  color: var(--cor-laranja);
}

.topbar__item .icon--whatsapp { color: var(--cor-whatsapp); }

/* Endereço e redes só cabem a partir do tablet */
.topbar__endereco,
.topbar__social { display: none; }

@media (min-width: 768px) {
  .topbar__endereco,
  .topbar__social { display: inline-flex; }
}

.topbar__social {
  gap: var(--espaco-3);
  padding-left: var(--espaco-5);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--cor-neutro-200);
  transition: box-shadow var(--transicao-padrao);
}

/* Classe aplicada via JS ao rolar a página */
.site-header.is-rolado {
  box-shadow: 0 6px 20px rgba(43, 42, 40, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-5);
  min-height: 72px;
}

@media (min-width: 768px) {
  .site-header__inner { min-height: 84px; }
}

/* A logo nunca encolhe: sem isso, com o menu apertado, ela ficava achatada */
.site-header__logo { flex-shrink: 0; }

.site-header__logo img {
  height: 44px;
  width: auto;
  max-width: none;
}

@media (min-width: 768px) {
  .site-header__logo img { height: 52px; }
}

/* ---------- Navegação principal (desktop) ----------
   O menu tem 6 itens + botão "Agende seu atendimento" (que substitui o
   antigo item "Marque sua consulta"); abaixo de 1200px não cabe numa linha,
   então até lá vale o menu hambúrguer. */
.site-nav {
  display: none;
}

@media (min-width: 1200px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: 20px;
  }
}

@media (min-width: 1360px) {
  .site-nav { gap: var(--espaco-6); }
}

.site-nav__link,
.site-nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-1);
  white-space: nowrap;
  padding-block: var(--espaco-2);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto-principal);
  transition: color var(--transicao-padrao);
}

/* Sublinhado animado no hover e no item ativo */
.site-nav__link::after,
.site-nav__trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--cor-laranja);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao-padrao);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--cor-laranja-texto);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after,
.site-nav__trigger.is-ativo::after {
  transform: scaleX(1);
}

/* "Serviços" fica marcado quando a página atual é uma das suas subpáginas */
.site-nav__trigger.is-ativo {
  color: var(--cor-laranja-texto);
}

.site-nav__dropdown a[aria-current="page"] {
  background-color: var(--cor-laranja-50);
  color: var(--cor-laranja-texto);
}

/* Dropdown "Serviços" */
.site-nav__item--dropdown {
  position: relative;
}

.site-nav__trigger .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transicao-padrao);
}

.site-nav__item--dropdown:hover .site-nav__trigger,
.site-nav__trigger[aria-expanded="true"] {
  color: var(--cor-laranja-texto);
}

.site-nav__item--dropdown:hover .site-nav__trigger .icon,
.site-nav__trigger[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.site-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 240px;
  background: var(--cor-branco);
  border: 1px solid var(--cor-neutro-200);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-lg);
  padding: var(--espaco-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao-padrao), transform var(--transicao-padrao), visibility var(--transicao-padrao);
}

/* "Ponte" invisível para o mouse não perder o hover entre botão e menu */
.site-nav__dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__dropdown.is-aberto {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(6px);
}

.site-nav__dropdown a {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  border-radius: var(--raio-sm);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto-principal);
}

.site-nav__dropdown a .icon {
  width: 18px;
  height: 18px;
  color: var(--cor-laranja);
}

.site-nav__dropdown a:hover {
  background-color: var(--cor-laranja-50);
  color: var(--cor-laranja-texto);
}

/* ---------- Ações do header (CTA + hambúrguer) ---------- */
.site-header__acoes {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
}

.site-header__cta {
  display: none;
}

@media (min-width: 768px) {
  .site-header__cta { display: inline-flex; }
}

.site-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--raio-sm);
  color: var(--cor-neutro-900);
}

.site-header__menu-btn:hover {
  background-color: var(--cor-neutro-50);
}

@media (min-width: 1200px) {
  .site-header__menu-btn { display: none; }
}

/* ---------- Menu mobile (drawer) ---------- */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(43, 42, 40, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao-padrao);
}

.mobile-nav-overlay.is-visivel {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(88vw, 380px);
  background: var(--cor-branco);
  padding: var(--espaco-5);
  padding-bottom: calc(var(--espaco-5) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--transicao-lenta);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
}

.mobile-nav.is-aberto {
  transform: translateX(0);
}

.mobile-nav__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav__topo img {
  height: 40px;
  width: auto;
}

.mobile-nav__fechar {
  display: inline-flex;
  padding: var(--espaco-2);
  border-radius: var(--raio-sm);
}

.mobile-nav__lista {
  display: flex;
  flex-direction: column;
}

.mobile-nav__lista a,
.mobile-nav__lista button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--espaco-4) 0;
  border-bottom: 1px solid var(--cor-neutro-200);
  font-size: 1rem;
  font-weight: var(--peso-semibold);
  color: var(--cor-neutro-900);
  text-align: left;
}

.mobile-nav__lista button .icon {
  transition: transform var(--transicao-padrao);
}

.mobile-nav__lista button[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

.mobile-nav__submenu {
  display: none;
  flex-direction: column;
  padding-left: var(--espaco-4);
}

.mobile-nav__submenu.is-aberto {
  display: flex;
}

.mobile-nav__submenu a {
  border-bottom: none;
  padding-block: var(--espaco-3);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-medium);
  color: var(--cor-texto-secundario);
}

.mobile-nav__lista a[aria-current="page"] {
  color: var(--cor-laranja-texto);
}

.mobile-nav__contato {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  margin-top: auto;
}

.mobile-nav__contato .btn { justify-content: center; }

@media (min-width: 1200px) {
  .mobile-nav-overlay,
  .mobile-nav { display: none; }
}

/* ==========================================================================
   Cabeçalho de página interna (breadcrumb + título + texto de apoio)
   Fundo escuro com brilho laranja e o símbolo da árvore como marca d'água.
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--cor-neutro-900);
  color: var(--cor-branco);
  padding-block: var(--espaco-8) var(--espaco-9);
}

@media (min-width: 992px) {
  .page-hero { padding-block: var(--espaco-9) var(--espaco-11); }
}

.page-hero::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  right: -200px;
  top: -320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 122, 48, 0.28) 0%, rgba(213, 122, 48, 0) 65%);
  pointer-events: none;
}

.page-hero__marca {
  position: absolute;
  right: 6%;
  bottom: -60px;
  width: 360px;
  opacity: 0.06;
  pointer-events: none;
  display: none;
}

@media (min-width: 992px) {
  .page-hero__marca { display: block; }
}

.page-hero__conteudo {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.page-hero h1 {
  color: var(--cor-branco);
  margin-top: var(--espaco-3);
}

.page-hero .text-lead {
  margin-top: var(--espaco-4);
  color: rgba(255, 255, 255, 0.8);
}

.page-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
  margin-top: var(--espaco-7);
}

/* ==========================================================================
   Seções (espaçamento vertical padrão + fundos)
   ========================================================================== */
.secao {
  padding-block: var(--espaco-secao);
}

.secao--cinza {
  background-color: var(--cor-neutro-50);
}

/* Cabeçalho de seção: eyebrow + título + texto de apoio, sempre empilhados */
.secao-cabecalho {
  max-width: 720px;
  margin-bottom: var(--espaco-8);
}

.secao-cabecalho h2 {
  margin-top: var(--espaco-3);
}

.secao-cabecalho .text-lead {
  margin-top: var(--espaco-4);
}

.secao-cabecalho--centro {
  margin-inline: auto;
  text-align: center;
}

/* Variante com uma ação (ex.: "Ver todos") alinhada à direita no desktop */
.secao-cabecalho-linha {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-5);
  margin-bottom: var(--espaco-8);
}

.secao-cabecalho-linha .secao-cabecalho {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .secao-cabecalho-linha {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .secao-cabecalho-linha > .btn { flex-shrink: 0; }
}

/* ==========================================================================
   Faixa CTA antes do rodapé — o card laranja fica metade sobre a seção
   anterior (cinza) e metade sobre o rodapé (escuro).
   ========================================================================== */
.cta-final {
  background: linear-gradient(to bottom, var(--cor-neutro-50) 50%, var(--cor-neutro-900) 50%);
}

.cta-final--branco {
  background: linear-gradient(to bottom, var(--cor-branco) 50%, var(--cor-neutro-900) 50%);
}

.cta-final__linha {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-6);
}

.cta-final__texto {
  max-width: 560px;
}

.cta-final__texto p {
  margin-top: var(--espaco-3);
  font-size: var(--texto-lead);
}

.cta-final__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-3);
}

@media (min-width: 992px) {
  .cta-final__linha {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .cta-final__acoes {
    flex-direction: column;
    flex-shrink: 0;
  }
  .cta-final__acoes .btn { justify-content: center; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: var(--cor-neutro-900);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--texto-pequeno);
  padding-top: var(--espaco-10);
}

.site-footer a {
  transition: color var(--transicao-padrao);
}

.site-footer a:hover {
  color: var(--cor-branco);
}

/* Mobile/tablet: marca e contato ocupam a linha toda; as duas listas de
   links ficam lado a lado. Desktop: 4 colunas. */
.site-footer__grid {
  display: grid;
  gap: var(--espaco-8) var(--espaco-5);
  grid-template-columns: repeat(2, 1fr);
  padding-bottom: var(--espaco-9);
}

.site-footer__marca,
.site-footer__col-contato {
  grid-column: 1 / -1;
}

@media (min-width: 992px) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: var(--espaco-8) var(--espaco-6);
  }
  .site-footer__marca,
  .site-footer__col-contato { grid-column: auto; }
}

.site-footer__marca img {
  height: 56px;
  width: auto;
  margin-bottom: var(--espaco-5);
}

.site-footer__marca p {
  max-width: 340px;
}

.site-footer__rede {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
  max-width: 340px;
  margin-top: var(--espaco-5);
  padding: var(--espaco-3) var(--espaco-4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--raio-md);
  font-size: var(--texto-caption);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.site-footer__rede .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--cor-amarelo);
}

.site-footer__social {
  display: flex;
  gap: var(--espaco-3);
  margin-top: var(--espaco-5);
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-full);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--cor-branco);
  transition: background-color var(--transicao-padrao);
}

.site-footer__social a:hover {
  background-color: var(--cor-laranja);
}

.site-footer__titulo {
  font-family: var(--fonte-corpo);
  font-size: var(--texto-caption);
  font-weight: var(--peso-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-branco);
  margin-bottom: var(--espaco-5);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
}

.site-footer__contato {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.site-footer__contato li {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-3);
}

.site-footer__contato .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--cor-laranja);
}

.site-footer__contato .icon--whatsapp { color: var(--cor-whatsapp); }

.site-footer__contato strong {
  display: block;
  color: var(--cor-branco);
  font-weight: var(--peso-semibold);
}

/* Laranja da marca sobre o fundo escuro do rodapé: 4,6:1 (AA) */
.site-footer__mapa {
  display: inline-block;
  margin-top: var(--espaco-1);
  color: var(--cor-laranja);
  font-weight: var(--peso-semibold);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3);
  padding-block: var(--espaco-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--texto-caption);
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__creditos {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2) var(--espaco-5);
}

@media (min-width: 992px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.page-hero .breadcrumb {
  margin-bottom: var(--espaco-6);
}

/* Variante com foto de pessoas à direita (humaniza as páginas internas) */
.page-hero--foto .page-hero__marca { display: none; }

.page-hero__grid {
  display: grid;
  gap: var(--espaco-8);
  align-items: center;
}

@media (min-width: 992px) {
  .page-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--espaco-10);
  }
}

.page-hero__foto .media-foto { height: 260px; }

@media (min-width: 768px) {
  .page-hero__foto .media-foto { height: 360px; }
}

@media (min-width: 992px) {
  .page-hero__foto .media-foto { height: 420px; }
}

/* ==========================================================================
   Duas colunas: foto + texto (seções "como funciona", institucionais etc.)
   ========================================================================== */
.split {
  display: grid;
  gap: var(--espaco-9);
  align-items: center;
}

@media (min-width: 992px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--espaco-11);
  }
}

.split h2 { margin-top: var(--espaco-3); }

.split .text-lead { margin-block: var(--espaco-4) var(--espaco-6); }

/* Proporção paisagem: mantém as pessoas das fotos de consulta enquadradas */
.split .media-foto {
  height: auto;
  aspect-ratio: 3 / 2;
}

/* ==========================================================================
   Formulário + coluna lateral (Agende Fácil, Contato)
   ========================================================================== */
.grid-form {
  display: grid;
  gap: var(--espaco-8);
  align-items: start;
}

@media (min-width: 992px) {
  .grid-form {
    grid-template-columns: 1.45fr 1fr;
    gap: var(--espaco-9);
  }
  .grid-form__lateral {
    position: sticky;
    top: 110px;
  }
}

.grid-form__lateral > * + * { margin-top: var(--espaco-5); }

/* Split sem foto (texto + acordeão): alinha pelo topo */
.split--texto { align-items: start; }

.secao--sem-topo { padding-top: 0; }