/* =====================================================================
   POKEWORLD UNIVERSE — layout das subpáginas
   (usa a mesma escala rem do styles.css: 1rem = 10px do design)
   ===================================================================== */

.page--sub { background: var(--offwhite); }
.page--sub .topbar { position: relative; height: var(--pwu-header-white-height, 10.4rem); z-index: 20; }
.page--sub .topbar .header-shape--white { background-image: url("assets/d-header-vector2.svg"); }
.page--sub .topbar .header-shape--grad { background-image: url("assets/d-header-vector1.svg"); }
.nav a.is-active { color: var(--lime); }
.nav a.is-active::after { transform: scaleX(1); background: var(--lime); }

/* ---------- hero das subpáginas ---------- */
.banner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56rem;
  padding: 9rem 0 11rem;
  overflow: hidden;
  isolation: isolate;
  background: #070b1e var(--bg) center / cover no-repeat;
  color: #fff;
}
/* profundidade: escurece a esquerda, o topo e a base da foto */
.banner::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(6,9,26,.95) 0%, rgba(6,9,26,.8) 34%, rgba(6,9,26,.3) 66%, rgba(6,9,26,.62) 100%),
    linear-gradient(180deg, rgba(6,9,26,.72) 0%, rgba(6,9,26,0) 26%, rgba(6,9,26,.5) 76%, rgba(6,9,26,.88) 100%);
}
/* luz da marca: azul atrás da arte, índigo no rodapé, lime no canto */
.banner__glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(40rem 40rem at 74% 48%, rgba(74,163,255,.4), transparent 66%),
    radial-gradient(72rem 34rem at 6% 108%, rgba(5,48,239,.55), transparent 70%),
    radial-gradient(26rem 26rem at 94% 6%, rgba(196,255,74,.13), transparent 70%);
}
/* trama hexagonal da identidade, bem discreta */
.banner__mesh {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url("assets/img/bg/hex-plain.png") center / 32rem repeat;
  opacity: .08;
  -webkit-mask-image: linear-gradient(180deg, #000 8%, transparent 86%);
  mask-image: linear-gradient(180deg, #000 8%, transparent 86%);
}
/* pokébola gigante em contorno, girando devagar */
.banner__ball {
  position: absolute; z-index: 2; pointer-events: none;
  right: -13rem; top: -16rem; width: 50rem; height: 50rem; border-radius: 50%;
  border: .2rem solid rgba(255,255,255,.08);
  animation: giraBola 60s linear infinite;
}
.banner__ball::before { content: ""; position: absolute; left: -.2rem; right: -.2rem; top: 50%; height: .2rem; background: rgba(255,255,255,.08); }
.banner__ball::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12rem; height: 12rem;
  margin: -6rem 0 0 -6rem; border-radius: 50%; border: .2rem solid rgba(255,255,255,.1);
}
@keyframes giraBola { to { transform: rotate(360deg); } }
/* curva branca da base, quando a próxima seção é clara */
.banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.1rem; z-index: 4;
  height: 6rem; background: url("assets/d-hero-vector3.svg") no-repeat center bottom / 100% 100%;
}

/* ---- conteúdo, alinhado com o .wrap das seções ---- */
.banner__inner { position: relative; z-index: 3; width: min(160rem, 100% - 8rem); margin: 0 auto; }
.banner__crumb { display: flex; align-items: center; gap: .9rem; margin-bottom: 2rem; font: 400 1.5rem var(--montreal); color: rgba(255,255,255,.75); }
.banner__crumb a { color: rgba(255,255,255,.6); transition: color .2s; }
.banner__crumb a:hover { color: var(--lime); }
.banner__crumb i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(255,255,255,.35); }
.banner__tag {
  display: inline-flex; align-items: center; gap: .9rem; padding: .8rem 1.8rem;
  border: .12rem solid rgba(255,255,255,.22); border-radius: 10rem;
  background: rgba(255,255,255,.07); backdrop-filter: blur(8px);
  font: 400 1.6rem var(--montreal); letter-spacing: .02em; color: rgba(255,255,255,.92);
}
.banner__tag::before {
  content: ""; width: .8rem; height: .8rem; border-radius: 50%; background: var(--lime); animation: pisca 2.4s ease-in-out infinite;
}
@keyframes pisca { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
.banner__title {
  margin-top: 1.8rem; font: 400 9rem/0.92 var(--bebas); letter-spacing: .005em;
}
.banner__title .grad { background-size: 100% 100%; }
.banner__sub {
  position: relative; margin-top: 2rem; padding-left: 2rem; max-width: 60rem;
  font: 400 1.9rem/1.55 var(--montreal); color: rgba(255,255,255,.82);
}
.banner__sub::before {
  content: ""; position: absolute; left: 0; top: .3rem; bottom: .3rem; width: .3rem;
  border-radius: .3rem; background: linear-gradient(180deg, var(--lime), rgba(5,48,239,0));
}

/* ---- arte do personagem ---- */
.banner__stage { position: absolute; z-index: 3; right: 4rem; bottom: 0; width: 54rem; height: 100%; pointer-events: none; }
.banner__stage::before {
  content: ""; position: absolute; left: 50%; top: 48%; width: 40rem; height: 40rem;
  margin: -20rem 0 0 -20rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,176,255,.32), transparent 62%);
}
/* sombra no chão, para o personagem não parecer flutuando solto */
.banner__stage::after {
  content: ""; position: absolute; left: 50%; bottom: 4rem; width: 26rem; height: 4rem;
  margin-left: -13rem; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.45), transparent 70%);
}
/* dois personagens: o segundo fica atrás, menor e deslocado */
.banner__stage--duo { width: 84rem; right: 1rem; }
.banner__art--2 {
  position: absolute; inset: auto auto 0 0; width: 62%; height: 74%;
  object-fit: contain; object-position: bottom center; opacity: .92;
  filter: brightness(.85);
  animation: flutua 7s ease-in-out infinite; animation-delay: -2.4s;
}
.banner__stage--duo .banner__art { left: auto; right: 0; width: 50%; }
/* os dois lado a lado, com leve sobreposição, em vez de um atrás do outro */
.banner__stage--duo .banner__art--2 { left: 0; right: auto; width: 56%; height: 90%; opacity: 1; }
.banner__art {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 88%;
  object-fit: contain; object-position: bottom center;
  animation: flutua 6s ease-in-out infinite;
}
/* sem personagem: a pokébola cresce e ocupa o lado direito */
.banner--solo .banner__ball { right: -6rem; top: 50%; margin-top: -26rem; width: 52rem; height: 52rem; }

/* ---------- seções ---------- */
.sub { position: relative; }
.sec { position: relative; padding: 9rem 0; }
.sec--dark { background: #111426 url("assets/img/bg/hex-plain.png") center / 40rem repeat; color: #fff; }
.sec--dark::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,20,38,.85), rgba(17,20,38,.95)); pointer-events: none; }
.sec--dark > * { position: relative; }
.sec--blue { background: var(--grad-blue); color: #fff; }
.sec--white { background: #fff; }
.wrap { width: min(160rem, 100% - 8rem); margin: 0 auto; }
.wrap--narrow { width: min(110rem, 100% - 8rem); margin: 0 auto; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 4.6rem; }
.sec__title { font: 400 6.4rem/1 var(--bebas); color: inherit; }
.sec__title .grad { background-size: 300% 100%; }
.sec--dark .sec__title .grad, .sec--blue .sec__title .grad { background-image: var(--grad-yellow); background-size: 100% 100%; }
.sec__sub { margin-top: 1rem; max-width: 70rem; font: 400 1.9rem/1.5 var(--montreal); color: rgba(0,0,0,.6); }
.sec--dark .sec__sub, .sec--blue .sec__sub { color: rgba(255,255,255,.75); }
.sec__link { font: 400 2.2rem var(--bebas); letter-spacing: .05em; color: #0530ef; white-space: nowrap; }
.sec--dark .sec__link, .sec--blue .sec__link { color: var(--lime); }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.4rem 3.6rem; border: 0; border-radius: 10rem; font: 400 2.2rem/1 var(--bebas); letter-spacing: .05em; cursor: pointer; transition: transform .2s, filter .2s, box-shadow .2s; white-space: nowrap; }
.btn--yellow { background: var(--grad-yellow); color: #000; }
.btn--black { background: var(--grad-black); color: #fff; }
.btn--lime { background: var(--lime); color: #000; }
.btn--ghost { background: transparent; color: inherit; border: .15rem solid currentColor; }
.btn:hover { filter: brightness(1.08); transform: translateY(-.2rem); }
.btn--sm { padding: 1rem 2.2rem; font-size: 1.8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1.6rem; }

/* chips de filtro */
.chips { display: flex; flex-wrap: wrap; gap: 1rem; }
.chip { padding: .9rem 1.8rem; border-radius: 10rem; border: .15rem solid rgba(0,0,0,.15); background: #fff; color: #000; font: 400 1.7rem var(--bebas); letter-spacing: .06em; cursor: pointer; transition: all .2s; }
.chip:hover { border-color: #0530ef; }
.chip.is-active { background: var(--grad-yellow); border-color: transparent; }
.sec--dark .chip { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.15); }
.sec--dark .chip.is-active { background: var(--grad-yellow); color: #000; }

/* ---------- O JOGO ---------- */
.intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 6rem; align-items: center; }
.intro__text p { margin: 1.6rem 0 0; font: 400 1.9rem/1.6 var(--montreal); color: rgba(0,0,0,.7); }
.intro__art { position: relative; }
.intro__art img { width: 100%; border-radius: 2.4rem; }
.intro__art .float { position: absolute; width: 22rem; bottom: -4rem; left: -4rem; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 4rem; }
.stat-box { padding: 2.4rem; border-radius: 2rem; background: #fff; }
.stat-box b { display: block; font: 400 4.6rem/1 var(--bebas); background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-box span { font: 400 1.5rem var(--montreal); color: rgba(0,0,0,.6); }


.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
.feature { position: relative; padding: 3rem; border-radius: 2rem; background: rgba(255,255,255,.05); border: .1rem solid rgba(255,255,255,.1); transition: transform .3s, border-color .3s; }
.feature:hover { transform: translateY(-.6rem); border-color: rgba(112,244,255,.6); }
.feature__icon { width: 5.6rem; height: 5.6rem; margin-bottom: 2rem; }
.feature h3 { font: 500 2.3rem/1.2 var(--montreal); }
.feature p { margin-top: 1rem; font: 300 1.6rem/1.5 var(--montreal); color: rgba(255,255,255,.75); }

.pk-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pk-marquee__track { display: flex; gap: 2.4rem; width: max-content; animation: pk-scroll 60s linear infinite; }
.pk-marquee:hover .pk-marquee__track { animation-play-state: paused; }
.pk-marquee__track img { width: 16rem; height: 16rem; margin: 0 auto; object-fit: contain; transition: transform .3s; }
.pk-marquee__track img:hover { transform: scale(1.15) rotate(-4deg); }
@keyframes pk-scroll { to { transform: translateX(-50%); } }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.gallery-grid a { display: block; position: relative; border-radius: 1.8rem; overflow: hidden; aspect-ratio: 16/9; }
.gallery-grid a:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.gallery-grid a:hover img { transform: scale(1.06); }
.gallery-grid a::after { content: "+"; position: absolute; right: 1.6rem; bottom: 1.6rem; width: 4rem; height: 4rem; border-radius: 50%; background: var(--lime); color: #000; font: 400 3rem/4rem var(--bebas); text-align: center; opacity: 0; transform: scale(.5); transition: all .3s; }
.gallery-grid a:hover::after { opacity: 1; transform: none; }

.cta-band { position: relative; overflow: hidden; padding: 8rem 0; background: var(--grad-blue); color: #fff; text-align: center; }
.cta-band h2 { font: 400 7.2rem/1 var(--bebas); }
.cta-band p { margin: 1.4rem auto 3rem; max-width: 70rem; font: 400 1.9rem/1.5 var(--montreal); }
.cta-band .btn-row { justify-content: center; }
.cta-band__pk { position: absolute; bottom: -3rem; width: 26rem; opacity: .9; pointer-events: none; }
.cta-band__pk--l { left: 6rem; } .cta-band__pk--r { right: 6rem; }

/* ---------- NOTÍCIAS ---------- */
.news-featured { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; margin-bottom: 4rem; border-radius: 2.4rem; overflow: hidden; background: var(--dark); color: #fff; border: .3rem solid transparent; background: linear-gradient(var(--dark), var(--dark)) padding-box, var(--grad-blue) border-box; }
.news-featured img { width: 100%; height: 100%; min-height: 40rem; object-fit: cover; }
.news-featured__body { padding: 4rem; display: flex; flex-direction: column; justify-content: center; }
.news-featured h2 { margin: 1.2rem 0; font: 500 3.2rem/1.2 var(--montreal); }
.news-featured p { font: 300 1.7rem/1.5 var(--montreal); color: rgba(255,255,255,.8); }
.news-meta { display: flex; align-items: center; gap: 1.2rem; font: 400 1.4rem var(--montreal); color: rgba(255,255,255,.7); }
.news-meta .tag { padding: .4rem 1.2rem; border-radius: 10rem; background: var(--lime); color: #000; font: 400 1.4rem var(--bebas); letter-spacing: .08em; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
.ncard { display: flex; flex-direction: column; border-radius: 2rem; overflow: hidden; color: #fff; background: linear-gradient(var(--dark), var(--dark)) padding-box, var(--grad-blue) border-box; border: .3rem solid transparent; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.ncard:hover { transform: translateY(-.8rem); }
.ncard__img { aspect-ratio: 16/9; overflow: hidden; border-bottom: .4rem solid var(--lime); }
.ncard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.ncard:hover .ncard__img img { transform: scale(1.06); }
.ncard__body { padding: 2.2rem 2.4rem 2.6rem; display: flex; flex-direction: column; gap: 1.2rem; flex: 1; }
.ncard h3 { font: 500 2rem/1.3 var(--montreal); }
.ncard p { font: 300 1.5rem/1.5 var(--montreal); color: rgba(255,255,255,.75); }
.ncard .more { margin-top: auto; font: 400 1.6rem var(--montreal); color: var(--lime); text-decoration: underline; text-underline-position: from-font; }
.empty { padding: 6rem; text-align: center; font: 400 2rem var(--montreal); color: rgba(0,0,0,.5); }

/* artigo */
.article { display: grid; grid-template-columns: 1fr 34rem; gap: 6rem; align-items: start; }
.article__hero { border-radius: 2.4rem; overflow: hidden; aspect-ratio: 16/8; }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article h1 { margin: 2.4rem 0 1.2rem; font: 500 4.2rem/1.15 var(--montreal); }
.article .news-meta { color: rgba(0,0,0,.6); }
.article__body { margin-top: 3rem; }
.article__body p { margin-bottom: 2rem; font: 400 1.9rem/1.7 var(--montreal); color: rgba(0,0,0,.8); }
.article__body h3 { margin: 3rem 0 1.4rem; font: 400 3.2rem/1.1 var(--bebas); letter-spacing: .02em; }
.article__body ul { margin: 0 0 2.4rem 2.4rem; display: flex; flex-direction: column; gap: .8rem; }
.article__body li { font: 400 1.8rem/1.5 var(--montreal); color: rgba(0,0,0,.8); }
.article__body li::marker { color: #0530ef; }
.dex-modal__desc { margin-top: .8rem; font: 300 1.6rem/1.5 var(--montreal); color: rgba(255,255,255,.75); }
.article__body p:first-child::first-letter { float: left; margin: .4rem 1rem 0 0; font: 400 7rem/1 var(--bebas); background: var(--grad-blue); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aside { position: sticky; top: 3rem; display: flex; flex-direction: column; gap: 2rem; }
.aside h4 { font: 400 2.6rem var(--bebas); }
.aside .ncard h3 { font-size: 1.7rem; }
.share { display: flex; gap: 1rem; }
.share button { flex: 1; padding: 1rem; border: .15rem solid rgba(0,0,0,.12); border-radius: 1.2rem; background: #fff; font: 400 1.6rem var(--bebas); letter-spacing: .06em; cursor: pointer; }
.share button:hover { border-color: #0530ef; }

/* ---------- DOWNLOAD ---------- */
.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem; }
.platform { position: relative; padding: 3.2rem 2.6rem; border-radius: 2.4rem; background: #fff; text-align: center; overflow: hidden; transition: transform .35s, box-shadow .35s; }
.platform:hover { transform: translateY(-.8rem); }
.platform__icon { font-size: 5rem; line-height: 1; }
.platform h3 { margin: 1.4rem 0 .6rem; font: 400 3.2rem/1 var(--bebas); }
.platform p { font: 400 1.5rem/1.5 var(--montreal); color: rgba(0,0,0,.6); min-height: 4.5rem; }
.platform .size { display: block; margin: 1.2rem 0 1.8rem; font: 400 1.4rem var(--montreal); color: rgba(0,0,0,.45); }
.platform .badge-img { display: block; width: 18rem; margin: 0 auto; }
.platform .badge-img img { width: 100%; }
.platform__ribbon {
  position: absolute; top: 4.6rem; right: -6.6rem; width: 26rem; padding: .5rem 0;
  background: var(--lime); color: #000; font: 400 1.4rem/1.2 var(--bebas);
  letter-spacing: .1em; text-align: center; transform: rotate(45deg);
}
/* o launcher do PC é o caminho principal, então ganha destaque */
.platform.platform--destaque { background: linear-gradient(160deg, #141d47, #0a1030); color: #fff; }
.platform.platform--destaque h3 { color: #fff; }
.platform.platform--destaque p { color: rgba(255,255,255,.75); }
.platform.platform--destaque .size { color: rgba(255,255,255,.55); }
.platform.platform--destaque:hover { background: linear-gradient(160deg, #18225a, #0c1440); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; counter-reset: step; }
.step { position: relative; padding: 3.2rem 2.8rem 2.8rem; border-radius: 2rem; background: rgba(255,255,255,.06); border: .1rem solid rgba(255,255,255,.12); }
.step::before { counter-increment: step; content: "0" counter(step); display: block; margin-bottom: 1.4rem; font: 400 5.6rem/1 var(--bebas); background: var(--grad-yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { font: 500 2.2rem var(--montreal); }
.step p { margin-top: .8rem; font: 300 1.6rem/1.5 var(--montreal); color: rgba(255,255,255,.75); }

.req { width: 100%; border-collapse: collapse; background: #fff; border-radius: 2rem; overflow: hidden; }
.req th, .req td { padding: 1.8rem 2.4rem; text-align: left; font: 400 1.6rem var(--montreal); border-bottom: .1rem solid rgba(0,0,0,.06); }
.req th { background: var(--dark); color: #fff; font: 400 2rem var(--bebas); letter-spacing: .06em; }
.req td:first-child { font-weight: 500; color: rgba(0,0,0,.6); }

.faq { display: flex; flex-direction: column; gap: 1.2rem; }
.faq details { border-radius: 1.6rem; background: #fff; overflow: hidden; }
.faq summary { padding: 2rem 2.6rem; font: 500 1.9rem var(--montreal); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::after { content: "+"; font: 400 3rem/1 var(--bebas); color: #0530ef; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2.6rem 2.2rem; font: 400 1.6rem/1.6 var(--montreal); color: rgba(0,0,0,.7); }

/* ---------- base: busca e barras ---------- */
.search { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.8rem; border-radius: 10rem; background: #fff; border: .15rem solid rgba(0,0,0,.1); min-width: 32rem; }
.search input { flex: 1; border: 0; outline: 0; font: 400 1.6rem var(--montreal); background: transparent; color: inherit; }
.bar { position: relative; height: .8rem; border-radius: .4rem; background: rgba(0,0,0,.08); overflow: hidden; min-width: 12rem; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: .4rem; background: var(--grad-blue); }

/* ---------- RANKING ---------- */
.rank-sec { background: #0d1330 url("assets/img/bg/hex-plain.png") center / 40rem repeat; color: #fff; }
.rank-sec::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,19,48,.92), rgba(13,19,48,.97)); pointer-events: none; }
.rank-sec > * { position: relative; }
.season { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.4rem 3rem; border-radius: 2rem; background: linear-gradient(rgba(6,10,30,.7), rgba(6,10,30,.7)) padding-box, var(--grad-blue) border-box; border: .2rem solid transparent; color: #fff; }
.season b { font: 400 3.2rem var(--bebas); }
.season span { font: 400 1.5rem var(--montreal); color: rgba(255,255,255,.7); }
.season__timer { display: flex; gap: 1.2rem; }
.season__timer div { min-width: 7rem; padding: 1rem; border-radius: 1.2rem; background: rgba(255,255,255,.08); text-align: center; }
.season__timer b { display: block; font-size: 3.6rem; line-height: 1; }
.season__timer small { font: 400 1.2rem var(--montreal); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }

.rank-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin: 3.6rem 0 2.4rem; }
.rank-cat { position: relative; padding: 1.8rem 2.2rem; border: 0; text-align: left; color: #fff; cursor: pointer; background: rgba(255,255,255,.05); clip-path: polygon(1.6rem 0, 100% 0, calc(100% - 1.6rem) 100%, 0 100%); transition: background .25s, transform .25s; }
.rank-cat small { display: block; font: 400 1.3rem var(--bebas); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.rank-cat b { display: block; margin-top: .6rem; font: 500 1.8rem var(--montreal); }
.rank-cat b em { font-style: normal; color: var(--lime); }
.rank-cat:hover { background: rgba(255,255,255,.1); transform: translateY(-.2rem); }
.rank-cat.is-active { background: var(--grad-yellow); color: #000; }
.rank-cat.is-active small { color: rgba(0,0,0,.6); }
.rank-cat.is-active b em { color: #0530ef; }
.rank-tools { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.rank-tools .sec__sub { margin: 0; color: rgba(255,255,255,.7); }
.rank-sec .search { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); min-width: 32rem; }
.rank-sec .search input { color: #fff; }
.trophy-legend { display: flex; align-items: center; gap: 2rem; margin-bottom: 3rem; padding: 1.4rem 2rem; border-radius: 1.6rem; background: rgba(255,255,255,.04); }
.trophy-legend > span { font: 400 1.5rem var(--bebas); letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.trophy-legend div { display: flex; gap: 1rem; flex-wrap: wrap; }
.trophy-legend figure { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin: 0; font: 400 1.3rem var(--bebas); letter-spacing: .1em; color: rgba(255,255,255,.7); }
.trophy-legend img { height: 5.2rem; margin: 0 auto; }

.rank-list { display: flex; flex-direction: column; gap: 1.6rem; }
.rank-card { position: relative; padding: 2.4rem 3rem 2.6rem; background: rgba(6,10,30,.55); border: .1rem solid rgba(255,255,255,.08); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), calc(100% - 1.6rem) 100%, 0 100%); transition: background .25s, border-color .25s; }
.rank-card:hover { background: rgba(6,10,30,.8); border-color: rgba(112,244,255,.4); }
.rank-card--top { background: linear-gradient(rgba(6,10,30,.75), rgba(6,10,30,.75)) padding-box, var(--grad-blue) border-box; border: .2rem solid transparent; }
.rank-card__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
.rank-card__pos { position: relative; display: grid; place-items: center; width: 7.2rem; height: 7.2rem; }
.rank-card__pos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rank-card__pos b { position: absolute; right: -.6rem; bottom: -.6rem; min-width: 2.8rem; height: 2.8rem; padding: 0 .6rem; border-radius: .8rem; background: var(--grad-yellow); color: #000; font: 400 1.6rem/2.8rem var(--bebas); text-align: center; }
.rank-card__pos--plain { background: rgba(255,255,255,.06); border-radius: 1.4rem; }
.rank-card__pos--plain b { position: static; background: transparent; color: #fff; font-size: 2.6rem; }
.rank-card__name b { display: block; font: 500 2.4rem var(--montreal); }
.rank-card__name small { display: block; margin-top: .3rem; font: 400 1.4rem var(--montreal); color: rgba(255,255,255,.55); }
.rank-card__value { text-align: right; }
.rank-card__value b { display: block; font: 400 4.2rem/1 var(--bebas); background: var(--grad-yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank-card__value small { font: 400 1.3rem var(--bebas); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.rank-team { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; margin-top: 2rem; }
.slot { position: relative; padding: 1.2rem 1rem .9rem; border-radius: 1.4rem; background: rgba(255,255,255,.05); text-align: center; }
.slot img { width: 8rem; height: 8rem; margin: 0 auto; object-fit: contain; transition: transform .3s; }
.slot:hover img { transform: scale(1.1); }
.slot__lvl { display: block; margin-top: .4rem; font: 400 1.3rem var(--bebas); letter-spacing: .12em; color: rgba(255,255,255,.7); }
.slot__lvl b { color: #fff; font-size: 1.6rem; }
.slot .bar { margin-top: .6rem; height: .5rem; min-width: 0; background: rgba(255,255,255,.1); }
.slot .bar i { background: var(--grad-blue); }
.slot__pct { display: block; margin-top: .4rem; font: 400 1.3rem var(--bebas); letter-spacing: .08em; color: #70f5ff; }
.slot--empty img { filter: brightness(0) opacity(.18); }
.slot--empty .slot__lvl, .slot--empty .bar, .slot--empty .slot__pct { visibility: hidden; }
.you { outline: .3rem solid var(--lime); }
.rank-empty { padding: 5rem; text-align: center; color: rgba(255,255,255,.5); font: 400 2rem var(--montreal); }

/* ---------- LOJA ---------- */
.shop-gate { position: relative; z-index: 5; margin-bottom: -20rem; display: flex; justify-content: center; padding: 6rem 0 0; }
.shop-gate[hidden] { display: none; }
.shop-gate__card { width: min(62rem, 100%); padding: 4rem 3.6rem; border-radius: 2.4rem; text-align: center; color: #fff; background: linear-gradient(var(--dark), var(--dark)) padding-box, var(--grad-blue) border-box; border: .3rem solid transparent; }
.shop-gate__card img { width: 8rem; height: 8rem; margin: 0 auto 1rem; object-fit: cover; }
.shop-gate__card h3 { font: 400 4rem/1 var(--bebas); }
.shop-gate__card p { margin: 1rem 0 2.4rem; font: 400 1.6rem/1.5 var(--montreal); color: rgba(255,255,255,.75); }
.shop-gate__card .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.shop-grid.is-locked { filter: blur(.8rem) saturate(.6); opacity: .45; pointer-events: none; user-select: none; }
.wallet { display: flex; align-items: center; gap: 1.6rem; }
.wallet div { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.8rem; border-radius: 10rem; background: #fff; font: 400 1.6rem var(--montreal); }
.wallet b { font: 400 2.2rem var(--bebas); }
.wallet .coin { width: 2.6rem; height: 2.6rem; object-fit: contain; }
.moeda-mini { width: 1.8rem; height: 1.8rem; margin-right: .5rem; vertical-align: -.35rem; object-fit: contain; }
.wallet .gem { width: 2rem; height: 2rem; background: var(--grad-blue); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.item { position: relative; display: flex; flex-direction: column; padding: 2.4rem; border-radius: 2.4rem; background: #fff; overflow: hidden; transition: transform .35s, box-shadow .35s; }
.item:hover { transform: translateY(-.8rem); }
.item__badge { position: absolute; top: 1.6rem; left: 1.6rem; padding: .4rem 1.2rem; border-radius: 10rem; background: var(--lime); font: 400 1.3rem var(--bebas); letter-spacing: .1em; }
.item__img { height: 20rem; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(112,244,255,.35), transparent 65%); }
.item__img img { max-height: 18rem; max-width: 80%; object-fit: contain; transition: transform .4s; }
.item:hover .item__img img { transform: scale(1.08) rotate(-3deg); }
.item h3 { margin-top: 1rem; font: 500 2rem var(--montreal); }
.item p { font: 400 1.4rem var(--montreal); color: rgba(0,0,0,.55); }
.item__price { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.4rem 0; }
.item__price span { padding: .5rem 1.2rem; border-radius: 10rem; background: var(--offwhite); font: 400 1.7rem var(--bebas); letter-spacing: .04em; }
.item .btn { margin-top: auto; width: 100%; }
.cart-fab[hidden] { display: none; }
.cart-fab { position: fixed; right: 3rem; bottom: 3rem; z-index: 80; display: flex; align-items: center; gap: 1rem; padding: 1.4rem 2.4rem; border: 0; border-radius: 10rem; background: var(--dark); color: #fff; font: 400 2rem var(--bebas); letter-spacing: .06em; cursor: pointer; }
.cart-fab b { display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .6rem; border-radius: 10rem; background: var(--lime); color: #000; font-size: 1.6rem; }
.cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 210; width: min(44rem, 100%); background: #fff; transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.cart.is-open { transform: none; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 2.4rem 2.6rem; border-bottom: .1rem solid rgba(0,0,0,.08); font: 400 3rem var(--bebas); }
.cart__head button { border: 0; background: none; font-size: 3rem; cursor: pointer; }
.cart__list { flex: 1; overflow: auto; padding: 1.6rem 2.6rem; display: flex; flex-direction: column; gap: 1.2rem; }
.cart__item { display: flex; align-items: center; gap: 1.4rem; padding: 1.2rem; border-radius: 1.4rem; background: var(--offwhite); }
.cart__item img { width: 5.6rem; height: 5.6rem; object-fit: contain; }
.item__img img, .dex-modal__img img { margin: 0 auto; }
.cart__item div { flex: 1; font: 500 1.5rem var(--montreal); }
.cart__item small { display: block; font-weight: 400; color: rgba(0,0,0,.55); }
.cart__item button { border: 0; background: none; font-size: 2rem; cursor: pointer; color: rgba(0,0,0,.4); }
.cart__foot { padding: 2.4rem 2.6rem; border-top: .1rem solid rgba(0,0,0,.08); }
.cart__total { display: flex; justify-content: space-between; margin-bottom: 1.6rem; font: 400 2.4rem var(--bebas); }
.cart__foot .btn { width: 100%; }

/* ---------- MINHA CONTA ---------- */
body[data-page="minha-conta"] .acc-sec { padding-top: 5rem; }
.acc-sec, .rank-sec { background-color: #0d1330; }
.acc-sec { background: #0d1330 url("assets/img/bg/hex-plain.png") center / 40rem repeat; color: #fff; }
.acc-sec::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,19,48,.92), rgba(13,19,48,.97)); pointer-events: none; }
.acc-sec > * { position: relative; }
.acc-card { padding: 4rem 4.4rem; margin-bottom: 3rem; border-radius: 2.4rem; background: linear-gradient(rgba(6,10,30,.72), rgba(6,10,30,.72)) padding-box, var(--grad-blue) border-box; border: .2rem solid transparent; }
.acc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.acc-card__title { font: 400 4.8rem/1 var(--bebas); }
.acc-card__title small { font: 400 2.4rem var(--bebas); color: rgba(255,255,255,.5); }
.acc-grid { display: grid; grid-template-columns: 1fr 26rem; gap: 4rem; margin-top: 2.4rem; }
.acc-field { margin-bottom: 2rem; }
.acc-field__head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: .8rem; }
.acc-field h5 { font: 500 1.8rem var(--montreal); }
.acc-toggle { padding: .4rem 1.2rem; border: 0; border-radius: 10rem; background: var(--grad-blue); color: #fff; font: 400 1.3rem var(--bebas); letter-spacing: .1em; cursor: pointer; }
/* Visual parity with Mostrar; the username action keeps its own event selector. */
body[data-page="minha-conta"] #acc-username-edit {
  min-height: 32px;
  max-width: 100%;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--grad-blue);
  color: #fff;
  font: 400 13px/1.2 var(--bebas);
  letter-spacing: .1em;
  white-space: normal;
  text-align: center;
}
body[data-page="minha-conta"] #acc-username-edit:focus-visible { outline: 2px solid #ffe393; outline-offset: 4px; }
body[data-page="minha-conta"] #acc-username-edit:disabled { cursor: not-allowed; opacity: .5; }
@media (max-width: 700px) {
  body[data-page="minha-conta"] #acc-username-edit { min-height: 40px; }
}
.acc-field input { width: 100%; padding: 1.4rem 1.6rem; border-radius: 1.2rem; border: .15rem solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: #fff; font: 400 1.7rem var(--montreal); outline: 0; }
.acc-side { display: flex; flex-direction: column; gap: 1.6rem; text-align: right; }
.acc-stat b { display: block; font: 400 4rem/1 var(--bebas); background: var(--grad-yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-stat span { font: 400 1.5rem var(--montreal); color: rgba(255,255,255,.65); }
.acc-stat--moeda { display: flex; align-items: center; justify-content: flex-end; gap: 1.2rem; }
.acc-stat--moeda img { width: 4.6rem; height: 4.6rem; flex: none; object-fit: contain; }
.acc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 3.4rem; padding-top: 3rem; border-top: .1rem solid rgba(255,255,255,.1); }
.btn--twitch { background: #9146ff; color: #fff; }
.btn--danger { background: transparent; color: #ff8d78; border: .15rem solid rgba(255,107,74,.6); }
.btn--danger:hover { background: rgba(255,107,74,.15); }
.trainers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.6rem; }
.trainer { position: relative; padding: 2.6rem 1.6rem 2.2rem; border-radius: 2rem; background: rgba(255,255,255,.05); border: .1rem solid rgba(255,255,255,.1); text-align: center; transition: transform .3s, border-color .3s; }
.trainer:hover { transform: translateY(-.5rem); border-color: rgba(112,244,255,.6); }
.trainer img { width: 9rem; height: 9rem; margin: 0 auto; object-fit: contain; }
.trainer h5 { margin-top: 1.2rem; font: 500 1.9rem var(--montreal); }
.trainer .lvl { display: block; margin-top: .3rem; font: 400 1.6rem var(--bebas); letter-spacing: .1em; color: var(--lime); }
.trainer .world { display: block; margin-top: .2rem; font: 400 1.3rem var(--bebas); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.trainer .rm { position: absolute; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s; }
.trainer:hover .rm { opacity: 1; }
/* Foto de cada treinador (fotos-treinadores-20260930): a do personagem, separada da foto da conta */
.trainer img { height: 12rem; }
.trainer__vazio { display: grid; place-items: center; align-content: center; gap: .4rem; width: 9rem; height: 12rem; margin: 0 auto; border-radius: 1.4rem; border: .15rem dashed rgba(255,255,255,.25); background: rgba(0,0,0,.18); color: rgba(255,255,255,.45); }
.trainer__vazio svg { width: 4.4rem; height: 4.4rem; }
.trainer__vazio small { font: 400 1.3rem var(--bebas); letter-spacing: .12em; text-transform: uppercase; }
.trainer.is-online .world { color: #70f5ff; }
.trainer__foto { margin-top: 1.2rem; padding: .7rem 1.6rem; border-radius: 10rem; border: .15rem solid rgba(255,255,255,.35); background: transparent; color: #fff; font: 400 1.5rem/1 var(--bebas); letter-spacing: .08em; white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.trainer__foto:hover, .trainer__foto:focus-visible { border-color: #70f5ff; color: #70f5ff; outline: 0; }
.trainer--sem-foto .trainer__foto { border-color: var(--lime); color: var(--lime); }
.trainers__hint { margin: .8rem 0 1.8rem; font: 400 1.5rem/1.5 var(--montreal); color: rgba(255,255,255,.62); }
.pmodal__card:has(.foto-picker) { width: min(96rem, 100%); }
.foto-picker { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 2.4rem; align-items: start; margin-bottom: 1.8rem; }
.foto-picker__preview svg { display: block; width: 100%; height: auto; }
.foto-picker h4 { margin: 0 0 .8rem; font: 400 2rem var(--bebas); letter-spacing: .06em; color: rgba(255,255,255,.85); }
.foto-picker__row { display: grid; grid-auto-flow: column; grid-auto-columns: 7.4rem; gap: .8rem; overflow-x: auto; padding: .2rem .2rem .8rem; margin-bottom: 1.4rem; }
.foto-opt { position: relative; padding: .4rem; border-radius: 1rem; border: .15rem solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.foto-opt svg { display: block; width: 100%; height: auto; }
.foto-opt:hover { border-color: #70f5ff; }
.foto-opt[aria-pressed="true"] { border-color: var(--lime); background: rgba(220,238,75,.12); }
.foto-opt small { display: block; margin-top: .3rem; font: 500 1.1rem var(--montreal); color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-opt__vazio { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: .8rem; background: #13254d; font: 400 1.6rem var(--bebas); color: rgba(255,255,255,.6); }
@media (max-width: 700px) {
  .foto-picker { grid-template-columns: minmax(0, 1fr); }
  .foto-picker__preview { width: 16rem; margin: 0 auto; }
  .trainer__foto { padding: .7rem 1.1rem; }
}
.trainers__empty { grid-column: 1 / -1; padding: 4rem 2rem; border-radius: 2rem; border: .15rem dashed rgba(255,255,255,.18); text-align: center; font: 400 1.7rem/1.5 var(--montreal); color: rgba(255,255,255,.65); }
.acc-alert { margin-bottom: 2.4rem; padding: 1.6rem 2rem; border-radius: 1.4rem; font: 500 1.6rem var(--montreal); background: rgba(62,207,142,.15); border: .1rem solid rgba(62,207,142,.5); color: #9af0c6; }
.acc-alert.is-warn { background: rgba(252,208,92,.12); border-color: rgba(252,208,92,.5); color: #ffe08a; }
.acc-alert.is-err { background: rgba(255,107,74,.14); border-color: rgba(255,107,74,.5); color: #ffb3a3; }

/* pacotes de diamantes */
.acc-card__hint { font: 400 1.4rem var(--montreal); color: rgba(255,255,255,.55); }
.acc-card__sub { margin-top: 1.2rem; max-width: 78rem; font: 400 1.6rem/1.55 var(--montreal); color: rgba(255,255,255,.72); }
.acc-buy-link { color: var(--lime); font-weight: 500; text-decoration: underline; text-underline-position: from-font; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8rem 2.2rem; margin-top: 2.8rem; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; padding: 3rem 1.4rem 2rem; border-radius: 2rem; background: rgba(255,255,255,.05); border: .12rem solid rgba(255,255,255,.1); text-align: center; transition: transform .3s, border-color .3s, background .3s; }
.pack:hover { transform: translateY(-.6rem); border-color: rgba(112,244,255,.7); background: rgba(112,244,255,.06); }
.pack.is-hot { background: linear-gradient(rgba(6,10,30,.85), rgba(6,10,30,.85)) padding-box, var(--grad-yellow) border-box; border: .2rem solid transparent; }
.pack__badge { position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); padding: .4rem 1.2rem; border-radius: 10rem; background: var(--grad-yellow); color: #000; font: 400 1.3rem var(--bebas); letter-spacing: .1em; white-space: nowrap; }
/* moeda P do pacote: quanto maior o pacote, maior o monte */
.pack__moeda { display: grid; place-items: end center; width: 100%; height: 11rem; margin-bottom: 1.6rem; }
.pack__moeda img { max-width: 13rem; max-height: 11rem; object-fit: contain; transition: transform .35s; }
.pack:hover .pack__moeda img { transform: translateY(-.6rem) scale(1.06); }
.pack b { font: 400 4.4rem/1 var(--bebas); }
.pack small { display: block; margin-top: .2rem; font: 400 1.3rem var(--bebas); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
/* selo de bônus: só a porcentagem, com a moeda P ao lado */
.pack em, .pack__bonus {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.2rem; padding: .7rem 1.8rem .7rem 1rem; border-radius: 10rem;
  background: linear-gradient(135deg, rgba(220,238,75,.22), rgba(112,244,255,.14));
  border: .1rem solid rgba(220,238,75,.35);
  color: var(--lime); font: 400 2.8rem/1 var(--bebas); font-style: normal; letter-spacing: .04em;
}
.pack em::before, .pack__bonus::before {
  content: ""; width: 2.6rem; height: 2.6rem; flex: none;
  background: url("assets/img/coins/pcoin-clean.svg?v=2") center / contain no-repeat;
}
.pack em.is-none { visibility: hidden; }
.pack .btn { width: 100%; margin-top: 1.6rem; padding: 1.1rem 1rem; }

/* modal genérico das ações da conta */
.pmodal { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.pmodal[hidden] { display: none; }
.pmodal__bd { position: absolute; inset: 0; background: rgba(8,10,24,.75); backdrop-filter: blur(6px); }
.pmodal__card { position: relative; width: min(56rem, 100%); max-height: 92vh; overflow: auto; padding: 3.6rem; border-radius: 2.4rem; color: #fff; background: linear-gradient(var(--dark), var(--dark)) padding-box, var(--grad-blue) border-box; border: .3rem solid transparent; font-family: var(--montreal); }
.pmodal__close { position: absolute; top: 1.4rem; right: 1.6rem; width: 3.6rem; height: 3.6rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 2.4rem; cursor: pointer; }
.pmodal h3 { font: 400 3.6rem/1 var(--bebas); margin-bottom: .8rem; }
.pmodal p.sub { margin-bottom: 2.2rem; font-size: 1.5rem; line-height: 1.5; color: rgba(255,255,255,.7); }
.pmodal .field textarea, .pmodal .field select { width: 100%; padding: 1.3rem 1.5rem; border-radius: 1.2rem; border: .15rem solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); color: #fff; font: 400 1.6rem var(--montreal); outline: 0; resize: vertical; }
.pmodal .field select option { color: #000; }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.8rem; }
.amounts button { padding: 1.4rem 0; border-radius: 1.2rem; border: .15rem solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: #fff; font: 400 2.2rem var(--bebas); letter-spacing: .04em; cursor: pointer; transition: all .2s; }
.amounts button.is-active { background: var(--grad-yellow); color: #000; border-color: transparent; }
.ticket-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.4rem; }
.ticket { padding: 1.4rem 1.6rem; border-radius: 1.2rem; background: rgba(255,255,255,.05); font-size: 1.5rem; }
.ticket b { display: block; }
.ticket small { color: rgba(255,255,255,.55); }
.mp-note { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; font-size: 1.3rem; color: rgba(255,255,255,.55); }

/* escolha do meio de pagamento: dois cartões que pedem o clique */
.pay-title span { display: block; margin-top: .4rem; font: 400 1.4rem var(--montreal); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.55); }
.pay-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; margin-bottom: 1.8rem; }
.pay-way {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
  padding: 2.4rem 2.6rem 2.6rem; border: 0; border-radius: 2rem; overflow: hidden; isolation: isolate;
  color: #fff; text-align: left; cursor: pointer;
  transition: transform .25s, box-shadow .25s, filter .2s;
  animation: payPulso 2.6s ease-in-out infinite;
}
.pay-way--mp { background: linear-gradient(135deg, #2f8fe0, #5fb8f2); }
.pay-way--st { background: linear-gradient(135deg, #d94f7a, #ef6b62); animation-delay: -1.3s; }
/* reflexo que atravessa o cartão, para o olho perceber que é clicável */
.pay-way::after {
  content: ""; position: absolute; top: -50%; left: -60%; width: 35%; height: 200%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.35) 50%, rgba(255,255,255,0));
  transform: skewX(-20deg); animation: payBrilho 2.6s ease-in-out infinite; pointer-events: none;
}
.pay-way--st::after { animation-delay: -1.3s; }
.pay-way__head { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; width: 100%; }
.pay-way b { font: 500 2.6rem/1.1 var(--montreal); }
.pay-way__seta { position: relative; width: 3.4rem; height: 3.4rem; flex: none; border-radius: 50%; background: rgba(255,255,255,.22); transition: transform .25s, background .25s; }
.pay-way__seta::before, .pay-way__seta::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: #fff; border-radius: .2rem;
}
.pay-way__seta::before { width: 1.3rem; height: .2rem; margin: -.1rem 0 0 -.65rem; }
.pay-way__seta::after { width: .8rem; height: .8rem; margin: -.4rem 0 0 -.1rem; border: 0; border-top: .2rem solid #fff; border-right: .2rem solid #fff; background: none; transform: rotate(45deg); }
.pay-way__li { position: relative; padding-left: 2.4rem; font: 400 1.5rem/1.5 var(--montreal); color: rgba(255,255,255,.9); }
.pay-way__li::before {
  content: ""; position: absolute; left: .4rem; top: .5rem; width: .6rem; height: 1.1rem;
  border: 0; border-right: .22rem solid #fff; border-bottom: .22rem solid #fff; transform: rotate(45deg);
}
.pay-way:hover { transform: translateY(-.5rem); animation-play-state: paused; filter: brightness(1.06); }
.pay-way:hover::after { animation-play-state: paused; }
.pay-way--mp:hover { }
.pay-way--st:hover { }
.pay-way:hover .pay-way__seta { transform: translateX(.4rem); background: rgba(255,255,255,.38); }
.pay-way:disabled, .pay-way.is-indo { opacity: .75; cursor: wait; animation: none; }
.pay-way.is-indo::after { display: none; }
@keyframes payPulso {
  0%, 100% { }
  60%      { }
}
@keyframes payBrilho { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .pay-way, .pay-way::after { animation: none; } }

/* ---------- REGRAS (documento legal) ---------- */
.legal { padding: 6rem 0 9rem; }
.legal__wrap { width: min(96rem, 100% - 8rem); margin: 0 auto; color: rgba(255,255,255,.8); font: 400 1.6rem/1.75 var(--montreal); }
.legal__doc { padding-bottom: 2.6rem; margin-bottom: 3rem; border-bottom: .2rem solid rgba(252,208,92,.4); }
.legal__doc h1 { font: 400 4.6rem/1.1 var(--bebas); color: #fff; letter-spacing: .01em; }
.legal .meta { margin-top: 1.4rem; font-size: 1.5rem; color: rgba(255,255,255,.55); }
.legal .meta strong { color: rgba(255,255,255,.85); font-weight: 500; }
.legal .age {
  margin-top: 2rem; padding: 1.3rem 1.8rem; border-radius: 0 1rem 1rem 0;
  border-left: .4rem solid #f87171; background: rgba(248,113,113,.12);
  font-size: 1.55rem; font-weight: 500; color: #ffd9d9;
}
/* índice */
.legal__sumario { margin-bottom: 4rem; padding: 2.6rem 3rem; border-radius: 1.8rem; background: rgba(255,255,255,.04); border: .1rem solid rgba(255,255,255,.1); }
.legal__sumario h2 { margin-bottom: 1.4rem; font: 400 1.4rem var(--montreal); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.legal__toc { list-style: none; columns: 2; column-gap: 3rem; }
.legal__toc li { break-inside: avoid; padding: .3rem 0; font-size: 1.5rem; }
.legal__toc li.grp { margin-top: 1.2rem; font-weight: 500; }
.legal__toc li.grp:first-child { margin-top: 0; }
.legal__toc a { color: rgba(255,255,255,.72); transition: color .2s; }
.legal__toc a:hover { color: var(--lime); }
/* corpo */
.legal h2 {
  margin: 4.6rem 0 1.6rem; padding-top: 2.6rem; border-top: .1rem solid rgba(255,255,255,.1);
  font: 400 3.4rem/1.15 var(--bebas); color: #fff;
}
.legal__doc + nav + h2, .legal__sumario + h2 { border-top: 0; padding-top: 0; }
.legal h3 { margin: 2.8rem 0 1rem; font: 500 1.9rem var(--montreal); color: #fcd05c; }
.legal p { margin-bottom: 1.4rem; }
.legal ul, .legal ol { margin: 0 0 1.8rem 2.2rem; }
.legal li { margin-bottom: .7rem; }
.legal strong { color: #fff; font-weight: 500; }
.legal em { color: rgba(255,255,255,.7); }
.legal a { color: #70f5ff; text-decoration: underline; text-underline-offset: .3rem; }
.legal a:hover { color: var(--lime); }
.legal hr { margin: 4rem 0; border: 0; border-top: .1rem solid rgba(255,255,255,.1); }
.legal table { width: 100%; margin: 2rem 0 2.6rem; border-collapse: collapse; font-size: 1.5rem; }
.legal th, .legal td { padding: 1.2rem 1.4rem; text-align: left; border-bottom: .1rem solid rgba(255,255,255,.1); vertical-align: top; }
.legal th { background: rgba(255,255,255,.06); color: #fff; font-weight: 500; }
.legal tr.odd td { background: rgba(255,255,255,.02); }
.legal .citation { display: block; margin: 1.6rem 0; padding: 1.4rem 1.8rem; border-left: .3rem solid rgba(112,244,255,.5); background: rgba(112,244,255,.06); border-radius: 0 1rem 1rem 0; font-size: 1.5rem; }
.legal footer { margin-top: 5rem; padding-top: 2.4rem; border-top: .1rem solid rgba(255,255,255,.1); font-size: 1.4rem; color: rgba(255,255,255,.45); }
/* o "as regras" do aviso do checkout é clicável */
.mp-regras a { color: #70f5ff; text-decoration: underline; text-underline-offset: .3rem; }
.mp-regras a:hover { color: var(--lime); }

/* ---------- WIKI ---------- */
.dex-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.dex-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem; }
.dex { position: relative; padding: 2rem 1.6rem 1.8rem; border-radius: 2rem; background: #fff; text-align: center; cursor: pointer; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.dex::before { content: ""; position: absolute; inset: 0 0 auto; height: .6rem; background: var(--role, #0530ef); }
.dex:hover { transform: translateY(-.6rem); }
.dex img { width: 12rem; height: 12rem; margin: 0 auto; object-fit: contain; transition: transform .3s; }
.dex:hover img { transform: scale(1.1); }
.dex h3 { margin-top: .8rem; font: 500 1.6rem var(--montreal); }
.dex span { display: inline-block; margin-top: .4rem; padding: .3rem 1rem; border-radius: 10rem; background: var(--role, #0530ef); color: #fff; font: 400 1.2rem var(--bebas); letter-spacing: .1em; }
.dex-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.dex-modal[hidden] { display: none; }
.dex-modal__bd { position: absolute; inset: 0; background: rgba(8,10,24,.75); backdrop-filter: blur(6px); }
.dex-modal__card { position: relative; width: min(84rem, 100%); display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; padding: 3.6rem; border-radius: 2.4rem; background: linear-gradient(var(--dark), var(--dark)) padding-box, var(--grad-blue) border-box; border: .3rem solid transparent; color: #fff; }
.dex-modal__img { display: grid; place-items: center; background: radial-gradient(circle, rgba(112,244,255,.3), transparent 70%); }
.dex-modal__img img { width: 90%; }
.dex-modal h2 { font: 400 5.2rem/1 var(--bebas); }
.dex-modal .meta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0 2.4rem; }
.dex-modal .meta span { padding: .5rem 1.4rem; border-radius: 10rem; background: rgba(255,255,255,.1); font: 400 1.5rem var(--bebas); letter-spacing: .08em; }
.statbar { display: grid; grid-template-columns: 11rem 1fr 4rem; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; font: 400 1.5rem var(--montreal); }
.statbar .bar { background: rgba(255,255,255,.1); }
.statbar .bar i { background: var(--grad-yellow); }
.statbar b { text-align: right; font: 400 2rem var(--bebas); }
.dex-modal .close { position: absolute; top: 1.4rem; right: 1.6rem; width: 3.6rem; height: 3.6rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 2.4rem; cursor: pointer; }
.dex-modal .stars { color: var(--lime); letter-spacing: .2em; }

/* ---------- rodapé ---------- */
.site-footer { position: relative; overflow: hidden; background: #0d1330; color: #fff; padding: 8rem 0 3rem; }
.site-footer::before { content: ""; position: absolute; inset: 0; background: url("assets/img/bg/stadium-blue.jpg") center / cover; opacity: .18; }
.site-footer > * { position: relative; }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 4rem; margin-bottom: 5rem; }
.site-footer__brand img { width: 9rem; height: 9rem; object-fit: cover; }
.site-footer__brand p { margin-top: 1.4rem; max-width: 34rem; font: 300 1.5rem/1.6 var(--montreal); color: rgba(255,255,255,.7); }
.site-footer h4 { margin-bottom: 1.6rem; font: 400 2.4rem var(--bebas); letter-spacing: .06em; color: var(--lime); }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.site-footer ul a { font: 400 1.6rem var(--montreal); color: rgba(255,255,255,.8); transition: color .2s, padding-left .2s; }
.site-footer ul a:hover { color: #fff; padding-left: .6rem; }
.site-footer__baixar { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.baixar-alt { font: 400 1.5rem var(--montreal); color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: .3rem; }
.baixar-alt:hover { color: var(--lime); }
.site-footer__social { display: flex; gap: 1.2rem; margin-top: 1.8rem; }
.site-footer__social a { width: 4.4rem; height: 4.4rem; border-radius: 1.2rem; overflow: hidden; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.site-footer__social img { width: 70%; height: 70%; object-fit: contain; }
.site-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; padding-top: 2.4rem; border-top: .1rem solid rgba(255,255,255,.1); font: 400 1.4rem var(--montreal); color: rgba(255,255,255,.5); }
.site-footer__bar .stat { color: #fff; font-size: 1.6rem; }
.site-footer__bar .stat__icon { filter: invert(1); }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .page--sub .topbar { height: var(--pwu-header-white-height, 8.2rem); }
  .page--sub .topbar .header-shape--white { background-image: url("assets/m-header-vector2.svg"); }
  .page--sub .topbar .header-shape--grad { background-image: url("assets/m-header-vector1.svg"); }
  .banner { min-height: 40rem; padding: 5rem 0 8rem; }
  .banner__inner { width: calc(100% - 4rem); }
  .banner__crumb { margin-bottom: 1.4rem; font-size: 1.4rem; }
  .banner__tag { padding: .6rem 1.4rem; font-size: 1.5rem; }
  .banner__title { margin-top: 1.4rem; font-size: 5.6rem; }
  .banner__sub { margin-top: 1.6rem; padding-left: 1.4rem; font-size: 1.6rem; }
  .banner--blend { padding-bottom: 10rem; }
  .banner--blend::after { height: 12rem; }
  .banner__ball, .banner--solo .banner__ball { right: -12rem; top: -9rem; margin-top: 0; width: 34rem; height: 34rem; }
  body[data-page="minha-conta"] .banner,
  body[data-page="tickets"] .banner,
  body[data-page="seguranca"] .banner,
  body[data-page="perfil"] .banner,
  body[data-page="pagamento"] .banner { min-height: 32rem; padding: 4.5rem 0 8rem; }
  body[data-page="minha-conta"] .banner__title,
  body[data-page="tickets"] .banner__title,
  body[data-page="seguranca"] .banner__title,
  body[data-page="perfil"] .banner__title,
  body[data-page="pagamento"] .banner__title { font-size: 5rem; }
  .banner__stage, .banner__stage--duo { display: none; }
  .sec { padding: 6rem 0; }
  .wrap, .wrap--narrow { width: calc(100% - 4rem); }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-bottom: 3rem; }
  .sec__title { font-size: 4.4rem; }
  .intro, .features, .platforms, .steps, .news-grid, .article, .shop-grid, .site-footer__top { grid-template-columns: 1fr; }
  .stats-row, .dex-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid a:first-child { grid-column: span 2; grid-row: auto; }
  .news-featured { grid-template-columns: 1fr; }
  .news-featured img { min-height: 22rem; }
  .podium { grid-template-columns: 1fr; }
  .pod--1 { order: -1; }
  .rank-tools, .dex-tools { flex-direction: column; align-items: stretch; }
  .search { min-width: 0; }
  .rank-cats { grid-template-columns: 1fr 1fr; }
  .rank-team { grid-template-columns: repeat(3, 1fr); }
  .rank-card { padding: 2rem 1.6rem; }
  .rank-card__head { grid-template-columns: auto 1fr; }
  .rank-card__value { grid-column: 2; text-align: left; }
  .trophy-legend { flex-direction: column; align-items: flex-start; }
  .season { flex-direction: column; align-items: flex-start; }
  .dex-modal__card { grid-template-columns: 1fr; padding: 2.4rem; }
  .cta-band h2 { font-size: 4.6rem; }
  .cta-band__pk { display: none; }
  .aside { position: static; }
  .cart-fab { right: 1.6rem; bottom: 1.6rem; }
  .acc-card { padding: 2.8rem 2.2rem; }
  .acc-card__title { font-size: 3.6rem; }
  .acc-grid { grid-template-columns: 1fr; gap: 1rem; }
  .acc-side { flex-direction: row; justify-content: space-between; text-align: left; }
  .trainers { grid-template-columns: 1fr 1fr; }
  .packs { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .amounts { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   PÁGINA /login
   ===================================================================== */
.login-page { position: relative; min-height: calc(100vh - 10.4rem); display: flex; align-items: center; justify-content: center; padding: 6rem 2rem 8rem; overflow: hidden; background: #0d1330 url("assets/img/bg/hex-plain.png") center / 40rem repeat; }
.login-page::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(5,48,239,.45), transparent 60%), linear-gradient(180deg, rgba(13,19,48,.9), rgba(13,19,48,.97)); }
.login-page__art { position: absolute; bottom: -4rem; height: 62rem; object-fit: contain; pointer-events: none; opacity: .9; }
.login-page__art--l { left: 2rem; transform: scaleX(-1); }
.login-page__art--r { right: 2rem; }

.login-box { position: relative; z-index: 1; width: min(52rem, 100%); padding: 4rem 4rem 3.4rem; border-radius: 2.8rem; color: #fff; font-family: var(--montreal); background: linear-gradient(rgba(6,10,30,.92), rgba(6,10,30,.92)) padding-box, var(--grad-blue) border-box; border: .3rem solid transparent; }
.login-box:has(.login-form--reg:not([hidden])), .login-box:has(.recover) { width: min(78rem, 100%); }
.login-box__head { text-align: center; margin-bottom: 2.8rem; }
.login-box__head img { width: 14rem; margin: -1rem auto .6rem; object-fit: contain; }
.login-box__head h1 { font: 400 4.6rem/1 var(--bebas); }
.login-box__head p { margin-top: 1rem; font: 400 1.5rem/1.5 var(--montreal); color: rgba(255,255,255,.7); }

.login-tabs { position: relative; display: flex; margin-bottom: 2.6rem; padding: .4rem; border-radius: 1.4rem; background: rgba(255,255,255,.07); }
.login-tab { flex: 1; position: relative; z-index: 1; padding: 1.2rem; border: 0; background: none; color: rgba(255,255,255,.7); font: 400 2.1rem/1 var(--bebas); letter-spacing: .05em; cursor: pointer; transition: color .25s; }
.login-tab.is-active { color: #000; }
.login-tabs__ink { position: absolute; top: .4rem; left: .4rem; width: calc(50% - .4rem); height: calc(100% - .8rem); border-radius: 1.1rem; background: var(--grad-yellow); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.login-form[hidden] { display: none; }
.login-form .auth__submit { margin-top: .6rem; }

/* ---- cadastro e recuperação em duas colunas no desktop ---- */
.login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; }
.login-grid > .field, .login-grid__pw { min-width: 0; }
.login-grid__pw .field { margin-bottom: .8rem; }
.login-dicas { list-style: none; align-self: start; margin-bottom: 1.6rem; padding: 1.4rem 1.6rem; border-radius: 1.2rem; background: rgba(255,255,255,.04); border: .1rem solid rgba(255,255,255,.08); }
.login-dicas li { position: relative; padding-left: 1.8rem; font: 400 1.35rem/1.7 var(--montreal); color: rgba(255,255,255,.6); }
.login-dicas li::before { content: ""; position: absolute; left: 0; top: 1rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--lime); opacity: .7; }

/* termos e "esqueci minha senha" na mesma linha */
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
.login-row .check { margin-bottom: 0; }
.login-forgot { flex: none; font: 400 1.4rem var(--montreal); color: #70f5ff; text-decoration: underline; text-underline-offset: .3rem; }
.login-forgot:hover { color: var(--lime); }

/* ---- recuperar acesso ---- */
.is-oculto { display: none !important; }
.recover__head { text-align: center; margin-bottom: 2rem; }
.recover__head h2 { font: 400 3.6rem/1 var(--bebas); }
.recover__head p { margin-top: .8rem; font: 400 1.5rem/1.5 var(--montreal); color: rgba(255,255,255,.7); }
.recover__steps { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-bottom: 2.4rem; }
.recover__steps b { padding: .6rem 1.4rem; border-radius: 10rem; background: rgba(255,255,255,.06); font: 400 1.35rem var(--montreal); color: rgba(255,255,255,.5); transition: background .25s, color .25s; }
.recover__steps b.is-on { background: var(--grad-yellow); color: #000; }
.recover__steps i { width: 2.4rem; height: .1rem; background: rgba(255,255,255,.2); }
.recover .auth__switch { margin-top: 1.4rem; }

.login-perks { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-top: 2.8rem; padding-top: 2.4rem; border-top: .1rem solid rgba(255,255,255,.1); }
.login-perks li { display: flex; align-items: center; gap: 1.2rem; font: 400 1.5rem var(--montreal); color: rgba(255,255,255,.72); }
.login-perks b { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; flex: none; border-radius: 50%; background: rgba(112,244,255,.15); color: #70f5ff; font: 400 1.6rem var(--bebas); }

@media (max-width: 900px) {
  .login-page { padding: 4rem 1.6rem 6rem; min-height: 0; }
  .login-page__art { display: none; }
  .login-box { padding: 3rem 2.2rem 2.6rem; }
  .login-grid { grid-template-columns: 1fr; gap: 0; }
  .legal__wrap { width: calc(100% - 4rem); font-size: 1.55rem; }
  .legal__doc h1 { font-size: 3.4rem; }
  .legal__toc { columns: 1; }
  .legal__sumario { padding: 2rem 1.8rem; }
  .legal h2 { font-size: 2.8rem; margin-top: 3.4rem; }
  .legal table { font-size: 1.35rem; }
  .legal th, .legal td { padding: .9rem 1rem; }
  .pay-ways { grid-template-columns: 1fr; gap: 1.4rem; }
  .pay-way { padding: 2rem 2.2rem 2.2rem; }
  .pay-way b { font-size: 2.2rem; }
  .login-dicas { display: none; }
  .login-row { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .login-box__head h1 { font-size: 3.6rem; }
}

/* aviso de recurso que depende do banco do jogo */
.db-note { margin-top: 2rem; padding: 1.6rem 2rem; border-radius: 1.4rem; background: rgba(252,208,92,.12); border: .1rem solid rgba(252,208,92,.45); color: #ffe08a; font: 400 1.5rem/1.5 var(--montreal); }

/* =====================================================================
   PÁGINA /doar
   ===================================================================== */
/* na página de doar o banner encosta direto nos pacotes: mesma cor de fundo */
body[data-page="doar"] #pacotes { background-color: #0d1330; padding-top: 3rem; }
body[data-page="doar"] #pacotes::before { background: linear-gradient(180deg, rgba(13,19,48,.92), rgba(13,19,48,.97)); }
.doar-sec { background: #0d1330 url("assets/img/bg/hex-plain.png") center / 40rem repeat; color: #fff; }
.doar-sec::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,19,48,.92), rgba(13,19,48,.97)); pointer-events: none; }
.doar-sec > * { position: relative; }
.doar-intro { text-align: center; margin-bottom: 4rem; }
.doar-intro .sec__sub { margin: 1.4rem auto 0; color: rgba(255,255,255,.75); }

.bonus-table { border-radius: 2rem; overflow: hidden; background: linear-gradient(rgba(6,10,30,.7), rgba(6,10,30,.7)) padding-box, var(--grad-blue) border-box; border: .2rem solid transparent; }
.bonus-table table { width: 100%; border-collapse: collapse; }
.bonus-table th { padding: 1.8rem 2.4rem; text-align: left; font: 400 1.7rem var(--bebas); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); border-bottom: .1rem solid rgba(255,255,255,.1); }
.bonus-table td { padding: 1.8rem 2.4rem; font: 400 1.8rem var(--montreal); border-bottom: .1rem solid rgba(255,255,255,.06); }
.bonus-table tr:last-child td { border-bottom: 0; }
.bonus-table tbody tr { transition: background .2s; }
.bonus-table tbody tr:hover { background: rgba(112,244,255,.07); }
.bonus-table .val { font: 400 2.6rem var(--bebas); }
.bonus-table .base { font: 400 2rem var(--montreal); color: rgba(255,255,255,.75); }
.bonus-table .bonus { display: inline-block; padding: .4rem 1.4rem; border-radius: 10rem; background: rgba(220,238,75,.16); color: var(--lime); font: 400 1.7rem var(--bebas); letter-spacing: .08em; }
.bonus-table .bonus.is-zero { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }
.bonus-table .coins { font: 400 2.4rem var(--bebas); background: var(--grad-yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bonus-table td:last-child { text-align: right; }

.doar-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 3.6rem; }
.doar-card { padding: 2.8rem; border-radius: 2rem; background: rgba(255,255,255,.05); border: .1rem solid rgba(255,255,255,.1); }
.doar-card h3 { font: 400 2.8rem/1 var(--bebas); margin-bottom: 1.6rem; }
.doar-card ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.doar-card li { position: relative; padding-left: 2rem; font: 400 1.6rem/1.45 var(--montreal); color: rgba(255,255,255,.75); }
.doar-card li::before { content: ""; position: absolute; left: 0; top: .7rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--lime); }

/* pacotes na versão clara (página doar) */
.packs--light .pack { background: #fff; border-color: rgba(0,0,0,.08); }
.packs--light .pack b { color: #000; }
.packs--light .pack small { color: rgba(0,0,0,.5); }
.packs--light .pack:hover { background: #fff; border-color: #0530ef; }
.packs--light .pack.is-hot { background: linear-gradient(#fff, #fff) padding-box, var(--grad-yellow) border-box; }

@media (max-width: 900px) {
  .doar-cards { grid-template-columns: 1fr; }
  .bonus-table th:nth-child(2), .bonus-table td:nth-child(2) { display: none; }
  .bonus-table th, .bonus-table td { padding: 1.4rem 1.6rem; }
}

/* foto de perfil na conta */
.acc-top { display: flex; align-items: center; gap: 2.4rem; }
.acc-avatar { position: relative; flex: none; width: 11rem; height: 11rem; }
.acc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.08); border: .3rem solid transparent; background-image: linear-gradient(rgba(6,10,30,1), rgba(6,10,30,1)), var(--grad-blue); background-origin: border-box; background-clip: content-box, border-box; }
.acc-avatar__edit { position: absolute; left: 50%; bottom: -1rem; transform: translateX(-50%); padding: .5rem 1.2rem; border: 0; border-radius: 10rem; background: var(--grad-yellow); color: #000; font: 400 1.3rem var(--bebas); letter-spacing: .08em; white-space: nowrap; cursor: pointer; }
.acc-avatar__edit:hover { filter: brightness(1.08); }
.avatar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.8rem; max-height: 32rem; overflow: auto; }
.avatar-grid button { padding: .8rem; border: .15rem solid rgba(255,255,255,.12); border-radius: 1.2rem; background: rgba(255,255,255,.05); cursor: pointer; transition: all .2s; }
.avatar-grid button:hover { border-color: #70f5ff; background: rgba(112,244,255,.1); }
.avatar-grid button.is-active { border-color: var(--lime); background: rgba(220,238,75,.12); }
.avatar-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; }
@media (max-width: 900px) {
  .acc-top { flex-direction: column; align-items: flex-start; gap: 1.8rem; }
  .avatar-grid { grid-template-columns: repeat(4, 1fr); }
}

/* páginas internas da conta (tickets, segurança, perfil, pagamento) */
.voltar { display: inline-block; margin-bottom: 2rem; font: 400 1.6rem var(--montreal); color: rgba(255,255,255,.7); }
.voltar:hover { color: #fff; }
.acc-card__sub { margin-top: 1rem; }
.devices { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 2.4rem; }
.device { display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: center; gap: 1.6rem; padding: 1.6rem 2rem; border-radius: 1.4rem; background: rgba(255,255,255,.05); border: .1rem solid rgba(255,255,255,.1); }
.device.is-current { background: linear-gradient(rgba(6,10,30,.7), rgba(6,10,30,.7)) padding-box, var(--grad-blue) border-box; border: .2rem solid transparent; }
.device__ico { display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border-radius: 1.2rem; background: rgba(255,255,255,.08); font-size: 2.2rem; }
.device b { display: block; font: 500 1.8rem var(--montreal); }
.device small { display: block; margin-top: .2rem; font: 400 1.4rem var(--montreal); color: rgba(255,255,255,.55); }
.device .tag-atual { padding: .4rem 1.2rem; border-radius: 10rem; background: var(--lime); color: #000; font: 400 1.3rem var(--bebas); letter-spacing: .1em; }
.device button { padding: .8rem 1.6rem; border: .12rem solid rgba(255,107,74,.5); border-radius: 10rem; background: transparent; color: #ff8d78; font: 400 1.5rem var(--bebas); letter-spacing: .06em; cursor: pointer; }
.device button:hover { background: rgba(255,107,74,.15); }
.avatar-grid--page { grid-template-columns: repeat(8, 1fr); max-height: none; margin-bottom: 2.6rem; }
.resumo { display: flex; align-items: center; gap: 2.4rem; padding: 2.4rem; border-radius: 1.6rem; background: rgba(255,255,255,.05); margin: 2.4rem 0; }
.resumo__coins { font: 400 5rem/1 var(--bebas); background: var(--grad-yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.resumo__info b { display: block; font: 500 2rem var(--montreal); }
.resumo__info small { font: 400 1.5rem var(--montreal); color: rgba(255,255,255,.6); }
.resumo__preco { margin-left: auto; font: 400 3.6rem var(--bebas); }
.pay-title { font: 400 2.8rem var(--bebas); margin-bottom: 1.6rem; }
.device-code { max-width: 46rem; margin: 2.4rem auto 0; text-align: center; }
.device-code input { width: 100%; padding: 1.8rem; border-radius: 1.4rem; border: .15rem solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); color: #fff; font: 400 3.6rem/1 var(--bebas); letter-spacing: 1.2rem; text-align: center; outline: 0; }
.device-code input:focus { border-color: #70f5ff; }
@media (max-width: 900px) {
  .avatar-grid--page { grid-template-columns: repeat(4, 1fr); }
  .resumo { flex-wrap: wrap; gap: 1.2rem; }
  .resumo__preco { margin-left: 0; }
  .device { grid-template-columns: 4.6rem 1fr; }
  .device > :last-child { grid-column: 2; }
}

/* =====================================================================
   Banner que emenda na seção escura (sem a faixa branca)
   ===================================================================== */
.banner--blend { background-position: center 35%; padding-bottom: 14rem; }
.banner--blend::before {
  background:
    radial-gradient(120rem 60rem at 16% 45%, rgba(5,48,239,.5), transparent 70%),
    linear-gradient(100deg, rgba(8,11,30,.94) 0%, rgba(8,11,30,.78) 42%, rgba(8,11,30,.34) 100%),
    linear-gradient(180deg, rgba(8,11,30,.7) 0%, rgba(8,11,30,0) 30%, rgba(8,11,30,.5) 80%);
}
/* a curva branca vira o degradê do fundo escuro da seção seguinte */
.banner--blend::after {
  background: linear-gradient(180deg, rgba(13,19,48,0) 0%, rgba(13,19,48,.7) 45%, #0d1330 100%);
  height: 20rem;
}
.banner--blend .banner__art {
}
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6rem); } }

/* páginas da conta: hero mais enxuta, porque o conteúdo vem logo abaixo */
body[data-page="minha-conta"] .banner,
body[data-page="tickets"] .banner,
body[data-page="seguranca"] .banner,
body[data-page="perfil"] .banner,
body[data-page="pagamento"] .banner { min-height: 30rem; padding: 4.5rem 0 8rem; }
body[data-page="minha-conta"] .banner__title,
body[data-page="tickets"] .banner__title,
body[data-page="seguranca"] .banner__title,
body[data-page="perfil"] .banner__title,
body[data-page="pagamento"] .banner__title { font-size: 6rem; }
body[data-page="minha-conta"] .banner__sub,
body[data-page="tickets"] .banner__sub,
body[data-page="seguranca"] .banner__sub,
body[data-page="perfil"] .banner__sub,
body[data-page="pagamento"] .banner__sub { margin-top: 1.4rem; font-size: 1.7rem; }
body[data-page="minha-conta"] .banner__crumb,
body[data-page="tickets"] .banner__crumb,
body[data-page="seguranca"] .banner__crumb,
body[data-page="perfil"] .banner__crumb,
body[data-page="pagamento"] .banner__crumb { margin-bottom: 1.2rem; }
body[data-page="minha-conta"] .banner__tag,
body[data-page="tickets"] .banner__tag,
body[data-page="seguranca"] .banner__tag,
body[data-page="perfil"] .banner__tag,
body[data-page="pagamento"] .banner__tag { padding: .6rem 1.4rem; font-size: 1.5rem; }
body[data-page="minha-conta"] .banner--blend::after,
body[data-page="tickets"] .banner--blend::after,
body[data-page="seguranca"] .banner--blend::after,
body[data-page="perfil"] .banner--blend::after,
body[data-page="pagamento"] .banner--blend::after { height: 12rem; }
body[data-page="minha-conta"] .banner__stage { width: 34rem; right: 6rem; }
/* doar também fica mais enxuta */
body[data-page="doar"] .banner { min-height: 40rem; padding: 5rem 0 10rem; }
body[data-page="doar"] .banner__title { font-size: 7rem; }
body[data-page="doar"] .banner--blend::after { height: 14rem; }
body[data-page="doar"] .banner__stage { width: 46rem; }

/* ---- hero sem personagem: tudo centralizado ---- */
.banner--solo .banner__inner { text-align: center; }
.banner--solo .banner__crumb { justify-content: center; }
.banner--solo .banner__sub {
  max-width: 64rem; margin-left: auto; margin-right: auto;
  padding: 1.8rem 0 0;
}
.banner--solo .banner__sub::before {
  left: 50%; top: 0; bottom: auto; width: 7rem; height: .3rem; margin-left: -3.5rem;
  background: linear-gradient(90deg, rgba(196,255,74,0), var(--lime), rgba(196,255,74,0));
}
.banner--solo .banner__selos { justify-content: center; }
/* sem arte à direita, a luz e a pokébola vão para o centro */
.banner--solo .banner__glow {
  background:
    radial-gradient(44rem 34rem at 50% 52%, rgba(74,163,255,.34), transparent 66%),
    radial-gradient(72rem 34rem at 50% 118%, rgba(5,48,239,.5), transparent 70%);
}
.banner--solo .banner__ball { left: 50%; right: auto; top: 50%; margin: -26rem 0 0 -26rem; width: 52rem; height: 52rem; opacity: .6; }

/* selos de confiança logo abaixo do título */
.banner__selos { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; margin-top: 2.2rem; }
.banner__selos span { display: inline-flex; align-items: center; gap: .7rem; font: 400 1.5rem var(--montreal); color: rgba(255,255,255,.75); }
.banner__selos i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--lime); }

/* =====================================================================
   Seção escura com textura (Escolha seu pacote)
   ===================================================================== */
.sec--textura {
  background: linear-gradient(180deg, #0d1330 0%, #080b20 45%, #05060f 100%);
  position: relative;
  overflow: hidden;
}
/* textura: padrão bem discreto por cima do fundo escuro */
.sec--textura::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/pattern-frame6.png") repeat;
  background-size: 34rem 59rem;
  opacity: .05;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* brilho azul no topo, para emendar com a seção de cima */
.sec--textura::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -18rem;
  width: 120rem;
  height: 60rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(5,48,239,.4), transparent 75%);
  pointer-events: none;
}
.sec--textura > * { position: relative; z-index: 1; }
.sec--textura .sec__title { color: #fff; }
.sec--textura .sec__sub { color: rgba(255,255,255,.7); }

/* pacotes em 3 colunas, mais largos */
.packs--3 { grid-template-columns: repeat(3, 1fr); gap: 3rem 2.6rem; }
.packs--3 .pack { padding: 4rem 2.6rem 2.6rem; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); backdrop-filter: blur(.6rem); }
.packs--3 .pack:hover { background: rgba(112,244,255,.08); transform: translateY(-.8rem); }
.packs--3 .pack__moeda { height: 20rem; margin-bottom: 1.6rem; }
.packs--3 .pack__moeda img { max-width: 24rem; max-height: 20rem; }
.packs--3 .pack b { font-size: 5rem; }
.packs--3 .pack small { font-size: 1.5rem; letter-spacing: .2em; }
.packs--3 .pack em { margin-top: 1.6rem; font-size: 3.2rem; padding: .8rem 2.2rem .8rem 1.2rem; }
.packs--3 .pack em::before { width: 3rem; height: 3rem; }
.packs--3 .pack .btn { margin-top: 2.4rem; padding: 1.4rem 1rem; font-size: 2.2rem; }
.packs--3 .pack__badge { top: -1.4rem; font-size: 1.4rem; padding: .5rem 1.6rem; }

@media (max-width: 900px) {
  .banner__selos { display: none; }
  .packs--3 { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.4rem; }
  .packs--3 .pack b { font-size: 3.6rem; }
  .packs--3 .pack__moeda { height: 9rem; }
  .packs--3 .pack__moeda img { max-width: 10rem; max-height: 9rem; }
}

/* =====================================================================
   Pagamento: resumo só com o valor + tabela de bônus em cards
   ===================================================================== */
.resumo { flex-direction: column; align-items: flex-start; gap: .6rem; }
.resumo__valor { font: 400 6.4rem/1 var(--bebas); background: var(--grad-yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.resumo__legenda { font: 400 1.6rem var(--montreal); color: rgba(255,255,255,.65); }
.mp-regras { margin-top: .8rem; font: 400 1.4rem/1.5 var(--montreal); color: rgba(255,255,255,.5); }

/* resumo: bônus grande de um lado, valor do outro */
.resumo { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.4rem; padding: 3rem 3.2rem; }
.resumo__bonus { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 16rem; padding: 2rem 2.4rem; border-radius: 1.8rem; background: linear-gradient(180deg, #5fd35f, #3fae4f); }
.resumo__bonus b { font: 400 5.2rem/1 var(--bebas); color: #06210c; }
.resumo__bonus span { margin-top: .2rem; font: 400 1.3rem var(--bebas); letter-spacing: .16em; text-transform: uppercase; color: rgba(6,33,12,.72); }
.resumo__lado { text-align: right; }
.resumo__legenda { font: 400 1.5rem var(--montreal); letter-spacing: .04em; color: rgba(255,255,255,.6); text-transform: lowercase; }

/* passo a passo do pagamento */
.passos { list-style: none; display: grid; gap: 1.4rem; margin-top: 2.4rem; counter-reset: passo; }
.passos li { display: grid; grid-template-columns: 4.4rem 1fr; align-items: start; gap: 1.6rem; padding: 1.8rem 2rem; border-radius: 1.4rem; background: rgba(255,255,255,.04); border: .1rem solid rgba(255,255,255,.08); }
.passos b { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--grad-yellow); color: #000; font: 400 2.2rem/1 var(--bebas); }
.passos strong { display: block; font: 500 1.9rem var(--montreal); }
.passos span { display: block; margin-top: .4rem; font: 400 1.6rem/1.45 var(--montreal); color: rgba(255,255,255,.65); }

@media (max-width: 900px) {
  .resumo { flex-direction: column; align-items: stretch; text-align: center; gap: 1.8rem; }
  .resumo__lado { text-align: center; }
  .resumo__valor { font-size: 4.8rem; }
}

/* =====================================================================
   /Donate: cabeçalho mínimo e os 6 pacotes na primeira tela
   ===================================================================== */
.banner--mini { min-height: 0 !important; padding: 3.6rem 0 2.4rem !important; }
.banner--mini .banner__title { margin-top: 0; font-size: 7.2rem !important; text-align: center; }
.banner--mini .banner__ball { display: none; }
.banner--mini.banner--blend::after { height: 6rem !important; }
body[data-page="doar"] #pacotes.doar-packs-sec { padding: 1.6rem 0 6rem; }
.packs--6 { margin-top: 0; }
@media (min-width: 1101px) {
  .packs--6 { grid-template-columns: repeat(6, 1fr); gap: 1.6rem; }
  .packs--6 .pack { padding: 2.8rem 1.4rem 1.8rem; }
  .packs--6 .pack__moeda { height: 13rem; margin-bottom: 1.2rem; }
  .packs--6 .pack__moeda img { max-width: 100%; max-height: 13rem; }
  .packs--6 .pack b { font-size: 4.6rem; }
  .packs--6 .pack em { font-size: 2.6rem; margin-top: 1.2rem; padding: .6rem 1.6rem .6rem 1rem; }
  .packs--6 .pack em::before { width: 2.4rem; height: 2.4rem; }
  .packs--6 .pack .btn { margin-top: 1.8rem; width: 100%; padding: 1.2rem .6rem; font-size: 2rem; }
}

/* moeda do pacote: a arte nunca é recortada pelo card */
.pack__moeda { overflow: visible; }
.pack__moeda img { width: auto; height: auto; object-fit: contain; }

/* ---------- cupom no pagamento ---------- */
.cupom { margin: 1.4rem 0 2.4rem; }
.cupom label { display: block; margin-bottom: .8rem; font: 400 1.9rem var(--bebas); letter-spacing: .12em; color: #fcd05c; }
.cupom__linha { display: flex; gap: 1rem; }
.cupom__linha input {
  flex: 1; min-width: 0; padding: 1.3rem 1.6rem; border-radius: 1.2rem;
  border: .15rem dashed rgba(252,208,92,.45); background: rgba(0,0,0,.25);
  color: #fff; font: 400 1.7rem var(--montreal); letter-spacing: .08em; text-transform: uppercase; outline: 0;
}
.cupom__linha input::placeholder { text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.35); }
.cupom__linha input:focus { border-style: solid; border-color: #fcd05c; }
.cupom__linha button { flex: none; padding: 0 2.4rem; border: 0; border-radius: 1.2rem; background: var(--grad-yellow); color: #000; font: 400 2rem var(--bebas); letter-spacing: .06em; cursor: pointer; }
.cupom__linha button:disabled { opacity: .6; cursor: wait; }
.cupom__msg { margin-top: .8rem; font: 400 1.4rem var(--montreal); color: #ff9c9c; }
.cupom__msg.is-ok { color: var(--lime); }
.resumo__de { font: 400 2.4rem/1 var(--bebas); color: rgba(255,255,255,.45); text-decoration: line-through; }
.resumo__legenda b { text-transform: uppercase; color: var(--lime); font-weight: 500; }

/* ---------- verificação em duas etapas ---------- */
.doisfa { margin: .6rem 0 1.6rem; padding: 1.6rem 1.8rem; border-radius: 1.4rem; background: rgba(112,244,255,.06); border: .1rem solid rgba(112,244,255,.2); }
.doisfa__titulo { font: 400 1.9rem var(--bebas); letter-spacing: .08em; color: #fff; }
.doisfa__titulo em, .doisfa__op em { margin-left: .6rem; padding: .2rem .8rem; border-radius: 10rem; background: rgba(255,255,255,.1); font: 400 1.2rem var(--montreal); font-style: normal; letter-spacing: .04em; color: rgba(255,255,255,.7); vertical-align: middle; }
.doisfa__op em.ok { background: rgba(220,238,75,.18); color: var(--lime); }
.doisfa__texto { margin: .6rem 0 1.2rem; font: 400 1.4rem/1.5 var(--montreal); color: rgba(255,255,255,.7); }
.doisfa__texto b { color: #fff; font-weight: 500; }
.doisfa__opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.doisfa__op { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.4rem; border-radius: 1.2rem; background: rgba(0,0,0,.22); border: .1rem solid rgba(255,255,255,.08); }
.doisfa__op i { flex: none; font-style: normal; font-size: 2rem; line-height: 1.2; }
.doisfa__op b { display: block; font: 500 1.5rem var(--montreal); color: #fff; }
.doisfa__op span { display: block; margin-top: .3rem; font: 400 1.3rem/1.45 var(--montreal); color: rgba(255,255,255,.62); }
.doisfa__op.is-on { border-color: rgba(220,238,75,.35); }
.doisfa__opcoes--conta { margin-top: 2rem; }

/* ---------- download: só PC ---------- */
.platforms--solo { grid-template-columns: minmax(0, 64rem); justify-content: center; }

/* ---------- ranking: time sem sprites ---------- */
.slot__ini { display: grid; place-items: center; width: 6rem; height: 6rem; margin: 0 auto .6rem; border-radius: 50%; background: linear-gradient(145deg, rgba(112,244,255,.25), rgba(5,48,239,.35)); font: 400 3rem/1 var(--bebas); color: #fff; }
.slot--empty .slot__ini { background: rgba(255,255,255,.06); color: rgba(255,255,255,.3); }

@media (max-width: 900px) {
  .banner--mini { padding: 3rem 0 2rem !important; }
  .banner--mini .banner__title { font-size: 4.8rem !important; }
  .doisfa__opcoes { grid-template-columns: 1fr; }
  .cupom__linha button { padding: 0 1.6rem; }
  .slot__ini { width: 4.4rem; height: 4.4rem; font-size: 2.2rem; }
}

@media (max-width: 1100px) {
  .packs--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .packs--6 .pack { min-width: 0; }
}
@media (max-width: 900px) {
  .packs--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
  .packs--6 .pack { padding: 2.6rem 1rem 1.6rem; }
  .packs--6 .pack__moeda { height: 9rem; }
  .packs--6 .pack__moeda img { max-width: 100%; max-height: 9rem; }
  .packs--6 .pack em { font-size: 2.2rem; padding: .5rem 1.2rem .5rem .7rem; }
  .packs--6 .pack em::before { width: 2.2rem; height: 2.2rem; }
  .packs--6 .pack .btn { width: 100%; padding: 1.1rem .4rem; font-size: 1.9rem; }
}

/* =====================================================================
   Login mais largo (a caixa ficava espremida no desktop)
   ===================================================================== */
.login-box { width: min(76rem, 100%); padding: 4.6rem 6rem 4rem; }
.login-box:has(.login-form--reg:not([hidden])), .login-box:has(.recover) { width: min(104rem, 100%); }
@media (max-width: 900px) { .login-box { padding: 3rem 2.2rem 2.6rem; } }

/* ranking: o troféu sozinho, à direita */
body[data-page="ranking"] .banner__stage { width: 50rem; right: 8rem; }
body[data-page="ranking"] .banner__art { height: 82%; animation-duration: 5s; }

/* =====================================================================
   /Donate: cabeçalho pequeno + pacotes com vida
   ===================================================================== */
body[data-page="doar"] .banner { min-height: 0; padding: 3.2rem 0 7rem; }
body[data-page="doar"] .banner__title { font-size: 6.4rem; margin-top: 1.2rem; }
body[data-page="doar"] .banner__crumb { margin-bottom: 1rem; }
body[data-page="doar"] .banner--blend::after { height: 8rem; }
body[data-page="doar"] .banner__ball { width: 40rem; height: 40rem; margin: -20rem 0 0 -20rem; }
body[data-page="doar"] #pacotes.doar-packs-sec { padding: .6rem 0 7rem; overflow: hidden; }

.doar-topo { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2.4rem; }
.doar-topo__oi { font: 400 1.8rem var(--montreal); color: rgba(255,255,255,.7); }
.doar-topo__oi b { color: #fff; font-weight: 500; }
.doar-topo__saldo { display: inline-flex; align-items: center; gap: 1rem; padding: .7rem 2rem .7rem .9rem; border-radius: 10rem; background: rgba(255,255,255,.06); border: .1rem solid rgba(252,208,92,.35); font: 400 1.5rem var(--montreal); color: rgba(255,255,255,.7); }
.doar-topo__saldo[hidden] { display: none; }
.doar-topo__saldo img { width: 3rem; height: 3rem; object-fit: contain; }
.doar-topo__saldo b { font: 400 2.6rem/1 var(--bebas); color: #fcd05c; }

/* cartão que inclina com o mouse e tem um foco de luz que segue o cursor */
.packs--6 { perspective: 140rem; }
.packs--6 .pack {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transform-style: preserve-3d; will-change: transform;
  transition: transform .18s ease-out, border-color .3s, background .3s, box-shadow .3s;
}
.packs--6 .pack:hover { --ty: -1rem; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }
.packs--6 .pack::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 30%), rgba(252,208,92,.22), transparent 65%);
}
.packs--6 .pack:hover::before { opacity: 1; }
.packs--6 .pack.is-foco { border-color: rgba(252,208,92,.7); }
.packs--6 .pack__moeda { transform: translateZ(4rem); }
.packs--6 .pack__moeda img { animation: moedaFlutua 4s ease-in-out infinite; }
.packs--6 .pack:nth-child(2n) .pack__moeda img { animation-delay: -1.3s; }
.packs--6 .pack:nth-child(3n) .pack__moeda img { animation-delay: -2.4s; }
.packs--6 .pack.is-foco .pack__moeda img { }
.packs--6 .pack .btn { position: relative; overflow: hidden; transform: translateZ(2rem); }
.packs--6 .pack .btn::after { content: ""; position: absolute; top: -50%; left: -70%; width: 40%; height: 200%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-20deg); pointer-events: none; }
.packs--6 .pack:hover .btn::after, .packs--6 .pack.is-foco .btn::after { animation: payBrilho 1.8s ease-in-out infinite; }
@keyframes moedaFlutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.8rem; } }

/* medidor de bônus: a moeda corre até o pacote em foco */
.bonus-meter { --pos: 0%; position: relative; margin: 5rem 0 0; padding-bottom: 6rem; }
.bonus-meter__trilho { position: relative; height: 1rem; border-radius: 1rem; background: rgba(255,255,255,.08); }
.bonus-meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--pos); border-radius: inherit; background: linear-gradient(90deg, #dcee4b, #fcd05c 60%, #e6a03c); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.bonus-meter__moeda { position: absolute; top: 50%; left: var(--pos); width: 4.4rem; height: 4.4rem; margin: -2.2rem 0 0 -2.2rem; object-fit: contain; transition: left .55s cubic-bezier(.2,.8,.2,1), rotate .55s; }
.bonus-meter.is-on .bonus-meter__moeda { rotate: 360deg; }
.bonus-meter__pontos span { position: absolute; top: 2.6rem; transform: translateX(-50%); text-align: center; color: rgba(255,255,255,.4); transition: color .3s, scale .3s; }
.bonus-meter__pontos span::before { content: ""; position: absolute; left: 50%; top: -2.2rem; width: .2rem; height: 1rem; margin-left: -.1rem; background: currentColor; opacity: .6; }
.bonus-meter__pontos b { display: block; font: 400 2.2rem/1 var(--bebas); letter-spacing: .04em; }
.bonus-meter__pontos small { display: block; margin-top: .3rem; font: 400 1.25rem var(--montreal); }
.bonus-meter__pontos span.is-on { color: var(--lime); scale: 1.25; }

/* moedas subindo devagar ao fundo */
.doar-moedas { position: absolute; inset: 0; z-index: 0 !important; overflow: hidden; pointer-events: none; }
.doar-moedas i { position: absolute; bottom: -6rem; width: var(--s); height: var(--s); background: url("assets/img/coins/pcoin-clean.svg?v=2") center / contain no-repeat; opacity: 0; animation: moedaSobe var(--d) linear infinite; animation-delay: var(--a); }
@keyframes moedaSobe { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .22; } 85% { opacity: .18; } 100% { transform: translateY(-80rem) rotate(260deg); opacity: 0; } }

@media (max-width: 1100px) { .bonus-meter { display: none; } .packs--6 .pack { transform: none; } }
@media (max-width: 900px) {
  body[data-page="doar"] .banner { padding: 2.6rem 0 5rem; }
  body[data-page="doar"] .banner__title { font-size: 4.4rem !important; }
  .doar-topo { flex-wrap: wrap; margin-bottom: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { .packs--6 .pack__moeda img, .doar-moedas i { animation: none; } }


/* =====================================================================
   Login: caixa mais larga, botão maior, sem a lista 1-2-3
   ===================================================================== */
.login-box { width: min(92rem, 100%); padding: 4.6rem 7rem 4.4rem; }
.login-box:has(.login-form--reg:not([hidden])), .login-box:has(.recover) { width: min(112rem, 100%); }
.login-form .auth__submit { margin-top: 1.2rem; padding: 2rem; font-size: 2.8rem; letter-spacing: .06em; }
.login-form[data-lform="login"] .auth__switch { margin-top: 1.8rem; font-size: 1.6rem; }
@media (max-width: 900px) { .login-box { padding: 3rem 2.2rem 2.6rem; } .login-form .auth__submit { padding: 1.6rem; font-size: 2.3rem; } }

/* =====================================================================
   Pagamento: cabeçalho enxuto para Mercado Pago e Stripe aparecerem sem rolar
   ===================================================================== */
body[data-page="pagamento"] .banner { min-height: 0 !important; padding: 2.4rem 0 5.2rem !important; }
body[data-page="pagamento"] .banner__title { font-size: 4.6rem !important; margin-top: .6rem; }
body[data-page="pagamento"] .banner__sub { display: none; }
body[data-page="pagamento"] .banner__crumb { margin-bottom: .4rem; }
body[data-page="pagamento"] .banner--blend::after { height: 5rem !important; }
body[data-page="pagamento"] .banner__ball { display: none; }
body[data-page="pagamento"] .acc-sec { padding-top: 1.2rem; }
body[data-page="pagamento"] .acc-card--pedido { padding-top: 2.4rem; }
.pedido-topo { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }
.pedido-topo .acc-card__title { margin: 0; }
.pedido-topo .voltar { margin: 0; }
body[data-page="pagamento"] .resumo { padding: 1.6rem 2rem; margin-bottom: 1.6rem; }
body[data-page="pagamento"] .resumo__bonus { padding: 1rem 1.6rem; }
body[data-page="pagamento"] .resumo__bonus b { font-size: 3.6rem; }
body[data-page="pagamento"] .resumo__valor { font-size: 4.8rem; }
body[data-page="pagamento"] .cupom { margin: 1rem 0 1.6rem; }
body[data-page="pagamento"] .cupom label { margin-bottom: .5rem; }
body[data-page="pagamento"] .cupom__linha input, body[data-page="pagamento"] .cupom__linha button { padding-top: 1rem; padding-bottom: 1rem; }
body[data-page="pagamento"] .pay-title { margin-bottom: .8rem; }
body[data-page="pagamento"] .pay-way { padding: 1.8rem 2.2rem 2rem; }
@media (max-width: 900px) { body[data-page="pagamento"] .banner { padding: 2rem 0 4.6rem !important; } .pedido-topo { flex-wrap: wrap; } }

/* ---------- doação com valor livre ---------- */
.valor-livre { margin: 0 0 2.4rem; padding: 2rem 2.4rem; border-radius: 1.8rem; background: rgba(255,255,255,.04); border: .1rem solid rgba(252,208,92,.25); }
.valor-livre label { display: block; margin-bottom: .8rem; font: 400 1.9rem var(--bebas); letter-spacing: .12em; color: #fcd05c; }
.valor-livre__linha { display: flex; align-items: stretch; gap: 1rem; }
.valor-livre__moeda { display: grid; place-items: center; padding: 0 1.6rem; border-radius: 1.2rem; background: rgba(0,0,0,.25); border: .15rem solid rgba(255,255,255,.12); font: 400 2.2rem var(--bebas); color: rgba(255,255,255,.7); }
.valor-livre__linha input { flex: 1; min-width: 0; padding: 1.3rem 1.6rem; border-radius: 1.2rem; border: .15rem dashed rgba(252,208,92,.45); background: rgba(0,0,0,.25); color: #fff; font: 400 2rem var(--montreal); outline: 0; }
.valor-livre__linha input::placeholder { font-size: 1.6rem; color: rgba(255,255,255,.35); }
.valor-livre__linha input:focus { border-style: solid; border-color: #fcd05c; }
.valor-livre.is-erro input { border-color: #ff9c9c; }
.valor-livre__linha button { flex: none; padding: 0 3.2rem; border: 0; border-radius: 1.2rem; background: var(--grad-yellow); color: #000; font: 400 2.2rem var(--bebas); letter-spacing: .06em; cursor: pointer; transition: filter .2s, transform .2s; }
.valor-livre__linha button:hover { filter: brightness(1.08); transform: translateY(-.2rem); }
.valor-livre__dica { margin-top: .9rem; font: 400 1.45rem var(--montreal); color: rgba(255,255,255,.6); min-height: 1.8rem; }
.valor-livre__dica b { color: var(--lime); font-weight: 500; }
.valor-livre.is-erro .valor-livre__dica { color: #ff9c9c; }
@media (max-width: 900px) {
  .valor-livre { padding: 1.6rem 1.6rem; }
  .valor-livre__linha { flex-wrap: wrap; }
  .valor-livre__linha input { flex: 1 1 0; }
  .valor-livre__moeda { padding: 0 1.2rem; }
  .valor-livre__linha button { flex: 1 1 100%; padding: 1.2rem; }
}

/* ícones dentro dos blocos que usavam emoji */
.search .ico { width: 1.8rem; height: 1.8rem; opacity: .6; }
.mp-note .ico { width: 1.5rem; height: 1.5rem; opacity: .8; }
.cart-fab .ico { width: 2rem; height: 2rem; }
.doisfa__ico { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 1rem; background: rgba(112,244,255,.14); color: #70f5ff; }
.doisfa__ico .ico { width: 1.9rem; height: 1.9rem; }
.device__ico .ico { width: 2.2rem; height: 2.2rem; }

/* faixa "Pronto para..." : personagens inteiros, apoiados no chão, sem cortar */
.cta-band { padding: 9rem 0; }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band__pk { bottom: 0; width: auto; height: 26rem; max-width: 22rem; object-fit: contain; object-position: bottom; opacity: 1; }
.cta-band__pk--l { left: 4rem; } .cta-band__pk--r { right: 4rem; }
@media (max-width: 1300px) { .cta-band__pk { height: 20rem; } }

/* =====================================================================
   Download: seção do launcher (só PC)
   ===================================================================== */
.launcher-sec { padding-bottom: 10rem; }
.launcher { display: grid; grid-template-columns: 1.05fr .95fr; gap: 6rem; align-items: center; }
.launcher__tag { display: inline-flex; align-items: center; gap: .8rem; padding: .7rem 1.6rem; border-radius: 10rem; background: rgba(5,48,239,.08); color: #0530ef; font: 500 1.4rem var(--montreal); letter-spacing: .04em; }
.launcher__tag .ico { width: 1.6rem; height: 1.6rem; }
.launcher__texto .sec__title { margin-top: 1.6rem; }
.launcher__desc { margin-top: 1.6rem; max-width: 56rem; font: 400 1.8rem/1.6 var(--montreal); color: rgba(0,0,0,.65); }
.launcher__lista { list-style: none; margin-top: 2.6rem; display: grid; gap: 1.2rem; }
.launcher__lista li { display: flex; gap: 1.4rem; align-items: flex-start; }
.launcher__lista > li > .ico { width: 2.6rem; height: 2.6rem; border-radius: 50%; background-color: var(--lime); -webkit-mask: none; mask: none; position: relative; }
.launcher__lista > li > .ico::after { content: ""; position: absolute; inset: .55rem; background: #000; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.launcher__lista b { display: block; font: 500 1.7rem var(--montreal); color: #111; }
.launcher__lista span { display: block; margin-top: .2rem; font: 400 1.45rem/1.5 var(--montreal); color: rgba(0,0,0,.55); }
.launcher__acoes { display: flex; align-items: center; gap: 2rem; margin-top: 3.4rem; flex-wrap: wrap; }
.btn--lg { padding: 1.8rem 4.2rem; font-size: 2.6rem; gap: 1.2rem; }
.btn--lg .ico { width: 2.2rem; height: 2.2rem; }
.launcher__versao { font: 400 1.5rem var(--montreal); color: rgba(0,0,0,.5); }
.launcher__janela { position: relative; border-radius: 2rem; overflow: hidden; background: #0d1330; border: .1rem solid rgba(0,0,0,.08); }
.launcher__barra { display: flex; align-items: center; gap: .8rem; padding: 1.2rem 1.6rem; background: #0a0f2b; color: rgba(255,255,255,.6); font: 400 1.35rem var(--montreal); }
.launcher__barra i { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #ff5f57; }
.launcher__barra i:nth-child(2) { background: #febc2e; } .launcher__barra i:nth-child(3) { background: #28c840; }
.launcher__barra span { margin-left: .8rem; }
.launcher__janela img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.launcher__status { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 2rem; background: #0a0f2b; color: #fff; font: 400 1.5rem var(--montreal); }
.launcher__status span { display: inline-flex; align-items: center; gap: .8rem; color: rgba(255,255,255,.75); }
.launcher__status b { padding: .9rem 2.8rem; border-radius: 10rem; background: var(--grad-yellow); color: #000; font: 400 1.9rem var(--bebas); letter-spacing: .06em; }
@media (max-width: 900px) {
  .launcher { grid-template-columns: 1fr; gap: 3rem; }
  .btn--lg { padding: 1.5rem 3rem; font-size: 2.2rem; }
}


/* O Jogo: dois destaques em amarelo (gerações e tempo de criação de conta) */
.stats-row { grid-template-columns: repeat(2, 1fr); }
.stat-box { padding: 3rem 3.2rem; background: #151a36; }
.stat-box b { font-size: 6rem; background: var(--grad-yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-box b i { font-style: normal; }
.stat-box span { display: block; margin-top: .6rem; font-size: 1.7rem; color: rgba(255,255,255,.8); }
.stat-box small { display: block; margin-top: 1.2rem; padding-top: 1.2rem; border-top: .1rem dashed rgba(255,255,255,.15); font: italic 400 1.4rem var(--montreal); color: rgba(255,255,255,.55); }
@media (max-width: 900px) { .stats-row { grid-template-columns: 1fr; } .stat-box b { font-size: 4.8rem; } }

/* O Jogo: banner das gerações */
.geracoes { position: relative; display: grid; grid-template-columns: 1.4fr .8fr; gap: 4rem; align-items: center; margin-top: 4rem; padding: 4.6rem 5rem; border-radius: 2.8rem; overflow: hidden; color: #fff;
  background: #0d1330 url("assets/img/qg/qg-26.jpg") center / cover no-repeat; }
.geracoes::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,11,30,.96) 0%, rgba(8,11,30,.88) 45%, rgba(8,11,30,.55) 100%); }
.geracoes::after { content: ""; position: absolute; right: -10rem; top: -12rem; width: 38rem; height: 38rem; border-radius: 50%; border: .2rem solid rgba(252,208,92,.18); }
.geracoes > * { position: relative; z-index: 1; }
.geracoes__tag { display: inline-block; padding: .5rem 1.4rem; border-radius: 10rem; background: rgba(252,208,92,.14); color: #fcd05c; font: 400 1.5rem var(--bebas); letter-spacing: .14em; text-transform: uppercase; }
.geracoes h3 { margin-top: 1.4rem; font: 400 6.2rem/.95 var(--bebas); letter-spacing: .01em; }
.geracoes h3 b { font-size: 9rem; background: var(--grad-yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.geracoes h3 i { font-style: normal; }
.geracoes p { margin-top: 1.6rem; max-width: 56rem; font: 400 1.7rem/1.55 var(--montreal); color: rgba(255,255,255,.78); }
.geracoes small { display: block; margin-top: 1.6rem; font: italic 400 1.4rem var(--montreal); color: rgba(255,255,255,.5); }
.geracoes__lado { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 3rem 2.4rem; border-radius: 2rem; background: rgba(255,255,255,.06); border: .1rem solid rgba(255,255,255,.12); text-align: center; }
.geracoes__num b { display: block; font: 400 6.4rem/1 var(--bebas); background: var(--grad-yellow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.geracoes__num b i { font-style: normal; }
.geracoes__num span { display: block; margin-top: .6rem; font: 400 1.6rem var(--montreal); color: rgba(255,255,255,.75); }
@media (max-width: 900px) {
  .geracoes { grid-template-columns: 1fr; padding: 3rem 2.2rem; gap: 2.4rem; }
  .geracoes h3 { font-size: 4.4rem; } .geracoes h3 b { font-size: 6.4rem; }
  .about__pokeball { display: none; }
}

/* ---------- autenticador por aplicativo ---------- */
.totp { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.totp__aviso { flex-basis: 100%; margin-top: .4rem; font: 400 1.4rem var(--montreal); color: #ff9c9c; }
.totp__aviso.is-ok { color: var(--lime); }
.totp__setup { flex-basis: 100%; margin-top: 1rem; padding: 1.6rem; border-radius: 1.2rem; background: rgba(0,0,0,.25); border: .1rem solid rgba(255,255,255,.1); }
.totp__setup p { margin: .6rem 0; font: 400 1.45rem/1.5 var(--montreal); color: rgba(255,255,255,.8); }
.totp__setup code { display: inline-block; padding: .3rem .8rem; border-radius: .6rem; background: rgba(255,255,255,.08); font: 500 1.5rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: #fcd05c; }
.totp__qr { width: 18rem; height: 18rem; margin: 1rem 0; padding: .8rem; border-radius: 1.2rem; background: #fff; }
.totp__qr svg { width: 100%; height: 100%; display: block; }
.totp__semqr { display: block; padding: 1rem; font: 400 1.3rem var(--montreal); color: #333; }
.totp__linha { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; }
.totp__linha input { width: 14rem; padding: 1rem 1.2rem; border-radius: 1rem; border: .15rem solid rgba(255,255,255,.15); background: rgba(0,0,0,.3); color: #fff; font: 500 2rem/1 ui-monospace, Menlo, monospace; letter-spacing: .3em; text-align: center; outline: 0; }
.totp__linha input:focus { border-color: #70f5ff; }
.doisfa__op .totp .btn { padding: .8rem 1.8rem; font-size: 1.6rem; }

/* ---------- passo obrigatório: ativar o autenticador ---------- */
.totp-step__tag { display: inline-block; padding: .5rem 1.4rem; border-radius: 10rem; background: rgba(220,238,75,.16); color: var(--lime); font: 400 1.4rem var(--bebas); letter-spacing: .12em; text-transform: uppercase; }
.totp-step__passos { list-style: none; display: grid; gap: .8rem; margin: 0 auto 2rem; max-width: 46rem; text-align: left; }
.totp-step__passos li { display: flex; gap: 1rem; align-items: flex-start; font: 400 1.45rem/1.5 var(--montreal); color: rgba(255,255,255,.8); }
.totp-step__passos li > b { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--grad-yellow); color: #000; font: 400 1.4rem var(--bebas); }
.totp-step__passos span b { color: #fff; font-weight: 500; }
.totp-step__qr { width: 19rem; height: 19rem; margin: 0 auto; padding: .8rem; border-radius: 1.4rem; background: #fff; display: grid; place-items: center; }
.totp-step__qr svg { width: 100%; height: 100%; display: block; }
.totp-step__carregando { font: 400 1.3rem var(--montreal); color: #333; text-align: center; padding: 1rem; }
.totp-step__chave { margin: 1.2rem 0 1.6rem; font: 400 1.35rem var(--montreal); color: rgba(255,255,255,.6); }
.totp-step__chave code { display: inline-block; margin-top: .4rem; padding: .3rem .8rem; border-radius: .6rem; background: rgba(255,255,255,.08); font: 500 1.4rem ui-monospace, Menlo, monospace; letter-spacing: .08em; color: #fcd05c; word-break: break-all; }

/* Dados do Pix integrados ao formulário de pagamento. */
.pay-way__label { display: flex; align-items: center; gap: 1rem; }
.pay-way__qr { width: 3.4rem; height: 3.4rem; flex: none; }
.payment-payer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 1.6rem; margin: 2.4rem 0; font-family: var(--montreal); }
.payment-payer > div, .payment-payer .cupom { min-width: 0; }
body[data-page="pagamento"] .payment-payer .cupom { margin: 0; }
body[data-page="pagamento"] .payment-payer label { display: block; margin-bottom: .8rem; font: 400 1.9rem var(--bebas); letter-spacing: .12em; color: #fcd05c; }
.payment-payer input { width: 100%; min-width: 0; height: 4.8rem; padding: 1.2rem 1.5rem; border: .15rem solid rgba(255,255,255,.25); border-radius: 1.2rem; background: rgba(0,0,0,.2); color: #fff; font: 400 1.6rem var(--montreal); }
.payment-payer input::placeholder { color: rgba(255,255,255,.4); }
.payment-payer input:focus { outline: 0; border-style: solid; border-color: #fcd05c; }
.payment-payer input[aria-invalid="true"] { border-color: #f87171; }
.payment-payer .cupom__linha { gap: .8rem; }
.payment-payer .cupom__linha button { height: 4.8rem; padding: 0 1.6rem; }
.payment-payer .payment-payer__error { grid-column: 1 / -1; font: 400 1.4rem/1.5 var(--montreal); color: #ffd9d9; }
.pay-way:focus-visible { outline: .25rem solid #fcd05c; outline-offset: .4rem; }
@media (max-width: 600px) { .payment-payer { grid-template-columns: 1fr; } }

/* Tall profile card preserves all of the selected artwork. */
body[data-page="minha-conta"] .acc-avatar { width: clamp(150px,19rem,210px); height: auto; aspect-ratio: 3 / 4; margin-bottom: 12px; }
body[data-page="minha-conta"] .acc-avatar img { border: 0; border-radius: 0; object-fit: contain; background: transparent; }
body[data-page="minha-conta"] .acc-avatar__edit { font-size: 14px; padding: 8px 17px; bottom: -12px; }

@media (max-width: 420px) { body[data-page="minha-conta"] .acc-top { align-items: flex-start; flex-wrap: wrap; } }

/* A compact identity banner keeps account information near the first fold. */
body:is([data-page="minha-conta"], [data-page="perfil"]) .banner { min-height: 0; padding: 12px 0 18px; }
body:is([data-page="minha-conta"], [data-page="perfil"]) .banner__inner { width: calc(100% - 40px); padding: 0; }
body:is([data-page="minha-conta"], [data-page="perfil"]) .banner__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; }
body:is([data-page="minha-conta"], [data-page="perfil"]) .banner__crumb { margin: 0; font-size: 12px; }
body:is([data-page="minha-conta"], [data-page="perfil"]) .banner__tag { padding: 4px 10px; font-size: 11px; }
body:is([data-page="minha-conta"], [data-page="perfil"]) .banner__title { font-size: clamp(32px,3vw,40px); line-height: 1; margin-top: 8px; }
body:is([data-page="minha-conta"], [data-page="perfil"]) .banner__sub { margin-top: 6px; padding-top: 8px; font-size: 13px; line-height: 1.4; max-width: 520px; }
body:is([data-page="minha-conta"], [data-page="perfil"]) .banner--blend::after { height: 50px; }
body:is([data-page="minha-conta"], [data-page="perfil"]) .banner__ball { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
body:is([data-page="minha-conta"], [data-page="perfil"]) .acc-sec { padding-top: 20px; }
@media (max-width: 720px) {
  body:is([data-page="minha-conta"], [data-page="perfil"]) .banner { padding: 10px 0 14px; }
  body:is([data-page="minha-conta"], [data-page="perfil"]) .banner__sub { font-size: 12px; }
  body:is([data-page="minha-conta"], [data-page="perfil"]) .acc-sec { padding-top: 18px; }
}

/* Account summary: the icon, balance and action form one aligned block. */
body[data-page="minha-conta"] .acc-side { align-self: start; flex-direction: column; gap: 12px; text-align: left; padding: 18px; border: 1px solid #75c6ef33; border-radius: 18px; background: linear-gradient(145deg,#173557cc,#081b3a99); box-shadow: inset 0 1px 0 #ffffff0c; }
body[data-page="minha-conta"] .acc-stat--moeda { justify-content: flex-start; gap: 14px; }
body[data-page="minha-conta"] .acc-stat--moeda img { width: 48px; height: 54px; }
body[data-page="minha-conta"] .acc-stat__balance { min-width: 0; flex: 1; }
body[data-page="minha-conta"] .acc-stat__balance > span { display: block; font-size: 12px; color: #bad0e7; margin-bottom: 4px; }
body[data-page="minha-conta"] .acc-stat__balance b { font-size: clamp(28px,3.4rem,36px); overflow-wrap: anywhere; }
body[data-page="minha-conta"] .acc-stat__balance b.is-unavailable { font: 400 13px/1.4 var(--montreal); color: #c1cfdf; background: none; -webkit-text-fill-color: currentColor; }
body[data-page="minha-conta"] .acc-buy-link { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 12px; border-radius: 10px; text-decoration: none; font: 400 19px var(--bebas); letter-spacing: .02em; color: #102443; background: var(--grad-yellow); }
body[data-page="minha-conta"] .acc-buy-link:hover { filter: brightness(1.08); }
body[data-page="minha-conta"] .acc-stat--plan { padding-top: 14px; border-top: 1px solid #adc8e529; }
body[data-page="minha-conta"] .acc-stat--plan span { display: block; font-size: 12px; color: #bad0e7; margin-bottom: 6px; }
body[data-page="minha-conta"] .acc-stat--plan b { font-size: 26px; line-height: 1.15; color: #f4df9f; background: none; -webkit-text-fill-color: currentColor; }


/* Keep the balance beside the identity, with account fields spanning the row below. */
body[data-page="minha-conta"] .acc-top { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(220px,26rem); align-items: center; gap: 24px; }
body[data-page="minha-conta"] .acc-top > .acc-card__title { min-width: 0; font-size: clamp(30px,3vw,48px); line-height: 1.05; }
body[data-page="minha-conta"] .acc-top > .acc-side { align-self: center; }
body[data-page="minha-conta"] .acc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 28px; }
body[data-page="minha-conta"] .acc-grid > .acc-field { min-width: 0; margin-bottom: 0; }
body[data-page="minha-conta"] .acc-field__head { gap: 10px; margin-bottom: 8px; }
body[data-page="minha-conta"] .acc-field h5 { font-size: 18px; }
body[data-page="minha-conta"] .acc-toggle { font-size: 13px; padding: 4px 12px; }
body[data-page="minha-conta"] .acc-field input { font-size: 17px; padding: 14px 16px; }
body[data-page="minha-conta"] .acc-buy-link:focus-visible { outline: 2px solid #fff3b0; outline-offset: 4px; }
@media (min-width: 701px) and (max-width: 1000px) {
  body[data-page="minha-conta"] .acc-top { grid-template-columns: auto minmax(0,1fr); gap: 16px 24px; }
  body[data-page="minha-conta"] .acc-avatar { grid-column: 1; grid-row: 1 / 3; }
  body[data-page="minha-conta"] .acc-top > .acc-card__title { grid-column: 2; grid-row: 1; align-self: end; }
  body[data-page="minha-conta"] .acc-top > .acc-side { grid-column: 2; grid-row: 2; align-self: start; }
}
@media (max-width: 700px) {
  body[data-page="minha-conta"] .acc-top { grid-template-columns: auto minmax(0,1fr); gap: 22px 18px; }
  body[data-page="minha-conta"] .acc-top > .acc-side { grid-column: 1 / -1; width: 100%; }
  body[data-page="minha-conta"] .acc-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
}
@media (max-width: 380px) {
  body[data-page="minha-conta"] .acc-top { column-gap: 12px; }
  body[data-page="minha-conta"] .acc-top > .acc-card__title { font-size: 28px; }
  body[data-page="minha-conta"] .acc-avatar { width: 132px; }
}

/* Compact account heading and Pix shown directly on the payment page. */
body:is([data-page="minha-conta"], [data-page="pagamento"]) .banner__inner { z-index: 5; }
body[data-page="minha-conta"] .banner { padding-bottom: 14px; }
body[data-page="pagamento"] .banner { padding: 14px 0 20px !important; }
body[data-page="pagamento"] .banner__title { font-size: clamp(32px,3vw,42px) !important; line-height: 1.05; }
body[data-page="pagamento"] .banner__crumb { font-size: 12px; margin-bottom: 6px; }
body[data-page="pagamento"] .banner--blend::after { height: 30px !important; }
#payment-setup[hidden], .pix-inline[hidden] { display: none; }
/* The desktop layout uses the available width; small screens keep a single column. */
#acc-packs .pack small, #doar-packs .pack small { max-width: 100%; margin-top: 5px; color: #cbd9ea; font-size: 14px; line-height: 1.2; letter-spacing: .11em; }
.pix-inline { position: relative; display: grid; grid-template-columns: 304px minmax(0,1fr); align-items: center; gap: 42px; width: min(1020px,100%); margin: 0 auto; padding: 36px 42px 36px 32px; border: 1px solid #799db055; border-radius: 24px; background: radial-gradient(ellipse at 0 0,#20485c88,transparent 62%),linear-gradient(115deg,#12304a,#091d38 68%,#0b2040); box-shadow: inset 0 1px 0 #d3ecff1a,0 20px 60px #0000002b; outline: none; }
.pix-inline::before { content: ""; position: absolute; left: 36px; right: 36px; top: -1px; height: 2px; background: linear-gradient(90deg,transparent,#ffe29a99 25%,#ffd16766 70%,transparent); pointer-events: none; }
.pix-inline__scan { display: grid; place-items: center; min-width: 0; padding: 12px; border: 1px solid #a6d4e521; border-radius: 18px; background: #03152b4d; box-shadow: inset 0 1px 12px #00000014; }
.pix-inline__qr { display: block; width: min(280px,100%); height: auto; aspect-ratio: 1; object-fit: contain; margin: 0; border: 4px solid #efc45d; background: #fff; box-shadow: 0 0 0 1px #845b24,0 8px 24px #00000026; }
.pix-inline__details { position: relative; min-width: 0; padding: 8px 0 8px 34px; }
.pix-inline__details::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg,transparent,#91c3de55 20%,#91c3de55 80%,transparent); }
.pix-inline__details > label { display: block; margin-bottom: 16px; color: #ffe09a; font: 400 30px/1 var(--bebas); letter-spacing: .035em; }
.pix-inline textarea { display: block; width: 100%; height: 132px; resize: none; padding: 16px 18px; border: 1px solid #87aec544; border-radius: 12px; background: #031428b3; color: #dcebf5; font: 400 13px/1.6 ui-monospace,Consolas,monospace; overflow-wrap: anywhere; scrollbar-color: #58768e #031428; }
.pix-inline textarea:focus-visible { outline: 2px solid #f6d278; outline-offset: 3px; }
.pix-inline__copy { display: block; width: 100%; min-height: 52px; margin-top: 18px; padding: 13px 18px; border: 1px solid #ffe59b; border-radius: 12px; background: linear-gradient(180deg,#ffdd76,#efb13f); box-shadow: inset 0 1px 0 #fff3bdcc,0 3px 0 #97621e66; color: #102443; font: 400 23px/1 var(--bebas); letter-spacing: .04em; cursor: pointer; transition: filter .15s,box-shadow .15s; }
.pix-inline__copy:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 #fff3bdcc,0 3px 0 #97621e66,0 4px 18px #f7c4551c; }
.pix-inline__copy:disabled { opacity: .75; cursor: wait; }
.pix-inline__copy:focus-visible { outline: 2px solid #fff3b0; outline-offset: 4px; }
.pix-inline__message { margin-top: 12px; color: #d6e9f5; font: 400 13px/1.45 var(--montreal); }
body[data-page="pagamento"].has-inline-pix .wrap--narrow { width: min(1100px,calc(100% - 64px)); }
body[data-page="pagamento"].has-inline-pix .acc-sec { padding-top: 30px; padding-bottom: 62px; }
@media (min-width: 701px) and (max-width: 1000px) {
 .pix-inline { grid-template-columns: 260px minmax(0,1fr); gap: 24px; padding: 28px; }
 .pix-inline__scan { padding: 8px; }
 .pix-inline__details { padding-left: 24px; }
 .pix-inline__details > label { font-size: 27px; }
 .pix-inline textarea { padding: 12px; }
}
@media (max-width: 700px) {
 body[data-page="pagamento"].has-inline-pix .wrap--narrow { width: calc(100% - 32px); }
 body[data-page="pagamento"].has-inline-pix .acc-sec { padding-top: 20px; padding-bottom: 32px; }
 .pix-inline { grid-template-columns: minmax(0,1fr); gap: 24px; width: min(440px,100%); padding: 24px; border-radius: 20px; }
 .pix-inline__scan { justify-self: center; width: min(304px,100%); padding: 10px; }
 .pix-inline__details { padding: 0; }
 .pix-inline__details::before { display: none; }
 .pix-inline__details > label { margin-bottom: 12px; font-size: 26px; }
 .pix-inline textarea { height: 110px; padding: 12px; font-size: 12px; }
 .pix-inline__copy { min-height: 48px; margin-top: 14px; font-size: 21px; }
}
@media (max-width: 360px) {
 .pix-inline { padding: 18px; gap: 20px; }
 .pix-inline__scan { padding: 8px; }
}