
:root{
  --ink:#0B0B0B;
  --graphite:#1A1A1A;
  --surface:#1F1F23;
  --white:#FAFAF8;
  --warm-gray:#B8B2A1;
  --gold:#C8983C;
  --gold-deep:#9A6C22;
  --champagne:#F0D9A6;
  --line:rgba(200,152,60,.28);
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--gold) var(--ink)}
body{
  margin:0;
  min-height:100vh;
  font-family:'Manrope',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--white);
  background:var(--ink);
  overflow-x:hidden;
}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-track{background:var(--ink)}
body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--champagne),var(--gold-deep));border-radius:999px;border:2px solid var(--ink)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
#home,#servicos,#artistas,#sobre,#contato{scroll-margin-top:112px}
.section-container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(1180px,calc(100% - 32px));
  min-height:76px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:9px 13px;
  border:1px solid rgba(240,217,166,.34);
  border-radius:999px;
  background:linear-gradient(110deg,rgba(11,11,11,.90),rgba(31,31,35,.84),rgba(154,108,34,.24));
  box-shadow:0 28px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10),0 0 30px rgba(200,152,60,.08);
  backdrop-filter:blur(22px) saturate(1.12);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
}
.site-header::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:linear-gradient(110deg,rgba(240,217,166,.86),rgba(184,178,161,.30),rgba(200,152,60,.72));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.72;
}
.brand,.main-nav,.menu-toggle{position:relative;z-index:1}
.brand{display:flex;align-items:center;min-width:0}
.brand-shell{
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;
  width:205px;
  padding:3px 9px;
  border-radius:999px;
  background:#0B0B0B;
  border:1px solid rgba(200,152,60,.46);
  overflow:hidden;
}
.brand img{width:170px;max-height:51px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(200,152,60,.18))}
.main-nav{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.main-nav a{
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px;border-radius:999px;
  color:rgba(250,250,248,.84);font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:color .28s,background .28s,box-shadow .28s,transform .28s;
}
.main-nav a:hover,.main-nav a:focus-visible{
  color:var(--white);background:rgba(200,152,60,.12);box-shadow:0 0 0 1px rgba(200,152,60,.28),0 0 30px rgba(200,152,60,.11);transform:translateY(-1px);outline:none;
}
.menu-toggle{
  display:none;width:46px;height:46px;border:1px solid rgba(200,152,60,.34);border-radius:999px;
  background:rgba(200,152,60,.10);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.menu-toggle span{width:20px;height:2px;border-radius:999px;background:var(--white);transition:transform .28s,opacity .2s}
.menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:128px 0 74px;isolation:isolate;
  background:radial-gradient(circle at 78% 28%,rgba(200,152,60,.15),transparent 34%),#171717;
}
.hero-bg{
  position:absolute;inset:0;z-index:-6;
  background-image:
    linear-gradient(90deg,rgba(11,11,11,.72) 0%,rgba(11,11,11,.48) 38%,rgba(26,26,26,.28) 62%,rgba(11,11,11,.62) 100%),
    linear-gradient(180deg,rgba(11,11,11,.10) 0%,rgba(31,31,35,.08) 48%,rgba(11,11,11,.74) 100%),
    url('../images/bg-hero-1448.webp');
  background-image:
    linear-gradient(90deg,rgba(11,11,11,.72) 0%,rgba(11,11,11,.48) 38%,rgba(26,26,26,.28) 62%,rgba(11,11,11,.62) 100%),
    linear-gradient(180deg,rgba(11,11,11,.10) 0%,rgba(31,31,35,.08) 48%,rgba(11,11,11,.74) 100%),
    image-set(
      url('../images/bg-hero-1448.avif') type('image/avif'),
      url('../images/bg-hero-1448.webp') type('image/webp')
    );
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
  filter:saturate(.96) contrast(1.01) brightness(1.12);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-5;pointer-events:none;
  background:
    radial-gradient(circle at 24% 32%,rgba(240,217,166,.13),transparent 30%),
    radial-gradient(circle at 78% 38%,rgba(200,152,60,.13),transparent 34%),
    linear-gradient(90deg,rgba(11,11,11,.18),rgba(31,31,35,.03),rgba(11,11,11,.20));
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-4;pointer-events:none;
  box-shadow:inset 0 0 145px rgba(11,11,11,.46),inset 0 -125px 150px rgba(11,11,11,.78);
}
.hero-depth{position:absolute;z-index:-3;border-radius:50%;pointer-events:none;filter:blur(54px)}
.hero-depth-left{left:8%;top:28%;width:380px;height:380px;background:rgba(240,217,166,.10)}
.hero-depth-right{right:5%;top:14%;width:min(680px,58vw);height:min(560px,55vh);background:radial-gradient(circle,rgba(240,217,166,.18),rgba(200,152,60,.12) 36%,transparent 72%)}
.hero-grid{
  position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.12;
  background-image:linear-gradient(rgba(240,217,166,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(200,152,60,.08) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 42%,#000 0%,transparent 66%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0%,transparent 66%);
}
.hero-inner{
  position:relative;z-index:2;width:min(var(--max),calc(100% - 56px));min-height:calc(100svh - 210px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.80fr);align-items:center;gap:clamp(32px,5vw,72px);
}
.hero-copy{width:min(100%,690px);padding-top:20px}
.hero-eyebrow,.services-eyebrow,.about-eyebrow,.artists-eyebrow,.contact-eyebrow{
  display:inline-flex;align-items:center;gap:13px;color:var(--gold);text-transform:uppercase;letter-spacing:.28em;font-size:12px;font-weight:800;line-height:1.2;text-shadow:0 0 20px rgba(200,152,60,.22);
}
.hero-eyebrow::after,.services-eyebrow::after,.about-eyebrow::after,.artists-eyebrow::after,.contact-eyebrow::after{
  content:"";width:76px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(200,152,60,0));
}
h1{margin:18px 0 20px;font-size:clamp(34px,4.55vw,62px);line-height:1.01;letter-spacing:-.052em;font-weight:800;text-wrap:balance;text-shadow:0 3px 34px rgba(0,0,0,.42)}
.hero-subtitle{max-width:650px;margin:0 0 30px;color:rgba(250,250,248,.88);font-size:clamp(16px,1.3vw,19px);line-height:1.72;font-weight:500;text-shadow:0 2px 20px rgba(0,0,0,.42)}
.hero-visual{position:relative;align-self:center;display:flex;justify-content:center;align-items:center;min-height:0;padding:22px 0;overflow:visible;perspective:1200px}
.portrait-light{position:absolute;left:6%;right:6%;top:2%;height:88%;border-radius:44px;background:radial-gradient(circle at 46% 20%,rgba(240,217,166,.24),rgba(200,152,60,.11) 36%,transparent 76%);filter:blur(34px);opacity:.86}
.portrait-shadow{position:absolute;left:10%;right:10%;bottom:0;height:18%;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,rgba(0,0,0,.72),transparent 73%);filter:blur(20px);z-index:0}
.hero-card{
  --card-bgpos:0% 50%;position:relative;z-index:3;width:min(435px,92%);margin:0;padding:9px;border-radius:38px;isolation:isolate;overflow:hidden;border:2px solid transparent;
  background:
    linear-gradient(180deg,rgba(31,31,35,.98),rgba(11,11,11,.96)) padding-box,
    linear-gradient(90deg,transparent 0%,#1A1A1A 12%,#B8B2A1 28%,#F0D9A6 42%,#C8983C 54%,#F0D9A6 64%,#B8B2A1 78%,#1A1A1A 90%,transparent 100%) border-box;
  background-size:auto,270% 100%;background-position:0 0,var(--card-bgpos);
  box-shadow:0 42px 110px rgba(0,0,0,.50),0 18px 54px rgba(200,152,60,.12),0 0 42px rgba(240,217,166,.12),inset 0 1px 0 rgba(250,250,248,.20);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
  will-change:transform;
}
.hero-card::before{
  content:"";position:absolute;inset:-8px;z-index:0;border-radius:inherit;pointer-events:none;
  background-image:linear-gradient(90deg,transparent 0%,#1A1A1A 12%,#B8B2A1 28%,#F0D9A6 42%,#C8983C 54%,#F0D9A6 64%,#B8B2A1 78%,#1A1A1A 90%,transparent 100%);
  background-size:270% 100%;background-position:var(--card-bgpos);filter:blur(24px);opacity:.36;
}
.hero-card::after{content:"";position:absolute;inset:9px;z-index:4;border-radius:29px;pointer-events:none;box-shadow:inset 0 0 34px rgba(11,11,11,.12),inset 0 1px 0 rgba(250,250,248,.18)}
.hero-card-glow{position:absolute;inset:9px;z-index:2;border-radius:29px;pointer-events:none;background:radial-gradient(circle at 50% 12%,rgba(240,217,166,.16),transparent 28%),linear-gradient(180deg,rgba(250,250,248,.04),transparent);mix-blend-mode:screen}
.hero-card img{position:relative;z-index:1;width:100%;height:auto;border-radius:29px;filter:saturate(.99) contrast(1.015) brightness(1.02);box-shadow:0 26px 70px rgba(0,0,0,.34)}
.hero-bottom-fade{position:absolute;left:0;right:0;bottom:-1px;z-index:6;height:145px;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,11,0),rgba(11,11,11,.66) 72%,#171717 100%)}

/* Buttons */
.hero-btn-wrap{display:inline-block;margin:0 0 44px;-webkit-box-reflect:below 1px linear-gradient(transparent,rgba(0,0,0,.18))}
.hero-btn{
  --btn-bgpos:0% 0%;position:relative;display:inline-block;width:min(300px,100%);min-width:260px;height:50px;line-height:48px;background:#1F1F23;
  font-weight:700;font-size:15px;text-align:center;letter-spacing:.04em;transition:.5s;
}
.hero-btn span{position:absolute;display:block;inset:1px;text-align:center;white-space:nowrap;background:#1F1F23;color:var(--white);line-height:48px;text-shadow:0 1px 5px rgba(0,0,0,.65);transition:color .5s;z-index:2}
.hero-btn:hover span{color:var(--champagne)}
.hero-btn span::before{content:"";position:absolute;top:0;left:0;width:100%;height:50%;background:rgba(255,255,255,.035);z-index:10}
.hero-btn::before,.hero-btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(45deg,#1A1A1A,#1A1A1A,#9A6C22,#F0D9A6,#C8983C,#1F1F23,#1A1A1A,#C8983C,#F0D9A6,#9A6C22,#1A1A1A);
  background-size:200% 200%;background-position:var(--btn-bgpos);transition:opacity .5s;
}
.hero-btn::before{opacity:.92}
.hero-btn::after{opacity:.44;filter:blur(18px)}
.hero-btn:hover::before,.hero-btn:hover::after{opacity:.12}

/* Reveal */
.reveal,.reveal-in,.about-reveal,.artists-reveal,.contact-reveal{opacity:0;transform:translateY(28px);transition:opacity .78s cubic-bezier(.16,1,.3,1),transform .78s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible,.reveal-in.is-visible,.about-reveal.is-visible,.artists-reveal.is-visible,.contact-reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-late,.about-reveal-delay,.artists-reveal-delay{transition-delay:.12s}

/* Services */
.services-section{
  position:relative;padding:clamp(54px,6vw,82px) 0 clamp(64px,7vw,96px);overflow:visible;isolation:isolate;background:#292724;
}
.services-bg{
  position:absolute;inset:-70px 0 0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 14% 18%,rgba(240,217,166,.15),transparent 32rem),radial-gradient(circle at 84% 66%,rgba(200,152,60,.13),transparent 34rem),linear-gradient(180deg,#171717 0%,#3A3731 50%,#242321 100%);
}
.services-bg::before{
  content:"";position:absolute;inset:0;opacity:.11;background-image:linear-gradient(rgba(240,217,166,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(200,152,60,.10) 1px,transparent 1px);background-size:74px 74px;
}
.services-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(330px,.42fr) minmax(0,1fr);gap:clamp(30px,4vw,56px);align-items:start}
.services-side{position:sticky;top:118px;align-self:start}
.services-sticky{
  position:relative;padding:clamp(30px,3vw,42px);min-height:220px;display:flex;flex-direction:column;justify-content:center;border-radius:34px;
  background:linear-gradient(155deg,rgba(71,66,58,.92),rgba(31,31,35,.94));border:1px solid rgba(240,217,166,.28);
  box-shadow:0 28px 84px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.09);overflow:hidden;
}
.services-sticky::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(240,217,166,.50),rgba(255,255,255,.08),rgba(200,152,60,.24));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.services-sticky h2{font-size:clamp(40px,4vw,58px);line-height:1.02;letter-spacing:-.045em;margin:18px 0 0;text-shadow:0 16px 38px rgba(0,0,0,.28)}
.services-cta-out{display:block;margin:28px 0 24px;text-align:center}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:24px;align-items:start;min-width:0}
.service-card{
  position:relative;border-radius:28px;background:linear-gradient(180deg,rgba(77,72,63,.94),rgba(31,31,35,.98));border:1px solid rgba(240,217,166,.28);
  box-shadow:0 24px 68px rgba(0,0,0,.29),0 0 0 1px rgba(200,152,60,.05),inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;transition:transform .34s,box-shadow .34s,border-color .34s;display:flex;flex-direction:column;align-self:start;
}
.service-card:hover{transform:translateY(-7px);border-color:rgba(240,217,166,.54);box-shadow:0 34px 86px rgba(0,0,0,.40),0 0 34px rgba(200,152,60,.11)}
.service-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#E9E0D3;border-bottom:1px solid rgba(200,152,60,.18);filter:none}
.service-copy{
  padding:20px 22px 21px;
  background:linear-gradient(160deg,rgba(92,84,72,.95),rgba(31,31,35,.98));
}
.service-copy p{margin:0;color:rgba(250,250,248,.86);font-size:14.5px;line-height:1.62;font-weight:500}

/* About */
.about-section{position:relative;padding:clamp(64px,7vw,96px) 0;isolation:isolate;overflow:hidden;background:#242321}
.about-bg{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(circle at 14% 26%,rgba(200,152,60,.13),transparent 31rem),radial-gradient(circle at 82% 48%,rgba(240,217,166,.10),transparent 36rem),linear-gradient(135deg,#1A1A1A 0%,#3A3731 48%,#242321 100%);
}
.about-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(330px,.88fr) minmax(360px,1.12fr);gap:clamp(30px,5vw,64px);align-items:center}
.about-portrait{
  --btn-bgpos:0% 50%;position:relative;border-radius:38px;padding:9px;overflow:hidden;isolation:isolate;background:#1A1A1A;border:1px solid rgba(240,217,166,.34);
  box-shadow:0 38px 100px rgba(0,0,0,.38),0 0 16px rgba(200,152,60,.11),inset 0 1px 0 rgba(255,255,255,.11);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.about-portrait::before,.about-portrait::after{content:"";position:absolute;pointer-events:none;background-image:linear-gradient(90deg,transparent 0%,#1A1A1A 13%,#B8B2A1 30%,#C8983C 50%,#F0D9A6 64%,#9A6C22 78%,#1A1A1A 90%,transparent 100%);background-size:260% 100%;background-position:var(--btn-bgpos)}
.about-portrait::before{inset:0;z-index:0;border-radius:inherit;filter:blur(14px);opacity:.66}
.about-portrait::after{inset:0;z-index:4;border-radius:inherit;padding:2px;opacity:.90;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.about-portrait img{position:relative;z-index:2;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;border-radius:30px;filter:saturate(1.02) contrast(1.01);box-shadow:0 26px 70px rgba(0,0,0,.34)}
.about-copy{
  position:relative;padding:clamp(30px,4.2vw,48px);border-radius:36px;background:linear-gradient(155deg,rgba(76,71,62,.94),rgba(31,31,35,.96));border:1px solid rgba(240,217,166,.28);
  box-shadow:0 28px 84px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10);overflow:hidden;
}
.about-copy::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(240,217,166,.46),rgba(255,255,255,.08),rgba(200,152,60,.24));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.about-copy h2,.artists-heading h2,.contact-heading h2{position:relative;z-index:1;font-size:clamp(34px,4.2vw,58px);line-height:1.02;margin:16px 0 18px;letter-spacing:-.046em;color:var(--white);text-wrap:balance;text-shadow:0 16px 38px rgba(0,0,0,.28)}
.about-copy p{position:relative;z-index:1;font-size:15.3px;line-height:1.72;color:rgba(250,250,248,.82);margin:0 0 14px;font-weight:500}
.about-copy .about-lead{font-size:16.6px;color:rgba(250,250,248,.94);font-weight:700}
.about-cta-wrap{position:relative;z-index:2;display:block;margin:24px 0 26px}

/* Artists */
.artists-section{position:relative;padding:clamp(66px,7vw,102px) 0;isolation:isolate;overflow:hidden;background:#2E2B26}
.artists-bg{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(circle at 80% 16%,rgba(240,217,166,.13),transparent 30rem),radial-gradient(circle at 18% 72%,rgba(200,152,60,.15),transparent 34rem),linear-gradient(160deg,#2A2824 0%,#474137 48%,#211F1C 100%);
}
.artists-bg::before{content:"";position:absolute;inset:0;opacity:.10;background-image:linear-gradient(rgba(240,217,166,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(200,152,60,.08) 1px,transparent 1px);background-size:76px 76px}
.artists-shell{position:relative;z-index:2}
.artists-heading{max-width:820px;margin:0 auto clamp(38px,5vw,58px);text-align:center}
.artists-heading .artists-eyebrow{justify-content:center}
.artists-heading p{margin:0;color:rgba(250,250,248,.82);font-size:16px;line-height:1.7}
.artist-feature{display:grid;grid-template-columns:minmax(340px,.92fr) minmax(390px,1.08fr);gap:clamp(30px,5vw,64px);align-items:center}
.artist-photo{
  --btn-bgpos:0% 50%;position:relative;margin:0;padding:8px;border-radius:34px;overflow:hidden;background:#1A1A1A;border:1px solid rgba(240,217,166,.34);
  box-shadow:0 34px 90px rgba(0,0,0,.36),0 0 22px rgba(200,152,60,.10);transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.artist-photo::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(100deg,#1A1A1A,#B8B2A1,#F0D9A6,#C8983C,#9A6C22,#1A1A1A);background-size:260% 100%;background-position:var(--btn-bgpos);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3}
.artist-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;border-radius:27px}
.artist-copy{
  padding:clamp(28px,3.6vw,42px);border-radius:34px;background:linear-gradient(155deg,rgba(76,71,62,.95),rgba(31,31,35,.98));border:1px solid rgba(240,217,166,.28);
  box-shadow:0 28px 84px rgba(0,0,0,.33),inset 0 1px 0 rgba(255,255,255,.09);
}
.artist-copy p{margin:0 0 14px;color:rgba(250,250,248,.83);font-size:15px;line-height:1.72;font-weight:500}
.artist-copy .artist-lead{color:rgba(250,250,248,.95);font-weight:700}
.artist-more-cta{display:block;margin:25px 0 20px}
.artist-join{
  margin-top:clamp(42px,6vw,72px);padding:clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;border-radius:32px;
  background:linear-gradient(135deg,rgba(31,31,35,.92),rgba(92,75,48,.78),rgba(31,31,35,.94));border:1px solid rgba(240,217,166,.34);
  box-shadow:0 28px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10);
}
.artist-join h3{margin:0 0 12px;font-size:clamp(24px,2.8vw,38px);line-height:1.14;letter-spacing:-.035em}
.artist-join p{margin:0;color:rgba(250,250,248,.82);font-size:15.5px;line-height:1.68}
.artist-form-cta{margin:0;-webkit-box-reflect:none}
.artist-form-cta .hero-btn{width:330px}
.artist-form-cta .hero-btn span{font-size:14px}

/* Contact */
.contact-section{position:relative;padding:clamp(64px,7vw,96px) 0 30px;isolation:isolate;overflow:hidden;background:#1A1A1A}
.contact-bg{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(circle at 14% 20%,rgba(200,152,60,.12),transparent 34rem),radial-gradient(circle at 84% 12%,rgba(240,217,166,.11),transparent 32rem),linear-gradient(150deg,#1A1A1A 0%,#3B3730 56%,#171717 100%);
}
.contact-shell{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,3.2vw,44px);align-items:start;
  border:1px solid rgba(240,217,166,.30);border-radius:38px;padding:clamp(28px,5vw,48px);
  background:linear-gradient(145deg,rgba(74,68,58,.94),rgba(31,31,35,.96));box-shadow:0 34px 98px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.10);overflow:hidden;
}
.contact-shell::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(240,217,166,.52),rgba(255,255,255,.10),rgba(200,152,60,.26));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.contact-heading{grid-column:1;grid-row:1;align-self:center;max-width:760px;margin:0;padding:4px 0}
.contact-brand{
  grid-column:2;grid-row:1;align-self:start;justify-self:end;width:clamp(155px,15vw,184px);aspect-ratio:1/1;margin:0;border-radius:28px;overflow:hidden;padding:5px;background:#0B0B0B;border:1px solid rgba(200,152,60,.56);box-shadow:0 18px 38px rgba(0,0,0,.30),0 0 24px rgba(200,152,60,.10)
}
.contact-brand img{width:100%;height:100%;object-fit:contain;border-radius:23px}
.contact-grid{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(30px,3vw,38px)}
.contact-card{
  min-height:176px;padding:24px;border-radius:24px;border:1px solid rgba(240,217,166,.22);background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(31,31,35,.50));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 55px rgba(0,0,0,.22);transition:transform .28s,border-color .28s,background .28s,box-shadow .28s;word-break:break-word;color:var(--white);
}
.contact-card:hover,.contact-card:focus-visible{transform:translateY(-5px);border-color:rgba(240,217,166,.56);background:linear-gradient(150deg,rgba(200,152,60,.10),rgba(31,31,35,.54));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 26px 64px rgba(0,0,0,.30),0 0 30px rgba(200,152,60,.10);outline:none}
.contact-card strong{display:block;font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;color:var(--white)}
.contact-card em{font-style:normal;color:rgba(250,250,248,.80);font-size:16px;line-height:1.45;font-weight:700}
.contact-card-animated{overflow:visible}
.contact-card-animated .contact-icon-animated{width:auto;height:auto;display:block;margin-bottom:10px;padding:0;background:none;border:0;box-shadow:none;overflow:visible}
.contact-card-animated .contact-anim-item{position:relative;display:inline-block;width:60px;height:84px;color:var(--gold);background:transparent}
.contact-card-animated .contact-anim-svg{transition:all .3s;padding:.7rem;height:60px;width:60px;border-radius:100%;color:inherit;fill:currentColor;background:linear-gradient(135deg,rgba(200,152,60,.20),rgba(255,255,255,.06));box-shadow:inset 0 0 20px rgba(255,255,255,.18),0 5px 5px rgba(0,0,0,.18)}
.contact-card-animated .contact-anim-text{opacity:0;border-radius:5px;padding:5px 8px;transition:all .3s;color:inherit;background:rgba(255,255,255,.18);position:absolute;z-index:5;left:0;top:68px;white-space:nowrap;pointer-events:none;font-size:12px;font-weight:700}
.contact-card-animated .contact-anim-layer{opacity:0;position:absolute;left:0;top:0;height:60px;width:60px;border-radius:50%;border:1px solid currentColor;background:rgba(255,255,255,.03);transition:all .3s;pointer-events:none}
.contact-card-animated:hover .contact-anim-svg,.contact-card-animated:focus-visible .contact-anim-svg{transform:translate(15px,-15px)}
.contact-card-animated:hover .contact-anim-text,.contact-card-animated:focus-visible .contact-anim-text{opacity:1;transform:translate(25px,-2px) skew(-5deg)}
.contact-card-animated:hover .contact-anim-layer,.contact-card-animated:focus-visible .contact-anim-layer{opacity:1}
.contact-card-animated:hover .contact-anim-layer:nth-child(1){opacity:.2}
.contact-card-animated:hover .contact-anim-layer:nth-child(2){opacity:.4;transform:translate(5px,-5px)}
.contact-card-animated:hover .contact-anim-layer:nth-child(3){opacity:.6;transform:translate(10px,-10px)}

/* Footer lives inside contact shell, like the reference structure. */
.site-footer{grid-column:1/-1;width:100%;padding:clamp(28px,3vw,40px) 0 0;background:transparent}
.site-footer-shell{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-radius:999px;border:1px solid rgba(240,217,166,.22);background:linear-gradient(135deg,rgba(31,31,35,.92),rgba(82,73,59,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 54px rgba(0,0,0,.22)}
.site-footer small{font-size:13px;font-weight:600;color:rgba(250,250,248,.72)}
.site-footer a{color:var(--gold);font-weight:900;letter-spacing:.05em}

/* Responsive */
@media(max-width:1080px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(330px,.72fr);gap:28px}
  .hero-card{width:min(390px,92%)}
  .services-layout{grid-template-columns:minmax(300px,.40fr) minmax(0,1fr);gap:28px}
  .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;min-height:auto;text-align:center}
  .hero-copy{margin-inline:auto}.hero-eyebrow{justify-content:center}.hero-subtitle{margin-inline:auto}.hero-btn-wrap{text-align:center}
  .hero-visual{width:min(520px,100%);margin-inline:auto}
  .services-layout{grid-template-columns:1fr;gap:30px}
  .services-side{position:relative;top:auto;max-width:860px;margin-inline:auto;width:100%}
  .services-sticky{text-align:center;min-height:0}
  .services-eyebrow{justify-content:center}
  .services-grid{grid-template-columns:repeat(2,minmax(280px,1fr));max-width:960px;width:100%;margin-inline:auto}
  .about-inner{grid-template-columns:1fr}.about-portrait{max-width:600px;margin-inline:auto}.about-copy{max-width:820px;margin-inline:auto}
  .artist-feature{grid-template-columns:1fr}.artist-photo{max-width:820px;margin-inline:auto}.artist-copy{max-width:820px;margin-inline:auto}
  .artist-join{grid-template-columns:1fr}.artist-form-cta{text-align:center}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  #home,#servicos,#artistas,#sobre,#contato{scroll-margin-top:96px}
  .section-container{width:min(100% - 32px,var(--max))}
  .site-header{top:12px;width:calc(100% - 24px);min-height:64px;padding:7px 9px;overflow:visible}
  .brand-shell{width:150px;height:50px}.brand img{width:125px;max-height:46px}
  .menu-toggle{display:flex}
  .main-nav{
    position:absolute;top:76px;left:0;right:0;display:grid;justify-items:center;gap:10px;padding:26px 18px 22px;border-radius:28px;
    background:rgba(26,26,26,.97);border:1px solid rgba(240,217,166,.22);box-shadow:0 30px 80px rgba(0,0,0,.55);backdrop-filter:blur(20px);
    opacity:0;pointer-events:none;transform:translateY(-10px);transition:opacity .28s,transform .28s;
  }
  .main-nav.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
  .main-nav a{width:min(100%,320px);min-height:44px;background:rgba(200,152,60,.07);text-align:center}

  .hero{padding:108px 0 36px;align-items:flex-start;min-height:100svh}
  .hero-inner{width:min(100% - 32px,var(--max));padding-top:12px;gap:6px;text-align:left}
  .hero-copy{text-align:left}.hero-eyebrow{justify-content:flex-start;font-size:10px;letter-spacing:.16em;gap:8px}.hero-eyebrow::after{width:42px}
  h1{font-size:clamp(34px,10.3vw,48px);line-height:1.04;margin:16px 0}.hero-subtitle{font-size:15.5px;line-height:1.62;margin-bottom:20px}
  .hero-btn-wrap{text-align:left;-webkit-box-reflect:none}.hero .hero-btn-wrap{margin-top:10px;margin-bottom:42px;-webkit-box-reflect:below 1px linear-gradient(transparent,rgba(0,0,0,.16))}
  .hero-visual{width:100%;padding-top:0}.hero-card{width:min(330px,88vw);padding:6px;border-radius:30px}.hero-card::after,.hero-card-glow{inset:6px;border-radius:24px}.hero-card img{border-radius:24px}
  .hero-bottom-fade{height:110px}

  .services-section{padding:42px 0 54px}.services-side{display:contents}.services-sticky{order:1;width:100%;max-width:450px;margin-inline:auto;padding:28px 20px;border-radius:26px;text-align:left}
  .services-eyebrow{justify-content:flex-start;font-size:10px;letter-spacing:.16em;gap:8px}.services-eyebrow::after{width:42px}.services-sticky h2{font-size:clamp(32px,8vw,42px)}
  .services-grid{order:2;grid-template-columns:1fr;gap:18px;max-width:450px}.services-cta-out{order:3;width:100%;max-width:450px;margin:30px auto 24px}
  .service-card{border-radius:25px}.service-copy{padding:18px 19px 19px}.service-copy p{font-size:14.1px;line-height:1.58}

  .about-section,.artists-section,.contact-section{padding-top:54px;padding-bottom:60px}
  .about-copy,.artist-copy{padding:28px 20px;border-radius:26px}
  .about-copy h2,.artists-heading h2,.contact-heading h2{font-size:clamp(31px,8vw,40px)}
  .about-eyebrow,.artists-eyebrow,.contact-eyebrow{font-size:10px;letter-spacing:.16em;gap:8px}.about-eyebrow::after,.artists-eyebrow::after,.contact-eyebrow::after{width:42px}
  .about-portrait{order:1;border-radius:28px;padding:8px;max-width:450px}.about-portrait img{border-radius:22px;aspect-ratio:4/5}
  .about-copy{order:2}
  .artists-heading{text-align:left}.artists-heading .artists-eyebrow{justify-content:flex-start}.artists-heading p{font-size:15px}
  .artist-photo{border-radius:27px;padding:7px}.artist-photo img{border-radius:21px}
  .artist-join{padding:26px 20px;border-radius:26px}.artist-join h3{font-size:clamp(23px,7vw,31px)}.artist-form-cta .hero-btn{width:100%;min-width:0}.artist-form-cta .hero-btn span{font-size:12.8px}
  .artist-more-cta .hero-btn{width:100%;min-width:0}.artist-more-cta .hero-btn span{font-size:13.5px}

  .contact-shell{grid-template-columns:minmax(0,1fr) 112px;column-gap:12px;border-radius:26px;padding:28px 20px}
  .contact-brand{width:112px;border-radius:22px}.contact-brand img{border-radius:18px}
  .contact-grid{margin-top:26px}.contact-card{padding:20px;min-height:auto}.contact-card em{font-size:15px}
  .site-footer-shell{border-radius:28px;align-items:flex-start;padding:18px 20px}.site-footer small{font-size:12.5px;line-height:1.45}

  .reveal-in,.about-reveal,.artists-reveal,.contact-reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:440px){
  .section-container{width:min(100% - 28px,var(--max))}
  .brand-shell{width:132px}.brand img{width:110px}
  .contact-shell{grid-template-columns:minmax(0,1fr) 96px;column-gap:9px}.contact-brand{width:96px}
  .contact-heading h2{font-size:clamp(27px,7.4vw,32px)}.contact-eyebrow::after{width:28px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
  .reveal,.reveal-in,.about-reveal,.artists-reveal,.contact-reveal{opacity:1!important;transform:none!important}
  .hero-card,.about-portrait,.artist-photo{transform:none!important}
}


/* ─── v002 | Correção dos efeitos luminosos ───
   A luz móvel fica deliberadamente mais nítida, sem alterar a estrutura dos cards. */
.hero-card{
  background:
    linear-gradient(180deg,rgba(31,31,35,.98),rgba(11,11,11,.96)) padding-box,
    linear-gradient(90deg,
      transparent 0%,
      #1A1A1A 10%,
      #9A6C22 24%,
      #F0D9A6 40%,
      #FFFFFF 48%,
      #C8983C 56%,
      #F0D9A6 66%,
      #9A6C22 80%,
      #1A1A1A 92%,
      transparent 100%) border-box;
  background-size:auto,270% 100%;
  background-position:0 0,var(--card-bgpos);
}
.hero-card::before{
  background-image:linear-gradient(90deg,
    transparent 0%,
    #1A1A1A 10%,
    #9A6C22 24%,
    #F0D9A6 40%,
    #FFFFFF 48%,
    #C8983C 56%,
    #F0D9A6 66%,
    #9A6C22 80%,
    #1A1A1A 92%,
    transparent 100%);
  opacity:.48;
}

.about-portrait::before,
.about-portrait::after{
  background-image:linear-gradient(90deg,
    transparent 0%,
    #1A1A1A 10%,
    #9A6C22 25%,
    #F0D9A6 40%,
    #FFFFFF 49%,
    #C8983C 58%,
    #F0D9A6 68%,
    #9A6C22 82%,
    #1A1A1A 92%,
    transparent 100%);
}
.about-portrait::before{opacity:.76}

.hero-btn::before,
.hero-btn::after{
  background:linear-gradient(45deg,
    #1A1A1A 0%,
    #1F1F23 12%,
    #9A6C22 25%,
    #C8983C 38%,
    #FFFFFF 49%,
    #F0D9A6 54%,
    #C8983C 62%,
    #9A6C22 74%,
    #1F1F23 88%,
    #1A1A1A 100%);
  background-size:220% 220%;
  background-position:var(--btn-bgpos);
}
.hero-btn::before{opacity:1}
.hero-btn::after{opacity:.56;filter:blur(20px)}

/* ─── v003 | Background contínuo em toda a página ───
   A arte musical continua exclusiva da hero. A base cromática #171717,
   porém, passa a ser uma superfície única do início ao fim do site.
   As seções deixam de pintar faixas próprias e passam a flutuar sobre
   o mesmo fundo, eliminando divisórias cromáticas entre os blocos. */
html,
body{
  background:#171717;
}
body{
  background-color:#171717;
}
main{
  position:relative;
  background:transparent;
}

/* A hero também usa a superfície global. bg-hero.png continua sendo apenas
   a camada decorativa da própria hero e desaparece no fade inferior. */
.hero{
  background:transparent;
}
.hero-bottom-fade{
  background:linear-gradient(
    180deg,
    rgba(23,23,23,0) 0%,
    rgba(23,23,23,.46) 58%,
    rgba(23,23,23,.88) 84%,
    #171717 100%
  );
}

/* Nenhuma seção abaixo da hero cria uma nova faixa de cor. */
.services-section,
.about-section,
.artists-section,
.contact-section{
  background:transparent;
}
.services-bg,
.about-bg,
.artists-bg,
.contact-bg{
  background:transparent;
}

/* Grades decorativas próprias de seções antigas também são removidas para
   não sugerirem o início/fim de um novo bloco visual. */
.services-bg::before,
.artists-bg::before{
  display:none;
}

/* Mantém apenas halos muito locais atrás do conteúdo, sem preencher a largura
   da seção e sem criar qualquer linha horizontal de transição. */
.services-bg::after,
.about-bg::after,
.artists-bg::after,
.contact-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(circle at 12% 22%,rgba(200,152,60,.055),transparent 24rem),
    radial-gradient(circle at 86% 70%,rgba(240,217,166,.035),transparent 28rem);
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
}

/* Garante que o rodapé feche a página sobre a mesma superfície contínua. */
.site-footer{
  background:transparent;
}


/* ─── v005 | Pauta vetorial contínua na borda esquerda ───
   Substitui completamente o raster esticado da v004. A pauta agora é um SVG
   vetorial com cinco linhas curvas contínuas e espessura estável, acompanhado
   por notas independentes que não sofrem deformação vertical. */
main{
  position:relative;
  isolation:isolate;
}

.page-music-border{
  position:absolute;
  top:0;
  left:max(-72px,calc(50% - (var(--max) / 2) - 116px));
  width:clamp(220px,20vw,345px);
  height:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:.78;
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.12) 2.5%,
    rgba(0,0,0,.60) 5.5%,
    #000 10%,
    #000 90%,
    rgba(0,0,0,.60) 95%,
    rgba(0,0,0,.12) 97.5%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.12) 2.5%,
    rgba(0,0,0,.60) 5.5%,
    #000 10%,
    #000 90%,
    rgba(0,0,0,.60) 95%,
    rgba(0,0,0,.12) 97.5%,
    transparent 100%
  );
}

.music-staff{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 0 10px rgba(240,217,166,.12)) drop-shadow(0 0 24px rgba(200,152,60,.06));
}
.music-staff .staff-lines path{
  stroke-width:1.45px;
  opacity:.82;
}

.music-note{
  position:absolute;
  z-index:2;
  display:block;
  color:#F0D9A6;
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",serif;
  font-weight:400;
  line-height:1;
  text-shadow:
    0 0 5px rgba(255,255,255,.26),
    0 0 12px rgba(240,217,166,.25),
    0 0 24px rgba(200,152,60,.14);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.40));
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  opacity:var(--o,.82);
  font-size:var(--s,34px);
}

/* Posições independentes: as notas preservam forma/proporção mesmo que a
   altura total do site mude. A pauta, por ser vetorial e com non-scaling-stroke,
   mantém espessura constante. */
.note-01{left:62%;top:6%;--s:38px;--r:-12deg;--o:.54}
.note-02{left:42%;top:12%;--s:46px;--r:8deg;--o:.84}
.note-03{left:31%;top:18%;--s:32px;--r:-8deg;--o:.72}
.note-04{left:54%;top:24%;--s:37px;--r:12deg;--o:.68}
.note-05{left:68%;top:30%;--s:49px;--r:-7deg;--o:.88}
.note-06{left:41%;top:36%;--s:33px;--r:11deg;--o:.66}
.note-07{left:24%;top:42%;--s:43px;--r:-13deg;--o:.80}
.note-08{left:49%;top:48%;--s:35px;--r:7deg;--o:.65}
.note-09{left:71%;top:54%;--s:38px;--r:-9deg;--o:.76}
.note-10{left:56%;top:60%;--s:47px;--r:10deg;--o:.86}
.note-11{left:30%;top:66%;--s:31px;--r:-10deg;--o:.66}
.note-12{left:39%;top:72%;--s:37px;--r:12deg;--o:.70}
.note-13{left:66%;top:78%;--s:46px;--r:-8deg;--o:.82}
.note-14{left:52%;top:84%;--s:33px;--r:9deg;--o:.67}
.note-15{left:28%;top:89%;--s:42px;--r:-12deg;--o:.74}
.note-16{left:47%;top:94%;--s:31px;--r:8deg;--o:.50}

/* Conteúdo sempre acima do ornamento. */
.services-layout,
.about-inner,
.artists-shell,
.contact-shell{
  position:relative;
  z-index:2;
}

@media(max-width:1180px){
  .page-music-border{
    left:-52px;
    width:clamp(190px,21vw,285px);
    opacity:.68;
  }
}
@media(max-width:900px){
  .page-music-border{
    left:-58px;
    width:clamp(150px,22vw,220px);
    opacity:.54;
  }
  .music-staff .staff-lines path{stroke-width:1.25px}
  .music-note{font-size:calc(var(--s,34px) * .82)}
}
@media(max-width:760px){
  .page-music-border{
    left:-52px;
    width:clamp(118px,27vw,175px);
    opacity:.40;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);
  }
  .music-staff .staff-lines path{stroke-width:1.05px}
  .music-note{font-size:calc(var(--s,34px) * .66);text-shadow:0 0 8px rgba(240,217,166,.18)}
}
@media(max-width:440px){
  .page-music-border{
    left:-46px;
    width:112px;
    opacity:.32;
  }
  .music-note{font-size:calc(var(--s,34px) * .56)}
}


/* ─── v006 | Mais notas no ornamento musical lateral ───
   A pauta vetorial da v005 é preservada; apenas aumentamos significativamente
   a densidade das notas para aproximar o ornamento da referência original. */
.note-17{left:54%;top:8.8%;--s:26px;--r:13deg;--o:.66}
.note-18{left:73%;top:15.2%;--s:31px;--r:-11deg;--o:.72}
.note-19{left:48%;top:21.2%;--s:36px;--r:8deg;--o:.78}
.note-20{left:26%;top:27.1%;--s:25px;--r:-9deg;--o:.61}
.note-21{left:57%;top:33.0%;--s:29px;--r:11deg;--o:.70}
.note-22{left:31%;top:38.9%;--s:38px;--r:-12deg;--o:.80}
.note-23{left:65%;top:44.9%;--s:27px;--r:7deg;--o:.67}
.note-24{left:37%;top:50.8%;--s:34px;--r:-8deg;--o:.76}
.note-25{left:62%;top:56.7%;--s:25px;--r:12deg;--o:.62}
.note-26{left:34%;top:62.6%;--s:39px;--r:-10deg;--o:.82}
.note-27{left:71%;top:68.4%;--s:28px;--r:8deg;--o:.69}
.note-28{left:45%;top:74.3%;--s:35px;--r:-9deg;--o:.78}
.note-29{left:24%;top:80.1%;--s:27px;--r:12deg;--o:.65}
.note-30{left:59%;top:86.0%;--s:40px;--r:-7deg;--o:.80}
.note-31{left:39%;top:91.8%;--s:25px;--r:9deg;--o:.58}
.note-32{left:68%;top:10.4%;--s:22px;--r:-6deg;--o:.56}
.note-33{left:23%;top:16.7%;--s:30px;--r:12deg;--o:.70}
.note-34{left:67%;top:26.0%;--s:33px;--r:-10deg;--o:.73}
.note-35{left:29%;top:34.8%;--s:23px;--r:8deg;--o:.60}
.note-36{left:73%;top:41.0%;--s:29px;--r:-11deg;--o:.67}
.note-37{left:34%;top:58.6%;--s:32px;--r:10deg;--o:.73}
.note-38{left:61%;top:70.6%;--s:24px;--r:-9deg;--o:.61}
.note-39{left:31%;top:82.6%;--s:31px;--r:11deg;--o:.72}
.note-40{left:68%;top:96.1%;--s:23px;--r:-8deg;--o:.42}


/* ─── v007 | Mais notas no ornamento lateral ───
   Aumentamos novamente a densidade para aproximar ainda mais da referência,
   preservando a pauta e evitando concentração excessiva em um único trecho. */
.note-41{left:19%;top:6.1%;--s:24px;--r:-12deg;--o:.52}
.note-42{left:61%;top:12.4%;--s:28px;--r:10deg;--o:.65}
.note-43{left:35%;top:18.5%;--s:32px;--r:-8deg;--o:.71}
.note-44{left:74%;top:23.9%;--s:21px;--r:13deg;--o:.55}
.note-45{left:52%;top:29.4%;--s:26px;--r:-9deg;--o:.63}
.note-46{left:21%;top:36.2%;--s:34px;--r:11deg;--o:.74}
.note-47{left:69%;top:40.8%;--s:27px;--r:-7deg;--o:.61}
.note-48{left:43%;top:46.3%;--s:24px;--r:12deg;--o:.58}
.note-49{left:18%;top:53.5%;--s:22px;--r:-10deg;--o:.49}
.note-50{left:56%;top:60.0%;--s:36px;--r:9deg;--o:.77}
.note-51{left:27%;top:66.1%;--s:25px;--r:-11deg;--o:.60}
.note-52{left:72%;top:72.4%;--s:30px;--r:8deg;--o:.69}
.note-53{left:47%;top:78.3%;--s:33px;--r:-9deg;--o:.74}
.note-54{left:22%;top:84.8%;--s:26px;--r:11deg;--o:.60}
.note-55{left:63%;top:90.2%;--s:23px;--r:-8deg;--o:.53}
.note-56{left:41%;top:94.4%;--s:29px;--r:12deg;--o:.46}


/* ─── v008 | Ornamento musical sempre abaixo do conteúdo ───
   O enfeite lateral continua visível como elemento de background, mas agora
   fica permanentemente abaixo de cards, imagens e blocos de conteúdo. */
main > section{
  position:relative;
  z-index:1;
}

.page-music-border{
  z-index:0;
}

/* Camadas de conteúdo sobem um nível adicional por segurança, garantindo que
   qualquer card, foto ou painel permaneça acima do ornamento. */
.services-layout,
.about-inner,
.artists-shell,
.contact-shell,
.services-sticky,
.services-grid,
.service-card,
.about-portrait,
.about-copy,
.artist-feature,
.artist-photo,
.artist-copy,
.artist-join,
.contact-brand,
.contact-grid,
.contact-card,
.site-footer{
  position:relative;
  z-index:2;
}


/* ─── v009 | Reposicionamento do ornamento no mobile ───
   Apenas na versão para celular, o ornamento sai mais da borda e vai mais
   para o centro visual do site, continuando sempre atrás do conteúdo e acima
   apenas do background. */
@media(max-width:760px){
  .page-music-border{
    left:10px;
    width:clamp(132px, 31vw, 188px);
    opacity:.26;
  }
}

@media(max-width:440px){
  .page-music-border{
    left:8px;
    width:clamp(118px, 34vw, 150px);
    opacity:.22;
  }
}


/* ─── v010 | Ornamento mobile um pouco mais centralizado ─── */
@media(max-width:760px){
  .page-music-border{
    left:34px;
  }
}

@media(max-width:440px){
  .page-music-border{
    left:28px;
  }
}


/* ─── v011 | Hero centralizada somente no mobile ───
   Centraliza conteúdo, CTA e o enquadramento visual do background da hero
   sem alterar a versão desktop/tablet. */
@media(max-width:760px){
  .hero-inner{
    text-align:center;
    justify-items:center;
  }

  .hero-copy{
    width:min(100%, 560px);
    margin-inline:auto;
    text-align:center;
  }

  .hero-eyebrow{
    justify-content:center;
    width:100%;
  }

  .hero-subtitle{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .hero-btn-wrap,
  .hero .hero-btn-wrap{
    display:block;
    width:100%;
    text-align:center;
  }

  .hero-btn{
    margin-inline:auto;
  }

  .hero-visual{
    margin-inline:auto;
    justify-content:center;
  }

  /* A arte do bg tem maior peso visual no lado esquerdo do arquivo original.
     Este enquadramento traz esse conjunto de notas para o centro perceptivo
     da tela do celular, mantendo as camadas de overlay perfeitamente centradas. */
  .hero-bg{
    background-position:center center, center center, 35% center;
  }

  .hero-depth-left{
    left:50%;
    transform:translateX(-50%);
  }
}


/* ─── v012 | Otimização de entrega de imagens ───
   Imagens responsivas em AVIF com fallback WebP. O elemento <picture> é
   neutro no layout e preserva integralmente as regras visuais existentes. */
picture{display:block}

/* Background específico para mobile: mesma composição/proporção do arquivo
   original, apenas com dimensão de transferência menor. */
@media(max-width:760px){
  .hero-bg{
    background-image:
      linear-gradient(90deg,rgba(11,11,11,.72) 0%,rgba(11,11,11,.48) 38%,rgba(26,26,26,.28) 62%,rgba(11,11,11,.62) 100%),
      linear-gradient(180deg,rgba(11,11,11,.10) 0%,rgba(31,31,35,.08) 48%,rgba(11,11,11,.74) 100%),
      url('../images/bg-hero-960.webp');
    background-image:
      linear-gradient(90deg,rgba(11,11,11,.72) 0%,rgba(11,11,11,.48) 38%,rgba(26,26,26,.28) 62%,rgba(11,11,11,.62) 100%),
      linear-gradient(180deg,rgba(11,11,11,.10) 0%,rgba(31,31,35,.08) 48%,rgba(11,11,11,.74) 100%),
      image-set(
        url('../images/bg-hero-960.avif') type('image/avif'),
        url('../images/bg-hero-960.webp') type('image/webp')
      );
    background-position:center center,center center,35% center;
  }
}

/* v012 sizing robustness: width/height HTML hints reserve space without overriding existing visual ratios. */
.about-portrait img,.artist-photo img{height:auto}
