/* Hub de isca — @criz.reis
   Identidade herdada do Guia do Aluno (protótipo Akaia): mesmos nomes de
   token, mesmas duas skins. Escuro é o padrão; claro entra por
   :root[data-tema="claro"]. Para mudar a cara da página, mexa só aqui. */

:root {
  --sumi: #080d10;       /* fundo */
  --kuro: #0e151b;       /* cartão */
  --kuro-2: #0b1117;     /* cartão recuado */
  --shiro: #EEF2F7;      /* texto */
  --haiiro: #7C8B98;     /* texto apagado */
  --ink-soft: #A9B6C2;   /* texto secundário */
  --border: #1b2933;
  --border-2: #2a3b49;

  --akai: #4B94FF;
  --akai-dim: rgba(75, 148, 255, .18);
  --alert: #FFB020;
  --ok: #3DD68C;
  --info: #2DD4E6;
  --violet: #A78BFA;
  --coral: #FF8A5B;
  --teal: #38D6B0;

  --acc: var(--akai);
  --logo-ink: #F4F2EC;

  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Curva do clique: sai rápido e assenta devagar — é o que faz o botão
     parecer mecânico em vez de elástico. */
  --press: cubic-bezier(.23, 1, .32, 1);

  --titulo: "Space Grotesk", Inter, sans-serif;
  --corpo: Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  color-scheme: dark;
}

:root[data-tema="claro"] {
  --sumi: #EFF3F8;
  --kuro: #FFFFFF;
  --kuro-2: #F7F9FC;
  --shiro: #101822;
  --haiiro: #5E6D7B;
  --ink-soft: #44525F;
  --border: #DCE4EC;
  --border-2: #C3CFDC;

  --akai: #1F6FE0;
  --akai-dim: rgba(31, 111, 224, .1);
  --alert: #8A5600;
  --ok: #168752;
  --info: #0A6E80;
  --violet: #5D37C7;
  --coral: #B0461C;
  --teal: #0C7558;

  --logo-ink: #0F0F12;

  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sumi);
  color: var(--ink-soft);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .3s var(--ease), color .3s var(--ease);
}

/* Duas manchas de luz no topo, na cor de destaque. Substituem a textura
   de pontos da versão anterior — aqui o fundo é escuro e o que dá
   profundidade é luz, não grão. */
.brilho {
  position: fixed;
  inset: 0 0 auto;
  height: 520px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 22% 0%, var(--akai-dim), transparent 70%),
    radial-gradient(45% 45% at 82% 8%, rgba(167, 139, 250, .14), transparent 70%);
}

/* Malha de neurônios atrás do topo — um quadro parado da arte da Akaia.
   Fica embaixo do .brilho, que é quem dá a cor. A máscara em gradiente
   dissolve a imagem para baixo, para o fundo da página continuar liso
   onde ficam os cards. No tema claro o mesmo arquivo entra invertido:
   a arte é azul sobre preto, e invertida vira azul sobre branco. */
.hero-fundo {
  position: fixed;
  inset: 0 0 auto;
  height: 560px;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  background: url(assets/hero-fundo.jpg) center 28% / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
          mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
}

:root[data-tema="claro"] .hero-fundo {
  opacity: .16;
  filter: invert(1) hue-rotate(180deg);
}

/* ---------- navegação de topo (hub e materiais) ----------
   Fica aqui, e não na folha de cada página, porque as duas usam. Quando
   morava só no hub.css, a página de material abria com o SVG do "voltar"
   em tamanho natural — uma seta preta ocupando meia tela. */

[hidden] { display: none !important; }

.topo-hub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--kuro);
  color: var(--ink-soft);
  font-size: .82rem;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.voltar:hover { border-color: var(--border-2); color: var(--shiro); }

.voltar svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assinatura {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.assinatura__foto {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.assinatura__handle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--shiro);
  font-family: var(--titulo);
  font-size: .84rem;
  font-weight: 600;
}

.topo-hub .tema { margin-left: 0; }

a { color: inherit; text-decoration: none; }

.pagina {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

/* ---------- botão de tema ---------- */

.tema {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--kuro);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

.tema:hover { border-color: var(--border-2); color: var(--shiro); }

.tema svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tema__sol { display: none; }
:root[data-tema="claro"] .tema__lua { display: none; }
:root[data-tema="claro"] .tema__sol { display: block; }

/* ---------- perfil ---------- */

.perfil {
  text-align: center;
  margin: 2px 0 30px;
}

.perfil__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* Anel fino na cor de destaque em volta da foto. */
.perfil__moldura {
  display: block;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--akai), var(--violet));
}

.perfil__foto {
  display: block;
  width: 92px;
  height: 92px;
  border: 3px solid var(--sumi);
  border-radius: 50%;
  object-fit: cover;
}

.perfil__handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--titulo);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--shiro);
}

.selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--akai);
}

.selo svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: var(--sumi);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perfil__bio {
  margin: 10px 0 0;
  font-size: .95rem;
  color: var(--shiro);
}

.perfil__apoio {
  margin: 3px 0 0;
  font-size: .85rem;
  color: var(--haiiro);
}

/* ---------- etiquetas ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--haiiro);
}

.chip--acc {
  border-color: transparent;
  background: var(--acc);
  color: var(--sumi);
}

.chip--breve {
  border-color: color-mix(in srgb, var(--alert) 35%, transparent);
  color: var(--alert);
}

/* ---------- destaque ---------- */

/* A imagem é o fundo do card inteiro, não um enfeite no canto. Por cima dela
   vêm dois véus escuros com funções diferentes: o primeiro é um degradê que
   corre da esquerda (onde mora o texto) para a direita, e o segundo é uma
   camada parelha que segura o contraste onde o render tem brilho. Sem os
   dois, o título perde legibilidade em cima da parte clara do vidro. */
.destaque {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 34px;
  padding: 26px 24px 22px;
  min-height: 188px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(100deg, rgba(4, 9, 15, .94) 18%, rgba(4, 9, 15, .62) 52%, rgba(4, 9, 15, .3) 100%),
    linear-gradient(rgba(4, 9, 15, .28), rgba(4, 9, 15, .28)),
    url("assets/hub-capa.webp") right center / cover no-repeat,
    var(--kuro);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.destaque:hover { border-color: var(--acc); }
.destaque:active { transform: scale(.985); }

.destaque__titulo {
  margin: 12px 0 6px;
  max-width: 14ch;
  font-family: var(--titulo);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.025em;
  color: var(--shiro);
}

.destaque__descricao {
  margin: 0;
  max-width: 30ch;
  font-size: .87rem;
  color: var(--ink-soft);
}

.destaque__ir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--acc);
}

.destaque__ir svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s var(--ease);
}

.destaque:hover .destaque__ir svg { transform: translateX(3px); }

/* O card é sempre escuro, porque o fundo dele é uma foto escura — então o
   texto não segue o tema. No claro, herdar --shiro deixaria título preto em
   cima do render. */
.destaque__titulo { color: #EEF2F7; }
.destaque__descricao { color: #C3CFDB; }
.destaque__ir { color: #8CBCFF; }
:root[data-tema="claro"] .destaque__titulo { color: #EEF2F7; }
:root[data-tema="claro"] .destaque__descricao { color: #C3CFDB; }
:root[data-tema="claro"] .destaque__ir { color: #8CBCFF; }

/* ---------- seção ---------- */

.secao__cab {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.secao__titulo {
  margin: 0;
  font-family: var(--titulo);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--shiro);
}

.secao__titulo em { font-style: normal; color: var(--acc); }

/* ---------- cards ---------- */

.lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

/* Card de produto: a capa ocupa a largura toda, como nas seções do guia do
   aluno, e o texto vem embaixo. Tudo aqui está bloqueado, então a capa entra
   dessaturada — o cinza é o estado, não a arte. No dia em que o produto
   abrir, some o filtro e a imagem volta a ter cor. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--kuro-2);
  overflow: hidden;
}

/* height:auto é obrigatório: o atributo height="428" do <img> vira uma
   declaração de CSS e, sem isso, ganha do aspect-ratio — a capa esticaria
   para 428 px de altura em qualquer largura. */
.card__capa {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1040 / 428;
  object-fit: cover;
  filter: grayscale(1) brightness(.72) contrast(1.05);
  opacity: .85;
}

/* No tema claro a mesma capa escurecida pesa demais contra o cartão branco:
   ela sobe de brilho e perde opacidade, continuando cinza. */
:root[data-tema="claro"] .card__capa {
  filter: grayscale(1) brightness(.98) contrast(1.02);
  opacity: .72;
}

/* Risco do fundo do card até a capa, para a imagem não terminar numa linha
   dura contra o texto. */
.card__capa + .card__texto { position: relative; }

.card__capa + .card__texto::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -46px;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(transparent, var(--kuro-2));
}

.card__texto { padding: 14px 18px 16px; min-width: 0; }

.card__topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.card__k {
  font-family: var(--mono);
  font-size: .66rem;
  color: var(--haiiro);
}

.card__titulo {
  margin: 0 0 3px;
  font-family: var(--titulo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--shiro);
}

.card__descricao {
  margin: 0;
  font-size: .81rem;
  line-height: 1.45;
  color: var(--haiiro);
}

/* O cadeado sai da linha do texto e vai para cima da capa: ali ele é a
   primeira coisa que se lê no card, que é o ponto. */
.card__cadeado {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  padding: 5px;
  border: 1px solid rgba(225, 233, 244, .2);
  border-radius: 999px;
  background: rgba(3, 5, 7, .55);
  backdrop-filter: blur(6px);
  fill: none;
  stroke: #C3CFDB;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- seção bloqueada ----------
   Produtos que ainda não abriram. Sem cor nenhuma: --acc vira cinza e com
   isso tudo que lê essa variável sai da paleta de uma vez. O selo é o .chip
   neutro, não o amarelo de "Em breve" — onde o material gratuito é azul e
   clicável, cinza é o que diz que isto não abriu. */
.secao--bloqueada .lista { opacity: .92; }
.secao--bloqueada .card { --acc: var(--haiiro); }
.secao--bloqueada .card__titulo { color: var(--ink-soft); }

/* ---------- botões: dois tipos ----------
   A pílula clara com halo (.botao) e a pílula escura de contorno
   (.botao--linha). Mecanismo lido do CSS da referência e refeito na paleta
   daqui — nenhum hex, fonte ou arquivo de lá entrou. O que define o par:

   · raio 999px nos dois, mesma física: é o mesmo objeto em dois pesos;
   · no cheio, a borda clara de 1px mais o brilho interno no topo — é esse
     par que dá o aspecto de vidro, não o degradê;
   · duas sombras com papéis separados: o halo curto cola a luz na borda, a
     longa levanta o botão da página;
   · o hover clareia o próprio degradê, em vez de passar brightness() na
     cor inteira como estava aqui antes;
   · press de 70ms, rápido na ida e macio na volta.

   Foco visível por teclado e prefers-reduced-motion são parte do pacote:
   é o que costuma ficar de fora quando se copia só a aparência. */

.botao,
.botao--linha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--titulo);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--press), box-shadow .18s var(--press),
              border-color .18s var(--press), color .18s var(--press),
              transform .18s var(--press);
}

.botao:active,
.botao--linha:active { transform: scale(.98); transition-duration: 70ms; }

.botao:focus-visible,
.botao--linha:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--akai) 75%, #fff);
  outline-offset: 4px;
}

/* 1. cheio e claro. Num fundo escuro o que salta é o claro, não o colorido —
   o azul continua sendo a cor da marca em tudo que está em volta. O degradê
   corre a 115°, de um azul lavado ao branco e de volta a um lilás frio: é o
   que impede a pílula de parecer um retângulo branco chapado. */
.botao {
  width: 100%;
  margin-top: 26px;
  background: linear-gradient(115deg, #CFE0EE, #F2F6FB 52%, #DFDAF1);
  color: #101922;
  border-color: rgba(239, 247, 255, .65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72),
              0 0 22px rgba(158, 202, 228, .16),
              0 10px 30px rgba(4, 9, 15, .45);
}

.botao:hover {
  background: linear-gradient(115deg, #DDEAF6, #FFFFFF 52%, #EAE6FA);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85),
              0 0 30px rgba(158, 202, 228, .28),
              0 12px 34px rgba(4, 9, 15, .5);
}

/* 2. contorno escuro. Fundo quase preto translúcido, borda clara de baixa
   opacidade, texto apagado: existe para ser lido, não para competir. No
   hover sobem a borda e o texto, nunca o fundo. */
.botao--linha {
  background: rgba(3, 5, 7, .32);
  color: var(--ink-soft);
  border-color: rgba(225, 233, 244, .17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.botao--linha:hover {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(225, 233, 244, .36);
  color: var(--shiro);
}

/* No claro a pílula clara sumiria no fundo, então o cheio inverte: o mesmo
   botão com a cor da marca no lugar do branco. A física não muda. */
:root[data-tema="claro"] .botao {
  background: linear-gradient(115deg, #3B82F6, #2B7BEC 52%, #1F6FE0);
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
              0 0 18px rgba(31, 111, 224, .18),
              0 8px 22px rgba(31, 111, 224, .3);
}

:root[data-tema="claro"] .botao:hover {
  background: linear-gradient(115deg, #5A9AFA, #3E8BF4 52%, #2B7BEC);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
              0 0 24px rgba(31, 111, 224, .26),
              0 10px 28px rgba(31, 111, 224, .42);
}

:root[data-tema="claro"] .botao--linha {
  background: rgba(16, 24, 34, .035);
  border-color: #C9D6E3;
  color: #44525F;
  box-shadow: none;
}

:root[data-tema="claro"] .botao--linha:hover {
  background: rgba(16, 24, 34, .06);
  border-color: #9FB2C4;
  color: #101822;
}

/* Separador vertical, para o botão de duas partes (marca | ação). */
.botao__sep {
  width: 1px;
  align-self: stretch;
  margin: 1px 2px;
  background: rgba(225, 233, 244, .22);
}

:root[data-tema="claro"] .botao__sep { background: rgba(16, 24, 34, .14); }

/* Quem pediu menos movimento mantém cor e foco, e perde só o deslocamento. */
@media (prefers-reduced-motion: reduce) {
  .botao, .botao--linha,
  .botao:active, .botao--linha:active {
    transform: none;
    transition-property: background, box-shadow, border-color, color;
  }
}

.botao svg,
.botao--linha svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* ---------- rodapé ---------- */

.rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 34px;
  color: var(--haiiro);
}

.rodape__marca {
  font-family: var(--titulo);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--logo-ink);
}

.rodape__nota {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .04em;
}

/* ---------- telas estreitas ---------- */

/* No celular o card fica estreito e o render perde o espaço escuro da
   esquerda: o véu precisa fechar mais cedo para o título não cair em cima
   da parte clara do vidro. */
@media (max-width: 430px) {
  .destaque {
    min-height: 206px;
    background:
      linear-gradient(104deg, rgba(4, 9, 15, .95) 30%, rgba(4, 9, 15, .66) 68%, rgba(4, 9, 15, .34) 100%),
      linear-gradient(rgba(4, 9, 15, .34), rgba(4, 9, 15, .34)),
      url("assets/hub-capa.webp") 72% center / cover no-repeat,
      var(--kuro);
  }
  .destaque__titulo { max-width: 11ch; }
}

@media (max-width: 360px) {
  .destaque__titulo { font-size: 1.6rem; }
  .card__texto { padding: 12px 15px 14px; }
  .card__titulo { font-size: .94rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}