/* Letícia Cunha Braga, portfólio.
   Conceito: um livro em produção. Papel frio, tinta preta e a caneta carmim da revisora.
   A ousadia fica em três lugares: a pena, o modo revisão e a estante. O resto fica quieto. */
:root{
  --papel:#EFEFF0; --branco:#FFFFFF; --tinta:#0F1015; --carmim:#DE1644; --grafite:#5A5C66; --fio:#CFCFD4; --nevoa:#C8C9D1;
  --display:'Spectral','Times New Roman',serif;
  --texto:'Niramit',system-ui,sans-serif;
  --numero:'Anton',Impact,sans-serif;
  --mola:cubic-bezier(.22,.9,.24,1);
  --margem:clamp(20px,5vw,84px);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --graoT:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 -.78'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3C/svg%3E");
  --graoF:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 -.5'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  --veio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='60'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .55' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .05 0 0 0 0 .02 0 0 0 1.1 -.25'/%3E%3C/filter%3E%3Crect width='1400' height='60' filter='url(%23v)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);font-size:19px;line-height:1.55;overflow-x:hidden}
h1,h2,h3,p,ul,figure{margin:0}
ul{list-style:none;padding:0}
a{color:inherit}
img,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--carmim);outline-offset:4px}
.w{padding-inline:var(--margem);max-width:1760px;margin-inline:auto}

/* cabeçalho */
.topo{position:fixed;inset:0 0 auto;z-index:50;color:var(--branco);transition:background .3s,color .3s,box-shadow .3s}
.topo .w{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.topo.solto{background:var(--papel);color:var(--tinta);box-shadow:0 1px 0 var(--fio)}
.marca{display:block;width:62px;flex:none}
.marca img{width:100%}
.marca .e{display:none}
.topo.solto .marca .e{display:block}
.atual{font-family:var(--display);font-style:italic;font-size:19px;opacity:0;transition:opacity .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topo.solto .atual{opacity:1}

/* abertura */
.abertura{position:relative;min-height:100svh;background:var(--tinta);color:var(--branco);overflow:hidden;isolation:isolate;display:flex;align-items:flex-end}
#tinta{position:absolute;inset:0;width:100%;height:100%;z-index:-2;background:radial-gradient(60% 90% at 72% 40%,#7E0F2B,var(--tinta) 75%)}
.abertura .w{width:100%;padding-top:112px;padding-bottom:clamp(30px,5vh,56px)}
h1{padding-bottom:.08em;background-image:var(--graoT),linear-gradient(108deg,#FFFFFF 46%,#F7B3C3 74%,#DE1644 104%);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--display);font-weight:500;font-size:clamp(38px,5.1vw,100px);line-height:1.06;letter-spacing:-.022em;max-width:min(11.5em,60vw)}
.apres{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:clamp(26px,5vh,54px);max-width:32em;font-size:20px;line-height:1.45}
.apres b{font-weight:500}
.botoes{display:flex;flex-wrap:wrap;gap:14px}
.foto{position:absolute;right:max(var(--margem),calc((100vw - 1760px)/2 + var(--margem)));bottom:0;width:clamp(320px,35vw,660px);z-index:-1;pointer-events:none}
.foto img{width:100%;margin-bottom:-1px}

/* botões */
.b{display:inline-block;position:relative;overflow:hidden;isolation:isolate;padding:14px 32px;border-radius:40px;border:1.5px solid currentColor;background:none;font-weight:500;font-size:18px;line-height:1.2;text-decoration:none;cursor:pointer;transition:color .35s,border-color .35s}
.b.tintado::before{content:"";position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:14px;height:14px;border-radius:50%;background:var(--carmim);transform:translate(-50%,-50%) scale(0);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.b.tintado:hover,.b.tintado:focus-visible{color:var(--branco);border-color:var(--carmim)}
.b.tintado:hover::before,.b.tintado:focus-visible::before{transform:translate(-50%,-50%) scale(46)}
.b.ima{background:linear-gradient(100deg,#DE1644,#5E0B21 90%);border-color:var(--carmim);color:var(--branco);font-size:clamp(20px,2vw,28px);padding:clamp(18px,2vw,28px) clamp(36px,4vw,64px);border-radius:70px;transition:transform .3s var(--mola)}

/* títulos */
section{padding-block:clamp(72px,10vw,160px);position:relative}
h2{font-family:var(--display);font-weight:500;font-size:clamp(42px,7vw,118px);line-height:1.04;letter-spacing:-.022em;max-width:13em;padding-bottom:.08em;background-image:var(--graoT),linear-gradient(108deg,#0F1015 34%,#8E0D2B 72%,#DE1644 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.escuro h2{background-image:var(--graoT),linear-gradient(108deg,#FFFFFF 38%,#F7B3C3 66%,#DE1644 100%)}
.periodo{display:inline-block;position:relative;isolation:isolate;overflow:hidden;font-size:clamp(16px,1.25vw,19px);font-weight:500;line-height:1.25;color:#fff;margin-top:22px;padding:8px 22px;border-radius:30px;border:1px solid var(--carmim);background:linear-gradient(100deg,#DE1644,#5E0B21 70%,#0F1015)}
.periodo::after{content:"";position:absolute;inset:0;background-image:var(--graoF);opacity:.55;mix-blend-mode:overlay;z-index:-1}
.intro{max-width:36em;margin-top:26px;font-size:clamp(19px,1.5vw,22px);line-height:1.5;font-weight:300}
h3{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(30px,3.4vw,54px);line-height:1.08;letter-spacing:-.012em;margin:clamp(56px,7vw,110px) 0 clamp(22px,2.6vw,38px)}
.grao{position:relative;isolation:isolate}
.grao::before{content:"";position:absolute;inset:0;background-image:var(--grao);opacity:.09;mix-blend-mode:multiply;pointer-events:none;z-index:-1}
.escuro{background:var(--tinta);color:var(--branco)}
.escuro.grao::before{mix-blend-mode:overlay;opacity:.5}

/* sobre */
.frase{padding-bottom:.08em;background-image:var(--graoT),linear-gradient(108deg,#0F1015 40%,#8E0D2B 76%,#DE1644 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,86px);line-height:1.1;letter-spacing:-.018em;max-width:17em}
@supports (animation-timeline:view()){
  .frase span{animation:acende linear both;animation-timeline:view();animation-range:entry 12% cover 42%}
  @keyframes acende{from{opacity:.13}to{opacity:1}}
}
.sobre2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);margin-top:clamp(36px,5vw,76px)}
.sobre2 p{max-width:32em}
.sobre2 p+p{margin-top:14px}
.placar{display:flex;flex-wrap:wrap;gap:24px clamp(36px,6.5vw,120px);margin-top:clamp(52px,7vw,110px);border-top:1px solid var(--fio);padding-top:22px}
.placar>div{flex:0 0 auto;min-width:0;max-width:100%}
.placar small{display:block;font-size:17px;line-height:1.3;width:15em;max-width:100%;margin-top:6px}
.num{font-family:var(--numero);font-weight:400;font-size:clamp(58px,9.4vw,180px);line-height:1;display:inline-flex;overflow:hidden;height:1em}
.num .col{display:flex;flex-direction:column;transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.num .col>span{height:1em;display:block;text-align:center;background-image:var(--graoT),linear-gradient(180deg,#DE1644 18%,#7A0E2A 62%,#0F1015 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.escuro .num .col>span,.escuro2 .num .col>span{background-image:var(--graoT),linear-gradient(180deg,#FFFFFF 30%,#F2A3B5 72%,#DE1644 110%)}

/* sumário */

/* ícones, impressão fora de registro */
.ic{display:block;width:40px;height:40px;overflow:visible}
.ic .l{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ic .m{fill:var(--carmim);stroke:none;transform:translate(2.2px,2.2px);transition:transform .35s var(--mola)}
a:hover>.ic .m,.conts a:hover .ic .m{transform:none}

/* mosaico */
.mos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(30px,4vw,64px) clamp(18px,2.2vw,36px);align-items:start}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.desce{margin-top:clamp(24px,6vw,110px)}
.peca{min-width:0}
.fig{position:relative;display:block}
.fig>img,.fig>.vivo{border-radius:4px;overflow:hidden}
.fig img{width:100%}
[data-zoom]{cursor:zoom-in}
figcaption{margin-top:14px;font-size:17px;line-height:1.38;max-width:34em}
figcaption b{display:block;font-weight:600}
figcaption span{color:var(--grafite)}
.escuro figcaption span,.carmins figcaption span{color:var(--nevoa)}
.acao{margin-top:12px}
.acao .b{font-size:15px;padding:9px 22px}

/* peça que se mexe */
.vivo{position:relative;display:block;background:#000}
.vivo img{width:100%}
.vivo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.vivo.tocando video{opacity:1}

/* aparelhos */
.dev{transform-origin:50% 100%}
@supports (animation-timeline:view()){
  .dev{animation:assenta linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
  @keyframes assenta{from{transform:perspective(1700px) rotateX(11deg)}to{transform:none}}
}
.not .tela{border:clamp(6px,.7vw,11px) solid #17181E;border-bottom-width:clamp(9px,1vw,15px);border-radius:12px 12px 0 0;background:#000;overflow:hidden}
.not .base{height:clamp(8px,.9vw,13px);width:112%;margin-left:-6%;background:linear-gradient(180deg,#46474F,#1B1C22 70%);border-radius:1px 1px 10px 10px}
.not .tela img,.not .tela video{width:100%;display:block}
.tabl{background:#17181E;padding:clamp(6px,.7vw,11px);border-radius:clamp(10px,1.1vw,18px);box-shadow:inset 0 0 0 1px #3B3C45}
.tabl .fig>img,.tabl img,.tabl video{border-radius:6px;width:100%;display:block}
.fone{background:#17181E;padding:6px;border-radius:26px;box-shadow:inset 0 0 0 1px #3B3C45;max-width:300px;margin-inline:auto}
.fone .rola{border-radius:20px;overflow:hidden;aspect-ratio:9/18;position:relative;background:#000}
.fone .rola img{position:absolute;left:0;top:0;width:100%;transition:transform 5s cubic-bezier(.45,0,.3,1)}
.fone:hover .rola img{transform:translateY(var(--sobe,0))}
.mon .tela{border:clamp(7px,.8vw,12px) solid #17181E;border-radius:10px;background:#fff;overflow:hidden}
.mon .pe{width:17%;height:clamp(28px,4vw,60px);margin-inline:auto;background:linear-gradient(90deg,#24252C,#3E3F48 50%,#24252C)}
.mon .sapata{width:32%;height:8px;margin-inline:auto;background:#2D2E36;border-radius:6px 6px 2px 2px}

/* folhas de prova */
.folha{position:relative;background:var(--branco);padding:30px 26px 42px;box-shadow:0 24px 44px -26px rgba(15,16,21,.55);color:var(--tinta)}
.folha::before{content:"";position:absolute;inset:12px 8px 24px;pointer-events:none;--t:linear-gradient(var(--tinta),var(--tinta));
  background:var(--t) 0 18px/11px 1px no-repeat,var(--t) 18px 0/1px 11px no-repeat,var(--t) 100% 18px/11px 1px no-repeat,var(--t) calc(100% - 18px) 0/1px 11px no-repeat,var(--t) 0 calc(100% - 18px)/11px 1px no-repeat,var(--t) 18px 100%/1px 11px no-repeat,var(--t) 100% calc(100% - 18px)/11px 1px no-repeat,var(--t) calc(100% - 18px) 100%/1px 11px no-repeat}
.barra{position:absolute;left:26px;bottom:15px;display:flex;gap:2px}
.barra i{width:9px;height:9px;display:block}
.fileira{display:flex;gap:clamp(12px,1.8vw,30px);align-items:flex-start}
.fileira>.peca{flex:var(--r) 1 0;min-width:0}
@supports (animation-timeline:view()){
  .fileira>.peca{animation:flutua linear both;animation-timeline:view();animation-range:cover}
  .fileira>.peca:nth-child(even){--v:-34px}
  .fileira>.peca:nth-child(odd){--v:30px}
  @keyframes flutua{from{transform:translateY(var(--v))}to{transform:translateY(calc(var(--v) * -1))}}
}

/* roteiros */
.pauta{background-color:#F7F7F8;background-image:repeating-linear-gradient(transparent 0 37px,#D6DBE6 37px 38px),linear-gradient(90deg,transparent clamp(10px,3vw,46px),rgba(222,22,68,.45) clamp(10px,3vw,46px) calc(clamp(10px,3vw,46px) + 1.5px),transparent calc(clamp(10px,3vw,46px) + 1.5px))}
.caso{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.4vw,60px);align-items:start;margin-top:clamp(52px,6vw,96px)}
.caso h3{margin:0 0 6px}
.caso .tipo{font-size:18px;margin-bottom:16px}
.caso p.txt{max-width:30em}
.pagina{background:var(--branco);padding:14px;box-shadow:0 26px 40px -26px rgba(15,16,21,.5);transform:rotate(-1.1deg);margin-top:24px}
.pagina img{width:100%}
.quadro{position:relative}
.quadro video{width:100%;border-radius:4px;background:#000;display:block}
.som{position:absolute;right:12px;bottom:12px;background:rgba(15,16,21,.82);color:#fff;border:0;border-radius:30px;padding:7px 16px;font-size:14px;cursor:pointer}
.gifs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.gifs video{width:100%;border-radius:3px;display:block;background:#ddd}

/* estante */
.parede{position:relative;isolation:isolate;padding-top:clamp(50px,7vw,90px);background:radial-gradient(62% 110% at 50% -8%,#50515E 0,#272831 44%,#14151B 100%);overflow:hidden}
.placa{display:block}
.parede::before{content:"";position:absolute;inset:0;background-image:var(--grao);opacity:.4;mix-blend-mode:overlay;pointer-events:none;z-index:-1}
.fila{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:2px;margin-bottom:-6px;z-index:2;padding-inline:var(--margem);min-height:356px}
.liv{position:relative;flex:none;display:block;width:var(--e);height:var(--a);text-decoration:none;perspective:1100px;perspective-origin:50% 42%;transition:width .68s var(--mola),margin .68s var(--mola);z-index:1;background:none;border:0;padding:0;color:inherit}
.liv.encostado{margin-left:34px;transform:rotate(-6deg);transform-origin:100% 100%;transition:width .68s var(--mola),transform .68s var(--mola),margin .68s var(--mola)}
.liv.encostado.aberto{transform:none;margin-left:6px}
.corpo{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:var(--e) 50%;transition:transform .74s var(--mola)}
.lomb{position:absolute;left:0;top:0;width:var(--e);height:100%;background:var(--cor);color:var(--cl);border-radius:2px 1px 1px 2px;overflow:hidden;box-shadow:5px 0 8px -3px rgba(0,0,0,.55),0 5px 6px -2px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:13px 0 11px}
.lomb::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(255,255,255,.2) 16%,rgba(255,255,255,.06) 42%,rgba(0,0,0,.1) 72%,rgba(0,0,0,.46) 100%);pointer-events:none}
.lomb::after{content:"";position:absolute;inset:0;background-image:var(--grao);opacity:.22;mix-blend-mode:overlay;pointer-events:none}
.lomb>*{position:relative;z-index:1}
.lomb i{display:block;width:62%;height:1px;background:currentColor;opacity:.5;flex:none}
.lomb .tit{writing-mode:vertical-rl;font-family:var(--display);font-weight:600;font-size:var(--ft,15px);line-height:1.06;text-align:center;flex:1;display:flex;align-items:center;justify-content:center;padding-block:8px;min-height:0}
.lomb .aut{writing-mode:vertical-rl;font-size:11px;font-weight:500;letter-spacing:.03em;opacity:.86;flex:none;padding-top:7px}
.lomb svg{width:20px;height:9px;flex:none;margin-top:6px;fill:none;stroke:currentColor;stroke-width:1.5;opacity:.9}
.cap{position:absolute;left:var(--e);top:0;width:var(--l);height:100%;transform-origin:0 50%;transform:rotateY(90deg);background:#222;box-shadow:0 20px 30px -10px rgba(0,0,0,.8)}
.cap img{width:100%;height:100%;object-fit:cover;max-width:none}
.cap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.38) 0,rgba(255,255,255,.16) 2.6%,rgba(0,0,0,.14) 5%,transparent 9%,transparent 88%,rgba(255,255,255,.08) 100%)}
.liv.aberto{width:calc(var(--l) * .985 + var(--e) * .28);z-index:6}
.liv.aberto .corpo{transform:translateX(calc(var(--e) * -.74)) translateZ(46px) rotateY(-78deg)}
.tabua{position:relative;z-index:1}
.tampo{height:12px;background:linear-gradient(180deg,#5E3A22,#8A5A35);box-shadow:inset 0 3px 5px -2px rgba(0,0,0,.65)}
.frente{height:20px;background:var(--veio),linear-gradient(180deg,#8E5F39,#5E3A21 70%,#42281A);box-shadow:0 26px 30px -8px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.22)}
.soalho{height:clamp(26px,3vw,44px)}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding-block:24px;min-height:128px;border-bottom:1px solid var(--fio)}
.ficha b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,34px);line-height:1.14;max-width:26em}
.ficha small{display:block;font-size:17px;color:var(--grafite);margin-top:5px;line-height:1.3}
.ficha.noite{border-color:#3B3C45}
.ficha.noite small{color:var(--nevoa)}
.ficha [hidden]{display:none}
.tablet-apoiado{flex:none;width:clamp(230px,24vw,400px);margin-left:clamp(26px,4vw,70px);transform:rotate(1.4deg);transform-origin:100% 100%}
.tablet-apoiado video{width:100%;display:block;border-radius:6px}
.alem{margin-top:clamp(44px,5vw,76px)}

/* início de carreira */
.fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.num.medio{font-size:clamp(50px,6.4vw,112px)}
.quatro{justify-content:space-between}

/* depoimentos */
.deps{columns:3;column-gap:clamp(14px,1.6vw,26px);margin-top:clamp(34px,4vw,60px)}
.deps img{width:100%;border-radius:12px;margin-bottom:clamp(14px,1.6vw,26px);break-inside:avoid}

/* contatos */
.contatos{background:var(--papel);overflow:hidden}
.contatos h2{max-width:none}
.contato2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-top:clamp(30px,4vw,64px)}
.conts{margin-top:clamp(36px,4vw,64px);border-top:1px solid var(--tinta)}
.conts a{display:flex;align-items:center;gap:18px;text-decoration:none;border-bottom:1px solid var(--fio);padding:16px 4px;font-family:var(--display);font-size:clamp(18px,2.6vw,40px);line-height:1.15;overflow-wrap:anywhere}
.conts .ic{flex:none}

/* ampliação */
.ampliada{position:fixed;inset:0;z-index:80;background:rgba(15,16,21,.94);display:grid;place-items:center;padding:clamp(14px,3vw,44px);cursor:zoom-out}
.ampliada[hidden]{display:none!important}
.ampliada img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
::view-transition-group(peca){animation-duration:.5s;animation-timing-function:var(--mola)}

main{overflow-x:clip}
/* pena: metal champanhe; a tinta carmim sobe da ponta ao passar sobre algo clicável */
html.pena,html.pena *{cursor:none!important}
#pena{position:fixed;left:0;top:0;width:0;height:0;z-index:999;pointer-events:none;display:none;will-change:transform}
html.pena #pena.pronta{display:block}
#pena svg{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;filter:drop-shadow(5px 8px 5px rgba(15,16,21,.34))}
#pena .inclina{transform:rotate(-32deg);transition:transform .32s var(--mola)}
#pena .encher{transform:scaleY(0);transform-origin:0 0;transition:transform .42s cubic-bezier(.3,.7,.2,1)}
#pena .gota{transform:scale(0);transition:transform .16s}
#pena .brilho{transition:opacity .3s}
#pena .contorno{transition:stroke .3s,stroke-width .3s}
#pena[data-e=sobre] .contorno,#pena[data-e=clique] .contorno{stroke:#F3DFA6;stroke-width:.9}
#pena[data-e=sobre] .inclina{transform:rotate(-14deg) scale(1.1)}
#pena[data-e=sobre] .encher,#pena[data-e=clique] .encher{transform:scaleY(1)}
#pena[data-e=sobre] .brilho,#pena[data-e=clique] .brilho{opacity:.25}
#pena[data-e=clique] .inclina{transform:rotate(-14deg) scale(1.08,.9)}
#pena[data-e=clique] .gota{transform:scale(1)}

@media (max-width:980px){
  body{font-size:18px}
  .foto{position:relative;right:auto;width:min(84vw,430px);margin:26px 0 0 auto;order:2}
  .abertura{flex-direction:column;align-items:stretch;justify-content:flex-end}
  .abertura .w{padding-bottom:0}
  h1{max-width:none}
  .apres{margin-bottom:0}
  .sobre2,.caso{grid-template-columns:minmax(0,1fr)}
  .s3,.s4,.s5,.s6,.s7,.s8{grid-column:span 12}
  .s3.par{grid-column:span 6}
  .desce{margin-top:0}
  .placar{gap:26px}
  .placar>div{flex:1 1 100%}
  .quatro>div{flex:1 1 40%}
  .fileira{flex-wrap:wrap}
  .fileira>.peca{flex:1 1 44%;animation:none}
  .atual{display:none}
  .fila{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
  .tablet-apoiado{width:280px}
  .ficha{grid-template-columns:minmax(0,1fr)}
  .ficha .b{justify-self:start}
  .deps{columns:1}
  .contato2{grid-template-columns:minmax(0,1fr)}
  .folha{padding:24px 20px 36px}
  .folha::before{inset:8px 4px 20px;background-size:9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px}
  .barra{left:20px;bottom:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ========== manchas granuladas da identidade ========== */
.mancha{position:absolute;pointer-events:none;z-index:-1;max-width:none}
.mancha-foto{position:absolute;z-index:-1;pointer-events:none;bottom:0;right:max(calc(var(--margem) + 4vw),calc((100vw - 1760px)/2 + var(--margem) + 4vw));width:clamp(240px,26vw,500px);max-width:none}
.sb{left:-6vw;top:clamp(250px,22vw,420px);width:clamp(180px,21vw,400px);transform:rotate(-12deg)}
.ct{right:-10vw;top:-6vw;width:clamp(300px,42vw,820px);opacity:.75}
.ctt{right:-5vw;bottom:-12vw;width:clamp(240px,30vw,560px);opacity:.9}
.semfolga{padding:0}
#sobre,#contatos{overflow:hidden}
#conteudo{overflow:clip}
.fundoCarmim{background:linear-gradient(125deg,#0F1015 0,#4A0918 48%,#DE1644 118%)}
.fundoCarmim.grao::before{opacity:.75}
.pin{position:relative}
.palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* ========== console ========== */
.cNum{display:inline-block;font-size:15px;font-weight:500;padding:4px 14px;border-radius:30px;border:1px solid rgba(255,255,255,.4);margin-bottom:16px;font-variant-numeric:tabular-nums}

/* ========== sala ========== */
.salaPin{height:280vh}
.salaP{background:#050507;perspective:760px;perspective-origin:50% 47%}
.camera{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.muro,.chao,.teto{position:absolute;left:0;top:0;backface-visibility:hidden}
.muro{height:640px;isolation:isolate}
.placa{display:block}
.muro::before{content:"";position:absolute;inset:0;background-image:var(--graoF);opacity:.42;mix-blend-mode:overlay;z-index:-1}
.muro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;background:linear-gradient(180deg,#1A1B21,#08090C);box-shadow:0 -1px 0 rgba(255,255,255,.08);z-index:-1}
.fundo{width:1220px;transform:translate(-610px,-320px) translateZ(-520px);background:radial-gradient(70% 90% at 50% 18%,#3A0A18,#14060B 70%,#07070A)}
.esq,.dir{width:940px;background:linear-gradient(90deg,#3A0A18,#8E0D2B 46%,#25070F)}
.esq{transform:translate(-470px,-320px) translateX(-610px) translateZ(-50px) rotateY(90deg)}
.dir{transform:translate(-470px,-320px) translateX(610px) translateZ(-50px) rotateY(-90deg)}
.chao{width:1220px;height:940px;transform:translate(-610px,-470px) translateY(320px) translateZ(-50px) rotateX(90deg);background:radial-gradient(34% 26% at 32% 12%,rgba(255,226,206,.26),transparent 70%),radial-gradient(22% 22% at 78% 12%,rgba(255,226,206,.2),transparent 70%),radial-gradient(26% 30% at 6% 52%,rgba(255,120,150,.2),transparent 70%),radial-gradient(26% 30% at 94% 52%,rgba(255,120,150,.2),transparent 70%),linear-gradient(0deg,#17181E,#0B0C10)}
.teto{width:1220px;height:940px;transform:translate(-610px,-470px) translateY(-320px) translateZ(-50px) rotateX(-90deg);background:repeating-linear-gradient(90deg,transparent 0 300px,#26272E 300px 306px),#08090C}
.pintado{position:absolute;left:0;right:0;top:34px;margin:0;text-align:center;font-style:normal;font-size:46px;line-height:1.1;background-image:var(--graoT),linear-gradient(100deg,#FFF 44%,#F7B3C3 72%,#DE1644 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.spot{position:absolute;top:0;height:560px;pointer-events:none;background:linear-gradient(180deg,rgba(255,236,220,.34),rgba(255,236,220,.06) 80%,transparent);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen;z-index:0}
.quadro{position:absolute;z-index:1;background:#fff;padding:13px;box-shadow:0 0 0 2px #0B0C10,0 34px 44px -18px rgba(0,0,0,.95),0 0 70px -10px rgba(255,236,220,.38);cursor:zoom-in;transition:box-shadow .3s}
.quadro img{width:100%;display:block}
.quadro:hover{box-shadow:0 0 0 2px #DE1644,0 34px 44px -18px #000,0 0 80px 0 rgba(222,22,68,.75)}
.placa{position:absolute;z-index:1;width:280px;background:#F7F7F8;color:#0F1015;padding:9px 12px;font-size:12px;line-height:1.3;box-shadow:0 8px 10px -6px #000;margin:0;max-width:none}
.placa b{display:block;font-family:var(--display);font-size:14.5px;font-weight:600}

/* ========== pilha ========== */
.pilha{position:relative}
.pilha article{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,70px);align-items:center;padding:clamp(80px,7vw,110px) var(--margem) clamp(30px,4vw,60px);transform-origin:50% 0;box-shadow:0 -30px 60px -20px rgba(0,0,0,.55);will-change:transform}
.pilha article::before{content:"";position:absolute;inset:0;background-image:var(--graoF);opacity:.42;mix-blend-mode:overlay;z-index:-1;pointer-events:none}
.pilha .fa{background:radial-gradient(70% 90% at 80% 20%,#3A0A18,#0F1015 70%);color:#fff}
.pilha .fb{background:linear-gradient(125deg,#5E0B21,#DE1644 62%,#F0335E);color:#fff}
.pilha .fc{background:linear-gradient(135deg,#FFFFFF,#E1E1E5);color:var(--tinta)}
.pilha .fc::before{mix-blend-mode:multiply;opacity:.16}
.pilha .txt{min-width:0;position:relative;z-index:2}
.pilha .fa .txt h2,.pilha .fb .txt h2{background-image:var(--graoT),linear-gradient(108deg,#FFF 50%,#F7B3C3 100%)}
.pilha .txt h2{font-size:clamp(30px,3vw,50px);margin-bottom:clamp(20px,3vw,44px);max-width:none}
.pilha .txt h3{margin:0 0 14px;font-style:normal;font-size:clamp(36px,5vw,92px);line-height:1;letter-spacing:-.022em;padding-bottom:.08em;background-image:var(--graoT),linear-gradient(108deg,#FFF 40%,#F7B3C3 76%,#FFD8E1 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pilha .fc .txt h3{background-image:var(--graoT),linear-gradient(108deg,#0F1015 34%,#8E0D2B 72%,#DE1644 100%)}
.pilha .fa .txt h3{background-image:var(--graoT),linear-gradient(108deg,#FFF 38%,#F7B3C3 68%,#DE1644 104%)}
.pilha .txt p{max-width:24em;font-size:clamp(18px,1.4vw,21px);line-height:1.42;font-weight:300}
.obra{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;transform:translateY(calc((1 - var(--q,1)) * 70px)) scale(calc(.92 + var(--q,1) * .08));will-change:transform}
.obra .not{width:100%;max-width:min(100%,calc((100vh - 170px) * 1.58))}
.obra .not,.obra .mon,.obra .tabl{box-shadow:none}
.obra .not{filter:drop-shadow(0 50px 50px rgba(0,0,0,.6))}
.obra .mon{width:100%;max-width:calc((100vh - 240px) * 1.6);filter:drop-shadow(0 40px 40px rgba(15,16,21,.35))}
.leque3{height:calc(100vh - 170px)}
.leque3 .fone{position:relative;z-index:3;height:100%;width:auto;aspect-ratio:9/16.2;max-width:none;box-shadow:inset 0 0 0 1px #3B3C45,0 50px 60px -24px rgba(15,16,21,.65)}
.leque3 .fone .rola{height:100%;aspect-ratio:auto}
.leque3 .fone .rola img{position:static;width:100%;height:100%;object-fit:cover;transition:none;transform:none!important}
.p1{right:-9vw;top:-12vh;width:min(54vw,860px);opacity:.82}
.leque3 .f1,.leque3 .f2{position:absolute;top:50%;width:min(34%,340px);background:#fff;padding:10px;box-shadow:0 30px 40px -20px rgba(15,16,21,.5)}
.leque3 .f1 img,.leque3 .f2 img{width:100%;display:block}
.leque3 .f1{left:3%;transform:translateY(-50%) rotate(-7deg)}
.leque3 .f2{right:3%;transform:translateY(-50%) rotate(7deg)}
.duoT .tabl{position:absolute;width:74%;box-shadow:0 44px 60px -22px rgba(0,0,0,.75),inset 0 0 0 1px #3B3C45}
.duoT{height:calc(100vh - 170px)}
.duoT .t1{left:0;top:6%;transform:rotate(-4deg)}
.duoT .t2{right:0;bottom:6%;transform:rotate(2.5deg);z-index:2}
.duoF{gap:0}
.duoF .folha{padding:24px 20px 34px;flex:0 0 auto;box-shadow:0 44px 60px -24px rgba(0,0,0,.7)}
.duoF .folha img{height:calc(100vh - 262px);width:auto;max-width:none;display:block}
.duoF .d1{transform:rotate(-3deg);z-index:1;margin-right:-5%}
.duoF .d2{transform:rotate(2.5deg) translateY(14px);z-index:2}
.trio{height:calc(100vh - 170px)}
.trio>div{position:absolute;background:#fff;padding:10px;box-shadow:0 40px 50px -22px rgba(0,0,0,.8)}
.trio img{width:100%;display:block}
.trio .c1{width:36%;left:0;top:10%;transform:rotate(-5deg)}
.trio .c3{width:36%;right:0;top:16%;transform:rotate(5deg)}
.trio .c2{height:92%;left:50%;top:4%;transform:translateX(-50%);z-index:2;aspect-ratio:611/871}
.trio .c2 img{height:100%;width:100%;object-fit:cover}

/* ========== cilindro ========== */
.cilPin{height:460vh}
.cilP{isolation:isolate;background:radial-gradient(60% 55% at 50% 42%,#4A0918,#0F1015 75%);perspective:2100px;perspective-origin:50% 42%;cursor:grab;touch-action:pan-y;user-select:none}
.cilP::before{content:"";position:absolute;inset:0;background-image:var(--graoF);opacity:.5;mix-blend-mode:overlay;z-index:-1;pointer-events:none}
.cilP::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,transparent,rgba(5,5,7,.92));z-index:1;pointer-events:none}
.cilP.pega{cursor:grabbing}
.cl{left:50%;top:50%;width:min(62vw,860px);transform:translate(-50%,-52%);opacity:.5;z-index:-1}
.atras{position:absolute;left:0;right:0;top:50%;transform:translateY(-54%);text-align:center;max-width:none;font-size:clamp(46px,9.6vw,190px);line-height:.98;padding-inline:var(--margem);z-index:3;pointer-events:none;will-change:opacity}
.aro{position:absolute;left:50%;top:44%;width:0;height:0;transform-style:preserve-3d;will-change:transform;z-index:0}
.pano{position:absolute;left:0;top:0;margin:0;width:var(--pw);height:var(--ph);background:#fff;padding:clamp(10px,1vw,16px) clamp(10px,1vw,16px) clamp(16px,1.6vw,24px);display:flex;align-items:center;justify-content:center;box-shadow:0 40px 60px -26px #000;transition:box-shadow .3s;-webkit-box-reflect:below 5px linear-gradient(transparent 82%,rgba(255,255,255,.2))}
.pano.frente{box-shadow:0 40px 90px -16px rgba(222,22,68,.85)}
.pano img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;pointer-events:none;display:block}
.marcas{position:absolute;inset:3px;pointer-events:none;--t:linear-gradient(#0F1015,#0F1015);background:var(--t) 0 0/9px 1px no-repeat,var(--t) 0 0/1px 9px no-repeat,var(--t) 100% 0/9px 1px no-repeat,var(--t) 100% 0/1px 9px no-repeat,var(--t) 0 100%/9px 1px no-repeat,var(--t) 0 100%/1px 9px no-repeat,var(--t) 100% 100%/9px 1px no-repeat,var(--t) 100% 100%/1px 9px no-repeat}
.cilT{position:absolute;left:0;right:0;bottom:clamp(14px,3vh,34px);z-index:2;text-align:center;color:#fff;will-change:opacity}
.cilT b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.3vw,36px);line-height:1.1}
.cilT span{color:#D9D9E0;font-size:16px}

@media (max-width:980px){
  .pilha article{position:relative;height:auto;grid-template-columns:minmax(0,1fr);padding-block:clamp(60px,12vw,90px) 48px}
  .obra{transform:none}
  .leque3,.duoT,.trio{height:auto;min-height:0}
  .leque3 .fone{height:min(74vh,600px)}
  .leque3 .f1,.leque3 .f2{width:30%}
  .duoT{display:block}
  .duoT .tabl{position:relative;width:92%;left:auto;right:auto;top:auto;bottom:auto}
  .duoT .t2{margin:-10% 0 0 auto}
  .duoF .folha{padding:14px 12px 24px}
  .duoF .folha img{height:auto;width:100%;max-width:100%}
  .duoF .d1,.duoF .d2{flex:0 0 52%}
  .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .trio>div{position:relative;width:auto!important;height:auto!important;left:auto;right:auto;top:auto;transform:none;aspect-ratio:auto;padding:5px}
  .trio .c2 img{height:auto}
  .obra .not,.obra .mon{max-width:100%}
  .salaPin{height:220vh}
  .cilPin{height:360vh}
  .atras{font-size:13vw}
  .sb,.p1{display:none}
  .periodo{font-size:15px;padding:7px 16px;border-radius:20px}
  .aro{top:50%}
  .mancha-foto{right:auto;left:38vw;bottom:0;width:42vw}
}
@media (prefers-reduced-motion:reduce){.obra{transform:none}}

/* ========== rodada 5 ========== */
p,small,li,figcaption span,.ficha small{text-wrap:pretty}
h1,h2,h3,.frase,.placar small,.ficha b,blockquote,figcaption b{text-wrap:balance}

/* sobre */
.sobreG{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,70px);align-items:center}
.sobreG .frase{font-size:clamp(30px,4vw,70px)}
.bio{margin-top:clamp(20px,2.4vw,34px);max-width:40em}
.bio p+p{margin-top:12px}
.formaSobre{width:100%;max-width:440px;justify-self:end;transform:rotate(-10deg)}

/* números ao lado do texto menor */
.placar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px clamp(20px,3vw,50px);margin-top:clamp(40px,5vw,72px);padding-top:clamp(20px,2.4vw,32px)}
.placar>div{display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);min-width:0;flex:none;max-width:none}
.placar .num{flex:none;font-size:clamp(46px,6vw,112px)}
.placar .num.medio{font-size:clamp(46px,5vw,92px)}
.placar small{width:auto;max-width:13em;margin:0;font-size:clamp(15px,1.15vw,18px)}
.quatro{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}

/* etiquetas */
.periodo.tipo{font-size:15px;margin:6px 0 18px;padding:7px 18px}
.caso .tipo{font-size:15px}

/* console */

/* contraste dos aparelhos */
.fa .not .tela{border-color:#DDDEE3}
.fa .not .base{background:linear-gradient(180deg,#F3F3F5,#A9ABB4 70%)}
.prata{background:linear-gradient(160deg,#F7F7F9,#B6B8C0);box-shadow:inset 0 0 0 1px #fff,0 30px 40px -22px #000}

/* lombadas */
.lomb{padding:0;border-radius:4px 4px 3px 3px;justify-content:flex-start;box-shadow:6px 0 8px -3px rgba(0,0,0,.6),0 6px 7px -2px rgba(0,0,0,.65)}
.lomb::before{background:linear-gradient(90deg,rgba(0,0,0,.58) 0,rgba(0,0,0,.12) 9%,rgba(255,255,255,.3) 24%,rgba(255,255,255,.08) 44%,rgba(0,0,0,.08) 70%,rgba(0,0,0,.62) 100%)}
.lomb::after{opacity:.34}
.lomb i.cab{width:100%;height:4px;opacity:1;flex:none;background:repeating-linear-gradient(90deg,#F3E9D2 0 2px,#DE1644 2px 4px)}
.lomb i.fio{width:66%;height:4px;margin:9px 0;opacity:.8;background:none;border-top:1px solid currentColor;border-bottom:1px solid currentColor;flex:none}
.lomb .aut{padding:0;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.9}
.lomb .tit{letter-spacing:.015em;font-weight:600;line-height:1.05;padding-block:10px}
.v-faixa i.fio{width:100%;height:clamp(14px,5%,20px);margin:0;border:0;background:var(--cl);opacity:.92}
.v-faixa .aut{padding-top:10px}
.v-etiqueta .tit{flex:0 1 auto;margin-block:auto;width:76%;background:var(--cl);color:var(--cor);padding:14px 3px;border-radius:1px;box-shadow:0 0 0 1px var(--cl),inset 0 0 0 2px var(--cor)}
.v-ouro{color:#E5C888}
.v-ouro .tit{background:linear-gradient(180deg,#F8E6B5,#C9A25A 55%,#F2DBA3);-webkit-background-clip:text;background-clip:text;color:transparent}
.liv:hover .lomb{filter:brightness(1.12)}
.fila{min-height:366px}

/* mesa de folders */
.mesa3d{position:relative;isolation:isolate;margin-top:clamp(40px,5vw,70px);background:linear-gradient(120deg,#0F1015 0,#4A0918 46%,#DE1644 125%);color:#fff;overflow:hidden}
.mesa3d::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--graoF);opacity:.55;mix-blend-mode:overlay}
.mesaG{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,5vw,80px) clamp(24px,3vw,48px);padding-block:clamp(56px,7vw,110px);align-items:end}
.mesa3d figure{cursor:zoom-in;min-width:0}
.mesa3d figcaption{margin-top:30px;cursor:default;max-width:36em}
.mesa3d figcaption b{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.7vw,26px);line-height:1.15}
.mesa3d figcaption span{display:block;color:#EFEFF0}
.mesa3d .acao{margin-top:12px}
.palco3{perspective:1800px;display:flex;justify-content:center;position:relative}
.palco3::after{content:"";position:absolute;left:12%;right:8%;bottom:-20px;height:34px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent);z-index:-1}
.dobra{--pw:clamp(84px,12.6vw,214px);--ph:calc(var(--pw) * 2.122)}
.pn{width:var(--pw);height:var(--ph);background:var(--i) 0 0/300% 100% no-repeat #fff;transform-style:preserve-3d;transform-origin:0 50%;transition:transform .8s var(--mola)}
.pn>i{position:absolute;inset:0;pointer-events:none}
.pn.dp1{position:relative;right:auto;top:auto;opacity:1;margin-right:calc(var(--pw) * 1.9);transform:rotateY(19deg)}
.pn.dp1>i{background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(0,0,0,.2))}
.pn.dp2{position:absolute;left:100%;top:0;background-position:50% 0;transform:rotateY(-38deg)}
.pn.dp2>i{background:linear-gradient(90deg,rgba(0,0,0,.26),rgba(255,255,255,.12))}
.pn.dp3{position:absolute;left:100%;top:0;background-position:100% 0;transform:rotateY(38deg)}
.pn.dp3>i{background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(0,0,0,.2))}
.dobra:hover .pn.dp1{transform:rotateY(3deg)}
.dobra:hover .pn.dp2{transform:rotateY(-5deg)}
.dobra:hover .pn.dp3{transform:rotateY(5deg)}
.obra3d{--w:clamp(230px,31vw,520px);--h:calc(var(--w) * .707);--d:34px}
.livro3d{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateY(-27deg) rotateX(9deg);transition:transform .9s var(--mola)}
.obra3d:hover .livro3d{transform:rotateY(-7deg) rotateX(3deg)}
.livro3d i{position:absolute;display:block}
.livro3d .fr{inset:0;background-size:cover;transform:translateZ(calc(var(--d) / 2));box-shadow:inset 7px 0 8px -5px rgba(0,0,0,.45);border-radius:1px 3px 3px 1px}
.livro3d .ba{inset:0;background:#2F6B21;transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.livro3d .di{top:0;height:100%;width:var(--d);left:calc((var(--w) - var(--d)) / 2);transform:rotateY(90deg) translateZ(calc(var(--w) / 2 - 2px));background:repeating-linear-gradient(90deg,#F4EFE1 0 1px,#CFC8B4 1px 2px)}
.livro3d .es{top:0;height:100%;width:var(--d);left:calc((var(--w) - var(--d)) / 2);transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));background:linear-gradient(90deg,#27581C,#4C9134,#27581C)}
.livro3d .to{left:0;width:100%;height:var(--d);top:calc((var(--h) - var(--d)) / 2);transform:rotateX(90deg) translateZ(calc(var(--h) / 2 - 2px));background:repeating-linear-gradient(0deg,#F4EFE1 0 1px,#CFC8B4 1px 2px)}
.livro3d .ab{left:0;width:100%;height:var(--d);top:calc((var(--h) - var(--d)) / 2);transform:rotateX(-90deg) translateZ(calc(var(--h) / 2 - 2px));background:repeating-linear-gradient(0deg,#E6E0CE 0 1px,#BDB6A2 1px 2px)}

/* tablet em sequência */
.tablet-apoiado .tabl{padding:clamp(7px,.7vw,11px)}
.passa{position:relative;aspect-ratio:400/304;border-radius:6px;overflow:hidden;background:#000}
.passa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:passa 16s infinite;border-radius:0}
.passa img:nth-child(1){opacity:1;animation-delay:0s}.passa img:nth-child(2){animation-delay:4s}.passa img:nth-child(3){animation-delay:8s}.passa img:nth-child(4){animation-delay:12s}
@keyframes passa{0%,25%{opacity:1}31%,94%{opacity:0}100%{opacity:1}}

/* película */
#inicio{overflow:clip}
.pelicula{position:relative;margin-top:clamp(44px,5vw,76px);background:#08090C;padding:30px 0;transform:rotate(-1.3deg) scale(1.03);z-index:2;box-shadow:0 24px 40px -22px rgba(15,16,21,.8);overflow:hidden}
.pelicula::before,.pelicula::after{content:"";position:absolute;left:0;right:0;height:11px;background:repeating-linear-gradient(90deg,#EFEFF0 0 15px,transparent 15px 36px);opacity:.9;z-index:2}
.pelicula::before{top:10px}.pelicula::after{bottom:10px}
.rolo{display:flex;gap:10px;width:max-content;animation:rolo 70s linear infinite}
.pelicula:hover .rolo{animation-play-state:paused}
.rolo img{height:clamp(160px,19vw,300px);width:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px;cursor:zoom-in}
@keyframes rolo{to{transform:translateX(calc(-50% - 5px))}}

/* mural */
.mural{position:relative;isolation:isolate;margin-top:-22px;padding-block:clamp(70px,8vw,120px);background:linear-gradient(115deg,#DE1644 -10%,#5E0B21 46%,#0F1015 100%);color:#fff}
.mural::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--graoF);opacity:.6;mix-blend-mode:overlay}
.muralG{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,70px);align-items:center}
.navega{background:#F6F6F8;border-radius:10px;overflow:hidden;box-shadow:0 44px 70px -30px #000;color:var(--tinta)}
.barraN{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#E4E5E9;font-size:13px}
.barraN i{width:10px;height:10px;border-radius:50%;background:#B9BAC2}
.barraN span{margin-left:10px;flex:1;background:#fff;border-radius:20px;padding:2px 12px;color:var(--grafite);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.navega img{width:100%}
.navega figcaption{margin:0;padding:14px 16px}
.navega figcaption span{color:var(--grafite)}
.recortes{display:grid}
.recorte{background:#fff;color:var(--tinta);padding:12px 12px 14px;box-shadow:0 34px 50px -24px #000;transition:transform .6s var(--mola);position:relative}
.recorte img{width:100%;cursor:zoom-in}
.recorte figcaption{margin-top:10px}
.recorte figcaption b{font-family:var(--display);font-size:18px;line-height:1.18}
.recorte figcaption span{color:var(--grafite);font-size:15px}
.r1{transform:rotate(-2.2deg);width:88%;z-index:1}
.r2{transform:rotate(2deg);width:88%;justify-self:end;margin-top:14px;z-index:2}
.recorte:hover{transform:rotate(0) translateY(-8px);z-index:3}

/* recados */
.recados{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,6vw,110px);align-items:center}
.recados h2{font-size:clamp(26px,2.6vw,40px);max-width:none}
.recados blockquote{margin:clamp(22px,3vw,44px) 0;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(32px,4.5vw,76px);line-height:1.08;letter-spacing:-.015em;color:#fff;min-height:3.3em;transition:opacity .35s}
.recados blockquote.troca{opacity:0}
.recCtrl{display:flex;align-items:center;gap:10px;font-size:16px;font-variant-numeric:tabular-nums}
.recCtrl button{width:46px;height:46px;border-radius:50%;background:none;border:1.5px solid rgba(255,255,255,.7);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .25s,border-color .25s}
.recCtrl button:hover{background:#fff;color:var(--carmim);border-color:#fff}
.recCtrl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.recCtrl span{margin-left:8px}
.celRec{width:clamp(270px,min(26vw,44vh),400px);padding:9px;border-radius:40px;background:linear-gradient(160deg,#FBFBFC,#B0B2BB);box-shadow:0 60px 90px -40px #000,inset 0 0 0 1px #fff}
.telaRec{position:relative;aspect-ratio:9/15.6;border-radius:32px;overflow:hidden;background:#0B141A}
.fundoRec{position:absolute;inset:-10%;width:120%;height:120%;max-width:none;object-fit:cover;filter:blur(26px) brightness(.5)}
.printRec{position:absolute;left:4%;top:50%;width:92%;transform:translateY(-50%);border-radius:12px;cursor:zoom-in;box-shadow:0 20px 34px -14px #000;transition:opacity .35s}
.printRec.troca{opacity:0}
.seg{position:absolute;left:14px;right:14px;top:16px;display:flex;gap:4px;z-index:2}
.seg i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;display:block}
.seg b{display:block;height:100%;width:0;background:#fff}
.seg i.feito b{width:100%}
.seg i.vai b{animation:enche 7s linear forwards}
.recados:hover .seg i.vai b{animation-play-state:paused}
@keyframes enche{to{width:100%}}

/* contatos */
.contatos{background:linear-gradient(110deg,#0F1015 12%,#4A0918 62%,#DE1644 130%);padding-block:clamp(48px,5vw,76px);overflow:hidden}
.contatos.grao::before{opacity:.65}
.cGrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:clamp(24px,4vw,70px);align-items:center}
.contatos h2{font-size:clamp(30px,3.2vw,50px)}
.cEsq p{margin-top:8px;font-size:17px;font-weight:300;max-width:24em}
.zona-ima{display:inline-block;padding:22px 26px 6px 0}
.b.ima{font-size:17px;padding:13px 30px;border-radius:40px;background:#fff;color:var(--tinta);border-color:#fff}
.conts{margin:0;border-top:1px solid rgba(255,255,255,.28)}
.conts a{gap:14px;padding:12px 2px;font-family:var(--texto);font-size:clamp(16px,1.25vw,19px);font-weight:400;border-bottom:1px solid rgba(255,255,255,.28);transition:padding .3s var(--mola),color .25s}
.conts a:hover{padding-left:10px;color:#FFD3DD}
.conts svg{flex:none;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:980px){
  .sobreG{grid-template-columns:minmax(0,1fr)}
  .formaSobre{max-width:220px;justify-self:center}
  .placar,.quatro{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
  .mesaG,.muralG,.recados,.cGrid{grid-template-columns:minmax(0,1fr)}
  .dobra{--pw:26vw}
  .obra3d{--w:64vw;--d:22px}
  .celRec{justify-self:center;width:min(78vw,340px)}
  .recados blockquote{min-height:0}
  .r1,.r2{width:94%}
  /* sala vira uma parede vertical legível no celular */
  .salaPin{height:auto}
  .salaP{position:static;height:auto;perspective:none;overflow:visible;background:#14060B;padding-block:36px}
  .camera{position:static;width:auto;height:auto;transform:none!important;transform-style:flat}
  .muro{position:static;transform:none!important;width:auto;height:auto;padding:12px 16px 28px;background:none}
  .muro::before,.muro::after,.chao,.teto,.spot{display:none}
  .pintado{position:static;text-align:left;font-size:34px;margin:0 0 20px}
  .quadro{position:static;width:auto!important;padding:8px;margin:0}
  .placa{position:static;width:auto!important;margin:0 0 22px;font-size:14px}
  .placa b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.rolo{animation:none}.passa img{animation:none}.seg i.vai b{animation:none;width:100%}}

/* ========== rodada 6 ========== */
/* forma atrás da foto: a borda escura se dissolve no fundo */
.mancha-foto{-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 86%),linear-gradient(0deg,transparent 2%,#000 34%),linear-gradient(to bottom left,transparent 14%,#000 44%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 42%,transparent 86%),linear-gradient(0deg,transparent 2%,#000 34%),linear-gradient(to bottom left,transparent 14%,#000 44%);mask-composite:intersect}

/* cilindro sem fundo branco: a própria peça é o objeto */
.pano{padding:0;background:none;display:block;border-radius:6px;box-shadow:0 40px 60px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.16);-webkit-box-reflect:below 6px linear-gradient(transparent 88%,rgba(255,255,255,.16));transition:box-shadow .4s,opacity .2s;cursor:zoom-in}
.pano img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:top;border-radius:6px}
.pano.frente{box-shadow:0 44px 80px -18px rgba(222,22,68,.8),0 0 0 1px rgba(255,255,255,.4)}
.marcas{display:none}
.cilP{background:radial-gradient(52% 50% at 50% 44%,#5E0B21,#1A0A10 62%,#0F1015)}
.cilP::after{height:30%;background:linear-gradient(180deg,transparent,rgba(5,5,7,.96) 72%)}
.cl{opacity:.32}

/* estantes: ficha ao lado e livros do tamanho do espaço */
.parede{padding-top:clamp(36px,4.5vw,70px)}
.estanteG{display:grid;grid-template-columns:clamp(230px,20vw,330px) minmax(0,1fr);gap:clamp(20px,3vw,50px);align-items:center;padding-inline:var(--margem);position:relative;z-index:2}
.parede .fila{min-height:0;padding-inline:0;justify-content:flex-start;margin-bottom:-6px;align-self:end}
.parede .ficha{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:0;padding:0 0 clamp(16px,3vw,44px);border:0;color:#fff}
.parede .ficha::before{content:"";width:44px;height:3px;background:var(--carmim)}
.parede .ficha b{color:#fff;font-size:clamp(21px,1.9vw,30px);line-height:1.16;max-width:none}
.parede .ficha small{color:#D6D7DE;font-size:clamp(15px,1.1vw,17px);line-height:1.34}
.parede .ficha .b{font-size:15px;padding:10px 24px;color:#fff;border-color:rgba(255,255,255,.7)}
.liv.fino .lomb .tit{font-size:var(--ft);padding-block:6px}
.liv.fino .lomb i.fio{display:none}
.alemFicha{color:#D6D7DE}

/* contatos */
.cGrid{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);align-items:center}
.conts{border-top:0;max-width:400px}
.conts a{position:relative;border-bottom:0}
.conts a::after{content:"";position:absolute;left:0;right:18%;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.34),transparent)}

@media (max-width:980px){
  .estanteG{grid-template-columns:minmax(0,1fr);padding-inline:16px}
  .parede .ficha{order:-1;padding-bottom:6px;min-height:150px}
  .parede .fila{overflow-x:auto;overflow-y:hidden;padding-right:20px;padding-top:30px}
  .cGrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){h1{font-size:8.7vw}}

/* capa em pé: a sombra dela vira um risco sobre a tábua */
.liv:not(.aberto) .cap{box-shadow:none}

/* ========== rodada 8: lombada em tecido e assinatura escrita ========== */
.parede .fila{padding-top:14px}
.parede .lomb{padding:0;background:var(--pano,var(--cor));color:#F3DCA0;isolation:isolate;justify-content:flex-start;overflow:hidden;border-radius:44%/5px;box-shadow:inset 0 2px 1px -1px rgba(255,255,255,.28),inset 0 -2px 2px -1px rgba(0,0,0,.5)}
.parede .lomb::before,.parede .lomb::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:1;mix-blend-mode:normal}
.parede .lomb::before{z-index:2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Cpath d='M0 .5H3' stroke='%23fff' stroke-opacity='.09'/%3E%3Cpath d='M.5 0V3' stroke='%23000' stroke-opacity='.15'/%3E%3Cpath d='M0 2.5H3' stroke='%23000' stroke-opacity='.06'/%3E%3C/svg%3E");background-size:3px 3px}
.parede .lomb::after{z-index:4;background:linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.2) 7%,rgba(255,255,255,.3) 25%,rgba(255,255,255,.1) 40%,rgba(0,0,0,.07) 66%,rgba(0,0,0,.6) 100%)}
.parede .lomb i{display:none;width:auto;height:auto;opacity:1;background:none;margin:0;border:0;flex:none}
.parede .lomb i.fl{display:block;position:relative;z-index:3;width:78%;height:6px;margin:12px 0 0;border-block:1px solid #E7C670}
.parede .lomb i.fl:last-child{margin:0 0 12px}
.parede .liv.clara .lomb{color:#2B1E10}
.parede .liv.clara .lomb i.fl{border-color:#5A3F18}
.parede .liv.fino .lomb i.fl{display:none}
.parede .lomb .aut,.parede .lomb .tit{position:relative;z-index:3;background:linear-gradient(90deg,#FFF3C4,#D9AC52 34%,#FFF0B8 58%,#B9892F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.parede .liv.clara .lomb .aut,.parede .liv.clara .lomb .tit{background:linear-gradient(90deg,#4B3312,#20160A);-webkit-background-clip:text;background-clip:text}
.parede .lomb .tit{font-weight:600;letter-spacing:.03em}
.parede .liv.fino .lomb .tit{padding-block:8px}
.parede .lomb .aut{padding:9px 0 0;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:1}
/* face de cima, com o miolo e o cabeceado listrado */
.parede .topo{position:absolute;left:0;bottom:100%;width:100%;height:calc(var(--e) * .1 + 3px);display:block;background:linear-gradient(90deg,var(--pano) 0 8%,transparent 8% 92%,var(--pano) 92%),repeating-linear-gradient(0deg,#EFE7D3 0 1px,#C7BCA2 1px 2px);clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);transition:opacity .25s;filter:brightness(.82)}
.parede .topo::before{content:"";position:absolute;left:16%;right:16%;bottom:0;height:62%;border-radius:50% 50% 0 0/100% 100% 0 0;background:repeating-linear-gradient(90deg,#C3203F 0 2px,#F3E9D2 2px 4px)}
.parede .liv.aberto .topo{opacity:0}
/* sombras de contato */
.parede .liv::after{content:"";position:absolute;left:-3px;right:-5px;bottom:-5px;height:11px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.85),transparent);z-index:-1;pointer-events:none}
.parede .corpo::before{content:"";position:absolute;inset:0;box-shadow:6px 0 9px -3px rgba(0,0,0,.72),-3px 0 7px -3px rgba(0,0,0,.55);pointer-events:none}
.parede .liv.aberto .corpo::before{opacity:0}

/* assinatura nos contatos */
.assinatura{position:relative;justify-self:center;width:clamp(180px,18vw,290px);aspect-ratio:1}
.assinatura img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
@keyframes escreve{to{clip-path:polygon(0 0,114% 0,100% 100%,0 100%)}}
@media (max-width:980px){.assinatura{justify-self:start;width:170px;margin:14px 0 0 12px}}

/* ========== rodada 9 ========== */
/* ISBN na ficha */
.fIsbn{display:block;margin-top:9px;font-size:clamp(13px,.95vw,14.5px);letter-spacing:.015em;color:#AEB0BA;font-variant-numeric:tabular-nums}
.fIsbn:empty{display:none}

/* logotipo do início: nasce grande e encolhe até a barra */
.marca{position:relative;width:62px;height:62px}
.marca .e{position:absolute;inset:0}
.mGrande{position:absolute;left:0;top:0;width:var(--mg);aspect-ratio:1;display:block;transform-origin:0 0;transform:scale(var(--ms,1));will-change:transform;filter:drop-shadow(0 2px 12px rgba(0,0,0,.45))}
.mGrande img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.topo{--mg:min(18vw,33svh,290px)}
.topo.solto .mGrande{display:none}
@media (max-width:980px){.topo{--mg:min(33vw,18svh)}}

/* escrita compartilhada entre os dois logotipos */
.escrita.armada img{clip-path:polygon(0 0,0 0,-14% 100%,-14% 100%)}
.escrita.armada.vai .a-traco{animation:escreve 2.5s cubic-bezier(.5,.05,.3,1) .2s both}
.escrita.armada.vai .a-visto{animation:escreve .55s ease-out 2.45s both}

/* console: tela menor, centrada, com a estante de cartuchos ao lado */

/* cartucho: corpo de plástico, sulcos de pegada, rótulo colado, seta e contatos dourados */
/* sulcos horizontais no topo */
/* rótulo colado em rebaixo */
/* seta em relevo: indica o lado que entra */
/* contatos dourados, na parte estreita do corpo */

@media (max-width:980px){
}

/* capa de livro fechado: some ao fim do giro, para não aparecer de lado junto da lombada */
.parede .liv:not(.aberto) .cap{opacity:0;transition:opacity 0s .62s}
.parede .liv.aberto .cap{opacity:1;transition:none}

/* ========== rodada 12: carrossel em profundidade ========== */
.console{position:relative;overflow:hidden;isolation:isolate;margin-top:clamp(14px,2vw,30px);padding:0 0 clamp(44px,6vw,88px)}
.carr{position:relative;height:clamp(290px,41vw,590px);perspective:1900px;touch-action:pan-y;user-select:none;overflow:hidden}
.carr:focus-visible{outline:2px solid #fff;outline-offset:-6px}
.carrC{position:absolute;left:50%;top:50%;width:min(66vw,860px);aspect-ratio:16/9;margin-left:calc(min(66vw,860px) / -2);margin-top:calc(min(66vw,860px) * -.28125);border-radius:14px;overflow:hidden;background:#050507;transition:transform .8s var(--mola),opacity .6s,filter .6s;box-shadow:0 34px 70px -24px #000,0 0 0 1px rgba(255,255,255,.16);will-change:transform;cursor:grab}
.carrC.at{cursor:zoom-in}
.carrC img,.carrC video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.carrC video{opacity:0;transition:opacity .35s}
.carrC.movendo video{opacity:1}
.carrMov{position:absolute;right:12px;top:12px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(10,10,14,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);opacity:0;transition:opacity .3s;pointer-events:none}
.carrMov svg{width:12px;height:12px;fill:#fff;margin-left:2px}
.carrC.at .carrMov{opacity:1}
.carrC.at.movendo .carrMov{opacity:0}
.carrN{display:flex;align-items:flex-start;justify-content:center;gap:clamp(12px,2.4vw,30px);margin-top:clamp(12px,1.6vw,22px);padding-inline:var(--margem)}
.carrT{width:min(700px,100%);min-width:0;text-align:center}
.carrT b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.95vw,28px);line-height:1.18;min-height:2.36em;text-wrap:balance}
.carrT small{display:block;margin-top:5px;font-size:14px;color:var(--nevoa)}
.carrS{flex:none;width:46px;height:46px;margin-top:6px;border-radius:50%;display:grid;place-items:center;background:none;border:0;padding:0;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);transition:background .25s,color .25s}
@media (hover:hover){.carrS:hover{background:#fff;color:#0F1015}}
.carrS svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
@media (max-width:860px){
  .carr{height:62vw}
  .carrC{width:80vw;margin-left:-40vw;margin-top:-22.5vw;border-radius:10px}
  .carrS{width:42px;height:42px}
  .carrT b{font-size:19px;min-height:3.54em}
}