:root{
  --ink:#15120F; --ink2:#211A15; --brown:#5B3828; --terracota:#A85F3A;
  --caramelo:#C78A55; --dourado:#D4A461; --bege:#EDE2D0; --offwhite:#F7F1E7;
  --display:"Oswald",system-ui,sans-serif;--tw:600;
  /* tipografia dos títulos de página — a mesma em todo o site */
  --titulo:"Rye","Oswald",system-ui,serif;
  --sans:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1320px; --soft:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bege);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
::selection{background:rgba(212,164,97,.3);color:var(--offwhite)}
:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:640px){.wrap{padding:0 32px}}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- HEADER ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:40;transition:all .5s var(--soft);border-bottom:1px solid transparent}
.hdr.on{background:rgba(21,18,15,.93);border-bottom-color:rgba(212,164,97,.14)}
.hdr .bar{display:flex;align-items:center;justify-content:space-between;height:86px;transition:height .5s var(--soft)}
.hdr.on .bar{height:68px}
.logo{display:inline-flex;align-items:center;gap:12px}
.badge{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(212,164,97,.5);
  box-shadow:inset 0 0 0 3px rgba(21,18,15,.9),inset 0 0 0 4px rgba(212,164,97,.22),0 0 22px -8px rgba(212,164,97,.8);transition:border-color .3s}
.logo:hover .badge{border-color:var(--dourado)}
.badge b{font-family:var(--display);font-weight:var(--tw);font-size:15px;color:var(--dourado);letter-spacing:.02em}
.logo .txt{display:none;line-height:1}
@media(min-width:640px){.logo .txt{display:block}}
.logo .txt b{display:block;font-family:var(--display);font-weight:var(--tw);font-size:15px;letter-spacing:.16em;color:var(--offwhite)}
.logo .txt span{display:block;margin-top:4px;font-size:8px;letter-spacing:.34em;text-transform:uppercase;color:rgba(237,226,208,.45)}
.nav{display:none}
@media(min-width:1024px){.nav{display:block}}
.nav ul{display:flex;align-items:center;gap:36px;list-style:none}
.nav a{position:relative;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(237,226,208,.7);transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:-8px;height:1px;width:0;background:var(--dourado);transition:width .3s}
.nav a:hover{color:var(--offwhite)}
.nav a:hover::after{width:100%}
.nav a.active{color:var(--dourado)}
.nav a.active::after{width:100%}
.hdr-right{display:flex;align-items:center;gap:12px}
.btn-ouvir{display:none;align-items:center;gap:8px;border:1px solid rgba(212,164,97,.45);border-radius:999px;padding:10px 20px;
  background:none;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--dourado);cursor:pointer;transition:background .25s}
@media(min-width:640px){.btn-ouvir{display:inline-flex}}
.btn-ouvir:hover{background:rgba(212,164,97,.1)}
.burger{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:50%;color:rgba(237,226,208,.85);cursor:pointer}
@media(min-width:1024px){.burger{display:none}}
.burger:hover{color:var(--dourado)}
.mobmenu{position:fixed;inset:0;z-index:50;background:rgba(21,18,15,.99);display:none;flex-direction:column}
.mobmenu.open{display:flex}
.mobmenu .top{display:flex;align-items:center;justify-content:space-between;height:86px;padding:0 20px}
@media(min-width:640px){.mobmenu .top{padding:0 32px}}
.mobmenu ul{list-style:none;padding:24px 28px}
.mobmenu li{border-bottom:1px solid rgba(237,226,208,.08)}
.mobmenu li a{display:flex;align-items:baseline;gap:16px;padding:20px 0}
.mobmenu li i{font-style:normal;font-size:10px;letter-spacing:.2em;color:rgba(212,164,97,.55)}
.mobmenu li b{font-family:var(--display);font-weight:var(--tw);font-size:28px;line-height:1;color:var(--offwhite)}
.mobcta{margin:36px 28px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:16px;
  background:linear-gradient(180deg,var(--caramelo),var(--terracota));color:var(--ink);font-size:11px;letter-spacing:.26em;text-transform:uppercase;cursor:pointer}

/* ---------- HERO (centralizado, efeito cinema) ---------- */
.hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:100svh;width:100%;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:0;transform:scale(1.1)}
.hero.play .hero-img{animation:settle 5s var(--soft) .2s forwards}
@keyframes settle{to{transform:scale(1)}}
.hero-img img,.hero-img video{width:100%;height:100%;object-fit:cover;object-position:60% center}
/* o vídeo cobre a foto; se o arquivo não existir, a foto continua aparecendo */
.hero-img video{position:absolute;inset:0;z-index:1}
.hero-img img{position:absolute;inset:0;z-index:0}
@media(prefers-reduced-motion:reduce){.hero-img video{display:none}}
.hero-ov1,.hero-ov2{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-ov1{background:radial-gradient(120% 92% at 50% 44%,rgba(21,18,15,.4) 0%,rgba(21,18,15,.76) 46%,rgba(21,18,15,.96) 100%)}
.hero-ov2{background:linear-gradient(180deg,rgba(21,18,15,.8) 0%,rgba(21,18,15,.08) 26%,rgba(21,18,15,.2) 58%,rgba(21,18,15,.93) 100%)}
/* tarjas de cinema + fade do preto */
.hero .band{position:absolute;left:0;right:0;z-index:6;height:50%;background:#080705;pointer-events:none}
.hero .band.t{top:0}.hero .band.b{bottom:0}
.hero.play .band.t,.hero.play .band.b{animation:bandOut 1.5s var(--soft) .2s forwards}
@keyframes bandOut{from{height:50%}to{height:0}}
.hero .black{position:absolute;inset:0;z-index:7;background:#000;pointer-events:none}
.hero.play .black{animation:blackOut 1.5s var(--soft) .15s forwards}
@keyframes blackOut{to{opacity:0}}
.hero .beam{position:absolute;top:0;bottom:0;z-index:6;width:180px;pointer-events:none;opacity:0;mix-blend-mode:screen;
 background:linear-gradient(90deg,transparent,rgba(255,232,190,.5),transparent);filter:blur(14px)}
.hero.play .beam{animation:beam 1.5s cubic-bezier(.62,.02,.2,1) 1.35s}
@keyframes beam{0%{opacity:0;transform:translateX(-30vw)}18%{opacity:1}100%{opacity:0;transform:translateX(100vw)}}

.hero-in{position:relative;z-index:5;width:100%;text-align:center;padding:104px 20px 132px}
@media(min-width:640px){.hero-in{padding:112px 32px 140px}}
.hero .eyebrow{opacity:0;font-size:10.5px;letter-spacing:.5em;text-transform:uppercase;color:rgba(212,164,97,.85)}
.hero.play .eyebrow{animation:cine 1s var(--soft) 1.15s forwards}
@keyframes cine{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero h1{opacity:0;margin:26px auto 0;width:min(100%,1600px)}
.hero.play h1{animation:show .1s linear 1.35s forwards}
@keyframes show{to{opacity:1}}
.hero h1 .l{display:block;font-family:var(--titulo);font-weight:400;line-height:1.1;
 letter-spacing:0;white-space:nowrap;color:var(--offwhite);text-shadow:0 4px 60px rgba(0,0,0,.75);clip-path:inset(0 100% 0 0)}
.hero h1 .l2{margin-top:.1em;background:linear-gradient(100deg,#B9814A 0%,#FFE1AB 46%,#B9814A 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent}
.hero.play h1 .l1{animation:wipe 1.15s cubic-bezier(.62,.02,.2,1) 1.35s forwards}
.hero.play h1 .l2{animation:wipe 1.15s cubic-bezier(.62,.02,.2,1) 1.7s forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
/* no celular a frase inteira numa linha ficaria minúscula: ela quebra e cresce */
@media(max-width:699px){.hero h1 .l{white-space:normal;text-wrap:balance;font-size:clamp(1.5rem,6.9vw,2.3rem)!important;line-height:1.1}
 .hero h1 .l2{margin-top:.2em}}
.hero .sup{opacity:0;margin:30px auto 0;max-width:1150px;font-size:clamp(1rem,1.3vw,1.1875rem);line-height:1.62;
 color:rgba(237,226,208,.78);text-wrap:balance}
.hero.play .sup{animation:cine 1.2s var(--soft) 2.6s forwards}
.hero-ctas{opacity:0;margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero.play .hero-ctas{animation:cine 1s var(--soft) 2.95s forwards}
@media(prefers-reduced-motion:reduce){
 .hero .band,.hero .black,.hero .beam{display:none}
 .hero .eyebrow,.hero h1,.hero h1 .l,.hero .sup,.hero-ctas{opacity:1!important;clip-path:none!important;animation:none!important;transform:none!important}
 .hero-img{transform:none}
}

/* ---------- BOTÕES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;border:0;cursor:pointer;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;padding:16px 32px;transition:all .25s}
.btn-primary{background:linear-gradient(180deg,var(--caramelo),var(--terracota));color:var(--ink);box-shadow:0 18px 46px -20px rgba(199,138,85,1)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:rgba(21,18,15,.2);border:1px solid rgba(237,226,208,.3);color:rgba(237,226,208,.9);backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:var(--dourado);color:var(--dourado)}
.btn-sm{padding:12px 24px}
.ico{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- PÁGINAS INTERNAS ---------- */
.page{padding-top:112px}
@media(min-width:640px){.page{padding-top:144px}}
.back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(237,226,208,.5);transition:color .25s}
.back:hover{color:var(--dourado)}
.ph-eyebrow{margin-top:32px;font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:rgba(212,164,97,.75)}
.ph-title{margin-top:16px;font-family:var(--titulo);font-weight:400;font-size:clamp(2.125rem,4.4vw,3.2rem);line-height:1.02;color:var(--offwhite)}
.ph-intro{margin-top:24px;max-width:42rem;font-size:1.0625rem;line-height:1.75;color:rgba(237,226,208,.7)}
.rule{margin-top:40px;height:1px;background:linear-gradient(90deg,rgba(212,164,97,.45),rgba(212,164,97,.1),transparent)}
.grid3{display:grid;gap:24px;padding:56px 0}
@media(min-width:768px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid3{grid-template-columns:repeat(3,1fr)}}

/* ---------- CARD ---------- */
.card{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(237,226,208,.1);border-radius:12px;background:rgba(33,26,21,.5);transition:border-color .3s;opacity:0;transform:translateY(22px)}
.card.in{opacity:1;transform:none;transition:opacity .6s var(--soft),transform .6s var(--soft),border-color .3s}
.card:hover{border-color:rgba(212,164,97,.35)}
.card .cover{position:relative;aspect-ratio:1;overflow:hidden;display:block}
.card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--soft)}
.card:hover .cover img{transform:scale(1.04)}
.card .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,18,15,.85),transparent 60%)}
.card .body{display:flex;flex-direction:column;flex:1;padding:24px}
.card .date{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(212,164,97,.65)}
.card h3{margin-top:8px;font-family:var(--display);font-weight:var(--tw);font-size:1.35rem;line-height:1.22;color:var(--offwhite)}
.card h3 a:hover{color:var(--dourado)}
.card p{margin-top:12px;flex:1;font-size:.9375rem;line-height:1.65;color:rgba(237,226,208,.6)}
.card .acts{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.link-sm{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(237,226,208,.55);transition:color .25s}
.link-sm:hover{color:var(--dourado)}

/* ---------- COUNTDOWN ---------- */
.count{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(212,164,97,.18);margin-top:48px}
.count>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:26% center;filter:brightness(1.45) saturate(1.1)}
.count .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,18,15,.5),rgba(21,18,15,.86) 34%,rgba(21,18,15,.95))}
.count .in{position:relative;padding:48px 24px}
@media(min-width:640px){.count .in{padding:64px 48px}}
.count h2{margin-top:16px;font-family:var(--display);font-weight:var(--tw);font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15;color:var(--offwhite)}
.count p{margin-top:12px;max-width:32rem;font-size:.9375rem;line-height:1.65;color:rgba(237,226,208,.6)}
.cells{margin-top:36px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:36rem}
@media(min-width:640px){.cells{grid-template-columns:repeat(4,1fr);gap:20px}}
.cell{border:1px solid rgba(212,164,97,.2);border-radius:12px;background:rgba(21,18,15,.55);padding:20px 16px;text-align:center;backdrop-filter:blur(3px)}
.cell b{display:block;font-family:var(--display);font-weight:var(--tw);font-size:clamp(1.75rem,3.6vw,2.45rem);line-height:1;color:var(--dourado);font-variant-numeric:tabular-nums}
.cell span{display:block;margin-top:8px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(237,226,208,.5)}
/* ---------- CONTEÚDO ---------- */
.sec-title{font-family:var(--display);font-weight:var(--tw);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;color:var(--offwhite)}
.gold-title{font-family:var(--display);font-weight:var(--tw);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.2;color:var(--dourado)}
.prose{margin-top:16px;font-size:1.0625rem;line-height:1.75;color:rgba(237,226,208,.7)}
.prose p+p{margin-top:20px}
.cols{display:grid;gap:48px;padding:56px 0}
@media(min-width:1024px){.cols{grid-template-columns:1.15fr .85fr;gap:56px}}
.blocks{display:grid;gap:36px}
@media(min-width:640px){.blocks{grid-template-columns:repeat(2,1fr)}}
figure.ph{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(237,226,208,.1);aspect-ratio:4/5}
figure.ph img{width:100%;height:100%;object-fit:cover}
.panel{border:1px solid rgba(212,164,97,.2);border-radius:16px;background:rgba(33,26,21,.45);padding:28px}
.cta-box{margin-top:80px;border:1px solid rgba(212,164,97,.2);border-radius:16px;background:rgba(33,26,21,.45);padding:48px 28px;text-align:center}
@media(min-width:640px){.cta-box{padding:48px 56px}}
.cta-box h2{margin:20px auto 0;max-width:40rem;font-family:var(--display);font-weight:var(--tw);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;color:var(--offwhite)}
.timeline{margin-top:48px;display:flex;flex-direction:column;gap:32px;border-left:1px solid rgba(212,164,97,.25);padding-left:28px;list-style:none}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-34px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--dourado);box-shadow:0 0 14px rgba(212,164,97,.9)}
.timeline h3{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(212,164,97,.8)}
.timeline p{margin-top:8px;font-size:1.0625rem;line-height:1.75;color:rgba(237,226,208,.7)}
.bio-hero{position:relative;min-height:86svh;overflow:hidden;display:flex;align-items:flex-end}
.bio-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.bio-hero .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,18,15,.82),rgba(21,18,15,.3) 34%,rgba(21,18,15,.72) 74%,rgba(21,18,15,.99))}
.bio-hero .in{position:relative;width:100%;padding:112px 0 64px}
.bio-hero h1{margin-top:20px;font-family:var(--titulo);font-weight:400;font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.04;color:var(--offwhite)}
.tags{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tags li{border:1px solid rgba(237,226,208,.15);border-radius:999px;padding:6px 14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,226,208,.5)}
dl.credits{margin-top:16px;display:flex;flex-direction:column;gap:12px}
dl.credits div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(237,226,208,.08);padding-bottom:12px}
dl.credits dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,226,208,.45)}
dl.credits dd{font-size:.9375rem;color:var(--offwhite);text-align:right}
.lyrics{margin-top:16px;white-space:pre-line;font-size:1.0625rem;line-height:2;color:rgba(237,226,208,.75)}
.field{width:100%;border:1px solid rgba(237,226,208,.15);border-radius:8px;background:rgba(33,26,21,.5);padding:14px 16px;font-size:1rem;color:var(--offwhite)}
.field::placeholder{color:rgba(237,226,208,.3)}
.field:focus{outline:none;border-color:rgba(212,164,97,.6);box-shadow:0 0 0 1px rgba(212,164,97,.4)}
.lbl{display:flex;flex-direction:column;gap:8px}
.lbl span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(237,226,208,.5)}
.chan{display:flex;align-items:center;gap:16px;border:1px solid rgba(237,226,208,.1);border-radius:12px;background:rgba(33,26,21,.4);padding:16px 20px;transition:border-color .25s}
.chan:hover{border-color:rgba(212,164,97,.4)}
.chan .ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1px solid rgba(212,164,97,.3);color:var(--dourado)}

/* ---------- FOOTER ---------- */
/* Sem rodapé: o espaço para a barra fixa do player fica no próprio <main>.
   As páginas que são uma cena de tela cheia (Home e SINGLE) não precisam dele. */
main{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
body.cena main{padding-bottom:0}

/* ---------- GLOBAL PLAYER — Vitrola (capa elevada) ---------- */
#player{position:fixed;inset:auto 0 0 0;z-index:45;display:none;
  background:linear-gradient(180deg,rgba(33,26,21,.97),rgba(21,18,15,.99));
  border-top:1px solid rgba(212,164,97,.3);box-shadow:0 -22px 60px -34px rgba(212,164,97,.55)}
#player.show{display:block}
/* linha dourada de progresso colada no topo — clicável e navegável por teclado */
#player .topbar{position:absolute;left:0;right:0;top:-1px}
#player .topbar .bar{height:14px}
#player .topbar .track,#player .topbar .fill{top:1px;transform:none;height:2px;border-radius:0}
#player .topbar .track{background:rgba(237,226,208,.1)}
#player .topbar .fill{background:linear-gradient(90deg,var(--terracota),var(--dourado),#FFE1AB);
  box-shadow:0 0 14px rgba(212,164,97,.85)}
#player .topbar .knob{top:2px;transform:none}
#player .row{display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:0 auto;height:76px;padding:0 12px}
/* em telas bem estreitas o essencial é capa + título + play */
@media(max-width:479px){#player .ctrls .cbtn{display:none}.pl-id b{font-size:17px}}
@media(min-width:640px){#player .row{height:92px;gap:22px;padding:0 26px}}
.pl-art{position:relative;flex:none;width:62px;height:62px;margin-top:-22px;border-radius:9px;overflow:hidden;
  border:1px solid rgba(212,164,97,.5);background:none;padding:0;cursor:pointer;
  box-shadow:0 14px 32px -14px #000,0 0 34px -14px rgba(212,164,97,.75);transition:transform .3s var(--soft)}
@media(min-width:640px){.pl-art{width:78px;height:78px;margin-top:-30px;border-radius:10px}}
.pl-art:hover{transform:translateY(-3px)}
.pl-art img{width:100%;height:100%;object-fit:cover}
.pl-art::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 0%,rgba(255,225,171,.28),transparent 60%)}
.pl-id{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1}
.pl-id b{display:block;font-family:var(--display);font-weight:var(--tw);font-size:16px;line-height:1.15;color:var(--offwhite);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:640px){.pl-id b{font-size:18px}}
.pl-id span{display:block;margin-top:5px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(237,226,208,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-time{display:none;align-items:center;gap:8px;flex:none;font-size:11px;font-variant-numeric:tabular-nums;color:rgba(237,226,208,.6)}
@media(min-width:640px){.pl-time{display:flex}}
.pl-time i{font-style:normal;opacity:.4}
.pl-right{display:none}
@media(min-width:640px){.pl-right{display:block}}
.pl-mob{display:flex;align-items:center;gap:2px;flex:none}
@media(min-width:640px){.pl-mob{display:none}}
.ctrls{display:flex;align-items:center;gap:4px}
@media(min-width:640px){.ctrls{gap:8px}}
.cbtn{display:grid;place-items:center;width:36px;height:36px;border:0;background:none;border-radius:50%;
  color:rgba(237,226,208,.7);cursor:pointer;transition:color .25s}
.cbtn:hover{color:var(--dourado)}
.pbtn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(212,164,97,.7);
  background:radial-gradient(circle at 50% 30%,rgba(212,164,97,.4),rgba(168,95,58,.22));color:var(--dourado);cursor:pointer;
  box-shadow:0 0 34px -10px rgba(212,164,97,1);transition:all .25s}
@media(min-width:640px){.pbtn{width:52px;height:52px}}
.pbtn:hover{border-color:var(--dourado);color:var(--offwhite)}
.pbtn.lg{width:64px;height:64px}
.prog{display:flex;align-items:center;gap:12px;width:100%;min-width:0}
.prog .t{flex:none;width:40px;font-size:11px;font-variant-numeric:tabular-nums;color:rgba(237,226,208,.6)}
.prog .t.r{text-align:right}
.bar{position:relative;flex:1;min-width:0;height:24px;cursor:pointer}
.bar .track{position:absolute;inset:auto 0;top:50%;transform:translateY(-50%);height:3px;border-radius:2px;background:rgba(237,226,208,.15)}
.bar .fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:3px;border-radius:2px;background:linear-gradient(90deg,var(--caramelo),var(--dourado));width:0}
.bar .knob{position:absolute;top:50%;left:0;width:10px;height:10px;margin-left:-5px;transform:translateY(-50%);border-radius:50%;
  background:var(--dourado);box-shadow:0 0 12px rgba(212,164,97,.8);opacity:0;transition:opacity .2s}
.bar:hover .knob,.bar:focus-visible .knob{opacity:1}
.vol{display:flex;align-items:center;gap:8px;position:relative}
input[type=range]{-webkit-appearance:none;appearance:none;width:96px;height:4px;border-radius:999px;background:rgba(237,226,208,.2);cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--dourado);box-shadow:0 0 10px rgba(212,164,97,.7)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--dourado)}
.volpop{position:absolute;right:0;bottom:44px;display:flex;align-items:center;gap:8px;border:1px solid rgba(212,164,97,.25);
  border-radius:999px;background:rgba(33,26,21,.97);padding:8px 12px}
.volpop input[type=range]{width:80px}
#expanded{position:fixed;inset:0;z-index:60;background:rgba(21,18,15,.99);display:none;flex-direction:column}
#expanded.open{display:flex;animation:rise .35s var(--soft) both}
#expanded .top{display:flex;align-items:center;justify-content:space-between;padding:20px}
#expanded .mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:0 28px 48px}
#expanded .art{width:100%;max-width:300px;aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid rgba(212,164,97,.2);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
#expanded .art img{width:100%;height:100%;object-fit:cover}
#expanded h2{font-family:var(--display);font-weight:var(--tw);font-size:1.5rem;color:var(--offwhite);text-align:center}
#expanded .prog{max-width:28rem}
  border:1px solid rgba(212,164,97,.3);border-radius:999px;background:rgba(33,26,21,.97);
  padding:12px 18px;font-size:12px;line-height:1.4;color:rgba(237,226,208,.8);display:flex;align-items:center;gap:12px;box-shadow:0 20px 50px -20px #000}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------- retomada entre páginas ---------- */
.resume{position:fixed;left:50%;bottom:106px;transform:translateX(-50%);z-index:44;max-width:min(92vw,520px);
  display:none;align-items:center;gap:14px;border:1px solid rgba(212,164,97,.35);border-radius:999px;
  background:rgba(33,26,21,.98);padding:10px 12px 10px 18px;
  font-size:13px;color:rgba(237,226,208,.85);box-shadow:0 20px 50px -20px #000}
.resume.show{display:flex;animation:rise .4s var(--soft) both}
.resume b{color:var(--dourado)}
.resume .go{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:9px 18px;cursor:pointer;
  background:linear-gradient(180deg,var(--caramelo),var(--terracota));color:var(--ink);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.resume .x{border:0;background:none;color:rgba(237,226,208,.45);cursor:pointer;font-size:15px;line-height:1;padding:4px}
.song-grid{display:grid;gap:40px;grid-template-columns:1fr;margin-top:40px}
@media(min-width:900px){.song-grid{grid-template-columns:380px 1fr;gap:56px}
  .contato-grid{grid-template-columns:1.1fr .9fr!important}}
.contato-grid{display:grid;gap:48px;grid-template-columns:1fr}

/* =====================================================================
   PÁGINA SINGLE — “Varanda ao Entardecer”
   ---------------------------------------------------------------------
   Uma cena, não uma interface. A fotografia da varanda ocupa a tela
   inteira; o texto fica na madeira à esquerda, a capa vira um objeto
   físico apoiado na mesa (com vinil atrás e sombra projetada) e o
   player é uma tábua com ferragem de latão sobre a mesma mesa.
   Todos os controles usam os ganchos do player global (js/player.js):
   data-act, data-bar, data-cur, data-dur — o áudio continua sendo um só.
===================================================================== */
.varanda{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(720px,100svh,1020px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,11vh,132px) 0 clamp(26px,4vh,52px);background:#150f0a}
.va-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:-3}
/* O vídeo entra por cima da foto e aparece só quando já dá para tocar sem engasgo.
   Assim a cena nunca pisca: a foto segura o lugar e o movimento surge por cima. */
.va-vid{z-index:-2;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.va-vid.on{opacity:1}
@media(prefers-reduced-motion:reduce){.va-vid{display:none}}
.va-ceu{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,8,5,.82) 0%,rgba(12,8,5,.42) 14%,transparent 30%),
    linear-gradient(90deg,rgba(10,7,4,.9) 0%,rgba(10,7,4,.66) 26%,rgba(10,7,4,.12) 52%,transparent 68%),
    linear-gradient(0deg,rgba(10,7,4,.72) 0%,transparent 34%)}
.va-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);
  grid-template-areas:"head obj" "info obj";
  column-gap:clamp(18px,2.6vw,40px);row-gap:0;align-items:center}
.va-head{grid-area:head;align-self:end}
.va-info{grid-area:info;align-self:start}
.va-col{grid-area:obj}
@media(min-width:640px){.va-in{padding:0 32px}}

/* ---------- coluna de texto ---------- */
.va-head .back{margin-bottom:clamp(14px,2.4vh,26px)}
.va-kick{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--dourado);text-indent:.4em}
.va-h1{margin-top:10px;font-family:var(--titulo);font-weight:400;line-height:.92;
  font-size:clamp(3.2rem,7.4vw,5.6rem);letter-spacing:.02em;color:var(--offwhite);
  text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 60px rgba(255,180,90,.28)}
.va-h1 span{display:inline-block}
.va-rule{width:64px;height:1px;margin:clamp(18px,3vh,30px) 0;
  background:linear-gradient(90deg,rgba(212,164,97,.9),transparent)}
.va-faixa{font-family:var(--display);font-weight:500;font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(255,222,180,.75)}
.va-tit{margin-top:9px;font-family:var(--display);font-weight:var(--tw);line-height:1.04;
  font-size:clamp(1.9rem,3.6vw,2.9rem);color:#fff8ee;text-shadow:0 3px 20px rgba(10,6,3,.85)}
.va-data{margin-top:9px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(212,164,97,.9)}
.va-desc{margin-top:12px;max-width:23rem;font-size:.9375rem;line-height:1.7;
  color:rgba(240,228,212,.78);text-shadow:0 2px 12px rgba(10,6,3,.85)}
.va-acts{margin-top:clamp(16px,2.6vh,26px);display:flex;gap:11px;flex-wrap:wrap}
.b-ouvir,.b-det{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  border-radius:999px;padding:13px 22px;font-family:var(--display);font-weight:500;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;transition:.28s var(--soft)}
.b-ouvir{color:#2e1c0a;
  background:linear-gradient(150deg,#7d5a2e 0%,#d9b071 16%,#f8e8c2 34%,#c99a58 54%,#7d5a2e 76%,#d9b071 100%);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.42)}
.b-ouvir:hover{filter:brightness(1.07);transform:translateY(-1px)}
.b-det{color:#2b1b0c;background:linear-gradient(180deg,#ffffff,#f2ece2);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.9)}
.b-det:hover{filter:brightness(.96);transform:translateY(-1px)}
.va-nav{margin-top:clamp(14px,2.2vh,22px);display:flex;align-items:center;gap:10px;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(240,228,212,.5)}
.va-seta{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;cursor:pointer;
  border:1px solid rgba(245,235,220,.28);background:rgba(18,11,6,.34);color:rgba(245,235,220,.8);
  transition:.25s}
.va-seta:hover{border-color:var(--dourado);color:var(--dourado)}

/* ---------- objeto físico: capa + vinil + pilha ---------- */
.va-col{display:flex;flex-direction:column;align-items:flex-start;
  margin-top:clamp(0px,3vh,34px)}
.va-obj{position:relative;width:min(600px,100%);aspect-ratio:1/.98;perspective:1600px}
.va-capa{position:absolute;left:0;bottom:0;width:74%;aspect-ratio:1;border-radius:3px;overflow:hidden;z-index:3;
  transform:rotateY(-7deg) rotateX(1deg);transform-origin:100% 50%;
  box-shadow:0 40px 54px -22px rgba(0,0,0,.95),
             -14px 16px 40px -18px rgba(0,0,0,.9),
             inset 0 0 0 1px rgba(255,240,215,.18)}
.va-capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .7s var(--soft)}
.va-capa img.on{opacity:1}
.va-capa::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,226,180,.24),transparent 34%),
             linear-gradient(180deg,rgba(14,7,3,.66),rgba(14,7,3,.2) 38%,transparent 52%),
             linear-gradient(0deg,rgba(18,9,4,.66),transparent 40%)}
.va-tipo{position:absolute;left:0;right:0;top:16%;z-index:2;text-align:center;padding:0 9%;
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;color:#fdf3e2;
  text-shadow:0 2px 18px rgba(20,10,4,.9)}
.va-tipo b{display:block;font-weight:600;font-size:clamp(.62rem,1.35vw,.86rem);letter-spacing:.34em;
  text-transform:uppercase;opacity:.9}
.va-tipo i{display:block;margin-top:.24em;font-style:normal;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;font-size:clamp(1.25rem,2.9vw,1.95rem);line-height:1.06}
.va-gd{position:absolute;left:0;right:0;bottom:9%;z-index:2;text-align:center;
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(.8rem,1.5vw,1rem);
  letter-spacing:.3em;color:rgba(253,243,226,.92);text-shadow:0 2px 14px rgba(20,10,4,.9)}
/* vinil que sai por trás */
.va-disco{position:absolute;right:-16%;bottom:3%;width:68%;aspect-ratio:1;z-index:2;
  background:url("../images/cd-ouro.webp") center/contain no-repeat;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.92));
  will-change:transform;  /* camada própria: girar vira só composição, sem redesenhar a sombra */
  animation:va-gira 5.5s linear infinite;animation-play-state:paused}
.varanda.no-ar .va-disco{animation-play-state:running}
@keyframes va-gira{to{transform:rotate(360deg)}}
/* sombra na madeira */
.va-obj::after{content:"";position:absolute;left:2%;right:2%;bottom:-14px;height:34px;z-index:1;
  background:radial-gradient(50% 50% at 42% 50%,rgba(0,0,0,.72),transparent 72%);filter:blur(7px)}
/* ---------- tablet ---------- */
@media(max-width:1023px){
  .varanda{min-height:0;padding-top:clamp(104px,13vh,140px)}
  .va-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "obj" "info";
    row-gap:clamp(22px,4.5vw,38px)}
  .va-head,.va-info{max-width:640px;margin:0 auto;text-align:center;align-self:auto}
  .va-rule{display:none}
  .va-desc{margin-left:auto;margin-right:auto}
  .va-rule{margin-left:auto;margin-right:auto}
  .va-acts,.va-nav{justify-content:center}
  .va-col{align-items:center}
  .va-obj{width:min(520px,90vw);margin-right:16%}
  .va-ceu{background:
    linear-gradient(180deg,rgba(12,8,5,.9) 0%,rgba(12,8,5,.68) 18%,rgba(12,8,5,.42) 34%,rgba(12,8,5,.16) 48%,transparent 60%),
    linear-gradient(0deg,rgba(10,7,4,.84) 0%,rgba(10,7,4,.34) 26%,transparent 50%)}
}
/* ---------- celular ---------- */
@media(max-width:640px){
  .va-h1{font-size:clamp(2.8rem,15vw,3.6rem)}
  .va-obj{width:min(360px,92vw);margin-right:4%}
  .va-capa{width:70%}
  .va-disco{width:58%;right:-4%;bottom:-2%}
  .va-acts{flex-direction:column;width:100%}
  .va-acts .b-ouvir,.va-acts .b-det{width:100%;padding:15px 18px}
  .va-item b{font-size:.875rem}
}
@media(prefers-reduced-motion:reduce){.va-disco{animation:none!important}}

/* ==================================================================
   PÁGINA DO SINGLE (single-*.html)
   Reprodução do layout de referência: topo com foto e capa, três
   colunas (história, letra, ficha) e a faixa "Outras músicas".
   Tudo com prefixo .sg- para não afetar o resto do site.
   ================================================================== */
body.single-page{background:#120E0B}
.sg{
  --sg-bg:#120E0B; --sg-card:#1A130E; --sg-card2:#21170F;
  --sg-txt:#F1E5D3; --sg-txt2:#C7B9A8;
  --sg-ouro:#BE8747; --sg-ouro-esc:#8E5D2C; --sg-caramelo:#C47D3D;
  --sg-borda:rgba(190,135,71,.30);
  --sg-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  background:
    linear-gradient(180deg,#17110D 0%,#120E0B 40%,#150F0B 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px);
  color:var(--sg-txt)}
.sg-wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:640px){.sg-wrap{padding:0 32px}}

/* ---------- topo com a fotografia ---------- */
.sg-hero{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(78px,9vh,100px) 0 clamp(26px,4vh,44px)}
.sg-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 50%;z-index:-2}
.sg-hero-veu{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(9,6,4,.97) 0%,rgba(9,6,4,.9) 26%,rgba(9,6,4,.5) 52%,
                    rgba(9,6,4,.14) 74%,rgba(9,6,4,.42) 100%),
    linear-gradient(180deg,rgba(9,6,4,.72),transparent 24%),
    linear-gradient(0deg,rgba(9,6,4,.86),transparent 30%)}
.sg-volta{margin-bottom:clamp(14px,2vh,22px)}
.sg-hero-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(26px,3.6vw,58px);align-items:center}

/* capa como objeto, com o título impresso por cima */
.sg-capa{position:relative;aspect-ratio:1/1.05;border-radius:12px;overflow:hidden;
  box-shadow:0 34px 64px -26px rgba(0,0,0,.96),0 2px 0 rgba(255,231,196,.06),
             inset 0 0 0 1px rgba(255,231,196,.15)}
.sg-capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sg-capa::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,6,3,.44),transparent 34%,transparent 56%,rgba(10,6,3,.62))}
.sg-capa-tit{position:absolute;left:8%;right:8%;top:50%;transform:translateY(-54%);z-index:2;
  text-align:center;font-family:var(--sg-serif);font-weight:600;color:#F7EEDD;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.12;
  font-size:clamp(1.35rem,2.3vw,1.9rem);text-shadow:0 2px 18px rgba(12,7,3,.92)}
.sg-capa-gd{position:absolute;left:0;right:0;bottom:8%;z-index:2;text-align:center;
  font-family:var(--sg-serif);font-weight:600;font-size:.95rem;letter-spacing:.34em;
  color:rgba(247,238,221,.94);text-shadow:0 2px 14px rgba(12,7,3,.9)}

/* coluna de texto do topo */
.sg-data{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--sg-ouro)}
.sg-h1{margin-top:14px;font-family:var(--sg-serif);font-weight:600;line-height:1.02;
  font-size:clamp(2.3rem,4.5vw,3.6rem);color:#F6EBDA;letter-spacing:.005em}
.sg-fio{display:block;width:66px;height:1px;margin:20px 0;
  background:linear-gradient(90deg,var(--sg-ouro),rgba(190,135,71,0))}
.sg-sub{max-width:33rem;color:#DCCDB8;line-height:1.7;font-size:.9875rem}
.sg-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,3vh,30px)}
.sg-b{display:inline-flex;align-items:center;gap:10px;border-radius:999px;
  padding:13px 26px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;transition:filter .2s,border-color .2s}
.sg-b1{color:#2B1A0C;background:linear-gradient(180deg,#D9954E,#C47D3D);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.9)}
.sg-b1:hover{filter:brightness(1.07)}
.sg-b2{color:#E8DAC5;background:rgba(20,14,10,.62);border-color:rgba(190,135,71,.42)}
.sg-b2:hover{border-color:rgba(190,135,71,.75)}
.sg-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;list-style:none;padding:0}
.sg-chips li{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#CBBBA6;
  padding:8px 15px;border:1px solid rgba(190,135,71,.26);border-radius:999px}

/* ---------- as três colunas ---------- */
.sg-cols{display:grid;grid-template-columns:30fr 35fr 35fr;
  gap:clamp(16px,1.6vw,24px);padding:clamp(28px,3.4vw,44px) 0 0;align-items:stretch}
.sg-card{background:linear-gradient(180deg,#1A130E,#140F0B);
  border:1px solid var(--sg-borda);border-radius:12px;
  padding:clamp(20px,2.1vw,30px);
  box-shadow:inset 0 1px 0 rgba(255,231,196,.05)}
.sg-card-h{display:flex;align-items:center;gap:11px}
.sg-card-h h2{font-family:var(--sg-serif);font-weight:600;color:#F1E5D3;
  font-size:clamp(1.45rem,2vw,1.8rem);line-height:1}
.sg-card-h .ico{color:var(--sg-ouro);opacity:.9;flex:none}
.sg-card-fio{width:54px;height:1px;background:var(--sg-borda);margin:15px 0 20px}
.sg-corpo p{color:var(--sg-txt2);font-size:.86rem;line-height:1.9;margin:0 0 1.25em}
.sg-corpo p:last-child{margin-bottom:0}
.sg-letra{columns:2;column-gap:32px}
.sg-letra p{break-inside:avoid;margin:0 0 1.6em}
.sg-ficha{display:block;margin:0}
.sg-ficha div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:6.5px 0;border-bottom:1px solid rgba(190,135,71,.11)}
.sg-ficha div:last-child{border-bottom:0}
.sg-ficha dt{color:var(--sg-ouro);font-size:.78rem;white-space:nowrap}
.sg-ficha dd{margin:0;color:var(--sg-txt);font-size:.78rem;text-align:right}

/* ---------- outras músicas ---------- */
.sg-outras{padding:clamp(38px,4.6vw,62px) 0 clamp(28px,4vw,46px)}
.sg-outras-h{display:flex;align-items:center;gap:22px;margin-bottom:clamp(18px,2.4vw,28px)}
.sg-outras-h h2{font-family:var(--sg-serif);font-weight:600;color:#F1E5D3;
  font-size:clamp(1.55rem,2.4vw,2.05rem);line-height:1;white-space:nowrap}
.sg-outras-h span{flex:1;height:1px;background:linear-gradient(90deg,var(--sg-borda),rgba(190,135,71,0))}
.sg-carr{position:relative}
.sg-trilho{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(228px,1fr);
  gap:clamp(12px,1.3vw,20px);overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px}
.sg-trilho::-webkit-scrollbar{display:none}
.sg-m{display:flex;flex-direction:column;scroll-snap-align:start;overflow:hidden;
  background:#160F0B;border:1px solid rgba(142,93,44,.34);border-radius:11px;
  transition:border-color .25s}
.sg-m:hover{border-color:rgba(190,135,71,.6)}
.sg-m>img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.sg-m-in{display:flex;flex-direction:column;gap:7px;flex:1;padding:15px 16px 17px}
.sg-m-in h3{font-family:var(--sg-serif);font-weight:600;color:#EFE2CE;
  font-size:1.15rem;line-height:1.15}
.sg-m-in p{font-size:.775rem;line-height:1.62;color:var(--sg-txt2)}
.sg-m-acts{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:10px}
.sg-ouvir{display:inline-flex;align-items:center;gap:7px;border-radius:6px;
  padding:8px 13px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#EEDCC2;background:rgba(196,125,61,.14);border:1px solid rgba(190,135,71,.4);
  cursor:pointer;transition:filter .2s}
.sg-ouvir:hover{filter:brightness(1.25)}
.sg-det{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#B49A7C;transition:color .2s}
.sg-det:hover{color:var(--sg-ouro)}
.sg-seta{position:absolute;top:38%;z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#D8C6AC;
  border:1px solid var(--sg-borda);background:rgba(16,11,8,.86);
  transition:border-color .2s,color .2s}
.sg-seta:hover{border-color:rgba(190,135,71,.7);color:var(--sg-ouro)}
.sg-seta.p{left:-19px} .sg-seta.n{right:-19px}
.sg-seta[hidden]{display:none}

/* ---------- tablet ---------- */
@media(max-width:1180px){
  .sg-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sg-c-letra{grid-column:1/-1;order:3}
  .sg-seta.p{left:-6px} .sg-seta.n{right:-6px}
}
@media(max-width:900px){
  .sg-hero-grid{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,34px);justify-items:center;text-align:center}
  .sg-capa{width:min(320px,74vw)}
  .sg-fio{margin-left:auto;margin-right:auto}
  .sg-sub{margin-left:auto;margin-right:auto}
  .sg-acts,.sg-chips{justify-content:center}
  .sg-hero-bg{object-position:center 46%}
  .sg-hero-veu{background:
    linear-gradient(180deg,rgba(9,6,4,.86) 0%,rgba(9,6,4,.6) 26%,rgba(9,6,4,.5) 60%,rgba(9,6,4,.9) 100%)}
}
/* ---------- celular ---------- */
@media(max-width:760px){
  .sg-cols{grid-template-columns:minmax(0,1fr)}
  .sg-c-letra{order:0}
  .sg-letra{columns:1}
  .sg-seta{display:none}
  .sg-trilho{grid-auto-columns:minmax(78vw,1fr);width:100%}
}

/* ==================================================================
   PÁGINA SOBRE — reconstrução do layout de referência.
   Prefixo .sb- para não afetar as outras páginas.
   ================================================================== */
body.sobre-page{background:#100D0A}
.sb{
  --sb-bg:#100D0A; --sb-bg2:#17120E; --sb-bg3:#1C160F;
  --sb-txt:#F4EEE4; --sb-txt2:#B9AEA0;
  --sb-ouro:#C88B45; --sb-ouro-cl:#D49A55; --sb-ouro-es:#B87838;
  --sb-linha:rgba(196,139,73,.25);
  --sb-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  color:var(--sb-txt);
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(200,139,69,.05),transparent 60%),
    linear-gradient(180deg,#100D0A 0%,#17120E 42%,#100D0A 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.011) 0 2px,transparent 2px 9px)}
.sb-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}
@media(min-width:900px){.sb-wrap{padding:0 40px}}

/* ---------- hero ---------- */
.sb-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(430px,64vh,660px);display:flex;align-items:center;
  padding:clamp(96px,12vh,132px) 0 clamp(40px,6vh,72px)}
.sb-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:60% 46%;z-index:-2}
/* o texto do hero é centralizado, então o véu também: um escurecimento
   no miolo, e não mais uma cortina vinda da esquerda. O lampião e o
   microfone, que são o encanto da foto, continuam aparecendo. */
.sb-hero-veu{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 76% at 50% 50%,rgba(10,8,6,.88) 0%,
                    rgba(10,8,6,.6) 46%,rgba(10,8,6,.12) 78%,transparent 100%),
    linear-gradient(90deg,rgba(10,8,6,.8) 0%,rgba(10,8,6,.3) 26%,
                    rgba(10,8,6,.16) 62%,rgba(10,8,6,.34) 100%),
    linear-gradient(180deg,rgba(10,8,6,.72),transparent 26%),
    linear-gradient(0deg,rgba(10,8,6,.9),transparent 30%)}
/* ---- hero centralizado ---- */
.sb-hero .sb-wrap{text-align:center;display:flex;flex-direction:column;
  align-items:center}
.sb-kick{font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--sb-ouro)}
.sb-h1{margin-top:6px;font-family:var(--titulo);font-weight:400;line-height:.98;
  font-size:clamp(3.4rem,8vw,6.2rem);color:#F7F1E7;letter-spacing:.004em}
.sb-lead{margin-top:clamp(14px,2vh,22px);max-width:34rem;font-size:1.0125rem;
  line-height:1.72;color:#DCD1C2}
.sb-hero .sb-lead{margin-left:auto;margin-right:auto}
/* ornamento: linha — losango — linha */
.sb-orn{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,3.4vh,34px);
  max-width:26rem;color:var(--sb-ouro)}
.sb-hero .sb-orn{width:100%;margin-left:auto;margin-right:auto}
.sb-orn i{flex:1;height:1px;background:linear-gradient(90deg,rgba(196,139,73,0),var(--sb-linha))}
.sb-orn i+i{background:linear-gradient(90deg,var(--sb-linha),rgba(196,139,73,0))}
.sb-orn .ico{flex:none;opacity:.9}

/* ---------- pilares + foto ---------- */
.sb-corpo{padding:clamp(44px,6vw,80px) 0 clamp(30px,4vw,52px)}
.sb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(30px,4vw,64px);align-items:start}
.sb-pilares{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.4vw,52px) clamp(24px,3vw,44px)}
.sb-p h2{display:flex;align-items:center;gap:11px;font-family:var(--sb-serif);
  font-weight:600;font-size:clamp(1.35rem,2vw,1.7rem);color:var(--sb-ouro-cl);line-height:1}
.sb-p h2 .ico{color:var(--sb-ouro);flex:none}
.sb-p p{margin-top:14px;font-size:.845rem;line-height:1.92;color:var(--sb-txt2)}
.sb-p+.sb-p{position:relative}

/* foto do homem, com a frase editorial por cima */
.sb-foto{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--sb-linha);
  box-shadow:0 36px 70px -30px rgba(0,0,0,.95)}
.sb-foto img{display:block;width:100%;height:auto;aspect-ratio:1/1.06;object-fit:cover}
.sb-foto figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,3vw,32px) clamp(18px,2.6vw,30px) clamp(16px,2.4vw,26px);
  background:linear-gradient(0deg,rgba(9,7,5,.92) 12%,rgba(9,7,5,.55) 52%,transparent)}
.sb-foto figcaption p{font-family:var(--sb-serif);font-style:italic;font-weight:600;
  font-size:clamp(1.05rem,1.7vw,1.32rem);line-height:1.32;color:#F3E9D9}
.sb-foto figcaption .sb-orn{margin:12px auto 0;max-width:120px}

/* ---------- cartão de chamada ---------- */
.sb-cta{position:relative;overflow:hidden;margin-top:clamp(34px,4.6vw,64px);
  border:1px solid rgba(190,130,60,.25);border-radius:14px;
  background:linear-gradient(180deg,#1C160F,#151009);
  padding:clamp(34px,4.6vw,58px) clamp(22px,4vw,56px);text-align:center}
.sb-cta-kick{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--sb-ouro)}
.sb-cta h2{margin-top:16px;font-family:var(--sb-serif);font-weight:600;
  font-size:clamp(1.6rem,3.1vw,2.4rem);line-height:1.24;color:#F4EEE4;
  max-width:38rem;margin-left:auto;margin-right:auto}
.sb-cta h2 em{font-style:normal;color:var(--sb-ouro-cl)}
.sb-cta-btn{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(22px,3vw,34px);
  border-radius:999px;padding:16px 34px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#FBF3E7;border:1px solid rgba(255,214,164,.3);
  background:linear-gradient(180deg,#CC7D47,#9C512C);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.9);
  transition:transform .2s var(--soft),box-shadow .2s var(--soft),filter .2s}
.sb-cta-btn:hover{transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 18px 40px -16px rgba(204,125,71,.55)}
.sb-notas{position:absolute;right:clamp(10px,2vw,34px);bottom:-6px;z-index:0;
  color:rgba(210,150,80,.12);pointer-events:none}
.sb-notas svg{width:clamp(120px,16vw,190px);height:auto;display:block}

/* ---------- faixa clara do versículo ---------- */
.sb-faixa{position:relative;isolation:isolate;margin-top:clamp(40px,5.4vw,74px);overflow:hidden;
  background:linear-gradient(100deg,#E8DBC7 0%,#E3D5BF 52%,#D9C9AF 100%)}
.sb-faixa-in{position:relative;z-index:2;display:flex;align-items:center;
  min-height:clamp(150px,17vw,190px);max-width:56%}
.sb-vers{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);
  padding:clamp(24px,3vw,34px) 0}
.sb-vers .ico{flex:none;color:#8E5D2C;opacity:.85}
.sb-vers blockquote{font-family:var(--sb-serif);font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.42rem);line-height:1.4;color:#2A2018}
.sb-vers cite{display:block;margin-top:10px;font-style:normal;font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(60,44,30,.62)}
/* o caderno sangra ate a borda direita da tela, por cima da faixa */
.sb-caderno{position:absolute;right:0;top:0;bottom:0;width:min(50%,720px);z-index:1}
.sb-caderno img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 44%}
.sb-caderno::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#E6D8C3 0%,rgba(230,216,195,.72) 26%,transparent 62%)}

/* ---------- tablet ---------- */
@media(max-width:1023px){
  .sb-grid{grid-template-columns:minmax(0,1fr)}
  .sb-foto{max-width:520px;margin:0 auto}
  .sb-faixa-in{max-width:62%}
}
/* ---------- celular ---------- */
@media(max-width:720px){
  .sb-hero{min-height:0;padding-top:clamp(92px,14vh,120px)}
  .sb-h1{font-size:clamp(3.2rem,15vw,4rem)}
  .sb-hero-veu{background:
    linear-gradient(180deg,rgba(10,8,6,.86) 0%,rgba(10,8,6,.6) 30%,
                    rgba(10,8,6,.62) 62%,rgba(10,8,6,.95) 100%)}
  .sb-pilares{grid-template-columns:minmax(0,1fr);gap:30px}
  .sb-faixa-in{max-width:100%;min-height:0}
  .sb-vers{padding:28px 0 18px}
  .sb-caderno{position:relative;width:100%;height:190px;top:auto;bottom:auto}
  .sb-caderno::after{background:linear-gradient(180deg,#E6D8C3 0%,rgba(230,216,195,.55) 30%,transparent 66%)}
}

/* ---------------------------------------------------------------
   Player do site: a barra do rodape toca o arquivo de audio da musica.
   Ela fica fora do conteudo das paginas, entao a navegacao troca a
   pagina sem encostar nela e a musica nao para.
--------------------------------------------------------------- */
body.com-player{padding-bottom:clamp(86px,12vh,110px)}
body.trocando main{opacity:.5;transition:opacity .15s ease}
#player .pl-art{display:block;flex:none}
.sg-video-cx{position:relative;width:min(100%,900px);aspect-ratio:16/9;
  margin-top:clamp(18px,2.4vw,26px);border-radius:12px;overflow:hidden;
  border:1px solid rgba(226,196,138,.2);background:#0B0806;
  box-shadow:0 26px 54px -28px rgba(0,0,0,.9)}
.sg-video-cx iframe{position:absolute;inset:0;width:100%;height:100%;border:0}