/* ==================================================================
   Componentes
   ================================================================== */

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.8rem 1.7rem;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-ink);
  box-shadow: var(--glow-btn), var(--shadow-btn);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-btn-hover), var(--shadow-btn-hover);
}

.btn--primary:active {
  transform: translateY(1px);
  box-shadow: var(--glow-btn-active), var(--shadow-btn-active);
}

.btn--ghost {
  background: var(--surface-hi);
  color: var(--ink-0);
  border: 1px solid var(--border-hi);
  box-shadow: 0 0 18px -8px rgba(255, 255, 255, 0.35);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-acc);
  box-shadow: 0 0 26px -6px rgba(255, 255, 255, 0.45);
}

.btn--sm {
  padding: 0.62rem 1.25rem;
  font-size: 0.75rem;
  border-radius: var(--radius-btn-sm);
}

.btn--lg {
  padding: 0.95rem 2.2rem;
  font-size: 0.875rem;
  border-radius: var(--radius-btn-lg);
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* link com seta, usado em fechos de bloco */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--acc);
  font-weight: 700;
  font-size: 0.9375rem;
}

.link-arrow svg {
  width: 1em;
  height: 1em;
  transition: transform 0.25s var(--ease);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ---------- Cabeçalho ---------- */

/* charcoal translúcido do primeiro scroll em diante. Antes disso, com a
   página ainda parada no hero, o JS marca data-tone="hero" e o painel de
   vidro some, porque o retângulo preto sobre o gradiente destoava */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  --header-bg: rgba(17, 17, 17, 0.72);
  --header-border: var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--header-border);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

/* antes do primeiro scroll o header é só o conteúdo: sem véu, sem blur,
   sem filete. O menu aberto reacende o painel, senão a lista mobile
   flutuaria sob uma barra transparente */
.site-header[data-tone="hero"]:not(:has(.main-nav.is-open)) {
  --header-bg: transparent;
  --header-border: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* onde o blur não aplica — transparência reduzida no sistema, economia de
   bateria, navegador antigo — o véu a 72% deixa a página passar legível por
   baixo do menu. Aqui ele vira chapado.
   Troca o token e não a propriedade: assim o data-tone="hero" acima continua
   vencendo e o header segue transparente sobre o hero, onde não há nada por
   baixo dele para atrapalhar. O Safari antigo só tem a grafia -webkit-.
   O par deste bloco está junto do .modal-overlay: lá embaixo, porque um
   @supports não muda especificidade e a regra do modal vem depois desta. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    --header-bg: var(--bg-0);
  }
}

/* o CTA do header é branco em qualquer faixa, como o do hero: o verde
   competia com o gradiente atrás da barra transparente. Os tokens são
   trocados no escopo do header, então o botão continua sendo .btn--primary */
.site-header .btn--primary {
  --btn-bg: #FFFFFF;
  --btn-ink: var(--bg-0);
}

/* três colunas: o menu fica no centro real do container, não colado no botão */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  padding-block: 0.9rem;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: end;
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.main-nav__list a {
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}

.main-nav__list a:hover {
  color: var(--ink-0);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-btn-sm);
  background: var(--surface);
  color: var(--ink-0);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 1000px) {
  .site-header__inner {
    grid-template-columns: auto 1fr;
  }

  .nav-toggle { display: inline-flex; }

  /* o menu vira painel: a nav some da grade e a lista desce abaixo do header */
  .main-nav {
    display: contents;
  }

  .main-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) var(--space-md) var(--space-md);
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    display: none;
  }

  .main-nav.is-open .main-nav__list {
    display: flex;
  }

  .main-nav__list li + li {
    border-top: 1px solid var(--border);
  }

  .main-nav__list a {
    display: block;
    padding-block: 0.9rem;
    font-size: 1rem;
    color: var(--ink-1);
  }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  flex: none;
}

/* o PNG já vem branco sobre transparente: só controlo a altura.
   O max-width:100% global valia aqui também, e num header apertado ele
   espremia a largura do PNG com a altura travada — a marca achatava e no
   iPhone SE sumia de vez. Sem esse teto e sem encolher, a largura fica
   sempre a que a proporção pede */
.wordmark img {
  height: 26px;
  width: auto;
  max-width: none;
  flex: none;
  transition: opacity 0.25s var(--ease);
}

/* precisa vir depois das regras-base: media query não soma especificidade.
   Daqui para baixo a barra não cabe mais inteira: a marca agora tem largura
   firme, então quem cede espaço é o resto — o respiro do container, o vão da
   grade, o "Fazer" do botão. Antes o PNG era o único a encolher e ficava
   achatado, o que escondia o aperto em vez de resolver */
@media (max-width: 420px) {
  .wordmark img { height: 22px; }
  .site-header .container { padding-inline: 1.25rem; }
  .site-header__inner { gap: 0.75rem; }
  .site-header .btn--sm { padding-inline: 0.9rem; }
  .u-drop-xs { display: none; }
}

/* último aperto, na faixa do iPhone SE e dos Androids de 360 */
@media (max-width: 380px) {
  .wordmark img { height: 20px; }
  .site-header .container { padding-inline: 1rem; }
  .site-header__inner { gap: 0.6rem; }
  .site-header .btn--sm { padding-inline: 0.7rem; }
}

.wordmark:hover img {
  opacity: 0.75;
}

.wordmark--lg img {
  height: 32px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* a dobra inteira: o hero sobe para debaixo do header, e o topo do
     gradiente passa a ser o fundo da própria barra enquanto ela está
     transparente. O padding devolve ao conteúdo o espaço que a margem
     negativa tirou, senão o texto entraria por baixo do menu */
  min-height: 100svh;
  margin-top: calc(var(--header-h) * -1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(clamp(5rem, 10vw, 9rem) + var(--header-h)) clamp(4.5rem, 8vw, 7.5rem);
  text-align: center;
  overflow: hidden;
  /* a primeira faixa é verde: grão e gradiente entram como fundo do
     próprio elemento, atrás de todo o conteúdo dele. Só isso, nada de véu
     por cima — no addept.ai o hero é o gradiente limpo mais o grão, e era
     o halo verde central que tirava o parentesco entre os dois */
  background-image: var(--grain-strong), var(--g-forest);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, cover;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.hero__headline {
  font-size: var(--size-display);
  line-height: 1.12;
  letter-spacing: -0.04em;
  max-width: 19ch;
  margin-top: 0.4rem;
}

/* a primeira frase é a deixa, não a manchete: entra menor, mas no mesmo branco */
.hero__lead {
  display: block;
  font-size: 0.44em;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink-0);
  margin-bottom: 0.6em;
}

.hero__sub {
  max-width: 62ch;
  font-size: var(--size-body-lg);
  /* mesmo branco da headline */
  color: var(--ink-0);
  margin-top: 0.4rem;
}

.hero__sub strong {
  font-weight: 700;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* ---------- Cartões genéricos ---------- */

.card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--g-surface);
  padding: var(--space-md);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              background 0.3s var(--ease);
}

.card:hover {
  border-color: var(--border-hi);
  transform: translateY(-3px);
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--g-fade-acc);
  border: 1px solid var(--border-acc);
  color: var(--acc);
  margin-bottom: var(--space-sm);
}

.icon-tile svg {
  width: 21px;
  height: 21px;
}

/* ---------- Fundador ---------- */

/* o título abre a seção em toda a largura e as duas colunas correm abaixo
   dele, como uma abertura de matéria: antes o h2 ficava espremido na coluna
   da direita, sem relação com o retrato */
.authority {
  display: grid;
  /* coluna do retrato mais estreita que a antiga 0.85fr: em 3:4 ela crescia
     em altura muito além da coluna de texto e sobrava foto pendurada */
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--space-lg) var(--space-2xl);
  align-items: start;
}

.authority__intro {
  grid-column: 1 / -1;
  max-width: 900px;
}

.authority__intro h2 {
  font-size: var(--size-h2);
}

.authority__portrait {
  margin: 0;
}

/* retrato, não cartão: sem sombra de elevação e no mesmo raio do resto.
   4:5 é a proporção nativa do arquivo, então não há corte */
.authority__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  object-fit: cover;
}

/* nome e cargo como legenda de foto, no lugar da placa de vidro que cobria
   o pé do retrato */
.authority__caption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: var(--space-sm);
}

.authority__name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-0);
}

.authority__role {
  font-size: var(--size-small);
  color: var(--ink-3);
}

/* sem o teto a coluna chega a 673px e a medida vai a 85 caracteres por
   linha, bem acima do limite confortável de 75 */
.authority__body {
  max-width: 570px;
}

.authority__body p {
  color: var(--ink-2);
  margin-bottom: var(--space-sm);
}

/* a frase que sustenta o argumento, destacada como citação: era o primeiro
   item de uma lista de checks, que transformava raciocínio em bullet */
.authority__quote {
  margin-block: var(--space-md);
  padding-left: var(--space-md);
  border-left: 2px solid var(--border-acc);
  font-size: var(--size-body-lg);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-0);
}

/* os três fatos em linha, sem cartão nem número gigante: numa página de
   autor as credenciais são texto, não contador */
.authority__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  list-style: none;
  font-size: var(--size-small);
  color: var(--ink-2);
}

.authority__credentials b {
  font-weight: 600;
  color: var(--ink-0);
}

/* ---------- Para quem é ---------- */

/* o mesmo flex da .community-grid: em grade de colunas fixas a última fileira
   incompleta encostava à esquerda e abria um vão morto à direita */
.audience-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.audience-card {
  position: relative;
  flex: 1 1 calc((100% - 2 * var(--space-sm)) / 3);
  max-width: calc((100% - 2 * var(--space-sm)) / 3);
  border: 1px solid var(--border);
  /* mesma casca do .community-card: um raio e um preenchimento para toda a
     família de cartão da página */
  border-radius: 14px;
  background: var(--card);
  padding: var(--space-md);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.audience-card:hover {
  border-color: var(--border-acc);
  transform: translateY(-3px);
}

.audience-card__index {
  position: absolute;
  /* centraliza com o meio do .icon-tile (44px) em vez do topo dele */
  top: calc(var(--space-md) + 22px);
  transform: translateY(-50%);
  right: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.audience-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.audience-card p {
  font-size: var(--size-small);
  color: var(--ink-2);
}

/* o cartão do "não é para" precisa se ler como aviso, não como oferta */
.audience-card--negative {
  border-color: rgba(209, 72, 63, 0.3);
  /* véu vermelho por cima do mesmo fundo sólido dos outros cartões */
  background: linear-gradient(rgba(209, 72, 63, 0.08), rgba(209, 72, 63, 0.08)),
              var(--card);
}

.audience-card--negative:hover {
  border-color: rgba(209, 72, 63, 0.5);
}

.audience-card--negative .icon-tile {
  background: linear-gradient(135deg, rgba(209, 72, 63, 0.2), rgba(209, 72, 63, 0.05));
  border-color: rgba(209, 72, 63, 0.35);
  color: #e58079;
}

.audience-card--negative .audience-card__index {
  color: #e58079;
}

/* ---------- Cursos ---------- */

.course-list {
  display: grid;
  /* sem gap: o respiro vem do padding de cada curso */
}

/* dois eixos: a identidade do curso fica presa à esquerda enquanto os
   módulos correm à direita. Empilhados e centralizados, os 38 cartões de
   módulo pesavam mais que os cinco cursos que eles descrevem */
.course {
  display: grid;
  /* larguras fixas com sobra entre elas: em 1fr a coluna dos módulos
     esticava para 748px e a linha do parágrafo passava de 90 caracteres.
     A coluna do meio é o trilho; a sobra vira as duas goteiras */
  grid-template-columns: 21rem 1px minmax(0, 42rem);
  justify-content: space-between;
  align-items: start;
  padding-block: var(--space-xl);
}

.course__spine {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  position: relative;
}

.course__modules {
  grid-column: 3;
  grid-row: 1;
}

.course:first-child {
  padding-top: 0;
}

/* ---------- Cursos · trilho ---------- */

/* os 124px entre as colunas eram vão morto e as duas metades liam como dois
   documentos. O fio costura o curso à sua lista de módulos.
   Ele começa e termina dentro do curso: emendado de um curso ao outro os cinco
   viravam um bloco só, e cada curso precisa se fechar sozinho */
.course__spine::after {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  inset-block: 0;
  /* nasce e morre esmaecido em vez de cortar seco */
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.11) 64px,
                              rgba(255, 255, 255, 0.11) calc(100% - 64px), transparent);
}

/* a estação: marca onde cada curso começa e fecha uma linha de leitura com o
   medalhão à esquerda e o primeiro módulo à direita */
.course__spine::before {
  content: "";
  position: absolute;
  left: 50%;
  /* meio do medalhão de 60px, que fica entre o centro do ícone e o do h4 ao lado */
  top: 30px;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  /* o anel de fundo abre um vão no fio; o segundo raio é o brilho */
  box-shadow: 0 0 0 5px var(--bg-0), 0 0 18px rgba(var(--acc-rgb), 0.65);
}

/* ancorada no topo do curso, não colada na rolagem: a coluna acompanhava a
   leitura quando um curso tinha 10 módulos. Com no máximo seis a lista quase
   cabe na tela, e o que sobrava era o título parado ao lado do fim do curso */
.course__aside {
  grid-column: 1;
  grid-row: 1;
}

/* medalhão e rótulo dividem a primeira linha; título e descrição correm
   soltos abaixo, na largura toda da coluna */
.course__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
}

.course__head > .icon-tile--lg {
  grid-column: 1;
  grid-row: 1;
}

.course__title,
.course__desc {
  grid-column: 1 / -1;
}

/* medalhão do curso: disco chapado, não a cápsula de vidro do .icon-tile base.
   Com borda de acento e degradê interno o anel ficava mais forte que o desenho — via
   cinco círculos, não cinco ícones. Aqui o fundo é preenchido, o anel some, e o
   glifo cresce e engrossa para sustentar o medalhão sozinho */
.icon-tile--lg {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-acc);
  margin-bottom: 0;
}

/* o glifo é dimensionado pelo desenho, não pela caixa. Os SVGs de traço param
   em 20 dos 24 do viewBox; os logos da Claude e do WhatsApp desenham até a
   borda; o do n8n é chato (24 × 12,6). Num tamanho só, o n8n sumia entre os
   vizinhos e os dois logos pareciam 20% maiores que eles */
.icon-tile--lg svg {
  width: 30px;
  height: 30px;
  /* sobrepõe o stroke-width=1.7 que vem como atributo em cada SVG */
  stroke-width: 2.25;
}

/* logo que ocupa o viewBox inteiro: encolhe para ganhar a mesma folga que os
   glifos de traço já têm desenhada */
.icon-tile--full svg {
  width: 25px;
  height: 25px;
}

/* logo mais largo que alto: cresce, senão lê como o menor do conjunto */
.icon-tile--wide svg {
  width: 31px;
  height: 31px;
}

/* usado no cabeçalho do cartão agrupado e no fallback de logo */
.icon-tile--sm {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  margin-bottom: 0;
  flex: none;
}

.icon-tile--sm svg {
  width: 16px;
  height: 16px;
}

/* "CURSO 01" é uma coisa só: mesma fonte e mesmo corpo na palavra e no número,
   um degrau abaixo do título. Em 11px de mono era um sussurro ao lado de um
   medalhão de 54px; aqui ganha presença sem disputar com o título.
   O corpo segue a mesma curva do clamp do .course__title, mas a ~45% dele para
   continuar menor em qualquer largura. Menos de metade e não dois terços porque
   em caixa alta a altura de maiúscula quase encosta na altura de x do título em
   caixa mista — no papel a diferença existia, no olho não.
   justify-self encolhe a caixa até o texto, senão o degradê se estica pela
   coluna inteira e sobra só o branco do começo. */
.course__label {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  /* a mesma fonte do título do curso, no lugar do mono */
  font-family: var(--font-sans);
  font-size: clamp(0.7875rem, 1.17vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* menor que o antigo clamp de 2.5rem: numa coluna de 20rem aquele corpo
   quebrava o título em quatro linhas */
.course__title {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: var(--space-md);
}

.course__desc {
  font-size: 1.0625rem;
  color: var(--ink-2);
  margin-top: 0.75rem;
}

/* fecha a coluna do curso: a contagem varia de 6 a 10 e por isso informa
   o tamanho da lista que corre ao lado. Mesmo tratamento do .course__label —
   fonte, corpo, espacejamento e o degradê correndo do número à palavra.
   fit-content pelo mesmo motivo de lá: em bloco o degradê se estica pela coluna
   inteira e o texto pega só o branco do começo. A régua que fechava a coluna
   mudou para o rodapé da .tech-grid, que continua ocupando a largura toda */
.course__count {
  display: block;
  width: fit-content;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: clamp(0.7875rem, 1.17vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--g-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Cursos · grade de tecnologias ---------- */

/* pílulas de largura automática: numa grade de colunas iguais o chip
   esticava e sobrava um vão morto à direita de rótulos curtos */
.tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  /* a régua que fecha a coluna do curso, herdada do .course__count: aqui ela
     atravessa a largura inteira sem prender a caixa da contagem */
  padding: 0 0 var(--space-md);
  border-bottom: 1px solid var(--border);
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--ink-1);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.tech-chip img {
  width: 20px;
  height: 20px;
  flex: none;
  opacity: 0.9;
  transition: opacity 0.25s var(--ease);
}

.tech-chip:hover {
  border-color: var(--border-acc);
  background: var(--surface-hi);
}

.tech-chip:hover img {
  opacity: 1;
}

/* fallback para marca sem logo público: glifo de acento no lugar do logotipo,
   no mesmo tamanho que o logo ocuparia */
.tech-chip .icon-tile--sm {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.tech-chip .icon-tile--sm svg {
  width: 12px;
  height: 12px;
}

.tech-group {
  grid-row: span 2;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--g-surface);
}

.tech-group__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.tech-group__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 0.6rem;
}

.tech-group__items li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  color: var(--ink-2);
  line-height: 1.3;
}

.tech-group__items img {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.9;
}

.tech-group__items .icon-tile--sm {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}

.tech-group__items .icon-tile--sm svg {
  width: 11px;
  height: 11px;
}

/* ---------- Cursos · módulos ---------- */

/* lista corrida em vez de grade de cartões: um curso de 10 módulos virava
   dez caixas escuras que competiam com o próprio curso. Aqui o fio separa
   e o número numera — o peso volta para o texto */
.module-list {
  display: grid;
  border-top: 1px solid var(--border);
  list-style: none;
  padding: 0;
}

.module-card {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-sm);
  padding: 1.15rem var(--space-sm);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s var(--ease);
}

/* filete de acento no lugar do translate: numa lista de fios, mover a
   linha inteira sacode as vizinhas */
.module-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--g-acc);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.module-card:hover {
  background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.07), transparent 65%);
}

.module-card:hover::before {
  opacity: 1;
}

/* na coluna própria à esquerda: como índice de sumário, e não como
   etiqueta solta no canto do cartão */
.module-card__num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  /* 1.9 × 0.8125rem casa a caixa de linha com a do h4 (1.15rem × 1.35) */
  line-height: 1.9;
  transition: color 0.3s var(--ease);
  pointer-events: none;
}

.module-card:hover .module-card__num {
  color: var(--acc);
}

.module-card h4 {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.module-card p {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.3rem;
  font-size: 0.9688rem;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---------- Comunidade ---------- */

/* cinco cartões iguais em três colunas; flex e não grade, para a última
   fila incompleta ficar centralizada em vez de encostar à esquerda */
.community-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
}

/* mesma casca e mesma escala do .audience-card: os dois são grades de
   cartão curto na mesma largura, então não há motivo para divergirem */
.community-card {
  flex: 1 1 calc((100% - 2 * var(--space-sm)) / 3);
  max-width: calc((100% - 2 * var(--space-sm)) / 3);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: var(--space-md);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.community-card:hover {
  border-color: var(--border-acc);
  transform: translateY(-3px);
}

.community-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.community-card p {
  font-size: var(--size-small);
  color: var(--ink-2);
}

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  gap: 0.6rem;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.faq-item[open] {
  border-color: var(--border-acc);
  /* véu de acento por cima do fundo sólido, para o aberto não ficar mais
     claro que o fechado por acidente */
  background: linear-gradient(rgba(var(--acc-rgb), 0.07), rgba(var(--acc-rgb), 0.07)),
              var(--card);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-0);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-hi);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234CAF80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.25s var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-item > p {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* ---------- Fecho de seção e CTA final ---------- */

.section-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-xl);
  text-align: center;
}

.section-cta p {
  font-size: var(--size-small);
  color: var(--ink-3);
}

/* ---------- Rodapé ---------- */

.site-footer {
  background-image: var(--grain-strong), var(--g-forest);
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, cover;
  border-top: 1px solid var(--border);
  padding-block: var(--space-2xl) var(--space-lg);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-lg);
}

.site-footer__brand p {
  margin-top: 0.75rem;
  font-size: var(--size-small);
  color: var(--ink-3);
  max-width: 34ch;
}

.site-footer__col h2 {
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-sm);
}

.site-footer__col ul {
  display: grid;
  gap: 0.55rem;
}

.site-footer__col a {
  font-size: var(--size-small);
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}

.site-footer__col a:hover {
  color: var(--acc);
}

.site-footer__rule {
  height: 1px;
  background: var(--border);
  margin-block: var(--space-lg);
}

.site-footer__legal p {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}

/* sem blur, 78% deixa a página legível atrás do formulário e o modal deixa
   de ler como camada de cima. Este é o par do @supports do header — mora
   aqui, e não lá, porque @supports não muda especificidade: declarado junto
   do cabeçalho, a regra acima o sobrescreveria */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-overlay {
    background: var(--overlay-solid);
  }
}

.modal-overlay.is-open {
  display: flex;
}

body.has-modal {
  overflow: hidden;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-block: auto;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-xl);
  background: var(--bg-2);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--shadow-card), var(--glow-acc);
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.modal__close:hover {
  color: var(--ink-0);
  border-color: var(--border-hi);
}

.modal__head {
  margin-bottom: var(--space-md);
  /* padding simétrico: o botão de fechar não puxa o texto centralizado para a esquerda */
  padding-inline: 2.5rem;
  text-align: center;
}

.modal__head h2 {
  font-size: 1.5rem;
  margin-bottom: 0.9rem;
}

.modal__head p {
  font-size: var(--size-small);
  color: var(--ink-2);
}

/* ---------- Formulário ---------- */

.form-field {
  margin-bottom: var(--space-sm);
}

.form-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 0.4rem;
}

.form-field input {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink-0);
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.form-field input::placeholder {
  color: var(--ink-3);
}

.form-field input:focus {
  outline: none;
  border-color: var(--acc);
  background: rgba(var(--acc-rgb), 0.07);
}

/* telefone: seletor de país + número, lado a lado numa moldura só */
.phone-field {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 0.5rem;
}

.phone-field__country {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink-0);
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.6rem 0.8rem 0.75rem;
  max-width: 9.5rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.phone-field__country:focus {
  outline: none;
  border-color: var(--acc);
  background: rgba(var(--acc-rgb), 0.07);
}

.phone-field__country option {
  color: #101418;
  background: #fff;
}

.form-field .phone-field input:invalid:not(:placeholder-shown),
.form-field input[type="email"]:invalid:not(:placeholder-shown) {
  border-color: rgba(232, 116, 106, 0.65);
}

.form-segment {
  border: 0;
  margin-bottom: var(--space-md);
}

.form-segment legend {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}

.segment-options {
  display: grid;
  gap: 0.5rem;
}

.segment-option {
  position: relative;
  display: block;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.75rem 0.95rem 0.75rem 2.4rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.segment-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.segment-option::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 1rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--border-hi);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.segment-option:has(input:checked) {
  border-color: var(--acc);
  background: rgba(var(--acc-rgb), 0.09);
}

.segment-option:has(input:checked)::before {
  border-color: var(--acc);
  box-shadow: inset 0 0 0 3.5px var(--acc);
}

.segment-option:has(input:focus-visible) {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

.segment-option__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-0);
}

.segment-option__desc {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit {
  width: 100%;
  margin-top: 0.25rem;
}

/* consentimento: linha discreta abaixo do botao, com os links legais */
.form-consent {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}

.form-consent a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s var(--ease);
}

.form-consent a:hover {
  color: var(--acc);
}

.form-status {
  display: none;
  margin-top: var(--space-sm);
  font-size: var(--size-small);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}

.form-status.is-visible {
  display: block;
}

.form-status--error {
  color: #f0a8a2;
  background: rgba(209, 72, 63, 0.12);
  border: 1px solid rgba(209, 72, 63, 0.35);
}

.form-status--success {
  color: var(--acc);
  background: rgba(var(--acc-rgb), 0.12);
  border: 1px solid var(--border-acc);
}

.form-success {
  text-align: center;
}

.form-success__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: var(--g-fade-acc);
  border: 1px solid var(--border-acc);
  color: var(--acc);
}

.form-success__icon svg {
  width: 26px;
  height: 26px;
}

.form-success h2 {
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}

.form-success p {
  font-size: var(--size-small);
  color: var(--ink-2);
  margin-bottom: var(--space-md);
}

/* ==================================================================
   Responsivo
   ================================================================== */

@media (max-width: 1000px) {
  /* abaixo disso a coluna do curso apertaria o título em quatro linhas:
     ela volta a correr por cima da lista, mas alinhada à esquerda */
  .course {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-lg);
  }

  .course__aside {
    max-width: 640px;
    grid-column: 1;
    grid-row: auto;
  }

  .course__modules {
    grid-column: 1;
    grid-row: auto;
  }

  /* empilhado não há vão para costurar, e o trilho viraria um fio solto
     cortando o meio do curso. A virada de curso volta a ser o fio horizontal */
  .course__spine {
    display: none;
  }

  .course + .course {
    background-image: linear-gradient(90deg, transparent, var(--border-hi) 28%,
                                      var(--border-hi) 72%, transparent);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top center;
  }

  .authority {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    max-width: 640px;
    margin-inline: auto;
  }

  /* empilhado, 640px de largura dariam 853px de altura ao retrato 3:4 */
  .authority__portrait {
    max-width: 400px;
  }

  /* as duas grades de cartão curto caem juntas para duas colunas */
  .audience-card,
  .community-card {
    flex-basis: calc((100% - var(--space-sm)) / 2);
    max-width: calc((100% - var(--space-sm)) / 2);
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-lg);
  }
}

@media (max-width: 900px) {
  /* sem isto o cartão agrupado continua reservando duas linhas e abre buraco */
  .tech-group {
    grid-row: auto;
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .audience-card,
  .community-card {
    flex-basis: 100%;
    max-width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tech-group__items {
    grid-template-columns: 1fr;
  }

  .course {
    padding-block: var(--space-lg);
  }

  /* a goteira do índice encolhe antes que o título comece a quebrar */
  .module-card {
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: 0.75rem;
    padding-inline: 0.75rem;
  }
}