/* áreas, níveis e travessia */
.areas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(24px,3vw,34px)}
.area-chip{display:inline-block;padding:9px 15px;border-radius:999px;font-size:.9rem;font-weight:600;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);color:var(--on-stage)}
.niveis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
  margin-top:clamp(24px,3vw,34px);text-align:left}
.nv{padding:16px 18px 16px 22px;border-radius:14px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.nv b{display:block;font-size:1.02rem;margin-bottom:6px}
.nv span{display:block;font-size:0.9rem;color:var(--ink-2);line-height:1.45}
.nv:nth-child(1){--nvc:#CBD5E1}
.nv:nth-child(2){--nvc:#C2410C}
.nv:nth-child(3){--nvc:#94A3B8}
.nv:nth-child(4){--nvc:#F59E0B}
.nv:nth-child(5){--nvc:#22D3EE}
.nv::before{content:"";position:absolute;left:0;top:12px;width:4px;height:calc(100% - 24px);background:var(--nvc,var(--line));border-radius:0 4px 4px 0}
.travessia{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:820px;margin-left:auto;margin-right:auto;
  margin-top:clamp(24px,3vw,34px);text-align:left}
.tv{padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.tv-meio{background:var(--bg);border-color:var(--orange);border-width:2px}
.tv b{display:block;font-size:1.02rem;margin-bottom:8px}
.tv p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.5}

/* ═══════ RODADA 4 · as áreas e os níveis entram um a um ═══════ */
html.js .areas.rv,
html.js .niveis.rv{opacity:1;transform:none;transition:none}

html.js .areas .area-chip{
  opacity:0;transform:translateY(12px) scale(.94);
  transition:opacity .5s var(--ease),transform .5s var(--ease),
             background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  transition-delay:calc(var(--i,0) * 45ms);
}
html.js .areas.in .area-chip{opacity:1;transform:none}
.area-chip{cursor:default}
html.js .areas .area-chip:hover{
  transition-delay:0s;transform:translateY(-3px) scale(1.05);
  background:rgba(255,255,255,.19);border-color:var(--orange)
}
.area-chip{position:relative}
.area-chip::after{content:"";position:absolute;inset:-1px;border-radius:999px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(249,115,22,0)}
html.js .areas.in .area-chip::after{animation:chipOnda 9s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .13s + 1.4s)}
@keyframes chipOnda{
  0%,88%,100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}
  94%{box-shadow:0 0 14px 2px rgba(249,115,22,.55)}
}

html.js .niveis .nv{
  opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),
             box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
  transition-delay:calc(var(--n,0) * 90ms);
}
html.js .niveis.in .nv{opacity:1;transform:none}
html.js .niveis .nv:hover{
  transition-delay:0s;transform:translateY(-5px);
  border-color:var(--nvc);box-shadow:0 16px 34px rgba(23,19,52,.15)
}
html.js .niveis .nv::before{transform:scaleY(0);transform-origin:top;
  transition:transform .75s var(--ease);transition-delay:calc(var(--n,0) * 90ms + 140ms)}
html.js .niveis.in .nv::before{transform:scaleY(1)}
html.js .niveis.in .nv::before{animation:nvBrilho 5s ease-in-out infinite;
  animation-delay:calc(var(--n,0) * .35s + 1s)}
@keyframes nvBrilho{
  0%,72%,100%{box-shadow:0 0 0 0 transparent}
  84%{box-shadow:0 0 12px 1px var(--nvc)}
}
@media (prefers-reduced-motion:reduce){
  html.js .areas .area-chip,
  html.js .niveis .nv{opacity:1;transform:none;transition:none}
  html.js .niveis .nv::before{transform:none;transition:none;animation:none}
  html.js .areas.in .area-chip::after{animation:none}
}

/* botão vazado da chamada */
.cta-sec .btn-ghost{border-color:var(--ink-2)}
.cta-sec .btn-ghost:hover{border-color:var(--orange);color:var(--orange)}

/* ═══════ revisão de 07/10 ═══════ */
/* os dois celulares desta página ficaram menores, e crescem quando o
   ponteiro chega. O transform-origin é o pé do aparelho: crescendo para
   cima, a legenda abaixo não se mexe e a fileira não empurra nada. */
.telas-app .tela-app{width:clamp(150px,15vw,186px);transition:width .3s var(--ease,ease)}
.telas-app .tela-app .cel{transition:transform .32s var(--ease,ease),box-shadow .32s var(--ease,ease);
  transform-origin:50% 100%;will-change:transform}
.telas-app .tela-app:hover .cel,
.telas-app .tela-app:focus-within .cel{transform:scale(1.22);
  box-shadow:0 30px 60px rgba(8,6,26,.42),0 0 0 1px rgba(255,255,255,.1)}
.telas-app .tela-app:hover,
.telas-app .tela-app:focus-within{z-index:2}
.telas-app .tela-app{position:relative}
@media (max-width:760px){
  .telas-app .tela-app{width:66%}
  .telas-app .tela-app:hover .cel,.telas-app .tela-app:focus-within .cel{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .telas-app .tela-app .cel{transition:none}
  .telas-app .tela-app:hover .cel,.telas-app .tela-app:focus-within .cel{transform:none}
}

/* os cinco anéis acendem em sequência, do branco ao diamante, e cada um
   fica aceso até a volta terminar. Os anéis estão dentro de uma imagem
   só, então o que acende é um brilho por cima, posicionado em cima de
   cada aro. As posições são porcentagens da imagem: se a arte mudar, elas
   mudam junto.

   Cada anel tem a SUA regra de quadros, e não um atraso em cima de uma
   regra comum. Com atraso, cada anel roda o próprio ciclo e o resultado é
   um apagado girando, e não a soma que a sequência pede: branco, depois
   branco e bronze, depois os três, e assim por diante. A volta leva 12
   segundos e termina com todos apagados, antes de recomeçar. */
.phead-art-aneis{max-width:none}
.phead-art-aneis .aneis-palco{position:relative;display:block;width:100%;max-width:640px;margin:0 auto}
.phead-art-aneis .aneis-palco img{display:block;width:100%;max-width:none;height:auto}
.aneis-luzes{position:absolute;inset:0;pointer-events:none;z-index:2}
.al{position:absolute;border-radius:50%;opacity:0;mix-blend-mode:screen;filter:blur(6px)}
.al1{left:13.9%;top:27.5%;width:11.4%;height:41%;background:radial-gradient(ellipse at center,rgba(232,232,240,.85),rgba(232,232,240,0) 70%);animation:anel1 12s var(--ease,ease-in-out) infinite}
.al2{left:23.4%;top:26%;width:12.7%;height:44%;background:radial-gradient(ellipse at center,rgba(217,138,90,.85),rgba(217,138,90,0) 70%);animation:anel2 12s var(--ease,ease-in-out) infinite}
.al3{left:35.1%;top:22%;width:16%;height:50%;background:radial-gradient(ellipse at center,rgba(198,203,214,.9),rgba(198,203,214,0) 70%);animation:anel3 12s var(--ease,ease-in-out) infinite}
.al4{left:49.2%;top:19%;width:18.2%;height:56%;background:radial-gradient(ellipse at center,rgba(245,195,59,.9),rgba(245,195,59,0) 70%);animation:anel4 12s var(--ease,ease-in-out) infinite}
.al5{left:66.5%;top:10%;width:23.2%;height:70%;background:radial-gradient(ellipse at center,rgba(159,228,255,.95),rgba(159,228,255,0) 70%);animation:anel5 12s var(--ease,ease-in-out) infinite}

@keyframes anel1{
  0%,1%{opacity:0;transform:scale(1.14)}
  5%{opacity:1;transform:scale(1)}
  84%{opacity:.85;transform:scale(1)}
  90%,100%{opacity:0;transform:scale(1.14)}
}
@keyframes anel2{
  0%,17%{opacity:0;transform:scale(1.14)}
  21%{opacity:1;transform:scale(1)}
  84%{opacity:.85;transform:scale(1)}
  90%,100%{opacity:0;transform:scale(1.14)}
}
@keyframes anel3{
  0%,34%{opacity:0;transform:scale(1.14)}
  38%{opacity:1;transform:scale(1)}
  84%{opacity:.85;transform:scale(1)}
  90%,100%{opacity:0;transform:scale(1.14)}
}
@keyframes anel4{
  0%,50%{opacity:0;transform:scale(1.14)}
  54%{opacity:1;transform:scale(1)}
  84%{opacity:.85;transform:scale(1)}
  90%,100%{opacity:0;transform:scale(1.14)}
}
@keyframes anel5{
  0%,66%{opacity:0;transform:scale(1.14)}
  71%{opacity:1;transform:scale(1)}
  84%{opacity:.9;transform:scale(1)}
  90%,100%{opacity:0;transform:scale(1.14)}
}

/* a arte ficou maior: a coluna da direita passa a ser a maior das duas. */
@media (min-width:921px){
  .phead .phead-grid:has(.phead-art-aneis){grid-template-columns:.92fr 1.08fr}
}
@media (prefers-reduced-motion:reduce){
  .al{animation:none;opacity:.55}
}

/* ═══════════════════════════════════════════════════════════
   REVISÃO DE 08/10 · os anéis maiores, mais rápidos, e o brilho
   atrás dos dois
   ═══════════════════════════════════════════════════════════
   O pedido: "essa imagem pode estar maior e o brilho dos anéis não pode se
   sobrepor aos personagens e a animação pode estar mais veloz e evidente".

   A arte agora é o recorte, sem o retângulo escuro em volta, e os elementos
   de fundo voltaram ao herói. Os brilhos passam por uma máscara que tem um
   buraco no formato dos dois (aneis-mascara.png): o anel acende em volta
   deles, e nunca por cima. Cada brilho é um aro, e não uma mancha: a luz
   fica na borda do anel, onde o anel está. A volta leva 6,5 segundos. */
.phead-trilhas{position:relative}
@media (min-width:921px){
  .phead .phead-grid:has(.phead-art-aneis){grid-template-columns:.78fr 1.22fr}
}
.phead-art-aneis .aneis-palco{max-width:820px}
.phead-art-aneis .aneis-palco img{filter:drop-shadow(0 26px 40px rgba(8,6,26,.5))}
.aneis-luzes.aneis-luzes-v2{-webkit-mask-image:url(/img/personagens/aneis-mascara.png);mask-image:url(/img/personagens/aneis-mascara.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.aneis-luzes-v2 .al{filter:blur(3px);mix-blend-mode:screen;animation-duration:6.5s;animation-timing-function:ease-out}
.aneis-luzes-v2 .al1{left:.5%;top:22%;width:23%;height:56%;background:radial-gradient(closest-side,transparent 64%,rgba(255,255,255,.95) 82%,transparent 100%)}
.aneis-luzes-v2 .al2{left:12.5%;top:18.5%;width:21%;height:63%;background:radial-gradient(closest-side,transparent 64%,rgba(255,170,110,.95) 82%,transparent 100%)}
.aneis-luzes-v2 .al3{left:28%;top:14%;width:22.5%;height:68%;background:radial-gradient(closest-side,transparent 64%,rgba(225,232,255,.95) 82%,transparent 100%)}
.aneis-luzes-v2 .al4{left:45.7%;top:8%;width:27%;height:79%;background:radial-gradient(closest-side,transparent 62%,rgba(255,214,90,1) 81%,transparent 100%)}
.aneis-luzes-v2 .al5{left:68%;top:0;width:32%;height:93%;background:radial-gradient(closest-side,transparent 60%,rgba(150,235,255,1) 80%,transparent 100%)}
/* a sequência mais curta: um anel a cada 0,6 s, todos acesos juntos, um
   lampejo no fim, e apaga. */
.aneis-luzes-v2 .al1{animation-name:anelV1}.aneis-luzes-v2 .al2{animation-name:anelV2}.aneis-luzes-v2 .al3{animation-name:anelV3}
.aneis-luzes-v2 .al4{animation-name:anelV4}.aneis-luzes-v2 .al5{animation-name:anelV5}
@keyframes anelV1{0%{opacity:0;transform:scale(1.18)}6%{opacity:1;transform:scale(1)}62%{opacity:.9}70%{opacity:1;transform:scale(1.04)}82%,100%{opacity:0;transform:scale(1)}}
@keyframes anelV2{0%,9%{opacity:0;transform:scale(1.18)}15%{opacity:1;transform:scale(1)}62%{opacity:.9}70%{opacity:1;transform:scale(1.04)}82%,100%{opacity:0;transform:scale(1)}}
@keyframes anelV3{0%,18%{opacity:0;transform:scale(1.18)}24%{opacity:1;transform:scale(1)}62%{opacity:.9}70%{opacity:1;transform:scale(1.04)}82%,100%{opacity:0;transform:scale(1)}}
@keyframes anelV4{0%,27%{opacity:0;transform:scale(1.18)}33%{opacity:1;transform:scale(1)}62%{opacity:.9}70%{opacity:1;transform:scale(1.04)}82%,100%{opacity:0;transform:scale(1)}}
@keyframes anelV5{0%,36%{opacity:0;transform:scale(1.2)}43%{opacity:1;transform:scale(1)}62%{opacity:.95}70%{opacity:1;transform:scale(1.05)}82%,100%{opacity:0;transform:scale(1)}}
.phead-art-aneis .aneis-palco{animation:anelPalco 6.5s ease-out infinite}
@keyframes anelPalco{0%,60%,100%{filter:none}70%{filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){
  .aneis-luzes-v2 .al{animation:none;opacity:.7}
  .phead-art-aneis .aneis-palco{animation:none}
}

.phead .ludico .f1{display:none}

/* ═══════ REVISÃO DE 08/10 · rodada 2 ═══════
   "Está tudo desalinhado, sem elementos gráficos, sem personagens, sem
   telas." As vinte áreas viram uma grade de botões com ícone e cor, ao lado
   de um cartão que mostra a área escolhida, com o personagem por cima.
   Depois, a fase por dentro (com as telas) e os cinco níveis como anéis. */
/* as vinte áreas */
.areas-sec{overflow:clip;padding-bottom:clamp(54px,6vw,90px)}
.ar-explorar{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(22px,3vw,40px);
  align-items:start;margin-top:clamp(30px,4vw,52px)}
.ar-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ar-tile{--cor:#7EE7D6;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;
  min-height:112px;padding:14px 14px 13px;border-radius:18px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:var(--on-stage);
  font:600 .9rem/1.25 Poppins,Inter,sans-serif;
  transition:transform .22s var(--ease,ease),background .22s,border-color .22s,box-shadow .22s}
.ar-tile:hover{transform:translateY(-3px);background:rgba(255,255,255,.09);border-color:color-mix(in srgb,var(--cor) 55%,transparent)}
.ar-tile:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ar-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:color-mix(in srgb,var(--cor) 18%,transparent);color:var(--cor);transition:background .22s,color .22s}
.ar-ico svg{width:22px;height:22px}
.ar-tile[aria-pressed="true"]{background:color-mix(in srgb,var(--cor) 16%,rgba(255,255,255,.04));border-color:var(--cor);
  box-shadow:0 0 0 1px var(--cor),0 16px 34px -14px var(--cor)}
.ar-tile[aria-pressed="true"] .ar-ico{background:var(--cor);color:#17123A}
html.js .ar-explorar.rv .ar-tile{opacity:0;transform:translateY(14px) scale(.96);
  transition:opacity .45s var(--ease,ease) calc(var(--k) * 35ms),transform .45s var(--ease,ease) calc(var(--k) * 35ms),
    background .22s,border-color .22s,box-shadow .22s}
html.js .ar-explorar.rv.in .ar-tile{opacity:1;transform:none}
html.js .ar-explorar.rv.in .ar-tile:hover{transform:translateY(-3px)}

.ar-painel{--cor:#7EE7D6;position:sticky;top:96px;padding-top:150px}
.ar-pers{position:absolute;top:0;right:8px;z-index:2;width:auto;height:210px;pointer-events:none;
  filter:drop-shadow(0 16px 26px rgba(8,6,26,.45));animation:arBoia 6s var(--ease,ease-in-out) infinite}
@keyframes arBoia{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.ar-cartao{position:relative;z-index:1;padding:28px 26px 24px;border-radius:26px;background:#FBFAFF;color:#171334;
  box-shadow:0 30px 60px -24px rgba(8,6,26,.7),0 0 0 2px var(--cor);transition:box-shadow .3s}
.ar-cartao::before{content:"";position:absolute;inset:0 0 auto;height:8px;border-radius:26px 26px 0 0;background:var(--cor);transition:background .3s}
.ar-cartao-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--cor);color:#17123A;
  box-shadow:0 10px 22px -8px var(--cor);transition:background .3s}
.ar-cartao-ico svg{width:30px;height:30px}
.ar-cartao-olho{margin:16px 0 2px;font:700 .74rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6A6595}
.ar-cartao-nome{margin:0;font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.15;color:#171334 !important}
.ar-cartao-n{margin:8px 0 16px;color:#514C7A;font-size:.95rem}
.ar-cartao-n b{font:700 1.5rem/1 Poppins,Inter,sans-serif;color:#171334;margin-right:2px}
.ar-fases{list-style:none;margin:0;padding:16px 0 0;border-top:1px dashed #DCD8F0;display:grid;gap:10px}
.ar-fases li{display:flex;align-items:center;gap:11px;font-size:.96rem;font-weight:500;color:#2B2654}
.ar-fases li span{flex:none;width:12px;height:12px;border-radius:50%;background:var(--cor);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--cor) 25%,transparent)}
.ar-fases li.ar-mais{color:#6A6595;font-size:.88rem;font-weight:600;padding-left:23px}
.ar-cartao.troca .ar-cartao-ico{animation:arPula .5s var(--ease,ease)}
.ar-cartao.troca .ar-cartao-nome,.ar-cartao.troca .ar-cartao-n{animation:arEntra .4s var(--ease,ease)}
.ar-cartao.troca .ar-fases li{animation:arEntra .45s var(--ease,ease) both}
.ar-cartao.troca .ar-fases li:nth-child(2){animation-delay:.05s}
.ar-cartao.troca .ar-fases li:nth-child(3){animation-delay:.1s}
.ar-cartao.troca .ar-fases li:nth-child(4){animation-delay:.15s}
.ar-cartao.troca .ar-fases li:nth-child(5){animation-delay:.2s}
@keyframes arPula{0%{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.12) rotate(4deg)}100%{transform:none}}
@keyframes arEntra{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.ar-total{text-align:center;margin:clamp(26px,3vw,40px) auto 0;color:var(--on-stage-2);font-size:1.02rem}
.ar-total b{font:700 1.3rem/1 Poppins,Inter,sans-serif;color:#FFB169;margin-right:3px}

/* os cinco níveis: anéis que acendem em sequência */
.niveis-sec{position:relative;overflow:hidden;background:var(--surface)}
.niveis-sec .ludico + .wrap,.niveis-sec .wrap{position:relative;z-index:1}
.destaque-diamante{background:linear-gradient(100deg,#6FD3F7,#9FE4FF 40%,#C4BAFF 70%,#6FD3F7);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:diaBrilho 4s linear infinite}
@keyframes diaBrilho{to{background-position:-200% 0}}
.anel-trilha{list-style:none;margin:clamp(34px,4vw,54px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(10px,1.6vw,22px);position:relative}
.anel-trilha::before{content:"";position:absolute;left:10%;right:10%;top:52px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,#E8E8F0,#D98A5A,#C6CBD6,#F5C33B,#9FE4FF);opacity:.55}
.anel-n{--cor:#ccc;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.anel-ico{position:relative;width:104px;height:104px;border-radius:50%;margin-bottom:10px;
  background:radial-gradient(circle at 50% 50%,var(--card) 0 50%,transparent 51%),
    conic-gradient(from 200deg,color-mix(in srgb,var(--cor) 60%,#fff),var(--cor),color-mix(in srgb,var(--cor) 70%,#000),var(--cor),color-mix(in srgb,var(--cor) 60%,#fff));
  box-shadow:0 0 0 6px var(--surface),0 12px 26px -10px color-mix(in srgb,var(--cor) 70%,#000)}
.anel-ico::after{content:"";position:absolute;inset:-10px;border-radius:50%;opacity:0;
  box-shadow:0 0 34px 8px var(--cor)}
.anel-n b{font:700 1.18rem/1.1 Poppins,Inter,sans-serif;color:var(--ink)}
.anel-n > span:last-child{font-size:.93rem;line-height:1.45;color:var(--ink-2);max-width:20ch}
html.js .anel-trilha.in .anel-ico::after{animation:anelAcende 6s ease-in-out infinite;animation-delay:calc(var(--k) * .9s)}
@keyframes anelAcende{0%,100%{opacity:0;transform:scale(.9)}12%,22%{opacity:.85;transform:scale(1)}36%{opacity:0}}
html.js .anel-trilha.rv .anel-n{opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--ease,ease) calc(var(--k) * 110ms),transform .5s var(--ease,ease) calc(var(--k) * 110ms)}
html.js .anel-trilha.rv.in .anel-n{opacity:1;transform:none}
.niveis-fecho{text-align:center;margin:clamp(30px,3.6vw,46px) auto 0;max-width:640px;font-size:1.12rem;color:var(--ink-2)}
.niveis-fecho strong{color:var(--ink)}

@media (max-width:980px){
  .ar-explorar{grid-template-columns:1fr}
  .ar-painel{position:relative;top:auto;max-width:460px;margin:0 auto;width:100%;order:-1;padding-top:120px}
  .ar-pers{height:170px}
}
@media (max-width:760px){
  .ar-grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ar-tile{min-height:0;flex-direction:row;align-items:center;gap:10px;padding:10px;border-radius:14px;font-size:.8rem;justify-content:flex-start}
  .ar-ico{flex:none;width:32px;height:32px;border-radius:10px}.ar-ico svg{width:18px;height:18px}
  .ar-painel{position:sticky;top:78px;z-index:3;padding-top:0}
  .ar-pers{display:none}
  .ar-cartao{padding:16px 18px 14px;border-radius:20px}
  .ar-cartao::before{border-radius:20px 20px 0 0;height:6px}
  .ar-cartao-ico{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:12px}
  .ar-cartao-ico svg{width:22px;height:22px}
  .ar-cartao-olho{margin-top:4px}
  .ar-cartao-nome{padding-right:52px;font-size:1.2rem}
  .ar-cartao-n{margin:4px 0 10px;font-size:.88rem}.ar-cartao-n b{font-size:1.2rem}
  .ar-fases{padding-top:10px;gap:6px;grid-template-columns:1fr 1fr}
  .ar-fases li{font-size:.8rem;gap:8px}.ar-fases li span{width:8px;height:8px;box-shadow:none}
  .ar-fases li.ar-mais{grid-column:1 / -1;padding-left:16px;font-size:.78rem}
  .anel-trilha{grid-template-columns:1fr;gap:14px;max-width:420px;margin-left:auto;margin-right:auto}
  .anel-trilha::before{left:51px;right:auto;top:20px;bottom:20px;width:4px;height:auto;
    background:linear-gradient(180deg,#E8E8F0,#D98A5A,#C6CBD6,#F5C33B,#9FE4FF)}
  .anel-n{display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto auto;column-gap:16px;text-align:left;align-items:center}
  .anel-ico{grid-row:1 / span 2;margin:0;width:84px;height:84px;justify-self:center}
  .anel-n b{align-self:end}.anel-n > span:last-child{align-self:start;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .ar-pers,.arv-aura,.destaque-diamante{animation:none}
  html.js .anel-trilha.in .anel-ico::after{animation:none;opacity:.5}
  .ar-cartao.troca *{animation:none !important}
}

/* ═══ os 27 temas, nos quatro grandes temas · 30/10/2026 ═══ */
.ar-grupo{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin:12px 0 0;font:700 .78rem/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--cor)}
.ar-grupo:first-child{margin-top:0}
.ar-grupo::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--cor);box-shadow:0 0 12px -1px var(--cor)}
.ar-grupo span{font-weight:600;letter-spacing:.06em;text-transform:none;color:var(--on-stage-2);opacity:.85}
.ar-tile{position:relative}
.ar-selo{position:absolute;top:10px;right:10px;font:700 .62rem/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:var(--cor);color:#17123A}
.ar-cartao-olho{transition:none}
.ar-nome{min-width:0;overflow-wrap:break-word;hyphens:auto}
@media (max-width:640px){.ar-selo{top:-8px;right:8px;font-size:.58rem;padding:3px 6px}}

/* ═══════ 31/10 · O CURRÍCULO VOLTA A SER UMA GRADE SÓ ═══════
   O Guilherme: «estava melhor antes, com os quadrados um ao lado do outro; todos os temas de um grande tema com a
   mesma cor». Os quatro grandes temas saem do meio da grade e viram a legenda de cima; cada quadrado leva a cor
   do seu grande tema no fundo, na borda e no ícone. */
.ar-legenda{list-style:none;margin:clamp(26px,3.4vw,44px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.ar-legenda li{display:flex;align-items:center;gap:9px;font:700 .78rem/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cor)}
.ar-legenda li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--cor);box-shadow:0 0 12px -1px var(--cor)}
.ar-legenda span{font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--on-stage-2);opacity:.85}
.ar-legenda + .ar-explorar{margin-top:18px}
.ar-tile{background:color-mix(in srgb,var(--cor) 11%,rgba(255,255,255,.03));border-color:color-mix(in srgb,var(--cor) 34%,transparent)}
.ar-tile .ar-ico{background:color-mix(in srgb,var(--cor) 26%,transparent)}
.ar-tile:hover{background:color-mix(in srgb,var(--cor) 18%,rgba(255,255,255,.04))}
@media (max-width:640px){
  .ar-legenda{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
  .ar-legenda li{display:grid;grid-template-columns:12px minmax(0,1fr);column-gap:8px;row-gap:4px;align-items:center;font-size:.7rem;letter-spacing:.1em;line-height:1.15}
  .ar-legenda span{grid-column:2;font-size:.74rem}
}