/* ═══════════════════════════════════════════
   DESIGN SYSTEM — Xeque-mate Consultoria
═══════════════════════════════════════════ */

:root{
  /* Paleta oficial (grafite / dourado) — modo escuro */
  --slate-950:#0A0C10;   /* fundo */
  --slate-900:#10131A;
  --slate-800:#171B23;
  --slate-700:#212734;
  --slate-600:#2E3543;
  --slate-500:#3E4657;   /* primária */
  --slate-400:#6C7589;
  --slate-300:#98A1B4;
  --slate-100:#D5DAE4;
  --slate-050:#F0F2F7;

  --gold-700:#E3C888;
  --gold-600:#D9BB6B;
  --gold-500:#C9A24D;    /* acento */
  --gold-400:#DCC07E;
  --gold-100:rgba(201,162,77,.14);

  --ink:#ECEFF5;
  --ink-2:#AFB7C6;
  --dim:#7A8397;

  --card:rgba(255,255,255,.045);
  --card-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --line-strong:rgba(255,255,255,.18);

  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.55);
  --shadow-md:0 14px 34px -18px rgba(0,0,0,.85);
  --shadow-lg:0 26px 60px -28px rgba(0,0,0,.95);

  --r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:28px;

  --ff-display:'Outfit',system-ui,sans-serif;
  --ff-sans:'Inter',system-ui,-apple-system,sans-serif;
  --ff-mono:'JetBrains Mono',monospace;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* sem isto, um display:flex do autor vence o hidden do navegador */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%;overflow:hidden;background:var(--slate-950)}
body{
  font-family:var(--ff-sans);font-weight:400;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--gold-600);text-decoration:none}
::selection{background:var(--gold-500);color:var(--slate-950)}

/* ── Ambiente: brumas suaves no fundo ── */
#amb{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#amb i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.5}
#amb i:nth-child(1){width:340px;height:340px;top:-90px;left:-110px;background:rgba(201,162,77,.20);animation:drift 22s ease-in-out infinite}
#amb i:nth-child(2){width:280px;height:280px;top:38%;right:-120px;background:rgba(120,134,160,.16);animation:drift 28s ease-in-out infinite reverse}
#amb i:nth-child(3){width:320px;height:320px;bottom:-120px;left:-80px;background:rgba(120,134,160,.14);animation:drift 26s ease-in-out infinite}

/* ══════════════════════════════
   SISTEMA DE PÁGINAS (SPA)
══════════════════════════════ */
.pg{
  position:fixed;inset:0;z-index:10;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  background:var(--slate-950);
  transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .4s;will-change:transform;
}
#home{z-index:5;transform:none;background:transparent}
#home.behind{transform:scale(.94) translateX(-4%);opacity:.4;pointer-events:none}
.subpg{transform:translateX(100%);z-index:20}
.subpg.active{transform:translateX(0)}

/* ══════════════════════════════
   COMPONENTES COMPARTILHADOS
══════════════════════════════ */

.eyebrow{
  font-family:var(--ff-mono);font-size:9px;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-600);
}

.dv{display:flex;align-items:center;gap:12px;padding:34px 0 16px}
.dl{height:1px;flex:1;background:var(--line)}
.dt{
  font-family:var(--ff-mono);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-600);white-space:nowrap;
}

.tag{
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:11.5px;letter-spacing:.06em;color:var(--slate-100);background:rgba(255,255,255,.05);
}

.cta-btn{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:17px 22px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--slate-050),var(--slate-100));
  color:var(--slate-950);font-size:15.5px;font-weight:500;letter-spacing:.01em;
  box-shadow:var(--shadow-md);transition:transform .2s,box-shadow .2s;
}
.cta-btn:active{transform:scale(.985)}
.cta-btn .cta-sub{display:block;font-size:12px;color:rgba(10,12,16,.62);margin-top:3px;font-weight:400}
.cta-btn .cta-arr{font-size:17px;color:#8A6A1E;flex-shrink:0}

.cta-ghost{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:15px 22px;border-radius:var(--r-lg);
  border:1px solid var(--line-strong);color:var(--slate-100);
  font-size:14.5px;font-weight:500;background:rgba(255,255,255,.045);transition:border-color .2s,background .2s;
}
.cta-ghost:active{background:rgba(255,255,255,.09)}

/* ── Lightbox: imagem em tela cheia ── */
.lb{
  position:fixed;inset:0;z-index:60;display:none;cursor:zoom-out;
  overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(var(--safe-t) + 58px) 16px calc(var(--safe-b) + 20px);
  background:rgba(4,5,7,.95);backdrop-filter:blur(8px);
}
/* rola em vez de encolher: no celular o folder fica legível na largura toda */
.lb.open{display:block;animation:fade .25s ease both}
.lb img{display:block;margin:0 auto;width:100%;max-width:739px;height:auto;border-radius:var(--r-sm)}
.lb-full{
  display:block;width:fit-content;margin:16px auto 0;
  border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  font-size:12.5px;color:var(--ink-2);background:rgba(255,255,255,.06);
}
.lb-x{
  position:fixed;top:calc(var(--safe-t) + 12px);right:16px;z-index:2;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:rgba(10,12,16,.8);
  color:var(--ink);font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}

.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.13);transform:scale(0);animation:rip .5s ease-out;pointer-events:none}

/* ── Animações ── */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes fadeU{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeD{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes rip{to{transform:scale(4);opacity:0}}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,-30px)}}
@keyframes td{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-5px);opacity:1}}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.3}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}