/* =========================================================================
   LOBO LUNAR CEL — style.css
   -------------------------------------------------------------------------
   Este é o arquivo de estilos ÚNICO usado em todas as páginas do site.
   Ele está dividido em blocos numerados para facilitar a edição:

   1. RESET / BASE .......... regras básicas para zerar estilos do navegador
   2. VARIÁVEIS (TOKENS) ..... cores, fontes e espaçamentos centralizados
   3. TIPOGRAFIA ............. títulos, parágrafos, links
   4. UTILITÁRIOS ............ classes reutilizáveis (container, botões...)
   5. HEADER / MENU .......... cabeçalho fixo e menu mobile
   6. HERO ................... primeira seção (banner principal)
   7. FAIXA DE ESTATÍSTICAS .. "+8 anos", "iPhone", etc.
   8. SERVIÇOS ............... grade de cards estilo "placa de circuito"
   9. SOBRE .................. seção institucional
   10. ATALHOS (Mentoria/Esquemas/Servidor/Soluções)
   11. VÍDEOS SHORTS ......... embed do YouTube
   12. CTA CURSO ............. faixa de divulgação do curso
   13. FOOTER ................ rodapé
   14. BOTÃO WHATSAPP FLUTUANTE
   15. PÁGINAS INTERNAS (cursos, esquemas, soluções, servidor)
   16. ANIMAÇÕES ............. keyframes usados no site
   17. RESPONSIVO ............ ajustes para tablet e celular

   DICA: use Ctrl+F e procure pelo número do bloco (ex: "3. TIPOGRAFIA")
   para pular direto para a parte que você quer mudar.
   ========================================================================= */


/* ============================= 1. RESET / BASE ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;      /* padding e borda não aumentam o tamanho do elemento */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;      /* rolagem suave ao clicar em links do menu (#ancoras) */
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}


/* ============================ 2. VARIÁVEIS (TOKENS) ==================== */
/*
  Paleta baseada na sua logo: fundo espacial escuro (azul quase preto),
  azul elétrico (traje/nave), ciano (chave de fenda / visor do capacete)
  e branco/prata (astronauta). O verde fica reservado só para os botões
  de ação principal (CTAs), como você pediu.

  Se quiser trocar alguma cor do site inteiro, troque só aqui embaixo.
*/
:root {
  /* Cores base */
  --bg-900: #060a16;      /* fundo mais escuro (quase preto/azulado) */
  --bg-800: #0b1226;      /* fundo padrão das seções escuras */
  --bg-700: #101a35;      /* painéis/cards */
  --bg-600: #16224a;      /* bordas e hover de painéis */

  --blue-500: #2f6fed;    /* azul elétrico — cor de destaque principal */
  --blue-400: #5b8cff;    /* azul mais claro, usado em textos/hover */
  --blue-glow: #3c7dffb3; /* azul translúcido para sombras/brilhos */

  --cyan-400: #35e0e8;    /* ciano — detalhes, ícones, linhas de "circuito" */

  --white-100: #f5f7fb;   /* branco principal (textos sobre fundo escuro) */
  --grey-300: #b7c0dd;    /* cinza claro (parágrafos) */
  --grey-500: #7f8ab0;    /* cinza médio (textos secundários) */

  --green-500: #22c55e;   /* verde — botões de ação (WhatsApp, comprar, etc.) */
  --green-600: #17a94c;   /* verde escuro — hover dos botões verdes */

  /* Tipografia */
  --font-display: 'Orbitron', sans-serif;   /* títulos: visual "tech/espacial" */
  --font-body: 'Inter', sans-serif;         /* textos: alta legibilidade */
  --font-mono: 'JetBrains Mono', monospace; /* rótulos técnicos, tipo "IC-01" */

  /* Espaçamentos e formas */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --container: 1180px;
  --section-y: clamp(64px, 9vw, 120px);
}


/* ============================== 3. TIPOGRAFIA =========================== */
body {
  font-family: var(--font-body);
  background: var(--bg-800);
  color: var(--white-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { color: var(--grey-300); }

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--cyan-400);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--cyan-400);
  display: inline-block;
}


/* ============================= 4. UTILITÁRIOS =========================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--section-y) 0;
  position: relative;
}

.section--alt {
  background: var(--bg-700);
  border-top: 1px solid var(--bg-600);
  border-bottom: 1px solid var(--bg-600);
}

.section-head {
  max-width: 640px;
  margin: 0 0 48px;
}
.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Botões: usados em todo o site (WhatsApp, links, CTAs) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(135deg, var(--green-500), var(--green-600));
  color: #06170c;
  box-shadow: 0 10px 30px -8px rgba(34, 197, 94, 0.55);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -8px rgba(34, 197, 94, 0.7);
}

.btn--outline {
  border: 1.5px solid var(--bg-600);
  color: var(--white-100);
  background: rgba(255, 255, 255, 0.02);
}
.btn--outline:hover {
  border-color: var(--blue-400);
  background: rgba(91, 140, 255, 0.08);
  transform: translateY(-3px);
}

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

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--bg-600);
  color: var(--cyan-400);
  background: rgba(53, 224, 232, 0.06);
}

/* Classe usada pelo JS para revelar elementos ao rolar a página */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fundo com "estrelas" sutis, usado atrás de várias seções escuras */
.stars-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 10% 65%, rgba(255,255,255,0.3), transparent);
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: 0.6;
}


/* ============================ 5. HEADER / MENU =========================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
/* Classe adicionada via JS quando o usuário rola a página */
.header.is-scrolled {
  background: rgba(6, 10, 22, 0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.6);
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-600);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--blue-500);
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__text strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}
.brand__text span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--cyan-400);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav a {
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--grey-300);
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.nav a:hover,
.nav a.is-active {
  color: var(--white-100);
  background: rgba(91, 140, 255, 0.12);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Botão hambúrguer (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--bg-600);
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--white-100);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ================================= 6. HERO =============================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 80px;
  background:
    radial-gradient(1100px 620px at 82% 8%, rgba(47, 111, 237, 0.35), transparent 60%),
    radial-gradient(700px 500px at 5% 95%, rgba(53, 224, 232, 0.12), transparent 60%),
    var(--bg-900);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero__content h1 {
  margin-bottom: 20px;
}
.hero__content h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--blue-400), var(--cyan-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__content p {
  max-width: 520px;
  font-size: 1.08rem;
  margin-bottom: 34px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

.hero__meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__meta div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--white-100);
}
.hero__meta div span {
  font-size: 0.78rem;
  color: var(--grey-500);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Painel visual do herói: logo + "órbita" animada, remete ao astronauta/lua da marca */
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.orbit {
  position: absolute;
  border: 1px dashed rgba(91, 140, 255, 0.35);
  border-radius: 50%;
}
.orbit--1 { width: 320px; height: 320px; animation: spin 22s linear infinite; }
.orbit--2 { width: 420px; height: 420px; animation: spin 34s linear infinite reverse; }
.orbit--3 { width: 520px; height: 520px; animation: spin 48s linear infinite; border-style: dotted; }

.orbit__dot {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 16px 4px rgba(53, 224, 232, 0.65);
}

.hero__logo-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(47,111,237,0.35), transparent 70%);
  animation: float 6s ease-in-out infinite;
}
.hero__logo-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg-700), 0 0 60px rgba(47, 111, 237, 0.55);
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--grey-500);
  text-transform: uppercase;
  z-index: 2;
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--cyan-400), transparent);
  animation: scrollLine 1.8s ease-in-out infinite;
}


/* ====================== 7. FAIXA DE ESTATÍSTICAS ========================= */
.stats {
  position: relative;
  border-top: 1px solid var(--bg-600);
  border-bottom: 1px solid var(--bg-600);
  background: var(--bg-800);
}
.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats__item {
  padding: 30px 20px;
  text-align: center;
  border-left: 1px solid var(--bg-600);
}
.stats__item:first-child { border-left: none; }
.stats__item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  background: linear-gradient(90deg, var(--cyan-400), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats__item span {
  font-size: 0.82rem;
  color: var(--grey-500);
}


/* ============================== 8. SERVIÇOS =============================== */
/*
  Cada card de serviço é rotulado como um COMPONENTE DE PLACA (IC, R, C, U, Q, L)
  — a mesma nomenclatura usada em esquemas elétricos reais — porque você
  trabalha com reparo em nível de placa. É um "toque de marca" que só faz
  sentido pro seu ramo (em vez de numerar genérico 01, 02, 03).
*/
.services__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Linhas de "trilha de circuito" conectando os cards (elemento de assinatura visual) */
.services__grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 32.8%, rgba(53,224,232,0.16) 33%, rgba(53,224,232,0.16) 33.4%, transparent 33.6%),
    linear-gradient(90deg, transparent 65.8%, rgba(53,224,232,0.16) 66%, rgba(53,224,232,0.16) 66.4%, transparent 66.6%);
  pointer-events: none;
  display: none; /* ativado apenas em telas largas via media query abaixo */
}
@media (min-width: 900px) {
  .services__grid::before { display: block; }
}

.service-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-700), var(--bg-800));
  border: 1px solid var(--bg-600);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: var(--blue-500);
  box-shadow: 0 20px 40px -20px rgba(47, 111, 237, 0.55);
}
.service-card__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cyan-400);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  display: block;
}
.service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 111, 237, 0.14);
  color: var(--blue-400);
  margin-bottom: 16px;
  font-size: 1.3rem;
}
.service-card h3 { margin-bottom: 8px; }
.service-card p { font-size: 0.92rem; }


/* ================================ 9. SOBRE ================================= */
.about__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.about__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--bg-600);
  background: linear-gradient(160deg, var(--bg-700), var(--bg-900));
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.about__visual img {
  width: 220px;
  filter: drop-shadow(0 20px 40px rgba(47,111,237,0.4));
  animation: float 7s ease-in-out infinite;
}
.about__list {
  margin-top: 26px;
  display: grid;
  gap: 16px;
}
.about__list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--grey-300);
  font-size: 0.96rem;
}
.about__list li strong { color: var(--white-100); }
.about__list .dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 10px 2px rgba(34,197,94,0.6);
}


/* ============ 10. ATALHOS (Mentoria / Esquemas / Servidor / Soluções) ======= */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.quick-card {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-600);
  background: var(--bg-700);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.quick-card:hover {
  transform: translateY(-6px);
  border-color: var(--cyan-400);
}
.quick-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -40%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(53,224,232,0.25), transparent 70%);
  border-radius: 50%;
}
.quick-card h3 { margin: 14px 0 8px; font-size: 1.1rem; }
.quick-card p { font-size: 0.86rem; margin-bottom: 16px; }
.quick-card .badge { margin-bottom: 10px; }
.quick-card__link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--cyan-400);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.quick-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(47,111,237,0.16);
  color: var(--blue-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}


/* ============================ 11. VÍDEOS SHORTS ============================ */
.videos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.video-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--bg-600);
  background: #000;
  aspect-ratio: 9 / 16;
}
.video-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.socials-row {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--bg-600);
  font-size: 0.88rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.social-pill:hover {
  border-color: var(--blue-400);
  transform: translateY(-2px);
}


/* ============================ 12. CTA CURSO ================================ */
.cta-course {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 64px);
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(34,197,94,0.18), transparent 60%),
    linear-gradient(135deg, var(--bg-700), var(--bg-900));
  border: 1px solid var(--bg-600);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px;
  align-items: center;
  overflow: hidden;
}
.cta-course h2 { margin-bottom: 14px; }
.cta-course p { max-width: 480px; }
.cta-course__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ================================ 13. FOOTER ================================ */
.footer {
  background: var(--bg-900);
  border-top: 1px solid var(--bg-600);
  padding: 64px 0 28px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer__brand .brand { margin-bottom: 16px; }
.footer__brand p {
  font-size: 0.9rem;
  max-width: 320px;
  margin-bottom: 18px;
}
.footer h4 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey-500);
  margin-bottom: 18px;
}
.footer ul { display: grid; gap: 12px; }
.footer ul a {
  font-size: 0.92rem;
  color: var(--grey-300);
  transition: color 0.2s ease;
}
.footer ul a:hover { color: var(--cyan-400); }
.footer__bottom {
  border-top: 1px solid var(--bg-600);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--grey-500);
}


/* ===================== 14. BOTÃO WHATSAPP FLUTUANTE ========================= */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-500), var(--green-600));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -6px rgba(34,197,94,0.65);
  animation: pulse 2.6s ease-in-out infinite;
  transition: transform 0.25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; fill: #06170c; }


/* ===================== 15. PÁGINAS INTERNAS =========================== */
/* Cabeçalho simples usado no topo de páginas internas (não é o hero da home) */
.page-hero {
  padding-top: 150px;
  padding-bottom: 60px;
  position: relative;
  background:
    radial-gradient(800px 420px at 85% 0%, rgba(47,111,237,0.3), transparent 60%),
    var(--bg-900);
  text-align: center;
}
.page-hero h1 { margin-bottom: 14px; }
.page-hero p {
  max-width: 560px;
  margin: 0 auto;
}
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--grey-500);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.breadcrumb a { color: var(--cyan-400); }

/* Card "em breve" reutilizado em Esquemas / Soluções / Servidor */
.coming-soon {
  border: 1px dashed var(--bg-600);
  border-radius: var(--radius-lg);
  padding: 54px 30px;
  text-align: center;
  background: var(--bg-700);
}
.coming-soon .badge { margin-bottom: 18px; }
.coming-soon p { max-width: 460px; margin: 10px auto 0; }
.coming-soon__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: rgba(53,224,232,0.12);
  color: var(--cyan-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

/* Grade de tópicos (usada em soluções.html) */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.topic-card {
  padding: 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-600);
  background: var(--bg-700);
}
.topic-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.topic-card h3 { font-size: 1.05rem; }
.topic-card ul {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--grey-500);
}
.topic-card ul li::before {
  content: "› ";
  color: var(--cyan-400);
}

/* Grade de produtos do "Servidor" (marketplace) — pronta para o futuro */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.product-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-600);
  background: var(--bg-700);
  overflow: hidden;
  opacity: 0.55;
  filter: grayscale(0.4);
}
.product-card__thumb {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--bg-600), var(--bg-800));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--grey-500);
}
.product-card__body { padding: 18px; }
.product-card__body h4 { font-size: 0.98rem; margin-bottom: 6px; }
.product-card__body span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--grey-500);
}

/* Página do curso "Reparo Lucrativo" */
.course-hero {
  padding-top: 150px;
  padding-bottom: 60px;
  background:
    radial-gradient(900px 480px at 15% 0%, rgba(34,197,94,0.16), transparent 60%),
    radial-gradient(700px 420px at 90% 20%, rgba(47,111,237,0.28), transparent 60%),
    var(--bg-900);
}
.course-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.course-hero__price-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--bg-600);
  background: var(--bg-700);
  padding: 32px;
}
.course-hero__price-card .price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  margin: 10px 0 4px;
}
.course-hero__price-card .price span {
  font-size: 1rem;
  color: var(--grey-500);
  font-family: var(--font-body);
}
.course-hero__price-card ul {
  margin: 22px 0 26px;
  display: grid;
  gap: 12px;
  font-size: 0.9rem;
}
.course-hero__price-card ul li { display: flex; gap: 10px; }

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.module-card {
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg-600);
  background: var(--bg-700);
  display: flex;
  gap: 16px;
}
.module-card__num {
  font-family: var(--font-mono);
  color: var(--cyan-400);
  font-size: 0.85rem;
}

.include-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.include-card {
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--radius-md);
  background: var(--bg-700);
  border: 1px solid var(--bg-600);
}
.include-card .service-card__icon { margin: 0 auto 16px; }


/* =============================== 16. ANIMAÇÕES ============================== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
  50% { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
}

/* Respeita usuários que preferem menos animação (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================== 17. RESPONSIVO ============================== */
@media (max-width: 1080px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .include-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav { display: none; } /* menu principal vira "drawer" mobile via JS */
  .nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    background: rgba(11, 18, 38, 0.97);
    border: 1px solid var(--bg-600);
    border-radius: var(--radius-md);
    padding: 14px;
    backdrop-filter: blur(14px);
  }
  .nav-toggle { display: flex; }

  .hero__inner,
  .about__inner,
  .course-hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__visual { order: -1; min-height: 300px; }
  .hero__logo-wrap { width: 220px; height: 220px; }
  .orbit--1 { width: 240px; height: 240px; }
  .orbit--2 { width: 320px; height: 320px; }
  .orbit--3 { width: 400px; height: 400px; }

  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(3) { border-left: none; }

  .videos__grid { grid-template-columns: 1fr; }
  .cta-course { grid-template-columns: 1fr; text-align: left; }
  .topics-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .module-grid { grid-template-columns: 1fr; }
  .include-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .services__grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .product-grid { grid-template-columns: 1fr; }
  .stats__inner { grid-template-columns: 1fr 1fr; }
  .hero__meta { gap: 18px; }
}