/* Desafio da Saúde - Material 3 em preto e branco (cores em tema.css; o vermelho só existe dentro do logo). */
:root {
  --md-ref-typeface-brand: 'Roboto Flex', Roboto, system-ui, sans-serif;
  --md-ref-typeface-plain: 'Roboto Flex', Roboto, system-ui, sans-serif;
  --md-icon-font: 'Material Symbols Rounded';
  --ease-enfatico: cubic-bezier(0.2, 0, 0, 1);
  --ease-enfatico-entrada: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-outlined-text-field-container-shape: 16px;
  --md-filled-button-container-shape: 16px;
  --md-filled-button-container-height: 56px;
  --md-filled-button-label-text-size: 16px;
  --md-filled-button-leading-space: 24px;
  --md-filled-button-trailing-space: 28px;
  --md-filled-button-with-leading-icon-leading-space: 24px;
  --md-filled-button-with-leading-icon-trailing-space: 28px;
  --md-linear-progress-track-shape: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Cartões recebem foco só por script (leitor de tela anuncia o resultado); sem contorno. */
[tabindex="-1"]:focus { outline: none; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--md-ref-typeface-plain);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  -webkit-font-smoothing: antialiased;
}

md-icon { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Antes do JavaScript definir os componentes, guarda o lugar deles (sem pulo na tela). */
md-outlined-text-field:not(:defined), md-filled-button:not(:defined) { display: block; visibility: hidden; height: 56px; }
md-icon:not(:defined) { display: none; }

.pagina {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
  display: grid;
  gap: 24px;
  align-content: start;
}

/* ---------- topo ---------- */
.hero { display: grid; justify-items: center; text-align: center; gap: 8px; }
.logo { display: block; width: min(360px, 88vw); height: auto; }
.hero-texto {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--md-sys-color-on-surface-variant);
}
.hero-texto strong { color: var(--md-sys-color-on-surface); font-weight: 600; }

/* ---------- cartão da busca ---------- */
.conteudo { display: grid; gap: 16px; align-content: start; min-width: 0; }
.cartao-busca {
  position: relative;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 28px;
  padding: 24px 20px 20px;
  overflow: hidden;
}
.titulo {
  margin: 0;
  font-family: var(--md-ref-typeface-brand);
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--md-sys-color-on-surface);
}
.sub {
  margin: 4px 0 20px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--md-sys-color-on-surface-variant);
}
.busca { display: grid; gap: 12px; }
.busca md-outlined-text-field { width: 100%; }
.busca md-filled-button { width: 100%; }
.progresso { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- resultados ---------- */
.resultado { display: grid; gap: 12px; min-width: 0; }
.resultado:empty { display: none; }
.entra { animation: entra 450ms var(--ease-enfatico-entrada) both; }
.entra:nth-child(2) { animation-delay: 60ms; }
.entra:nth-child(3) { animation-delay: 120ms; }
.entra:nth-child(4) { animation-delay: 180ms; }
.entra:nth-child(5) { animation-delay: 240ms; }
.entra:nth-child(6) { animation-delay: 300ms; }
@keyframes entra { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

.aviso-topo {
  margin: 4px 4px 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--md-sys-color-on-surface-variant);
}
.aviso-topo strong { color: var(--md-sys-color-on-surface); font-weight: 600; }

/* O número de peito, desenhado como o peito da corrida: papel branco, faixa preta impressa e os 4 furos do alfinete. */
.peito {
  position: relative;
  padding: 6px;
  background: #ffffff;
  color: #020202;
  border-radius: 22px;
}
.peito-faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 16px 16px 4px 4px;
  background: #020202;
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.peito-corpo { position: relative; padding: 18px 24px 22px; text-align: center; }
.furo {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #020202;
}
.furo.a { top: 10px; left: 10px; }
.furo.b { top: 10px; right: 10px; }
.furo.c { bottom: 10px; left: 10px; }
.furo.d { bottom: 10px; right: 10px; }
.peito-rotulo {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #5c5c5c;
}
.peito-numero {
  margin: 2px 0 6px;
  font-family: var(--md-ref-typeface-brand);
  font-size: clamp(76px, 26vw, 120px);
  line-height: 1;
  font-weight: 900;
  font-variation-settings: 'wdth' 120, 'opsz' 144;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.peito-nome {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.distancia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid #020202;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

/* Vários resultados: peitos menores em lista. */
.item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 10px 16px 10px 10px;
  background: #ffffff;
  color: #020202;
  border-radius: 16px;
}
.item-numero {
  min-width: 92px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #020202;
  color: #ffffff;
  font-family: var(--md-ref-typeface-brand);
  font-size: 28px;
  line-height: 32px;
  font-weight: 900;
  font-variation-settings: 'wdth' 116;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.item-nome { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.item-dist {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  color: #3d3d3d;
}
.item-dist md-icon { --md-icon-size: 18px; }

/* Nada encontrado / erro. */
.vazio {
  border: 1px solid var(--md-sys-color-outline-variant);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: var(--md-sys-color-surface-container);
}
.vazio md-icon { --md-icon-size: 28px; color: var(--md-sys-color-on-surface-variant); margin-top: 2px; }
.vazio h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.vazio p { margin: 4px 0 0; font-size: 14px; line-height: 20px; letter-spacing: 0.25px; color: var(--md-sys-color-on-surface-variant); }
.vazio ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 20px; color: var(--md-sys-color-on-surface-variant); }

.acoes { display: flex; justify-content: center; }

/* "Em caso de divergência, clique aqui" (WhatsApp da organização). */
.divergencia {
  margin: 4px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--md-sys-color-on-surface-variant);
}
.divergencia a {
  color: var(--md-sys-color-on-surface);
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
}
.divergencia a:focus-visible { outline: 2px solid var(--md-sys-color-on-surface); outline-offset: 2px; }

/* ---------- telas médias e grandes ---------- */
@media (min-width: 600px) {
  .pagina { padding-top: 40px; gap: 32px; }
  .cartao-busca { padding: 28px 28px 28px; }
  .busca { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .busca md-filled-button { width: auto; }
  .titulo { font-size: 28px; line-height: 36px; }
}

@media (min-width: 900px) {
  .pagina {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
    padding-top: 72px;
    align-items: start;
  }
  .hero { position: sticky; top: 72px; gap: 16px; padding-top: 8px; }
  .logo { width: min(500px, 100%); }
  .hero-texto { font-size: 20px; line-height: 28px; max-width: 26ch; }
  .cartao-busca { padding: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .entra { animation: none; }
}

/* ---------- abertura animada (src/intro.js) ---------- */
/* Enquanto a abertura roda, a página fica coberta de preto e um pouco ampliada (ela recua para 100% na saída).
   Se o script falhar, a cobertura some sozinha em 6 s. */
html.intro { overflow: hidden; }
html.intro::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #020202;
  animation: intro-seguranca 0.01s linear 6s forwards;
}
@keyframes intro-seguranca { to { visibility: hidden; } }
html.intro .pagina { transform: scale(1.14); }
.pagina { transform-origin: 50% 40vh; }
#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  touch-action: none;
}