/* ============================================================
   AWS Learning Challenge 2026 — Ka Solution
   style.css — Versão Final v4.1
   Guia Visual AWS Learning Challenge 2026
   Dark mode premium | Gradientes | Orbes | Grid de pontos
   ============================================================ */

/* ── Tokens de cor ── */
:root {
  --azul:         #00AEEF;
  --azul-glow:    rgba(0, 174, 239, 0.18);
  --azul-borda:   rgba(0, 174, 239, 0.28);
  --azul-deep:    rgba(0, 174, 239, 0.06);
  --roxo:         #7B61FF;
  --roxo-glow:    rgba(123, 97, 255, 0.18);
  --roxo-borda:   rgba(123, 97, 255, 0.28);
  --roxo-deep:    rgba(123, 97, 255, 0.06);
  --laranja:      #FF9900;
  --laranja-glow: rgba(255, 153, 0, 0.18);
  --laranja-borda:rgba(255, 153, 0, 0.28);
  --verde:        #22c55e;
  --verde-borda:  rgba(34, 197, 94, 0.30);

  --bg-base:      #07090f;
  --bg-surface:   rgba(255,255,255,0.035);
  --bg-card:      rgba(255,255,255,0.045);
  --bg-card-hover:rgba(255,255,255,0.075);
  --bg-card-deep: rgba(255,255,255,0.025);

  --texto:        #f0f4fa;
  --texto-2:      #8fa3bf;
  --texto-3:      #4d6480;
  --borda:        rgba(255,255,255,0.07);
  --borda-md:     rgba(255,255,255,0.11);
  --borda-hover:  rgba(255,255,255,0.18);

  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-pill:  100px;

  --sombra-azul:  0 0 48px rgba(0,174,239,0.13);
  --sombra-roxo:  0 0 48px rgba(123,97,255,0.13);
  --sombra-card:  0 8px 40px rgba(0,0,0,0.35);

  --fonte: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --max-w: 1180px;
  --nav-h: 70px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fonte);
  background: var(--bg-base);
  color: var(--texto);
  line-height: 1.65;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse 90% 55% at 15% -5%,  rgba(0,174,239,0.09)  0%, transparent 65%),
    radial-gradient(ellipse 70% 55% at 85% 105%,  rgba(123,97,255,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 110% 90% at 50% 50%,  #07090f 0%, #050710 100%);
  background-attachment: fixed;
}

/* ── Grid de pontos (Guia Visual — 4% opacidade) ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}

.container {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 28px; position: relative; z-index: 1;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h); display: flex; align-items: center; padding: 0 32px;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  background: rgba(7,9,15,0.90);
  backdrop-filter: blur(22px) saturate(1.4);
  border-color: var(--borda);
}
.nav-inner {
  max-width: var(--max-w); width: 100%; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
/* Logo principal da navbar — alterar height aqui para ajustar destaque do logo */
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 52px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  color: var(--texto-2); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 8px 13px; border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--texto); background: var(--bg-surface); }

.btn-nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--azul); color: #fff !important;
  padding: 9px 18px !important; border-radius: var(--radius-sm) !important;
  font-weight: 700 !important; font-size: 13px !important;
  text-decoration: none; white-space: nowrap;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 0 20px rgba(0,174,239,0.28);
}
.btn-nav-cta:hover { opacity: 0.87; transform: translateY(-1px); }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--texto); border-radius: 2px; transition: all 0.28s; }
.nav-mobile { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: calc(var(--nav-h) + 64px) 28px 80px;
  position: relative; overflow: hidden;
}
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(90px);
}
.hero-orb-1 {
  width: 700px; height: 450px;
  background: radial-gradient(ellipse, rgba(0,174,239,0.20) 0%, transparent 68%);
  top: -12%; left: -8%;
}
.hero-orb-2 {
  width: 560px; height: 430px;
  background: radial-gradient(ellipse, rgba(123,97,255,0.18) 0%, transparent 68%);
  bottom: -5%; right: -6%;
}
.hero-orb-3 {
  width: 320px; height: 280px;
  background: radial-gradient(ellipse, rgba(255,153,0,0.07) 0%, transparent 68%);
  top: 45%; left: 50%; transform: translateX(-50%);
}

.hero-inner { position: relative; z-index: 1; max-width: 860px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(0,174,239,0.09); border: 1px solid var(--azul-borda);
  color: var(--azul); padding: 8px 18px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  margin-bottom: 30px;
}
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--azul); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.75)} }

.hero-h1 {
  font-size: clamp(38px, 5.8vw, 70px);
  font-weight: 900; line-height: 1.06; letter-spacing: -2.5px;
  margin-bottom: 14px; color: var(--texto);
}
.hero-h1 .hl-azul   { color: var(--azul); }
.hero-h1 .hl-roxo   { color: var(--roxo); }
.hero-h1 .hl-laran  { color: var(--laranja); }

.hero-tagline {
  font-size: clamp(16px, 2.2vw, 22px); font-weight: 700;
  color: var(--texto-2); margin-bottom: 22px; letter-spacing: -0.3px;
}
.hero-tagline strong { color: var(--texto); }

.hero-sub {
  font-size: clamp(15px, 1.7vw, 18px); color: var(--texto-2);
  max-width: 640px; margin: 0 auto 40px; line-height: 1.70;
}

.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--azul); color: #fff;
  padding: 16px 34px; border-radius: var(--radius-md);
  font-size: 16px; font-weight: 700; text-decoration: none;
  box-shadow: 0 0 36px rgba(0,174,239,0.32);
  transition: opacity 0.2s, transform 0.2s;
}
.btn-primary:hover { opacity: 0.86; transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-surface); color: var(--texto);
  border: 1px solid var(--borda-md);
  padding: 16px 30px; border-radius: var(--radius-md);
  font-size: 16px; font-weight: 600; text-decoration: none;
  backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.btn-ghost:hover { background: var(--bg-card-hover); border-color: var(--borda-hover); transform: translateY(-2px); }

.btn-yt {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(220,38,38,0.10); color: #f87171;
  border: 1px solid rgba(220,38,38,0.22);
  padding: 14px 26px; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.btn-yt:hover { background: rgba(220,38,38,0.18); transform: translateY(-2px); }

/* Stats — bloco de números institucionais (prova social) */
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius-lg); overflow: hidden;
  backdrop-filter: blur(14px); margin-bottom: 28px; padding: 8px;
}
.hero-stat {
  padding: 26px 18px; text-align: center; border-radius: var(--radius-md);
  background: var(--bg-card-deep); transition: background 0.2s, transform 0.2s;
}
.hero-stat:hover { background: var(--bg-card-hover); transform: translateY(-2px); }
.hero-stat-n { font-size: 32px; font-weight: 900; display: block; line-height: 1; letter-spacing: -0.5px; }
.hero-stat-n.azul   { color: var(--azul); }
.hero-stat-n.roxo   { color: var(--roxo); }
.hero-stat-n.laran  { color: var(--laranja); }
.hero-stat-n.branco { color: var(--texto); }
.hero-stat-l { font-size: 12px; color: var(--texto-2); margin-top: 8px; font-weight: 600; line-height: 1.4; }

/* ── Contador regressivo ─────────────────────────────────────────────────────
   ATENÇÃO: Remover este bloco inteiro após 02/07/2026.
   No script.js: remover a função updateCountdown() e o setInterval.
   No style.css: remover o bloco .countdown-*.
   No index.html: remover o elemento id="countdown-wrap".
   ─────────────────────────────────────────────────────────────────────────── */
.countdown-wrap { text-align: center; }
.countdown-label { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 10px; }
.countdown-row { display: flex; gap: 10px; justify-content: center; }
.countdown-box {
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius-sm); padding: 13px 18px; min-width: 68px; text-align: center;
  backdrop-filter: blur(8px);
}
.countdown-n { font-size: 24px; font-weight: 900; color: var(--roxo); display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-u { font-size: 10px; color: var(--texto-3); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
/* ── fim bloco contador ── */

/* ============================================================
   SEÇÃO GENÉRICA
   ============================================================ */
.section { padding: 96px 0; position: relative; z-index: 1; }
.section-eyebrow {
  font-size: 16px; font-weight: 800; letter-spacing: 2.2px;
  text-transform: uppercase; margin-bottom: 10px; display: block;
}
.ey-azul   { color: var(--azul); }
.ey-roxo   { color: var(--roxo); }
.ey-laran  { color: var(--laranja); }

.section-title {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 800; letter-spacing: -1px; line-height: 1.14;
  color: var(--texto); margin-bottom: 14px;
}
.section-sub { font-size: 17px; color: var(--texto-2); line-height: 1.72; max-width: 560px; }
.sec-hdr-center { text-align: center; margin-bottom: 60px; }
.sec-hdr-center .section-sub { margin: 0 auto; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--borda), transparent); }

/* ============================================================
   VÍDEO DE APRESENTAÇÃO DA JORNADA
   Desktop: grid de 2 colunas, vídeo numa coluna e título/texto/CTAs na
   outra (lado a lado). Mobile/tablet (≤900px): 1 coluna, com a ordem
   reorganizada via grid-template-areas para Título → Texto → Vídeo →
   CTA principal → CTA secundário — ver media query no final do arquivo.
   ============================================================ */
.vj-section { padding: 72px 0; }
.vj-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  column-gap: 48px;
  row-gap: 16px;
  align-items: center;
  grid-template-areas:
    "video title"
    "video desc"
    "video cta1"
    "video cta2";
}
.vj-title { grid-area: title; }
.vj-desc  { grid-area: desc; font-size: 15px; color: var(--texto-2); line-height: 1.72; }
.vj-video { grid-area: video; }
.vj-cta1  { grid-area: cta1; font-size: 14px; padding: 12px 18px; }
.vj-cta2  { grid-area: cta2; justify-content: center; }

.vj-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34,197,94,0.10); border: 1px solid var(--verde-borda);
  color: #4ade80; padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; margin-bottom: 18px;
}
.vj-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: blink 1.5s infinite; }
.vj-h2 {
  font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--texto); line-height: 1.25;
}
.vj-video {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--azul-borda); box-shadow: 0 0 48px rgba(0,174,239,0.12);
  aspect-ratio: 16/9; background: #000;
}
.vj-video iframe { width: 100%; height: 100%; display: block; border: none; }

/* ============================================================
   BARRA DE PROGRESSO DA JORNADA
   Agora vive dentro da seção "Trilha completa" (.progress-card é
   posicionado diretamente no .container da Trilha — ver index.html).
   ============================================================ */
.progress-card {
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius-lg); padding: 32px 36px;
  backdrop-filter: blur(12px);
}
.progress-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 20px;
}
.progress-label { font-size: 18px; font-weight: 800; color: var(--texto); }
.progress-meta  { font-size: 15px; color: var(--texto-2); margin-top: 4px; }
.progress-meta strong { color: var(--azul); font-weight: 800; font-size: 17px; }

/* Barra principal
   Para atualizar: alterar o valor de --pct e o conteúdo da label.
   Atualmente: 3 de 34 aulas = 8.8%
   Exemplo para 10 aulas: --pct: 29%; label: "10 de 34 publicadas"        */
.progress-bar-track {
  height: 14px; background: rgba(255,255,255,0.08);
  border: 1px solid var(--borda);
  border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 20px;
}
.progress-bar-fill {
  height: 100%;
  /* ── ATUALIZAR ESTE VALOR ao publicar novas aulas ──
     Fórmula: (aulas publicadas / 34) * 100
     3/34 ≈ 8.8% | 10/34 ≈ 29% | 17/34 = 50% | 34/34 = 100% */
  width: 8.8%;
  background: linear-gradient(90deg, var(--azul), var(--roxo));
  border-radius: var(--radius-pill);
  box-shadow: 0 0 18px rgba(0,174,239,0.55);
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}

.progress-aulas {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.progress-aula-dot {
  width: 50px; height: 50px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  border: 1px solid var(--borda); color: var(--texto-2); background: var(--bg-card-deep);
  transition: all 0.2s;
}
/* ── ATUALIZAR: adicionar .done às aulas publicadas (aulas disponíveis ficam mais visíveis) ── */
.progress-aula-dot.done {
  background: linear-gradient(135deg, rgba(0,174,239,0.32), rgba(123,97,255,0.24));
  border-color: var(--azul); color: #fff; font-weight: 800;
  box-shadow: 0 0 10px rgba(0,174,239,0.35);
}
.progress-aula-dot.done::after { content: '✓'; font-size: 12px; }
.progress-aula-dot:not(.done) { font-size: 16px; }

.progress-nota {
  margin-top: 16px; font-size: 13px; color: var(--texto-3);
  display: flex; align-items: center; gap: 8px;
}

/* ============================================================
   QUEM DEVE PARTICIPAR
   ============================================================ */
.publico-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.publico-card {
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius-lg); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  position: relative; overflow: hidden;
}
.publico-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--azul), var(--roxo));
  opacity: 0; transition: opacity 0.25s;
}
.publico-card:hover { border-color: var(--borda-md); transform: translateY(-5px); box-shadow: var(--sombra-card); }
.publico-card:hover::before { opacity: 1; }
.publico-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.publico-icon.azul  { background: rgba(0,174,239,0.10); }
.publico-icon.roxo  { background: rgba(123,97,255,0.10); }
.publico-icon.laran { background: rgba(255,153,0,0.10); }
.publico-icon.verde { background: rgba(34,197,94,0.10); }
.publico-nome  { font-size: 16px; font-weight: 700; color: var(--texto); line-height: 1.3; }
.publico-desc  { font-size: 13px; color: var(--texto-2); line-height: 1.65; }
.publico-tags  { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.publico-tag {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--bg-surface); border: 1px solid var(--borda); color: var(--texto-3);
}

/* ============================================================
   TRILHA / MÓDULOS
   ============================================================ */
/* ── Filtros de módulo — centralizados, com espaço generoso acima (separação
   dos cards de Autoridade AWS) e abaixo (separação da timeline) ──
   Cada classe mf-* tem a cor oficial do módulo aplicada no hover e no
   estado .active:
   Todas as aulas / Módulo 1: #00AEEF · Módulo 2: #22C55E ·
   Módulo 3: #7B61FF · Módulo 4: #FF9900 */
.module-filters {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin: 64px 0 48px;
}
.mf-btn {
  padding: 9px 19px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
  border: 1px solid var(--borda); background: var(--bg-surface);
  color: var(--texto-2); cursor: pointer; transition: all 0.2s;
}
.mf-btn.mf-todas:hover, .mf-btn.mf-todas.active,
.mf-btn.mf-m1:hover,    .mf-btn.mf-m1.active    { border-color: #00AEEF; color: #00AEEF; background: rgba(0,174,239,0.09); }
.mf-btn.mf-m2:hover,    .mf-btn.mf-m2.active    { border-color: #22C55E; color: #22C55E; background: rgba(34,197,94,0.09); }
.mf-btn.mf-m3:hover,    .mf-btn.mf-m3.active    { border-color: #7B61FF; color: #7B61FF; background: rgba(123,97,255,0.09); }
.mf-btn.mf-m4:hover,    .mf-btn.mf-m4.active    { border-color: #FF9900; color: #FF9900; background: rgba(255,153,0,0.09); }

/* ── Timeline de módulos — seção própria, com leve destaque visual e
   espaçamento generoso acima/abaixo para se separar dos filtros e dos
   cards de aula. Cores oficiais por bloco aplicadas no ícone, na linha
   inferior (3px) e no hover/glow:
   Abertura/Módulo 1: #00AEEF · Módulo 2: #22C55E ·
   Módulo 3: #7B61FF · Módulo 4: #FF9900 · Encerramento: #FBBF24 ── */
.module-timeline-wrap {
  margin: 64px 0;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--borda);
  border-radius: calc(var(--radius-lg) + 6px);
}
.module-timeline {
  display: flex; align-items: stretch; background: var(--bg-card);
  border: 1px solid var(--borda); border-radius: var(--radius-lg);
  overflow: hidden;
}
.mt-block {
  flex: 1; padding: 28px 16px; text-align: center; border-right: 1px solid var(--borda);
  transition: background 0.2s, box-shadow 0.2s;
}
.mt-block:last-child { border-right: none; }
.mt-block.mod-abertura { border-bottom: 3px solid #00AEEF; }
.mt-block.mod-m1       { border-bottom: 3px solid #00AEEF; }
.mt-block.mod-m2       { border-bottom: 3px solid #22C55E; }
.mt-block.mod-m3       { border-bottom: 3px solid #7B61FF; }
.mt-block.mod-m4       { border-bottom: 3px solid #FF9900; }
.mt-block.mod-enc      { border-bottom: 3px solid #FBBF24; }
.mt-block.mod-abertura:hover, .mt-block.mod-m1:hover { background: rgba(0,174,239,0.06);   box-shadow: inset 0 -3px 18px rgba(0,174,239,0.20); }
.mt-block.mod-m2:hover                                { background: rgba(34,197,94,0.06);   box-shadow: inset 0 -3px 18px rgba(34,197,94,0.20); }
.mt-block.mod-m3:hover                                { background: rgba(123,97,255,0.06);  box-shadow: inset 0 -3px 18px rgba(123,97,255,0.20); }
.mt-block.mod-m4:hover                                { background: rgba(255,153,0,0.06);   box-shadow: inset 0 -3px 18px rgba(255,153,0,0.20); }
.mt-block.mod-enc:hover                               { background: rgba(251,191,36,0.06);  box-shadow: inset 0 -3px 18px rgba(251,191,36,0.20); }

.mt-icon  {
  font-size: clamp(22px, 1.7vw, 26px); margin: 0 auto 10px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.mt-block.mod-abertura .mt-icon, .mt-block.mod-m1 .mt-icon { background: rgba(0,174,239,0.14); }
.mt-block.mod-m2 .mt-icon { background: rgba(34,197,94,0.14); }
.mt-block.mod-m3 .mt-icon { background: rgba(123,97,255,0.14); }
.mt-block.mod-m4 .mt-icon { background: rgba(255,153,0,0.14); }
.mt-block.mod-enc .mt-icon { background: rgba(251,191,36,0.14); }
.mt-name  { font-size: clamp(14px, 1.3vw, 16px); font-weight: 800; color: var(--texto); }
.mt-range { font-size: 13px; color: var(--texto-2); margin-top: 5px; font-weight: 600; }
.mt-mes   { font-size: 11px; color: var(--texto-3); margin-top: 6px; line-height: 1.45; }

/* Grid de aulas */
.aulas-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

/* ── Cor por módulo — fonte única de verdade ──────────────────────────────
   Cada .aula-card recebe uma classe .module-1 a .module-4 (ou .module-final
   para o encerramento) que define --mod e --mod-rgb. Todo elemento colorido
   do card (texto do módulo, data, status, badges, botão) lê dessas duas
   variáveis — para mudar a cor de um módulo inteiro, basta alterar aqui.
   Abertura usa a mesma cor do Módulo 1 (azul), como na timeline.
   ────────────────────────────────────────────────────────────────────────── */
.aula-card.module-1     { --mod: #00AEEF; --mod-rgb: 0,174,239; }
.aula-card.module-2     { --mod: #22C55E; --mod-rgb: 34,197,94; }
.aula-card.module-3     { --mod: #7B61FF; --mod-rgb: 123,97,255; }
.aula-card.module-4     { --mod: #FF9900; --mod-rgb: 255,153,0; }
.aula-card.module-final { --mod: #FBBF24; --mod-rgb: 251,191,36; }

.aula-card {
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.aula-card:hover { transform: translateY(-4px); }
.aula-card[class*="module-"]:hover {
  border-color: rgba(var(--mod-rgb), 0.32);
  box-shadow: 0 8px 32px rgba(var(--mod-rgb), 0.14);
}
.aula-card.em-breve { opacity: 0.68; }
.aula-card.em-breve:hover { opacity: 0.90; }

.aula-thumb {
  aspect-ratio: 16/9; background: var(--bg-card-deep); position: relative; overflow: hidden;
}
.aula-thumb picture,
.aula-thumb img,
.aula-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.badge-num {
  position: absolute; top: 10px; left: 10px;
  background: rgba(7,9,15,0.85); border: 1px solid var(--borda-md);
  color: var(--texto); font-size: 12px; font-weight: 800;
  padding: 4px 11px; border-radius: var(--radius-pill); backdrop-filter: blur(8px);
}
.badge-status {
  position: absolute; top: 10px; right: 10px;
  font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill);
}
/* Status "Disponível agora" / "Em breve" — herdam a cor do módulo (--mod)
   definida em .aula-card.module-*. Fallback em --azul para o caso de algum
   card não ter classe de módulo. */
.badge-status.ok   { background: rgba(var(--mod-rgb, 0,174,239), 0.20); border: 1px solid rgba(var(--mod-rgb, 0,174,239), 0.40); color: var(--mod, var(--azul)); }
.badge-status.soon { background: rgba(var(--mod-rgb, 0,174,239), 0.12); border: 1px solid rgba(var(--mod-rgb, 0,174,239), 0.30); color: var(--mod, var(--azul)); }

.aula-body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.aula-mod  { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.9px; margin-bottom: 7px; color: var(--mod, var(--azul)); }
.aula-tit  { font-size: 15px; font-weight: 700; color: var(--texto); line-height: 1.4; margin-bottom: 10px; }
.aula-data { font-size: 12px; color: var(--texto-2); margin-bottom: 14px; }
.aula-data.ok { color: var(--mod, var(--azul)); font-weight: 700; }

.btn-assistir {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--mod, var(--azul)); color: #fff;
  padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: opacity 0.2s; margin-top: auto;
}
.btn-assistir:hover { opacity: 0.84; }

.aula-breve {
  margin-top: auto; font-size: 12px; color: var(--texto-2); font-weight: 600;
  background: var(--bg-surface); border: 1px solid rgba(var(--mod-rgb, 255,255,255), 0.22);
  padding: 9px 12px; border-radius: var(--radius-sm); text-align: center;
}

.trilha-nota {
  margin-top: 36px; padding: 18px 22px;
  background: rgba(0,174,239,0.06); border: 1px solid var(--azul-borda);
  border-radius: var(--radius-md); display: flex; align-items: center; gap: 14px;
}
.trilha-nota-icon { font-size: 20px; flex-shrink: 0; }
.trilha-nota-texto { font-size: 14px; color: var(--texto-2); line-height: 1.6; }
.trilha-nota-texto strong { color: var(--texto); }

/* ============================================================
   AUTORIDADE AWS
   ============================================================ */
.aws-autoridade {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 48px;
}
.aws-aut-card {
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius-md); padding: 30px 24px; text-align: center;
  transition: border-color 0.2s;
}
.aws-aut-card:hover { border-color: var(--borda-md); }
.aws-aut-icon { font-size: clamp(30px, 2.4vw, 36px); margin-bottom: 14px; }
.aws-aut-label { font-size: clamp(14px, 1.3vw, 16px); font-weight: 800; color: var(--texto); line-height: 1.4; }
.aws-aut-sub   { font-size: clamp(12px, 1.1vw, 13px); color: var(--texto-2); margin-top: 7px; line-height: 1.55; }

/* ============================================================
   BENEFÍCIOS
   ============================================================ */
.beneficios-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.ben-card {
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius-lg); padding: 30px 26px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.ben-card:hover { border-color: var(--borda-md); transform: translateY(-4px); box-shadow: var(--sombra-card); }
.ben-icon {
  width: 50px; height: 50px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px;
}
.ben-icon.azul  { background: rgba(0,174,239,0.10); }
.ben-icon.roxo  { background: rgba(123,97,255,0.10); }
.ben-icon.laran { background: rgba(255,153,0,0.10); }
.ben-icon.verde { background: rgba(34,197,94,0.10); }
.ben-tit  { font-size: 16px; font-weight: 700; color: var(--texto); margin-bottom: 8px; }
.ben-desc { font-size: 14px; color: var(--texto-2); line-height: 1.65; }

/* ============================================================
   FERRAMENTAS DE IA
   ============================================================ */
.ferramentas-section {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent, rgba(123,97,255,0.03), transparent);
}
.ferramentas-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 20px; }
.ferr-card {
  background: rgba(123,97,255,0.05); border: 1px solid var(--roxo-borda);
  border-radius: var(--radius-lg); padding: 26px 20px; text-align: center;
  transition: all 0.25s;
}
.ferr-card:hover { background: rgba(123,97,255,0.09); transform: translateY(-5px); box-shadow: var(--sombra-roxo); }
.ferr-icon { font-size: 30px; margin-bottom: 12px; line-height: 1; }
.ferr-icon svg { width: 30px; height: 30px; display: block; margin: 0 auto; color: var(--roxo); }
.ferr-nome { font-size: 14px; font-weight: 700; color: var(--texto); margin-bottom: 4px; }
.ferr-aulas{ font-size: 11px; color: var(--roxo); font-weight: 600; }
.ferr-integrador {
  background: linear-gradient(135deg, rgba(0,174,239,0.05), rgba(123,97,255,0.07));
  border: 1px solid rgba(123,97,255,0.18); border-radius: var(--radius-md);
  padding: 22px 26px; text-align: center;
}
.ferr-integ-t { font-size: 15px; font-weight: 700; color: var(--texto); margin-bottom: 5px; }
.ferr-integ-d { font-size: 14px; color: var(--texto-2); }

/* ============================================================
   CERTIFICADO DE PARTICIPAÇÃO
   Seção entre "Trilha completa" e "Certificações" — texto à esquerda,
   imagem do certificado à direita. Não confundir com .cert-card /
   .certs-grid (certificações oficiais AWS, seção seguinte).
   ============================================================ */
.cert-part-section { padding: 80px 0; }
.cert-part-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.cert-part-desc {
  font-size: 16px; color: var(--texto-2); line-height: 1.78; margin-top: 14px;
}
.cert-part-comp {
  font-size: 14px; color: var(--texto-3); line-height: 1.65; margin-top: 16px;
}
.cert-part-img {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--laranja-borda);
  box-shadow: 0 0 48px rgba(255,153,0,0.12);
  background: var(--bg-card-deep);
}
.cert-part-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1200/800; }

/* ============================================================
   CERTIFICAÇÕES
   ============================================================ */
.certs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cert-card {
  border-radius: var(--radius-xl); padding: 44px 36px; text-align: center;
  transition: transform 0.25s;
}
.cert-card:hover { transform: translateY(-6px); }
.cert-card.cloud {
  background: linear-gradient(140deg, rgba(0,174,239,0.07), rgba(0,174,239,0.02));
  border: 1px solid var(--azul-borda);
}
.cert-card.ia {
  background: linear-gradient(140deg, rgba(123,97,255,0.09), rgba(123,97,255,0.02));
  border: 1px solid var(--roxo-borda);
}
.cert-badge-wrap {
  /* width fixo, mas com max-width:100% + aspect-ratio:1/1 (e height:auto)
     o círculo encolhe proporcionalmente em telas estreitas, evitando
     overflow horizontal dentro do .cert-card em mobile. */
  width: 250px; height: auto; max-width: 100%; aspect-ratio: 1/1; margin: 0 auto 22px;
  background: var(--bg-surface); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda);
  box-shadow: 0 0 32px rgba(0,174,239,0.18);
}
/* Card AI Practitioner (.ia) usa glow roxo em vez de azul, para
   acompanhar a cor do próprio card (consistência com .cert-card.ia). */
.cert-card.ia .cert-badge-wrap { box-shadow: 0 0 32px rgba(123,97,255,0.18); }
.cert-badge-wrap img { width: 80%; height: 80%; max-width: 200px; max-height: 200px; object-fit: contain; display: block; margin: 0 auto; }
.cert-nome  { font-size: 19px; font-weight: 800; color: var(--texto); margin-bottom: 6px; }
.cert-code  { font-size: 12px; font-weight: 800; margin-bottom: 14px; letter-spacing: 0.8px; }
.cert-code.azul { color: var(--azul); }
.cert-code.roxo { color: var(--roxo); }
.cert-desc  { font-size: 14px; color: var(--texto-2); line-height: 1.65; margin-bottom: 18px; }
.cert-meses { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.cert-meses.azul { color: var(--azul); }
.cert-meses.roxo { color: var(--roxo); }

/* ============================================================
   SOBRE A KA SOLUTION
   ============================================================ */
.ka-section {
  padding: 96px 0;
  background: linear-gradient(180deg, transparent, rgba(0,174,239,0.02), transparent);
}
/* Cabeçalho institucional — largura total, acima do grid de duas colunas.
   Isso dá mais presença ao texto (não fica espremido numa coluna estreita)
   e faz com que as duas colunas do .ka-grid abaixo comecem exatamente no
   mesmo ponto, sem precisar de hacks de margem para alinhar os topos. */
.ka-top { margin-bottom: 44px; }
.ka-logo-small { font-size: 12px; color: var(--texto-3); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
/* Frase institucional principal — maior destaque, antes do parágrafo. */
.ka-headline {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; color: var(--texto);
  letter-spacing: -0.5px; line-height: 1.3; margin-bottom: 16px; max-width: 760px;
}
.ka-descricao { font-size: 16px; color: var(--texto-2); line-height: 1.8; max-width: 760px; }

/* Grid de duas colunas: diferenciais (esquerda) e números (direita).
   align-items: start garante que o primeiro card de cada coluna fique
   alinhado na mesma linha — sem isso, a coluna mais curta (números)
   ficaria centralizada/flutuando no meio da seção. */
.ka-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }

.ka-destaques { display: flex; flex-direction: column; gap: 14px; margin-bottom: 0; }
.ka-dest {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius-md); padding: 18px 20px;
  transition: border-color 0.2s;
}
.ka-dest:hover { border-color: var(--borda-md); }
.ka-dest-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.ka-dest-tit  { font-size: 14px; font-weight: 700; color: var(--texto); margin-bottom: 3px; }
.ka-dest-sub  { font-size: 13px; color: var(--texto-2); line-height: 1.58; }

/* Números KA — cards levemente maiores para preencher melhor a coluna
   direita após a remoção do bloco de parceiros estratégicos. */
.ka-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ka-num-card {
  background: var(--bg-card); border: 1px solid var(--borda);
  border-radius: var(--radius-lg); padding: 34px 24px; text-align: center;
  transition: border-color 0.25s, transform 0.25s;
}
.ka-num-card:hover { border-color: var(--borda-md); transform: translateY(-3px); }
.ka-num-n { font-size: 34px; font-weight: 900; line-height: 1; margin-bottom: 9px; }
.ka-num-n.azul  { color: var(--azul); }
.ka-num-n.roxo  { color: var(--roxo); }
.ka-num-n.laran { color: var(--laranja); }
.ka-num-n.verde { color: var(--verde); }
.ka-num-l { font-size: 13px; color: var(--texto-2); line-height: 1.5; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final {
  padding: 120px 0; text-align: center; position: relative; overflow: hidden;
}
.cta-orb-1 {
  position: absolute; width: 700px; height: 500px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,174,239,0.11) 0%, transparent 68%);
  top: -25%; left: -8%; filter: blur(70px); pointer-events: none;
}
.cta-orb-2 {
  position: absolute; width: 600px; height: 420px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(123,97,255,0.11) 0%, transparent 68%);
  bottom: -20%; right: -8%; filter: blur(70px); pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.cta-badge {
  display: inline-block; background: rgba(255,153,0,0.09); border: 1px solid var(--laranja-borda);
  color: var(--laranja); padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 26px;
}
.cta-h2 {
  font-size: clamp(30px, 4.5vw, 54px); font-weight: 900; letter-spacing: -1.5px;
  line-height: 1.09; color: var(--texto); margin-bottom: 18px;
}
.cta-sub { font-size: 17px; color: var(--texto-2); line-height: 1.70; margin-bottom: 44px; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { border-top: 1px solid var(--borda); padding: 52px 0 28px; position: relative; z-index: 1; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 36px; flex-wrap: wrap; margin-bottom: 36px;
}
.footer-tagline { font-size: 12px; color: var(--texto-3); max-width: 240px; line-height: 1.6; }
.footer-col h4 { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--texto-3); margin-bottom: 14px; }
.footer-col ul  { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col a   { font-size: 13px; color: var(--texto-2); text-decoration: none; transition: color 0.2s; }
.footer-col a:hover { color: var(--azul); }
.footer-bottom {
  border-top: 1px solid var(--borda); padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.footer-copy   { font-size: 11px; color: var(--texto-3); }
.footer-notice { font-size: 10px; color: var(--texto-3); max-width: 480px; text-align: right; line-height: 1.55; }

/* ============================================================
   REVEAL AO SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }
.d6 { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-dot, .progress-bar-fill { animation: none; transition: none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px) {
  .aws-autoridade   { grid-template-columns: repeat(2,1fr); }
  .ferramentas-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .aulas-grid       { grid-template-columns: repeat(2,1fr); }
  .certs-grid       { grid-template-columns: 1fr; }
  .cert-part-grid   { grid-template-columns: 1fr; gap: 32px; }
  .ka-grid          { grid-template-columns: 1fr; gap: 48px; }
  .publico-grid     { grid-template-columns: repeat(2,1fr); }
  .beneficios-grid  { grid-template-columns: repeat(2,1fr); }
  .module-timeline  { flex-wrap: wrap; }
  .mt-block         { flex: 1 1 40%; }
  /* Vídeo de apresentação — tablet e mobile: 1 coluna, vídeo em largura
     total (16:9), ordem Título → Texto → Vídeo → CTA principal → CTA
     secundário (em vez de vídeo e texto lado a lado, que ficava espremido). */
  .vj-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "desc"
      "video"
      "cta1"
      "cta2";
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .nav-links        { display: none; }
  .nav-hamburger    { display: flex; }
  .nav-mobile.open  {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: rgba(7,9,15,0.97); backdrop-filter: blur(22px);
    padding: 8px 0 20px; border-bottom: 1px solid var(--borda); z-index: 999;
  }
  .nav-mobile.open a {
    display: block; padding: 14px 28px; color: var(--texto-2);
    text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--borda);
  }
  .aulas-grid       { grid-template-columns: 1fr; }
  .ferramentas-grid { grid-template-columns: 1fr 1fr; }
  .beneficios-grid  { grid-template-columns: 1fr; }
  .publico-grid     { grid-template-columns: 1fr; }
  .ka-nums          { grid-template-columns: 1fr 1fr; }
  .aws-autoridade   { grid-template-columns: 1fr 1fr; }
  .hero-stats       { grid-template-columns: repeat(2, 1fr); }
  .hero-stat-n      { font-size: 26px; }
  .cta-btns         { flex-direction: column; align-items: center; }
  .footer-inner     { flex-direction: column; }
  .footer-bottom    { flex-direction: column; text-align: center; }
  .footer-notice    { text-align: center; }
  .countdown-box    { min-width: 58px; padding: 10px 12px; }
  .countdown-n      { font-size: 20px; }
  .progress-aula-dot{ width: 26px; height: 26px; }
  .progress-label   { font-size: 16px; }
  .progress-meta strong { font-size: 15px; }
  .aws-aut-card     { padding: 22px 16px; }
  .cert-card        { padding: 32px 22px; }
  /* Timeline em mobile: scroll horizontal em vez de quebrar em 40% —
     os textos completos dos módulos (M1–M4) não cabem bem em coluna estreita. */
  .module-timeline  {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .mt-block         {
    flex: 0 0 78%; padding: 20px 16px; scroll-snap-align: start;
  }
  .module-filters   { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .mf-btn           { flex-shrink: 0; }
}