/* =====================================================================
   SOUL CORE ADS · style.css
   Design system por tokens · mobile-first · WCAG AA (contraste calculado)
   Padrão DevCode
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   Razões de contraste calculadas contra os fundos principais.
   --------------------------------------------------------------------- */
:root{
  /* Fundos */
  --bg-black:    #0A0A0A;   /* preto premium base */
  --bg-graphite: #16161A;   /* grafite p/ seções e cards */
  --bg-elev:     #1E1E24;   /* superfície elevada / glass base */

  /* Dourado (metálico) */
  --gold:        #D4AF37;   /* dourado principal  · texto s/ preto ≈ 9.4:1  AA/AAA ok */
  --gold-soft:   #E7C765;   /* realce/hover       · texto s/ preto ≈ 12:1   ok */
  --gold-deep:   #A8822A;   /* profundidade/borda */

  /* Prata/cromado (2º acento do logo) */
  --silver:      #C9CDD6;   /* texto s/ preto ≈ 12.5:1  ok */

  /* Texto */
  --text-hi:     #F5F5F5;   /* títulos  · s/ preto ≈ 18:1  AAA */
  --text-mid:    #C4C4C8;   /* corpo    · s/ preto ≈ 12:1  AAA */
  --text-low:    #8A8A90;   /* legendas · s/ preto ≈ 5.4:1 AA  (usar só em texto pequeno de apoio) */
  --on-gold:     #0A0A0A;   /* texto SOBRE botão dourado · ≈ 9.4:1  AA/AAA — NUNCA branco (branco ≈ 2.1:1 REPROVA) */

  /* Bordas / linhas */
  --line:        rgba(201,205,214,.12);   /* prata a 12% — hairline discreta */
  --line-gold:   rgba(212,175,55,.28);

  /* Sombra / glow */
  --shadow:      0 12px 40px rgba(0,0,0,.45);
  --glow-gold:   0 0 24px rgba(212,175,55,.25);

  /* Tipografia */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --maxw: 1180px;
  --maxw-narrow: 780px;
  --radius: 16px;
  --radius-sm: 10px;
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Camadas (z-index documentado) */
  --z-header: 100;
  --z-float:  90;    /* CTA flutuante WhatsApp */
  --z-lgpd:   200;   /* banner LGPD — acima do CTA flutuante */
}

/* ---------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg-black);
  color:var(--text-mid);
  line-height:1.65;
  font-size:clamp(1rem,.96rem + .3vw,1.075rem);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
h1,h2,h3{ font-family:var(--font-display); color:var(--text-hi); line-height:1.12; font-weight:700; }
strong{ color:var(--text-hi); font-weight:600; }
em{ font-style:normal; color:var(--text-low); }

/* Foco de teclado sempre visível */
:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:4px; }

/* ---------------------------------------------------------------------
   3. LAYOUT UTIL
   --------------------------------------------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem); }
.container-narrow{ max-width:var(--maxw-narrow); }
.section{ padding-block:var(--section-y); position:relative; }
/* v2.2: grafite vira VÉU translúcido — o ambient atravessa sutilmente.
   Contraste recalculado: fundo efetivo ≈ #131317 → corpo #C4C4C8 ≥ 10:1 AA ok. */
.section-alt{ background:rgba(22,22,26,.82); }

.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }

/* ---------------------------------------------------------------------
   4. TIPOGRAFIA DE SEÇÃO
   --------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.9rem;
}
.section-head{ max-width:640px; margin-bottom:clamp(2.25rem,5vw,3.25rem); }
.section-title{ font-size:clamp(1.7rem,1.2rem + 2.4vw,2.7rem); font-weight:800; letter-spacing:-.01em; }
.section-note{
  margin-top:1rem; font-size:.9rem; color:var(--text-low);
  display:flex; gap:.5rem; align-items:flex-start;
}
.section-note i{ color:var(--gold); margin-top:.2rem; }

/* Sublinhado-assinatura (motivo de crescimento em miniatura) */
.title-underline{
  display:block; width:72px; height:3px; margin-top:1.1rem; border-radius:3px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--silver));
}

.grad-gold{
  background:linear-gradient(100deg,var(--gold-soft),var(--gold),var(--silver));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------------------------------------------------------------------
   5. BOTÕES
   Regra crítica: botão dourado usa texto quase-preto (--on-gold).
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-display); font-weight:600; line-height:1;
  border:1px solid transparent; border-radius:999px; cursor:pointer;
  text-align:center; white-space:nowrap;
  position:relative; isolation:isolate;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),
             background .25s ease, border-color .25s ease;   /* spring, sem box-shadow */
}
.btn:active{ transform:scale(.97); }
.btn-sm{ padding:.6rem 1.1rem; font-size:.9rem; }
.btn-lg{ padding:.95rem 1.7rem; font-size:1.02rem; }
.btn-xl{ padding:1.15rem 2.3rem; font-size:1.12rem; }

.btn-gold{
  background:linear-gradient(120deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep));
  color:var(--on-gold);             /* quase-preto — contraste ≈ 9.4:1 */
}
/* glow dourado via pseudo-elemento (anima só opacity) */
.btn-gold::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow:var(--glow-gold); opacity:.85;
  transition:opacity .25s ease; pointer-events:none;
}
.btn-gold:hover{ transform:translateY(-2px); }
.btn-gold:hover::after{ opacity:1; box-shadow:0 0 34px rgba(212,175,55,.45); }

.btn-ghost{
  background:transparent; color:var(--text-hi); border-color:var(--line-gold);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }

/* ---------------------------------------------------------------------
   6. HEADER
   --------------------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-header);
  /* Glass: base rgba(10,10,10,.65) sobre página escura → texto #F5F5F5 ≥ 15:1 (AA ok) */
  background:rgba(10,10,10,.65);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
          backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid transparent; transition:background .3s, border-color .3s;
}
.site-header.scrolled{ background:rgba(10,10,10,.9); border-bottom-color:var(--line); }
/* Fallback elegante p/ navegadores sem backdrop-filter: cor sólida */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{ background:rgba(10,10,10,.97); }
  .site-header.scrolled{ background:#0A0A0A; }
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; }
.brand-mark{
  width:34px; height:34px; border-radius:50%; overflow:hidden;
  display:block; flex-shrink:0;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
.brand-text{ font-family:var(--font-display); font-weight:700; letter-spacing:.06em; color:var(--text-hi); font-size:1.02rem; }
.brand-text strong{ color:var(--gold); }
.header-cta{ display:none; }

/* ---------------------------------------------------------------------
   7. TRILHA DE CRESCIMENTO (elemento-assinatura)
   --------------------------------------------------------------------- */
.growth-trail{ position:absolute; pointer-events:none; opacity:.9; }
.hero-trail{ inset:auto 0 -4% 0; width:100%; height:auto; z-index:0; opacity:.5; }
.cta-trail{ inset:0 0 auto 0; width:100%; height:auto; opacity:.35; }
.trail-path, .trail-arrow{ filter:drop-shadow(0 0 6px rgba(212,175,55,.35)); }

/* ---------------------------------------------------------------------
   8. HERO
   --------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:clamp(7rem,14vw,9rem) clamp(3rem,8vw,5rem);
  /* v2.2: camada opaca final REMOVIDA — o body já pinta o preto por baixo
     do canvas; assim o ambient "data intelligence" aparece no hero. */
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(90% 60% at 0% 110%, rgba(201,205,214,.06), transparent 60%);
  overflow:hidden;
}
.hero-inner{ position:relative; z-index:1; max-width:820px; }
.hero-title{
  font-size:clamp(2.35rem,1.4rem + 4.6vw,4.35rem);
  font-weight:800; letter-spacing:-.02em; margin-bottom:1.35rem;
}
.hero-sub{ font-size:clamp(1.05rem,1rem + .55vw,1.3rem); max-width:640px; margin-bottom:2rem; color:var(--text-mid); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }

.hero-chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.hero-chips li{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.82rem; color:var(--silver);
  padding:.5rem .9rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.02);
}
.hero-chips i{ color:var(--gold); }

/* ---------------------------------------------------------------------
   9. CARDS (base) · Bento UI (FASE 2 v2)
   Radius 1.5rem + inner stroke translúcido; hover com spring (transform)
   e sombra via ::after animado por OPACITY (zero box-shadow em transição).
   --------------------------------------------------------------------- */
.card{
  /* Glass: rgba de segurança — página é sempre preta/grafite por trás,
     então o fundo EFETIVO fica ≤ #1E1E24 → texto #C4C4C8 ≥ 10:1 (AA ok) */
  background:rgba(30,30,36,.6);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
          backdrop-filter:blur(12px) saturate(180%);
  border:1px solid var(--line);
  border-radius:1.5rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);   /* inner stroke (estático) */
  padding:clamp(1.6rem,3.2vw,2.1rem);
  position:relative; isolation:isolate;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .25s ease;  /* spring */
}
/* Fallback sem backdrop-filter: superfície sólida elegante */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{ background:var(--bg-elev); }
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow:var(--shadow), var(--glow-gold);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.card:hover{ transform:translateY(-4px); border-color:var(--line-gold); }
.card:hover::after{ opacity:1; }
.card:active{ transform:translateY(-1px) scale(.995); }
.card h3{ font-size:1.16rem; margin:.9rem 0 .5rem; color:var(--text-hi); }
.card p{ font-size:.96rem; color:var(--text-mid); }
.card-icon{
  width:48px; height:48px; display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(201,205,214,.08));
  color:var(--gold); font-size:1.2rem; border:1px solid var(--line-gold);
}

/* 10. STEPS (Como funciona) --------------------------------------------- */
.steps{ display:grid; gap:1.1rem; position:relative; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.3rem,3vw,1.7rem);
}
.step-num{
  font-family:var(--font-mono); font-weight:700; font-size:1.5rem;
  color:transparent; background:linear-gradient(120deg,var(--gold),var(--silver));
  -webkit-background-clip:text; background-clip:text; line-height:1;
}
.step-body h3{ font-size:1.2rem; margin-bottom:.35rem; }

/* 11. RESULTADOS -------------------------------------------------------- */
.result{ text-align:center; }
.result-num{
  display:block; font-family:var(--font-mono); font-weight:700;
  font-size:clamp(2.4rem,1.6rem + 3vw,3.4rem);
  color:transparent; background:linear-gradient(120deg,var(--gold-soft),var(--gold),var(--silver));
  -webkit-background-clip:text; background-clip:text; line-height:1; margin-bottom:.6rem;
}
.result-label{ display:block; font-size:.95rem; color:var(--text-mid); }
.result-label em{ display:block; font-size:.8rem; margin-top:.2rem; }

/* 12. DEPOIMENTOS ------------------------------------------------------- */
.testi blockquote{ font-size:1.02rem; color:var(--text-hi); margin:.9rem 0 1.2rem; font-style:italic; }
.stars{ color:var(--gold); font-size:.85rem; letter-spacing:.15em; }
.testi figcaption{ display:flex; align-items:center; gap:.8rem; }
.avatar{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-graphite); border:1px solid var(--line-gold); color:var(--silver);
}
.testi-id{ display:flex; flex-direction:column; line-height:1.3; }
.testi-id strong{ color:var(--text-hi); font-size:.98rem; }
.testi-id em{ font-size:.85rem; }

/* 13. FAQ (accordion) --------------------------------------------------- */
.faq-list{ display:grid; gap:.75rem; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-elev); overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-weight:600; color:var(--text-hi); font-size:1.03rem;
  padding:1.15rem 1.25rem;
}
.faq-q:hover{ color:var(--gold); }
.faq-chevron{ color:var(--gold); transition:transform .3s ease; flex-shrink:0; }
.faq-q[aria-expanded="true"] .faq-chevron{ transform:rotate(180deg); }
.faq-a{ padding:0 1.25rem 1.25rem; }
.faq-a p{ color:var(--text-mid); }

/* 14. CTA FINAL --------------------------------------------------------- */
.cta-final{
  position:relative; overflow:hidden; text-align:center;
  /* v2.2: camada opaca removida (idem hero) — ambient visível no CTA */
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(212,175,55,.12), transparent 60%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cta-inner{ position:relative; z-index:1; }
.cta-final h2{ font-size:clamp(1.9rem,1.3rem + 2.8vw,3rem); font-weight:800; margin-bottom:1.1rem; }
.cta-final p{ font-size:1.1rem; max-width:600px; margin:0 auto 2rem; color:var(--text-mid); }
.cta-reassure{ font-size:.85rem !important; color:var(--text-low) !important; margin-top:1.2rem !important; }

/* 15. RODAPÉ ------------------------------------------------------------ */
/* v2.2: véu um pouco mais denso no footer (texto legal pequeno — AA folgado) */
.site-footer{ background:rgba(22,22,26,.88); border-top:1px solid var(--line); padding-block:clamp(2.5rem,6vw,4rem) 1.5rem; }
.footer-inner{ display:grid; gap:2rem; margin-bottom:2rem; }
.footer-slogan{ color:var(--gold); font-family:var(--font-display); margin-top:.4rem; }
.footer-legal-info{ font-size:.85rem; color:var(--text-low); margin-top:.6rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.footer-links a{ color:var(--text-mid); font-size:.95rem; }
.footer-links a:hover{ color:var(--gold); }
.footer-bottom{
  display:flex; flex-direction:column; gap:.6rem;
  padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--text-low);
}
.footer-credit a{ color:var(--silver); }
.footer-credit a:hover{ color:var(--gold); }

/* 16. CTA FLUTUANTE (WhatsApp) ----------------------------------------- */
.whatsapp-float{
  position:fixed; right:clamp(1rem,3vw,1.6rem); bottom:clamp(1rem,3vw,1.6rem);
  z-index:var(--z-float);
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; font-size:1.6rem;
  background:linear-gradient(135deg,#25D366,#128C7E); color:#0A0A0A;
  box-shadow:0 8px 26px rgba(37,211,102,.4);
  transition:transform .25s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); }

/* 17. BANNER LGPD ------------------------------------------------------- */
/* z-index 200 > CTA flutuante (90). Ao consentir → hidden (display:none),
   sai do fluxo e NÃO intercepta cliques do CTA. */
.lgpd-banner{
  position:fixed; inset:auto 0 0 0; z-index:var(--z-lgpd);
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between;
  padding:1rem clamp(1rem,4vw,2rem);
  background:rgba(22,22,26,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--line-gold);
}
.lgpd-banner[hidden]{ display:none; }   /* garante: sem interceptar toque quando oculto */
.lgpd-banner p{ font-size:.9rem; color:var(--text-mid); max-width:640px; }
.lgpd-banner a{ color:var(--gold); text-decoration:underline; }
.lgpd-actions{ display:flex; gap:.6rem; flex-shrink:0; }

/* ---------------------------------------------------------------------
   18. ANIMAÇÕES DE ENTRADA (FASE 2 v2 · CSS nativo, zero JS)
   Degradação graciosa: o DEFAULT de .reveal é 100% VISÍVEL.
   - Hero: entrada por tempo (CSS animation comum — roda em qualquer browser).
   - Demais: scroll-driven via animation-timeline: view(), só onde suportado
     (@supports). Safari < 16 / browsers antigos: conteúdo simplesmente visível.
   --------------------------------------------------------------------- */
.reveal{ opacity:1; transform:none; }   /* estado-base seguro (sem JS/sem suporte) */

@keyframes rvIn{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:none; }
}

/* Hero: stagger de entrada por tempo (independe de scroll e de JS) */
.hero .reveal{ animation:rvIn .7s cubic-bezier(.16,1,.3,1) both; }
.hero .reveal:nth-child(1){ animation-delay:.10s; }
.hero .reveal:nth-child(2){ animation-delay:.22s; }
.hero .reveal:nth-child(3){ animation-delay:.34s; }
.hero .reveal:nth-child(4){ animation-delay:.46s; }
.hero .reveal:nth-child(5){ animation-delay:.58s; }

/* Fora do hero: reveal dirigido pelo scroll (API nativa, sem observer JS) */
@supports (animation-timeline: view()){
  main .reveal:not(.hero .reveal){
    animation:rvIn linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 65%;   /* completa cedo; nunca "some" no meio */
  }
}

/* Parallax de mídia em máscara (UTILITÁRIO · sem alvo hoje — o projeto ainda
   não tem <img> de conteúdo. Quando as fotos reais do cliente chegarem:
   <div class="media-frame"><img ...></div> e o efeito liga sozinho.) */
.media-frame{ overflow:hidden; border-radius:1.5rem; }
.media-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
@supports (animation-timeline: view()){
  .media-frame img{
    animation:mediaDrift linear both;
    animation-timeline:view();
    scale:1.08;                            /* folga p/ o drift sem revelar borda */
  }
  @keyframes mediaDrift{
    from{ transform:translateY(-4%); }
    to  { transform:translateY(4%); }      /* só o miolo se move; a moldura não */
  }
}

.trail-path, .trail-arrow{ stroke-dasharray:1; stroke-dashoffset:1; }

/* ---------------------------------------------------------------------
   19. RESPONSIVO (mobile-first → breakpoints para cima)
   --------------------------------------------------------------------- */
@media (min-width:600px){
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }   /* tablet: 2 colunas */
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .footer-inner{ grid-template-columns:1.3fr 1fr; align-items:start; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@media (min-width:820px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .header-cta{ display:inline-flex; }
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1080px){
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .steps{ grid-template-columns:repeat(4,1fr); }
  /* Bento nos benefícios: 4 colunas, 1º e 6º cards em destaque (span 2)
     → duas linhas fechadas: [2+1+1] / [1+1+2]. Mobile segue 1 coluna. */
  .grid-3.benefits-grid{ grid-template-columns:repeat(4,1fr); }
  .benefits-grid .benefit:first-child,
  .benefits-grid .benefit:last-child{ grid-column:span 2; }
}

/* ---------------------------------------------------------------------
   20. PREFERS-REDUCED-MOTION (acessibilidade)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  /* scroll-driven ignora duration → precisa desligar a animação em si */
  .reveal, .media-frame img{ animation:none !important; }
  .media-frame img{ scale:1 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .trail-path, .trail-arrow{ stroke-dashoffset:0 !important; }
}

/* =====================================================================
   21. MICRO CTA DE CRÉDITOS DEVCODE (FASE 4) · escopado, aditivo, zero CLS
   ===================================================================== */
.devcode-credits{ margin:0; }
.devcode-credits__link{
  display:inline-flex; flex-direction:column; gap:2px;
  padding:8px 14px; min-height:44px; justify-content:center;
  border:1px solid var(--line); border-radius:10px;
  background-color:rgba(255,255,255,.02);
  text-decoration:none; position:relative; isolation:isolate;
  transition:transform .25s ease, border-color .25s ease, background-color .25s ease;
}
/* sombra via pseudo-elemento (opacity = compositor-friendly) */
.devcode-credits__link::before{
  content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow:0 10px 26px rgba(212,175,55,.20);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.devcode-credits__eyebrow{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-low);
}
.devcode-credits__brand{
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:var(--silver); transition:color .25s ease;
}
.devcode-credits__pitch{ font-size:.72rem; color:var(--text-mid); transition:color .25s ease; }
.devcode-credits__arrow{ display:inline-block; margin-left:5px; transition:transform .25s ease; }
/* hover + paridade de teclado (focus-visible) — nunca só :hover */
.devcode-credits__link:hover,
.devcode-credits__link:focus-visible{
  transform:translateY(-1px); border-color:var(--line-gold);
  background-color:rgba(212,175,55,.05);
}
.devcode-credits__link:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
.devcode-credits__link:hover .devcode-credits__brand,
.devcode-credits__link:focus-visible .devcode-credits__brand{ color:var(--gold); }
.devcode-credits__link:hover .devcode-credits__pitch,
.devcode-credits__link:focus-visible .devcode-credits__pitch{ color:var(--gold-soft); }
.devcode-credits__link:hover::before,
.devcode-credits__link:focus-visible::before{ opacity:1; }
.devcode-credits__link:hover .devcode-credits__arrow,
.devcode-credits__link:focus-visible .devcode-credits__arrow{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){
  .devcode-credits__link:hover,
  .devcode-credits__link:focus-visible{ transform:none; }
  .devcode-credits__link:hover .devcode-credits__arrow,
  .devcode-credits__link:focus-visible .devcode-credits__arrow{ transform:none; }
}

/* =====================================================================
   22. AMBIENT MOTION · canvas de constelação (fluxo de dados/conversões)
   ===================================================================== */
#ambient-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1;              /* atrás de TODO o conteúdo */
  pointer-events:none;     /* nunca intercepta cliques/toques */
  display:block;
}
@media (prefers-reduced-motion:reduce){
  #ambient-canvas{ display:none; }
}

/* =====================================================================
   23. MOTION LAYER (SOAP) · aditivo — usado APENAS pela pasta /motion/
   Sem as classes que o JS aplica (.mword/.magnetic/.tilt-on), este bloco
   é inerte. Remover a pasta /motion/ + as 5 tags no index.html desativa
   toda a camada; este CSS pode ficar (não afeta nada sozinho).
   ===================================================================== */

/* Máscaras de split — o texto entra "de dentro" da própria linha.
   padding/margin negativos: folga p/ descendentes (g, p, ç) na máscara. */
.mword{ display:inline-block; overflow:hidden; vertical-align:top;
        padding-bottom:.12em; margin-bottom:-.12em; }
.mword-inner{ display:inline-block; will-change:transform; }
.mline{ display:block; overflow:hidden; }
.mline-inner{ display:block; will-change:transform; }

/* Pós-entrada (classe .msk-off via JS): máscara sai de cena — nunca
   cortar descendentes no estado final; will-change só durante a animação. */
.msk-off .mword, .msk-off .mline{ overflow:visible; }
.msk-off .mword-inner, .msk-off .mline-inner{ will-change:auto; }

/* CTA magnético: GSAP vira o ÚNICO dono do transform → transform sai da
   transition CSS (nunca duas engines na mesma propriedade). */
.btn.magnetic{ transition:background .25s ease, border-color .25s ease; }
.btn.magnetic:hover{ transform:none; }   /* evita salto de -2px pré-inline */

/* Tilt 3D: idem — transform 100% por conta do JS enquanto ativo. */
.card.tilt-on{ transition:border-color .25s ease; }
.card.tilt-on:hover{ will-change:transform; }

/* Spotlight dourado que segue o cursor (posição via --mx/--my do JS).
   Anima só opacity — compositor-friendly, mesmo padrão do ::after do card. */
.card.tilt-on::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),
             rgba(212,175,55,.12), transparent 65%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.card.tilt-on:hover::before{ opacity:1; }

/* Cinto e suspensório: reduced-motion nunca inicializa o JS da camada,
   mas se o SO mudar a preferência em runtime, nada fica cortado/oculto. */
@media (prefers-reduced-motion:reduce){
  .mword, .mline{ overflow:visible; }
  .mword-inner, .mline-inner{ transform:none !important; }
  .card.tilt-on::before{ display:none; }
}

/* =====================================================================
   24. AMBIENT "DATA INTELLIGENCE" (DevCode v2) · tokens + escopo .dc-ambient
   Substitui a constelação (§22 permanece p/ rollback do motor antigo).
   ===================================================================== */
:root{
  --dc-bg-deep:    #0A0A0A;                  /* = --bg-black */
  --dc-brand-500:  #D4AF37;                  /* = --gold */
  --dc-accent-400: #E7C765;                  /* = --gold-soft */
  --dc-white-soft: rgba(201,205,214,.85);    /* = prata do logo */
}
#ambient-canvas.dc-ambient{ opacity:0; transition:opacity .8s ease; }  /* fade-in 800ms */
#ambient-canvas.dc-ambient.dc-ambient-on{ opacity:1; }

/* Reduced motion: o spec v2 (§10) pede 1 frame ESTÁTICO (nada anima) —
   libera o display:none do §22 SOMENTE quando a cena nova controla o canvas. */
@media (prefers-reduced-motion:reduce){
  #ambient-canvas.dc-ambient{ display:block; opacity:1; transition:none; }
}

/* Scrim opcional p/ seções densas de texto sobre o efeito (regra de ouro §7).
   Obs.: .section-alt já é opaca (#16161A) e funciona como veil natural. */
.dc-ambient-scrim{ position:relative; isolation:isolate; }
.dc-ambient-scrim::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--dc-bg-deep); opacity:.55; pointer-events:none;
}

/* =====================================================================
   25. ASSINATURA DEVCODE (SIGNATURE v2.0) · markup injetado por
   signature.js — 100% tokens do cliente. enabled:false → nada disto
   se aplica (o seletor .dcs nunca existe no DOM).
   ===================================================================== */
.dcs{ padding-block:clamp(3rem,6vw,4.5rem) clamp(2rem,4vw,3rem); }
.dcs-card{
  display:flex; align-items:center; gap:clamp(1rem,2.5vw,1.6rem);
  padding:clamp(1.4rem,3vw,1.9rem);
  background:rgba(30,30,36,.6);                       /* glass — mesmo padrão §9 */
  -webkit-backdrop-filter:blur(12px) saturate(180%);
          backdrop-filter:blur(12px) saturate(180%);
  border:1px solid var(--line); border-radius:1.5rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  position:relative; isolation:isolate;
  transition:transform .25s ease, border-color .25s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dcs-card{ background:var(--bg-elev); }
}
.dcs-card::after{                                     /* glow via opacity (compositor) */
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  box-shadow:var(--shadow), var(--glow-gold);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.dcs-card:hover{ transform:translateY(-2px); border-color:var(--line-gold); }
.dcs-card:hover::after{ opacity:1; }
.dcs-mark{ flex-shrink:0; display:grid; place-items:center; }
.dcs-body{ flex:1; min-width:0; }
.dcs-title{ font-family:var(--font-display); font-weight:700; color:var(--text-hi); font-size:1.05rem; }
.dcs-text{ color:var(--text-mid); font-size:.92rem; margin-top:.3rem; max-width:52ch; }
.dcs-meta{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--text-low); margin-top:.55rem;
}
.dcs-action{ display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; flex-shrink:0; }
.dcs-badge{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); padding:.35rem .7rem; border:1px solid var(--line-gold);
  border-radius:999px; background:rgba(212,175,55,.06); white-space:nowrap;
}
.dcs-cta{ min-height:44px; }                           /* alvo de toque AA */

/* Entrada 1× (só com .dcs-anim aplicada pelo JS; reduced-motion nunca a recebe) */
.dcs-anim .dcs-card{ opacity:0; transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.dcs-in .dcs-card{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .dcs-anim .dcs-card{ opacity:1; transform:none; transition:none; }
}

/* Mobile: empilha com elegância (nunca quebra) */
@media (max-width:640px){
  .dcs-card{ flex-direction:column; align-items:flex-start; }
  .dcs-action{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
}

/* =====================================================================
   26. FOOTER DEVCODE v2.0 · estrutura fixa, pele do cliente
   Shell .site-footer (§15, véu v2.2) preservado. §15 internos antigos
   (footer-inner/brand/links) ficam inertes — rollback documentado.
   ===================================================================== */
.site-footer{ content-visibility:auto; contain-intrinsic-size:auto 480px; }

.dcf-grid{ display:grid; gap:2.2rem; padding-bottom:2rem; }
.dcf-brand .brand{ margin-bottom:.2rem; }
.dcf-tagline{ color:var(--gold); font-family:var(--font-display); margin-top:.55rem; }
.dcf-legal-info{ font-size:.85rem; color:var(--text-low); margin-top:.6rem; }

.dcf-label{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-low); margin-bottom:.7rem;
}
.dcf-nav-list{ display:grid; grid-template-columns:1fr 1fr; gap:.15rem .9rem; }
.dcf-contact-list{ display:grid; gap:.15rem; }
.dcf-nav-list a, .dcf-contact-list a{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--text-mid); font-size:.95rem;
  padding:.6rem 0; min-height:44px;                 /* alvo de toque AA */
  transition:color .2s ease;
}
.dcf-nav-list a:hover, .dcf-nav-list a:focus-visible,
.dcf-contact-list a:hover, .dcf-contact-list a:focus-visible{ color:var(--gold); }
.dcf-contact-list i{ color:var(--gold); }

.dcf-bottom{
  display:flex; flex-direction:column; gap:.6rem;
  padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.85rem; color:var(--text-low);
}
.dcf-credit a{ color:var(--silver); transition:color .2s ease; }
.dcf-credit a:hover, .dcf-credit a:focus-visible{ color:var(--gold); }

@media (min-width:600px){
  .dcf-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@media (min-width:820px){
  .dcf-grid{ grid-template-columns:1.3fr 1fr 1fr; gap:2rem; }
}