/*
███╗   ███╗ ██████╗    ██╗    ██╗███╗   ███╗
████╗ ████║██╔════╝    ██║    ██║████╗ ████║
██╔████╔██║██║         ██║ █╗ ██║██╔████╔██║
██║╚██╔╝██║██║         ██║███╗██║██║╚██╔╝██║
██║ ╚═╝ ██║╚██████╗    ╚███╔███╔╝██║ ╚═╝ ██║
╚═╝     ╚═╝ ╚═════╝     ╚══╝╚══╝ ╚═╝     ╚═╝

Website desenvolvido por SmartQuik — https://smartquik.com.br
© 2026 SmartQuik. Todos os direitos reservados.

------------------------------------------------------------------
PLANO DE DESIGN (ficha rápida p/ manutenção futura)
Cor:     --ink (quase preto), --gold/--gold-bright (dourado metálico),
         --wine (vinho escuro, contraponto do dourado), --paper (texto claro)
Tipo:    Oswald (display, condensada, "coroa de rua") / Space Grotesk (corpo)
         / Teko (tags/eyebrows, traços verticais longos, remete a coroa)
Layout:  Hero cinemático → Bio → Redes (stats animados) → Hits (números
         gigantes) → Mídia (grade tipo "prints colados") → Contato/booking
Assinatura: coroa dourada fixa (canto), com raios de luz diagonais que
         cruzam a página — o mesmo símbolo que aparece em todo mídia kit
         do artista, aqui vivo e animado (pulso + paralaxe no scroll).
------------------------------------------------------------------
*/

:root{
  --ink:#0a0806;
  --ink-2:#120d09;
  --paper:#f4ecd8;
  --paper-dim:rgba(244,236,216,0.62);
  --gold:#c9a13b;
  --gold-bright:#f3d16b;
  --gold-dim:rgba(201,161,59,0.28);
  --wine:#3a0f0f;
  --wine-bright:#7a1f1f;
  --line:rgba(243,209,107,0.16);
  --line-strong:rgba(243,209,107,0.32);
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
.display{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.01em; line-height:0.94;}
.tag-font{font-family:'Teko',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.14em;}
.mono{font-family:'Space Grotesk',monospace; letter-spacing:0.02em;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}

/* ================= FUNDO — textura + raios dourados (assinatura) ================= */
.bg-fixed{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.bg-fixed::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 900px 600px at 82% -5%, rgba(201,161,59,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 40%, rgba(122,31,31,0.14), transparent 60%);
}
.bg-fixed::after{
  content:""; position:absolute; inset:0; opacity:0.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gold-rays{position:absolute; top:-20%; right:-10%; width:70vw; height:140vh; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(243,209,107,0.10) 0px, rgba(243,209,107,0.10) 2px, transparent 2px, transparent 46px);
  mask-image:radial-gradient(ellipse 60% 60% at 70% 20%, black, transparent 75%);
  animation:raysDrift 26s linear infinite;
}
@keyframes raysDrift{ from{transform:translateX(0);} to{transform:translateX(-46px);} }

/* Coroa fixa — símbolo vivo, gira/pulsa sutilmente conforme o scroll */
.crown-mark{
  position:fixed; top:10px; right:170px; z-index:70; width:54px; height:54px;
  filter:drop-shadow(0 0 10px rgba(243,209,107,0.45));
  transition:transform .2s ease-out;
}
.crown-mark svg{width:100%; height:100%;}
.crown-mark path,.crown-mark polyline{fill:none; stroke:var(--gold-bright); stroke-width:5; stroke-linecap:round; stroke-linejoin:round;}
@media (max-width:720px){ .crown-mark{width:38px; height:38px; top:15px; right:130px;} }

/* ================= HEADER / NAV ================= */
.site-header{position:fixed; top:0; left:0; right:0; z-index:60; padding:16px var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom, rgba(10,8,6,0.92), transparent);
}
.brand{font-family:'Oswald',sans-serif; font-weight:700; font-size:22px; letter-spacing:0.04em; color:var(--paper);}
.brand b{color:var(--gold-bright);}
.nav-cta{
  border:1px solid var(--gold); color:var(--gold-bright); padding:9px 20px; border-radius:2px;
  font-family:'Teko',sans-serif; font-size:18px; letter-spacing:0.1em; text-transform:uppercase;
  transition:background .25s,color .25s;
}
.nav-cta:hover{background:var(--gold-bright); color:var(--ink);}

/* ================= HERO ================= */
.hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; padding:120px var(--pad) 60px;}
.hero > .container{width:100%; padding:0;}
.hero-eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.hero-eyebrow .line{width:46px; height:1px; background:var(--gold);}
.hero-eyebrow span{font-family:'Teko',sans-serif; font-size:19px; letter-spacing:0.22em; color:var(--gold-bright); text-transform:uppercase;}
.hero h1{font-size:clamp(52px,11vw,148px); color:var(--paper);}
.hero h1 .accent{color:transparent; -webkit-text-stroke:2px var(--gold-bright); text-stroke:2px var(--gold-bright);}
.hero-sub{max-width:560px; margin-top:22px; font-size:clamp(16px,2vw,19px); color:var(--paper-dim); line-height:1.55;}
.hero-stats{display:flex; gap:clamp(20px,4vw,52px); margin-top:46px; flex-wrap:wrap;}
.hero-stat b{display:block; font-family:'Oswald',sans-serif; font-size:clamp(26px,3.4vw,40px); color:var(--gold-bright);}
.hero-stat span{font-family:'Teko',sans-serif; font-size:16px; letter-spacing:0.08em; color:var(--paper-dim); text-transform:uppercase;}
.hero-actions{display:flex; gap:16px; margin-top:44px; flex-wrap:wrap;}
.btn-gold{background:var(--gold-bright); color:var(--ink); font-family:'Teko',sans-serif; font-size:19px; letter-spacing:0.08em;
  text-transform:uppercase; padding:15px 30px; border-radius:2px; display:inline-flex; align-items:center; gap:10px;
  transition:transform .2s, box-shadow .2s;}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(243,209,107,0.5);}
.btn-ghost{border:1px solid var(--line-strong); color:var(--paper); font-family:'Teko',sans-serif; font-size:19px; letter-spacing:0.08em;
  text-transform:uppercase; padding:15px 30px; border-radius:2px;}
.hero-photo{position:absolute; top:0; right:200px; bottom:0; width:min(42vw,600px); z-index:0; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center; pointer-events:none;}
.hero-photo.has-photo img{
  height:94%; width:auto; max-width:none; display:block; object-fit:contain;
  filter:drop-shadow(0 0px 0 rgba(0,0,0,0.55));
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 100%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,1) 26%, rgba(0,0,0,1) 100%);
  transform-origin:bottom center; will-change:transform;
}
.hero-photo.is-empty{
  top:auto; width:min(38vw,420px); aspect-ratio:3/4;
  background:linear-gradient(155deg, rgba(201,161,59,0.22), rgba(58,15,15,0.5)); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
}
.hero-photo.is-empty span{font-family:'Teko',sans-serif; letter-spacing:0.1em; color:var(--paper-dim); font-size:15px; text-transform:uppercase;}
.hero > .container{position:relative; z-index:2;}

@media (max-width:900px){
  .hero-photo.is-empty{display:none;}
  .hero-photo.has-photo{
    top:80px; left:30px; right:0; bottom:0; width:100%; height:66%;
    opacity:50%;
    justify-content:center; align-items:flex-end;
  }
  .hero-photo.has-photo img{
    height:100%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 100%);
            mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 22%, rgba(0,0,0,1) 100%);
  }
}

/* ================= SECTION SHELL ================= */
section{position:relative; z-index:1; padding:110px 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:52px; flex-wrap:wrap;}
.section-head .eyebrow{font-family:'Teko',sans-serif; font-size:19px; letter-spacing:0.2em; color:var(--gold-bright); text-transform:uppercase;}
.section-head h2{font-size:clamp(34px,5.2vw,64px); color:var(--paper);}
.section-head p{max-width:420px; color:var(--paper-dim); font-size:15px; line-height:1.6;}
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.is-in{opacity:1; transform:translateY(0);}

/* ================= BIO ================= */
.bio{background:linear-gradient(180deg, transparent, rgba(122,31,31,0.06), transparent);}
.bio-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start;}
.bio-frame{position:sticky; top:110px; aspect-ratio:4/5; border:1px solid var(--line-strong); background:linear-gradient(160deg, rgba(201,161,59,0.16), rgba(10,8,6,0.9));
  display:flex; align-items:center; justify-content:center; overflow:hidden;}
.bio-frame::before{content:""; position:absolute; inset:12px; border:1px solid var(--gold-dim); z-index:1; pointer-events:none;}
.bio-frame span{font-family:'Teko',sans-serif; letter-spacing:0.1em; color:var(--paper-dim); font-size:14px; text-transform:uppercase; padding:0 20px; text-align:center;}
.bio-frame img{transform-origin:center center; will-change:transform;}
.bio-text p{color:var(--paper-dim); line-height:1.75; font-size:16.5px; margin-bottom:16px;}
.bio-text strong{color:var(--gold-bright); font-weight:600;}
.bio-highlight{margin-top:30px; padding-top:26px; border-top:1px solid var(--line);}
.bio-highlight b{font-family:'Oswald',sans-serif; font-size:clamp(40px,5vw,64px); color:var(--gold-bright); display:block;}
.bio-highlight span{font-family:'Teko',sans-serif; letter-spacing:0.1em; text-transform:uppercase; color:var(--paper-dim); font-size:16px;}
@media (max-width:840px){ .bio-grid{grid-template-columns:1fr;} .bio-frame{position:static; top:auto;} }

/* ================= REDES / STATS ================= */
.stats-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.stat-card{background:var(--ink-2); padding:32px 20px; text-align:center; transition:background .25s;}
.stat-card:hover{background:rgba(201,161,59,0.06);}
.stat-card .icon-wrap{width:36px; height:36px; margin:0 auto 16px; color:var(--gold-bright);}
.stat-card .icon-wrap svg{width:100%; height:100%;}
.stat-card b{display:block; font-family:'Oswald',sans-serif; font-size:clamp(26px,3vw,36px); color:var(--paper);}
.stat-card span{font-family:'Teko',sans-serif; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-dim); font-size:14px;}
@media (max-width:820px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }

/* ================= HITS ================= */
.hits-list{display:flex; flex-direction:column;}
.hit-row{display:grid; grid-template-columns:60px 1fr auto; align-items:center; gap:24px; padding:26px 0; border-bottom:1px solid var(--line);
  transition:padding-left .25s, background .25s;}
.hit-row:hover{padding-left:14px; background:rgba(201,161,59,0.05);}
.hit-row .num{font-family:'Teko',sans-serif; font-size:30px; color:var(--gold-dim);}
.hit-row .title{font-family:'Oswald',sans-serif; font-size:clamp(19px,2.6vw,28px); text-transform:uppercase; color:var(--paper);}
.hit-row .views{text-align:right;}
.hit-row .views b{font-family:'Oswald',sans-serif; font-size:clamp(22px,2.8vw,32px); color:var(--gold-bright);}
.hit-row .views span{font-family:'Teko',sans-serif; font-size:14px; letter-spacing:0.06em; color:var(--paper-dim); text-transform:uppercase; display:block;}
.hits-marquee{margin-top:44px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0;}
.hits-marquee .track{display:flex; gap:40px; width:max-content; animation:marquee 22s linear infinite;}
.hits-marquee span{font-family:'Teko',sans-serif; font-size:20px; letter-spacing:0.12em; color:var(--paper-dim); text-transform:uppercase; white-space:nowrap;}
.hits-marquee span b{color:var(--gold-bright);}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ================= MÍDIA (aparições em TV) ================= */
.midia-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.midia-card{position:relative; border:1px solid var(--line-strong); background:var(--ink-2); padding:26px; overflow:hidden;
  transition:transform .3s, border-color .3s;}
.midia-card:hover{transform:translateY(-6px); border-color:var(--gold);}
.midia-card .screen{aspect-ratio:16/10; background:linear-gradient(160deg, rgba(201,161,59,0.14), rgba(58,15,15,0.35));
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:18px; position:relative; overflow:hidden;}
.midia-card .screen img{width:100%; height:100%; object-fit:cover; display:block;}
.midia-card .screen::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 4px); opacity:.4; pointer-events:none;}
.midia-card .screen span{font-family:'Teko',sans-serif; font-size:13px; letter-spacing:0.1em; color:var(--paper-dim); text-transform:uppercase; z-index:1;}
.midia-card .funcao{font-family:'Teko',sans-serif; font-size:14px; letter-spacing:0.1em; color:var(--gold-bright); text-transform:uppercase;}
.midia-card h3{font-family:'Oswald',sans-serif; font-size:22px; text-transform:uppercase; margin:6px 0 4px; color:var(--paper);}
.midia-card .emissora{font-family:'Teko',sans-serif; font-size:15px; letter-spacing:0.06em; color:var(--paper-dim); text-transform:uppercase;}
@media (max-width:920px){ .midia-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .midia-grid{grid-template-columns:1fr;} }

/* ================= BOOKING / CONTATO ================= */
.booking{background:radial-gradient(ellipse 900px 500px at 50% 0%, rgba(201,161,59,0.12), transparent 70%);}
.booking-box{border:1px solid var(--line-strong); padding:clamp(30px,6vw,70px); text-align:center;}
.booking-box h2{font-size:clamp(32px,6vw,58px); margin-bottom:16px;}
.booking-box p{color:var(--paper-dim); max-width:520px; margin:0 auto 30px; line-height:1.6;}
.booking-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ================= FOOTER ================= */
footer{position:relative; z-index:1; padding:40px var(--pad) 30px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .foot-brand{font-family:'Oswald',sans-serif; letter-spacing:0.04em; color:var(--paper-dim); font-size:14px;}
footer .foot-social{display:flex; gap:14px;}
footer .foot-social a{width:34px; height:34px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--paper-dim); transition:color .2s, border-color .2s;}
footer .foot-social a:hover{color:var(--gold-bright); border-color:var(--gold-bright);}
footer .foot-social svg{width:16px; height:16px;}

.icon{width:18px; height:18px; flex:none; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round;}