:root {
  --azul-fundo: #EAF2FB;
  --azul-card-borda: #B5D4F4;
  --azul-50: #E6F1FB;
  --azul-mid: #3E78B2;
  --azul-tinta: #0C447C;
  --azul-texto: #185FA5;
  --quente-fundo: #FCEFE3;
  --quente-mid: #F3C9A6;
  --quente-tinta: #9C5A2A;
  --branco: #FFFFFF;
  --raio: 14px;
  --raio-lg: 20px;
  --sombra: 0 1px 2px rgba(12, 68, 124, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--azul-fundo);
  color: var(--azul-tinta);
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

a { color: var(--azul-mid); }

/* ── Topo / navegação ───────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 16px;
  font-size: 14px;
}
.topbar a {
  color: var(--azul-texto);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
}
.topbar a:hover { background: var(--azul-50); }
.topbar .marca { font-weight: 600; color: var(--azul-tinta); margin-right: auto; }

/* ── Hero ───────────────────────────────────────────── */
.hero {
  background: var(--branco);
  border: 1px solid var(--azul-card-borda);
  border-radius: var(--raio-lg);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--sombra);
}
.selo {
  display: inline-block;
  background: var(--quente-fundo);
  color: var(--quente-tinta);
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.hero h1 {
  font-size: 28px;
  color: var(--azul-tinta);
  margin: 0 0 6px;
  font-weight: 700;
}
.hero .subtitulo { color: var(--azul-texto); margin: 0 0 12px; font-size: 15px; }
.hero .convite {
  color: var(--azul-texto);
  margin: 0 auto;
  max-width: 40ch;
  font-size: 16px;
}
.hero .quando {
  margin-top: 16px;
  color: var(--quente-tinta);
  font-weight: 600;
  font-size: 15px;
}

/* ── Seções / títulos ───────────────────────────────── */
.rotulo {
  font-size: 14px;
  color: var(--azul-mid);
  margin: 28px 4px 10px;
}
h2.titulo-pg {
  font-size: 22px;
  color: var(--azul-tinta);
  margin: 8px 0 4px;
}

/* ── Cartões / tiles ────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.tile {
  display: block;
  background: var(--branco);
  border: 1px solid var(--azul-card-borda);
  border-radius: var(--raio);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .08s ease;
}
.tile:hover { transform: translateY(-2px); }
.tile .icone {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--azul-50);
  color: var(--azul-texto);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 10px;
}
.tile.quente .icone { background: var(--quente-fundo); color: var(--quente-tinta); }
.tile h3 { margin: 0 0 4px; font-size: 16px; color: var(--azul-tinta); font-weight: 600; }
.tile p { margin: 0; font-size: 13px; color: var(--azul-texto); }

/* ── Programação ────────────────────────────────────── */
.dia {
  background: var(--branco);
  border: 1px solid var(--azul-card-borda);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.dia .quando-dia { font-size: 13px; color: var(--quente-tinta); font-weight: 600; }
.dia h3 { margin: 4px 0 6px; font-size: 17px; color: var(--azul-tinta); }
.dia p { margin: 0; color: var(--azul-texto); font-size: 15px; }
.dia ul { margin: 8px 0 0; padding-left: 20px; color: var(--azul-texto); }

/* ── Cursos (IA1) ───────────────────────────────────── */
.curso {
  background: var(--branco);
  border: 1px solid var(--azul-card-borda);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.curso .cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.curso h3 { margin: 0; font-size: 17px; color: var(--azul-tinta); }
.curso .inst { color: var(--azul-texto); font-size: 14px; margin: 2px 0 8px; }
.curso .meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.badge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--azul-50);
  color: var(--azul-texto);
}
.badge.idioma-en { background: var(--quente-fundo); color: var(--quente-tinta); }
.curso .obs { font-size: 13px; color: var(--azul-texto); margin: 4px 0 10px; }

/* ── Botões ─────────────────────────────────────────── */
.acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primario { background: var(--azul-mid); color: #fff; }
.btn-secundario { background: #fff; color: var(--azul-texto); border-color: var(--azul-card-borda); }
.btn-link {
  display: inline-block;
  background: var(--quente-fundo); color: var(--quente-tinta);
  border-radius: 999px; padding: 9px 18px; font-weight: 600;
  font-size: 14px; text-decoration: none;
}

/* ── GT / competências ──────────────────────────────── */
.bloco {
  background: var(--branco);
  border: 1px solid var(--azul-card-borda);
  border-radius: var(--raio);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.bloco h3 { margin: 0 0 8px; font-size: 16px; color: var(--azul-mid); }
.comp { padding: 12px 0; border-bottom: 1px solid var(--azul-50); }
.comp:last-child { border-bottom: none; }
.comp .num {
  display: inline-block; min-width: 24px; height: 24px; line-height: 24px;
  text-align: center; border-radius: 50%;
  background: var(--azul-50); color: var(--azul-texto);
  font-size: 13px; font-weight: 600; margin-right: 8px;
}
.comp .tit { font-weight: 600; color: var(--azul-tinta); }
.comp .res { margin: 6px 0 0; color: var(--azul-texto); font-size: 15px; }
.comp details { margin-top: 8px; }
.comp summary { cursor: pointer; color: var(--azul-mid); font-size: 13px; }
.comp details ul { margin: 8px 0 0; padding-left: 20px; color: var(--azul-texto); font-size: 14px; }
.grupo-rotulo { font-size: 13px; color: var(--azul-mid); margin: 14px 0 4px; font-weight: 600; }

.aviso-soft {
  background: var(--quente-fundo);
  color: var(--quente-tinta);
  border-radius: var(--raio);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}

/* ── Rodapé ─────────────────────────────────────────── */
.rodape { text-align: center; color: var(--azul-mid); font-size: 13px; margin-top: 32px; }

/* ── QR ─────────────────────────────────────────────── */
#qr-box { text-align: center; margin-top: 16px; }
#qr-box img { border: 1px solid var(--azul-card-borda); border-radius: var(--raio); background: #fff; padding: 8px; }