/*
  ==========================================================================
  CIN – Centro Integrado de Neurocirurgia | Folha de estilo principal
  Desenvolvimento: Aliança Produtora & Marketing

  Índice
   1. Fontes
   2. Tokens (cores, tipografia, espaçamento)
   3. Base e reset
   4. Utilitários e acessibilidade
   5. Componentes compartilhados (botões, rótulos, títulos, arco)
   6. Cabeçalho e menu
   7. Hero
   8. Acesso rápido (dentro do hero)
   9. Sobre nós
  10. Nossos serviços
  11. Por que escolher a CIN
  12. Nosso time
  13. Avaliações
  14. Nossos conteúdos
  15. Precisa de ajuda (CTA + mapa)
  16. Rodapé
  17. WhatsApp flutuante e aviso de cookies
  18. Movimento (animações) e preferência por movimento reduzido
      (fica no fim do arquivo para valer sobre todas as seções)
  19. Páginas internas: cabeçalho da página e trilha
  20. Texto corrido (sobre, artigos, política)
  21. Sobre nós: visão e missão
  22. Áreas de atuação (índice fixo e áreas numeradas)
  23. Chamada "Precisa de ajuda?" nas páginas internas
  24. Contato e formulário
  25. Página do médico (apresentação, currículo, outros profissionais)
  26. Blog: lista de postagens, artigo e vídeos
  27. Página de links (bio do Instagram)
  ==========================================================================
*/

/* ==========================================================================
   1. FONTES
   Outfit (licença SIL Open Font License), substituta aberta da NeulisAlt.
   Para trocar pela NeulisAlt no futuro, basta alterar --fonte abaixo.
   ========================================================================== */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. TOKENS
   Cores do design system da CIN. Vermelho é só destaque (tarja ou uma
   palavra), nunca fundo de seção e nunca sobre azul em texto.
   ========================================================================== */
:root {
  /* Cores do design system */
  --branco: #ffffff;
  --preto: #181718;
  --azul: #023d9c;
  --azul-marinho: #032473;
  --vermelho: #ee2225;

  /* Apoio derivado do azul (fundos claros e texto secundário) */
  --nevoa: #f1f4fa;
  --linha: #dde3ef;
  --texto-suave: #4b5163;
  --degrade-azul: linear-gradient(180deg, var(--azul) 0%, var(--azul-marinho) 100%);

  /* Tipografia */
  --fonte: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --texto-base: 1.0625rem;             /* 17px */
  --texto-pequeno: 0.9375rem;          /* 15px */
  --titulo-secao: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --titulo-hero: clamp(3.2rem, min(1.2rem + 9vw, 14svh), 9rem);

  /* Espaçamento e forma */
  --largura-max: 76rem;                /* ~1216px */
  --margem-lateral: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --respiro-secao: clamp(4.5rem, 3rem + 6vw, 8rem);
  --raio: 0.5rem;
  --raio-grande: 1.5rem;
  --sombra: 0 1px 2px rgba(3, 36, 115, 0.08), 0 8px 24px -12px rgba(3, 36, 115, 0.25);

  /* Movimento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   3. BASE E RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--fonte);
  font-size: var(--texto-base);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
address {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ==========================================================================
   4. UTILITÁRIOS E ACESSIBILIDADE
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--largura-max) + 2 * var(--margem-lateral));
  margin-inline: auto;
  padding-inline: var(--margem-lateral);
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-conteudo {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--branco);
  color: var(--azul-marinho);
  font-weight: 700;
  border-radius: var(--raio);
  transform: translateY(-200%);
}

.pular-conteudo:focus {
  transform: none;
}

:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

.secao--azul :focus-visible,
.hero :focus-visible,
.rodape :focus-visible,
.cabecalho:not(.cabecalho--solido) :focus-visible {
  outline-color: var(--branco);
}

/* Marcador visível de informação pendente (RQE, diretor técnico) */
.pendente {
  display: inline-block;
  padding: 0 0.4em;
  border: 1px dashed currentColor;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

/* ==========================================================================
   5. COMPONENTES COMPARTILHADOS
   ========================================================================== */
.secao {
  padding-block: var(--respiro-secao);
}

/* Faixa azul em degradê com a textura de rede neural da cover */
.secao--azul {
  position: relative;
  isolation: isolate;
  background: var(--degrade-azul);
  color: var(--branco);
}

.secao--azul::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/fundos/rede-neural-1920.webp") center / cover no-repeat;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.secao--nevoa {
  background: var(--nevoa);
}

.cabeca-secao {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.cabeca-secao--linha {
  display: flex;
  max-width: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

/* Rótulo da seção: pequeno, azul, com um traço que antecede o texto */
.rotulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: var(--azul);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.rotulo::before {
  content: "";
  width: 2rem;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

.rotulo--claro {
  color: var(--branco);
}

.titulo-secao {
  font-size: var(--titulo-secao);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.subtitulo-secao {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* Tarja vermelha: único destaque permitido junto ao título */
.tarja {
  display: inline-block;
  padding: 0.04em 0.28em 0.08em;
  background: var(--vermelho);
  color: var(--branco);
}

/* Moldura em arco (motivo do design system: "cartão em arco") */
.arco {
  border-radius: 999px 999px var(--raio-grande) var(--raio-grande);
}

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.botao--azul {
  background: var(--azul);
  color: var(--branco);
}

.botao--azul:hover {
  background: var(--azul-marinho);
}

.botao--claro {
  background: var(--branco);
  color: var(--azul-marinho);
}

.botao--claro:hover {
  background: var(--nevoa);
}

.botao--contorno {
  border-color: var(--azul);
  background: transparent;
  color: var(--azul);
}

.botao--contorno:hover {
  background: var(--nevoa);
}

.botao--contorno-claro {
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
  color: var(--branco);
}

.botao--contorno-claro:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--branco);
}

/* Link de texto com seta desenhada em CSS (não faz parte do texto) */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--azul);
  text-decoration: none;
}

.link-seta::after {
  content: "";
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  transition: width 0.3s var(--ease);
}

.link-seta:hover::after {
  width: 1.8rem;
}

/* ==========================================================================
   6. CABEÇALHO E MENU
   ========================================================================== */
.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--branco);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease);
}

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5rem;
}

.cabecalho__logo {
  position: relative;
  display: block;
  width: clamp(10.5rem, 8rem + 6vw, 13.25rem);
}

.logo {
  width: 100%;
  height: auto;
  transition: opacity 0.35s var(--ease);
}

.logo--cor {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Estado após rolar: fundo branco e logo colorido */
.cabecalho--solido {
  background: var(--branco);
  color: var(--preto);
  box-shadow: 0 1px 0 var(--linha);
}

.cabecalho--solido .logo--branco {
  opacity: 0;
}

.cabecalho--solido .logo--cor {
  opacity: 1;
}

.cabecalho--solido .menu__cta {
  background: var(--azul);
  color: var(--branco);
}

.menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.menu__lista {
  display: flex;
  gap: 1.5rem;
}

/* Itens do menu sempre em caixa alta (desktop e menu do celular) */
.menu__link {
  position: relative;
  padding-block: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}

.menu__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.menu__link:hover::after {
  transform: scaleX(1);
}

/* Ícones das redes sociais no menu */
.menu__redes {
  display: flex;
  gap: 0.25rem;
}

.menu__rede {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  transition: background-color 0.25s var(--ease);
}

.menu__rede:hover {
  background: rgba(255, 255, 255, 0.16);
}

.cabecalho--solido .menu__rede:hover {
  background: var(--nevoa);
}

.menu__cta {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cabecalho__menu-botao {
  display: none;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.cabecalho__menu-icone,
.cabecalho__menu-icone::before,
.cabecalho__menu-icone::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  margin-inline: auto;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.cabecalho__menu-icone {
  position: relative;
}

.cabecalho__menu-icone::before,
.cabecalho__menu-icone::after {
  content: "";
  position: absolute;
  left: 0;
}

.cabecalho__menu-icone::before {
  top: -7px;
}

.cabecalho__menu-icone::after {
  top: 7px;
}

.cabecalho__menu-botao[aria-expanded="true"] .cabecalho__menu-icone {
  background: transparent;
}

.cabecalho__menu-botao[aria-expanded="true"] .cabecalho__menu-icone::before {
  transform: translateY(7px) rotate(45deg);
}

.cabecalho__menu-botao[aria-expanded="true"] .cabecalho__menu-icone::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu no celular e tablet (abaixo de 1200px o menu vira painel) */
@media (max-width: 74.99em) {
  .cabecalho__menu-botao {
    display: block;
    position: relative;
    z-index: 2;
  }

  .menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.25rem;
    padding: 6rem var(--margem-lateral) 3rem;
    background: var(--degrade-azul);
    color: var(--branco);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s var(--ease), visibility 0.3s;
  }

  .menu--aberto {
    visibility: visible;
    opacity: 1;
  }

  .menu__lista {
    flex-direction: column;
    gap: 1.25rem;
  }

  .menu__link {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  .menu__redes {
    gap: 0.75rem;
  }

  .menu__rede {
    width: 3rem;
    height: 3rem;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
  }

  .cabecalho--solido .menu__rede:hover {
    background: rgba(255, 255, 255, 0.16);
  }

  .cabecalho--menu-aberto {
    color: var(--branco);
  }

  .cabecalho--menu-aberto .logo--branco {
    opacity: 1;
  }

  .cabecalho--menu-aberto .logo--cor {
    opacity: 0;
  }

  .cabecalho--solido .menu__cta {
    background: var(--branco);
    color: var(--azul-marinho);
  }
}

/* ==========================================================================
   7. HERO
   Recompõe a cover oficial: equipe sobre azul, título com tarja vermelha.
   No desktop ocupa 100% da altura da tela, com os atalhos na base.
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--azul-marinho);
  color: var(--branco);
  isolation: isolate;
}

.hero__imagem {
  position: relative;
  z-index: -1;
  grid-row: 1 / -1;
  grid-column: 1;
}

.hero__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

/* Escurece topo e base: o título e os atalhos leem bem sobre os jalecos */
.hero__imagem::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 36, 115, 0.55) 0%, rgba(3, 36, 115, 0) 22%),
    linear-gradient(0deg, rgba(3, 36, 115, 0.96) 0%, rgba(3, 36, 115, 0.72) 24%, rgba(3, 36, 115, 0.25) 46%, rgba(3, 36, 115, 0) 62%);
}

.hero__conteudo {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 7rem;
  padding-bottom: clamp(1.5rem, 4svh, 3rem);
}

.hero__chamada {
  max-width: 14rem;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
}

.hero__titulo {
  align-self: center;
  font-size: var(--titulo-hero);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(3, 36, 115, 0.35);
}

.hero__linha {
  display: block;
}

.hero__linha--1 {
  font-size: 0.5em;
  line-height: 1;
}

.hero__linha--3 {
  margin-top: 0.12em;
  font-size: 0.42em;
}

.hero__linha--3 .tarja {
  text-shadow: none;
}

@media (max-width: 47.99em) {
  .hero {
    grid-template-rows: auto auto;
    min-height: 0;
  }

  /* No celular a foto ocupa a primeira tela inteira; os atalhos vêm depois */
  .hero__imagem {
    grid-row: 1;
  }

  .hero__imagem img {
    object-position: 50% 0%;
  }

  /* Primeira tela do celular: foto, título e chamada */
  .hero__conteudo {
    justify-content: flex-end;
    gap: 1.25rem;
    min-height: 100svh;
    padding-top: 0;
    padding-bottom: 5.5rem;
  }

  .hero__chamada {
    order: 2;
    align-self: center;
    max-width: 18rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
  }

  .hero__titulo {
    order: 1;
  }
}

/* ==========================================================================
   8. ACESSO RÁPIDO
   Dentro do hero: no desktop ficam na base da primeira dobra; no
   celular vêm logo depois dela, em fundo branco.
   ========================================================================== */
.atalhos {
  position: relative;
  z-index: 2;
  grid-row: 2;
  grid-column: 1;
  padding-bottom: clamp(1.25rem, 4svh, 2.5rem);
  color: var(--preto);
}

.atalhos__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.atalho {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.25rem, 1rem + 1svh, 1.75rem) 1.75rem;
  background: var(--branco);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
}

.atalho p {
  flex: 1;
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
  line-height: 1.5;
}

.atalho__titulo {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.atalho--destaque {
  background: var(--degrade-azul);
  color: var(--branco);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), var(--sombra);
}

.atalho--destaque p,
.atalho--destaque .link-seta {
  color: var(--branco);
}

@media (max-width: 63.99em) {
  .atalhos__grade {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 47.99em) {
  .atalhos {
    padding-block: 1.5rem 0;
    background: var(--branco);
  }
}

/* ==========================================================================
   9. SOBRE NÓS
   ========================================================================== */
.sobre__grade {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 2rem + 4vw, 6rem);
  align-items: center;
}

.sobre__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.sobre__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 38rem;
}

.sobre__texto .titulo-secao {
  margin-top: -0.5rem;
}

.sobre__destaque {
  padding-left: 1.25rem;
  border-left: 3px solid var(--azul);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
}

.sobre__texto > p:not(.rotulo):not(.sobre__destaque) {
  color: var(--texto-suave);
}

@media (max-width: 63.99em) {
  .sobre__grade {
    grid-template-columns: 1fr;
  }

  .sobre__figura {
    max-width: 26rem;
  }
}

/* ==========================================================================
   10. NOSSOS SERVIÇOS
   ========================================================================== */
.servicos__grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* Cartões com a mesma altura: o corpo cresce para preencher */
.servico {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--branco);
  color: var(--preto);
  border-radius: var(--raio-grande);
}

.servico__imagem {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.servico__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.75rem 2rem;
}

.servico__corpo p {
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.servico__titulo {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.servico__subtitulo {
  font-size: var(--texto-pequeno);
  font-weight: 700;
  color: var(--azul);
}

.servico__hospitais {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: -0.5rem;
}

.servico__hospitais li {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
}

@media (max-width: 63.99em) {
  .servicos__grade {
    grid-template-columns: 1fr;
    max-width: 36rem;
  }
}

/* ==========================================================================
   11. POR QUE ESCOLHER A CIN
   ========================================================================== */
.escolher__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 2rem + 4vw, 6rem);
}

.escolher__intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.escolher__intro > p {
  max-width: 34rem;
  color: var(--texto-suave);
  font-size: 1.125rem;
}

.escolher__imagens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.escolher__imagens img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio-grande);
}

.escolher__imagens img:last-child {
  margin-top: 3rem;
}

.provas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  counter-reset: none;
}

.prova {
  display: grid;
  gap: 0.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--linha);
}

.prova:last-child {
  border-bottom: 1px solid var(--linha);
}

.prova__numero {
  color: var(--azul);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.prova__prefixo {
  display: block;
  font-size: 0.3em;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.prova__titulo {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.prova p:last-child {
  max-width: 32rem;
  color: var(--texto-suave);
}

@media (max-width: 63.99em) {
  .escolher__grade {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   12. NOSSO TIME
   ========================================================================== */
/*
  Grade em 6 trilhas: cada cartão ocupa 2 (3 por linha). Quando a última
  linha fica incompleta, os cartões dela são centralizados.
*/
.equipe__grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1rem, 0.5rem + 2vw, 2rem);
}

.equipe__grade > .medico {
  grid-column: span 2;
}

.equipe__grade > .medico:nth-child(3n + 1):nth-last-child(2) {
  grid-column: 2 / span 2;
}

.equipe__grade > .medico:nth-child(3n + 1):last-child {
  grid-column: 3 / span 2;
}

.medico__link {
  display: block;
  text-decoration: none;
}

.medico__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--preto);
  transition: transform 0.6s var(--ease), border-radius 0.6s var(--ease);
}

.medico__link:hover .medico__foto {
  transform: translateY(-6px);
}

.medico__nome {
  margin-top: 1.25rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
  transition: text-decoration-color 0.3s var(--ease);
}

.medico__link:hover .medico__nome {
  text-decoration-color: var(--azul);
}

.medico__registro {
  margin-top: 0.35rem;
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

@media (max-width: 63.99em) {
  /* 2 por linha: grade em 4 trilhas, cartão sozinho no fim fica centralizado */
  .equipe__grade {
    grid-template-columns: repeat(4, 1fr);
  }

  .equipe__grade > .medico:nth-child(3n + 1):nth-last-child(2),
  .equipe__grade > .medico:nth-child(3n + 1):last-child {
    grid-column: span 2;
  }

  .equipe__grade > .medico:nth-child(2n + 1):last-child {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 34.99em) {
  .equipe__grade {
    gap: 2rem 0.875rem;
  }

  .medico__nome {
    margin-top: 0.85rem;
    font-size: 1rem;
  }

  .medico__registro {
    font-size: 0.8125rem;
    line-height: 1.45;
  }
}

/* ==========================================================================
   13. AVALIAÇÕES (carrossel com rolagem horizontal)
   ========================================================================== */
.carrossel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, calc((100% - 4.5rem) / 4));
  gap: 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.carrossel::-webkit-scrollbar {
  display: none;
}

.depoimento {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 17rem;
  padding: 2rem;
  background: var(--nevoa);
  border-radius: var(--raio-grande);
  scroll-snap-align: start;
}

.depoimento__texto {
  position: relative;
  padding-top: 2.25rem;
  font-size: 1.125rem;
  line-height: 1.5;
}

.depoimento__texto::before {
  content: "\201C";
  position: absolute;
  top: -0.4rem;
  left: -0.1rem;
  color: var(--azul);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
}

.depoimento__autor {
  font-weight: 700;
}

.depoimento__autor span {
  display: block;
  color: var(--texto-suave);
  font-size: 0.875rem;
  font-weight: 400;
}

.carrossel__controles {
  display: flex;
  gap: 0.5rem;
}

.carrossel__controles[hidden] {
  display: none;
}

.carrossel__botao {
  position: relative;
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--azul);
  border-radius: 50%;
  background: transparent;
  color: var(--azul);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.carrossel__botao::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-35%, -50%) rotate(45deg);
}

.carrossel__botao--proximo::before {
  transform: translate(-65%, -50%) rotate(-135deg);
}

.carrossel__botao:hover {
  background: var(--azul);
  color: var(--branco);
}

.carrossel__botao:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
  color: var(--azul);
}

@media (max-width: 47.99em) {
  .carrossel {
    grid-auto-columns: 85%;
  }
}

/* ==========================================================================
   14. NOSSOS CONTEÚDOS (posts e vídeos)
   ========================================================================== */
.posts {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.5rem;
  margin-bottom: clamp(3.5rem, 3rem + 3vw, 5.5rem);
}

.post--principal {
  grid-row: span 2;
}

.post__link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  text-decoration: none;
}

.post__imagem {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio-grande);
  transition: opacity 0.3s var(--ease);
}

.post--principal .post__imagem {
  flex: 1;
  aspect-ratio: auto;
  min-height: 18rem;
}

.post__link:hover .post__imagem {
  opacity: 0.88;
}

.post__categoria {
  color: var(--azul);
  font-size: 0.8125rem;
  font-weight: 700;
}

.post__titulo {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.post--principal .post__titulo {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 800;
}

.post__link:hover .post__titulo {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--azul);
}

.videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.video__capa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--raio-grande);
  background: var(--azul-marinho);
}

.video__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}

.video__capa:hover img {
  opacity: 1;
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--branco);
  transform: translate(-50%, -50%);
  box-shadow: var(--sombra);
}

.video__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent var(--azul);
  transform: translate(-50%, -50%);
}

.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--raio-grande);
}

.video__titulo {
  margin-top: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 63.99em) {
  .posts {
    grid-template-columns: 1fr 1fr;
  }

  .post--principal {
    grid-column: span 2;
    grid-row: auto;
  }

  .post--principal .post__imagem {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .videos {
    grid-template-columns: 1fr;
    max-width: 36rem;
  }
}

@media (max-width: 34.99em) {
  .posts {
    grid-template-columns: 1fr;
  }

  .post--principal {
    grid-column: auto;
  }
}

/* ==========================================================================
   15. PRECISA DE AJUDA (CTA + mapa sob demanda)
   ========================================================================== */
.ajuda__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 2rem + 4vw, 6rem);
  align-items: center;
}

.ajuda__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.ajuda__sub {
  font-size: 1.25rem;
  font-weight: 500;
}

.ajuda__telefone {
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
}

.ajuda__telefone a {
  text-decoration: none;
}

.ajuda__telefone a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.15em;
}

.mapa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.25rem;
  min-height: 20rem;
  padding: clamp(1.75rem, 1.5rem + 1.5vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--raio-grande);
  background: rgba(3, 36, 115, 0.45);
}

.mapa__endereco {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

.mapa__aviso {
  font-size: 0.8125rem;
  opacity: 0.8;
}

.mapa--carregado {
  padding: 0;
  overflow: hidden;
}

.mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  border: 0;
}

@media (max-width: 63.99em) {
  .ajuda__grade {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   16. RODAPÉ
   ========================================================================== */
.rodape {
  padding-top: clamp(3.5rem, 3rem + 3vw, 5rem);
  background: var(--azul-marinho);
  color: var(--branco);
  font-size: var(--texto-pequeno);
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.rodape__marca img {
  width: 13rem;
  margin-bottom: 1.5rem;
}

.rodape__endereco,
.rodape__horario {
  line-height: 1.7;
  opacity: 0.9;
}

.rodape__horario {
  margin-top: 0.75rem;
}

.rodape__titulo {
  margin-bottom: 1rem;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
}

.rodape__coluna ul {
  display: grid;
  gap: 0.6rem;
}

.rodape a {
  text-decoration: none;
}

.rodape a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.rodape__legal p + p {
  margin-top: 0.6rem;
}

.rodape__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.rodape__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--margem-lateral);
  right: var(--margem-lateral);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 63.99em) {
  .rodape__grade {
    grid-template-columns: 1fr 1fr;
  }

  .rodape__marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 34.99em) {
  .rodape__grade {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   17. WHATSAPP FLUTUANTE E AVISO DE COOKIES
   ========================================================================== */
.whatsapp-flutuante {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco);
  fill: currentColor;
  box-shadow: 0 10px 30px -8px rgba(3, 36, 115, 0.6);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.whatsapp-flutuante:hover {
  background: var(--azul-marinho);
  transform: translateY(-3px);
}

.whatsapp-flutuante svg {
  fill: currentColor;
}

.cookies {
  position: fixed;
  left: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  z-index: 60;
  display: grid;
  gap: 1rem;
  max-width: 26rem;
  padding: 1.5rem;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra);
  font-size: 0.9rem;
  line-height: 1.5;
}

.cookies[hidden] {
  display: none;
}

.cookies a {
  color: var(--azul);
  font-weight: 700;
}

.cookies__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cookies .botao {
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
}

@media (max-width: 34.99em) {
  .cookies {
    right: 1rem;
    max-width: none;
  }
}

/* ==========================================================================
   19. PÁGINAS INTERNAS: CABEÇALHO DA PÁGINA E TRILHA
   ========================================================================== */
.cabeca-pagina {
  padding-top: clamp(8rem, 6rem + 6vw, 11rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.cabeca-pagina__interno {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cabeca-pagina__titulo {
  max-width: 22ch;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.cabeca-pagina--artigo .cabeca-pagina__titulo {
  max-width: 28ch;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem);
}

.cabeca-pagina__sub {
  font-size: 1.125rem;
  font-weight: 500;
  opacity: 0.92;
}

.trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.trilha li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.trilha li + li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}

.trilha a {
  text-decoration: none;
  opacity: 0.85;
}

.trilha a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  opacity: 1;
}

.trilha [aria-current="page"] {
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Seção que encosta na anterior, sem respiro no topo */
.secao--sem-topo {
  padding-top: 0;
}

.cabeca-secao__intro {
  margin-top: 1.25rem;
  color: var(--texto-suave);
  font-size: 1.125rem;
}

/* ==========================================================================
   20. TEXTO CORRIDO (sobre, artigos, política)
   ========================================================================== */
.texto {
  max-width: 44rem;
}

.texto > * + * {
  margin-top: 1.1rem;
}

.texto p,
.texto li {
  color: var(--texto-suave);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.texto h2 {
  margin-top: 2.75rem;
  color: var(--preto);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
}

.texto .titulo-secao {
  margin-top: 0;
  font-size: var(--titulo-secao);
  font-weight: 900;
  line-height: 1;
}

.texto h2 + p,
.texto h2 + ul {
  margin-top: 0.75rem;
}

.texto strong {
  color: var(--preto);
  font-weight: 700;
}

.texto a {
  color: var(--azul);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

.texto ul,
.texto ol {
  display: grid;
  gap: 0.6rem;
  padding-left: 1.4rem;
}

.texto ul {
  list-style: disc;
}

.texto ol {
  list-style: decimal;
}

.texto li::marker {
  color: var(--azul);
}

.texto sup {
  font-size: 0.7em;
}

.texto__figura {
  margin-block: 2.5rem;
}

.texto__figura img {
  width: 100%;
  border-radius: var(--raio-grande);
}

.texto__figura--estreita {
  max-width: 26rem;
}

.texto__figura--pequena {
  max-width: 18rem;
}

.texto__figura figcaption {
  margin-top: 0.75rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
  font-style: italic;
}

.texto__referencias li {
  font-size: 0.9375rem;
}

.texto__assinatura {
  margin-top: 3rem;
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--azul);
  border-radius: 0 var(--raio-grande) var(--raio-grande) 0;
  background: var(--nevoa);
}

.texto__assinatura p {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.texto__assinatura p + p {
  margin-top: 0.5rem;
}

/* ==========================================================================
   21. SOBRE NÓS: VISÃO E MISSÃO
   ========================================================================== */
.sobre__texto.texto {
  max-width: 40rem;
}

.proposito__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.proposito__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.75rem, 1.5rem + 1.5vw, 3rem);
  border-radius: var(--raio-grande);
  background: var(--nevoa);
}

.proposito__item p {
  color: var(--texto-suave);
  font-size: 1.125rem;
}

.proposito__titulo {
  color: var(--azul);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.proposito__item--azul {
  background: var(--degrade-azul);
  color: var(--branco);
}

.proposito__item--azul .proposito__titulo,
.proposito__item--azul p {
  color: var(--branco);
}

@media (max-width: 47.99em) {
  .proposito__grade {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   22. ÁREAS DE ATUAÇÃO
   Índice numerado fixo à esquerda (desktop) e áreas em sequência à
   direita. O main.js marca no índice a área que está na tela.
   ========================================================================== */
.areas__layout {
  display: grid;
  grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
}

.areas__indice {
  position: sticky;
  top: 7rem;
}

.areas__indice ol {
  display: grid;
  border-top: 1px solid var(--linha);
}

.areas__indice a {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.85rem 0.75rem 0.85rem 0;
  border-bottom: 1px solid var(--linha);
  color: var(--texto-suave);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.25s var(--ease), padding 0.35s var(--ease), background-color 0.25s var(--ease);
}

.areas__indice-numero {
  color: var(--azul);
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.areas__indice a:hover {
  color: var(--preto);
}

.areas__indice a[aria-current="true"] {
  padding-left: 0.85rem;
  background: var(--nevoa);
  box-shadow: inset 3px 0 0 var(--azul);
  color: var(--preto);
}

.areas__lista {
  display: grid;
  gap: clamp(4rem, 3rem + 3vw, 6.5rem);
}

.area {
  display: grid;
  gap: 1.5rem;
  scroll-margin-top: 7rem;
}

.area__cabeca {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
}

.area__numero {
  color: var(--azul);
  font-size: clamp(2.75rem, 2rem + 2.5vw, 4.25rem);
  font-weight: 900;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}

.area__titulo {
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

.area__imagem {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raio-grande);
}

.area__texto {
  max-width: 46rem;
  color: var(--texto-suave);
  font-size: 1.0625rem;
  line-height: 1.75;
}

@media (max-width: 63.99em) {
  .areas__layout {
    grid-template-columns: 1fr;
  }

  .areas__indice {
    position: static;
  }

  .areas__indice ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 0;
  }

  .areas__indice a,
  .areas__indice a[aria-current="true"] {
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--linha);
    border-radius: 999px;
    background: var(--branco);
    box-shadow: none;
  }
}

/* Cartões de navegação (fim da página de áreas) */
.cartoes-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.cartao-nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-grande);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.cartao-nav:hover {
  border-color: var(--azul);
  box-shadow: var(--sombra);
}

.cartao-nav p {
  flex: 1;
  color: var(--texto-suave);
  font-size: var(--texto-pequeno);
}

.cartao-nav__titulo {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

@media (max-width: 63.99em) {
  .cartoes-nav {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 34.99em) {
  .cartoes-nav {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   23. CHAMADA "PRECISA DE AJUDA?" NAS PÁGINAS INTERNAS
   ========================================================================== */
.ajuda__sub--longo {
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.canais {
  display: grid;
  gap: 1rem;
}

.canal {
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--raio-grande);
  background: rgba(3, 36, 115, 0.45);
}

.canal__titulo {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.canal__numero {
  margin-top: 0.35rem;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 900;
  line-height: 1.1;
}

.canal__numero a {
  text-decoration: none;
}

.canal__numero a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.15em;
}

/* ==========================================================================
   24. CONTATO E FORMULÁRIO
   Painel azul (endereço, telefone, horário) ao lado do formulário em
   cartão branco; mapa sob demanda logo abaixo.
   ========================================================================== */
.contato__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  align-items: stretch;
}

.contato__painel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow: hidden;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-radius: 2rem;
  background: var(--degrade-azul);
  color: var(--branco);
}

/* Textura de rede neural, como nas faixas azuis */
.contato__painel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/fundos/rede-neural-1920.webp") center / cover no-repeat;
  opacity: 0.5;
  mix-blend-mode: screen;
}

/* Arco decorativo (motivo do design system) */
.contato__painel::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -26%;
  z-index: -1;
  width: 62%;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px 999px 0 0;
}

.info {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.info__titulo {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.info address,
.info p {
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.5;
}

.info__telefone a {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
}

.info__telefone a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.15em;
}

.contato__redes {
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
}

.contato__redes .menu__rede {
  width: 3rem;
  height: 3rem;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: var(--branco);
}

.contato__redes .menu__rede:hover {
  border-color: var(--branco);
  background: rgba(255, 255, 255, 0.14);
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-radius: 2rem;
  background: var(--branco);
  box-shadow: var(--sombra);
}

.formulario > p {
  color: var(--texto-suave);
  font-size: 1.125rem;
}

.form {
  display: grid;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.form__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.campo {
  display: grid;
  gap: 0.4rem;
}

.campo label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--linha);
  border-radius: 0.875rem;
  background: var(--nevoa);
  color: var(--preto);
  font: inherit;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.campo textarea {
  resize: vertical;
  min-height: 9rem;
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul);
  background: var(--branco);
  box-shadow: 0 0 0 4px rgba(2, 61, 156, 0.16);
}

.form__aviso {
  color: var(--texto-suave);
  font-size: 0.875rem;
}

.form .botao {
  justify-self: start;
  min-width: 10rem;
}

/* Mapa sob demanda em fundo claro (pontilhado sugere um mapa) */
.mapa--claro {
  border-color: var(--linha);
  background:
    radial-gradient(circle at 1px 1px, var(--linha) 1.2px, transparent 0) 0 0 / 22px 22px,
    var(--branco);
  color: var(--preto);
}

.mapa--claro .mapa__endereco {
  font-size: 1.125rem;
}

.contato__mapa {
  align-items: center;
  min-height: 17rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: 2rem;
  text-align: center;
}

@media (max-width: 63.99em) {
  .contato__grade {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 34.99em) {
  .form__linha {
    grid-template-columns: 1fr;
  }

  .contato__painel,
  .formulario,
  .contato__mapa {
    border-radius: var(--raio-grande);
  }
}

/* ==========================================================================
   25. PÁGINA DO MÉDICO
   Apresentação em faixa azul com retrato recortado sobre o arco,
   currículo editorial (trajetória numerada + cartão de formação) e
   retratos da equipe para navegar entre os profissionais.
   ========================================================================== */
.medico-hero {
  overflow: hidden;
  padding-top: clamp(7rem, 5.5rem + 4vw, 9.5rem);
}

.medico-hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 13fr) minmax(0, 11fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: end;
}

.medico-hero__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  align-self: center;
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}

.medico-hero__nome {
  margin-top: 0.5rem;
  font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
}

.medico-hero__registro {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 500;
  opacity: 0.92;
}

/* Selo do responsável técnico */
.medico-hero__selo {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.9375rem;
  font-weight: 700;
}

.medico-hero__intro {
  max-width: 38rem;
  font-size: 1.125rem;
  line-height: 1.65;
  opacity: 0.92;
}

.medico-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.medico-hero__retrato {
  position: relative;
  width: 100%;
  max-width: 36rem;
  justify-self: end;
}

/* Arco luminoso atrás do retrato; a cabeça "sai" do arco */
.medico-hero__retrato::before {
  content: "";
  position: absolute;
  inset: 11% 6% 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(90% 55% at 50% 18%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
}

.medico-hero__retrato img {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 30px 40px rgba(3, 20, 70, 0.35));
}

@media (max-width: 63.99em) {
  .medico-hero__grade {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .medico-hero__texto {
    padding-bottom: 2.5rem;
  }

  .medico-hero__retrato {
    max-width: 24rem;
    justify-self: center;
  }
}

/* Currículo */
.curriculo__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 2rem + 4vw, 6rem);
  align-items: start;
}

.curriculo__foto {
  position: sticky;
  top: 7rem;
}

.curriculo__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--preto);
}

.curriculo--sem-foto .curriculo__grade {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(54rem + 2 * var(--margem-lateral));
}

.curriculo__conteudo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.curriculo__conteudo .titulo-secao {
  margin-bottom: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
}

/* Trajetória: itens numerados, separados por linhas finas */
.trajetoria {
  width: 100%;
  border-top: 1px solid var(--linha);
  counter-reset: item;
}

.trajetoria li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linha);
  color: var(--texto-suave);
  font-size: 1.0625rem;
  line-height: 1.6;
  counter-increment: item;
}

.trajetoria li::before {
  content: counter(item, decimal-leading-zero);
  padding-top: 0.12rem;
  color: var(--azul);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Formação acadêmica: cartão azul com marcas de verificação */
.credenciais {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  overflow: hidden;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  border-radius: var(--raio-grande);
  background: var(--degrade-azul);
  color: var(--branco);
}

.credenciais::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/fundos/rede-neural-1920.webp") center / cover no-repeat;
  opacity: 0.4;
  mix-blend-mode: screen;
}

.credenciais__titulo {
  margin-bottom: 1.5rem;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.credenciais__lista {
  display: grid;
  gap: 1rem;
}

.credenciais__lista li {
  position: relative;
  padding-left: 2.25rem;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.credenciais__lista li::before {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.credenciais__lista li::after {
  content: "";
  position: absolute;
  top: calc(0.1em + 0.36rem);
  left: 0.52rem;
  width: 0.38rem;
  height: 0.62rem;
  border-right: 2px solid var(--branco);
  border-bottom: 2px solid var(--branco);
  transform: rotate(45deg);
}

.curriculo__redes {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.curriculo__redes-titulo {
  font-size: 1.1rem;
  font-weight: 800;
}

.redes-medico {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.rede-medico {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--azul);
  border-radius: 999px;
  color: var(--azul);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.rede-medico:hover {
  background: var(--azul);
  color: var(--branco);
}

.curriculo__cta {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (max-width: 63.99em) {
  .curriculo__grade {
    grid-template-columns: 1fr;
  }

  .curriculo__foto {
    position: static;
    max-width: 24rem;
  }
}

@media (max-width: 34.99em) {
  .trajetoria li {
    grid-template-columns: 2.25rem 1fr;
    gap: 0.75rem;
    font-size: 1rem;
  }
}

/* Outros profissionais: retratos recortados sobre o arco azul */
.colegas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.colega__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

.colega__arco {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px var(--raio-grande) var(--raio-grande);
  background: var(--degrade-azul);
}

.colega__arco::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/fundos/rede-neural-1920.webp") center / cover no-repeat;
  opacity: 0.45;
  mix-blend-mode: screen;
}

.colega__foto {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(5%);
  transition: transform 0.6s var(--ease);
}

.colega__link:hover .colega__foto {
  transform: translateY(0) scale(1.04);
}

.colega__nome {
  margin-top: 1rem;
  color: var(--preto);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.3s var(--ease);
}

.colega__link:hover .colega__nome {
  text-decoration-color: var(--azul);
}

.colega__registro {
  margin-top: 0.3rem;
  color: var(--texto-suave);
  font-size: 0.8125rem;
}

@media (max-width: 47.99em) {
  .colegas {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 0.875rem;
  }
}

/* ==========================================================================
   26. BLOG: LISTA DE POSTAGENS, ARTIGO E VÍDEOS
   ========================================================================== */

/* --- Cartões de artigo (lista do blog e "Veja mais conteúdos") --- */
.posts-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 1.5rem + 1.5vw, 3rem) 1.5rem;
}

.posts-grade--blog {
  grid-template-columns: repeat(6, 1fr);
}

.posts-grade--blog .post-cartao {
  grid-column: span 2;
}

.posts-grade--blog .post-cartao--largo {
  grid-column: span 3;
}

.post-cartao__link {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  text-decoration: none;
}

.post-cartao__imagem {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--raio-grande);
  background: var(--nevoa);
}

.post-cartao--largo .post-cartao__imagem {
  aspect-ratio: 16 / 10;
}

.post-cartao__imagem img,
.post-destaque__imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.post-cartao__link:hover .post-cartao__imagem img,
.post-destaque__link:hover .post-destaque__imagem img {
  transform: scale(1.04);
}

.post-cartao__texto {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.post-cartao__categoria {
  color: var(--azul);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-cartao__titulo {
  color: var(--preto);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
  transition: color 0.25s var(--ease);
}

.post-cartao--largo .post-cartao__titulo {
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
}

.post-cartao__link:hover .post-cartao__titulo,
.post-destaque__link:hover .post-destaque__titulo {
  color: var(--azul);
}

.post-cartao__resumo {
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1.6;
}

.post-cartao__meta {
  color: var(--texto-suave);
  font-size: 0.875rem;
}

/* --- Post em destaque (o mais recente) --- */
.post-destaque {
  margin-bottom: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  padding-bottom: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  border-bottom: 1px solid var(--linha);
}

.post-destaque__link {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: center;
  text-decoration: none;
}

.post-destaque__imagem {
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--raio-grande);
  background: var(--nevoa);
}

.post-destaque__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.post-destaque__titulo {
  color: var(--preto);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  font-weight: 900;
  line-height: 1.02;
  text-transform: uppercase;
  text-wrap: balance;
  transition: color 0.25s var(--ease);
}

.post-destaque__resumo {
  color: var(--texto-suave);
  font-size: 1.125rem;
  line-height: 1.65;
}

.post-destaque__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.post-destaque__ler {
  margin-top: 0.5rem;
}

.post-destaque__link:hover .link-seta::after {
  width: 1.8rem;
}

/* Autor com foto pequena (lista e topo do artigo) */
.autor-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 700;
}

.autor-mini__foto {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

@media (max-width: 63.99em) {
  .posts-grade,
  .posts-grade--blog {
    grid-template-columns: 1fr 1fr;
  }

  .posts-grade--blog .post-cartao,
  .posts-grade--blog .post-cartao--largo {
    grid-column: auto;
  }

  .post-destaque__link {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 34.99em) {
  .posts-grade,
  .posts-grade--blog {
    grid-template-columns: 1fr;
  }
}

/* --- Vídeos --- */
.video-clinica__grade {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}

.video-clinica__texto .titulo-secao {
  max-width: 10ch;
}

.videos--destaque {
  grid-template-columns: 1fr;
}

.video-clinica .video__capa {
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

.videos--destaque .video__titulo {
  font-size: 1.1rem;
}

.videos--grade {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 74.99em) {
  .videos--grade {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }
}

@media (max-width: 63.99em) {
  .video-clinica__grade {
    grid-template-columns: 1fr;
  }

  .videos--destaque {
    max-width: none;
  }
}

@media (max-width: 34.99em) {
  .videos--grade {
    grid-template-columns: 1fr;
  }

  .cabeca-secao--linha {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* --- Barra de progresso da leitura --- */
.progresso-leitura {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}

.progresso-leitura__barra {
  display: block;
  height: 100%;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* --- Topo do artigo --- */
.artigo-topo {
  padding-top: clamp(7rem, 5.5rem + 4vw, 9.5rem);
  padding-bottom: clamp(9rem, 6rem + 9vw, 15rem);
}

.artigo-topo__interno {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: calc(64rem + 2 * var(--margem-lateral));
}

/* Link "Voltar para Postagens e Vídeos" (seta desenhada em CSS) */
.link-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.5rem 1.1rem 0.5rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.link-voltar::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.link-voltar:hover {
  border-color: var(--branco);
  background: rgba(255, 255, 255, 0.12);
}

.link-voltar:hover::before {
  transform: translateX(-3px) rotate(45deg);
}

.artigo-topo__categoria {
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

.artigo-topo__titulo {
  max-width: 24ch;
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.artigo-topo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.75rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* --- Corpo do artigo: texto + lateral --- */
.artigo {
  padding-bottom: clamp(3.5rem, 3rem + 3vw, 5.5rem);
}

.artigo__grade {
  display: grid;
  grid-template-columns: minmax(0, 44rem) 16rem;
  justify-content: center;
  column-gap: clamp(2.5rem, 1rem + 4vw, 5rem);
}

.artigo__capa {
  position: relative;
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  margin-top: calc(-1 * clamp(6.5rem, 4rem + 7vw, 11.5rem));
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.artigo__capa img {
  width: 100%;
  border-radius: var(--raio-grande);
  box-shadow: 0 40px 70px -40px rgba(3, 36, 115, 0.55);
}

.artigo__capa--estreita {
  max-width: 30rem;
}

.artigo__capa--media {
  max-width: 40rem;
}

.artigo__corpo {
  grid-column: 1;
  width: 100%;
}

.artigo__lateral {
  position: sticky;
  top: 7rem;
  grid-column: 2;
  display: grid;
  gap: 1.75rem;
  align-self: start;
}

/* Cartão do autor */
.autor {
  display: grid;
  justify-items: start;
  gap: 0.2rem;
  padding: 1.5rem;
  border-radius: var(--raio-grande);
  background: var(--nevoa);
}

.autor__foto {
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.85rem;
  border-radius: 50%;
}

.autor__foto--iniciais {
  display: grid;
  place-items: center;
  background: var(--degrade-azul);
  color: var(--branco);
  font-size: 1.2rem;
  font-weight: 800;
}

.autor__rotulo,
.compartilhar__titulo {
  color: var(--texto-suave);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.autor__nome {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.autor__registro {
  color: var(--texto-suave);
  font-size: 0.875rem;
}

.autor__perfil {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
}

/* Compartilhar */
.compartilhar__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.compartilhar__botao {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--linha);
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.compartilhar__botao:hover {
  border-color: var(--azul);
  background: var(--azul);
  color: var(--branco);
}

.compartilhar__botao[hidden] {
  display: none;
}

.compartilhar__aviso {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  color: var(--azul);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (max-width: 63.99em) {
  .artigo__grade {
    grid-template-columns: minmax(0, 44rem);
  }

  .artigo__lateral {
    position: static;
    grid-column: 1;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    align-items: start;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--linha);
  }
}

/* --- Anterior / próximo --- */
.artigo-nav {
  padding-bottom: clamp(3.5rem, 3rem + 3vw, 5.5rem);
}

.artigo-nav__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--linha);
}

.artigo-nav__link {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-grande);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.artigo-nav__link:hover {
  border-color: var(--azul);
  box-shadow: var(--sombra);
}

.artigo-nav__link--proximo {
  justify-content: flex-end;
  text-align: right;
}

.artigo-nav__link img {
  flex-shrink: 0;
  width: 7.5rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--raio);
}

.artigo-nav__texto {
  display: grid;
  gap: 0.35rem;
}

.artigo-nav__rotulo {
  color: var(--azul);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.artigo-nav__titulo {
  font-weight: 800;
  line-height: 1.3;
}

.artigo-nav__todos {
  margin-top: 2rem;
  text-align: center;
}

@media (max-width: 47.99em) {
  .artigo-nav__grade {
    grid-template-columns: 1fr;
  }

  .artigo-nav__vazio {
    display: none;
  }

  .artigo-nav__link img {
    width: 5.5rem;
  }
}

/* ==========================================================================
   27. PÁGINA DE LINKS (bio do Instagram)
   ========================================================================== */
.pagina-links {
  background: var(--azul-marinho);
}

.links-bio {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3rem var(--margem-lateral);
  background: var(--degrade-azul);
  color: var(--branco);
}

.links-bio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/fundos/rede-neural-1920.webp") center / cover no-repeat;
  opacity: 0.55;
  mix-blend-mode: screen;
}

.links-bio__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 30rem;
  text-align: center;
}

.links-bio__logo {
  width: 13rem;
}

.links-bio__titulo {
  font-size: 1.25rem;
  font-weight: 700;
}

.links-bio__lista {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

.link-bio {
  display: block;
  padding: 1rem 1.25rem;
  border-radius: 999px;
  background: var(--branco);
  color: var(--azul-marinho);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}

.link-bio:hover {
  background: var(--nevoa);
  transform: translateY(-2px);
}

.links-bio__redes {
  display: flex;
  gap: 0.75rem;
}

.links-bio__redes .menu__rede {
  width: 3rem;
  height: 3rem;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.links-bio__rodape {
  font-size: 0.8125rem;
  opacity: 0.85;
}

/* ==========================================================================
   18. MOVIMENTO
   Um único momento orquestrado (entrada do hero), cortinas nas imagens
   marcadas com .revelar e contagem nos números. A classe .js é aplicada
   pelo main.js; sem JavaScript tudo aparece normalmente.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Entrada do hero */
  .js .hero__imagem img {
    animation: hero-zoom 1.8s var(--ease) both;
  }

  .js .hero__chamada {
    animation: subir 0.9s var(--ease) 0.5s both;
  }

  .js .hero__linha {
    animation: subir 0.9s var(--ease) both;
  }

  .js .hero__linha--1 {
    animation-delay: 0.15s;
  }

  .js .hero__linha--2 {
    animation-delay: 0.27s;
  }

  .js .hero__linha--3 {
    animation-delay: 0.39s;
  }

  .js .hero__linha--3 .tarja {
    animation: tarja 0.8s var(--ease) 0.75s both;
  }

  .js .atalho {
    animation: subir 0.9s var(--ease) both;
  }

  .js .atalho:nth-child(1) {
    animation-delay: 0.7s;
  }

  .js .atalho:nth-child(2) {
    animation-delay: 0.8s;
  }

  .js .atalho:nth-child(3) {
    animation-delay: 0.9s;
  }

  /* Entrada das páginas internas.
     Médico: texto e retrato descem do topo para a posição final.
     Artigo: o topo sobe suavemente, como no restante do site. */
  .js .medico-hero__texto > * {
    animation: descer 0.9s var(--ease) both;
  }

  .js .artigo-topo__interno > * {
    animation: subir 0.9s var(--ease) both;
  }

  .js .medico-hero__texto > :nth-child(2),
  .js .artigo-topo__interno > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .js .medico-hero__texto > :nth-child(3),
  .js .artigo-topo__interno > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .js .medico-hero__texto > :nth-child(n + 4),
  .js .artigo-topo__interno > :nth-child(n + 4) {
    animation-delay: 0.24s;
  }

  .js .medico-hero__retrato {
    animation: retrato 1.2s var(--ease) 0.15s both;
  }

  .js .artigo__capa {
    animation: subir 1s var(--ease) 0.3s both;
  }

  /* Cortina das imagens ao entrar na tela */
  .js .revelar {
    clip-path: inset(0 0 100% 0 round var(--raio-grande));
    transition: clip-path 1.2s var(--ease);
  }

  .js .revelar.arco {
    clip-path: inset(0 0 100% 0);
  }

  .js .revelar.visivel {
    clip-path: inset(0 0 0 0 round var(--raio-grande));
  }

  .js .revelar.arco.visivel,
  .js .sobre__figura.revelar.visivel {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes hero-zoom {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

@keyframes subir {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes descer {
  from {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Retrato do médico: desce do topo e assenta sobre o arco */
@keyframes retrato {
  from {
    opacity: 0;
    transform: translateY(-2.5rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tarja {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}