/* Páginas de Impostor Club. Mismos colores y letras que la app (spec 01, "Estilo visual"). */
@font-face { font-family: Onest; src: url(/fuentes/Onest-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Onest; src: url(/fuentes/Onest-Bold.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: Bowlby; src: url(/fuentes/BowlbyOne-Regular.ttf) format("truetype"); font-display: swap; }

:root {
  --lapicera: #2238D8;
  --sombra: #1A2BA8;
  --papelito: #F4F6FF;
  --resaltador: #FFD43B;
  --tinta: #0F1440;
  --tinta-suave: #3A4380;
  --texto-suave: #DDE2FF;
}

* { box-sizing: border-box; }
html { background: var(--lapicera); }
body {
  margin: 0;
  background: var(--lapicera);
  color: var(--tinta);
  font: 17px/1.6 Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
main { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; }

header { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
header a { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
header img { width: 48px; height: 48px; border-radius: 11px; }
header span { font-family: Bowlby, sans-serif; font-size: 22px; letter-spacing: .3px; }

/* El contenido va en un papelito, como en la app. */
.papelito {
  background: var(--papelito);
  border-radius: 14px;
  padding: 32px 28px 28px;
  box-shadow: 12px 14px 0 var(--sombra);
}
h1 { font-family: Bowlby, sans-serif; font-weight: 400; font-size: 34px; line-height: 1.05; margin: 0 0 8px; text-transform: uppercase; }
h2 { font-size: 20px; margin: 32px 0 6px; }
p, ul { margin: 0 0 12px; }
li { margin: 4px 0; }
.fecha { color: var(--tinta-suave); font-size: 14px; margin-bottom: 24px; }
a { color: var(--lapicera); text-underline-offset: 3px; }
a:hover { color: var(--sombra); }
a:focus-visible { outline: 3px solid var(--resaltador); outline-offset: 2px; border-radius: 4px; }
.caja { background: #fff; border: 2px solid #D5DAF5; border-radius: 12px; padding: 16px 18px 6px; margin: 12px 0 16px; }

footer { margin-top: 28px; color: var(--texto-suave); font-size: 15px; }
footer a { color: #fff; }

@media (max-width: 480px) {
  .papelito { padding: 24px 18px 20px; box-shadow: 8px 10px 0 var(--sombra); }
  h1 { font-size: 28px; }
}