/* =====================================================================
   HUB — estilos exclusivos de hub.html
   Carregado DEPOIS de css/styles.css: aqui entra só o que não existe lá.
   Nada de :root novo — cor, raio, sombra e easing vêm sempre dos tokens.
   Sem cor literal: hairline, glow e afins saem de color-mix() sobre os tokens.
   ===================================================================== */

/* ---------- Item ativo do menu ---------- */
/* Em subpágina o scrollspy do main.js não marca nada (os links são .html),
   então o destaque vem do aria-current="page" do próprio link. */
.nav__link[aria-current="page"] { color: var(--blue-500); background: var(--gray-100); }

/* ---------- Hero do Hub ---------- */
/* Hero curto: mesma moldura da home (glow + badges), só que sem a coluna
   visual da direita e com um pouco menos de respiro vertical. */
.hub-hero { padding: clamp(52px, 7vw, 88px) 0 clamp(56px, 7vw, 92px); }
.hub-hero .hero__content { max-width: 760px; }
.hub-hero .hero__text { max-width: 660px; }
/* Um CTA só, como na home. O styles.css centraliza .hero__actions em 600px;
   aqui o texto tem 660px, então a largura acompanha para o botão ficar
   centrado sob o parágrafo, e não deslocado para a esquerda. */
.hub-hero .hero__actions { max-width: 660px; }

/* ---------- Vitrines (ebooks e cursos) ---------- */
/* As duas vitrines usam o mesmo cartão: .ebook-card e .curso-card dividem todas
   as regras abaixo e só divergem na proporção da capa e na ficha do curso.
   Mesmo raio (--radius no cartão, --radius-sm na capa), mesma sombra
   (--shadow-soft na capa, --shadow no hover do cartão) e mesmo ritmo vertical
   (capa 18px → linha do topo 14px → título 8px → texto 14px → lista → CTA).

   O .grid--3 do styles.css é repeat(3, 1fr), e 1fr equivale a minmax(auto, 1fr):
   a coluna nunca encolhe abaixo do min-content do cartão. Aqui o topo do cartão tem
   dois itens lado a lado (o selo "Rascunho", que só existe nesta página, mais o
   preço, que é white-space: nowrap no styles.css), o que empurrava esse min-content
   para 256px — 3 x 256 + 48 de gap = 817px, bem mais do que o container mede entre
   561px e ~856px de viewport. Como o body tem overflow-x: hidden, o terceiro cartão
   aparecia cortado em vez de gerar barra de rolagem. O minmax(0, 1fr) libera a coluna
   a encolher; quem segura o conteúdo dentro do cartão é o flex-wrap do topo, logo
   abaixo. As duas coisas andam juntas: uma sem a outra troca um defeito por outro.

   ATENÇÃO ao mexer: por causa do #ebooks / #cursos esta regra tem especificidade de
   ID e passa por cima do "@media (max-width: 560px) { .grid--3 }" do styles.css. Por
   isso as quebras para 2 e para 1 coluna estão declaradas aqui embaixo, no bloco
   Responsivo — sem elas o celular ficaria com três colunas. */
#ebooks .grid--3,
#cursos .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* O cartão herda .soft-card (fundo, borda, raio, hover e coluna flex) e só
   acrescenta a capa — assim ele nasce igual aos .soft-card de Soluções. */
.ebook-card,
.curso-card { position: relative; }

/* Enquanto o item é rascunho, a borda tracejada avisa isso sem depender de
   texto. Ao publicar o material real, basta remover a classe is-draft.
   O .soft-card:hover do styles.css apaga a borda no hover; aqui a gente segura
   a tracejada, para o aviso não sumir justo quando a pessoa passa o mouse. */
.ebook-card.is-draft,
.curso-card.is-draft { border-style: dashed; }
.ebook-card.is-draft:hover,
.curso-card.is-draft:hover { border-color: var(--gray-200); }

/* Capa provisória feita 100% em CSS: não aponta para arquivo nenhum, então
   nunca aparece imagem quebrada na vitrine. A hairline branca a 8% é a mesma
   dos cartões escuros do styles.css, só que escrita com color-mix.
   isolation: isolate prende os z-index de glow/moldura/letra dentro da capa. */
.ebook-card__cover,
.curso-card__cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  padding: 16px;
  text-align: center;
  background: var(--grad-navy);
  border: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
/* Capa de curso é deitada (16:9), como miniatura de aula; a de ebook fica em pé
   (4:3), como capa de livro. É a única diferença visual entre as duas vitrines. */
.curso-card__cover { aspect-ratio: 16 / 9; }

/* Glow da marca, igual ao da .cta: vem do ::before, sem markup extra. */
.ebook-card__cover::before,
.curso-card__cover::before {
  content: "";
  position: absolute;
  inset: -35% auto auto -25%;
  z-index: 0;
  width: 90%;
  height: 150%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cyan) 25%, transparent), transparent 70%);
  pointer-events: none;
}

/* Moldura tracejada dentro da capa, só enquanto o cartão é rascunho: mesma
   linguagem da borda tracejada do cartão, para a capa provisória não passar
   por arte final. Some sozinha ao remover a classe is-draft. */
.is-draft .ebook-card__cover::after,
.is-draft .curso-card__cover::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  border: 1px dashed color-mix(in srgb, var(--white) 22%, transparent);
  border-radius: calc(var(--radius-sm) - 4px);
  pointer-events: none;
}
.ebook-card__initial,
.curso-card__initial {
  position: relative;
  z-index: 1;
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--white);
}
/* Legenda da capa segue o padrão de rótulo do site (pequeno, caixa alta,
   espaçado) — o mesmo da ficha do curso em Formato / Carga horária. */
.ebook-card__hint,
.curso-card__hint {
  position: relative;
  z-index: 1;
  color: var(--blue-300);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Capa de verdade: mesma moldura da provisória — mesmo fundo, mesma hairline e
   mesma sombra — para o cartão não mudar de cara no dia em que a arte entrar no
   lugar do bloco em CSS. object-fit contain + fundo navy aceita arte em pé ou
   deitada sem cortar nada. */
.ebook-card__img,
.curso-card__img {
  width: 100%;
  /* height: auto é obrigatório. O modelo em hub.html manda colar a imagem com
     width="1200" height="900" (ebook) ou height="675" (curso), e esses atributos
     viram largura e altura em CSS. Como o width acima já fixa a largura, sem esta
     linha a altura ficaria presa no atributo e o aspect-ratio seria ignorado (ele
     só vale quando um dos eixos é auto) — a capa estourava o cartão. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  margin-bottom: 18px;
  background: var(--grad-navy);
  border: 1px solid color-mix(in srgb, var(--white) 8%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
.curso-card__img { aspect-ratio: 16 / 9; }

/* Linha do topo: selo de rascunho à esquerda, preço à direita.
   Sem .card__icon aqui, então a margem inferior vem desta regra.
   O flex-wrap não é enfeite: o selo (~100px) + gap de 12px + o preço, que é
   white-space: nowrap, (~105px) somam ~217px que não encolhem. Assim que o
   minmax(0, 1fr) lá em cima deixa a coluna estreitar, é a quebra em duas linhas
   que impede a pilha do preço de escapar para fora do cartão. */
.ebook-card .soft-card__top,
.curso-card .soft-card__top { margin-bottom: 14px; flex-wrap: wrap; row-gap: 8px; }

/* Preço sempre encostado à direita, com ou sem o selo de rascunho ao lado.
   Ao publicar um item real o selo sai e a pílula ficaria sozinha no topo: com
   space-between e um único filho ela cairia na borda esquerda, diferente do
   .soft-card de Soluções, onde o preço fica sempre à direita. */
.ebook-card .soft-card__price,
.curso-card .soft-card__price { margin-left: auto; }

/* Selo "Rascunho": discreto (cinza do menu, texto --muted, tracejado igual ao
   do cartão) mas legível — .8rem com peso 600 herdado do .badge, e nowrap para
   o emoji nunca se separar da palavra. */
.ebook-card__draft,
.curso-card__draft {
  margin-bottom: 0;
  background: var(--gray-100);
  color: var(--muted);
  border: 1px dashed var(--gray-200);
  font-size: .8rem;
  line-height: 1.2;
  padding: 6px 12px;
  white-space: nowrap;
}

/* CTA do cartão: mesmo link de texto do styles.css, só que com área de toque de
   44px. O padding extra não move o texto: embaixo ele é devolvido pela margem
   negativa e em cima é descontado da lista (20px → 10px), então a distância
   visual lista → CTA continua os mesmos 20px de antes. */
.ebook-card .soft-card__list,
.curso-card .soft-card__list { margin-bottom: 10px; }
.ebook-card .soft-card__cta,
.curso-card .soft-card__cta {
  padding-block: 10px;
  margin-bottom: -10px;
}

/* ---------- Ficha do curso (formato + carga horária) ---------- */
/* Só o cartão de curso tem: dois pares rótulo/valor lado a lado, no mesmo
   cinza-azulado dos inputs (--gray-50) e com a borda padrão de card. O rótulo
   segue o padrão de legenda do site (pequeno, caixa alta, --muted) e o valor
   fica em navy, como os títulos. Vai entre a descrição e a lista de tópicos. */
.curso-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}
.curso-card__meta div { min-width: 0; }
.curso-card__meta dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.curso-card__meta dd {
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy-800);
  overflow-wrap: anywhere;
}

/* ---------- Faixa "Ficou com alguma dúvida?" ---------- */
/* É a faixa padrão do site (section.duvida + .chat), colada literalmente do
   partial e fechando a página no lugar da antiga .cta. Todo o CSS dela mora em
   css/styles.css (.duvida, .chat...), já com a quebra para uma coluna e o
   reduced-motion — nada a redeclarar aqui. */

/* ---------- Responsivo ---------- */
/* 980px: a home centraliza o hero nesta largura (e o styles.css já centraliza
   badges e botões). Repetimos para o texto não ficar à esquerda sozinho. */
@media (max-width: 980px) {
  .hub-hero .hero__content { text-align: center; margin-inline: auto; }
  /* O .hero__actions tem max-width de 660px (lá em cima) e o styles.css só
     centraliza o CONTEÚDO dele (justify-content). Sem margin auto a caixa de
     660px cola à esquerda dos 760px do .hero__content e o botão sai 50px do
     centro do título e do parágrafo. Fica só nesta faixa: acima de 980 o bloco
     é alinhado à esquerda e o botão já cai centrado sob o parágrafo. */
  .hub-hero .hero__actions { margin-inline: auto; }
  /* Mesma cadência que o styles.css já usa no .grid--4: 2 colunas antes de 1.
     O cartão de ebook/curso é pesado (capa + selo + preço + título + texto +
     ficha + lista + CTA), então três colunas aqui ficariam apertadas demais. */
  #ebooks .grid--3,
  #cursos .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 600px: aqui as vitrines viram uma coluna só. Como o cartão passa a ocupar a
   largura inteira do container, a capa de ebook em 4/3 ficaria alta demais e
   empurraria o título para fora da tela — por isso ela deita em 16/9 exatamente
   nesta mesma largura (a de curso já nasce 16/9). É também onde o styles.css
   aperta o padding de card/quote/feature.
   Esta é a quebra para 1 coluna que as regras #ebooks/#cursos .grid--3 lá de
   cima exigem: sem ela, a especificidade de ID venceria o corte de 560px do
   styles.css. */
@media (max-width: 600px) {
  #ebooks .grid--3,
  #cursos .grid--3 { grid-template-columns: 1fr; }
  .ebook-card__cover, .ebook-card__img { aspect-ratio: 16 / 9; }
}

/* ---------- Seção Apps (escura): cartões marcáveis + bloco de envio ---------- */
.app-grid { margin-top: 8px; }
#apps .section__sub { max-width: 640px; margin-inline: auto; }
.app-review {
  max-width: 720px; margin: 34px auto 0;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}
.app-review__count { font-family: "Poppins", "Inter", sans-serif; font-weight: 700; color: var(--navy-800); margin-bottom: 14px; }
.app-review__label { display: block; font-weight: 600; color: var(--navy-800); margin-bottom: 8px; font-size: .95rem; }
.app-review__label .pick-optional { color: var(--muted); font-weight: 400; }
.app-review__note {
  width: 100%; resize: vertical; font: inherit; color: var(--text);
  padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--gray-50); margin-bottom: 16px;
}
.app-review__note:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.app-review__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.app-review__actions .btn--primary { flex: 1; }
.app-review__actions .btn:disabled { cursor: not-allowed; background: var(--gray-100); color: var(--gray-600); border-color: var(--gray-200); box-shadow: none; }
.app-review__feedback { margin: 12px 0 0; font-size: .92rem; color: var(--muted); min-height: 1.2em; }
.app-review__feedback.ok { color: var(--blue-600); }

/* Aba de apps prontos (em construção): título claro sobre o navy */
.app-ready { margin-top: clamp(44px, 6vw, 70px); }
.app-ready__title { color: #fff; text-align: center; font-size: 1.25rem; margin-bottom: 18px; }
.app-ready__card h3 { font-size: 1.05rem; }

/* Ebook real: capa em retrato (proporção da página do PDF) e sem o placeholder em CSS */
.ebook-card__cover--retrato { aspect-ratio: auto; display: block; background: var(--navy-900); }
.ebook-card__cover--retrato::before, .ebook-card__cover--retrato::after { content: none; }
.ebook-card__img--retrato { aspect-ratio: 900 / 1165; object-fit: cover; display: block; }
/* Na vitrine com cartões borrados, o cartão real ganha destaque de borda */
.vitrine--construcao .ebook-card--real { position: relative; z-index: 1; border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-soft); }