@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;
  src:url(../fontes/anton.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fustat;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fontes/fustat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,
    U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fustat;font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fontes/fustat-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF}

:root{--azul:#082EAB;--azul2:#1247D6;--amarelo:#FEF200;--tinta:#12275E;
  --nucleo:#DCE1EB;--saia:#EFF1F5;--fundo-pe:#FFFFFF;--fraco:#7C88A6;--escuro:3,11,38;
  --f:Fustat,system-ui,-apple-system,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}

html{scrollbar-gutter:stable}

body{font-family:var(--f);color:var(--tinta);-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 300px at 50% -40px,
    var(--nucleo) 0,var(--saia) 58%,var(--fundo-pe) 100%) fixed;
  background-color:var(--fundo-pe)}
img{max-width:100%}

.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.topo{position:fixed;z-index:60;top:38px;left:0;right:0;display:flex;align-items:center;
  justify-content:center;padding:0 clamp(16px,2.6vw,34px);pointer-events:none}
.topo>*{pointer-events:auto}

@property --x{syntax:"<length>";initial-value:76px;inherits:true}
.nav{position:relative;--x:76px;transition:--x .15s cubic-bezier(.2,.85,.25,1)}

.pista{display:flex;align-items:center;background:#fff;border-radius:27px;padding:12px 14px 10px;
  box-shadow:0 16px 40px rgba(var(--escuro),.13),0 4px 12px rgba(var(--escuro),.08);
  -webkit-mask:radial-gradient(circle 37px at var(--x) -1px,transparent 36px,#000 37px);
  mask:radial-gradient(circle 37px at var(--x) -1px,transparent 36px,#000 37px)}
.pista .logo{display:block;width:clamp(88px,7.4vw,112px);margin:0 18px 2px 6px;cursor:pointer}
.pista .risco{width:1px;align-self:stretch;margin:2px 12px 2px 0;background:rgba(8,46,171,.14)}
.item{width:106px;background:none;border:0;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 0;color:#A9B0C2;
  transition:color .1s}
.item svg{width:24px;height:24px;transition:opacity .1s}
.item b{font-size:11.5px;font-weight:500;letter-spacing:-.01em}
.item.on{color:var(--azul)} .item.on svg{opacity:0} .item.on b{font-weight:700}
.bolha{position:absolute;top:-21px;left:var(--x);translate:-50% 0;width:54px;height:54px;
  border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--azul);
  box-shadow:0 10px 24px rgba(var(--escuro),.16),0 2px 6px rgba(var(--escuro),.1);
  transition:left .15s cubic-bezier(.2,.85,.25,1)}
.bolha svg{width:26px;height:26px}

.redes{position:absolute;right:clamp(16px,2.6vw,34px);top:50%;translate:0 -50%;
  display:flex;gap:clamp(14px,1.6vw,22px)}

.link{border:0;background:none;padding:2px 0;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:500;letter-spacing:-.01em;line-height:1.25;
  color:var(--tinta);text-decoration:none;opacity:.42;transition:opacity .18s ease}
.link:hover,.link:focus-visible{opacity:1}

.redes .link{display:flex;flex-direction:column;align-items:center;gap:5px}

.ric{display:inline-block;flex:none;width:var(--ric,20px);height:var(--ric,20px);
  background:currentColor;vertical-align:middle;
  -webkit-mask:var(--ic) center/contain no-repeat;
          mask:var(--ic) center/contain no-repeat}

.pulo{display:inline-flex}
.l{display:inline-block;will-change:transform}
.l.e{width:.28em}

.home{position:relative;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(12px,2.2vh,32px);
  padding:clamp(100px,13vh,130px) 16px clamp(46px,7.2vh,88px);overflow:hidden}

.luz{position:absolute;left:-2%;right:-2%;bottom:-4%;height:42%;z-index:0;
  pointer-events:none;filter:blur(46px);opacity:.35;
  -webkit-mask:radial-gradient(68% 82% at 50% 60%,#000 18%,transparent 76%);
  mask:radial-gradient(68% 82% at 50% 60%,#000 18%,transparent 76%)}
.luz i{position:absolute;display:block;border-radius:50%;
  transition:background 1.1s cubic-bezier(.4,0,.2,1)}
.luz i:nth-child(1){left:19%;top:2%;width:30%;height:96%}
.luz i:nth-child(2){right:17%;top:-6%;width:29%;height:104%}
.luz i:nth-child(3){left:38%;bottom:-16%;width:26%;height:74%}

.palco{position:relative;width:100%;flex:1 1 auto;min-height:0;max-height:720px;
  touch-action:pan-y;cursor:grab;user-select:none}
.palco.puxando{cursor:grabbing}
#tela{display:block;width:100%;height:100%}

.legenda{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;gap:clamp(8px,1.8vw,26px)}
.dizeres{text-align:center;width:min(376px,58vw)}

.nome{font-size:clamp(25px,3.9vw,46px);font-family:Anton,var(--f);font-weight:400;
  line-height:1.06;letter-spacing:.004em;text-transform:uppercase;color:var(--azul);
  transform:skewX(-9deg)}
.nome .l{display:inline-block;animation:cair .52s cubic-bezier(.18,.9,.28,1) both;
  animation-delay:calc(var(--i) * 34ms)}
@keyframes cair{from{transform:translateY(-.8em) rotate(-7deg);opacity:0}
                to{transform:none;opacity:1}}
.frase{overflow:hidden;font-size:clamp(13px,1.4vw,16px);line-height:1.45;
  color:var(--sobre-fraco,var(--fraco));margin-top:11px;text-wrap:balance}
.frase span{display:block;transition:transform .42s cubic-bezier(.22,.85,.25,1) .05s,opacity .3s .05s}
.trocando .nome{opacity:0;transition:opacity .2s}
.trocando .frase span{transform:translateY(-102%);opacity:0}

.seta{flex:none;border:0;background:none;cursor:pointer;opacity:.72;
  color:var(--sobre,var(--azul));
  padding:10px 8px;display:grid;place-items:center;transition:opacity .16s,scale .16s}
.seta svg{width:21px;height:32px}
.seta:hover{opacity:1;scale:1.12}
.seta:active{scale:.94}
.seta:focus-visible{outline:2px solid var(--sobre,var(--azul));outline-offset:2px;border-radius:6px}

.trilha{position:relative;z-index:1;width:min(430px,68vw);height:3px;border-radius:3px;
  background:linear-gradient(90deg,#8B5CF6,#22D3EE,#4ADE80,#EC4899)}
.trilha i{position:absolute;top:50%;left:4%;width:15px;height:15px;border-radius:50%;
  translate:-50% -50%;background:#8B5CF6;
  box-shadow:0 0 0 4px var(--fundo-pe),0 3px 10px rgba(var(--escuro),.28);
  transition:background 1.1s cubic-bezier(.4,0,.2,1)}

.rolar{position:relative;z-index:1;display:flex;align-items:center;gap:8px;
  color:var(--fraco);font-size:12.5px;letter-spacing:.01em}
.rolar svg{width:21px;height:21px;animation:respira 2.4s ease-in-out infinite}
.rolar .so-dedo{display:none}
.rolar span{display:inline-flex}
@keyframes respira{0%,100%{transform:translateY(0);opacity:.72}
                   50%{transform:translateY(3px);opacity:1}}
@media (pointer:coarse){.rolar .so-mouse{display:none}.rolar .so-dedo{display:inline-flex}}

.camada{position:fixed;inset:0;z-index:70;opacity:0;pointer-events:none;
  transition:opacity .38s cubic-bezier(.2,.8,.25,1)}
.camada.viva{opacity:1;pointer-events:auto}

.camada .veu{position:absolute;inset:0;background:rgba(var(--escuro),.34);
  backdrop-filter:blur(13px) saturate(1.1);-webkit-backdrop-filter:blur(13px) saturate(1.1)}

.folha{position:absolute;left:50%;translate:-50% 0;top:clamp(96px,12vh,128px);bottom:0;
  width:min(1120px,calc(100vw - 32px));display:flex;flex-direction:column;
  transition:transform .42s cubic-bezier(.2,.8,.25,1);transform:translateY(18px)}
.camada.viva .folha{transform:none}

.chapeu{background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px) saturate(1.06);-webkit-backdrop-filter:blur(12px) saturate(1.06);
  border-radius:22px 22px 0 0;padding:16px 20px 12px;
  box-shadow:0 -1px 0 rgba(8,46,171,.06) inset, 0 18px 46px rgba(var(--escuro),.3)}

.linha1{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.procura{position:relative;flex:1;min-width:0}
.procura input{width:100%;font-family:inherit;font-size:14.5px;color:var(--tinta);
  border:1px solid rgba(8,46,171,.16);border-radius:100px;padding:11px 40px 11px 42px;
  outline:0;background:rgba(8,46,171,.04)}
.procura input:focus{border-color:var(--azul);background:#fff;box-shadow:0 0 0 3px rgba(8,46,171,.12)}
.procura input::placeholder{color:#8C96AE}
.procura .lupa{position:absolute;left:15px;top:50%;translate:0 -50%;width:18px;height:18px;color:#8C96AE}
.procura .limpa{position:absolute;right:6px;top:50%;translate:0 -50%;border:0;background:none;
  cursor:pointer;color:#8C96AE;width:30px;height:30px;border-radius:50%;display:none;
  place-items:center}
.procura .limpa svg{width:15px;height:15px}
.procura.tem .limpa{display:grid}
.procura .limpa:hover{background:rgba(8,46,171,.08);color:var(--azul)}

.conta{font-size:12.5px;color:#8C96AE;white-space:nowrap;flex:none}
.conta b{color:var(--azul);font-weight:700}
.fecha-camada{border:0;background:rgba(8,46,171,.07);color:var(--azul);cursor:pointer;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  transition:background .14s,scale .14s}
.fecha-camada:hover{background:rgba(8,46,171,.14);scale:1.06}
.fecha-camada svg{width:17px;height:17px}

.gavetas{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;max-width:100%}
.gavetas::-webkit-scrollbar{display:none}
.gav{flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:500;color:var(--tinta);background:rgba(8,46,171,.06);
  border:1px solid transparent;border-radius:100px;padding:8px 14px;transition:all .14s}
.gav svg{width:17px;height:17px;color:var(--azul)}
.gav s{text-decoration:none;font-size:11px;color:#8C96AE;font-weight:600}
.gav:hover{background:rgba(8,46,171,.12)}
.gav.on{background:var(--azul);color:#fff;font-weight:700}
.gav.on svg,.gav.on s{color:rgba(255,255,255,.82)}

.prateleira{flex:1;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px) saturate(1.06);-webkit-backdrop-filter:blur(12px) saturate(1.06);
  padding:6px 20px 24px;box-shadow:0 18px 46px rgba(var(--escuro),.3)}
.prateleira::-webkit-scrollbar{width:10px}
.prateleira::-webkit-scrollbar-thumb{background:rgba(8,46,171,.18);border-radius:100px;
  border:3px solid transparent;background-clip:content-box}

.prod[hidden]{display:none}

.prod{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:12px 8px;border-bottom:1px solid rgba(8,46,171,.08);cursor:pointer;
  transition:background .14s}
.prod:has(+ .nada){border-bottom:0}
.prod:hover{background:rgba(8,46,171,.035)}
.prod .frasco{width:88px;height:88px;border-radius:12px;background:rgba(8,46,171,.05);
  display:grid;place-items:center;overflow:hidden}
.prod .frasco img{width:100%;height:100%;object-fit:contain;padding:7px;transition:scale .22s}
.prod:hover .frasco img{scale:1.08}
.prod .frasco.sem{font-size:9.5px;line-height:1.3;color:#8C96AE;text-align:center;padding:8px}
.prod .dados{min-width:0}
.prod h3{font-size:16px;font-weight:700;color:var(--tinta);letter-spacing:-.015em;margin-bottom:3px}
.prod .diz{font-size:13.5px;color:#5C6785;line-height:1.4;margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod .selos{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.prod .lt{background:var(--azul);color:#fff;font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:5px}
.prod .uso{background:rgba(8,46,171,.06);color:#5C6785;font-size:10.5px;font-weight:500;
  padding:4px 8px;border-radius:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prod .ver{flex:none;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;color:#fff;background:var(--azul);
  border-radius:100px;padding:10px 16px;transition:background .16s}
.prod .ver:hover{background:var(--azul2)}
.prod .ver svg{width:15px;height:15px;transition:translate .2s}
.prod:hover .ver svg{translate:4px 0}

.nada{padding:48px 12px;text-align:center;color:#5C6785;font-size:14px}
.nada b{display:block;font-size:17px;color:var(--tinta);margin-bottom:6px}

@media (max-width:1100px){

  .redes{position:fixed;top:auto;bottom:15px;left:0;right:0;translate:none;
    justify-content:center;gap:26px;z-index:61}

  .redes .link{flex-direction:row;gap:6px}
  .link{opacity:.58;font-weight:600}

  .home{padding-bottom:48px}
}
@media (max-width:900px){

  .topo{top:34px}
  .pista .logo{width:74px;margin:0 12px 2px 4px} .pista .risco{margin-right:9px}
  .item{width:80px} .item b{font-size:10px}

  .home{padding:clamp(84px,10.5vh,112px) 16px clamp(198px,29.5vh,262px);
    gap:clamp(10px,1.8vh,24px)}

  .palco{width:calc(100% + 32px);margin-inline:-16px;max-height:min(56vh,88vw)}

  body:has(#guia.vivo:not(.dormindo)) .rolar{display:none}

  .palco,.legenda,.trilha,.rolar{transition:translate .55s cubic-bezier(.2,.8,.25,1)}
  body:not(:has(#guia.vivo)) .palco,body:not(:has(#guia.vivo)) .legenda,
  body:not(:has(#guia.vivo)) .trilha,body:not(:has(#guia.vivo)) .rolar{translate:0 52px}

  .luz{height:38%;opacity:.26;filter:blur(58px)}
  .dizeres{width:min(376px,76vw)}
  .seta svg{width:17px;height:26px}
  .folha{top:clamp(88px,11vh,116px);width:calc(100vw - 20px)}
  .chapeu{padding:13px 14px 10px;border-radius:18px 18px 0 0}
  .prateleira{padding:4px 14px 20px}
  .prod{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px 4px}
  .prod .frasco{width:64px;height:64px}
  .prod .ver{grid-column:1 / -1;justify-content:center;width:100%;margin-top:4px}
}

@media (max-width:430px){
  .topo{padding:0 10px}
  .pista{padding:10px 10px 8px}
  .pista .logo{width:62px;margin:0 9px 2px 2px}
  .pista .risco{margin:2px 7px 2px 0}
  .item{width:70px;gap:4px} .item b{font-size:9.5px} .item svg{width:21px;height:21px}
  .link{font-size:11.5px}
  .redes{gap:20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}