/* =============================================================
   CAMADA v3.1 do site institucional
   -------------------------------------------------------------
   Carregado depois de style.css. Remapeia os tokens legados para
   a identidade v3.1, preservando a estrutura, o tracking e os forms.

   Esta camada está ativa nas páginas públicas do site.
   ============================================================= */

/* Clash Display, empacotada em assets/fonts/ (offline, sem CDN) */
@font-face { font-family: 'Clash Display'; src: url('assets/fonts/ClashDisplay-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('assets/fonts/ClashDisplay-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('assets/fonts/ClashDisplay-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('assets/fonts/ClashDisplay-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* --- Paleta: v1.1 -> v3.1 ------------------------------- */
  --bone:   #FFFFFF;          /* base clara da v3 */
  --stone:  #F9FAFB;          /* superfície recuada */
  --slate:  #4B5563;          /* texto de apoio */
  --ink:    #1F2937;          /* superfície dentro do preto */
  --carbon: #000000;          /* faixa preta da v3 */

  --pilaris:      #FF5733;
  --pilaris-dim:  #C24429;
  --pilaris-soft: #FF7A5C;
  --pilaris-tint:      rgba(255, 87, 51, 0.10);
  --pilaris-tint-soft: rgba(255, 87, 51, 0.04);
  --pilaris-shadow:    rgba(255, 87, 51, 0.30);

  --success: #22C55E;
  --danger:  #EF4444;

  /* --- A v3 é CLARA. O site era escuro por padrão. -------- */
  --bg:               #FFFFFF;
  --bg-elevated:      #FFFFFF;
  --bg-elevated-hover:#F9FAFB;
  --fg:               #111827;
  --fg-muted:         #4B5563;
  --fg-subtle:        #6B7280;
  --border:           #E5E7EB;
  --border-strong:    #D1D5DB;
  --border-hairline:  #E5E7EB;
  --header-scrim:     rgba(255, 255, 255, 0.80);
  --ghost-hover:      rgba(0, 0, 0, 0.03);
  --trust-strip-bg:   #F9FAFB;
  --diag-input-bg:    #FFFFFF;
}

/* --- Tipografia: decisão em Clash, leitura em Manrope ------- */
body, p, a, input, textarea, select, li, span, div { font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6, button, .display, .hero-title, .btn { font-family: 'Clash Display', ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3, .hero h1, .hero-title { letter-spacing: 0 !important; font-weight: 700; }
h1, .display, .hero h1 { line-height: 0.9; }

/* --- Gramática de CTA: preto age, laranja marca ----------- */
/* Era o oposto na v1.1 (o acento preenchia o botão). */
.btn-primary {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
  border-radius: 9999px !important;
  padding: 16px 32px !important;
  font-weight: 500 !important;
  transition: all 300ms cubic-bezier(.4, 0, .2, 1) !important;
}
.btn-primary:hover { background: #1F2937 !important; border-color: #1F2937 !important; }
.btn { border-radius: 9999px !important; min-height: 44px; }
.btn-dark { background: #000000 !important; color: #FFFFFF !important; }

/* A marca precisa aparecer inteira. Monograma é variação, não fallback de mobile. */
.brand-logo { height: 36px !important; }
.brand-monogram { display: none !important; }

/* --- Raio e superfície ------------------------------------ */
.service-card, .icp-card, .diff-item, .process-step, .ts-item { border-radius: 16px !important; }
input, textarea, select { border-radius: 8px !important; }
input:focus, textarea:focus, select:focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 2px #FF5733 !important;
  outline: none !important;
}

/* --- Faixa preta: a v3 separa seção invertendo o fundo ---- */
.section-alt, .cta-final {
  background: #000000 !important;
  color: #FFFFFF !important;
}
.section-alt h1, .section-alt h2, .section-alt h3,
.cta-final h1, .cta-final h2, .cta-final h3 { color: #FFFFFF !important; }
.section-alt p, .cta-final p { color: #9CA3AF !important; }
.section-alt .service-card, .section-alt .icp-card,
.section-alt .process-step, .section-alt .diff-item {
  background: transparent !important;
  border-color: #1F2937 !important;
}

/* --- Ritmo v3.1 --------------------------------------------- */
section { padding-top: clamp(80px, 10vw, 128px) !important; padding-bottom: clamp(80px, 10vw, 128px) !important; }
.display, h1.display { font-size: clamp(56px, 7vw, 80px) !important; }
.hero h1 { font-size: clamp(56px, 7vw, 80px) !important; max-width: 100% !important; }
@media (max-width: 767px) {
  .display, h1.display, .hero h1 { font-size: clamp(52px, 13vw, 72px) !important; }
  .brand-logo { height: 27px !important; }
  [data-theme="light"] .site-header .brand-logo--light { display: block !important; }
  [data-theme="light"] .site-header .brand-logo--dark { display: none !important; }
  [data-theme="dark"] .site-header .brand-logo--dark { display: block !important; }
  [data-theme="dark"] .site-header .brand-logo--light { display: none !important; }
  .site-header .theme-toggle { display: none !important; }
  .site-header .header-cta { gap: 8px; }
  .site-header .header-cta .btn-ghost { display: none; }
  .site-header .header-cta .btn-primary { padding: 13px 18px !important; font-size: 12px; }
}
.section-heading h2, section h2 { font-family: 'Clash Display', ui-sans-serif, system-ui, sans-serif; font-weight: 700 !important; letter-spacing: 0 !important; }
.pulse-dot { animation: none !important; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #FF5733 !important; outline-offset: 3px !important; }

/* --- QA visual: escala, contraste e alinhamento ---------------------- */
body { color: #111827; }
.hero { padding: 72px 0 80px !important; }
.hero .hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); align-items: start; gap: 72px; }
.hero .hero-grid h1.display {
  max-width: none !important;
  font-size: clamp(44px, 4.2vw, 58px) !important;
  line-height: .98 !important;
  text-wrap: balance;
}
.hero-eyebrow { margin-bottom: 24px !important; }
.hero-copy .lead { max-width: 52ch; color: #374151 !important; font-size: 16px !important; line-height: 1.6 !important; }
.hero-cta-group .btn { min-height: 52px !important; padding: 16px 24px !important; font-size: 14px !important; }
.localpack { margin: 40px 0 0 auto !important; max-width: 460px !important; width: 100%; }
.trust-strip { padding: 32px 0 !important; }
.trust-strip-claim { justify-content: space-between !important; text-align: left; font-size: 14px !important; }
.manifesto-section { padding: 96px 0 !important; }
.manifesto-grid { grid-template-columns: minmax(0, 1.42fr) minmax(280px, .58fr) !important; column-gap: 64px !important; align-items: start !important; }
.manifesto { max-width: 40ch !important; font-size: clamp(24px, 2.6vw, 36px) !important; line-height: 1.2 !important; }
.section-heading { margin-bottom: 48px !important; }
.section-heading > p,
.service-card > p,
.service-card li,
.icp-card p,
.process-step p,
.diff-item p { color: #374151 !important; font-size: 15px !important; line-height: 1.58 !important; }
.kicker, .service-tagline { color: #4B5563 !important; font-size: 12px !important; }
.service-card { padding: 28px !important; }
.service-card h3 { font-size: 24px !important; }
.section-alt .section-heading > p,
.section-alt p,
.section-alt .icp-card p,
.section-alt .process-step p,
.section-alt .diff-item p,
.cta-final p { color: #D1D5DB !important; }
.section-alt .kicker, .cta-final .kicker { color: #9CA3AF !important; }
.section-alt .founder { grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr); align-items: start; max-width: 1152px; }
.section-alt .founder-media, .section-alt .founder-content { align-self: start; }
.section-alt .founder-content { justify-content: flex-start; padding-top: 0; }
.section-alt .founder-content h2 { max-width: 20ch; font-size: clamp(28px, 3vw, 42px) !important; line-height: 1 !important; }
.section-alt .founder-quote { color: #FFFFFF !important; max-width: 48ch; line-height: 1.5; }
.section-alt .founder-bio { color: #D1D5DB !important; font-size: 16px; line-height: 1.6; }
.section-alt .founder-meta, .section-alt .founder-credential { color: #9CA3AF !important; }
.section-alt .founder-meta strong { color: #FFFFFF !important; }
.cta-final-fallback { border-color: #374151 !important; }
.cta-final .cta-final-fallback-links a { color: #FFFFFF !important; }
.cta-final .cta-final-fallback-links a:hover { color: #FF5733 !important; }
.cta-final .cta-final-meta { color: #9CA3AF !important; }

@media (max-width: 767px) {
  .hero { padding: 56px 0 64px !important; }
  .hero .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero .hero-grid h1.display { font-size: clamp(38px, 10.5vw, 56px) !important; line-height: 1 !important; }
  .localpack { margin-top: 8px !important; }
  .manifesto-section { padding: 72px 0 !important; }
  .manifesto-grid { grid-template-columns: 1fr !important; column-gap: 0 !important; }
  .manifesto { max-width: 30ch !important; }
  .section-alt .founder { grid-template-columns: 1fr !important; }
  .section-alt .founder-content { padding-top: 0; }
  .section-heading { margin-bottom: 36px !important; }
  .trust-strip-claim { justify-content: center !important; text-align: center; font-size: 12px !important; }
}

/* --- Estado inicial do movimento --------------------------
   Nada aqui: quem esconde é o motion.js. Se o JS não rodar,
   a página aparece inteira (regra do DS). */