:root {
  --papel: #f4f7f8;
  --branco: #ffffff;
  --tinta: #13232a;
  --tinta-suave: #4f6168;
  --linha: #d3dde1;
  --petroleo: #0e4c5a;
  --petroleo-claro: #d8e7eb;
  --laranja: #c9650f;
  --laranja-claro: #f6e3d1;
  --display: "Archivo", "Arial Narrow", sans-serif;
  --texto: "Public Sans", system-ui, sans-serif;
  --largura: 68rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
}

a { color: var(--petroleo); text-underline-offset: 0.2em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }

.pular {
  position: absolute; left: -999px; top: 0;
  background: var(--tinta); color: var(--branco); padding: 0.5rem 1rem;
}
.pular:focus { left: 1rem; top: 1rem; z-index: 10; }

.miolo { max-width: var(--largura); margin: 0 auto; padding: 0 1.25rem; }

/* Cabeçalho */
.topo { border-bottom: 1px solid var(--linha); background: var(--branco); }
.topo .miolo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.marca {
  font-family: var(--display); font-weight: 800; font-stretch: 80%;
  font-size: 1.35rem; letter-spacing: -0.01em; color: var(--tinta); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.marca svg { width: 1.9rem; height: 1.9rem; flex: none; }
.menu { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.menu a { color: var(--tinta-suave); text-decoration: none; font-weight: 600; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--tinta); text-decoration: underline; }

/* Abertura com o placar */
.abertura { padding: 4rem 0 3.5rem; }
.abertura .miolo {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center;
}
.abertura h1 {
  font-family: var(--display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(3rem, 8vw, 5.75rem); line-height: 0.92; letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}
.abertura .linha-fina { font-size: 1.25rem; max-width: 32rem; margin: 0 0 1.5rem; color: var(--tinta-suave); }
.estreia {
  display: inline-block; border: 1px solid var(--tinta); padding: 0.5rem 0.9rem;
  font-weight: 600; background: var(--branco);
}

.placar {
  background: var(--tinta); color: var(--branco); padding: 1.75rem; border-radius: 6px;
}
.placar-titulo { margin: 0 0 1.25rem; color: #c6d3d8; font-size: 0.95rem; }
.placar-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.lado {
  border-radius: 4px; padding: 1rem; min-height: 9rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.lado-sim { background: var(--petroleo); }
.lado-nao { background: var(--laranja); }
.lado span:first-child { font-family: var(--display); font-weight: 800; font-stretch: 80%; font-size: 1.6rem; }
.lado span:last-child {
  font-family: var(--display); font-weight: 700; font-stretch: 75%; font-size: 3.5rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.placar-rodape { margin: 1.25rem 0 0; font-size: 0.95rem; color: #c6d3d8; }

/* Seções */
.secao { padding: 3.5rem 0; border-top: 1px solid var(--linha); }
.secao h2 {
  font-family: var(--display); font-stretch: 80%; font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.05; margin: 0 0 1rem; letter-spacing: -0.01em;
}
.secao .intro { max-width: 40rem; color: var(--tinta-suave); margin: 0 0 2rem; }

.grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.grade h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.grade p { margin: 0; color: var(--tinta-suave); font-size: 1rem; }
.grade > div { border-top: 3px solid var(--petroleo); padding-top: 1rem; }

.regras { counter-reset: regra; list-style: none; padding: 0; margin: 0; max-width: 46rem; }
.regras li {
  counter-increment: regra; position: relative; padding: 0 0 1.25rem 3rem;
}
.regras li::before {
  content: counter(regra); position: absolute; left: 0; top: 0;
  font-family: var(--display); font-weight: 800; font-stretch: 75%; font-size: 1.6rem; line-height: 1.1;
  color: var(--petroleo);
}
.regras strong { display: block; }

.chamada { background: var(--petroleo-claro); }
.chamada p { max-width: 40rem; }

/* Páginas de texto */
.pagina { padding: 3rem 0 4rem; }
.pagina h1 {
  font-family: var(--display); font-stretch: 75%; font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; margin: 0 0 1rem; letter-spacing: -0.02em;
}
.pagina .linha-fina { font-size: 1.2rem; color: var(--tinta-suave); max-width: 40rem; margin: 0 0 2.5rem; }
.texto { max-width: 42rem; }
.texto h2 {
  font-family: var(--display); font-stretch: 80%; font-weight: 800; font-size: 1.75rem;
  margin: 2.5rem 0 0.75rem; line-height: 1.1;
}
.texto ul { padding-left: 1.2rem; }
.texto li { margin-bottom: 0.4rem; }

.vocabulario { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 1rem; }
.vocabulario th, .vocabulario td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
.vocabulario th { background: var(--branco); }

.glossario { max-width: 46rem; margin: 0; }
.glossario div { padding: 1.25rem 0; border-bottom: 1px solid var(--linha); }
.glossario dt {
  font-family: var(--display); font-stretch: 80%; font-weight: 800; font-size: 1.4rem; line-height: 1.15;
}
.glossario dd { margin: 0.35rem 0 0; }

.indice { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0 0 2rem; max-width: 46rem; }

/* Rodapé */
.rodape { background: var(--tinta); color: #c6d3d8; padding: 2.5rem 0; font-size: 0.95rem; }
.rodape a { color: var(--branco); }
.rodape .miolo { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.rodape p { margin: 0 0 0.4rem; }

@media (max-width: 860px) {
  .abertura .miolo { grid-template-columns: 1fr; gap: 2rem; }
  .abertura { padding: 2.5rem 0; }
  .grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .grade { grid-template-columns: 1fr; }
  .lado span:last-child { font-size: 2.75rem; }
}