/* ==========================================================================
   CDEV — Base CSS
   Propositalmente enxuto. Isso NÃO é um layout — é só o mínimo pra:
   1) aplicar a tipografia/cor de marca por cima do Bootstrap
   2) dar 3-4 classes utilitárias que o Bootstrap não tem (tag mono, terminal)
   Tudo o resto (grid, cards, seções) é você quem desenha, peça por peça.
   ========================================================================== */

/* Utilitário: texto só para leitor de tela (visualmente oculto). Usado no
   título do Word Scroll (#hero) e em #servicos, #diferenciais e #faq
   (headings/labels estruturais que não podem virar texto de marketing novo
   visível) — cross-seção o bastante pra viver aqui em vez de dentro de
   word-scroll.css, mesmo com o Word Scroll de volta ao Hero. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Site inteiro é dark-only (sem toggle de tema) — sem isso, cores de sistema
   como canvasText/canvas (usadas no gradient-text do Word Scroll, #hero)
   resolvem pro padrão claro do navegador e saem invertidas. */
html {
  color-scheme: dark;
  /* Reserva gutter simétrico dos dois lados — sem isso, a barra de rolagem
     vertical (só existe do lado direito) empurra o "centro visual" da
     página ~metade da largura da barra pra esquerda: qualquer coisa
     centralizada com margin:auto (ex: .container do Bootstrap, #hero
     .cdev-word-scroll) fica matematicamente centralizada na área útil, mas
     não parece centralizada contra a tela inteira (bug real, medido:
     15px de diferença entre a margem esquerda e direita em 1920px). */
  scrollbar-gutter: stable both-edges;
}

/* 2026-09-08: manchas animadas do body removidas — existiam só pra vazar
   através do #hero transparente (ver comentário histórico em .cdev-hero,
   word-scroll.css); #hero agora tem fundo próprio (canvas WebGL,
   initHeroGradient em main.js). Nenhuma outra section é transparente
   (todas .section-dark são opacas), então isso não mudava mais nada
   visualmente em lugar nenhum — puro custo de animação sem efeito. */
html {
  overflow-x: hidden;
}

body {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--cdev-text-body);
  background-color: var(--cdev-black);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--cdev-text-strong);
}

/* Utilitário: seção em fundo escuro (hero, mecanismo, processo, garantia, CTA final) */
.section-dark {
  background: var(--cdev-black);
  color: var(--cdev-white);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--cdev-white); }

/* Utilitário: seção em fundo claro (dor, serviços, diferenciais, resultados,
   fundador — design-system.md § 11). Complementa .section-dark: o corpo já
   nasce escuro (ver body acima), então seções claras precisam declarar o
   fundo branco explicitamente. */
.section-light {
  background: var(--cdev-white);
  color: var(--cdev-text-body);
}
.section-light h1, .section-light h2, .section-light h3 { color: var(--cdev-text-strong); }

/* Utilitário: tag de serviço em sintaxe de código — elemento de assinatura do design system */
.tag-mono {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--cdev-teal-dim);
  background: rgba(0, 217, 178, 0.08);
  border: 1px solid rgba(0, 217, 178, 0.3);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}
.section-dark .tag-mono { color: var(--cdev-teal); }

/* Utilitário: botão primário de marca (usar além/no lugar do .btn-primary do Bootstrap) */
.btn-cdev-primary {
  background: var(--cdev-pink);
  border: none;
  color: var(--cdev-white);
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 12px 28px;
  transition: background var(--duration-fast) ease-out, box-shadow var(--duration-fast) ease-out;
}
.btn-cdev-primary:hover,
.btn-cdev-primary:focus {
  background: var(--cdev-pink-bright);
  color: var(--cdev-white);
  box-shadow: var(--shadow-glow-pink);
}
.btn-cdev-primary:focus-visible {
  outline: 2px solid var(--cdev-pink-bright);
  outline-offset: 2px;
}

/* Utilitário: botão secundário de marca (contorno) — design system § 5.1 */
.btn-cdev-secondary {
  background: transparent;
  border: 1.5px solid var(--cdev-white);
  color: var(--cdev-white);
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 12px 28px;
  transition: background var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
}
.btn-cdev-secondary:hover,
.btn-cdev-secondary:focus {
  background: var(--cdev-white);
  color: var(--cdev-black);
}
.btn-cdev-secondary:focus-visible {
  outline: 2px solid var(--cdev-pink-bright);
  outline-offset: 2px;
}

/* Utilitário: bloco de terminal (mecanismo, processo, comparativos, garantia) */
.cdev-terminal {
  background: var(--cdev-black);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.cdev-terminal .cdev-terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--cdev-ink-700);
}
.cdev-terminal .cdev-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cdev-terminal .cdev-terminal-dot.r { background: var(--cdev-error); }
.cdev-terminal .cdev-terminal-dot.y { background: var(--cdev-warning); }
.cdev-terminal .cdev-terminal-dot.g { background: var(--cdev-success); }
.cdev-terminal .cdev-terminal-filename {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--cdev-text-muted);
}
.cdev-terminal .cdev-terminal-body {
  padding: 20px 24px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.8;
}
.cdev-terminal .cmd { color: var(--cdev-teal); }
.cdev-terminal .out { color: #E4E4E7; }
.cdev-terminal .cmt { color: var(--cdev-text-muted); }
.cdev-terminal .plus { color: #4ADE80; }
.cdev-terminal .minus { color: #F87171; }

/* Utilitário: respeitar prefers-reduced-motion globalmente */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Utilitário: elemento a revelar ao rolar (funciona junto com main.js -> initRevealOnScroll) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-reveal) var(--ease-out-expo), transform var(--duration-reveal) var(--ease-out-expo);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Âncoras sempre abaixo da navbar fixa */
section[id], footer[id] {
  scroll-margin-top: 80px;
}

/* ==========================================================================
   CDEV — Hero (#hero) — copy.md § 1
   ========================================================================== */
/* 2026-08-16, revisão 2: a section NÃO tem altura fixa nem overflow próprio
   — o dono corrigiu a tentativa anterior (100vh + overflow-y:auto na caixa)
   por confundir mecânica: quem controla a animação da lista tem que ser o
   scroll universal da página, não uma caixinha com scrollbar própria. A
   sensação de "100vh centralizado" agora vem do sticky (ver
   .cdev-word-scroll-title em word-scroll.css, top: 50vh - 0.5lh): título e
   palavra atual ficam grudados no centro exato do viewport durante toda a
   rolagem, mesmo a section sendo mais alta que 100vh (precisa ser, é o
   percurso de scroll que revela cada palavra — ver padding-block em
   word-scroll.css). Centralização horizontal vem do próprio
   .cdev-word-scroll-inner (justify-content: center). */
.cdev-hero {
  position: relative;
  background: var(--cdev-black);
}
.cdev-hero .container {
  position: relative;
  z-index: 1;
}
/* 2026-09-08: --font-size-max subiu pra 56 em word-scroll.css (pedido do
   dono) — o .container padrão do Bootstrap trava em 1320px a partir do
   breakpoint xxl (ver comentário grande em word-scroll.css). Larguei só o
   do hero pra dar folga extra à frase mais longa (nowrap, sem isso corta). */
@media (min-width: 1400px) {
  .cdev-hero .container {
    max-width: 1400px;
  }
}

/* ==========================================================================
   CDEV — CTA flutuante ([data-cdev="floating-cta"]) — RF-17
   Componente global (não pertence a uma única <section>), por isso vive em
   base.css e não em main.css/arquivo dedicado (guia-desenvolvimento.md § 1.3).
   Visibilidade controlada só via classe .is-visible (JS, ver main.js ->
   initFloatingCTA) — nunca por posição de scroll direta em CSS. Estado
   inicial (sem JS) permanece oculto: é um CTA redundante/de apoio, os CTAs
   do hero/navbar/#cta-final já cobrem a mesma ação sem depender de JS.
   ========================================================================== */
[data-cdev="floating-cta"] {
  position: fixed;
  z-index: 1900;
  right: var(--space-5);
  bottom: var(--space-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--duration-fast) ease-out, transform var(--duration-fast) ease-out, visibility 0s linear var(--duration-fast);
  pointer-events: none;
}
[data-cdev="floating-cta"].is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-fast) ease-out, transform var(--duration-fast) ease-out;
  pointer-events: auto;
}
[data-cdev="floating-cta"] .btn {
  box-shadow: var(--shadow-glow-pink);
}

/* Mobile: alcance de polegar (design-system.md processo § 3). Mantido no
   canto inferior direito (não centralizado) em todos os breakpoints — a
   alternativa "central" citada no documento de processo é equivalente em
   alcance de polegar pra a maioria dos casos de uso de uma mão só, e manter
   um único esquema de ancoragem evita duplicar regras de posicionamento sem
   ganho de UX comprovado (ver decisoes-tecnicas.md #dt-06). Só a margem
   diminui em telas pequenas, pra não competir com o padding do conteúdo. */
@media (max-width: 575.98px) {
  [data-cdev="floating-cta"] {
    display: none;
    right: var(--space-4);
    bottom: var(--space-4);
  }
  [data-cdev="floating-cta"] .btn {
    padding: 12px 20px;
    font-size: 0.9375rem;
  }
}