/* ═══════ RODADA 6 · movimento na página dos 13 aos 18 ═══════ */

/* os três cartões sobem em cascata */
html.js .fontes.rv{opacity:1;transform:none;transition:none}
html.js .fontes .fnt{opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .25s var(--ease);
  transition-delay:calc(var(--k,0) * .14s)}
html.js .fontes.in .fnt{opacity:1;transform:none}
html.js .fontes .fnt:hover{transition-delay:0s;transform:translateY(-6px)}
html.js .fontes.in .fnt-n{animation:m18Selo 5.5s ease-in-out infinite;
  animation-delay:calc(var(--k,0) * .4s + 1s)}
@keyframes m18Selo{
  0%,70%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(249,115,22,0)}
  80%{transform:scale(1.16);box-shadow:0 0 0 8px rgba(249,115,22,.18)}
}

/* a arte de cada cartão */
.fnt-art .m18{width:100%;max-width:190px;height:auto;display:block;position:relative;z-index:1}

/* 1 · os cinco níveis acendem do branco ao diamante */
.lv1{fill:#CBD5E1}.lv2{fill:#C2410C}.lv3{fill:#94A3B8}.lv4{fill:#F59E0B}.lv5{fill:#22D3EE}
.lv{opacity:.22;transform-box:fill-box;transform-origin:bottom}
html.js .fontes.in .lv{animation:m18Nivel 5s ease-in-out infinite}
.lv2{animation-delay:.22s}.lv3{animation-delay:.44s}
.lv4{animation-delay:.66s}.lv5{animation-delay:.88s}
@keyframes m18Nivel{
  0%,62%,100%{opacity:.22;transform:scaleY(.82)}
  18%,52%{opacity:1;transform:scaleY(1)}
}
html.js .fontes.in .m18-rot{animation:m18Rot 5s ease-in-out infinite}
@keyframes m18Rot{0%,100%{width:62px}50%{width:104px}}

/* 2 · XP e L$ flutuam em contratempo e nunca se encostam */
html.js .fontes.in .tk{transform-box:fill-box;transform-origin:center;
  animation:m18Ficha 4.6s ease-in-out infinite}
.tk-ls{animation-delay:-2.3s}
@keyframes m18Ficha{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
html.js .fontes.in .m18-x{animation:m18Nao 4.6s ease-in-out infinite}
@keyframes m18Nao{0%,100%{opacity:.25}50%{opacity:.85}}

/* 3 · a carteira da Mesa redistribui o L$ */
.ms{transform-box:fill-box;transform-origin:left}
html.js .fontes.in .ms{animation:m18Mesa 6s ease-in-out infinite}
.ms2{animation-delay:-2s}.ms3{animation-delay:-4s}
@keyframes m18Mesa{
  0%,100%{transform:scaleX(.42)}
  33%{transform:scaleX(.86)}
  66%{transform:scaleX(.58)}
}

/* os pares de "o que existe" chegam pelos lados */
html.js .contra.rv{opacity:1;transform:none;transition:none}
html.js .contra .contra-c{opacity:0;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .contra .contra-nao{transform:translateX(-20px)}
html.js .contra .contra-sim{transform:translateX(20px);transition-delay:.1s}
html.js .contra.in .contra-c{opacity:1;transform:none}
html.js .contra .contra-c{border-color:var(--stage-line)}
html.js .contra.in .contra-sim{animation:m18Sim 6s ease-in-out infinite;animation-delay:1.4s}
@keyframes m18Sim{
  0%,80%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}
  90%{box-shadow:0 0 18px 0 rgba(249,115,22,.28)}
}

@media (prefers-reduced-motion:reduce){
  html.js .fontes.in .fnt-n,html.js .fontes.in .lv,html.js .fontes.in .m18-rot,
  html.js .fontes.in .tk,html.js .fontes.in .m18-x,html.js .fontes.in .ms,
  html.js .contra.in .contra-sim{animation:none}
  html.js .fontes .fnt,html.js .contra .contra-c{opacity:1;transform:none;transition:none}
  .lv{opacity:1}
  .ms{transform:scaleX(.62)}
}


/* ═══════ RODADA 7 · o herói dos 13 aos 18 se mexe ═══════ */
.h18 svg{overflow:visible}
.h18-card,.h18-b,.h18-tag,.h18-p,.h18-ponta,.h18-val{transform-box:fill-box}

/* o cartão inteiro boia devagar */
html.js .h18-card{transform-origin:center;animation:h18Boia 7s ease-in-out infinite}
@keyframes h18Boia{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* as seis barras respiram em cascata */
html.js .h18-b{transform-origin:bottom;animation:h18Barra 6s ease-in-out infinite}
.b2{animation-delay:.16s}.b3{animation-delay:.32s}
.b4{animation-delay:.48s}.b5{animation-delay:.64s}.b6{animation-delay:.8s}
@keyframes h18Barra{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* a linha do resultado se redesenha a cada volta */
html.js .h18-linha{stroke-dasharray:340;stroke-dashoffset:340;
  animation:h18Risca 6s ease-in-out infinite}
@keyframes h18Risca{
  0%{stroke-dashoffset:340}
  46%,78%{stroke-dashoffset:0}
  100%{stroke-dashoffset:340}
}

/* os pontos acendem na ordem, junto com a linha */
html.js .h18-p{opacity:0;transform-origin:center;animation:h18Ponto 6s ease-in-out infinite}
.p1{animation-delay:.5s}.p2{animation-delay:1.1s}.p3{animation-delay:1.7s}
.p4{animation-delay:2.3s}.p5{animation-delay:2.8s}
@keyframes h18Ponto{0%{opacity:0;transform:scale(.4)}8%,68%{opacity:1;transform:scale(1)}
  80%,100%{opacity:0;transform:scale(.4)}}

/* a última ponta chega e pulsa */
html.js .h18-ponta{opacity:0;transform-origin:center;animation:h18Ponta 6s ease-in-out infinite}
@keyframes h18Ponta{
  0%,44%{opacity:0;transform:scale(.3)}
  52%{opacity:1;transform:scale(1.45)}
  60%,74%{opacity:1;transform:scale(1)}
  86%,100%{opacity:0;transform:scale(.3)}
}

/* a etiqueta laranja e o valor do canto acompanham */
html.js .h18-tag{transform-origin:left center;animation:h18Tag 6s ease-in-out infinite}
@keyframes h18Tag{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.28)}}
html.js .h18-val{transform-origin:left center;animation:h18Val 6s ease-in-out infinite}
@keyframes h18Val{0%,100%{transform:scaleX(.55);opacity:.4}52%{transform:scaleX(1);opacity:.85}}

@media (prefers-reduced-motion:reduce){
  html.js .h18-card,html.js .h18-b,html.js .h18-linha,html.js .h18-p,
  html.js .h18-ponta,html.js .h18-tag,html.js .h18-val{animation:none}
  html.js .h18-linha{stroke-dashoffset:0}
  html.js .h18-p,html.js .h18-ponta{opacity:1}
}

/* ═══════ revisão de 30/09 · o carrossel de telas no topo ═══════ */
.carrossel{display:grid;justify-items:center;gap:14px;width:100%;max-width:320px;margin:0 auto}
.carrossel-cel{width:min(260px,70vw);padding:8px;border-radius:36px;background:linear-gradient(160deg,#35306B,#15122F);
  box-shadow:0 30px 60px rgba(8,6,26,.5),inset 0 0 0 1.5px rgba(255,255,255,.14);overflow:hidden}
.carrossel-trilho{display:flex;transition:transform .55s cubic-bezier(.22,1,.36,1);border-radius:28px;overflow:visible}
.carrossel-slide{flex:0 0 100%;margin:0}
.carrossel-slide img{display:block;width:100%;height:auto;border-radius:28px;max-width:none}
.carrossel-cel{touch-action:pan-y}
.carrossel-legenda{margin:0;text-align:center;min-height:3.1em;font-size:.92rem;line-height:1.45;color:var(--on-stage-2)}
.carrossel-legenda b{display:block;font-family:Poppins,Inter,sans-serif;font-size:1.02rem;color:var(--on-stage)}
.carrossel-nav{display:flex;align-items:center;gap:12px}
.carrossel-seta{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  color:#fff;font-size:1.3rem;line-height:1;cursor:pointer}
.carrossel-seta:hover{background:rgba(255,255,255,.16)}
.carrossel-pontos{display:flex;gap:7px}
.carrossel-pontos button{width:9px;height:9px;padding:0;border-radius:999px;border:0;background:rgba(255,255,255,.32);cursor:pointer;transition:width .3s}
.carrossel-pontos button[aria-selected="true"]{width:26px;background:var(--orange)}
.phead-art .carrossel img{border-radius:28px}
@media (prefers-reduced-motion:reduce){.carrossel-trilho{transition:none}}

/* ═══════ revisão de 07/10 ═══════ */
/* o texto do herói sobe, para centralizar com o CELULAR e não com o
   carrossel inteiro: a legenda e as setas ficam abaixo do aparelho e
   puxavam o centro da coluna para baixo. */
@media (min-width:941px){
  .phead .phead-grid > :first-child{margin-top:calc(-1 * clamp(26px,6vw,88px))}
}

/* mais vida no herói: a aura respira atrás do celular e o aparelho boia. */
.phead-art .carrossel-cel{animation:cfBoia 7s var(--ease,ease-in-out) infinite}
.phead-art{position:relative}
.phead-art::after{content:"";position:absolute;z-index:-1;left:50%;top:48%;transform:translate(-50%,-50%);
  width:min(420px,88%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(126,231,214,.22),rgba(126,231,214,0) 68%);
  animation:cfAura 9s var(--ease,ease-in-out) infinite}
@keyframes cfBoia{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes cfAura{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.09)}}

/* a cena da mesada boia junto, no mesmo ritmo do resto do site. */
.lf-arte img{animation:cfBoia 8s var(--ease,ease-in-out) infinite}

@media (prefers-reduced-motion:reduce){
  .phead-art .carrossel-cel,.phead-art::after,.lf-arte img{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   REVISÃO DE 08/10 · Como funciona, com mais vida
   ═══════════════════════════════════════════════════════════ */
.phead{position:relative}

/* 6 · O carrossel de telas: aparelhos maiores, em fila. O do meio ocupa a
   cena; os vizinhos ficam atrás, menores e apagados, e um toque neles traz
   para o meio. A tela entra inteira no aparelho, sem corte. A menina fica de
   pé ao lado, por cima da cena. */
.carrossel.carrossel-fluxo{max-width:560px;gap:16px}
.fluxo-palco{position:relative;width:100%;height:clamp(480px,40vw,580px);perspective:1400px;touch-action:pan-y}
.carrossel-fluxo .carrossel-trilho{position:absolute;inset:0;display:block;transform:none !important;transition:none}
.carrossel-fluxo .carrossel-slide{position:absolute;left:50%;top:0;margin:0;width:auto;
  transform:translateX(-50%);transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .6s ease,filter .6s ease;cursor:pointer}
.carrossel-fluxo .carrossel-slide[data-pos="0"]{z-index:3;cursor:default}
.carrossel-fluxo .carrossel-slide[data-pos="-1"]{z-index:2;transform:translateX(-112%) scale(.78) rotateY(14deg);opacity:.55;filter:brightness(.7) saturate(.8)}
.carrossel-fluxo .carrossel-slide[data-pos="1"]{z-index:2;transform:translateX(12%) scale(.78) rotateY(-14deg);opacity:.55;filter:brightness(.7) saturate(.8)}
.carrossel-fluxo .carrossel-slide[data-pos="fora"]{z-index:1;transform:translateX(-50%) scale(.6);opacity:0;pointer-events:none}
.aparelho{display:block;height:clamp(480px,40vw,580px);aspect-ratio:540/1146;padding:10px;box-sizing:border-box;border-radius:48px;
  background:linear-gradient(155deg,#3A3478,#16123A 55%,#0E0B26);
  box-shadow:0 34px 70px -18px rgba(8,6,26,.75),inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 5px rgba(0,0,0,.35)}
.aparelho img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:38px !important;max-width:none}
.carrossel-fluxo .carrossel-slide[data-pos="0"] .aparelho{animation:cfBoia 7s var(--ease,ease-in-out) infinite}
.phead-art img.fluxo-pers{position:absolute;z-index:4;right:-4%;bottom:-2%;height:56%;width:auto !important;max-width:none !important;pointer-events:none;
  filter:drop-shadow(0 20px 28px rgba(8,6,26,.55));animation:cfBoia 6s var(--ease,ease-in-out) -1.5s infinite}

.phead-art .carrossel-cel{animation:none}
@media (max-width:920px){
  .fluxo-palco,.aparelho{height:clamp(440px,120vw,540px)}
  .phead-art img.fluxo-pers{height:44%;right:-2%}
}
@media (max-width:560px){
  .carrossel-fluxo .carrossel-slide[data-pos="-1"],.carrossel-fluxo .carrossel-slide[data-pos="1"]{opacity:0;pointer-events:none}
}

/* 7 · Os três cartões do patrimônio ganham os personagens, que saem por cima
   do cartão, com a cor de cada um atrás; o título tem a palavra que importa
   em destaque e o texto ficou mais curto. */
.patrimonio-sec,.mesada-sec{position:relative}
.mesada-sec{overflow-x:clip}
.fnt.fnt-viva{overflow:visible;position:relative}
.fnt-viva .fnt-art{min-height:170px;padding:0 !important;place-items:end center}
.fnt-viva .fnt-art::before{display:none !important}
.fnt-aura{position:absolute;left:50%;bottom:4px;width:230px;height:230px;border-radius:50%;transform:translateX(-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--cor) 42%,transparent),transparent 68%);pointer-events:none;
  animation:fntAura 5.5s var(--ease,ease-in-out) infinite;animation-delay:calc(var(--k,0) * -1.4s)}
@keyframes fntAura{0%,100%{opacity:.65;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.12)}}
.fnt-viva .fnt-art img.fnt-pers{max-height:none;height:240px;width:auto;max-width:none;margin-top:-80px;
  filter:drop-shadow(0 16px 24px rgba(8,6,26,.5));transform-origin:50% 100%;
  animation:cfBoia 6.5s var(--ease,ease-in-out) infinite;animation-delay:calc(var(--k,0) * -2s)}
.fnt-viva:hover .fnt-art img.fnt-pers{animation-play-state:paused;transform:translateY(-8px) scale(1.04);transition:transform .3s}
.fnt-viva .fnt-n{top:auto;bottom:-15px;left:22px;z-index:3;width:34px;height:34px}
.fnt-viva .fnt-b{padding-top:30px}
.fnt-viva .fnt-b h3{font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:700;line-height:1.2}
.fnt-viva .fnt-b h3 em{font-style:normal;color:var(--cor)}
.fnt-viva .fnt-b > p{font-size:1rem;line-height:1.62}
.fnt-viva .fnt-b strong{color:var(--on-stage,#fff)}
.fnt-viva{border-top:2px solid color-mix(in srgb,var(--cor) 70%,transparent)}
html.js .fontes-vivas .fnt{transform:translateY(30px)}
html.js .fontes-vivas.in .fnt{transform:none}
html.js .fontes-vivas .fnt:hover{transform:translateY(-6px)}

/* 9 · A mesada: os dois sem retângulo, maiores, pousados por cima dos
   cartões, com moedas que sobem. */
.mesada-sec .wrap{position:relative}
.mesada-sec .lede{max-width:56ch !important}
.mesada-sec .contra{position:relative;z-index:1;max-width:calc(100% - clamp(0px,17vw,240px))}
.mesada-pers{position:absolute;z-index:2;right:clamp(0px,2vw,30px);bottom:-14px;margin:0;
  width:clamp(200px,18vw,250px);pointer-events:none}
.mesada-pers img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 34px rgba(8,6,26,.55));
  animation:cfBoia 7s var(--ease,ease-in-out) infinite}
.mesada-aura{position:absolute;left:50%;top:46%;width:130%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(126,231,214,.26),rgba(249,115,22,.10) 45%,transparent 68%);z-index:-1;
  animation:fntAura 7s var(--ease,ease-in-out) infinite}
.mesada-moeda{position:absolute;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font:700 .78rem/1 Poppins,sans-serif;color:#17123A;background:linear-gradient(145deg,#FFD27A,#F59E0B);
  box-shadow:0 6px 16px rgba(245,158,11,.45),inset 0 -3px 0 rgba(0,0,0,.15);animation:moedaSobe 3.8s ease-in-out infinite}
.mesada-moeda.m1{left:14%;top:22%}
.mesada-moeda.m2{left:4%;top:44%;background:linear-gradient(145deg,#A7F3E4,#2DD4BF);box-shadow:0 6px 16px rgba(45,212,191,.45);animation-delay:-1.3s}
.mesada-moeda.m3{right:6%;top:14%;width:30px;height:30px;font-size:.66rem;animation-delay:-2.5s}
@keyframes moedaSobe{0%{opacity:0;transform:translateY(16px) scale(.7)}25%,70%{opacity:1;transform:translateY(-6px) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.8)}}
@media (max-width:860px){
  .mesada-pers{position:relative;right:auto;top:auto;margin:0 auto 10px;width:min(260px,70%)}
  .mesada-sec .contra{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .carrossel-fluxo .carrossel-slide,.carrossel-fluxo .carrossel-slide[data-pos="0"] .aparelho,.phead-art img.fluxo-pers,.fnt-aura,
  .fnt-viva .fnt-art img.fnt-pers,.mesada-pers img,.mesada-aura,.mesada-moeda{animation:none;transition:none}
}

/* a faísca do canto não cai em cima do título */
.phead .ludico .f1{display:none}
/* empilhados no celular, o personagem de um cartão não cobre o texto do de cima */
@media (max-width:840px){.fontes.fontes-vivas{row-gap:96px}}
@media (max-width:860px){.mesada-pers{width:min(210px,60%)}}