/* =============================================================================
   componentes.css
   ----------------------------------------------------------------------------
   Estilos dos componentes reutilizáveis que aparecem em todas as páginas:
   - Header (cabeçalho com menu)
   - Footer (rodapé com 4 colunas)
   - Botões padrão e variantes
   - Section genérica (wrapper das seções da landing)
   - Mapa embed (iframe responsivo do Google Maps)
   ============================================================================= */

/* =============================================================================
   MÁSCARAS DE FOTO
   ----------------------------------------------------------------------------
   PRINCÍPIO: toda foto exibida no site fica dentro de uma máscara de
   proporção fixa, com object-fit: cover. Assim, mesmo recebendo arquivos
   de tamanhos diferentes (1200x800, 4000x3000, retrato, paisagem...), o
   layout do site permanece harmônico — a imagem é cortada para preencher
   o "molde", sem distorcer.

   ONDE JÁ ESTÁ APLICADO (cada lugar tem sua proporção definida):
     - Carrossel da Sobre  (.carrossel--retrato)    → 2:3   (retrato)
     - Carrossel da Clínica (.carrossel)             → 4:3
     - Cards de Reflexões  (.card-reflexao__capa)   → 4:3
     - Capa do artigo      (.artigo__capa)           → 16:9
     - Imagens no corpo do artigo (.artigo__corpo img) → 16:9

   UTILITY GLOBAIS — use as classes abaixo quando precisar adicionar uma
   foto solta em qualquer lugar novo do site. Apenas adicione a classe
   .foto à tag <img> e, se necessário, uma variante de proporção.
     <img src="..." alt="..." class="foto foto--retrato" />
   ============================================================================= */

.foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--cor-bege-suave);
  border-radius: var(--raio-medio);
  display: block;
}

.foto--16x9     { aspect-ratio: 16 / 9; }
.foto--ampla    { aspect-ratio: 3 / 2;  }
.foto--quadrada { aspect-ratio: 1 / 1;  }
.foto--retrato  { aspect-ratio: 2 / 3;  }

/* =============================================================================
   BOTÕES
   ============================================================================= */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--cor-azul-petroleo-principal);
  color: var(--cor-off-white);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border: 1px solid var(--cor-azul-petroleo-principal);
  border-radius: var(--raio-medio);
  cursor: pointer;
  transition:
    background var(--transicao-rapida),
    border-color var(--transicao-rapida),
    color var(--transicao-rapida);
}

.botao:hover,
.botao:focus-visible {
  background: var(--cor-azul-marinho);
  border-color: var(--cor-azul-marinho);
  color: var(--cor-off-white);
}

.botao--secundario {
  background: transparent;
  color: var(--cor-azul-petroleo-principal);
}

.botao--secundario:hover,
.botao--secundario:focus-visible {
  background: var(--cor-azul-petroleo-principal);
  color: var(--cor-off-white);
}

/* =============================================================================
   SECTION (wrapper das seções da landing)
   ============================================================================= */
.secao {
  padding-block: var(--space-10);
}

.secao--ampla {
  padding-block: var(--space-12);
}

.secao--alt {
  background-color: var(--bg-secao-alt);
}

/* AJUSTE FASE 2: títulos das seções ficam centralizados horizontalmente. */
.secao__titulo {
  margin-bottom: var(--space-6);
  text-align: center;
}

@media (max-width: 640px) {
  .secao { padding-block: var(--space-8); }
  .secao--ampla { padding-block: var(--space-10); }
}

/* =============================================================================
   HEADER
   ============================================================================= */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 247, 244, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(194, 177, 156, 0.35);
  min-height: var(--altura-header);
}

.cabecalho__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--altura-header);
}

.cabecalho__marca {
  display: flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  color: var(--cor-azul-marinho);
}

/* Logo da marca no header. A altura é fixada em 2.25rem (36px) para caber
   com folga dentro do header (4.5rem) e a largura fica automática para
   preservar a proporção original da imagem (1631×172 ≈ 9.5:1, ~341px). */
.cabecalho__marca-logo {
  display: block;
  height: 2.25rem;
  width: auto;
}

.cabecalho__marca-nome {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}

.cabecalho__marca-cargo {
  font-size: var(--fs-xs);
  color: var(--cor-marrom-claro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.cabecalho__lista {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0;
  margin: 0;
}

.cabecalho__lista li + li { margin-top: 0; }

.cabecalho__link {
  color: var(--cor-azul-marinho);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--space-2) 0;
  position: relative;
  display: inline-block;
}

/* Sublinhado animado no hover/foco (apenas para links não-CTA). */
.cabecalho__link:not(.cabecalho__link--cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--cor-azul-turquesa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao-rapida);
}

.cabecalho__link:hover::after,
.cabecalho__link:focus-visible::after {
  transform: scaleX(1);
}

/* CTA "Agendar Consulta" — estilo de botão dentro do menu. */
.cabecalho__link--cta {
  background: var(--cor-azul-petroleo-principal);
  color: var(--cor-off-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--raio-medio);
  transition: background var(--transicao-rapida);
}

.cabecalho__link--cta:hover,
.cabecalho__link--cta:focus-visible {
  background: var(--cor-azul-marinho);
  color: var(--cor-off-white);
}

/* ----- Botão hambúrguer (mobile) ----- */
.cabecalho__hamburguer {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-medio);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

.hamburguer__barra {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--cor-azul-marinho);
  transition:
    transform var(--transicao-rapida),
    opacity var(--transicao-rapida);
}

.cabecalho__hamburguer[aria-expanded="true"] .hamburguer__barra:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.cabecalho__hamburguer[aria-expanded="true"] .hamburguer__barra:nth-child(2) {
  opacity: 0;
}
.cabecalho__hamburguer[aria-expanded="true"] .hamburguer__barra:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ----- Responsivo: até 800px o menu vira hambúrguer ----- */
@media (max-width: 800px) {
  .cabecalho__hamburguer { display: inline-flex; }

  .cabecalho__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-pagina);
    border-bottom: 1px solid var(--cor-borda);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transicao-media);
  }

  .cabecalho__nav[data-aberto="true"] {
    max-height: 32rem;
    box-shadow: var(--sombra-suave);
  }

  .cabecalho__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--padding-lateral);
  }

  .cabecalho__lista li {
    border-bottom: 1px solid rgba(194, 177, 156, 0.25);
  }

  .cabecalho__lista li:last-child {
    border-bottom: none;
  }

  .cabecalho__link {
    display: block;
    padding: var(--space-4) 0;
    font-size: var(--fs-base);
  }

  .cabecalho__link--cta {
    margin-top: var(--space-3);
    text-align: center;
  }
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.rodape {
  background: var(--cor-azul-marinho);
  color: var(--cor-off-white);
  padding-block: var(--space-10) var(--space-5);
  margin-top: var(--space-12);
}

.rodape__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-8);
}

.rodape__coluna p,
.rodape__coluna li {
  color: var(--cor-bege-suave);
  max-width: none;
}

.rodape__marca {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--cor-off-white);
  margin-bottom: var(--space-4);
}

.rodape__marca-nome {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-lg);
}

.rodape__marca-cargo {
  font-size: var(--fs-xs);
  color: var(--cor-marrom-claro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}

.rodape__redes {
  list-style: none;
  display: flex;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

.rodape__redes li + li { margin-top: 0; }

.rodape__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(248, 247, 244, 0.25);
  border-radius: 50%;
  color: var(--cor-off-white);
  text-decoration: none;
  transition:
    background var(--transicao-rapida),
    border-color var(--transicao-rapida);
}

.rodape__redes a:hover,
.rodape__redes a:focus-visible {
  background: var(--cor-azul-petroleo-principal);
  border-color: var(--cor-azul-petroleo-principal);
  color: var(--cor-off-white);
}

.rodape__titulo {
  font-family: var(--fonte-titulo);
  color: var(--cor-off-white);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-3);
  letter-spacing: 0.02em;
}

.rodape__endereco {
  font-style: normal;
}

.rodape__endereco p + p,
.rodape__coluna p + p {
  margin-top: var(--space-2);
}

.rodape__endereco a,
.rodape__legais a {
  color: var(--cor-off-white);
  text-decoration: underline;
  text-decoration-color: rgba(248, 247, 244, 0.4);
}

.rodape__endereco a:hover,
.rodape__legais a:hover,
.rodape__endereco a:focus-visible,
.rodape__legais a:focus-visible {
  color: var(--cor-bege-suave);
  text-decoration-color: var(--cor-bege-suave);
}

.rodape__legais {
  list-style: none;
  padding: 0;
}

.rodape__legais li + li {
  margin-top: var(--space-2);
}

.rodape__creditos {
  text-align: center;
  max-width: var(--largura-max);
  margin: var(--space-8) auto 0;
  padding: var(--space-4) var(--padding-lateral) 0;
  border-top: 1px solid rgba(248, 247, 244, 0.4);
  font-size: var(--fs-xs);
  color: var(--cor-marrom-claro);
}

/* O <p> dentro do bloco de copyright herda, do estilo global de parágrafo,
   max-width: 40rem — o que deixa a caixa do <p> alinhada à esquerda do
   container e dá a impressão de o texto estar fora de centro, mesmo com
   text-align: center no pai. Aqui liberamos a largura para o texto
   centralizar de verdade. */
.rodape__creditos p {
  max-width: none;
  margin: 0;
  color: var(--cor-marrom-claro);
}

/* =============================================================================
   MAPA (iframe Google Maps embed)
   ============================================================================= */
.mapa {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.mapa__container {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--raio-medio);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  background-color: var(--cor-bege-suave);
}

@media (max-width: 640px) {
  .mapa__container { aspect-ratio: 4 / 3; }
}

.mapa__container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.mapa__cta { align-self: flex-start; }