/* Tema verde — mesmo tipo do tema preto (Bebas + Montserrat), fundo #8ABE41.
   Cards em creme #FBF0DF (o fundo do simulador); dentro das seções creme, branco quente.
   Texto miúdo no limão usa #072E1C (6.7:1). Roxo #5C388C só em tipo grande ou com texto branco. */
.page-v2 {
  --bg: #8ABE41;
  --bg-2: #107648;
  --bg-3: #0E5A36;
  --surface: #FBF0DF;
  --surface-2: #F3E6CF;
  --card-line: rgba(7, 46, 28, .08);
  --card-shadow: 0 14px 32px rgba(14, 70, 36, .14), 0 2px 6px rgba(14, 70, 36, .06);
  --line: rgba(16, 118, 72, .16);
  --line-strong: rgba(16, 118, 72, .32);
  --text: #123528;
  --muted: #072E1C;
  --cream: #ffffff;
  --ink: #123528;
  --ink-muted: #4d6e5e;
  --gold: #5C388C;
  --shadow: 0 18px 40px rgba(14, 70, 36, .14);
  /* Níveis: cinza, azul, verde e dourado. Textos com contraste ≥ 4,5:1 sobre creme. */
  --lv-aprendiz: #5F5F5F;
  --lv-praticante: #0B4F8A;
  --lv-profissional: #0C5C32;
  --lv-mestre: #8A6400;
  --lv-mestre-ink: #3D2A00;
  --lv-mestre-bg: linear-gradient(135deg, #FFE7A3 0%, #F2C21B 48%, #D9A514 100%);
  --niv-aprendiz: #9A9A9A;
  --niv-praticante: #4DA3FF;
  --niv-profissional: #3FB36A;
  --niv-mestre: #F2C21B;
  background: #8ABE41;
  color: #123528;
}

.page-v2 .h-1,
.page-v2 .h-2,
.page-v2 .h-display,
.page-v2 .lead,
.page-v2 .eyebrow,
.page-v2 .hero__sub,
.page-v2 .hero__sub strong,
.page-v2 .stat__v,
.page-v2 .stat__l { color: #072E1C; }
.page-v2 .section--cream .h-1,
.page-v2 .section--cream .h-2 { color: #107648; }
.page-v2 .section--cream .eyebrow { color: #5C388C; }
.page-v2 .section--cream .lead { color: #2F4A3C; }

.page-v2 .grad-gold,
.page-v2 .hero__title .grad-gold,
.page-v2 .tri__total .v,
.page-v2 .text-gold {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #5C388C;
  animation: none;
}

.page-v2 .hero__title .grad-gold,
.page-v2 .stat__v.grad-gold { color: #5C388C; }

/* "Desafio": roxo com brilho que atravessa a palavra, como o dourado do tema preto.
   O tom mais claro só aparece na faixa do brilho; o resto fica entre #3A2060 e #5C388C. */
.page-v2 .hero__title .line.grad-gold {
  background: linear-gradient(100deg, #2C1848 0%, #4A2A78 22%, #5C388C 38%, #B79AE6 48%, #5C388C 58%, #3A2060 78%, #2C1848 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 5.5s linear infinite;
  filter: drop-shadow(0 8px 18px rgba(44, 24, 72, .28));
}

/* Sol branco só atrás de Super Desafio. O leão fica no verde limpo. */
/* Conteúdo do hero alinhado ao topo, sem altura mínima: a faixa animada logo abaixo continua na primeira tela. */
.page-v2 .hero { background: transparent; align-items: flex-start; min-height: 0; padding: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 56px); }
.page-v2 .page-head { padding-top: clamp(24px, 3vw, 40px); }
.page-v2 .page-head .container > .eyebrow:first-child { display: flex; }
@media (min-width: 901px) and (max-height: 860px) {
  .page-v2 .hero { padding: 24px 0 28px; }
  .page-v2 .page-head { padding-top: 24px; }
  .page-v2 .hero .h-display { font-size: clamp(76px, 10vw, 120px); }
  .page-v2 .hero__title { margin-top: 12px; }
  .page-v2 .hero__sub { margin-top: 16px; }
  .page-v2 .hero__cta { margin-top: 22px; }
  .page-v2 .hero__meta { margin-top: 22px; }
}
.page-v2 .hero__rays,
.page-v2 .hero .hero__vignette,
.page-v2 .hero::after { opacity: 0; }
.page-v2 .hero__title { position: relative; isolation: isolate; }
.page-v2 .hero__title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 880px;
  height: 880px;
  margin-left: -440px;
  margin-top: -440px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 22%, transparent 46%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .16) 0deg 1.4deg, transparent 1.4deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 28%, transparent 58%);
  mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 28%, transparent 58%);
  animation: spin 180s linear infinite;
}
@media (max-width: 900px) {
  .page-v2 .hero__title::before { width: 560px; height: 560px; margin-left: -280px; margin-top: -280px; }
}

/* ---------- chrome ---------- */
.page-v2 .header {
  background: rgba(138, 190, 65, .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: rgba(16, 118, 72, .18);
}
.page-v2 .brand__name,
.page-v2 .brand__sub,
.page-v2 .nav a,
.page-v2 .header__status,
.page-v2 .header__here { color: #072E1C; }
.page-v2 .brand__name { font-size: 20px; }
/* Seleção do menu: véu creme translúcido em degradê, sem bloco branco chapado. Roxo sobre o véu ≥ 5:1. */
.page-v2 .nav a:hover {
  color: #3F2366;
  background: linear-gradient(180deg, rgba(251, 240, 223, .34), rgba(251, 240, 223, .12));
}
.page-v2 .nav a.is-active {
  color: #5C388C;
  background: linear-gradient(180deg, rgba(251, 240, 223, .62) 0%, rgba(251, 240, 223, .3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(251, 240, 223, .4), 0 4px 12px rgba(14, 70, 36, .1);
}
.page-v2 .btn-sair { color: #0C5C32; background: #FBF0DF; border-color: transparent; }
.page-v2 .bottom-nav {
  background: rgba(251, 240, 223, .96);
  border-color: var(--card-line);
  box-shadow: 0 12px 32px rgba(14, 70, 36, .22);
}
.page-v2 .bottom-nav a { color: #072E1C; }
.page-v2 .bottom-nav a.is-active { color: #fff; background: #5C388C; }
.page-v2 .footer { color: #072E1C; border-top-color: rgba(7, 46, 28, .2); }
/* ---------- botões e cards ---------- */
.page-v2 .btn--gold {
  background: #5C388C;
  color: #fff;
  box-shadow: 0 12px 28px rgba(92, 56, 140, .28);
}
.page-v2 .btn--gold:hover { box-shadow: 0 16px 36px rgba(92, 56, 140, .36); }
.page-v2 .btn--ghost { background: #FBF0DF; color: #072E1C; border-color: var(--card-line); }
.page-v2 .btn--ghost:hover { background: #fff6e8; }
.page-v2 .card,
.page-v2 .rank-row,
.page-v2 .hero__badge {
  background: #FBF0DF;
  color: #123528;
  border: 1px solid var(--card-line);
  box-shadow: var(--card-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.page-v2 .rank-row:hover { background: #fff6e8; border-color: rgba(92, 56, 140, .3); }
.page-v2 .card .muted,
.page-v2 .card .small.muted,
.page-v2 .rank-row__name small,
.page-v2 .podium__team,
.page-v2 .gate-fam__meta,
.page-v2 .hl__l { color: #2F4A3C; }
.page-v2 .card--glow::before {
  background: linear-gradient(140deg, rgba(92, 56, 140, .35), transparent 40%, transparent 60%, rgba(16, 118, 72, .3));
}
.page-v2 .section--cream { background: #FBF0DF; }
.page-v2 .section--cream .card,
.page-v2 .section--cream .stair,
.page-v2 .section--cream .fam-card,
.page-v2 .section--cream .sim__panel { background: #FFFBF4; border-color: rgba(7, 46, 28, .07); box-shadow: 0 10px 28px rgba(60, 40, 10, .07); }
.page-v2 .stair--4 { background: linear-gradient(180deg, #fff3d0, #FFFBF4); }
.page-v2 .fam-card__level { background: #F7EBD7; }
/* Barras: brilho e reflexo visíveis no claro, como o efeito do tema preto. */
.page-v2 .bar { background: rgba(7, 46, 28, .1); box-shadow: inset 0 1px 2px rgba(7, 46, 28, .16); }
.page-v2 .bar > i { box-shadow: 0 1px 4px rgba(7, 46, 28, .22); }
.page-v2 .bar > i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .1));
  pointer-events: none;
}
.page-v2 .bar > i::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  animation-duration: 2.4s;
}
.page-v2 .chip { background: #FBF0DF; color: #072E1C; border-color: var(--card-line); }
.page-v2 .chip.is-active { color: #fff; background: #5C388C; border-color: #5C388C; box-shadow: 0 6px 18px rgba(92, 56, 140, .3); }
.page-v2 .chip.is-locked { opacity: .8; }
.page-v2 .hero__badge .big { color: #5C388C; }
.page-v2 .hl__icon { background: #F3E6CF; }
.page-v2 .hl__v b { color: #5C388C; }
.page-v2 .tag { background: #F3E6CF; color: #2F4A3C; }
.page-v2 .kpi,
.page-v2 .fam-det { background: #FBF0DF; border-color: var(--card-line); }
.page-v2 .fam-det { border-left-color: var(--fc); }
.page-v2 .fam-det__next { background: #F3E6CF; }
.page-v2 .fam-det__next--lucro { background: linear-gradient(90deg, #FFF3CC, #FFE9A8); border: 1px solid rgba(201, 150, 20, .45); color: #4A3000; }
.page-v2 .fam-det__next--lucro b,
.page-v2 .fam-det__next--lucro span { color: #6B4A00; }
.page-v2 input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #9A9A9A 0 45%, #4DA3FF 45% 50%, #3FB36A 50% 60%, #E5B417 60% 100%); }
.page-v2 input[type="range"]::-moz-range-track { background: linear-gradient(90deg, #9A9A9A 0 45%, #4DA3FF 45% 50%, #3FB36A 50% 60%, #E5B417 60% 100%); }
.page-v2 .drawer__close { background: #F3E6CF; }
.page-v2 .tl { background: #FBF0DF; }

/* Trimestre igual ao index: fundo preto, raios dourados, número em dourado. */
.page-v2 .tri { background: #0E0C0A; color: #F7F0E6; }
.page-v2 .tri__rays {
  opacity: .55;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(242, 194, 27, .3), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(242, 194, 27, .07) 0deg 3deg, transparent 3deg 12deg);
}
.page-v2 .tri .hero__vignette {
  background: radial-gradient(ellipse at 50% 42%, transparent 36%, rgba(0, 0, 0, .5) 100%);
}
.page-v2 .tri::after { opacity: .14; mix-blend-mode: overlay; }
.page-v2 .tri .eyebrow,
.page-v2 .tri__total .l,
.page-v2 .tri__math .op { color: #F2C21B; }
.page-v2 .tri .tri__q { color: #F7F0E6; }
.page-v2 .tri__note,
.page-v2 .tri .muted,
.page-v2 .tri__total .s { color: #B5A897; }
.page-v2 .tri .grad-gold,
.page-v2 .tri .tri__bonus,
.page-v2 .tri .tri__total .v {
  background: linear-gradient(100deg, #8a6400 0%, #FFE08A 32%, #fff6d0 48%, #F2C21B 64%, #E0932C 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6.5s linear infinite;
}
.page-v2 .tri__total {
  background: rgba(242, 194, 27, .07);
  border-color: rgba(242, 194, 27, .4);
}
.page-v2 .tri__math .box {
  background: rgba(255, 255, 255, .045);
  color: #F7F0E6;
  border: 1px solid rgba(255, 255, 255, .09);
}
.page-v2 .tri__math .box small { color: #B5A897; }

/* ---------- ranking e detalhe ---------- */
/* Medalhas: ouro (1º, com coroa e brilho na borda), prata (2º) e bronze (3º).
   Fora do pódio, avatar e posição em verde-escuro neutro; o % segue a cor do nível. */
.page-v2 {
  --med-ouro: linear-gradient(135deg, #FFF1B8 0%, #F2C21B 45%, #C9940F 100%);
  --med-prata: linear-gradient(135deg, #FFFFFF 0%, #D3D8DE 45%, #8E98A4 100%);
  --med-bronze: linear-gradient(135deg, #F8D9B8 0%, #CD8B4E 48%, #8E5222 100%);
}
.page-v2 .avatar {
  background: linear-gradient(135deg, #1E8A55, #0B4F2C);
  color: #fff;
  box-shadow: 0 6px 16px rgba(7, 46, 28, .25);
}
.page-v2 .avatar--p1 { background: var(--med-ouro) !important; color: #3D2A00 !important; box-shadow: 0 0 0 3px rgba(255, 241, 184, .9), 0 8px 22px rgba(184, 134, 11, .45) !important; }
.page-v2 .avatar--p2 { background: var(--med-prata) !important; color: #2B323A !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 8px 20px rgba(80, 90, 104, .3) !important; }
.page-v2 .avatar--p3 { background: var(--med-bronze) !important; color: #2E1604 !important; box-shadow: 0 0 0 3px rgba(248, 217, 184, .9), 0 8px 20px rgba(142, 82, 34, .32) !important; }

.page-v2 .podium__item--1 {
  background: linear-gradient(180deg, #FFF0BF 0%, #FFF8E4 45%, #FBF0DF 100%);
  border: 2px solid #D9A514;
  box-shadow: 0 0 0 4px rgba(242, 194, 27, .18), 0 24px 52px rgba(184, 134, 11, .3);
}
.page-v2 .podium__item--1::after {
  display: block;
  background: linear-gradient(110deg, transparent 20%, #FFF6D0 45%, #F2C21B 55%, transparent 80%);
  background-size: 220% 100%;
}
.page-v2 .podium__item--2 {
  background: linear-gradient(180deg, #ECEFF2 0%, #F7F5F0 50%, #FBF0DF 100%);
  border: 2px solid #AEB6C0;
  box-shadow: 0 0 0 3px rgba(174, 182, 192, .2), 0 18px 40px rgba(80, 90, 104, .18);
}
.page-v2 .podium__item--3 {
  background: linear-gradient(180deg, #F7E1CC 0%, #FAEBDC 50%, #FBF0DF 100%);
  border: 2px solid #C98A52;
  box-shadow: 0 0 0 3px rgba(201, 138, 82, .18), 0 18px 40px rgba(142, 82, 34, .18);
}
.page-v2 .podium__pos { border: 2px solid rgba(255, 255, 255, .85); font-weight: 900; }
.page-v2 .podium__item--1 .podium__pos { background: var(--med-ouro); color: #3D2A00; box-shadow: 0 6px 18px rgba(184, 134, 11, .5); }
.page-v2 .podium__item--2 .podium__pos { background: var(--med-prata); color: #2B323A; box-shadow: 0 6px 16px rgba(80, 90, 104, .35); }
.page-v2 .podium__item--3 .podium__pos { background: var(--med-bronze); color: #2E1604; box-shadow: 0 6px 16px rgba(142, 82, 34, .38); }
.page-v2 .podium__crown { filter: drop-shadow(0 6px 14px rgba(201, 148, 15, .65)); }
.page-v2 .podium__item--1 .podium__name { color: #3D2A00; }

.page-v2 .rank-row__pos { color: #2F4A3C; }
.page-v2 .rank-row.is-top .rank-row__pos { color: #123528; }
.page-v2 .rank-row.rank-row--p1 .rank-row__pos { color: #8A6400; }
.page-v2 .rank-row.rank-row--p2 .rank-row__pos { color: #5E6773; }
.page-v2 .rank-row.rank-row--p3 .rank-row__pos { color: #8A4F1E; }
.page-v2 .rank-row--p1 { background: linear-gradient(90deg, #FFF0BF, #FBF0DF 60%); border-color: rgba(217, 165, 20, .6); box-shadow: inset 4px 0 0 #D9A514, 0 10px 26px rgba(184, 134, 11, .2); }
.page-v2 .rank-row--p2 { background: linear-gradient(90deg, #ECEFF2, #FBF0DF 60%); border-color: rgba(174, 182, 192, .7); box-shadow: inset 4px 0 0 #AEB6C0, var(--card-shadow); }
.page-v2 .rank-row--p3 { background: linear-gradient(90deg, #F7E1CC, #FBF0DF 60%); border-color: rgba(201, 138, 82, .6); box-shadow: inset 4px 0 0 #C98A52, var(--card-shadow); }
.page-v2 .drawer { background: #FFFBF4; color: #123528; }
.page-v2 .search input,
.page-v2 input,
.page-v2 select { color: #123528; }

.page-v2 .live { background: #072E1C; box-shadow: none; }
.page-v2 [style*="color:#F0862B"] { color: #8C3400 !important; }
.page-v2 [style*="color:#3FB36A"] { color: #0C5C32 !important; }
.page-v2 [style*="color:#F2C21B"] { color: #7A5600 !important; }
.page-v2 [style*="color:var(--niv-aprendiz)"] { color: var(--lv-aprendiz) !important; }
.page-v2 [style*="color:var(--niv-praticante)"] { color: var(--lv-praticante) !important; }
.page-v2 [style*="color:var(--niv-profissional)"] { color: var(--lv-profissional) !important; }
.page-v2 [style*="color:var(--gold)"] { color: var(--lv-mestre) !important; }
.page-v2 [style*="background:var(--gold)"] { background: var(--lv-mestre-bg) !important; }
.page-v2 [style*="#ff8a8e"] { color: #8E1D24 !important; }

/* Painéis escuros: dourado passa no verde-quase-preto (7.9:1). No limão, não. */
.page-v2 .banner-800,
.page-v2 .sim__result,
.page-v2 .section--cream .sim__result { background: #2B2B2B; color: #fff; border-color: transparent; }
.page-v2 .banner-800 .v,
.page-v2 .sim__total { color: #F2C21B; -webkit-text-fill-color: #F2C21B; }
.page-v2 .banner-800 .small,
.page-v2 .sim__cap,
.page-v2 .sim__result .small { color: #FFF6D0; opacity: 1; }

.page-v2 .rank-sep { color: #072E1C; }
.page-v2 .rank-sep::before,
.page-v2 .rank-sep::after { background: linear-gradient(90deg, transparent, rgba(7, 46, 28, .4), transparent); }

.page-v2 .gate__status.ok { color: #0C5C32; background: rgba(12, 92, 50, .1); border-color: rgba(12, 92, 50, .28); }
.page-v2 .gate__status.warn { color: #8E1D24; background: rgba(142, 29, 36, .08); border-color: rgba(142, 29, 36, .28); }

/* Selos de nível (iniciais E/G/D e pílulas): preenchidos e inconfundíveis.
   Aprendiz fica apagado de propósito; os demais em cor sólida com texto branco (≥ 4,5:1). */
.page-v2 .tag[data-niv],
.page-v2 .pill-niv[data-niv] { border: 1px solid transparent; font-weight: 900; }
.page-v2 .tag[data-niv="aprendiz"],
.page-v2 .pill-niv[data-niv="aprendiz"] {
  color: #666666;
  background: #EEE7DA;
  border-color: rgba(0, 0, 0, .1);
  box-shadow: none;
}
.page-v2 .pill-niv[data-niv="aprendiz"]::before { background: #A8A8A8; }
.page-v2 .tag[data-niv="praticante"],
.page-v2 .pill-niv[data-niv="praticante"] {
  color: #fff;
  background: linear-gradient(135deg, #2E78C8, #134F96);
  border-color: rgba(11, 79, 138, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(19, 79, 150, .32);
}
.page-v2 .tag[data-niv="profissional"],
.page-v2 .pill-niv[data-niv="profissional"] {
  color: #fff;
  background: linear-gradient(135deg, #188A4B, #0A5E30);
  border-color: rgba(10, 94, 48, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(10, 94, 48, .3);
}
.page-v2 .pill-niv[data-niv="praticante"]::before,
.page-v2 .pill-niv[data-niv="profissional"]::before { background: rgba(255, 255, 255, .9); }
.page-v2 .tag[data-niv="mestre"],
.page-v2 .pill-niv[data-niv="mestre"] {
  color: var(--lv-mestre-ink);
  background: var(--lv-mestre-bg);
  border: 1px solid rgba(150, 105, 0, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 10px rgba(184, 134, 11, .38);
}
.page-v2 .pill-niv[data-niv="mestre"]::before { background: #7A5600; }
.page-v2 .tag[data-niv="none"],
.page-v2 .pill-niv[data-niv="none"] { color: #2F4A3C; background: transparent; border: 1px dashed rgba(7, 46, 28, .35); box-shadow: none; }

.page-v2 .delta.up { color: #0C5C32; background: rgba(12, 92, 50, .12); }
.page-v2 .delta.down { color: #8E1D24; background: rgba(142, 29, 36, .1); }
.page-v2 .delta.same { color: #2F4A3C; background: rgba(18, 53, 40, .08); }
.page-v2 .delta.new { color: #5C388C; background: rgba(92, 56, 140, .12); }

.page-v2 .stair--1 { --c: #9A9A9A; }
.page-v2 .stair--4 { --c: var(--lv-mestre-bg); }
/* Cada degrau com o leve degradê da sua cor, no mesmo padrão do card Mestre. */
.page-v2 .section--cream .stair--1 {
  background: linear-gradient(180deg, #ECE8E1, #FFFBF4 72%);
  border-color: rgba(120, 120, 120, .3);
  box-shadow: 0 0 0 1px rgba(154, 154, 154, .15), 0 12px 30px rgba(60, 60, 60, .08);
}
.page-v2 .section--cream .stair--2 {
  background: linear-gradient(180deg, #DDEBFB, #FFFBF4 72%);
  border-color: rgba(46, 120, 200, .38);
  box-shadow: 0 0 0 1px rgba(77, 163, 255, .16), 0 14px 34px rgba(19, 79, 150, .12);
}
.page-v2 .section--cream .stair--3 {
  background: linear-gradient(180deg, #DCF1E3, #FFFBF4 72%);
  border-color: rgba(24, 138, 75, .38);
  box-shadow: 0 0 0 1px rgba(63, 179, 106, .16), 0 16px 38px rgba(10, 94, 48, .12);
}
.page-v2 .section--cream .stair--4 {
  background: linear-gradient(180deg, #FFEDB8, #FFFBF4 72%);
  border-color: rgba(201, 150, 20, .6);
  box-shadow: 0 0 0 1px rgba(242, 194, 27, .28), 0 18px 44px rgba(184, 134, 11, .24);
}
.page-v2 .stair--1 .stair__n { color: var(--lv-aprendiz); }
.page-v2 .stair--2 .stair__n { color: var(--lv-praticante); }
.page-v2 .stair--3 .stair__n { color: var(--lv-profissional); }
.page-v2 .stair--4 .stair__n { color: var(--lv-mestre); }
.page-v2 .stair--4 .stair__title { color: #4A3000; }
.page-v2 .fam-card__level { color: #123528; }
.page-v2 .fam-card__level [style*="opacity"] { opacity: 1 !important; }
.page-v2 .fam-card__level > span { font-weight: 700; }
.page-v2 .fam-card__level--aprendiz { color: var(--lv-aprendiz); }
.page-v2 .fam-card__level--praticante { box-shadow: inset 3px 0 0 #4DA3FF; }
.page-v2 .fam-card__level--praticante > span { color: var(--lv-praticante); }
.page-v2 .fam-card__level--profissional { box-shadow: inset 3px 0 0 #3FB36A; }
.page-v2 .fam-card__level--profissional > span { color: var(--lv-profissional); }
.page-v2 .fam-card__level--aprendiz { box-shadow: inset 3px 0 0 #9A9A9A; }
.page-v2 .fam-card__level--mestre {
  background: linear-gradient(90deg, #FFF0C2, #FFE39A);
  box-shadow: inset 3px 0 0 #D9A514, 0 0 0 1px rgba(201, 150, 20, .35);
}
.page-v2 .fam-card__level--mestre,
.page-v2 .fam-card__level--mestre b { color: #4A3000; }
.page-v2 .fam-card[style*="#F0862B"] .fam-card__name small { color: #8C3400; }
.page-v2 .fam-card[style*="#3FB36A"] .fam-card__name small { color: #0C5C32; }
.page-v2 .fam-card[style*="#F2C21B"] .fam-card__name small { color: #7A5600; }

.page-v2 .trade__icon { color: #5C388C; background: rgba(92, 56, 140, .12); }
.page-v2 .tl__n { background: #5C388C; color: #fff; border-color: #5C388C; }
.page-v2 .tl__bonus { color: #fff; }
.page-v2 .tl__to span { color: #5C388C; }

/* ---------- hero: pacotes da campanha no lugar do leão ---------- */
.page-v2 .hero-packs {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1 / 1;
}
.page-v2 .hero-packs::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%; bottom: 4%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(7, 46, 28, .38), transparent 70%);
  filter: blur(6px);
  z-index: 0;
}
.page-v2 .hero-packs__item {
  position: absolute;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 18px 22px rgba(7, 46, 28, .32));
  animation: packFloat 7s ease-in-out infinite;
  --r: 0deg;
}
.page-v2 .hero-packs__item--1 { width: 50%; left: 2%;  top: 6%;  --r: -9deg; animation-delay: -1.2s; z-index: 1; }
.page-v2 .hero-packs__item--2 { width: 50%; right: 0;  top: 2%;  --r: 8deg;  animation-delay: -3.4s; z-index: 2; }
.page-v2 .hero-packs__item--3 { width: 52%; left: 6%;  bottom: 6%; --r: -4deg; animation-delay: -2.1s; z-index: 3; }
.page-v2 .hero-packs__item--4 { width: 56%; right: 2%; bottom: 4%; --r: 6deg;  animation-delay: -4.6s; z-index: 4; }
@keyframes packFloat {
  0%, 100% { transform: translateY(0) rotate(var(--r)); }
  50% { transform: translateY(-10px) rotate(calc(var(--r) + 1.5deg)); }
}
@media (max-width: 900px) {
  .page-v2 .hero-packs { width: min(270px, 72vw); }
}

/* ---------- tipografia maior (só index2) ---------- */
.page-v2 { font-size: 17px; }
.page-v2 .eyebrow { font-size: 12.5px; }
.page-v2 .h-display { font-size: clamp(76px, 13vw, 146px); }
.page-v2 .h-1 { font-size: clamp(46px, 6.6vw, 80px); }
.page-v2 .h-2 { font-size: clamp(36px, 4.7vw, 58px); }
.page-v2 .h-3 { font-size: clamp(20px, 2.4vw, 26px); }
.page-v2 .lead { font-size: clamp(17px, 1.8vw, 22px); }
.page-v2 .small { font-size: 14px; }
.page-v2 .btn { font-size: 15px; padding: 15px 26px; }
.page-v2 .btn--sm { font-size: 14px; padding: 11px 18px; }
.page-v2 .chip { font-size: 13.5px; padding: 10px 16px; min-height: 40px; }
.page-v2 .nav a { font-size: 14px; padding: 10px 12px; white-space: nowrap; }
.page-v2 .brand > span,
.page-v2 .brand__sub,
.page-v2 .header__status { white-space: nowrap; }
.page-v2 .brand__sub { font-size: 11px; }
.page-v2 .header__status { font-size: 13px; }
/* Espaço do header reservado desde o primeiro quadro: a troca de fonte, o "Carregando…" virando data
   e o botão Sair (inserido pelo auth.js) não empurram mais o menu. */
.page-v2 .brand img { flex: none; }
.page-v2 .brand > img:first-child { width: 52px; height: 40px; object-fit: contain; }
.page-v2 .brand img.brand__vibra { width: 30px; height: 30px; }
@media (min-width: 901px) {
  .page-v2 .header .container { justify-content: flex-start; }
  .page-v2 .header__status { margin-left: auto; }
}
@media (min-width: 1241px) {
  .page-v2 .brand { width: 268px; flex: none; }
  .page-v2 .header__status { min-width: 262px; flex: none; justify-content: flex-end; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .page-v2 .brand { width: 210px; flex: none; }
  .page-v2 .header__status { min-width: 240px; flex: none; justify-content: flex-end; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .page-v2 .header__status { min-width: 72px; }
  .page-v2 .header__status .txt { display: none; }
}
@media (max-width: 900px) {
  .page-v2 .brand > img:first-child { width: 42px; height: 32px; }
  .page-v2 .brand img.brand__vibra { width: 24px; height: 24px; }
  .page-v2 .header__status { min-height: 30px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .page-v2 .nav a { font-size: 13px; padding: 9px 9px; }
  .page-v2 .header__status { font-size: 12px; }
  .page-v2 .brand__sub,
  .page-v2 .brand br { display: none; }
}
.page-v2 .btn-sair { font-size: 11px; padding: 5px 10px; }
.page-v2 .bottom-nav a { font-size: 11.5px; }
.page-v2 .hero__sub { font-size: clamp(18px, 2.2vw, 24px); }
.page-v2 .stat__v { font-size: clamp(28px, 3vw, 36px); }
.page-v2 .stat__l { font-size: 11.5px; max-width: 170px; }
.page-v2 .hero__badge { font-size: 14px; padding: 13px 18px; }
.page-v2 .hero__badge .big { font-size: 23px; }
.page-v2 .desafio__fam,
.page-v2 .gate-fam__name { font-size: 14px; }
.page-v2 .gate-fam__meta { font-size: 14.5px; }
.page-v2 .gauge__val { font-size: 54px; }
.page-v2 .gate__status { font-size: 13px; }
.page-v2 .bar-row { font-size: 13.5px; }

.page-v2 .rank-controls__label { font-size: 12px; }
.page-v2 .hl__l { font-size: 11.5px; }
.page-v2 .hl__v { font-size: 15.5px; }
.page-v2 .podium__name { font-size: 17px; }
.page-v2 .podium__team { font-size: 12.5px; }
.page-v2 .podium__pct { font-size: clamp(36px, 4vw, 50px); }
.page-v2 .rank-row__pos { font-size: 20px; }
.page-v2 .rank-row__name { font-size: 16px; }
.page-v2 .rank-row__name small { font-size: 12.5px; }
.page-v2 .rank-row__pct { font-size: 23px; }
.page-v2 .tag { width: 26px; height: 26px; font-size: 11.5px; border-radius: 8px; }
.page-v2 .pill-niv { font-size: 12px; }
.page-v2 .delta { font-size: 12px; }
.page-v2 .rank-sep { font-size: 12px; }

.page-v2 .stair__n { font-size: 12px; }
.page-v2 .stair__title { font-size: 28px; }
.page-v2 .stair__range { font-size: 17px; }
.page-v2 .stair__desc { font-size: 14.5px; }
.page-v2 .fam-card__name { font-size: 30px; }
.page-v2 .fam-card__name small { font-size: 12px; }
.page-v2 .fam-card__level { font-size: 14.5px; }
.page-v2 .fam-card__level b { font-size: 18px; }

.page-v2 .sim__row-head .fam { font-size: 16.5px; }
.page-v2 .sim__row-head .val { font-size: 25px; }
.page-v2 .sim__row-foot { font-size: 14px; }
.page-v2 .sim__row-foot b { font-size: 16px; }
.page-v2 .sim__line { font-size: 14px; }
.page-v2 .sim__line b { font-size: 17px; }
.page-v2 .sim__toggle { font-size: 14px; }
.page-v2 .sim__cap { font-size: 13px; }

.page-v2 .tl__from { font-size: 12.5px; }
.page-v2 .tl__to { font-size: 25px; }
.page-v2 .tl__bonus { font-size: 11px; }
.page-v2 .trade h3 { font-size: 20px; }
.page-v2 .trade p { font-size: 15.5px; color: #2F4A3C; }
.page-v2 .footer { font-size: 13.5px; }

.page-v2 .drawer__name { font-size: 25px; }
.page-v2 .drawer__sub { font-size: 13.5px; }
.page-v2 .kpi__v { font-size: 25px; }
.page-v2 .kpi__l { font-size: 11.5px; }
.page-v2 .fam-det__name { font-size: 16.5px; }
.page-v2 .fam-det__pct { font-size: 29px; }
.page-v2 .fam-det__meta,
.page-v2 .fam-det__next { font-size: 13.5px; }
.page-v2 .drawer__section-title { font-size: 12px; }

/* ---------- celular (uso principal) ---------- */
.page-v2 .rank-controls { grid-template-columns: minmax(0, 1fr); }
.page-v2 .rank-controls__row { min-width: 0; }
.page-v2 .rank-controls__row > .chips { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .page-v2 .header__here { font-size: 11px; }
  .page-v2 .header__status { font-size: 12px; }
  .page-v2 .brand__name { font-size: 21px; }
  .page-v2 .hero__badge { padding: 12px 16px; }
  .page-v2 .hero__badge .big { font-size: 21px; }
  .page-v2 .hero__cta .btn { min-height: 50px; }
  .page-v2 .section { padding: 64px 0; }
  .page-v2 .section--tight { padding: 44px 0; }
}
@media (max-width: 720px) {
  .page-v2 .rank-row { grid-template-columns: 34px 40px 1fr auto; gap: 12px; padding: 13px 14px; }
  .page-v2 .rank-row__pos { font-size: 17px; }
  .page-v2 .rank-row__pct { font-size: 21px; }
  .page-v2 .rank-row__name { font-size: 15.5px; }
  .page-v2 .podium__item { padding: 28px 14px 20px; }
  .page-v2 .podium__name { font-size: 15.5px; }
  .page-v2 .podium__pct { font-size: 34px; }
  .page-v2 .podium__item--1 .podium__pct { font-size: 44px; }
  .page-v2 .stat__l { font-size: 11px; }
}
@media (max-width: 760px) {
  .page-v2 .stair { padding: 20px 14px 18px; }
  .page-v2 .stair__body { max-width: 72%; }
  .page-v2 .stair__n { font-size: 11px; letter-spacing: .14em; }
  .page-v2 .stair__title { font-size: 22px; }
  .page-v2 .stair__range { font-size: 14.5px; }
  .page-v2 .stair__desc { font-size: 13px; }
  .page-v2 .stair__fig { max-width: 40%; opacity: .95; }
}

/* ---------- rolagem estável no celular ----------
   Desfoque e sombra animados são redesenhados a cada quadro e travam a rolagem (os menus "pulam").
   As camadas fixas ficam em camada própria e sem backdrop-filter; o elástico da rolagem não arrasta os menus. */
.page-v2 .hero__rays,
.page-v2 .hero .hero__vignette,
.page-v2 .hero::after { display: none; }
.page-v2 .hero__title::before { filter: none; will-change: transform; }
.page-v2 .hero-packs__item { will-change: transform; }
@media (max-width: 900px) {
  html:has(body.page-v2),
  .page-v2 { overscroll-behavior-y: none; }
  .page-v2 .header {
    background: #8ABE41;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateZ(0);
  }
  .page-v2 .bottom-nav {
    background: #FBF0DF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: translateZ(0);
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .page-v2 .header__here { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-v2 .hero__title .line.grad-gold { filter: none; }
  .page-v2 .hero__title::before { animation-duration: 240s; }
}

/* Nada pode passar da largura da tela: se a página fica mais larga, o dedo arrasta tudo para o lado
   e os menus parecem "andar". clip não cria área de rolagem, então o header sticky continua funcionando. */
html:has(body.page-v2),
.page-v2 { overflow-x: clip; }
@media (max-width: 900px) {
  .page-v2 .btn { white-space: normal; text-align: center; max-width: 100%; line-height: 1.25; }
  .page-v2 .header__status { min-width: 0; gap: 6px; }
  .page-v2 .header__status .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-v2 .btn-sair { flex: none; }
}
@media (max-width: 380px) {
  .page-v2 .header__status { font-size: 11px; }
  .page-v2 .header__here { font-size: 10px; letter-spacing: .1em; }
  .page-v2 .podium { grid-template-columns: 1fr; }
  .page-v2 .podium__item--1 { grid-column: auto; }
  .page-v2 .brand { gap: 8px; min-width: 0; }
  .page-v2 .brand__name { font-size: 18px; }
}

/* Escada no celular: um degrau por linha, cada um maior que o anterior. */
@media (max-width: 760px) {
  .page-v2 .stairs { grid-template-columns: 1fr; gap: 12px; justify-items: start; align-items: start; }
  .page-v2 .stair { width: 100%; padding: 18px 16px 16px; }
  .page-v2 .stair--1 { width: 74%; min-height: 116px !important; }
  .page-v2 .stair--2 { width: 83%; min-height: 128px !important; }
  .page-v2 .stair--3 { width: 92%; min-height: 140px !important; }
  .page-v2 .stair--4 { width: 100%; min-height: 156px !important; }
  .page-v2 .stair__body { max-width: 64%; }
  .page-v2 .stair__fig { height: 96%; max-width: 34%; right: 8px; }
  .page-v2 .stair--4 .stair__fig { height: 100%; }
  .page-v2 .stair__title { font-size: 24px; }
  .page-v2 .stair__range { font-size: 15px; margin-top: 6px; }
  .page-v2 .stair__desc { font-size: 13px; }
  .page-v2 .stair__icon { top: 14px; right: 14px; }
}

/* ---------- detalhe do vendedor/regional: tudo cabe na largura do celular ---------- */
.page-v2 .drawer { overflow-x: hidden; }
.page-v2 .drawer__inner,
.page-v2 .drawer__inner > *,
.page-v2 .drawer__head > div,
.page-v2 .fam-det__head > *,
.page-v2 .fam-det__name { min-width: 0; }
.page-v2 .drawer__name,
.page-v2 .drawer__sub,
.page-v2 .fam-det__next { overflow-wrap: anywhere; }
.page-v2 .drawer__head .avatar { flex: none; }
.page-v2 .drawer__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-v2 .kpi { min-width: 0; padding: 14px 8px; }
.page-v2 .kpi__v { white-space: nowrap; }
.page-v2 .drawer .rank-row { grid-template-columns: 30px 36px minmax(0, 1fr) auto; gap: 10px; padding: 11px 12px; }
.page-v2 .drawer .rank-row__pct { font-size: 18px; }
.page-v2 .drawer .rank-row__name { font-size: 14.5px; }
@media (max-width: 640px) {
  .page-v2 .drawer__inner { padding: 22px 16px 36px; gap: 16px; }
  .page-v2 .drawer__head { gap: 12px; padding-right: 40px; }
  .page-v2 .drawer__head .avatar--lg { width: 56px; height: 56px; font-size: 19px; flex: none; }
  .page-v2 .drawer__name { font-size: 21px; }
  .page-v2 .drawer__sub { font-size: 12.5px; }
  .page-v2 .drawer__kpis { gap: 8px; }
  .page-v2 .kpi__v { font-size: clamp(17px, 5.2vw, 22px); }
  .page-v2 .kpi__l { font-size: 10.5px; letter-spacing: .08em; }
  .page-v2 .fam-det { padding: 14px 12px 12px; }
  .page-v2 .fam-det__name { font-size: 15px; gap: 6px; }
  .page-v2 .fam-det__name img { width: 30px; height: 30px; }
  .page-v2 .fam-det__pct { font-size: 25px; }
  .page-v2 .fam-det__meta,
  .page-v2 .fam-det__next { font-size: 12.5px; }
  .page-v2 .drawer__section-title { font-size: 11px; letter-spacing: .14em; }
}

/* ---------- ranking completo ---------- */
.page-v2 .tabs { background: #FBF0DF; border-color: var(--card-line); }
.page-v2 .tab { color: #2F4A3C; }
.page-v2 .tab.is-active { background: #5C388C; color: #fff; }
.page-v2 .tab.is-active .muted { color: rgba(255, 255, 255, .8); }
.page-v2 .search input { background: #FBF0DF; border-color: var(--card-line); font-size: 15px; }
.page-v2 .search input::placeholder { color: #4d6e5e; }
.page-v2 .search input:focus { border-color: #5C388C; }
.page-v2 .search svg { color: #2F4A3C; }
.page-v2 .legend { color: #072E1C; font-size: 12.5px; }
.page-v2 .toolbar > .chips { min-width: 0; }
.page-v2 .page-head .rank-controls__row { min-width: 0; }

/* ---------- sinaleira do Mercado Interno ----------
   Faixas fixas no trilho (vermelha até 90%, dourada 90–100%, verde 100%+), marco escuro no gatilho
   e o cursor que sobe pelo arco junto com o número. */
.page-v2 .gate__gauge { padding: 30px 22px 26px; }
.page-v2 .gate__titulo { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #072E1C; }
.page-v2 .gauge { width: min(330px, 100%); height: auto; aspect-ratio: 260 / 172; margin-top: 16px; }
.page-v2 .gauge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.page-v2 .gauge__zona { fill: none; stroke-width: 20; stroke-linecap: round; }
.page-v2 .gauge__zona--abaixo { stroke: rgba(179, 38, 46, .13); }
.page-v2 .gauge__zona--meta { stroke: rgba(12, 122, 62, .17); }
.page-v2 .gauge__zona--gatilho { stroke: rgba(242, 194, 27, .5); stroke-linecap: butt; }
.page-v2 .gauge__valor {
  fill: none;
  stroke: url(#gg);
  stroke-width: 20;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.8s cubic-bezier(.33, 1, .68, 1);
}
.page-v2 .gauge__guia { stroke: rgba(7, 46, 28, .5); stroke-width: 1.6; stroke-dasharray: 3 4; }
.page-v2 .gauge__marco { stroke: #072E1C; stroke-width: 3.4; stroke-linecap: round; }
.page-v2 .gauge__marco--meta { stroke: rgba(7, 46, 28, .45); stroke-width: 2; }
.page-v2 .gauge__selo rect { fill: #072E1C; stroke: #F2C21B; stroke-width: 1.5; }
.page-v2 .gauge__selo text { fill: #FFF6D0; font: 800 12px Montserrat, system-ui, sans-serif; text-anchor: middle; }
.page-v2 .gauge__escala { fill: #2F4A3C; font: 700 10.5px Montserrat, system-ui, sans-serif; text-anchor: middle; }
.page-v2 .gauge__cursor {
  transform-box: view-box;
  transform-origin: 130px 134px;
  transform: rotate(0deg);
  transition: transform 1.8s cubic-bezier(.33, 1, .68, 1);
}
.page-v2 .is-on .gauge__cursor { transform: rotate(var(--rot)); }
.page-v2 .gauge__ponta { fill: #FFFBF4; stroke: #072E1C; stroke-width: 3; }
.page-v2 .gauge__miolo { fill: var(--gauge-cor); }
.page-v2 .gauge__pulso { fill: none; stroke: var(--gauge-cor); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.page-v2 .is-done .gauge__pulso { animation: gaugePulso 2.6s ease-out infinite; }
@keyframes gaugePulso {
  0% { opacity: .6; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.2); }
}
.page-v2 .gauge--abaixo { --gauge-cor: #B3262E; }
.page-v2 .gauge--gatilho { --gauge-cor: #C99A0E; }
.page-v2 .gauge--meta { --gauge-cor: #0C7A3E; }
.page-v2 .gauge__val { left: 0; right: 0; bottom: 22%; font-size: 56px; line-height: 1; }
.page-v2 .gauge--abaixo .gauge__val { color: #8E1D24; }
.page-v2 .gauge--gatilho .gauge__val { color: #6B4A00; }
.page-v2 .gauge--meta .gauge__val { color: #0C5C32; }
.page-v2 .gate__falta { margin-top: 10px; font-size: 14px; font-weight: 600; color: #2F4A3C; }
.page-v2 .gate__falta b { color: #072E1C; font-weight: 900; }
@media (max-width: 900px) {
  .page-v2 .gauge { width: min(310px, 100%); }
  .page-v2 .gauge__val { font-size: 50px; }
}
/* A embalagem fica no canto inferior direito do card: o texto da meta não passa por baixo dela. */
.page-v2 .desafio__meta { max-width: 62%; }
/* Sinaleira dentro de "Nosso Desafio": no desktop o arco fica à esquerda e os textos à direita;
   no celular segue empilhada e centralizada (base do .gate__gauge). */
@media (min-width: 901px) {
  .page-v2 .gate__gauge--desafio {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    grid-template-areas: "g t" "g s" "g f" "g c" "g p";
    grid-template-rows: repeat(5, auto);
    align-content: center;
    justify-items: start;
    column-gap: 48px;
    text-align: left;
    padding: 28px 40px;
  }
  .page-v2 .gate__gauge--desafio .gate__titulo { grid-area: t; font-size: 14px; }
  .page-v2 .gate__gauge--desafio .gauge { grid-area: g; align-self: center; margin-top: 0; text-align: center; }
  .page-v2 .gate__gauge--desafio .gate__status { grid-area: s; margin-top: 14px; }
  .page-v2 .gate__gauge--desafio .gate__falta { grid-area: f; margin-top: 12px; font-size: 16px; }
  .page-v2 .gate__gauge--desafio .gate__cart { grid-area: c; justify-content: flex-start; font-size: 15px; }
  .page-v2 .gate__gauge--desafio > p { grid-area: p; max-width: 52ch; }
}

/* Barras por família na mesma escala da sinaleira (0–130%): o traço marca a meta (100%)
   e a barra que passa dele mostra o quanto a família foi além. */
.page-v2 .gate-fam__trilho { position: relative; margin-bottom: 14px; }
.page-v2 .gate-fam__marco {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: rgba(7, 46, 28, .55);
  box-shadow: 0 0 0 1.5px rgba(251, 240, 223, .85);
  pointer-events: none;
}
.page-v2 .gate-fam__marco b {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2F4A3C;
  white-space: nowrap;
}

/* ---------- miniatura da sinaleira no topo ("Time hoje") ---------- */
.page-v2 .mini-mi { gap: 12px; padding: 10px 18px 10px 12px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.page-v2 .mini-mi:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(14, 70, 36, .2); }
.page-v2 .mini-mi__gauge { position: relative; flex: none; width: 80px; }
.page-v2 .mini-mi__gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-v2 .mini-mi .gauge__zona,
.page-v2 .mini-mi .gauge__valor { stroke-width: 9; }
.page-v2 .mini-mi .gauge__valor { stroke: url(#ggm); }
.page-v2 .mini-mi .gauge__marco { stroke-width: 2.2; }
.page-v2 .mini-mi__val {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.page-v2 .mini-mi.gauge--abaixo .mini-mi__val { color: #8E1D24; }
.page-v2 .mini-mi.gauge--gatilho .mini-mi__val { color: #6B4A00; }
.page-v2 .mini-mi.gauge--meta .mini-mi__val { color: #0C5C32; }
.page-v2 .mini-mi__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.15; }
.page-v2 .mini-mi__t { font-size: 12.5px; font-weight: 800; color: #072E1C; white-space: nowrap; }
.page-v2 .mini-mi__f { font-size: 16px; font-weight: 900; color: #5C388C; letter-spacing: -.01em; }
.page-v2 .mini-mi__s { font-size: 11.5px; font-weight: 700; color: #2F4A3C; white-space: nowrap; }
@media (max-width: 900px) {
  .page-v2 .hero__badges { display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; max-width: 460px; }
  .page-v2 .hero__badge { min-width: 0; }
}
@media (max-width: 430px) {
  .page-v2 .hero__badges { gap: 8px; }
  .page-v2 .hero__badge:not(.mini-mi) { padding: 10px 10px; gap: 8px; font-size: 13px; }
  .page-v2 .hero__badge:not(.mini-mi) .medalha { width: 30px; height: 30px; border-radius: 10px; }
  .page-v2 .hero__badge:not(.mini-mi) .medalha .ico { width: 18px; height: 18px; }
  .page-v2 .hero__badge:not(.mini-mi) .big { font-size: 19px; }
  .page-v2 .mini-mi { padding: 9px 10px 9px 8px; gap: 8px; }
  .page-v2 .mini-mi__gauge { width: 60px; }
  .page-v2 .mini-mi__val { font-size: 16px; bottom: -4px; }
  .page-v2 .mini-mi__t { font-size: 11.5px; }
  .page-v2 .mini-mi__f { font-size: 14px; white-space: nowrap; }
  .page-v2 .mini-mi__s { font-size: 11px; }
}
@media (max-width: 340px) {
  .page-v2 .hero__badges { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- ícones da campanha ---------- */
.page-v2 .ico { display: block; width: 22px; height: 22px; flex: none; }
.page-v2 .ico--xs { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.page-v2 .ico--sm { display: inline-block; width: 18px; height: 18px; margin-right: 4px; vertical-align: -4px; color: var(--lv-profissional); }
.page-v2 .medalha {
  --ico-fundo: #5C388C;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #7B52B8 0%, #5C388C 55%, #3F2366 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 6px 16px rgba(74, 42, 120, .28);
}
.page-v2 .medalha--ouro {
  --ico-fundo: #E0AE17;
  color: #3D2A00;
  background: linear-gradient(145deg, #FFE7A3 0%, #F2C21B 50%, #C9940F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(122, 86, 0, .25), 0 6px 16px rgba(184, 134, 11, .32);
}
.page-v2 .medalha--verde {
  --ico-fundo: #107648;
  background: linear-gradient(145deg, #23A060 0%, #107648 55%, #0A4F2F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 6px 16px rgba(16, 118, 72, .28);
}
.page-v2 .medalha--niveis {
  --c1: #8A8A8A; --c2: #2E78C8; --c3: #188A4B; --c4: #E0AE17;
  --o1: 1; --o2: 1; --o3: 1;
  background: #FFFBF4;
  border: 1px solid rgba(7, 46, 28, .1);
  box-shadow: 0 6px 16px rgba(14, 70, 36, .14);
}
.page-v2 .medalha--niveis .ico { width: 26px; height: 26px; }
.page-v2 .hero__badge { gap: 12px; }
.page-v2 .hero__badge .medalha { width: 40px; height: 40px; border-radius: 13px; }
.page-v2 .hl__icon--packs { position: relative; width: 60px; height: 46px; flex: none; }
.page-v2 .hl__icon--packs img {
  position: absolute;
  bottom: 0;
  width: 28px;
  height: auto;
  filter: drop-shadow(0 4px 6px rgba(7, 46, 28, .3));
}
.page-v2 .hl__icon--packs img:nth-child(1) { left: 0; transform: rotate(-12deg); z-index: 1; }
.page-v2 .hl__icon--packs img:nth-child(2) { left: 16px; bottom: 4px; width: 30px; z-index: 3; }
.page-v2 .hl__icon--packs img:nth-child(3) { left: 32px; transform: rotate(12deg); z-index: 2; }
.page-v2 .trade__icon.medalha { width: 56px; height: 56px; border-radius: 18px; margin-bottom: 18px; }
.page-v2 .trade__icon .ico { width: 28px; height: 28px; }
.page-v2 .locked__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(145deg, #7B52B8, #5C388C 55%, #3F2366);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px rgba(74, 42, 120, .28);
}
.page-v2 .locked__icon .ico { width: 30px; height: 30px; }
.page-v2 .podium__crown { filter: drop-shadow(0 6px 12px rgba(184, 134, 11, .45)); animation: coroaFlutua 3.6s ease-in-out infinite; }
.page-v2 .podium__crown .ico--coroa { width: 48px; height: 40px; margin: 0 auto; }
@keyframes coroaFlutua {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.page-v2 .bottom-nav a svg { width: 22px; height: 22px; }
.page-v2 .stair__fig--sabre {
  height: 84%;
  width: auto;
  aspect-ratio: 40 / 200;
  right: 26px;
  bottom: 8px;
  rotate: -14deg;
  transform-origin: bottom center;
  filter: drop-shadow(0 0 6px rgba(110, 110, 110, .35)) drop-shadow(0 8px 12px rgba(0, 0, 0, .22));
}
@media (max-width: 760px) {
  .page-v2 .stair__fig--sabre { height: 88%; right: 22px; }
}

/* ---------- contraste e cor das famílias ----------
   Número grande (≥ 24px) pode usar o tom vivo da família (≥ 3:1 no creme); texto pequeno segue escuro (≥ 4,5:1). */
.page-v2 :is(.desafio__pct, .gate-fam__pct, .podium__pct, .rank-row__pct, .fam-det__pct, .eu__fam-p)[style*="color:#F0862B"] { color: #C9480C !important; }
.page-v2 :is(.desafio__pct, .gate-fam__pct, .podium__pct, .rank-row__pct, .fam-det__pct, .eu__fam-p)[style*="color:#3FB36A"] { color: #138A47 !important; }
.page-v2 :is(.desafio__pct, .gate-fam__pct, .podium__pct, .rank-row__pct, .fam-det__pct, .eu__fam-p)[style*="color:#F2C21B"] { color: #A87600 !important; }

/* ---------- Carteira (pedidos ainda não faturados) ----------
   Projeção motivacional: sempre em listras na cor da família, logo depois do faturado, com o rótulo
   "com carteira". Textos pequenos em #2F4A3C/#072E1C sobre creme (≥ 7:1). */
.page-v2 .bar--cart { display: flex; }
.page-v2 .bar--cart > i:first-child { border-radius: 999px 0 0 999px; }
.page-v2 .bar > i.bar__cart {
  flex: none;
  border-radius: 0 999px 999px 0;
  box-shadow: none;
  background: repeating-linear-gradient(135deg, var(--cor, #107648) 0 3px, rgba(255, 255, 255, .6) 3px 6px);
  opacity: .85;
}
.page-v2 .bar > i.bar__cart::before,
.page-v2 .bar > i.bar__cart::after { display: none; }
.page-v2 .cart-sw {
  display: inline-block; flex: none; width: 14px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px;
  background: repeating-linear-gradient(135deg, var(--cor, #107648) 0 2px, rgba(255, 255, 255, .65) 2px 4px);
  box-shadow: inset 0 0 0 1px rgba(7, 46, 28, .28);
}
.page-v2 .cart-txt { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: #2F4A3C; white-space: nowrap; }
.page-v2 .cart-txt b { margin-left: 4px; font-weight: 900; color: #072E1C; }
.page-v2 .desafio__cartpct { margin-top: -2px; }
.page-v2 .desafio__cartpct .cart-txt { padding: 4px 10px; border: 1px dashed rgba(7, 46, 28, .32); border-radius: 999px; background: #FFFBF4; font-size: 13.5px; }
.page-v2 .bar-row--cart { margin: 6px 0 0; }
.page-v2 .bar-row--cart span { display: inline-flex; align-items: center; color: #2F4A3C; }
.page-v2 .cart-nota { display: flex; align-items: flex-start; margin: 16px 0 0; max-width: 80ch; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: #072E1C; }
.page-v2 .cart-nota .cart-sw { margin-top: 4px; }
.page-v2 .gauge__cart { fill: none; stroke: #072E1C; stroke-width: 20; stroke-dasharray: 2 3; opacity: 0; transition: opacity .6s ease .2s; }
.page-v2 .is-done .gauge__cart { opacity: .4; }
.page-v2 .gate__cart { display: flex; align-items: center; justify-content: center; margin-top: 10px; font-size: 14px; font-weight: 600; color: #2F4A3C; }
.page-v2 .gate__cart b { font-weight: 900; color: #072E1C; }
.page-v2 .mini-mi__c { font-size: 11px; font-weight: 700; color: #2F4A3C; white-space: nowrap; }
.page-v2 .rank-row__cart { font-size: 11px; letter-spacing: 0; text-transform: none; color: #2F4A3C; white-space: nowrap; }
@media (max-width: 400px) {
  .page-v2 .rank-row__cart { max-width: 64px; white-space: normal; text-align: right; line-height: 1.2; }
  .page-v2 .rank-row__name { overflow-wrap: anywhere; }
}
.page-v2 .podium__cart { margin-top: 6px; }
.page-v2 .podium__cart .cart-txt { font-size: 12px; }
.page-v2 .eu__cart { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #2F4A3C; white-space: nowrap; }
.page-v2 .eu__fam-c { grid-column: 1 / -1; display: flex; align-items: center; font-size: 12.5px; font-weight: 600; color: #2F4A3C; }
.page-v2 .eu__fam-c b { margin: 0 4px; font-weight: 900; color: #072E1C; }
.page-v2 .fam-det__cart { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: #2F4A3C; }
.page-v2 .fam-det__cart b { font-weight: 900; color: #072E1C; }
.page-v2 .kpi__cart { margin-top: 4px; font-size: 11px; font-weight: 700; color: #2F4A3C; }

/* ---------- "Eu": quem entrou (saudação + posição do vendedor ou da regional do gestor) ---------- */
.page-v2 .hero__ola { margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #072E1C; }
.page-v2 .hero__ola b { font-weight: 900; color: #3F2366; }
.page-v2 .eu {
  margin-top: 22px; max-width: 540px; padding: 18px; display: grid; gap: 12px;
  background: #FBF0DF; border: 1px solid var(--card-line); border-radius: 20px; box-shadow: var(--card-shadow);
}
.page-v2 .eu__top,
.page-v2 .eu__reg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.page-v2 .eu__reg { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 12px; background: #FFFBF4; border-radius: 14px; }
.page-v2 .eu__top .avatar { width: 48px; height: 48px; font-size: 16px; margin: 0; }
.page-v2 .eu__pos { min-width: 0; }
.page-v2 .eu__l { display: block; font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: #072E1C; overflow-wrap: anywhere; }
.page-v2 .eu__v { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--display); font-size: 44px; line-height: 1; color: #5C388C; }
.page-v2 .eu__v small { font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 0; color: #072E1C; }
.page-v2 .eu__v .delta { font-family: var(--font); align-self: center; }
.page-v2 .eu__geral { text-align: right; }
.page-v2 .eu__pct { font-family: var(--display); font-size: 34px; line-height: 1; }
.page-v2 .eu__fams { display: grid; gap: 6px; }
.page-v2 .eu__fam { display: grid; grid-template-columns: minmax(0, 1fr) auto 58px; gap: 10px; align-items: center; padding: 7px 12px; background: #FFFBF4; border-radius: 12px; }
.page-v2 .eu__fam-n { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 800; color: #123528; }
.page-v2 .eu__fam-n i { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--fc); }
.page-v2 .eu__fam-p { font-family: var(--display); font-size: 26px; font-weight: 400; line-height: 1; text-align: right; }
.page-v2 .eu__foot { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: #123528; }
.page-v2 .eu__foot b { font-weight: 900; color: #3F2366; }
.page-v2 .eu__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.page-v2 .eu + .hero__cta { margin-top: 22px; }
.page-v2 .rank-row.is-me { border-color: #5C388C; background: #F1E7F8; box-shadow: 0 0 0 2px rgba(92, 56, 140, .28); }
.page-v2 .eu-tag {
  display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; vertical-align: 2px;
  font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #5C388C;
}
.page-v2 .eu-topo { position: relative; z-index: 2; }
.page-v2 .eu-topo:empty { display: none; }
@media (max-width: 900px) {
  .page-v2 .eu { max-width: none; }
  .page-v2 .hero { flex-direction: column; align-items: stretch; }
  .page-v2 .eu-topo { margin-bottom: 18px; }
  .page-v2 .eu-topo .eu { margin-top: 0; }
}
@media (max-width: 380px) {
  .page-v2 .eu { padding: 14px; }
  .page-v2 .eu__top { gap: 10px; }
  .page-v2 .eu__top .avatar { width: 40px; height: 40px; font-size: 14px; }
  .page-v2 .eu__v { font-size: 38px; }
  .page-v2 .eu__pct { font-size: 28px; }
  .page-v2 .eu__fam-n { font-size: 13px; }
  .page-v2 .eu__fam .pill-niv { font-size: 11px; }
}
@media (max-width: 370px) {
  .page-v2 .eu__fam { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "v p"; gap: 4px 10px; padding: 8px 10px; }
  .page-v2 .eu__fam-n { grid-area: n; }
  .page-v2 .eu__fam .pill-niv { grid-area: v; justify-self: start; }
  .page-v2 .eu__fam-p { grid-area: p; }
}
.page-v2 .grad-purple {
  background: linear-gradient(100deg, #3F2366 0%, #5C388C 30%, #8A63C9 48%, #5C388C 64%, #3F2366 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 7s linear infinite;
}
.page-v2 .sim__result [style*="opacity"] { opacity: 1 !important; color: #FFF6D0; }
.page-v2 .sim__toggle { color: #FFF6D0; }
.page-v2 .sim__toggle.is-off { color: #B8AE98; cursor: not-allowed; }
.page-v2 .sim__toggle.is-off input { opacity: .55; }

/* ---------- login ---------- */
.page-v2.login-page { background: #8ABE41; }
.page-v2 .login__rays {
  opacity: 1;
  background:
    radial-gradient(closest-side at 50% 38%, rgba(255, 255, 255, .36), rgba(255, 255, 255, .08) 40%, transparent 66%),
    repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 255, 255, .12) 0deg 1.6deg, transparent 1.6deg 15deg);
  will-change: transform;
}
.page-v2 .login__glow { background: radial-gradient(circle, rgba(255, 255, 255, .28), transparent 68%); }
.page-v2 .login__vignette { background: radial-gradient(ellipse at 50% 42%, transparent 46%, rgba(7, 46, 28, .28) 100%); }
.page-v2 .login__grain { opacity: .12; mix-blend-mode: multiply; }
.page-v2 .login__brand img { height: 30px; }
.page-v2 .login__brand span { color: #072E1C; font-size: 11px; }
.page-v2 .orbit__pack { filter: drop-shadow(0 16px 20px rgba(7, 46, 28, .35)); }
.page-v2 .login__logo { width: 38%; }
.page-v2 .login.is-ready .login__leao { animation-name: logoIn; }
.page-v2 .login.is-entering .login__leao { animation-name: logoBoom; animation-duration: 1.6s; }
/* Entrada mais calma: tudo ~50% mais longo, em sincronia com os tempos do login.js. */
.page-v2 .login.is-entering .orbit__ring,
.page-v2 .login.is-entering .orbit__pack { animation-duration: 2.6s; }
.page-v2 .login.is-entering .login__stage > :not(.orbit) { animation-duration: .65s; }
.page-v2 .login.is-entering .login__dock { animation-duration: .5s; }
.page-v2 .login.is-entering .login__flash { animation-duration: 1.6s; animation-delay: .5s; }
.page-v2 .login.is-going .login__portal { animation-duration: 1.05s; }
.page-v2.is-entering::before { animation-duration: 2.2s; }
@keyframes logoIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); filter: drop-shadow(0 0 0 transparent); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); filter: drop-shadow(0 18px 40px rgba(255, 255, 255, .7)); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 14px 26px rgba(7, 46, 28, .35)); }
}
@keyframes logoBoom {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(1.24); filter: drop-shadow(0 24px 60px rgba(255, 255, 255, .85)); }
  100% { transform: translate(-50%, -50%) scale(1.06); }
}
.page-v2 .login__title {
  background: linear-gradient(100deg, #2C1848 0%, #4A2A78 22%, #5C388C 38%, #B79AE6 48%, #5C388C 58%, #3A2060 78%, #2C1848 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 5.5s linear infinite;
  filter: drop-shadow(0 8px 18px rgba(44, 24, 72, .28));
}
.page-v2 .login__title small { background: none; color: #072E1C; -webkit-text-fill-color: #072E1C; }
.page-v2 .login__lead { color: #072E1C; font-size: 15px; }
.page-v2 .niveis-mini li { background: #FBF0DF; border-color: var(--card-line); color: #072E1C; font-size: 11.5px; padding: 7px 12px; }
.page-v2 .niveis-mini li:nth-child(1) b { background: #6B6B6B; color: #fff; }
.page-v2 .niveis-mini li:nth-child(2) b { background: var(--lv-praticante); }
.page-v2 .niveis-mini li:nth-child(3) b { background: var(--lv-profissional); color: #fff; }
.page-v2 .niveis-mini li:nth-child(4) b { background: var(--lv-mestre-bg); color: var(--lv-mestre-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.page-v2 .niveis-mini li:nth-child(4) {
  background: linear-gradient(180deg, #FFF4D2, #FBF0DF);
  border-color: rgba(201, 150, 20, .55);
  box-shadow: 0 0 0 1px rgba(242, 194, 27, .2), 0 4px 14px rgba(184, 134, 11, .22);
}
.page-v2 .niveis-mini li:nth-child(4):hover,
.page-v2 .niveis-mini li:nth-child(4):focus-visible,
.page-v2 .niveis-mini li:nth-child(4).is-on { box-shadow: 0 0 22px rgba(242, 194, 27, .55); border-color: rgba(201, 150, 20, .75); }
.page-v2 .niveis-mini img { filter: drop-shadow(0 14px 18px rgba(7, 46, 28, .4)); }
.page-v2 .login__dock { background: linear-gradient(180deg, transparent, rgba(138, 190, 65, .96) 28%); }
.page-v2 .login__dock .btn { font-size: 16px; }
.page-v2 .login__foot { color: #072E1C; font-size: 12.5px; }
.page-v2 .login__flash { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .45) 36%, rgba(138, 190, 65, 0) 70%); }
.page-v2 .login__portal { background: #8ABE41; }
.page-v2 .login__portal-inner img { filter: drop-shadow(0 18px 36px rgba(7, 46, 28, .35)); }
.page-v2 .login__portal-inner .s { color: #072E1C; }
.page-v2.is-entering::before { background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .6), rgba(138, 190, 65, 0) 62%); }