/* Livro — motor de ensaios interativos
   Temas: noite · perola · editorial   Máscaras: arco · redondo · reto */

/* ---------- temas ---------- */
:root, [data-tema="noite"]{
  --bg:#100c15; --bg2:#18121f; --ink:#f4ede2; --ink2:rgba(244,237,226,.74); --ink3:rgba(244,237,226,.46); --linha:rgba(244,237,226,.14);
  --vidro:rgba(18,13,24,.5); --vidro2:rgba(18,13,24,.82); --papel:#f2e9dc; --papel-ink:#2c2332; --sombra:rgba(0,0,0,.5);
}
[data-tema="perola"]{
  --bg:#f3ede5; --bg2:#ebe3d8; --ink:#261e27; --ink2:rgba(38,30,39,.74); --ink3:rgba(38,30,39,.5); --linha:rgba(38,30,39,.14);
  --vidro:rgba(250,246,240,.62); --vidro2:rgba(250,246,240,.9); --papel:#fffaf2; --papel-ink:#261e27; --sombra:rgba(60,40,50,.22);
}
[data-tema="editorial"]{
  --bg:#0b0b0b; --bg2:#141414; --ink:#f3f2ef; --ink2:rgba(243,242,239,.72); --ink3:rgba(243,242,239,.45); --linha:rgba(243,242,239,.14);
  --vidro:rgba(10,10,10,.5); --vidro2:rgba(10,10,10,.85); --papel:#f3f2ef; --papel-ink:#111; --sombra:rgba(0,0,0,.5);
}
:root{
  --acc:#c9b6ff; --ouro:#e3c47e;
  --display:"Cormorant Garamond",Georgia,serif; --script:"Pinyon Script","Cormorant Garamond",cursive; --sans:Inter,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1); --gut:clamp(18px,5vw,72px);
  --r-top:9999px; --r-bot:4px;
}
[data-mascara="redondo"]{--r-top:50%;--r-bot:50%}
[data-mascara="reto"]{--r-top:3px;--r-bot:3px}
[data-tema="editorial"] h1,[data-tema="editorial"] h2{text-transform:uppercase;letter-spacing:.06em}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:300 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.travado{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
a{color:inherit}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fixo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.vis{opacity:0;transform:translateY(22px);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.vis.in{opacity:1;transform:none}
.leg{font:italic 300 clamp(17px,1.6vw,21px)/1.45 var(--display);color:var(--ink2);text-align:center;max-width:34em;margin:28px auto 0;padding:0 var(--gut)}

/* ---------- fotos ---------- */
.ph{position:relative;overflow:hidden;background:var(--c,#222) center/cover no-repeat;aspect-ratio:var(--ar,3/4);cursor:zoom-in}
.ph::after{content:"";position:absolute;inset:0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity 1s;pointer-events:none}
.ph.ok::after{opacity:0}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,40%);opacity:0;transition:opacity 1.1s var(--ease),transform 1.6s var(--ease)}
.ph.ok img{opacity:1}
.m{border-radius:var(--r-top) var(--r-top) var(--r-bot) var(--r-bot)}

/* ---------- barra superior ---------- */
.barra{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:14px var(--gut);pointer-events:none;opacity:0;transform:translateY(-10px);transition:opacity .7s,transform .7s var(--ease)}
body.passou .barra{opacity:1;transform:none}
.barra>*{pointer-events:auto}
.barra::before{content:"";position:absolute;inset:0 0 -30px;background:linear-gradient(var(--bg),transparent);opacity:.85;z-index:-1;pointer-events:none}
.marca{display:flex;align-items:center;gap:11px;font:400 21px/1 var(--display);letter-spacing:.02em}
.mono{width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--ouro) 60%,transparent);display:grid;place-items:center;font:italic 400 18px/1 var(--display);color:var(--ouro)}
.nav{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--vidro);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--linha)}
.nav button{height:36px;padding:0 14px;border-radius:999px;display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.02em;color:var(--ink2);transition:background .25s,color .25s}
.nav button:hover{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}
.nav button.on{color:var(--ink)}
.nav .quente{background:var(--ink);color:var(--bg)}
.nav .quente:hover{background:var(--ink);color:var(--bg);opacity:.9}
.progresso{position:fixed;top:0;left:0;right:0;height:2px;z-index:41;pointer-events:none}
.progresso i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--ouro))}

/* ---------- capa ---------- */
.capa{height:240vh;position:relative}
.capa-foto{position:absolute;inset:0;will-change:clip-path}
.capa-foto .ph{position:absolute;inset:0;aspect-ratio:auto;cursor:default}
.capa-foto img{transform:scale(var(--z,1.15));transition:opacity 1.6s var(--ease)}
.capa-veu{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,10,.82) 0%,rgba(8,6,10,.25) 45%,rgba(8,6,10,.15) 70%,rgba(8,6,10,.45));pointer-events:none}
.capa-texto{position:absolute;left:0;right:0;bottom:12vh;text-align:center;color:#f7f1e6;padding:0 20px;will-change:opacity,transform}
.capa .script{font:400 clamp(30px,4.2vw,54px)/1 var(--script);color:var(--ouro);opacity:0;transform:translateY(12px);transition:opacity 1.6s .3s,transform 1.8s .3s var(--ease)}
.capa h1{font:300 clamp(56px,min(17vw,calc(175vw / var(--n,6))),230px)/.86 var(--display);letter-spacing:-.015em;margin:8px 0 6px;display:flex;flex-wrap:wrap;justify-content:center;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.capa h1 .pal{display:inline-flex;white-space:nowrap}
.capa h1 .esp{width:.24em}
.capa .script{text-shadow:0 1px 3px rgba(0,0,0,.5),0 1px 18px rgba(0,0,0,.45)}
.capa h1 .l{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(30px);transition:opacity 1.4s var(--ease),filter 1.6s var(--ease),transform 1.8s var(--ease)}
.capa .sub{display:flex;align-items:center;justify-content:center;gap:16px;font:500 11px var(--sans);letter-spacing:.46em;text-transform:uppercase;opacity:0;transition:opacity 1.6s 1.3s}
.capa .sub i{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--ouro))}
.capa .sub i:last-child{transform:scaleX(-1)}
.capa-acoes{margin-top:34px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;opacity:0;transform:translateY(10px);transition:opacity 1.4s 1.7s,transform 1.6s 1.7s var(--ease)}
.pronto .capa .script,.pronto .capa .sub,.pronto .capa-acoes{opacity:1;transform:none}
.pronto .capa h1 .l{opacity:1;filter:none;transform:none}
.btn{text-decoration:none;height:50px;padding:0 26px;border-radius:999px;font-size:13.5px;letter-spacing:.05em;display:inline-flex;align-items:center;gap:10px;transition:transform .35s var(--ease),background .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn.claro{background:#f7f1e6;color:#1a1420}
.btn.vidro{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#f7f1e6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn.vidro:hover{border-color:rgba(255,255,255,.55)}
.btn.tinta{background:var(--ink);color:var(--bg)}
.btn.linha{border:1px solid var(--linha);color:var(--ink)}
.btn.linha:hover{border-color:var(--ink3)}
.capa-rodape{position:absolute;left:0;right:0;bottom:6vh;text-align:center;font:italic 300 19px var(--display);color:var(--ink2);opacity:0}
.capa-rodape b{display:block;font:500 10px var(--sans);font-style:normal;letter-spacing:.4em;text-transform:uppercase;color:var(--ouro);margin-bottom:8px}
.rolar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:1px;height:46px;background:linear-gradient(transparent,rgba(255,255,255,.7));overflow:hidden;opacity:0;transition:opacity 1s 2.4s}
.pronto .rolar{opacity:.8}
.rolar::after{content:"";position:absolute;left:0;top:-46px;width:1px;height:46px;background:#fff;animation:cair 2.2s var(--ease) infinite}
@keyframes cair{to{top:46px}}

/* ---------- ornamento ---------- */
.orn{display:block;width:150px;height:22px;margin:0 auto;color:var(--ouro)}
.orn path,.orn circle{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);transition:stroke-dashoffset 2.2s var(--ease)}
.in .orn path,.in .orn circle,.orn.in path,.orn.in circle{stroke-dashoffset:0}

/* ---------- prólogo / texto corrido ---------- */
.prologo{min-height:120vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:22vh var(--gut);text-align:center}
.scrub{font:300 clamp(28px,3.9vw,54px)/1.28 var(--display);max-width:21em;margin:34px auto 0;letter-spacing:-.003em}
.scrub span{opacity:.14;transition:opacity .35s}
.capitular::first-letter{font:400 1.9em/1 var(--script);color:var(--ouro);padding-right:.08em}

/* ---------- abertura de capítulo ---------- */
.abertura{height:230vh;position:relative}
.ab-foto{position:absolute;inset:0}
.ab-foto .ph{position:absolute;inset:0;aspect-ratio:auto;cursor:default}
.ab-foto img{transform:scale(var(--z,1.2))}
.ab-foto.solta .ph img,.capa-foto.solta .ph img{object-fit:contain}
.ab-foto.solta .ph::before,.capa-foto.solta .ph::before{content:"";position:absolute;inset:-6%;background:inherit;background-size:cover;filter:blur(34px) brightness(.6) saturate(1.1)}
.ab-veu{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(8,6,10,.2),rgba(8,6,10,.75));opacity:var(--v,.4)}
.ab-texto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f7f1e6;padding:0 var(--gut)}
.ab-texto .num{font:300 clamp(120px,22vw,300px)/.8 var(--display);color:transparent;-webkit-text-stroke:1px rgba(247,241,230,.55);position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + var(--ny,0px)));pointer-events:none;opacity:.5}
.ab-texto .rot{font:500 10.5px var(--sans);letter-spacing:.44em;text-transform:uppercase;color:var(--ouro);position:relative;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 16px rgba(0,0,0,.35)}
.ab-texto h2{font:300 clamp(54px,9vw,128px)/.95 var(--display);margin:16px 0 20px;position:relative;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 14px rgba(0,0,0,.35),0 0 42px rgba(0,0,0,.25)}
.ab-texto p{font:italic 300 clamp(18px,1.8vw,24px)/1.5 var(--display);max-width:28em;color:rgba(247,241,230,.9);position:relative;margin-top:20px;text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 14px rgba(0,0,0,.35),0 0 42px rgba(0,0,0,.25)}
.ab-texto>*{opacity:0;transform:translateY(18px);transition:opacity 1.3s var(--ease),transform 1.5s var(--ease)}
.ab-texto .num{transform:translate(-50%,calc(-50% + var(--ny,0px)))}
.abertura.in .ab-texto>*{opacity:1;transform:none}
.abertura.in .ab-texto .num{opacity:.5;transform:translate(-50%,calc(-50% + var(--ny,0px)))}
.abertura.in .ab-texto h2{transition-delay:.15s}.abertura.in .ab-texto .orn{transition-delay:.3s}.abertura.in .ab-texto p{transition-delay:.45s}

/* ---------- blocos ---------- */
.bloco{padding:16vh var(--gut);position:relative}
.duo .par{display:grid;grid-template-columns:7fr 5fr;gap:clamp(18px,4vw,70px);align-items:start;max-width:1280px;margin:0 auto}
.duo .par>:nth-child(2){margin-top:22vh}
.duo.inv .par{grid-template-columns:5fr 7fr}
.duo.inv .par>:nth-child(1){margin-top:22vh}.duo.inv .par>:nth-child(2){margin-top:0}
.trio .grade{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:clamp(14px,2.2vw,30px);max-width:1180px;margin:0 auto}
.trio .grade>:first-child{grid-row:1/3;align-self:center}
.inteira{padding-left:0;padding-right:0}
.inteira .ph{width:100%;max-height:none;clip-path:inset(0 50% 0 50%);transition:clip-path 1.8s var(--ease)}
.inteira.in .ph{clip-path:inset(0 0 0 0)}
.inteira .ph img{transform:scale(1.12)}
.inteira.in .ph img{transform:scale(1)}
.inteira.estreita .ph{width:min(1180px,calc(100% - 2*var(--gut)));margin:0 auto}
.citacao .par{display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,6vw,110px);align-items:center;max-width:1180px;margin:0 auto}
.citacao.inv .par{grid-template-columns:6fr 5fr}
.citacao.inv .par>figure{order:2}
.citacao blockquote{font:300 clamp(34px,4.6vw,68px)/1.12 var(--display);letter-spacing:-.01em}
.citacao blockquote::before{content:"“";display:block;font:400 1.6em/.6 var(--display);color:var(--ouro);margin-bottom:.15em}
.panorama{padding:0;height:var(--h,420vh)}
.panorama .fixo{display:flex;flex-direction:column;justify-content:center}
.pano-tit{padding:0 var(--gut);margin-bottom:4vh;display:flex;align-items:baseline;gap:20px}
.pano-tit h3{font:300 clamp(34px,4vw,58px)/1 var(--display)}
.pano-tit small{font:500 10.5px var(--sans);letter-spacing:.38em;text-transform:uppercase;color:var(--ouro)}
.trilho{display:flex;gap:clamp(14px,2vw,28px);padding:0 var(--gut);will-change:transform;align-items:center}
.trilho .ph{height:64vh;flex:none;aspect-ratio:var(--ar)}
.trilho .ph:nth-child(even){height:54vh}
.pano-barra{margin:5vh var(--gut) 0;height:1px;background:var(--linha);position:relative}
.pano-barra i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--ouro)}
.detalhe .par{display:grid;grid-template-columns:4fr 5fr;gap:clamp(24px,6vw,100px);align-items:center;max-width:1180px;margin:0 auto}
.detalhe h3{font:300 clamp(40px,5vw,72px)/1 var(--display);margin:16px 0 18px}
.detalhe .rot,.carta .rot,.galeria .rot{font:500 10.5px var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--ouro)}
.detalhe p{font:italic 300 21px/1.5 var(--display);color:var(--ink2);max-width:22em}
.det-foto{position:relative}
.det-foto .ph{cursor:default}
.pino{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;z-index:2}
.pino::before{content:"";position:absolute;inset:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 16px 3px rgba(255,236,200,.85);transition:transform .35s var(--ease)}
.pino::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,250,240,.75);animation:pulso 2.6s var(--ease) infinite}
.pino:hover::before,.pino.on::before{transform:scale(1.4)}
@keyframes pulso{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
.cartao{position:absolute;z-index:3;width:min(250px,70%);padding:16px 18px 17px;border-radius:14px;background:var(--vidro2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--linha);box-shadow:0 18px 50px var(--sombra);opacity:0;transform:translateY(8px) scale(.97);transition:opacity .35s,transform .45s var(--ease);pointer-events:none;color:var(--ink)}
.cartao.on{opacity:1;transform:none;pointer-events:auto}
.cartao b{display:block;font:400 24px/1.1 var(--display);margin-bottom:6px}
.cartao span{font-size:13.5px;line-height:1.55;color:var(--ink2)}
.fecho{text-align:center;padding-top:20vh;padding-bottom:26vh}
.fecho .ph{width:min(440px,78vw);margin:0 auto}
.fecho p{font:400 clamp(30px,3.6vw,48px)/1.2 var(--script);color:var(--ouro);margin-top:40px;padding:0 var(--gut)}
.parallax{will-change:transform}

/* ---------- carta ---------- */
.carta{padding:24vh var(--gut);display:flex;justify-content:center}
.papel{position:relative;width:min(640px,100%);padding:clamp(40px,7vw,80px) clamp(28px,6vw,72px);background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.55),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(160,130,90,.12),transparent 55%),var(--papel);color:var(--papel-ink);border-radius:4px;box-shadow:0 40px 90px var(--sombra),0 2px 0 rgba(0,0,0,.04);transform:rotate(-.6deg)}
.papel::before{content:"";position:absolute;inset:14px;border:1px solid rgba(150,120,80,.28);border-radius:2px;pointer-events:none}
.papel .rot{color:#a7864a;text-align:center;display:block}
.papel h3{font:400 clamp(44px,6vw,66px)/1.1 var(--script);text-align:center;margin:14px 0 26px;color:#5b4378}
.papel p{font:italic 400 clamp(19px,2vw,23px)/1.62 var(--display);margin-bottom:14px}
.papel .ass{font:400 clamp(26px,3vw,34px)/1.2 var(--script);text-align:right;margin-top:26px;color:#5b4378}
.papel .orn{color:#b39256}

/* ---------- galeria ---------- */
.galeria{padding:18vh var(--gut) 12vh;max-width:1500px;margin:0 auto}
.gal-topo{text-align:center;margin-bottom:44px}
.gal-topo h2{font:300 clamp(48px,7vw,96px)/1 var(--display);margin:14px 0 10px}
.gal-topo p{color:var(--ink3);font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:28px 0 38px}
.chips button{height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--linha);font-size:12.5px;color:var(--ink2);transition:all .25s}
.chips button:hover{border-color:var(--ink3);color:var(--ink)}
.chips button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.grade-gal{columns:4 260px;column-gap:14px}
.grade-gal figure{break-inside:avoid;margin-bottom:14px;position:relative;border-radius:6px;overflow:hidden;animation:surgir .8s var(--ease) both}
@keyframes surgir{from{opacity:0;transform:translateY(16px)}}
.grade-gal .ph{border-radius:6px}
.grade-gal .ph img{transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
.grade-gal figure:hover .ph img{transform:scale(1.04)}
.coracao{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(10,8,14,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;opacity:0;transition:opacity .3s,transform .3s var(--ease),background .3s;z-index:2}
.coracao svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
figure:hover .coracao,.coracao.on{opacity:1}
.coracao.on{background:rgba(201,182,255,.9);color:#1d1526}
.coracao.on svg{fill:currentColor}
.coracao:active{transform:scale(.88)}
@media (hover:none){.coracao{opacity:1}}
.fav-barra{position:fixed;left:50%;bottom:22px;z-index:42;transform:translate(-50%,120px);display:flex;align-items:center;gap:6px;padding:6px 6px 6px 18px;border-radius:999px;background:var(--vidro2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--linha);box-shadow:0 14px 40px var(--sombra);transition:transform .6s var(--ease);font-size:13px;white-space:nowrap}
.fav-barra.on{transform:translate(-50%,0)}
.fav-barra b{font-weight:500}
.fav-barra .btn{height:40px;padding:0 18px;font-size:12.5px}

.gal-mais{text-align:center;margin-top:70px}
.gal-mais p{font:italic 300 22px var(--display);color:var(--ink2);margin:20px 0 22px}

/* ---------- ensaio completo ---------- */
.completa{padding:16vh var(--gut) 10vh;max-width:1600px;margin:0 auto;border-top:1px solid var(--linha)}
.folha{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-top:44px}
.folha figure{position:relative;overflow:hidden;border-radius:3px;animation:surgir .7s var(--ease) both}
.folha .ph{aspect-ratio:4/5}
.folha .ph img{transition:opacity .9s var(--ease),transform 1s var(--ease)}
.folha figure:hover .ph img{transform:scale(1.05)}
.nf{position:absolute;left:8px;bottom:8px;font:500 10px var(--sans);letter-spacing:.14em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);opacity:0;transition:opacity .3s;pointer-events:none}
.folha figure:hover .nf{opacity:.9}
.folha-fim{text-align:center;padding:40px 0 0}
@media (hover:none){.nf{opacity:.75}}
@media (max-width:760px){.folha{grid-template-columns:repeat(3,1fr);gap:3px}.completa{padding:12vh 10px 8vh}.folha .coracao{width:30px;height:30px;right:4px;bottom:4px}.folha .coracao svg{width:14px;height:14px}}

/* ---------- rodapé ---------- */
.rodape{padding:12vh var(--gut) 14vh;text-align:center;border-top:1px solid var(--linha)}
.rodape .nome{font:300 clamp(40px,5vw,64px)/1 var(--display);margin:22px 0 8px}
.rodape .cred{color:var(--ink3);font-size:13px;margin-top:6px}
.rodape .acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px 0}
.rodape .estudio{font:500 10.5px var(--sans);letter-spacing:.4em;text-transform:uppercase;color:var(--ouro)}

/* ---------- menu de capítulos ---------- */
.menu{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;padding:80px var(--gut);opacity:0;pointer-events:none;transition:opacity .5s}
.menu.on{opacity:1;pointer-events:auto}
.menu ol{list-style:none;width:min(720px,100%)}
.menu li{border-bottom:1px solid var(--linha)}
.menu li button,.menu li a{text-decoration:none;width:100%;display:flex;align-items:center;gap:22px;padding:18px 4px;text-align:left;transition:padding .4s var(--ease),color .3s}
.menu li button:hover,.menu li a:hover{padding-left:16px}
.menu .n{font:300 16px var(--display);color:var(--ouro);width:44px;letter-spacing:.08em}
.menu .t{font:300 clamp(28px,4vw,46px)/1 var(--display);flex:1}
.menu .mini{width:64px;height:64px;border-radius:var(--r-top) var(--r-top) var(--r-bot) var(--r-bot);overflow:hidden;opacity:.85}
.menu .mini img{width:100%;height:100%;object-fit:cover}
.fechar{position:fixed;top:18px;right:var(--gut);z-index:61;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--linha);background:var(--vidro);display:flex;gap:8px;align-items:center;font-size:12.5px}

/* ---------- lupa (foto em tela cheia) ---------- */
.lupa{position:fixed;inset:0;z-index:70;background:rgba(6,5,8,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s;touch-action:none;color:#f4ede2}
.lupa.on{opacity:1;pointer-events:auto}
.lupa img{max-width:calc(100% - 2*var(--gut));max-height:calc(100% - 150px);object-fit:contain;transition:opacity .35s,transform .45s var(--ease);user-select:none;-webkit-user-drag:none;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lupa img.sai{opacity:0;transform:scale(.97)}
.lupa-topo{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:16px var(--gut)}
.lupa-topo .cont{font:500 11px var(--sans);letter-spacing:.24em;color:rgba(244,237,226,.6)}
.lupa-topo .acoes{display:flex;gap:6px}
.lupa .r{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);transition:background .25s}
.lupa .r:hover{background:rgba(255,255,255,.08)}
.lupa .r.on{background:rgba(201,182,255,.9);color:#1d1526;border-color:transparent}
.lupa .r.on svg{fill:currentColor}
.lupa .seta{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px}
.lupa .seta.e{left:max(12px,calc(var(--gut) - 40px))}.lupa .seta.d{right:max(12px,calc(var(--gut) - 40px))}
.lupa-leg{position:absolute;bottom:22px;left:0;right:0;text-align:center;font:italic 300 18px var(--display);color:rgba(244,237,226,.72);padding:0 70px}

/* ---------- telão ---------- */
.telao{position:fixed;inset:0;z-index:80;background:#000;opacity:0;pointer-events:none;transition:opacity 1s;overflow:hidden;color:#f4ede2}
.telao.on{opacity:1;pointer-events:auto}
.telao.quieto{cursor:none}
.tv-cena{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;perspective:1400px}
.tv-cena.on{opacity:1}
.tv-cena .fundo{position:absolute;inset:-8%;background:center/cover;filter:blur(40px) brightness(.35) saturate(1.2)}
.tv-cena img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:var(--fx,50%) var(--fy,40%);animation:kb var(--dur,7.5s) linear forwards}
.tv-cena img{top:7vh;height:86vh}
.tv-cena.cheia img{top:0;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,40%)}   /* primeira foto: largura toda */
@keyframes kb{
  from{transform:rotateY(var(--ry0,-1.2deg)) rotateX(var(--rx0,.6deg)) scale(var(--s0,1.04)) translate3d(var(--x0,0),var(--y0,0),0)}
  to{transform:rotateY(var(--ry1,1.2deg)) rotateX(var(--rx1,-.6deg)) scale(var(--s1,1.14)) translate3d(var(--x1,0),var(--y1,0),0)}
}
.tv-titulo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw;background:radial-gradient(ellipse at 50% 50%,#1b1424,#000 70%)}
.tv-titulo .num{font:300 clamp(18px,2vw,26px) var(--display);color:var(--ouro);letter-spacing:.3em}
.tv-titulo h2{font:300 clamp(64px,9vw,150px)/1 var(--display);margin:18px 0 14px}
.tv-titulo .script{font:400 clamp(34px,4vw,60px)/1 var(--script);color:var(--ouro)}
.tv-titulo p{font:italic 300 clamp(18px,1.8vw,26px)/1.5 var(--display);color:rgba(244,237,226,.75);max-width:30em}
.tv-titulo>*{opacity:0;transform:translateY(16px);transition:opacity 1.4s var(--ease),transform 1.6s var(--ease)}
.tv-cena.on .tv-titulo>*{opacity:1;transform:none}
.tv-cena.on .tv-titulo>:nth-child(2){transition-delay:.25s}.tv-cena.on .tv-titulo>:nth-child(3){transition-delay:.5s}.tv-cena.on .tv-titulo>:nth-child(4){transition-delay:.75s}
.tv-faixa{position:absolute;left:0;right:0;height:7vh;background:#000;z-index:3}
.tv-faixa.t{top:0}.tv-faixa.b{bottom:0}
.tv-leg{position:absolute;left:0;right:0;bottom:calc(7vh + 34px);text-align:center;z-index:4;font:italic 300 clamp(18px,2vw,26px)/1.4 var(--display);text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 14px rgba(0,0,0,.35),0 0 42px rgba(0,0,0,.25);padding:0 8vw;opacity:0;transition:opacity 1.2s}
.tv-leg.on{opacity:1}
.tv-leg small{display:block;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 16px rgba(0,0,0,.4);font:500 10px var(--sans);font-style:normal;letter-spacing:.4em;text-transform:uppercase;color:var(--ouro);margin-bottom:10px}
.telao.sem-leg .tv-leg{display:none}
.tv-ctrl{position:absolute;left:50%;bottom:calc(7vh - 24px);transform:translateX(-50%);z-index:5;display:flex;gap:3px;padding:5px;border-radius:999px;background:rgba(20,16,26,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);transition:opacity .6s,transform .6s var(--ease)}
.telao.quieto .tv-ctrl{opacity:0;transform:translate(-50%,10px)}
.tv-ctrl button{height:40px;min-width:40px;padding:0 13px;border-radius:999px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(244,237,226,.7);position:relative}
.tv-ctrl button:hover{background:rgba(255,255,255,.08);color:#fff}
.tv-ctrl button.on{color:#fff}
.tv-ctrl button.on::after{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--acc)}
.tv-tempo{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:5;background:rgba(255,255,255,.08)}
.tv-tempo i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--ouro))}

/* ---------- aviso ---------- */
.aviso{position:fixed;left:50%;bottom:90px;transform:translate(-50%,16px);z-index:90;padding:12px 20px;border-radius:999px;background:var(--vidro2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--linha);font-size:13px;opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--ease);color:var(--ink)}
.aviso.on{opacity:1;transform:translate(-50%,0)}

/* ---------- celular ---------- */
@media (max-width:760px){
  .nav .lbl{display:none}
  .nav button{padding:0 11px}
  .marca{font-size:18px}.mono{width:30px;height:30px;font-size:16px}
  .bloco{padding:11vh 18px}
  .duo .par,.duo.inv .par{grid-template-columns:1fr;gap:16px}
  .duo .par>:nth-child(2),.duo.inv .par>:nth-child(1){margin-top:0}
  .duo .par>:nth-child(2){width:74%;margin-left:auto;margin-top:-14vh;position:relative;z-index:1;box-shadow:0 20px 50px var(--sombra)}
  .duo.inv .par>:nth-child(1){width:74%;margin-top:0}
  .duo.inv .par>:nth-child(2){margin-top:-14vh;width:100%}
  .trio .grade{grid-template-columns:1fr 1fr}
  .trio .grade>:first-child{grid-row:auto;grid-column:1/3}
  .citacao .par,.citacao.inv .par,.detalhe .par{grid-template-columns:1fr;gap:34px}
  .citacao.inv .par>figure{order:0}
  .citacao figure{width:78%;margin:0 auto}
  .trilho .ph{height:52vh}.trilho .ph:nth-child(even){height:44vh}
  .capa h1{font-size:clamp(48px,min(24vw,calc(150vw / var(--w,6))),130px)}
  .capa-texto{bottom:10vh}
  .grade-gal{columns:2 140px;column-gap:8px}
  .grade-gal figure{margin-bottom:8px}
  .lupa img{max-width:100%;max-height:calc(100% - 140px)}
  .lupa .seta{display:none}
  .tv-ctrl .lbl{display:none}
  .menu .mini{width:48px;height:48px}
  .cartao{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;transition-duration:.01s!important}
}

/* versão de portfólio (pública): sem favoritas */
.portfolio .coracao,.portfolio .fav-barra,.portfolio .lupa [data-l="fav"]{display:none!important}