/* ============================================================
   SITE DANIELLA PRESTES — V2 · sistema visual
   Direcao: precisao (edicao) + desejo (movimento).
   Tipografia: Manrope = fallback web OFICIAL de Galano Classic.
   Cormorant Garamond italic = fallback oficial de Styler (apoio artistico).
   Fotografia manda na moldura. Nunca o contrario.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root{
  /* palco */
  --tinta:      #0B0A0C;
  --tinta-2:    #15111A;
  --tinta-3:    #221A28;
  /* marca oficial */
  --roxo:       #651E5A;
  --roxo-alto:  #7E3672;
  --roxo-fundo: #2F0028;
  --roxo-noite: #180015;
  --laranja:    #FF9810;
  --laranja-cl: #FFC06B;
  --laranja-es: #CE7600;
  /* papel — branco puro, NUNCA creme */
  --papel:      #FFFFFF;
  --papel-2:    #F4F2F5;
  --cinza:      #898989;
  --cinza-cl:   #DDDDDD;

  --fg:         var(--tinta);
  --bg:         var(--papel);

  --fonte:  'Manrope', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --alma:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --max:    1360px;
  --gut:    clamp(20px, 4.5vw, 72px);
  --r:      3px;                      /* raio minimo, estetica editorial */
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-2: cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--fonte); font-weight:400; font-size:clamp(15.5px,1.05vw,17.5px);
  line-height:1.6; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.035em; line-height:.96; }
p{ margin:0; }
::selection{ background:var(--laranja); color:var(--tinta); }
:focus-visible{ outline:2.5px solid var(--laranja); outline-offset:3px; border-radius:2px; }

.env{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.env--largo{ max-width:1600px; }

/* pular para o conteudo */
.pular{
  position:absolute; left:14px; top:-100px; z-index:200;
  background:var(--laranja); color:var(--tinta); padding:12px 20px;
  font-weight:800; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  transition:top .2s var(--ease);
}
.pular:focus{ top:14px; }

/* ---------- 3. tipografia de cena ---------- */
.display{ font-size:clamp(2.9rem,9.2vw,8.6rem); font-weight:800; letter-spacing:-.05em; line-height:.86; }
.titulo{  font-size:clamp(2.1rem,5.4vw,4.6rem); letter-spacing:-.042em; line-height:.95; }
.sub{     font-size:clamp(1.35rem,2.5vw,2.1rem); font-weight:700; letter-spacing:-.03em; line-height:1.12; }
.alma{ font-family:var(--alma); font-style:italic; font-weight:400; letter-spacing:-.015em; }
.display .alma,.titulo .alma{ font-weight:500; }

.olho{
  font-size:.7rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--roxo); display:flex; align-items:center; gap:12px;
}
.olho::before{ content:''; width:clamp(24px,4vw,54px); height:1.5px; background:currentColor; flex:none; }
.escuro .olho{ color:var(--laranja); }

.lead{ font-size:clamp(1.02rem,1.45vw,1.3rem); line-height:1.52; color:#3A3540; max-width:56ch; }
.escuro .lead{ color:rgba(255,255,255,.74); }
.miolo p + p{ margin-top:1.05em; }

/* ---------- 4. superficies e ritmo ---------- */
.escuro{ background:var(--tinta); color:var(--papel); }
.escuro-roxo{ background:var(--roxo-noite); color:var(--papel); }
.claro{ background:var(--papel); color:var(--tinta); }
.claro-2{ background:var(--papel-2); color:var(--tinta); }

/* ritmo VARIAVEL — a chave contra o "tudo do mesmo tamanho" */
.ato{ padding-block:clamp(72px,9vw,128px); position:relative; }
.ato--curto{ padding-block:clamp(40px,4.6vw,64px); }
.ato--longo{ padding-block:clamp(104px,13vw,190px); }
.ato--colado{ padding-block:0; }

/* ---------- 5. topo ---------- */
.topo{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding:14px var(--gut);
  background:rgba(11,10,12,0); color:var(--papel);
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease), padding .45s var(--ease), color .45s var(--ease);
}
.topo.solido{
  background:rgba(11,10,12,.82); backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%); padding-block:9px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
body.topo-claro .topo:not(.solido){ color:var(--tinta); }

.marca{ display:flex; align-items:center; gap:11px; flex:none; }
.marca img{ height:34px; width:auto; transition:height .45s var(--ease); }
.topo.solido .marca img{ height:29px; }
.marca__txt{ display:flex; flex-direction:column; line-height:1; }
.marca__n{ font-weight:800; font-size:.94rem; letter-spacing:-.025em; }
.marca__d{ font-size:.53rem; letter-spacing:.19em; text-transform:uppercase; opacity:.62; margin-top:3px; }

.nav{ display:flex; align-items:center; gap:clamp(4px,1.4vw,22px); margin-left:auto; }
.nav > a,.nav__gat{
  position:relative; font-size:.83rem; font-weight:600; letter-spacing:-.008em;
  padding:9px 2px; opacity:.82; transition:opacity .25s var(--ease);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.nav > a::after{
  content:''; position:absolute; left:0; right:100%; bottom:4px; height:1.5px;
  background:var(--laranja); transition:right .38s var(--ease);
}
.nav > a:hover,.nav__gat:hover{ opacity:1; }
.nav > a:hover::after,.nav > a[aria-current="page"]::after{ right:0; }
.nav > a[aria-current="page"]{ opacity:1; }

/* menu de universos */
.uni{ position:relative; }
.uni__seta{ width:8px; height:8px; border-right:1.6px solid; border-bottom:1.6px solid; transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease); }
.uni[data-aberto="1"] .uni__seta{ transform:rotate(225deg) translateY(-2px); }
.uni__painel{
  position:absolute; top:calc(100% + 12px); left:50%; translate:-50% 0;
  min-width:290px; background:rgba(18,15,21,.96); backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r); padding:8px;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.32s var(--ease);
  box-shadow:0 26px 70px rgba(0,0,0,.5); color:var(--papel);
}
.uni[data-aberto="1"] .uni__painel{ opacity:1; visibility:visible; transform:translateY(0); }
.uni__item{ display:block; padding:12px 14px; border-radius:2px; transition:background .22s; }
.uni__item:hover{ background:rgba(255,255,255,.08); }
.uni__item b{ display:block; font-size:.9rem; font-weight:700; letter-spacing:-.02em; }
.uni__item span{ display:block; font-size:.72rem; opacity:.58; margin-top:2px; }
.uni__item--adf b{ color:var(--laranja-cl); }
.uni__item--cs b{ color:#FF5A63; }
.uni__item--uc b{ color:#7FD1C4; }

.btn-topo{
  flex:none; background:var(--laranja); color:var(--tinta);
  padding:11px 20px; border-radius:var(--r); font-size:.8rem; font-weight:800;
  letter-spacing:-.01em; transition:.3s var(--ease); white-space:nowrap;
}
.btn-topo:hover{ background:var(--papel); transform:translateY(-1px); }

/* hamburguer */
.hamb{ display:none; flex:none; width:42px; height:42px; position:relative; margin-left:auto; }
.hamb i{ position:absolute; left:11px; width:20px; height:1.8px; background:currentColor; transition:.35s var(--ease); }
.hamb i:nth-child(1){ top:16px; } .hamb i:nth-child(2){ top:22px; } .hamb i:nth-child(3){ top:28px; }
.hamb[aria-expanded="true"] i:nth-child(1){ top:22px; transform:rotate(45deg); }
.hamb[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.hamb[aria-expanded="true"] i:nth-child(3){ top:22px; transform:rotate(-45deg); }

.mob{
  position:fixed; inset:0; z-index:99; background:var(--tinta); color:var(--papel);
  padding:96px var(--gut) 40px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mob.aberto{ opacity:1; visibility:visible; transform:none; }
.mob a{ display:block; padding:15px 0; font-size:1.5rem; font-weight:800; letter-spacing:-.035em; border-bottom:1px solid rgba(255,255,255,.1); }
.mob a small{ display:block; font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.45; margin-top:5px; }
.mob .btn{ margin-top:26px; }

/* ---------- 6. botoes ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 27px; border-radius:var(--r);
  font-size:.87rem; font-weight:800; letter-spacing:-.012em;
  background:var(--roxo); color:var(--papel);
  transition:.34s var(--ease); position:relative; overflow:hidden;
}
.btn span{ position:relative; z-index:1; }
.btn i{ position:relative; z-index:1; transition:transform .34s var(--ease); font-style:normal; }
.btn:hover i{ transform:translateX(5px); }
.btn::before{ content:''; position:absolute; inset:0; background:var(--laranja); transform:translateY(101%); transition:transform .4s var(--ease-2); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:var(--tinta); }
.btn--laranja{ background:var(--laranja); color:var(--tinta); }
.btn--laranja::before{ background:var(--papel); }
.btn--linha{ background:transparent; border:1.5px solid currentColor; color:inherit; }
.btn--linha::before{ background:currentColor; }
.btn--linha:hover{ color:var(--tinta); }
.escuro .btn--linha:hover{ color:var(--tinta); }

.link-seta{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.9rem; border-bottom:1.5px solid var(--laranja); padding-bottom:3px; transition:gap .3s var(--ease); }
.link-seta:hover{ gap:15px; }

/* ---------- 7. HERO cinematografico ---------- */
.palco{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--tinta); color:var(--papel); }
.palco__fundo{ position:absolute; inset:0; z-index:0; }
.palco__fundo img{
  width:100%; height:100%; object-fit:cover;
  /* 18% no eixo X empurra a Daniella para a DIREITA do quadro:
     a coluna de texto fica à esquerda e o rosto nunca é coberto. */
  object-position:18% 30%;
}
/* ganho de exposicao é POR FOTOGRAFIA, nunca global:
   as fotos de estudio sobre fundo preto nascem subexpostas e pedem luz;
   as de fundo claro estouram se receberem o mesmo tratamento. */
.palco__fundo img.f-estudio{ filter:brightness(1.5) contrast(1.06) saturate(1.05); }
/* a foto tambem entra por CSS: independe de script */
.palco__fundo img{ animation:entraFoto 2.2s var(--ease) both; }
@keyframes entraFoto{ from{ opacity:0; transform:scale(1.07) } to{ opacity:1; transform:none } }
/* veu concentrado a ESQUERDA, onde mora o texto — o rosto fica limpo */
.palco__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right, rgba(11,10,12,.94) 0%, rgba(11,10,12,.8) 30%, rgba(11,10,12,.22) 62%, rgba(11,10,12,0) 88%),
    linear-gradient(to top, var(--tinta) 1%, rgba(11,10,12,.55) 26%, rgba(11,10,12,0) 58%),
    radial-gradient(70% 58% at 16% 74%, rgba(101,30,90,.5), transparent 66%);
}
.palco__corpo{ position:relative; z-index:2; width:100%; padding-block:clamp(48px,7vw,104px); }
/* a headline vive numa coluna estreita à esquerda — a foto fica com o resto do quadro */
.palco__corpo .display{ font-size:clamp(2.7rem,5.6vw,5.4rem); max-width:11ch; }
.palco__corpo .lead{ max-width:34ch; }
.palco__corpo .palco__meta{ max-width:44ch; }
/* véu mais estreito: escurece só a faixa do texto */
.palco__veu{ --corte:56%; }
.palco__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:26px; font-size:.71rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
.palco__meta span{ display:flex; align-items:center; gap:9px; }
.palco__meta span::before{ content:''; width:4px; height:4px; background:var(--laranja); border-radius:50%; }

/* palavra que sobe — animação CSS pura.
   O hero NUNCA espera JavaScript para existir: se o script falhar,
   o texto entra em cena do mesmo jeito. */
.sobe{ display:block; overflow:hidden; }
.sobe > span{ display:block; animation:sobeTexto .95s var(--ease-2) both; }
.sobe:nth-of-type(1) > span{ animation-delay:.12s; }
.sobe:nth-of-type(2) > span{ animation-delay:.21s; }
.sobe:nth-of-type(3) > span{ animation-delay:.30s; }
@keyframes sobeTexto{ from{ transform:translateY(105%) } to{ transform:none } }

/* no palco o olho precisa de luz: roxo sobre preto não se lê */
.palco .olho{ color:var(--laranja); }
.palco .olho,.palco .palco__meta{ animation:apar .8s var(--ease) both .05s; }
.palco .palco__meta{ animation-delay:.5s; }

/* rolar */
.rolar{ position:absolute; right:var(--gut); bottom:34px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; opacity:.5; }
.rolar::after{ content:''; width:1px; height:52px; background:linear-gradient(var(--laranja),transparent); animation:desce 2.1s var(--ease) infinite; }
@keyframes desce{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- 8. revelacao no scroll (só sob html.js) ---------- */
.js .rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .rv.vis{ opacity:1; transform:none; }
.js .rv[data-atraso="1"]{ transition-delay:.1s } .js .rv[data-atraso="2"]{ transition-delay:.2s }
.js .rv[data-atraso="3"]{ transition-delay:.3s } .js .rv[data-atraso="4"]{ transition-delay:.4s }

/* imagem que se revela por mascara — nao por fade preguicoso */
.mascara{ overflow:hidden; }
.js .mascara img{ transform:scale(1.16); transition:transform 1.5s var(--ease); }
.js .mascara.vis img{ transform:scale(1); }

/* ---------- 9. fotografia: a moldura serve a foto ---------- */
.foto{ position:relative; overflow:hidden; background:var(--tinta-2); border-radius:var(--r); }
.foto img{ width:100%; height:100%; object-fit:cover; }
/* retratos: proporcao alta, respeita corpo e rosto */
.foto--retrato{ aspect-ratio:3/4; }
.foto--alto{ aspect-ratio:2/3; }
.foto--cena{ aspect-ratio:16/9; }
.foto--livre{ aspect-ratio:auto; }
.foto--livre img{ height:auto; }
/* ponto focal: nunca deixar o corte decidir sozinho */
.foto img.f-alto{ object-position:center 18%; }
.foto img.f-topo{ object-position:center 8%; }
.foto img.f-centro{ object-position:center center; }
.foto__leg{ position:absolute; left:0; right:0; bottom:0; padding:44px 20px 16px; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.8)); }

/* faixa full-bleed de cena */
.cena{ position:relative; min-height:clamp(320px,52vw,600px); display:grid; place-items:center; overflow:hidden; background:var(--tinta); color:var(--papel); text-align:center; }
.cena img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.cena__txt{ position:relative; z-index:1; padding:clamp(40px,7vw,90px) var(--gut); max-width:1100px; }

/* ---------- 10. composicoes editoriais (no lugar de cards) ---------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,84px); align-items:center; }
.duo--invertido > *:first-child{ order:2; }
.duo--peso{ grid-template-columns:1.15fr .85fr; }
.duo--leve{ grid-template-columns:.85fr 1.15fr; }

/* lista tipografica — substitui grade de cards */
.linhas{ border-top:1px solid rgba(0,0,0,.13); }
.escuro .linhas{ border-color:rgba(255,255,255,.15); }
.linha{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,44px); align-items:baseline;
  padding:clamp(20px,2.6vw,34px) 0; border-bottom:1px solid rgba(0,0,0,.13);
  transition:padding-left .4s var(--ease), color .3s;
}
.escuro .linha{ border-color:rgba(255,255,255,.15); }
a.linha:hover{ padding-left:14px; color:var(--roxo); }
.escuro a.linha:hover{ color:var(--laranja); }
.linha__n{ font-size:.68rem; font-weight:800; letter-spacing:.14em; opacity:.4; font-variant-numeric:tabular-nums; }
.linha__t{ font-size:clamp(1.22rem,2.5vw,2.05rem); font-weight:800; letter-spacing:-.035em; line-height:1.06; }
.linha__d{ font-size:.9rem; opacity:.62; max-width:40ch; margin-top:7px; }
.linha__seta{ font-size:1.1rem; opacity:.35; transition:transform .4s var(--ease), opacity .3s; }
a.linha:hover .linha__seta{ transform:translateX(8px); opacity:1; }

/* mosaico editorial de imagens — ritmo irregular de proposito */
.mosaico{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.5vw,20px); }
.m-4{ grid-column:span 4 } .m-5{ grid-column:span 5 } .m-6{ grid-column:span 6 }
.m-7{ grid-column:span 7 } .m-8{ grid-column:span 8 } .m-12{ grid-column:span 12 }
.m-desce{ margin-top:clamp(20px,5vw,72px); }

/* numero grande de repertorio */
.numeros{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(24px,4vw,58px); }
.numero b{ display:block; font-size:clamp(2.7rem,6vw,5rem); font-weight:800; letter-spacing:-.05em; line-height:.9; color:var(--laranja); }
.numero span{ display:block; font-size:.83rem; opacity:.62; margin-top:12px; max-width:26ch; line-height:1.4; }

/* citacao */
.cita{ max-width:24ch; }
.cita__t{ font-family:var(--alma); font-style:italic; font-size:clamp(1.6rem,3.6vw,3rem); line-height:1.14; letter-spacing:-.02em; }
.cita__a{ margin-top:20px; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.55; }

/* ---------- 11. duas jornadas (transformar x contratar) ---------- */
.portas{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:rgba(255,255,255,.14); }
.porta{ position:relative; padding:clamp(34px,5vw,68px); background:var(--tinta); overflow:hidden; transition:background .5s var(--ease); min-height:clamp(300px,32vw,420px); display:flex; flex-direction:column; justify-content:flex-end; }
.porta img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.26; transition:opacity .7s var(--ease), transform 1.1s var(--ease); }
.porta:hover img{ opacity:.42; transform:scale(1.05); }
.porta > *{ position:relative; z-index:1; }
.porta__t{ font-size:clamp(1.55rem,3.3vw,2.7rem); font-weight:800; letter-spacing:-.04em; line-height:1; margin-top:14px; }
.porta__d{ margin-top:14px; font-size:.95rem; opacity:.7; max-width:34ch; }
.porta__cta{ margin-top:24px; display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:.85rem; color:var(--laranja); transition:gap .3s var(--ease); }
.porta:hover .porta__cta{ gap:16px; }

/* ---------- 12. universos (troca real de experiencia) ---------- */
.fita{
  position:relative; z-index:101; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:9px var(--gut); font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  background:var(--roxo); color:#fff;
}
.fita a{ display:inline-flex; align-items:center; gap:7px; border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:2px; }
body.tem-fita .topo{ top:36px; }

/* A ARTE DA FALA — vinho + laranja, luz de teatro */
body.u-adf{ --roxo:#490B40; --roxo-alto:#6A1A5E; --laranja:#F39620; --roxo-noite:#2A0625; --tinta:#150310; }
body.u-adf .palco__veu{ background:linear-gradient(to top,#150310 3%,rgba(21,3,16,.7) 34%,rgba(21,3,16,.1) 68%,rgba(21,3,16,.55) 100%),radial-gradient(70% 60% at 76% 40%,rgba(243,150,32,.34),transparent 66%); }
body.u-adf .fita{ background:linear-gradient(90deg,#490B40,#F39620); }

/* COMUNICACAO SEXY — preto, branco e vermelho. Sem meio-termo. */
body.u-cs{ --roxo:#E30613; --roxo-alto:#FF2A36; --laranja:#E30613; --tinta:#0A0A0A; --roxo-noite:#0A0A0A; }
body.u-cs .palco__veu{ background:linear-gradient(to top,#0A0A0A 2%,rgba(10,10,10,.74) 30%,rgba(10,10,10,.06) 62%,rgba(10,10,10,.55) 100%),radial-gradient(60% 50% at 82% 30%,rgba(227,6,19,.3),transparent 62%); }
body.u-cs .fita{ background:#E30613; }
body.u-cs .olho{ color:#E30613; }
body.u-cs .escuro .olho{ color:#FF4A54; }
body.u-cs .cita__t{ font-family:var(--fonte); font-style:normal; font-weight:800; letter-spacing:-.04em; }
body.u-cs .display{ letter-spacing:-.055em; }

/* USINA — verde-agua institucional da marca cultural */
body.u-uc{ --roxo:#12655C; --roxo-alto:#1B8C80; --laranja:#7FD1C4; --roxo-noite:#06231F; --tinta:#08110F; }
body.u-uc .fita{ background:#12655C; }

/* ---------- 13. audio / voz ---------- */
.faixa{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(14px,2.4vw,28px); align-items:center;
  padding:clamp(15px,2vw,22px) 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.faixa__play{
  width:clamp(44px,4.4vw,54px); aspect-ratio:1; border-radius:50%; border:1.5px solid currentColor;
  display:grid; place-items:center; flex:none; transition:.32s var(--ease);
}
.faixa__play::before{ content:''; border-left:9px solid currentColor; border-block:6px solid transparent; margin-left:3px; }
.faixa__play:hover{ background:var(--laranja); border-color:var(--laranja); color:var(--tinta); transform:scale(1.06); }
.faixa__t{ font-size:clamp(1rem,1.8vw,1.35rem); font-weight:800; letter-spacing:-.03em; }
.faixa__d{ font-size:.8rem; opacity:.55; margin-top:3px; }
.faixa__dur{ font-size:.76rem; font-weight:700; opacity:.45; font-variant-numeric:tabular-nums; }

/* ---------- 14. arquivo vivo — gavetas, nao cards ---------- */
.gaveta{ border-bottom:1px solid rgba(255,255,255,.15); }
.gaveta__cab{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,3vw,40px); align-items:center;
  padding:clamp(24px,3.4vw,42px) 0; text-align:left; transition:padding-left .4s var(--ease);
}
.gaveta__cab:hover{ padding-left:12px; }
.gaveta__n{ font-size:.66rem; font-weight:800; letter-spacing:.16em; opacity:.4; }
.gaveta__t{ font-size:clamp(1.4rem,3.2vw,2.5rem); font-weight:800; letter-spacing:-.04em; line-height:1; }
.gaveta__t em{ font-family:var(--alma); font-style:italic; font-weight:400; }
.gaveta__mais{ width:34px; height:34px; position:relative; flex:none; opacity:.6; }
.gaveta__mais::before,.gaveta__mais::after{ content:''; position:absolute; inset:50% 0 auto; height:1.5px; background:currentColor; transition:transform .4s var(--ease); }
.gaveta__mais::after{ transform:rotate(90deg); }
.gaveta[data-aberta="1"] .gaveta__mais::after{ transform:rotate(0); }
.gaveta__corpo{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.gaveta[data-aberta="1"] .gaveta__corpo{ grid-template-rows:1fr; }
.gaveta__interno{ overflow:hidden; }
.gaveta__pad{ padding-bottom:clamp(28px,4vw,52px); }

/* etiqueta de material pendente — nunca disfarcar lacuna de fato */
.pendente{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px;
  border:1px dashed currentColor; border-radius:2px; opacity:.5;
  font-size:.63rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
}
.pendente::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.vazio{
  border:1px dashed rgba(255,255,255,.24); border-radius:var(--r);
  padding:clamp(24px,4vw,42px); display:grid; gap:12px; place-items:start;
  background:rgba(255,255,255,.02);
}
.claro .vazio,.claro-2 .vazio{ border-color:rgba(0,0,0,.2); background:rgba(0,0,0,.015); }
.vazio p{ font-size:.88rem; opacity:.62; max-width:46ch; }

/* selo de LAB */
.lab{
  position:fixed; left:14px; bottom:14px; z-index:90;
  background:var(--roxo); color:#fff; backdrop-filter:blur(9px);
  padding:8px 14px; border-radius:99px; font-size:.6rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16); pointer-events:none;
}

/* ---------- 15. formulario de intencao ---------- */
.intencoes{ display:flex; flex-wrap:wrap; gap:10px; }
.intencao{
  padding:12px 19px; border:1.5px solid rgba(255,255,255,.24); border-radius:99px;
  font-size:.84rem; font-weight:700; transition:.3s var(--ease);
}
.intencao:hover{ border-color:var(--laranja); }
.intencao[aria-pressed="true"]{ background:var(--laranja); border-color:var(--laranja); color:var(--tinta); }
.resposta{ margin-top:clamp(26px,4vw,44px); }
.resposta__cx{ display:none; }
.resposta__cx.on{ display:block; animation:apar .5s var(--ease); }
@keyframes apar{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* ---------- 16. rodape ---------- */
.rodape{ background:var(--tinta); color:var(--papel); padding-block:clamp(56px,7vw,90px) 30px; }
.rodape__grade{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(28px,5vw,64px); }
.rodape h4{ font-size:.66rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; opacity:.42; margin-bottom:16px; }
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.rodape a{ font-size:.92rem; opacity:.78; transition:opacity .25s,color .25s; }
.rodape a:hover{ opacity:1; color:var(--laranja); }
.rodape__fim{ margin-top:clamp(38px,5vw,62px); padding-top:22px; border-top:1px solid rgba(255,255,255,.11); display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; font-size:.73rem; opacity:.45; }

/* ---------- 17. responsivo de verdade ---------- */
@media (max-width:1080px){
  .nav,.btn-topo{ display:none; }
  .hamb{ display:block; }
  .duo,.duo--peso,.duo--leve{ grid-template-columns:1fr; gap:clamp(22px,4vw,40px); }
  .duo--invertido > *:first-child{ order:0; }
  .portas{ grid-template-columns:1fr; }
  .rodape__grade{ grid-template-columns:1fr 1fr; }
  .m-4,.m-5,.m-6,.m-7,.m-8{ grid-column:span 6; }
}
@media (max-width:640px){
  :root{ --gut:20px; }
  .display{ font-size:clamp(2.6rem,12.5vw,4.2rem); letter-spacing:-.04em; }
  .titulo{ font-size:clamp(1.85rem,8vw,2.6rem); }
  .palco{ min-height:96svh; }
  /* no celular a foto centraliza e o veu vira vertical: a Daniella em cima, o texto embaixo */
  .palco__fundo img{ object-position:center 20%; }
  .palco__veu{ background:
      linear-gradient(to top, var(--tinta) 6%, rgba(11,10,12,.9) 34%, rgba(11,10,12,.3) 62%, rgba(11,10,12,.1) 100%),
      radial-gradient(80% 40% at 50% 90%, rgba(101,30,90,.5), transparent 70%); }
  .palco__corpo .display,.palco__corpo .lead{ max-width:none; }
  /* no celular a foto respira em cima, o texto embaixo — nao amontoa */
  .cena{ min-height:64vw; }
  .linha{ grid-template-columns:auto 1fr; }
  .linha__seta{ display:none; }
  .faixa{ grid-template-columns:auto 1fr; }
  .faixa__dur{ grid-column:2; }
  .m-4,.m-5,.m-6,.m-7,.m-8,.m-12{ grid-column:span 12; }
  .m-desce{ margin-top:0; }
  .rodape__grade{ grid-template-columns:1fr; }
  .numero b{ font-size:clamp(2.4rem,13vw,3.4rem); }
  .rolar{ display:none; }
  .cita{ max-width:none; }
}

/* ---------- 18. respeito a quem pede menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js .rv{ opacity:1 !important; transform:none !important; }
  .js .sobe > span{ transform:none !important; }
  .js .palco__fundo img{ opacity:1 !important; transform:none !important; }
  .js .mascara img{ transform:none !important; }
}

/* impressao limpa */
@media print{
  .topo,.mob,.lab,.rolar,.fita{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ---------- correcao tecnica de legibilidade (producao) ----------
   .linha__t e .linha__d nasceram como <span> inline: titulo e descricao
   colados numa linha so. O proprio .linha__d ja declarava margin-top, que
   nao tem efeito em elemento inline — ou seja, a intencao do desenho sempre
   foi bloco e faltou a declaracao. Isto restaura a intencao original.
   NAO e mudanca de direcao visual. Registrado como diferenca controlada. */
.linha__t{ display:block; }
.linha__d{ display:block; }

/* ---------- nota de atualizacao (producao) ---------- */
.nota-atualizacao{ display:inline-block; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; opacity:.42; }
.vazio{ border-style:solid; border-color:rgba(255,255,255,.12); }
.claro .vazio,.claro-2 .vazio{ border-color:rgba(0,0,0,.1); }
.vazio p{ opacity:.72; }