/* Tokens visuais — Meester na Futurecom 2026 */
:root {
  --azul: #0000FF;        /* azul Meester */
  --azul-fundo: #0000D6;
  --amarelo: #FEE800;     /* amarelo Meester */
  --tinta: #0B0B45;       /* texto: índigo profundo, não preto */
  --tinta-suave: #4A4A7A;
  --papel: #FFFFFF;
  --nevoa: #EEF0FF;
  --linha: #C9CCF2;
  --erro: #C8002A;
  --ok: #007A4D;
  --raio: 14px;
  --fonte: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel);
}
img { max-width: 100%; }
a { color: var(--azul); }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; box-shadow: 0 0 0 5px var(--azul); }

/* Títulos: Archivo expandido — a assinatura tipográfica da página */
.expandido { font-stretch: 125%; font-weight: 800; letter-spacing: -0.01em; }

/* Barra de logos */
.logos {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; max-width: 720px; margin: 0 auto;
}
.logos .mais { color: var(--tinta-suave); font-size: 14px; }
.logo-img { height: 28px; width: auto; display: block; }
.logo-img.logo-goto { height: 34px; }   /* o GoTo tem a faixa amarela embaixo: um pouco mais alto equilibra */
.logo-texto { font-stretch: 125%; font-weight: 800; font-size: 20px; color: var(--azul); }

.miolo { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 17px;
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .12s ease;
}
.btn:active { transform: scale(.98); }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-fundo); }
.btn-amarelo { background: var(--amarelo); color: var(--tinta); }
.btn-contorno { background: transparent; color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul); }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-largo { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
[hidden] { display: none !important; }