/* ==========================================================================
   CESPPSI — página central (hub)
   Mesmos tokens da landing do Dr. Carlos (docs/design.md daquele projeto).
   Nada de hex solto fora do :root.

   O arquivo é autocontido de propósito: cada página do site carrega só o seu
   CSS, e o hub usa uma fração pequena do que a landing usa. Ver
   docs/decisoes.md para o porquê de não haver um "base.css" compartilhado.
   ========================================================================== */

:root {
  /* marca */
  --brand-red:      #BD1622;
  --brand-red-dark: #96111B;
  --brand-brown:    #925F36;

  /* superfícies */
  --sage:      #4E5850;
  --sage-dark: #3E463F;
  --paper:     #FBFAF8;
  --paper-2:   #F3F1ED;

  /* linhas: a decorativa e a que precisa passar em contraste de UI (3:1) */
  --line:       #E2DED7;
  --line-forte: #8A857D;

  --whatsapp: #128C7E;

  /* texto */
  --ink:          #1C1B19;
  --ink-soft:     #57534E;
  --on-dark:      #FFFFFF;
  --on-dark-soft: #D6DBD5;

  /* escala de 8 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --radius: 4px;
  --largura: 1160px;
  --largura-hub: 900px;

  --serif: Cambria, Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Trava de rolagem lateral. "clip", nunca "hidden": hidden num eixo obriga o
     outro a virar contêiner de rolagem próprio. Aqui não há sticky, mas a regra
     vale igual no site inteiro. Trava é rede, não correção. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* mantém o rodapé no fim da tela mesmo numa página curta como esta */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
p, ul { margin: 0; }

a { color: inherit; transition: color .18s ease, border-color .18s ease, background-color .18s ease; }

/* foco visível sempre. No rodapé o vermelho da marca some (1,16:1 sobre sage). */
:focus-visible {
  outline: 3px solid var(--brand-red);
  outline-offset: 3px;
  border-radius: 2px;
}
.rodape :focus-visible { outline-color: var(--on-dark); }

img { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- ícones -- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icone {
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.2em;
}

.com-icone {
  display: inline-flex; align-items: center; gap: var(--s1);
  text-decoration: none; white-space: nowrap;
}
.com-icone:hover { color: var(--brand-red); }
.rodape .com-icone:hover { color: var(--on-dark); text-decoration: underline; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.prosa { max-width: 62ch; }

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--s3);
}

/* ------------------------------------------------- pular para o conteúdo -- */
.pular {
  position: absolute; left: var(--s2); top: -100px; z-index: 60;
  background: var(--ink); color: #fff;
  padding: 12px var(--s3); border-radius: var(--radius);
  text-decoration: none; font-weight: 600;
  transition: top .15s ease;
}
.pular:focus-visible { top: var(--s2); }

/* ------------------------------------------------------------------- hub -- */
.hub {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--s6) var(--s5);
}
@media (min-width: 760px) { .hub { padding-block: var(--s7) var(--s6); } }

.hub__interno {
  width: 100%;
  max-width: var(--largura-hub);
  margin-inline: auto;
  padding-inline: var(--s3);
  text-align: center;
}

.hub__logo {
  width: min(400px, 74vw);
  margin-inline: auto;
}

.hub__titulo {
  margin-top: var(--s5);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
}

.hub__lead {
  margin-top: var(--s3);
  margin-inline: auto;      /* .prosa limita a medida; isto recentraliza a caixa */
  color: var(--ink-soft);
}

/* Rótulo da escolha. É <h2> de verdade, com aparência de sobrescrito: o peso
   visual da tela tem que estar nos dois cartões, não no título que os anuncia. */
.hub__rotulo {
  margin-top: var(--s6);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-brown);
}

/* --------------------------------------------------------------- médicos -- */
.medicos {
  list-style: none;
  padding: 0;
  margin-top: var(--s3);
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .medicos { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
}

/* O cartão inteiro é o link. Dois botões primários cheios lado a lado
   competiriam entre si, e no celular o alvo de toque passa a ser o cartão
   todo em vez de um retângulo de 48px. */
.medico {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  height: 100%;
  padding: var(--s4) var(--s3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
@media (min-width: 760px) { .medico { padding: var(--s4); } }

.medico:hover {
  border-color: var(--line-forte);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(28,27,25,.08);
}
@media (prefers-reduced-motion: reduce) {
  .medico { transition: border-color .18s ease; }
  .medico:hover { transform: none; box-shadow: none; }
}

/* Retrato circular no topo do cartão. `object-fit: cover` porque o arquivo já
   sai quadrado do gerador, mas se algum dia entrar um retângulo o círculo não
   pode distorcer o rosto. O fundo é o mesmo cinza claro gravado dentro da
   imagem, então a borda do círculo não aparece contra a foto. */
.medico__foto {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
}

.medico__nome {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}

.medico__registro {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.medico__foco {
  color: var(--ink-soft);
  /* empurra a ação para a base, para os dois cartões terminarem alinhados
     mesmo com quantidade diferente de texto */
  margin-bottom: auto;
}

.medico__acao {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-top: var(--s2);
  color: var(--brand-red);
  font-weight: 600;
}
.medico__acao .icone { transition: transform .18s ease; }
.medico:hover .medico__acao .icone { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .medico:hover .medico__acao .icone { transform: none; }
}

/* Selo de estado: cor sozinha não sinaliza nada, o texto é que diz. */
.medico__selo {
  align-self: flex-start;
  padding: 4px var(--s1);
  background: var(--paper-2);
  border: 1px solid var(--line-forte);
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

/* O cartão em construção continua clicável e legível; o que muda é o peso.
   Fundo transparente e borda tracejada, não uma superfície mais escura: o
   cartão que leva a algo pronto tem que pesar MAIS que o que ainda não leva, e
   um fundo cinza ao lado de um branco inverte isso. Tracejado também é a
   convenção que se lê como "ainda não existe" sem depender de cor. */
.medico--em-obra {
  background: transparent;
  border-style: dashed;
}
.medico--em-obra .medico__nome { color: var(--ink-soft); }

.hub__saida {
  margin-top: var(--s5);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.hub__contatos {
  margin-top: var(--s2);
  display: flex; flex-wrap: wrap;
  gap: var(--s2); justify-content: center;
}

/* A borda é a única affordance destes botões, então ela precisa de 3:1 em
   contraste de UI. `--line` não passa (é decorativa); `--line-forte` dá 3,67:1.
   Altura mínima de 40px: é alvo de toque, não linha de texto. */
.botao-mini {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 40px; padding: 8px var(--s3);
  background: #fff;
  border: 1px solid var(--line-forte);
  border-radius: var(--radius);
  color: var(--ink); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: border-color .18s ease, color .18s ease;
}
.botao-mini:hover { border-color: var(--ink); color: var(--brand-red); }

/* ---------------------------------------------------------------- rodapé -- */
.rodape {
  background: var(--sage-dark);
  color: var(--on-dark-soft);
  padding-block: var(--s5);
  font-size: .92rem;
}
.rodape__grade { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 800px) { .rodape__grade { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s5); } }
.rodape strong { color: #fff; }
.rodape a { color: #fff; }
.rodape__legal {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .85rem;
}
.rodape__credito {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  justify-content: space-between;
  font-size: .8rem;
}
.credito__marca {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}