/* =====================================================================
   AXIS LEADERSHIP — Design System compartilhado
   Usado por: index.html (home), produtos.html
   (travessia-axis.html tem estilos próprios, mesmos tokens)
   ===================================================================== */

:root{
  --ink:#0A0A0D; --panel:#111318; --panel-2:#1E232B;
  --line:rgba(255,255,255,.09);
  --white:#FFFFFF; --muted:#A7ADB7; --muted-2:#7C828C;
  --gold:#C29A4B; --gold-2:#E4C989; --gold-deep:#9A7833;
  --blue:#00A8E6; --blue-deep:#0076A8;
  --ivory:#F4F1E9; --ink-soft:#565b63;
  --maxw:1160px; --radius:16px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.75);
  --grad-gold:linear-gradient(135deg,#E4C989 0%,#C29A4B 45%,#9A7833 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--white);
  font-family:"Montserrat",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-weight:800;line-height:1.12;letter-spacing:-.015em;margin:0}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:#0A0A0D}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.gold{color:var(--gold)} .blue{color:var(--blue)} .center{text-align:center}
.lead{color:var(--muted);font-size:1.08rem}
.hl{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.divider{width:58px;height:3px;background:var(--grad-gold);border-radius:3px;margin:20px 0}
.center .divider{margin-left:auto;margin-right:auto}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:inherit;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  font-size:.95rem;line-height:1.15;text-align:center;padding:19px 34px;border-radius:12px;border:0;
  cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,filter .25s ease;will-change:transform}
.btn-primary{background:var(--grad-gold);color:#231a08;box-shadow:0 14px 34px -10px rgba(194,154,75,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 50px -10px rgba(194,154,75,.8);filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2)}
.band-light .btn-ghost{color:#15181c;border-color:rgba(0,0,0,.25)}
.band-light .btn-ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.btn-lg{padding:23px 44px;font-size:1.05rem}
.btn-sub{display:block;margin-top:12px;font-size:.82rem;color:var(--muted-2);letter-spacing:.01em;text-transform:none;font-weight:400}

/* ===== NAV ===== */
.nav{position:sticky;top:0;z-index:100;background:rgba(10,10,13,.72);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .word{font-weight:800;letter-spacing:.22em;font-size:1.3rem}
.brand .word .x{color:var(--gold)}
.brand .tag{font-weight:500;letter-spacing:.42em;font-size:.5rem;color:var(--muted);margin-top:5px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--muted);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--white)}
.nav-cta{display:flex;align-items:center;gap:16px}
.nav-cta .btn{padding:12px 22px;font-size:.76rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;transition:.25s}
@media(max-width:860px){
  .nav-links{position:fixed;inset:70px 0 auto 0;flex-direction:column;gap:0;
    background:rgba(10,10,13,.98);border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .nav-links.open{max-height:340px}
  .nav-links a{padding:18px 22px;width:100%;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
}

/* ===== SECTIONS ===== */
.band{padding:92px 0;position:relative}
.band-panel{background:radial-gradient(1200px 500px at 50% -10%,rgba(0,168,230,.06),transparent 60%),var(--panel)}
.band-deep{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-light{background:var(--ivory);color:#15181c;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.band-light .eyebrow{color:var(--gold-deep)}
.band-light h1,.band-light h2,.band-light h3,.band-light h4{color:#15181c}
.band-light .lead,.band-light p{color:var(--ink-soft)}
.band-light .gold{color:var(--gold-deep)}
.section-head{max-width:780px;margin:0 auto 52px}
.section-head.center{text-align:center}
.section-head h2{font-size:clamp(1.9rem,3.9vw,2.9rem)}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ===== PARALLAX (scroll-driven, com fallback) ===== */
@keyframes axis-parallax{from{transform:translateY(var(--px-from,80px))}to{transform:translateY(var(--px-to,-80px))}}
@keyframes axis-spin{to{transform:rotate(360deg)}}
.parallax{will-change:transform}
@supports ((animation-timeline: view()) and (animation-range: entry)){
  .parallax{animation:axis-parallax linear both;animation-timeline:view();animation-range:cover}
}
.spin-slow{animation:axis-spin 60s linear infinite}

/* ===== FOOTER ===== */
.footer{background:#08090c;border-top:1px solid var(--line);padding:64px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;gap:30px}}
.footer h5{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.footer ul a{color:var(--muted);font-size:.9rem}.footer ul a:hover{color:var(--gold-2)}
.footer .about{color:var(--muted);font-size:.92rem;max-width:38ch;margin-top:16px}
.footer .fine{border-top:1px solid var(--line);padding-top:24px;color:var(--muted-2);font-size:.76rem;line-height:1.6}

/* ===== PÁGINAS LEGAIS ===== */
.legal{max-width:820px;margin:0 auto}
.legal h1{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:8px}
.legal .updated{color:var(--muted-2);font-size:.85rem;margin-bottom:8px}
.legal h2{font-size:1.18rem;margin:36px 0 12px;color:var(--gold-2)}
.legal p,.legal li{color:var(--muted);font-size:1rem;line-height:1.7}
.legal ul{padding-left:20px;margin:0 0 1rem}
.legal li{margin-bottom:6px}
.legal a{color:var(--gold-2)}
.legal .note{background:rgba(194,154,75,.08);border:1px solid rgba(194,154,75,.3);
  border-radius:12px;padding:16px 18px;font-size:.9rem;color:var(--gold-2);margin:8px 0 26px}
.legal .ph{color:var(--gold-2);font-weight:600}

/* ===== VIEW TRANSITIONS (progressive enhancement entre páginas) ===== */
@view-transition{navigation:auto}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .parallax,.spin-slow{animation:none!important}
}