/* Fonte Roboto (local) */
@font-face {
  font-family: "Roboto";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2");
}

/* Tokens do Material Design 3 com a paleta da PUC Minas (azul e laranja) */
:root {
  --md-sys-color-primary: #005480;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #cde5f5;
  --md-sys-color-tertiary: #f4a203;
  --md-sys-color-tertiary-container: #ffddab;
  --md-sys-color-on-primary-container: #001e30;
  --md-sys-color-outline-variant: #a9c3d4;
  --md-sys-color-surface: #f6f9fc;
  --md-sys-color-surface-container-low: #ffffff;
  --md-sys-color-on-surface-variant: #40484e;

  --md-sys-shape-large: 16px;
  --md-sys-shape-extra-large: 28px;
  --md-sys-elevation-level2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15);

  --md-sys-typescale-display-large: 400 clamp(2.75rem, 10vw, 3.5625rem) / 1.12 "Roboto", sans-serif;
  --md-sys-typescale-title-large: 400 1.375rem / 1.27 "Roboto", sans-serif;
  --md-sys-typescale-title-medium: 500 1rem / 1.5 "Roboto", sans-serif;
  --md-sys-typescale-body-large: 400 1rem / 1.5 "Roboto", sans-serif;
  --md-sys-typescale-label-medium: 500 .75rem / 1.33 "Roboto", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: "Roboto", sans-serif;
  background:
    radial-gradient(circle at 0% 0%, var(--md-sys-color-primary-container) 0 22vmax, transparent 22.1vmax),
    radial-gradient(circle at 100% 100%, var(--md-sys-color-tertiary-container) 0 20vmax, transparent 20.1vmax),
    var(--md-sys-color-surface);
}

.card {
  width: min(100%, 560px);
  overflow: hidden;
  text-align: center;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-extra-large);
  box-shadow: var(--md-sys-elevation-level2);
}

.hero {
  display: grid;
  place-items: center;
  padding: 40px 24px;
  background: var(--md-sys-color-primary);
}

.logo {
  display: block;
  width: 160px;
  height: auto;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 24px;
}

.content {
  padding: 40px 32px 36px;
}

h1 {
  margin: 0 0 16px;
  font: var(--md-sys-typescale-display-large);
  color: var(--md-sys-color-primary);
}

p {
  margin: 0;
  font: var(--md-sys-typescale-title-large);
  color: var(--md-sys-color-on-surface-variant);
}

.info {
  margin-top: 32px;
  padding: 16px 24px 8px;
  text-align: left;
  background: var(--md-sys-color-primary-container);
  border-radius: var(--md-sys-shape-large);
}

h2 {
  margin: 0 0 8px;
  font: var(--md-sys-typescale-title-medium);
  letter-spacing: .009em;
  color: var(--md-sys-color-primary);
}

dl { margin: 0; }

dl > div {
  padding: 12px 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

dt {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: .05em;
  color: var(--md-sys-color-on-surface-variant);
}

dd {
  margin: 2px 0 0;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-primary-container);
  overflow-wrap: anywhere;
}

.accent {
  height: 8px;
  background: var(--md-sys-color-tertiary);
}