/* Visual da MIAI Academy (miaiacademy.com), usado por todas as páginas da pasta miai/.
   Segue o visual do site da Mios Tech (miostec.com): papel claro, tinta quase preta, roxo da marca, botões retos e listas
   separadas por linhas finas. As fontes são as da IA Academy: títulos em Bitter e textos e etiquetas em DM Sans. */
:root {
  --papel: #F3F1EC;
  --papel-claro: #FAF9F6;
  --papel-escuro: #E9E6DF;
  --tinta: #14130F;
  --tinta-2: #2A2823;
  --suave: #6A675E;
  --apagado: #98948A;
  --linha: rgba(20, 19, 15, 0.12);
  --linha-forte: rgba(20, 19, 15, 0.28);
  --roxo: #5E1D93;          /* o roxo do logo da MIAI */
  --roxo-vivo: #6D28D9;
  --roxo-fundo: rgba(94, 29, 147, 0.08);
  --verde: #1F7A4D;
  --verde-fundo: rgba(31, 122, 77, 0.1);
  --erro: #B42318;
  --erro-fundo: rgba(180, 35, 24, 0.07);
  /* Seções escuras (números, chamada final, rodapé) */
  --escuro-texto: #F3F1EC;
  --escuro-suave: rgba(243, 241, 236, 0.62);
  --escuro-linha: rgba(243, 241, 236, 0.16);

  --fonte-titulo: "Bitter", Georgia, "Times New Roman", serif;
  --fonte: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-etiqueta: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;   /* maiúsculas espaçadas */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--papel); color: var(--tinta);
  font-family: var(--fonte); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;   /* o rodapé fica no fim da tela mesmo em páginas curtas */
}
body > main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
p { margin: 0; }
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .container { padding-inline: 32px; } }
section[id] { scroll-margin-top: 80px; }

/* ── Logo: a palavra "miai" (miai/logo-miai.png), pintada com a cor do lugar (roxo no claro, papel no escuro) ── */
.logo {
  display: inline-block; height: 24px; aspect-ratio: 360 / 116; background-color: var(--roxo);
  -webkit-mask: url(/miai/logo-miai.png) left center / contain no-repeat; mask: url(/miai/logo-miai.png) left center / contain no-repeat;
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca__nome { font-family: var(--fonte-etiqueta); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--suave); padding-top: 3px; }

/* ── Topo ─────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 20;
  background: rgba(243, 241, 236, 0.9); border-bottom: 1px solid var(--linha);
  -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px);
}
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.topo__acoes { display: flex; align-items: center; gap: 18px; }
.topo__link { font-size: 14px; color: rgba(20, 19, 15, 0.75); text-decoration: none; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.topo__link:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.topo__acoes > * { white-space: nowrap; }
@media (max-width: 480px) {
  .topo .marca__nome { display: none; }
  .topo__acoes { gap: 14px; }
  .topo .botao { padding: 8px 14px; }
}

/* ── Botões ───────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 40px; padding: 10px 20px; border-radius: 0; border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; text-align: center;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.botao .seta { transition: transform 0.15s; }
.botao:hover .seta { transform: translateX(3px); }
.botao--tinta { background: var(--tinta); color: var(--papel); }
.botao--tinta:hover { background: var(--roxo); }
.botao--contorno { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.botao--contorno:hover { background: var(--tinta); color: var(--papel); }
.botao--claro { background: var(--papel); color: var(--tinta); }
.botao--claro:hover { background: #FFFFFF; }
.botao--grande { min-height: 50px; padding: 13px 26px; font-size: 15px; }
.botao--largo { width: 100%; }
.botao[aria-disabled="true"], .botao:disabled { opacity: 0.5; cursor: not-allowed; }
.link { color: var(--roxo); font-weight: 500; text-underline-offset: 3px; }
.link-botao { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; color: var(--suave); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.link-botao:hover { color: var(--tinta); }

/* ── Etiquetas em mono (ex.: "01  CURSOS", "● TIMES EM 3 CONTINENTES") ── */
.rotulo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fonte-etiqueta); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--suave); line-height: 1.4; }
.rotulo b { font-weight: 700; color: var(--roxo); }
.rotulo--ponto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--roxo); }

/* ── Seções ───────────────────────────── */
.secao { padding: 72px 0; }
.secao__topo { display: grid; gap: 18px; padding-top: 18px; border-top: 1px solid var(--linha); margin-bottom: 40px; }
.secao__topo h2 { font-size: clamp(36px, 6vw, 60px); max-width: 18ch; }
.secao__topo p { color: var(--suave); max-width: 56ch; }
.secao--escura { background: var(--tinta); color: var(--escuro-texto); }
.secao--escura .secao__topo { border-top-color: var(--escuro-linha); }
.secao--escura .rotulo, .secao--escura .secao__topo p { color: var(--escuro-suave); }
.secao--escura .rotulo b { color: #B79CF0; }
@media (min-width: 980px) { .secao { padding: 104px 0; } }

/* Faixa que corre com as áreas (mono, separadas por ⋅) */
.faixa { border-block: 1px solid var(--linha); overflow: hidden; padding: 14px 0; }
.faixa__trilho { display: flex; width: max-content; animation: correr 40s linear infinite; }
.faixa__trilho span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--fonte-etiqueta); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--suave); white-space: nowrap; }
.faixa__trilho span::after { content: "⋅"; color: var(--apagado); }

/* ── Cursos em cartões (catálogo e conta): capa + nome + detalhes + preço ── */
.grade-cursos { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cartao-curso {
  display: grid; grid-template-rows: auto 1fr; background: var(--papel-claro); border: 1px solid var(--linha);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cartao-curso:hover { border-color: var(--tinta); transform: translateY(-2px); box-shadow: 0 22px 44px -32px rgba(20, 19, 15, 0.5); }
.cartao-curso[hidden] { display: none; }

/* Capa desenhada: a cor do curso com um brilho, listras finas, a área, o nome e a foto de quem ensina */
.capa-curso { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; background: var(--cor, #5E1D93); color: #FFFFFF; text-decoration: none; }
.capa-curso::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(0, 0, 0, 0.3), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px);
}
.capa-curso--imagem > img:not(.capa-curso__foto) { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.capa-curso--imagem::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.62)); }
.capa-curso__area { position: absolute; left: 20px; top: 18px; right: 90px; font-family: var(--fonte-etiqueta); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.capa-curso__nome { position: absolute; left: 20px; right: 108px; bottom: 18px; font-family: var(--fonte-titulo); font-weight: 600; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.02; letter-spacing: -0.01em; }
.capa-curso__foto { position: absolute; right: 18px; bottom: 18px; width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.92); }
.capa-curso__selo { position: absolute; right: 18px; top: 16px; padding: 4px 10px; background: var(--papel); color: var(--tinta); font-family: var(--fonte-etiqueta); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

.cartao-curso__corpo { display: grid; gap: 12px; align-content: start; padding: 20px 22px 22px; }
.cartao-curso__nome { font-size: 28px; }
.cartao-curso__nome a { text-decoration: none; }
.cartao-curso__nome a:hover { color: var(--roxo); }
.cartao-curso__chamada { color: var(--suave); }
.cartao-curso__detalhes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cartao-curso__detalhes li { padding: 3px 9px; border: 1px solid var(--linha-forte); font-family: var(--fonte-etiqueta); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.cartao-curso__rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--linha); }
.cartao-curso__preco { font-family: var(--fonte-titulo); font-weight: 600; font-size: 26px; line-height: 1; }
.cartao-curso__preco small { display: block; margin-top: 6px; font-family: var(--fonte); font-size: 12px; font-weight: 400; color: var(--suave); }
.cartao-curso__preco:empty { display: none; }
.cartao-curso__rodape .botao { margin-left: auto; }

/* Progresso (conta e aulas) */
.progresso { display: grid; gap: 8px; }
.progresso__barra { height: 3px; background: var(--linha); overflow: hidden; }
.progresso__barra span { display: block; height: 100%; width: 0; background: var(--roxo); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.progresso p { font-family: var(--fonte-etiqueta); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); font-variant-numeric: tabular-nums; }
.progresso strong { font-weight: 500; color: var(--tinta); }

/* ── Formulários (entrar e nova senha) ── */
.formulario { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo label { font-family: var(--fonte-etiqueta); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--suave); }
.campo input {
  width: 100%; font: inherit; font-size: 16px; color: var(--tinta);
  padding: 12px 14px; border: 1px solid var(--linha-forte); border-radius: 0; background: var(--papel-claro);
}
.campo input::placeholder { color: var(--apagado); }
.campo input:focus { outline: none; border-color: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-fundo); }
.aviso-erro, .aviso-ok { padding: 10px 14px; font-size: 14px; border-left: 3px solid; }
.aviso-erro { background: var(--erro-fundo); border-color: var(--erro); color: var(--erro); }
.aviso-ok { background: var(--verde-fundo); border-color: var(--verde); color: var(--verde); }
.aviso-erro:empty, .aviso-ok:empty { display: none; }

/* ── Estados (carregando, entrar, erro) ── */
.estado { width: 100%; max-width: 460px; margin: 8vh auto 0; padding: 32px 24px 28px; display: grid; gap: 16px; background: var(--papel-claro); border: 1px solid var(--linha); }
.estado > p { color: var(--suave); }
.estado h1 { font-size: clamp(32px, 7vw, 40px); }
.estado .link-botao { justify-self: start; }
.girando { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--linha); border-top-color: var(--roxo); animation: girar 0.8s linear infinite; }
@media (min-width: 560px) { .estado { padding: 40px 40px 34px; } }

/* ── Perguntas frequentes ─────────────── */
.faq { border-bottom: 1px solid var(--linha); }
.faq details { border-top: 1px solid var(--linha); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0;
  font-family: var(--fonte-titulo); font-size: clamp(20px, 2.6vw, 24px); line-height: 1.2; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--fonte); font-size: 24px; font-weight: 300; color: var(--suave); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--suave); max-width: 64ch; }

/* ── Rodapé (escuro, como o da Mios Tech) ── */
.rodape { background: var(--tinta); color: var(--escuro-texto); padding: 56px 0 36px; font-size: 14px; }
.rodape .logo { background-color: var(--escuro-texto); }
.rodape .marca__nome { color: var(--escuro-suave); }
.rodape__grade { display: grid; gap: 32px; padding-bottom: 40px; }
.rodape__grade p { color: var(--escuro-suave); max-width: 36ch; margin-top: 16px; }
.rodape__coluna { display: grid; gap: 10px; align-content: start; }
.rodape__coluna .rotulo { color: var(--escuro-suave); margin-bottom: 4px; }
.rodape a { color: var(--escuro-texto); text-decoration: none; }
.rodape a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rodape__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 20px; border-top: 1px solid var(--escuro-linha); color: var(--escuro-suave); font-size: 13px; }
@media (min-width: 760px) { .rodape__grade { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes correr { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}