.hero { overflow: hidden; }

@media (min-width: 861px) {
  .hero__grid > div { max-width: 62%; }

  .kv, .kv img {
    display: block;
    width: 100%;
  }
  .kv, .heroarte {
    position: absolute;
    right: max(16px, calc((100vw - 1200px) / 2));
    top: clamp(120px, 15vh, 200px);
    width: clamp(320px, 30vw, 430px);
    height: auto;
    pointer-events: none;
  }
  .kv { z-index: 0; mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }

  .heroarte { z-index: 2; display: grid; align-items: center; }
  .heroarte .heroarte__i { grid-area: 1 / 1; width: 100%; }
}

@media (max-width: 860px) {
  .kv, .heroarte { display: none; }
}

.franja{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}

.franja b{position:absolute;display:block;background:var(--blue-deep);opacity:0;
  animation:frag4 var(--d,7s) steps(1) var(--t,0s) infinite}
.franja b.d1{animation-name:frag1}
.franja b.d2{animation-name:frag2}
.franja b.d3{animation-name:frag3}
@keyframes frag1{0%,100%{opacity:0}46%,56%{opacity:1}}   
@keyframes frag2{0%,100%{opacity:0}38%,64%{opacity:1}}
@keyframes frag3{0%,100%{opacity:0}28%,76%{opacity:1}}
@keyframes frag4{0%,100%{opacity:0}16%,90%{opacity:1}}   

.franja b.lima{background:var(--lime)}
.franja b.lima--fixo{animation:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  .franja b{animation:none;opacity:1}
}

@media (max-width:860px){
  .hero{padding-bottom:44px}
}

.salpico{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.salpico b{position:absolute;display:block}
.salpico b.vivo{opacity:0;animation:frag4 var(--d,7s) steps(1) var(--t,0s) infinite}
.salpico b.vivo.d1{animation-name:frag1}
.salpico b.vivo.d2{animation-name:frag2}
.salpico b.vivo.d3{animation-name:frag3}
@media (prefers-reduced-motion:reduce){
  .salpico b.vivo{animation:none;opacity:1}
}

.swarm b{animation-timing-function:steps(1)}

.lote::before{animation:loteRender 4.2s steps(1) infinite}
@keyframes loteRender{
  0%,6%   {clip-path:inset(50% 50% 0 0)}
  6.01%,12%{clip-path:inset(0 50% 0 0)}
  12.01%,100%{clip-path:inset(0)}
}
@media (prefers-reduced-motion:reduce){.lote::before{animation:none;clip-path:none}}

html[data-motion='1'] .swarm b{animation:pxfade var(--d,12s) steps(1) var(--t,0s) infinite}
html[data-motion='1'] .franja b{animation:frag4 var(--d,7s) steps(1) var(--t,0s) infinite;opacity:0}
html[data-motion='1'] .franja b.d1{animation-name:frag1}
html[data-motion='1'] .franja b.d2{animation-name:frag2}
html[data-motion='1'] .franja b.d3{animation-name:frag3}
html[data-motion='1'] .franja b.lima--fixo{animation:none;opacity:1}
html[data-motion='1'] .salpico b.vivo{animation:frag4 var(--d,7s) steps(1) var(--t,0s) infinite;opacity:0}
html[data-motion='1'] .salpico b.vivo.d1{animation-name:frag1}
html[data-motion='1'] .salpico b.vivo.d2{animation-name:frag2}
html[data-motion='1'] .salpico b.vivo.d3{animation-name:frag3}
html[data-motion='1'] .lote::before{animation:loteRender 4.2s steps(1) infinite;clip-path:inset(50% 50% 0 0)}

.heroalt__pilha{display:grid;align-items:center}
.heroalt__p{
  grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .55s ease, visibility 0s linear .55s;
}
.heroalt__p.is-ativa{opacity:1;visibility:visible;transition:opacity .55s ease, visibility 0s linear 0s}
.heroarte__i{opacity:0;visibility:hidden;transition:opacity .55s ease, visibility 0s linear .55s}
.heroarte__i.is-ativa{opacity:1;visibility:visible;transition:opacity .55s ease, visibility 0s linear 0s}
@media (prefers-reduced-motion:reduce){
  .heroalt__p,.heroarte__i{transition:none}
}

.heroalt__t{
  margin:0;max-width:18ch;
  font-size:clamp(30px,3.4vw,52px);line-height:1.02;
}
.heroalt__sub{margin-top:18px;max-width:46ch}

.heroalt__lista{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px;
}
.heroalt__lista li{
  display:flex;align-items:flex-start;gap:12px;
  font:700 16px/1.3 var(--font-ui);color:var(--ink);
}
.heroalt__lista li::before{
  content:"";width:14px;height:14px;margin-top:3px;background:var(--blue-deep);flex:none;
}

.heroalt__ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}
.heroalt__nota{margin:14px 0 0;font:600 14px/1.4 var(--font-ui);color:var(--ink)}

.heroalt__nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:26px 0 0}
.heroalt__so-leitor{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.heroalt__pt,.heroalt__play{
  min-width:44px;min-height:44px;padding:0;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
}
.heroalt__pt::before{
  content:"";width:32px;height:10px;border:2px solid var(--ink);background:transparent;
  transition:background .2s ease;
}
.heroalt__pt[aria-current="true"]::before{background:var(--ink)}
.heroalt__play{border:2px solid var(--ink);margin-right:8px}
.heroalt__ico{width:13px;height:13px;fill:var(--ink)}
.heroalt__ico--toca{display:none}
.heroalt__play[aria-pressed="true"] .heroalt__ico--pausa{display:none}
.heroalt__play[aria-pressed="true"] .heroalt__ico--toca{display:block}

.heroazul{
  position:absolute;inset:0;background:var(--blue-deep);
  opacity:0;transition:opacity .55s ease;z-index:1;pointer-events:none;
}
.hero:has(.heroalt__p.is-ativa .heroaudio) .heroazul{opacity:1}
@media (prefers-reduced-motion:reduce){.heroazul{transition:none}}

.heroalt__p:has(.heroaudio){background:var(--blue-deep)}
.heroalt__p:has(.heroaudio) .hero__kicker,
.heroalt__p:has(.heroaudio) .heroalt__t,
.heroalt__p:has(.heroaudio) .heroalt__sub,
.heroalt__p:has(.heroaudio) .heroalt__lista li,
.heroalt__p:has(.heroaudio) .heroalt__nota{color:var(--paper)}
.heroalt__p:has(.heroaudio) .heroalt__sub{--on-color-soft:var(--paper)}
.heroalt__p:has(.heroaudio) .heroalt__lista li::before{background:var(--paper)}

.hero>.wrap.nav{z-index:6}

.heroaudio{
  position:relative;margin:24px 0 0;max-width:44ch;
  background:var(--blue-ink);border-left:10px solid var(--lime);
  padding:16px 20px 17px;
}
.heroaudio__t{
  margin:0;font:900 20px/1.15 var(--font-ui);color:var(--paper);letter-spacing:.005em;
}
.heroaudio__d{margin:7px 0 0;font:600 15px/1.35 var(--font-ui);color:var(--paper)}

.hero:has(.heroalt__p.is-ativa .heroaudio) .heroalt__pt::before{border-color:var(--paper)}
.hero:has(.heroalt__p.is-ativa .heroaudio) .heroalt__pt[aria-current="true"]::before{background:var(--paper)}
.hero:has(.heroalt__p.is-ativa .heroaudio) .heroalt__play{border-color:var(--paper)}
.hero:has(.heroalt__p.is-ativa .heroaudio) .heroalt__ico{fill:var(--paper)}

.celu{
  height:clamp(340px,34vw,470px);width:auto;aspect-ratio:300/610;
  background:var(--ink);border-radius:32px;padding:8px;margin-inline:auto;
  box-shadow:0 20px 44px rgba(17,17,20,.26);
}
.celu__tela{
  position:relative;height:100%;width:100%;overflow:hidden;border-radius:25px;
  background:var(--pink);
}
.celu__app,.celu__app img{display:block;position:absolute;inset:0;width:100%;height:100%}
.celu__app img{object-fit:cover;object-position:center top}

.heroarte__i--app .celu{transform:translateY(17%);transition:transform .9s cubic-bezier(.22,.9,.28,1) .05s}
.heroarte__i--app.is-ativa .celu{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .heroarte__i--app .celu,.heroarte__i--app.is-ativa .celu{transform:none;transition:none}
}

.heroshow__nome{display:none}
@media (max-width:860px){
  .heroshow__cred{display:none}
  .heroshow__nome{display:inline-block;margin:14px 0 18px;padding:10px 14px 8px;background:var(--lime);color:var(--ink);
    font:900 clamp(30px,9vw,44px)/1 var(--font);text-transform:uppercase;letter-spacing:-.01em}
}

@media (max-width:860px){
  .heroalt__lista{grid-template-columns:1fr;gap:10px}
  .heroalt__lista li{font-size:15px}
  .heroalt__ctas{flex-direction:column;align-items:stretch}
  .heroaudio{padding:14px 16px 15px;border-left-width:8px}
  .heroaudio__t{font-size:18px}
}

.celu--story{aspect-ratio:271/470}
.heroalt__img{display:none}
@media (max-width:860px){
  .heroalt__img{display:block;width:100%;height:auto;margin:18px 0 0}
}

.hero--A{--c:clamp(26px,3.1vw,52px)}

.hA-foto{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--ink);pointer-events:none}
.hA-foto picture{display:block;position:absolute;inset:0}
.hA-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 38%}
.hA-foto picture::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(17,17,20,.93) 0%,rgba(17,17,20,.86) 30%,rgba(17,17,20,.5) 46%,rgba(17,17,20,0) 62%),
    linear-gradient(0deg,rgba(17,17,20,.9) 0%,rgba(17,17,20,.55) 22%,rgba(17,17,20,0) 48%);
}
.hA-pix{position:absolute;inset:0;overflow:hidden}
.hA-pix b{position:absolute;display:block;width:var(--c);height:var(--c)}
.hA-pix b.vivo{animation:frag3 var(--d,8s) steps(1) var(--t,0s) infinite}
@media (prefers-reduced-motion:reduce){.hA-pix b.vivo{animation:none;opacity:1}}
.hA-pix--m{display:none}

.hero--A .hA-capa{align-self:end}
.hero--A .hA-kicker{margin:0 0 20px}
.hero--A .hA-kicker span{
  display:inline-block;background:var(--lime);color:var(--ink);padding:9px 14px 8px;
}
.hero--A .hA-t{
  max-width:none;margin:0;color:var(--paper);
  line-height:1.12;letter-spacing:-.02em;
}
.hero--A .hA-t span{
  background:var(--pink-ink);padding:.04em .16em 0;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero--A .hA-sub{color:var(--paper);--on-color-soft:var(--paper);margin-top:26px;max-width:30ch}
.hero--A .hA-ctas{margin-top:30px}
.hero--A .hA-ctas .btn--ghost{color:var(--paper);border-color:var(--paper);background:var(--ink)}
.hero--A .hA-ctas .btn--ghost:hover,
.hero--A .hA-ctas .btn--ghost:focus-visible{background:var(--paper);color:var(--pink-ink)}
.hero--A .hA-ctas .btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

.hero--A:has(.hA-capa.is-ativa) .heroalt__pt::before{border-color:var(--paper)}
.hero--A:has(.hA-capa.is-ativa) .heroalt__pt[aria-current="true"]::before{background:var(--paper)}
.hero--A:has(.hA-capa.is-ativa) .heroalt__play{border-color:var(--paper)}
.hero--A:has(.hA-capa.is-ativa) .heroalt__ico{fill:var(--paper)}

.hero--A .hA-tema{max-width:16ch}
.hero--A .hA-t,.hero--A .hA-tema{font-size:clamp(40px,min(5.4vw,calc(10svh - 25px)),104px)}

.hA-resumo{display:none}

@media (min-width:861px){
  .hero--A .hero__grid > div{max-width:none}
  .hero--A .heroalt__p:not(.hA-capa){max-width:62%}
  .hA-resumo{
    display:block;position:absolute;z-index:2;right:0;top:54%;
    width:44vw;max-width:880px;transform:translateY(-50%);pointer-events:none;
  }
  .hA-resumo img{display:block;width:100%;height:auto;box-shadow:calc(var(--c) * -.5) calc(var(--c) * .5) 0 var(--lime)}
  .hero--A .heroalt__p:has(.heroalt__img){
    max-width:calc(56vw - max(var(--pad),calc((100vw - var(--wrap)) / 2 + var(--pad))) - 56px);
  }
}
@media (min-width:1101px){
  .hero--A{display:flex;flex-direction:column;min-height:clamp(640px,100svh,1000px)}
  .hero--A .hero__grid{margin-block:auto 0;flex:none;padding-block:24px}
  .hero--A .hA-capa{max-width:46vw}
}

@media (max-width:1100px){
  .hero--A{--hA-fh:clamp(260px,38svh,360px)}
  .hA-foto picture{bottom:auto;height:var(--hA-fh)}
  .hA-foto picture::after{background:linear-gradient(0deg,rgba(17,17,20,.55) 0%,rgba(17,17,20,0) 40%)}
  .hA-pix--d{display:none}
  .hA-pix--m{display:block;bottom:auto;height:var(--hA-fh)}
  .hero--A .heroalt__pilha{align-items:start}
  .hero--A .hA-capa{align-self:start;padding-top:calc(var(--hA-fh) - 150px)}
}
@media (max-width:860px){
  .hero--A{--c:26px;--hA-fh:clamp(240px,32svh,300px)}
  .hA-foto img{object-position:50% 100%}
  .hero--A .hA-capa{padding-top:calc(var(--hA-fh) - 132px)}
  .hero--A .hA-kicker{margin-bottom:16px}
  .hero--A .hA-t{font-size:clamp(34px,10.4vw,48px)}
  .hero--A .hA-sub{margin-top:18px;max-width:none}
  .hero--A .hA-ctas{margin-top:22px;gap:12px}
}
@media (max-width:400px){
  .heroalt__nav{gap:0}
  .heroalt__play{margin-right:0}
}