/* ─────────────────────────────────────────
   GLOBAL CSS — Ernesto Taddei Portfolio
   Shared across all pages
───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=Space+Mono:wght@400;700&display=swap');

:root {
  --black: #080808;
  --white: #F0EDE8;
  --gold: #C9A96E;
  --gold-dim: rgba(201,169,110,0.12);
  --gold-glow: rgba(201,169,110,0.06);
  --gray: #1E1E1E;
  --gray-mid: #444;
  --gray-light: #777;
  --muted: rgba(240,237,232,0.4);
  --muted2: rgba(240,237,232,0.65);
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --ease: cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--black);}

.cursor,.cursor-ring{display:none;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:flex-start;gap:40px;padding:24px 48px 24px 24px;}
.nav-cta{margin-left:auto;}
nav::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(8,8,8,.96) 0%,transparent 100%);z-index:-1;}
.nav-logo{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--gold);text-decoration:none;text-transform:uppercase;display:flex;align-items:center;gap:10px;}
.nav-logo-img{height:56px;width:auto;object-fit:contain;filter:brightness(0) invert(1);}
.nav-links{display:flex;gap:36px;list-style:none;}
.nav-links a{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;color:var(--muted);text-decoration:none;text-transform:uppercase;transition:color .3s;}
.nav-links a:hover{color:var(--white);}
.nav-cta{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;color:var(--black);background:var(--gold);padding:9px 18px;text-decoration:none;text-transform:uppercase;transition:background .3s;}
.nav-cta:hover{background:var(--white);}

/* ── FOOTER ── */
footer{border-top:1px solid var(--gray);padding:36px 48px;display:flex;align-items:center;justify-content:space-between;}
.footer-copy{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;color:var(--muted);text-transform:uppercase;}
.footer-socials{display:flex;gap:22px;}
.footer-socials a{font-family:var(--font-mono);font-size:9px;letter-spacing:.15em;color:var(--muted);text-decoration:none;text-transform:uppercase;transition:color .3s;}
.footer-socials a:hover{color:var(--gold);}

/* ── REVEAL ANIMATION ── */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── SHARED BUTTONS ── */
.btn-primary{display:inline-block;background:var(--gold);color:var(--black);font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:16px 32px;transition:background .3s,transform .2s;white-space:nowrap;}
.btn-primary:hover{background:var(--white);transform:translateX(-4px);}
.btn-secondary{display:inline-block;color:var(--muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--gray-mid);padding-bottom:2px;transition:color .3s,border-color .3s;white-space:nowrap;}
.btn-secondary:hover{color:var(--white);border-color:var(--white);}
.btn-ver-mas{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--white);text-decoration:none;border:1px solid var(--gray-mid);padding:12px 22px;transition:border-color .3s,color .3s,background .3s;}
.btn-ver-mas:hover{border-color:var(--gold);color:var(--gold);}
.btn-ver-mas svg{transition:transform .3s;}
.btn-ver-mas:hover svg{transform:translateX(4px);}

/* ── SECTION HEADER SHARED ── */
.sh-wrap{padding:0 48px;margin-bottom:60px;}
.sh-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:8px;}
.sh-title{font-family:var(--font-display);font-size:clamp(48px,6vw,80px);line-height:.95;letter-spacing:-.01em;}

/* ── MARQUEE ── */
.marquee-wrap{border-top:1px solid var(--gray);border-bottom:1px solid var(--gray);overflow:hidden;padding:16px 0;}
.marquee-track{display:flex;white-space:nowrap;animation:marquee 28s linear infinite;will-change:transform;}
.marquee-item{display:flex;align-items:center;gap:28px;padding:0 28px;font-family:var(--font-display);font-size:16px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;flex-shrink:0;}
.m-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes slideUp{from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes rotateSlow{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.85);}}
@keyframes blinkDot{0%,100%{opacity:1;}50%{opacity:.2;}}
@keyframes clientsScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes heroFloat{0%,100%{transform:translateY(0px) rotate(-1deg);}50%{transform:translateY(-16px) rotate(1deg);}}

/* ── MOBILE ── */
@media (max-width: 768px) {
  nav { padding: 18px 24px; }
  .nav-links { display: none; }

  footer { flex-direction: column; gap: 16px; text-align: center; padding: 32px 24px; }
  .footer-socials { justify-content: center; }

  .sh-wrap { padding: 0 24px; }
}