/* EVOLUÇÃO. Dono: frente Evolução. */
/* =====================================================================================
   EVOLUÇÃO: pódio de medalhas, caminho dos marcos, calendário de luz, dois vidros da semana,
   gráficos vivos (CURVA, em js/graficos.js) e a linha do tempo dos dias.
   ===================================================================================== */

/* ---------- cabeçalho e controle segmentado (fica preso no topo ao rolar) ---------- */
.evo-cab { padding-bottom: 18px; }
.evo-cab .olho { margin-bottom: 10px; }
.evo-cab .olho svg { width: 13px; height: 13px; }
.evo-cab .sub { color: var(--txt-2); }
.evo-marca-seg { display: block; height: 1px; margin-bottom: -1px; }
.evo-seg { position: sticky; top: calc(var(--st) + 10px); z-index: 20; }
/* preso no topo: uma faixa de largura total atrás do controle cobre a barra de status e as laterais
   (o que rola por baixo some no escuro desfocado) e termina em degradê, sem linha dura */
.evo-seg::before {
  content: ''; position: absolute; z-index: -1; left: -18px; right: -18px; top: calc(-10px - var(--st)); bottom: -36px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,7,12,.86) 0%, rgba(8,7,12,.78) calc(100% - 26px), rgba(8,7,12,0) 100%);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.evo-seg.preso::before { opacity: 1; }
.evo-seg .seg { transition: background .3s, box-shadow .3s, border-color .3s; box-shadow: 0 10px 28px -16px rgba(0,0,0,.8); }
.evo-seg .seg button { height: 44px; font-size: 14.5px; }
.evo-seg.preso .seg { background: rgba(12,10,18,.76); border-color: rgba(255,255,255,.14); box-shadow: 0 16px 36px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.evo-corpo { margin-top: 8px; }
.evo-entra { animation: evoVem .6s var(--mola) backwards .08s; }   /* backwards: depois de entrar não deixa efeito (o vidro de dentro continua desfocando) */
.evo-vem { animation: evoVem .6s var(--mola) backwards; }
.evo-vem-dir { animation: evoVemDir .5s var(--mola) backwards; }
.evo-vem-esq { animation: evoVemEsq .5s var(--mola) backwards; }
@keyframes evoVem { from { opacity: 0; transform: translateY(14px); } }
@keyframes evoVemDir { from { opacity: 0; transform: translateX(26px); } }
@keyframes evoVemEsq { from { opacity: 0; transform: translateX(-26px); } }

/* ---------- (a) pódio de medalhas ---------- */
.evo-podio {
  --tl: clamp(80px, 24.5vw, 98px); --tc: clamp(112px, 34.5vw, 136px); --gap: clamp(8px, 3.4vw, 16px); --ptop: 34px;
  position: relative; margin: 0 -18px; padding: var(--ptop) 18px 2px; overflow: hidden;
}
@supports (overflow: clip) { .evo-podio { overflow: visible; overflow-x: clip; } }   /* os raios sobem livres; dos lados nada vaza */
.evo-raios {
  position: absolute; left: 50%; top: calc(var(--ptop) + var(--tc) / 2); width: 340px; height: 340px; translate: -50% -50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,160,.13) 0deg 3.5deg, transparent 3.5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.42) 48%, transparent 86%); mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,.42) 48%, transparent 86%);
  animation: evoRaios 160s linear infinite;
}
.evo-halo {
  position: absolute; left: 50%; top: calc(var(--ptop) + var(--tc) / 2); width: 250px; height: 250px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,214,140,.34), rgba(217,180,106,.10) 55%, transparent); animation: evoHalo 5s ease-in-out infinite alternate;
}
@keyframes evoRaios { to { rotate: 360deg; } }
@keyframes evoHalo { from { opacity: .7; scale: .95; } to { opacity: 1; scale: 1.05; } }
.evo-podio-grade { position: relative; display: grid; grid-template-columns: var(--tl) var(--tc) var(--tl); column-gap: var(--gap); justify-content: center; align-items: end; }
.evo-med { grid-row: 1; position: relative; z-index: 1; display: grid; justify-items: center; cursor: pointer; outline: none; animation: evoSobe .95s var(--mola-salto) backwards; }
.evo-med.centro { grid-column: 2; margin-bottom: 20px; z-index: 2; }
.evo-med.esq { grid-column: 1; animation-delay: .1s; }
.evo-med.dir { grid-column: 3; animation-delay: .2s; }
.evo-med.esq .moeda, .evo-med.dir .moeda { --tam: var(--tl) !important; }
.evo-med.centro .moeda { --tam: var(--tc) !important; }
.evo-med:focus-visible .disco { outline: 2px solid var(--ouro-2); outline-offset: 4px; }
.evo-med .disco { animation: evoFlutua 6.5s ease-in-out infinite alternate; }
.evo-med.esq .disco { animation-delay: -2.2s; }
.evo-med.dir .disco { animation-delay: -4.4s; }
.evo-med.centro .disco { box-shadow: 0 18px 40px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,230,170,.45), 0 0 54px -6px rgba(240,200,120,.6); }
.evo-med.gira .disco { animation: evoGira 1s var(--mola) both; }
.evo-med:active .moeda { transform: scale(.96); }
.evo-med .moeda { transition: transform .25s var(--mola); -webkit-box-reflect: below 12px linear-gradient(transparent 66%, rgba(255,255,255,.13)); }
.evo-med.centro .moeda { -webkit-box-reflect: below 50px linear-gradient(transparent 70%, rgba(255,255,255,.12)); }
@keyframes evoSobe { from { opacity: 0; transform: translateY(34px) scale(.8); } }
@keyframes evoFlutua { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes evoGira { from { transform: perspective(520px) rotateY(0deg); } to { transform: perspective(520px) rotateY(360deg); } }
.evo-med .valor-m { margin-top: calc(var(--tam) * .085); filter: drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.evo-med.centro .valor-m { font-size: calc(var(--tam) * .4); }
.moeda.d3 .valor-m { font-size: calc(var(--tam) * .31) !important; }
.moeda.d4 .valor-m { font-size: calc(var(--tam) * .25) !important; }
.evo-med .ico-m { top: calc(var(--tam) * .16); }
.evo-med.apagada .disco { filter: saturate(.25) brightness(.62); box-shadow: 0 14px 30px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12); }
.evo-podio:has(.centro.apagada) .evo-raios, .evo-podio:has(.centro.apagada) .evo-halo { opacity: .25; animation: none; }
/* brilho de metal que passa pela medalha */
.moeda .disco > .evo-luz { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.evo-luz::after {
  content: ''; position: absolute; top: -25%; bottom: -25%; left: 0; width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255,248,225,.5), transparent); transform: translateX(-160%) skewX(-18deg);
  animation: evoBrilho 7.5s ease-in-out infinite 1.2s;
}
.evo-med.esq .evo-luz::after { animation-delay: 2.8s; }
.evo-med.dir .evo-luz::after { animation-delay: 4.4s; }
@keyframes evoBrilho { 0%, 74% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
.evo-estrela-topo { position: absolute; left: 50%; top: -17px; translate: -50% 0; z-index: 3; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255,225,160,.8)); }
.evo-med.gira .evo-estrela-topo { opacity: 0; transition: opacity .2s; }
.evo-sombra { position: absolute; left: 50%; bottom: -12px; width: 76%; height: 16px; translate: -50% 0; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(0,0,0,.7), transparent); pointer-events: none; }
.evo-med.centro .evo-sombra { bottom: -32px; width: 56%; opacity: .75; }
.evo-chao { grid-row: 2; grid-column: 1 / -1; position: relative; height: 34px; margin: 6px -12px 0; pointer-events: none; background: radial-gradient(55% 100% at 50% 0%, rgba(217,180,106,.20), transparent 72%); }
.evo-chao::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,210,140,.55) 50%, transparent); }
.evo-rot { grid-row: 3; margin-top: -18px; text-align: center; font: 600 10.5px/1.4 var(--cinzel); letter-spacing: .13em; text-transform: uppercase; color: var(--txt-2); cursor: pointer; text-wrap: balance; }
.evo-rot.esq { grid-column: 1; }
.evo-rot.centro { grid-column: 2; color: var(--ouro-2); font-size: 11px; }
.evo-rot.dir { grid-column: 3; }
.evo-rot .nq { font-style: normal; white-space: nowrap; }
/* recaídas: uma linha só, sem caixa */
.evo-quedas { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px auto 0; padding: 8px 14px; min-height: 44px; max-width: 100%; border-radius: 999px; color: var(--txt-2); font-size: 13.5px; line-height: 1.35; text-align: center; transition: background .2s; }
.evo-quedas:active { background: rgba(255,255,255,.05); }
.evo-quedas b { color: var(--txt); font-weight: 600; }
.evo-quedas .nw { white-space: nowrap; }
@media (max-width: 379px) { .evo-quedas .sep { display: none; } .evo-quedas .nw { display: block; font-size: 13px; color: var(--txt-3); } }
.evo-quedas-ico { display: grid; place-items: center; flex: none; color: #ff9f8c; filter: drop-shadow(0 0 6px rgba(255,100,60,.5)); }
.evo-quedas-ico.ok { color: var(--verde); filter: drop-shadow(0 0 6px rgba(98,213,157,.45)); }
.evo-quedas-ico svg { width: 19px; height: 19px; }
.evo-quedas > svg { width: 15px; height: 15px; color: var(--txt-4); flex: none; }
.evo-convite { text-align: center; margin: 22px auto 0; max-width: 300px; }
.evo-convite p { color: var(--txt-2); font-size: 15px; margin: 0 0 16px; }

/* ---------- (b) marcos: caminho de estrelas ---------- */
.evo-marcos-sec { margin-top: 42px; }
/* o trilho rola de lado: as bordas somem num degradê largo (o marco da ponta fica fantasma, como quem continua longe),
   e o respiro de 20 px em cima deixa o brilho do medalhão inteiro (sem corte reto) */
.evo-marcos {
  --borda: 20%;
  margin: -20px -18px 0; padding: 20px 18px 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 6%, #000 var(--borda), #000 calc(100% - var(--borda)), rgba(0,0,0,.35) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 6%, #000 var(--borda), #000 calc(100% - var(--borda)), rgba(0,0,0,.35) 94%, transparent 100%);
}
.evo-marcos::-webkit-scrollbar { display: none; }
.evo-marcos.no-ini {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--borda)), rgba(0,0,0,.35) 94%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - var(--borda)), rgba(0,0,0,.35) 94%, transparent 100%);
}
.evo-marcos.no-fim {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 6%, #000 var(--borda), #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 6%, #000 var(--borda), #000 100%);
}
.evo-marcos.no-ini.no-fim { -webkit-mask-image: none; mask-image: none; }
.evo-trilha { position: relative; display: flex; height: 172px; padding-top: 50px; box-sizing: border-box; }
.evo-fio { position: absolute; left: 0; right: 0; top: 67px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16) 40px, rgba(255,255,255,.06) calc(100% - 40px), rgba(255,255,255,0)); }
.evo-fio-ouro { position: absolute; left: 0; top: 66.5px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(217,180,106,0), rgba(217,180,106,.35) 26px, #e9c97f 35%, #fff1c9); box-shadow: 0 0 12px rgba(240,200,120,.6); }
.evo-guardiao { position: absolute; top: 2px; width: 38px; height: 38px; margin-left: -19px; z-index: 2; animation: evoGuarda 3.6s ease-in-out infinite alternate; }
.evo-guardiao { border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2b2418, #0b0906); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,230,170,.45), 0 0 18px rgba(240,200,120,.55), 0 6px 14px rgba(0,0,0,.6); }
.evo-guardiao > svg { position: absolute; }
.evo-guardiao img { position: relative; width: 38px; height: 38px; border-radius: 50%; }
.evo-guardiao::after { content: ''; position: absolute; left: 50%; top: 40px; width: 1px; height: 20px; background: linear-gradient(180deg, rgba(255,233,176,.75), rgba(255,233,176,0)); }
.evo-guardiao::before { content: ''; position: absolute; left: 50%; top: 61px; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: #fff1c9; box-shadow: 0 0 12px 3px rgba(240,200,120,.8); }
@keyframes evoGuarda { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.evo-marco { position: relative; flex: none; width: 70px; display: flex; flex-direction: column; align-items: center; color: var(--txt-3); }
.evo-estrela { position: relative; width: 36px; height: 36px; display: grid; place-items: center; }
.evo-marco b { font: 500 20px/1 var(--serif); margin-top: 10px; color: var(--txt-3); font-variant-numeric: lining-nums tabular-nums; }
.evo-marco small { font: 600 11px/1 var(--cinzel); letter-spacing: .16em; text-transform: uppercase; color: var(--txt-4); margin-top: 5px; }
.evo-marco em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ouro-2); margin-top: 8px; white-space: nowrap; padding: 4px 8px; border-radius: 99px; background: rgba(217,180,106,.14); border: 1px solid rgba(217,180,106,.32); }
.evo-marco.feito b { color: var(--ouro-2); }
.evo-marco.feito small { color: rgba(240,211,143,.62); }
.evo-marco.prox b { color: #fff3d6; font-size: 22px; }
.evo-marco.prox small { color: var(--ouro); }
.evo-marco.prox .evo-estrela::before { content: ''; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 1px solid rgba(255,230,170,.55); animation: evoPulsa 2.4s ease-out infinite; }
.evo-marco.recorde b { color: #d5d9e2; }
.evo-marco.futuro b { color: var(--txt-4); }
@keyframes evoPulsa { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* ---------- (c) calendário de luz ---------- */
.evo-cal { margin-top: 38px; }
.evo-cal > .cab-s { margin-bottom: 6px; }
.evo-cal-cab { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin: 0 0 14px; }
.evo-seta {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ouro-2);
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.13), rgba(255,255,255,.03)), rgba(16,14,22,.4); border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-luz), 0 8px 20px -8px rgba(0,0,0,.6); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  transition: transform .2s var(--mola), opacity .25s;
}
.evo-seta svg { width: 20px; height: 20px; }
.evo-seta:active { transform: scale(.9); }
.evo-seta[disabled] { opacity: .25; pointer-events: none; }
.evo-cal-mes { text-align: center; line-height: 1.1; }
.evo-cal-mes b { font: 500 25px/1.1 var(--serif); letter-spacing: -.012em; text-transform: capitalize; }
.evo-cal-mes span { font: 400 25px/1.1 var(--serif); color: var(--txt-3); }
.evo-cal-mes small { display: block; font-size: 13px; color: var(--txt-3); margin-top: 6px; }
.evo-cal-janela { overflow: hidden; touch-action: pan-y; margin: 0 -8px; padding: 6px 8px 10px; }
.evo-cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 8px; column-gap: 2px; will-change: transform; }
.evo-sem { text-align: center; font: 600 10.5px/1 var(--cinzel); letter-spacing: .1em; color: var(--txt-4); padding-bottom: 6px; }
.evo-dia {
  position: relative; width: 100%; max-width: 42px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--txt-3); transition: transform .2s var(--mola);
}
button.evo-dia:active { transform: scale(.86); }
button.evo-dia::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; }   /* área de toque de 44 px sem crescer a esfera */
.evo-dia.fora { visibility: hidden; }
.evo-dia.antes { color: var(--txt-4); }
.evo-dia.futuro { color: var(--txt-4); opacity: .6; }
.evo-dia.sem { color: var(--txt-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.evo-dia.limpo {
  color: #fffdf2; text-shadow: 0 1px 3px rgba(30,40,10,.55);
  background: radial-gradient(circle at 50% 26%, rgba(255,240,182,.92) 0%, rgba(222,220,140,.62) 34%, rgba(138,204,140,.34) 72%, rgba(98,213,157,.2) 100%);
  box-shadow: inset 0 0 0 1px rgba(246,240,190,.5), inset 0 -5px 10px rgba(30,70,40,.32), 0 0 18px -3px rgba(214,226,140,.62);
}
.evo-dia.caiu {
  color: #fff2ea; text-shadow: 0 1px 2px rgba(0,0,0,.45);
  background: radial-gradient(circle at 50% 34%, rgba(255,196,124,.75), rgba(255,106,82,.5) 52%, rgba(140,30,20,.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,176,136,.45), 0 0 18px -3px rgba(255,100,60,.75);
}
.evo-dia.hoje::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--ouro); box-shadow: 0 0 12px rgba(217,180,106,.6), inset 0 0 8px rgba(217,180,106,.25); animation: evoHoje 2.8s ease-in-out infinite alternate; pointer-events: none; }
.evo-dia.hoje { color: var(--ouro-luz); }
.evo-dia.hoje.limpo, .evo-dia.hoje.caiu { color: #fff; }
@keyframes evoHoje { from { opacity: .65; } to { opacity: 1; } }
.evo-legenda { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--txt-3); }
.evo-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.evo-legenda i { width: 10px; height: 10px; border-radius: 50%; }
.l-limpo { background: radial-gradient(circle at 50% 35%, #f6e8a8, #8fd3a0); box-shadow: 0 0 8px rgba(196,226,140,.65); }
.l-caiu { background: radial-gradient(circle at 50% 35%, #ffc08a, #ff6a52); box-shadow: 0 0 8px rgba(255,100,60,.65); }
.l-sem { box-shadow: inset 0 0 0 1px rgba(255,255,255,.38); }
.l-hoje { box-shadow: inset 0 0 0 1.5px var(--ouro), 0 0 6px rgba(217,180,106,.5); }

/* ---------- (d) a semana em dois vidros (tela dividida, em perspectiva) ---------- */
.evo-semana { margin-top: 44px; }
.evo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; perspective: 1000px; }
.evo-duo.so-um { grid-template-columns: minmax(0, 240px); justify-content: center; }
.evo-vidro {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 12px 18px; border-radius: 24px; cursor: pointer; overflow: hidden; outline: none;
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 58%), var(--vidro-fundo); border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-luz), var(--sombra-flutua); backdrop-filter: var(--vidro-desfoque); -webkit-backdrop-filter: var(--vidro-desfoque);
  transition: transform .55s var(--mola);
}
.evo-vidro::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,240,205,.6), transparent); }
.evo-vidro::after { content: ''; position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(closest-side, var(--luz, rgba(217,180,106,.16)), transparent); pointer-events: none; }
.evo-duo .forte { transform: rotateY(9deg); transform-origin: 100% 50%; }
.evo-duo .fraco { transform: rotateY(-9deg); transform-origin: 0% 50%; --luz: rgba(244,199,90,.12); }
.evo-duo.so-um .forte { transform: none; }
.evo-vidro:active { transform: rotateY(0deg) scale(.97); }
.evo-vidro:focus-visible { box-shadow: 0 0 0 2px var(--ouro-2), var(--sombra-flutua); }
.evo-vidro > * { position: relative; z-index: 1; }
.evo-vidro .olho { font-size: 10px; letter-spacing: .17em; margin-top: 10px; }
.evo-vidro.fraco .olho { color: #f4c75a; }
.evo-v-nome { display: flex; align-items: center; justify-content: center; min-height: 2.5em; font: 500 16px/1.25 var(--serif); color: var(--txt); text-wrap: balance; }
.evo-v-num { font: 500 46px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; margin-top: 8px; padding-bottom: 2px; }
.evo-vidro small { font-size: 12px; color: var(--txt-3); }
.evo-ico {
  --c: var(--ouro); width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--c);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c) 34%, transparent), color-mix(in srgb, var(--c) 8%, transparent) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 44%, transparent), 0 0 22px -6px color-mix(in srgb, var(--c) 75%, transparent);
}
.evo-ico svg { width: 20px; height: 20px; }
.evo-ico.g { width: 54px; height: 54px; }
.evo-ico.g svg { width: 25px; height: 25px; }
.evo-nota-linha { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; margin: 40px auto 0; max-width: 320px; color: var(--txt-3); font-size: 13.5px; line-height: 1.45; }
.evo-nota-linha svg { width: 16px; height: 16px; flex: none; }

/* ---------- gráficos ---------- */
.evo-graficos { padding-top: 22px; }
.evo-g-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 2px 16px; }
.evo-info {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--txt-2); flex: none;
  background: rgba(16,14,22,.4); border: 1px solid var(--vidro-borda); box-shadow: var(--vidro-luz); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.evo-info svg { width: 20px; height: 20px; }
.evo-info:active { transform: scale(.92); }
.evo-leg { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 34px; transition: opacity .25s; }
.evo-g-sec:has(.cv.ativo) .evo-leg, .evo-g-sec:has(.cv.ativo) .evo-g-sub { opacity: 0; }   /* enquanto o dedo corre, o balão ocupa o lugar */
.evo-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 15px 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--txt-3); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); transition: background .25s, color .25s, border-color .25s, transform .2s var(--mola);
}
.evo-chip:active { transform: scale(.95); }
.evo-chip i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c); transition: background .25s, box-shadow .25s; }
.evo-chip.on { color: var(--txt); background: color-mix(in srgb, var(--c) 13%, rgba(255,255,255,.02)); border-color: color-mix(in srgb, var(--c) 46%, transparent); }
.evo-chip.on i { background: var(--c); box-shadow: 0 0 10px var(--c); }
.evo-graf { position: relative; }
.evo-graf::before { content: ''; position: absolute; inset: -34px -18px -16px; z-index: -1; pointer-events: none; background: radial-gradient(60% 58% at 50% 52%, rgba(7,6,10,.62), rgba(7,6,10,.28) 62%, transparent 100%); }   /* sombra suave atrás do gráfico (sem caixa) */
.evo-arraste { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--txt-4); margin: 12px 0 0; }
.evo-arraste svg { width: 16px; height: 16px; }
.evo-g-sub { margin: -6px 2px 34px; font-size: 13.5px; color: var(--txt-3); transition: opacity .25s; }
.evo-nivel { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 36%, transparent); }
.evo-nivel i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
/* CURVA (gráfico vivo de js/graficos.js) */
.cv { position: relative; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.cv-svg { display: block; overflow: visible; }
.cv-grade { stroke: rgba(255,255,255,.08); stroke-dasharray: 2 5; }
.cv-eixo { font: 500 10.5px var(--sans); fill: rgba(245,239,228,.4); font-variant-numeric: tabular-nums; }
.cv-s { transition: opacity .35s ease; }
.cv-s.off { opacity: 0; }
.cv-espera .cv-linha { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cv-espera .cv-area, .cv-espera .cv-fim { opacity: 0; }
.cv-espera .cv-barra { transform: scaleY(0); }
.cv-barra { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .25s; }
.cv-vai .cv-linha { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--mola); }
.cv-vai .cv-area { transition: opacity 1s ease .45s; }
.cv-vai .cv-fim { transition: opacity .5s ease 1.1s; }
.cv-vai .cv-barra { transition: transform .8s var(--mola-salto) var(--d, 0ms), opacity .25s; }
.cv-cursor { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.cv.ativo .cv-cursor { opacity: 1; }
.cv-guia { position: absolute; left: -.5px; top: 0; width: 1px; background: linear-gradient(180deg, rgba(255,236,190,0), rgba(255,236,190,.9) 16%, rgba(255,236,190,.25)); will-change: transform; }
.cv-pt { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(8,7,12,.88), 0 0 16px 2px var(--c); transition: opacity .15s; will-change: transform; }
.cv-balao {
  position: absolute; left: 0; top: 0; z-index: 3; padding: 8px 12px 9px; border-radius: 14px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s ease; will-change: transform;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)), rgba(20,18,28,.74); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.cv.ativo .cv-balao { opacity: 1; }
.cv-balao > b { display: block; font: 600 10.5px/1.2 var(--cinzel); letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-2); }
.cv-b-vals { display: flex; gap: 12px; margin-top: 6px; font: 500 17px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--txt); }
.cv-b-vals span { display: inline-flex; align-items: center; gap: 6px; }
.cv-b-vals i { width: 8px; height: 8px; border-radius: 50%; }
.cv-b-vals em { font: 600 12.5px/1 var(--sans); font-style: normal; color: var(--txt-2); margin-left: 2px; }
.cv.ativo .cv-barra { opacity: .35; }
.cv.ativo .cv-barra.sel { opacity: 1; }
/* pilar por pilar: linhas sem caixa */
.evo-g-sec .seg { margin-top: 2px; }
.evo-g-sec .seg button { height: 44px; }   /* alvo de toque de 44 px (o .seg da fundação tem 36) */
.evo-pilares { margin-top: 10px; }
.evo-pl { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 2px; text-align: left; border-radius: 14px; transition: background .2s; }
.evo-pl + .evo-pl::before { content: ''; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--linha); }
.evo-pl:active { background: rgba(255,255,255,.04); }
.evo-pl-meio { flex: 1; min-width: 0; }
.evo-pl-meio b { display: block; font: 600 15px/1.25 var(--sans); color: var(--txt); }
.evo-pl-meio small { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; color: var(--txt-3); }
.evo-pl-meio small svg { width: 14px; height: 14px; }
.evo-pl-meio small.sobe { color: var(--verde); }
.evo-pl-meio small.desce { color: #ff9f8c; }
.evo-pl .spark { width: 64px; height: 28px; flex: none; }
.evo-troca { animation: evoVem .45s var(--mola) backwards; }
/* anel com a nota no meio (notaAnelHTML) */
.nota-anel { position: relative; width: var(--tam); height: var(--tam); flex: none; display: grid; place-items: center; }
.nota-anel svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 55%, transparent)); }
.nota-anel .na-arco { animation: naEnche 1.2s var(--mola) backwards .1s; }
@keyframes naEnche { from { stroke-dashoffset: var(--c0); } }
.nota-anel b { position: relative; font: 500 calc(var(--tam) * .4)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; color: var(--txt); padding-top: .06em; }
.nota-anel b.longo { font-size: calc(var(--tam) * .3); }

/* ---------- dias: linha do tempo ---------- */
.evo-dias { padding-top: 24px; }
.evo-mes + .evo-mes { margin-top: 34px; }
.evo-mes-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 6px; }
.evo-mes-cab small { font-size: 12.5px; color: var(--txt-3); text-align: right; }
.evo-tempo { position: relative; }
.evo-tempo::before { content: ''; position: absolute; left: 61.5px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(180deg, rgba(217,180,106,.5), rgba(217,180,106,.12)); }
.evo-dl { position: relative; display: grid; grid-template-columns: 44px 36px minmax(0, 1fr) auto 18px; align-items: center; width: 100%; min-height: 64px; padding: 8px 0; text-align: left; border-radius: 14px; transition: background .2s; }
.evo-dl:active { background: rgba(255,255,255,.04); }
.evo-dl-data { text-align: center; }
.evo-dl-data b { display: block; font: 500 22px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.evo-dl-data small { display: block; font: 600 11px/1 var(--cinzel); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); margin-top: 6px; }
.evo-dl.hoje .evo-dl-data b { color: var(--ouro-2); }
.evo-dl-ponto { display: grid; place-items: center; }
.evo-dl-ponto i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; }
.evo-dl.limpo .evo-dl-ponto i { background: radial-gradient(circle at 50% 35%, #f6eab0, #8fd3a0); box-shadow: 0 0 0 4px rgba(8,7,12,.92), 0 0 12px 1px rgba(196,226,140,.7); }
.evo-dl.caiu .evo-dl-ponto i { background: radial-gradient(circle at 50% 35%, #ffc08a, #ff6a52); box-shadow: 0 0 0 4px rgba(8,7,12,.92), 0 0 14px 2px rgba(255,100,60,.8); }
.evo-dl-meio { min-width: 0; padding-left: 6px; }
.evo-dl-meio b { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.evo-dl.caiu .evo-dl-meio b { color: #ffb6a8; }
.evo-dl-meio small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evo-dl-risco { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--txt-2); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.evo-dl-risco i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.evo-dl > svg { width: 16px; height: 16px; color: var(--txt-4); justify-self: end; }

/* ---------- estados vazios ---------- */
.evo-espera { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 6px 0; }
.evo-espera-arte { width: 100%; max-width: 320px; margin: 0 auto 8px; }
.evo-espera-arte svg { width: 100%; height: auto; overflow: visible; }
.evo-vz-l { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: evoVz 6s var(--mola) infinite; animation-delay: var(--d, 0s); }
@keyframes evoVz { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } 55%, 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.evo-espera .titulo-s { max-width: 320px; margin-top: 10px; }
.evo-espera .sub { max-width: 320px; margin: 10px auto 0; }
.evo-espera .evo-f-selo { margin: 26px auto 8px; }
.evo-espera .bt { margin-top: 22px; }
.evo-passos { display: flex; align-items: center; margin: 24px 0 0; }
.evo-passos i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 500 16px/1 var(--serif); font-style: normal; color: var(--txt-3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.evo-passos i.on { color: #1b1307; background: var(--ouro-grad); box-shadow: 0 0 16px rgba(240,200,120,.5); }
.evo-passos i svg { width: 16px; height: 16px; }
.evo-passos span { width: 56px; height: 2px; background: rgba(255,255,255,.14); }
.evo-passos span.on { background: linear-gradient(90deg, #e9c97f, rgba(255,255,255,.14)); }
.evo-passos + .bt { margin-top: 26px; }

/* ---------- folhas da Evolução ---------- */
.evo-f h3::first-letter { text-transform: uppercase; }
.evo-f-med { display: grid; place-items: center; margin: 8px 0 14px; }
.evo-f-med .moeda .valor-m { margin-top: calc(var(--tam) * .085); }
.evo-f-meta, .evo-f-bloco { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--linha); }
.evo-f-meta small { display: block; margin-top: 8px; font-size: 13px; color: var(--txt-3); }
.evo-f-lin { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--txt-2); }
.evo-f-lin b { color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.evo-f-lin b.brasa { color: #ffb6a8; }
.evo-barra { height: 8px; margin-top: 10px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.evo-barra i { display: block; height: 100%; border-radius: 9px; background: var(--ouro-grad); box-shadow: 0 0 10px rgba(240,200,120,.5); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--mola) .15s; }
.evo-barra.bronze i { background: linear-gradient(90deg, #8f5a30, #e0a774); }
.evo-barra i.vai { transform: scaleX(1); }
.evo-f-selo { width: 56px; height: 56px; margin: 6px 0 14px; border-radius: 50%; display: grid; place-items: center; color: var(--ouro-2); background: radial-gradient(circle at 50% 30%, rgba(217,180,106,.3), rgba(217,180,106,.07)); box-shadow: inset 0 0 0 1px rgba(217,180,106,.36), 0 0 30px -8px rgba(217,180,106,.6); }
.evo-f-selo.brasa { color: #ffb4a0; background: radial-gradient(circle at 50% 30%, rgba(255,120,90,.32), rgba(255,90,60,.07)); box-shadow: inset 0 0 0 1px rgba(255,140,110,.4), 0 0 30px -8px rgba(255,100,60,.7); }
.evo-f-selo.ok { color: var(--verde); background: radial-gradient(circle at 50% 30%, rgba(98,213,157,.26), rgba(98,213,157,.06)); box-shadow: inset 0 0 0 1px rgba(98,213,157,.34), 0 0 30px -8px rgba(98,213,157,.55); }
.evo-f-selo svg { width: 26px; height: 26px; }
.evo-f-tit { display: flex; margin: 22px 0 8px; }
.evo-f-lista { display: grid; }
.evo-f-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 2px; text-align: left; border-top: 1px solid var(--linha); }
.evo-f-item:first-child { border-top: 0; }
.evo-f-item:active { background: rgba(255,255,255,.04); }
.evo-f-item i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffc08a, #ff6a52); box-shadow: 0 0 10px rgba(255,100,60,.7); }
.evo-f-item span { flex: 1; min-width: 0; font-size: 15px; }
.evo-f-item span::first-letter { text-transform: uppercase; }
.evo-f-item b { font-size: 13px; font-weight: 500; color: var(--txt-3); white-space: nowrap; }
.evo-f-item svg { width: 16px; height: 16px; color: var(--txt-4); flex: none; }
.evo-f-dica { margin-top: 18px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(217,180,106,.10), rgba(217,180,106,.03)); border: 1px solid rgba(217,180,106,.22); }
.evo-f-dica .olho { margin-bottom: 8px; }
.evo-f-dica > b { display: block; font-size: 15.5px; font-weight: 600; }
.evo-f-dica p { margin: 6px 0 0; color: var(--txt-2); font-size: 14.5px; line-height: 1.55; }
.evo-f-dica.brasa { background: linear-gradient(180deg, rgba(255,106,82,.12), rgba(255,106,82,.03)); border-color: rgba(255,130,110,.28); }
.evo-f-dica.brasa .olho { color: #ffaa98; }
.evo-f-dica .evo-f-barras { margin: 12px 0 4px; }
.evo-f-texto { margin: 16px 0 0; color: var(--txt-2); font-size: 14.5px; line-height: 1.55; }
.evo-f-pilar { display: flex; align-items: center; gap: 14px; margin: 6px 0 12px; }
.evo-f-pilar h3 { margin: 4px 0 0; }
.evo-f-aneis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 4px; }
.evo-f-aneis.dois { grid-template-columns: 1fr 1fr; }
.evo-f-anel { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.evo-f-anel span { font-size: 12.5px; color: var(--txt-3); }
.evo-f-graf { margin: 18px -4px 0; }
.evo-f-topo { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; }
.evo-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; font: 600 10.5px/1 var(--cinzel); letter-spacing: .14em; text-transform: uppercase; }
.evo-tag i { width: 7px; height: 7px; border-radius: 50%; }
.evo-tag.limpo { color: #d3eec6; background: rgba(150,214,140,.12); border: 1px solid rgba(170,224,150,.3); }
.evo-tag.limpo i { background: #b4e2a6; box-shadow: 0 0 8px #b4e2a6; }
.evo-tag.caiu { color: #ffb6a8; background: rgba(255,106,82,.12); border: 1px solid rgba(255,130,110,.32); }
.evo-tag.caiu i { background: #ff7a5c; box-shadow: 0 0 8px #ff7a5c; }
.evo-f-hora { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--txt-3); }
.evo-f-hora svg { width: 15px; height: 15px; }
.evo-regua { position: relative; height: 8px; margin: 12px 8px 0; border-radius: 9px; background: linear-gradient(90deg, #62d59d, #9fe0b9 30%, #f4c75a 50%, #f39a5b 72%, #ff6a5f); }
.evo-regua i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #15141b, 0 2px 8px rgba(0,0,0,.5); }
.evo-fatores { display: grid; gap: 9px; margin-top: 16px; }
.evo-fator { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--txt-2); line-height: 1.35; }
.evo-fator i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.evo-fator b { margin-left: auto; color: var(--txt); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.evo-pontos10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 12px; }
.evo-pontos10 i { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); }
.evo-pontos10 i.on { background: #c9b6ff; background: color-mix(in srgb, #ff6a52 calc(var(--k) * 100%), #c9b6ff); }
.evo-f-prop { margin: 18px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid rgba(217,180,106,.55); }
.evo-f-prop p { margin: 8px 0 0; font: italic 400 18px/1.45 var(--serif); color: var(--txt); }
.evo-f-barras { display: grid; gap: 9px; }
.evo-bh { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 13px; color: var(--txt-2); }
.evo-bh .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evo-bh .fio { height: 7px; border-radius: 9px; background: rgba(255,255,255,.07); overflow: hidden; }
.evo-bh .fio i { display: block; height: 100%; width: var(--w); border-radius: 9px; transform-origin: left; transform: scaleX(0); transition: transform .9s var(--mola); }
.evo-bh .fio i.vai { transform: scaleX(1); }
.evo-bh b { text-align: right; color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; }
.evo-f-eixos { display: grid; gap: 18px; margin-top: 4px; }
.evo-f-eixo { display: flex; gap: 14px; align-items: flex-start; }
.evo-f-eixo b { font-size: 16px; font-weight: 600; }
.evo-f-eixo p { margin: 4px 0 0; color: var(--txt-2); font-size: 14.5px; line-height: 1.5; }

/* linhas estáticas, mini-linha e teia (usadas também em outras telas) */
svg.spark { width: 84px; height: 30px; flex: none; }
.grafico { width: 100%; overflow: visible; }
.grafico .grade-l { stroke: rgba(255,255,255,.07); }
.grafico .eixo-t { font: 500 10px var(--sans); fill: rgba(245,239,228,.36); }

@media (prefers-reduced-motion: reduce) {
  .evo-vz-l { animation: none !important; stroke-dashoffset: 0; opacity: .85; }
  .evo-raios, .evo-halo, .evo-med .disco, .evo-luz::after, .evo-guardiao, .evo-marco.prox .evo-estrela::before, .evo-dia.hoje::after { animation: none !important; }
  .evo-duo .forte, .evo-duo .fraco { transform: none; }
}
@media (max-width: 370px) {
  .evo-pl .spark { width: 52px; }
  .evo-dl-risco { padding: 5px 8px; }
  .evo-v-num { font-size: 42px; }
}