/* ================================================================
   LAYOUT V4 — "cassino". Pele carregada em TODA página dos domínios com
   'layout' => 'v4' (src/lib/v4.php injeta este arquivo DEPOIS do
   theme.css e do <style> da página, e ANTES do <style> de cores do tenant).

   Regras da casa:
     - cor só por token (var(--color-*) do tenant e os --v4-* abaixo, que
       derivam deles). Nada de cor da marca chumbada: outra plataforma v4
       troca as 5 cores no themes.php e a pele acompanha;
     - o tema do v4 é SEMPRE escuro (v4Boot), mas os tokens são os mesmos
       do v3 — as telas internas (depósito, saque, bicho...) se ajustam
       sozinhas;
     - [hidden] perde para classe com display: todo componente daqui que
       usa hidden tem a guarda explícita (ver bpop no CLAUDE.md do v3).

   Seções: 1 tokens · 2 base · 3 cabeçalho · 4 menu de baixo · 5 menu
   lateral · 6 botões · 7 vitrine (banners, categorias, fileiras, tiles,
   painéis) · 8 player · 9 modais · 10 rodapé · 11 telas internas ·
   12 entrar/cadastro.
   ================================================================ */

/* ---------------- 1. TOKENS ---------------- */
:root{
  --v4-top-h: 60px;
  --v4-gutter: 16px;
  --v4-raised:   color-mix(in srgb, var(--color-surface) 100%, transparent);
  --v4-raised-2: color-mix(in srgb, var(--color-surface) 78%, var(--color-text) 6%);
  --v4-line:     color-mix(in srgb, var(--color-text) 9%, transparent);
  --v4-line-2:   color-mix(in srgb, var(--color-text) 16%, transparent);
  --v4-muted:    color-mix(in srgb, var(--color-text) 60%, transparent);
  --v4-soft:     color-mix(in srgb, var(--color-text) 80%, transparent);
  /* botões: do tom escurecido da primária até a primária, com --c-on-primary
     por cima. O secondary fica livre pra ser o acento de TEXTO no escuro. */
  --v4-grad:     linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 70%, #000 30%), var(--color-primary));
  /* palavra em destaque nos títulos (fundo escuro): degradê CLARO */
  --v4-grad-texto: linear-gradient(135deg, var(--color-secondary), color-mix(in srgb, var(--color-primary) 55%, #fff 45%));
  --v4-glow:     color-mix(in srgb, var(--color-primary) 45%, transparent);
  --v4-tint:     color-mix(in srgb, var(--color-primary) 14%, transparent);
  --v4-ao-vivo:  #e5202e;
  --font-display: 'Montserrat', var(--font-sans);
  --v4-tile-w: clamp(104px, 28vw, 164px);
}
@media (min-width:1024px){
  :root{ --v4-top-h: 68px; }
}

/* ---------------- 2. BASE ---------------- */
body[data-v4-page]{
  background:
    radial-gradient(900px 420px at 50% -180px, color-mix(in srgb, var(--color-primary) 10%, transparent), transparent 70%),
    var(--color-bg);
}
/* os brilhos fixos do v3 (body::before/::after) brigam com a vitrine */
body[data-v4-page]::before, body[data-v4-page]::after{display:none}
body.v4-lobby{padding-top:var(--v4-top-h)}
body.v4-travado{overflow:hidden}
.v4-spin{
  display:inline-block; width:28px; height:28px; border-radius:50%;
  border:3px solid var(--v4-line-2); border-top-color:var(--color-primary);
  animation:v4gira .8s linear infinite;
}
@keyframes v4gira{to{transform:rotate(360deg)}}
/* guarda do [hidden]: classe com display vence o [hidden] do navegador */
.v4-spin[hidden], .v4-hero[hidden], .v4-hero-dots[hidden]{display:none !important}

/* ---------------- 3. CABEÇALHO ---------------- */
.v4-top{
  background:color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--v4-line);
  box-shadow:0 10px 26px -18px rgba(0,0,0,.9);
}
.v4-top .topbar-inner{
  max-width:1280px; height:var(--v4-top-h);
  padding:0 var(--v4-gutter);
  justify-content:center;
}
.v4-top .topbar-row{gap:10px; min-width:0}
.v4-top .topbar-row .logo img{max-height:32px}
.v4-top .right-group{gap:8px}

.v4-burger{
  display:none; flex-shrink:0;
  width:38px; height:38px; place-items:center;
  background:transparent; color:var(--color-text);
  border:1px solid var(--v4-line); border-radius:11px; cursor:pointer;
  font-size:20px;
}
.v4-burger:hover{border-color:var(--color-primary)}

.v4-topnav{display:none}
.v4-topnav a{
  position:relative;
  padding:8px 12px; border-radius:10px;
  color:var(--v4-muted); text-decoration:none;
  font:700 14px var(--font-sans); white-space:nowrap;
  transition:color .15s, background .15s;
}
.v4-topnav a:hover{color:var(--color-text); background:var(--v4-line)}
.v4-topnav a.on{color:var(--color-text)}
.v4-topnav a.on::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:3px;
  border-radius:3px; background:var(--v4-grad); box-shadow:0 0 12px var(--v4-glow);
}

/* saldo: o card do v3, no escuro do v4 */
.v4-top .topbar-inner .bal-card{
  background:var(--v4-raised);
  border:1px solid var(--v4-line);
  padding:5px 7px 5px 10px;
}
.v4-top .topbar-inner .bal-card .bal-bonus{color:var(--color-secondary); font-size:10.5px}
.v4-top .topbar-inner .bal-card:hover{border-color:var(--color-primary)}

/* Depositar: só o ícone no celular (o menu de baixo tem o botão grande) */
.v4-dep{
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; min-width:36px; padding:0;
  border-radius:999px;
  background:var(--v4-grad); color:var(--c-on-primary);
  text-decoration:none; font:800 13.5px var(--font-sans);
  box-shadow:0 8px 18px -10px var(--v4-glow);
  transition:transform .12s, filter .15s;
}
.v4-dep .ph-fill{font-size:20px}
.v4-dep span{display:none}
.v4-dep:hover{filter:brightness(1.06)}
.v4-dep:active{transform:scale(.96)}
@media (min-width:480px){
  .v4-dep{padding:0 14px 0 10px}
  .v4-dep span{display:inline}
}
@media (max-width:359px){
  :root{ --v4-gutter: 12px; }
  .v4-top .topbar-row .logo img{max-height:27px}
  .v4-top .topbar-row, .v4-top .right-group{gap:6px}
}
@media (min-width:1024px){
  .v4-burger{display:grid}
  .v4-topnav{display:flex; align-items:center; gap:2px; margin-left:14px; min-width:0; overflow:hidden}
  .v4-top .topbar-row .logo img{max-height:38px}
}

/* ---------------- 4. MENU DE BAIXO ---------------- */
.v4-nav{
  background:color-mix(in srgb, var(--color-bg) 90%, transparent);
  border-top:1px solid var(--v4-line);
}
.v4-nav .bottom-nav-inner a{color:var(--v4-muted)}
.v4-nav .bottom-nav-inner a:hover,
.v4-nav .bottom-nav-inner a.active{color:var(--c-accent)}
.v4-nav .bottom-nav-inner a:not(.nav-pix).active .ph,
.v4-nav .bottom-nav-inner a:not(.nav-pix).active .ph-fill{background:var(--v4-tint)}
/* Botão central de quem está LOGADO: PIX, na cor OFICIAL do PIX (os tokens
   --c-pix do theme.css, iguais em toda plataforma, como no v3). Pedido do
   Bruno em 01/10/2026. O visitante vê o Cadastrar na cor da marca
   (.v4-nav-cadastro, logo abaixo). O anel de 4px usa o fundo do menu
   (color-bg), não o surface do v3. */
.v4-nav .bottom-nav-inner .nav-pix .pix-fab{
  background:linear-gradient(145deg, #3ecfbf, var(--c-pix) 55%, var(--c-pix-dark));
  color:#fff;
  box-shadow:0 10px 24px -8px color-mix(in srgb, var(--c-pix) 75%, transparent), 0 0 0 4px var(--color-bg);
}
.v4-nav .bottom-nav-inner .nav-pix:hover .pix-fab{
  box-shadow:0 14px 28px -8px color-mix(in srgb, var(--c-pix) 85%, transparent), 0 0 0 4px var(--color-bg);
}
.v4-nav .bottom-nav-inner .nav-pix.active .pix-fab{
  box-shadow:0 10px 24px -8px color-mix(in srgb, var(--c-pix) 75%, transparent), 0 0 0 4px var(--color-bg),
             0 0 0 6px color-mix(in srgb, var(--c-pix) 45%, transparent);
}
/* rótulo "PIX" no verde do PIX (o --c-pix-dark do v3 some no fundo escuro) */
.v4-nav .bottom-nav-inner .nav-pix span:last-child{color:var(--c-pix)}
/* Visitante: Cadastrar na cor da marca (vence o PIX acima por especificidade) */
.v4-nav .bottom-nav-inner .nav-pix.v4-nav-cadastro .pix-fab{
  background:var(--v4-grad);
  color:var(--c-on-primary);
  box-shadow:0 10px 24px -8px var(--v4-glow), 0 0 0 4px var(--color-bg);
}
.v4-nav .bottom-nav-inner .nav-pix.v4-nav-cadastro:hover .pix-fab{
  box-shadow:0 14px 28px -8px var(--v4-glow), 0 0 0 4px var(--color-bg);
}
.v4-nav .bottom-nav-inner .nav-pix.v4-nav-cadastro .pix-fab .ph-fill{font-size:26px}
.v4-nav .bottom-nav-inner .nav-pix.v4-nav-cadastro span:last-child{color:var(--c-accent)}
/* desktop: na vitrine quem navega é o cabeçalho (menu de cima + hambúrguer) */
@media (min-width:1024px){
  body.v4-lobby .v4-nav{display:none}
  body.v4-lobby{padding-bottom:0}
}

/* ---------------- 5. MENU LATERAL ---------------- */
.v4-drawer{position:fixed; inset:0; z-index:70}
.v4-drawer[hidden]{display:none !important}
.v4-drawer-bg{
  position:absolute; inset:0;
  background:rgba(0,0,0,.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s ease;
}
.v4-drawer-panel{
  position:absolute; top:0; bottom:0; left:0;
  width:min(340px, 88vw);
  display:flex; flex-direction:column; gap:14px;
  padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  padding-top:max(14px, env(safe-area-inset-top));
  background:var(--color-surface);
  border-right:1px solid var(--v4-line);
  box-shadow:24px 0 60px -30px rgba(0,0,0,.9);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(-102%);
  transition:transform .22s var(--ease-out);
}
/* coluna flex de altura fixa: sem isto, o bloco com overflow:hidden (saldo)
   encolhia até 2px quando a lista passava da altura da tela */
.v4-drawer-panel > *{flex-shrink:0}
.v4-drawer.aberto .v4-drawer-bg{opacity:1}
.v4-drawer.aberto .v4-drawer-panel{transform:none}
@media (prefers-reduced-motion:reduce){
  .v4-drawer-panel, .v4-drawer-bg{transition:none}
}
.v4-drawer-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.v4-drawer-logo{max-height:34px; width:auto; max-width:70%}
.v4-drawer-x{
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--v4-line); color:var(--color-text);
  border:0; border-radius:11px; cursor:pointer; font-size:18px;
}
.v4-drawer-conta{display:flex; align-items:center; gap:12px}
.v4-avatar{
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--v4-grad); color:var(--c-on-primary);
  font:900 18px var(--font-display);
}
.v4-avatar .ph-fill{font-size:22px}
.v4-drawer-quem{display:flex; flex-direction:column; gap:2px; min-width:0}
.v4-drawer-quem b{font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v4-drawer-quem small{font-size:12px; color:var(--v4-muted)}
.v4-drawer-quem small b{font-size:12px; color:var(--color-secondary)}
.v4-drawer-saldo{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--v4-line); border:1px solid var(--v4-line); border-radius:14px; overflow:hidden;
}
.v4-drawer-saldo > span{display:flex; flex-direction:column; gap:3px; padding:11px 12px; background:var(--v4-raised-2)}
.v4-drawer-saldo small{font-size:11px; font-weight:700; color:var(--v4-muted); text-transform:uppercase; letter-spacing:.06em}
.v4-drawer-saldo b{font-size:16px; font-weight:800; font-variant-numeric:tabular-nums}
.v4-drawer-saldo > span + span b{color:var(--color-secondary)}
.v4-drawer-acoes{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.v4-drawer-boasvindas b{display:block; font:800 17px var(--font-display); margin-bottom:4px}
.v4-drawer-boasvindas p{margin:0 0 12px; font-size:13px; line-height:1.45; color:var(--v4-muted)}
.v4-drawer-nav{display:flex; flex-direction:column; gap:2px}
.v4-drawer-tit{
  margin:12px 4px 4px; font-size:11px; font-weight:800;
  color:var(--v4-muted); text-transform:uppercase; letter-spacing:.08em;
}
.v4-drawer-nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 10px; border-radius:11px;
  color:var(--v4-soft); text-decoration:none; font-size:14.5px; font-weight:600;
  transition:background .12s, color .12s;
}
.v4-drawer-nav a .ph{font-size:20px; color:var(--v4-muted); transition:color .12s}
.v4-drawer-nav a:hover{background:var(--v4-line); color:var(--color-text)}
.v4-drawer-nav a:hover .ph{color:var(--c-accent)}
.v4-drawer-nav a.v4-drawer-sair{color:color-mix(in srgb, var(--c-danger) 85%, var(--color-text))}
.v4-drawer-nav a.v4-drawer-sair .ph{color:inherit}
.v4-drawer-legal{margin:auto 0 0; padding-top:8px; font-size:11.5px; color:var(--v4-muted); display:flex; align-items:center; gap:8px}
.v4-18{
  display:inline-grid; place-items:center; flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--v4-line-2); color:var(--color-text);
  font:900 10px var(--font-sans); letter-spacing:-.02em;
}

/* ---------------- 6. BOTÕES ---------------- */
.v4-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 16px;
  border-radius:11px; border:1px solid transparent;
  font:800 13.5px var(--font-sans); letter-spacing:.01em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .12s, filter .15s, background .15s, border-color .15s;
}
.v4-btn:active{transform:scale(.97)}
.v4-btn-cta{background:var(--v4-grad); color:var(--c-on-primary); box-shadow:0 10px 22px -12px var(--v4-glow)}
.v4-btn-cta:hover{filter:brightness(1.07)}
.v4-btn-ghost{background:transparent; color:var(--color-text); border-color:var(--v4-line-2)}
.v4-btn-ghost:hover{border-color:var(--color-primary)}
.v4-btn-lg{height:48px; font-size:15px; border-radius:13px; width:100%}
.v4-btn[aria-disabled="true"]{opacity:.5; pointer-events:none; filter:grayscale(.6)}
.v4-top .v4-btn{height:36px; padding:0 13px; font-size:13px}
@media (max-width:359px){
  .v4-top .v4-btn{padding:0 10px; font-size:12.5px}
}

/* ---------------- 7. VITRINE ---------------- */
.v4-main{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto;
  padding:12px var(--v4-gutter) 8px;
}

/* 7.1 Banners do topo */
.v4-hero{position:relative}
.v4-hero-track{
  display:flex; gap:10px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  border-radius:18px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.v4-hero-track::-webkit-scrollbar{display:none}
.v4-slide{
  position:relative; flex:0 0 100%;
  aspect-ratio:2/1; min-height:172px;
  scroll-snap-align:center; scroll-snap-stop:always;
  border-radius:18px; overflow:hidden;
  display:block; text-decoration:none; color:#fff;
  background:var(--v4-raised);
  isolation:isolate;
}
@media (min-width:768px){ .v4-slide{aspect-ratio:3/1} }
@media (min-width:1100px){ .v4-slide{aspect-ratio:3.4/1} }
.v4-slide > picture, .v4-slide > picture img, .v4-slide > img.v4-slide-img{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;
}
/* Slide da casa (sem banner no painel): fundo em degradê + texto + arte */
.v4-slide.casa{
  background:
    radial-gradient(120% 140% at 85% 30%, color-mix(in srgb, var(--s2, var(--color-primary)) 55%, transparent), transparent 60%),
    linear-gradient(120deg, var(--s1, #120c22) 0%, color-mix(in srgb, var(--s1, #120c22) 70%, #000) 100%);
}
.v4-slide.casa::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 90% at 0% 100%, rgba(0,0,0,.55), transparent 70%);
}
.v4-slide-txt{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
  height:100%; width:60%;
  padding:14px 0 14px 16px;
}
.v4-kicker{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  font:800 10px var(--font-sans); letter-spacing:.1em; text-transform:uppercase;
}
.v4-kicker .v4-ponto{width:7px; height:7px; border-radius:50%; background:var(--v4-ao-vivo); box-shadow:0 0 0 0 rgba(229,32,46,.7); animation:v4pulso 1.4s ease-out infinite}
.v4-slide-txt h2{
  margin:0; max-width:100%;
  font:900 italic clamp(19px, 5.6vw, 40px)/1.02 var(--font-display);
  letter-spacing:-.01em; text-transform:uppercase;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.v4-slide-txt h2 em{font-style:inherit; background:var(--v4-grad-texto); -webkit-background-clip:text; background-clip:text; color:transparent}
.v4-slide-txt p{
  margin:0; max-width:34ch;
  font-size:clamp(11.5px, 3.1vw, 15px); line-height:1.35; color:rgba(255,255,255,.82);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.v4-slide-txt .v4-btn{margin-top:4px; height:34px; padding:0 14px; font-size:12.5px}
@media (min-width:768px){
  .v4-slide-txt{width:55%; padding:24px 0 24px 34px; gap:10px}
  .v4-slide-txt .v4-btn{height:42px; padding:0 20px; font-size:14px}
}
/* arte do slide da casa */
.v4-slide-arte{position:absolute; z-index:1; right:0; top:0; bottom:0; width:48%; pointer-events:none}
.v4-slide-arte img.prod{
  position:absolute; right:-4%; top:50%; height:112%; width:auto; aspect-ratio:1;
  transform:translateY(-50%) rotate(-4deg);
  border-radius:22px; object-fit:cover;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.7);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
}
.v4-leque{position:absolute; inset:0}
.v4-leque img{
  position:absolute; top:50%; height:84%; width:auto; aspect-ratio:3/4;
  border-radius:12px; object-fit:cover;
  box-shadow:0 14px 30px -8px rgba(0,0,0,.75);
  border:2px solid rgba(255,255,255,.14);
  background:#111;
}
/* celular: duas capas encostadas na direita (a terceira encavalava o texto) */
.v4-leque img{height:80%}
.v4-leque img:nth-child(1){display:none}
.v4-leque img:nth-child(2){right:22%; transform:translateY(-50%) rotate(-4deg); z-index:3}
.v4-leque img:nth-child(3){right:-6%; transform:translateY(-50%) rotate(8deg) scale(.88); z-index:2}
@media (min-width:768px){
  .v4-slide-arte{width:46%}
  .v4-leque img{height:84%}
  .v4-leque img:nth-child(1){display:block; right:46%; transform:translateY(-50%) rotate(-10deg) scale(.86); z-index:1}
  .v4-leque img:nth-child(2){right:25%; transform:translateY(-50%) rotate(0deg)}
  .v4-leque img:nth-child(3){right:5%; transform:translateY(-50%) rotate(9deg) scale(.86)}
}
.v4-hero-dots{display:flex; justify-content:center; gap:6px; margin-top:9px; min-height:6px}
.v4-hero-dots button{
  width:7px; height:6px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:var(--v4-line-2); transition:width .25s var(--ease-out), background .2s;
}
.v4-hero-dots button[aria-selected="true"]{width:22px; background:var(--color-primary)}
.v4-hero-seta{
  position:absolute; top:calc(50% - 16px); z-index:3;
  width:40px; height:40px; display:none; place-items:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background:rgba(8,10,16,.55); color:#fff; backdrop-filter:blur(8px);
  cursor:pointer; font-size:18px; transition:background .15s, opacity .2s;
}
.v4-hero-seta:hover{background:rgba(8,10,16,.8)}
.v4-hero-seta.ant{left:12px}
.v4-hero-seta.prox{right:12px}
.v4-hero-seta[hidden]{display:none !important}
@media (hover:hover) and (min-width:768px){
  .v4-hero-seta{display:grid; opacity:0}
  .v4-hero:hover .v4-hero-seta, .v4-hero-seta:focus-visible{opacity:1}
}

/* 7.2 Categorias — rolam junto com a página. Já foram fixas no topo
   (sticky) e o Bruno pediu pra soltar (01/10/2026): quem quer trocar de
   categoria lá embaixo usa o menu de baixo ou o "Ver todos" de cada fileira. */
.v4-cats-wrap{
  position:relative; z-index:2;
  margin:10px calc(var(--v4-gutter) * -1) 0;
  padding:8px var(--v4-gutter) 6px;
}
.v4-cats{
  display:flex; gap:8px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  scroll-padding:0 var(--v4-gutter);
}
.v4-cats::-webkit-scrollbar{display:none}
.v4-cat{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  min-width:72px; height:64px; padding:0 10px;
  border-radius:14px;
  background:var(--v4-raised); border:1px solid var(--v4-line);
  color:var(--v4-muted); text-decoration:none; cursor:pointer;
  font:700 11.5px var(--font-sans); white-space:nowrap;
  transition:color .15s, border-color .15s, background .15s, transform .12s;
}
.v4-cat .ph{font-size:23px; transition:color .15s, transform .15s}
.v4-cat:hover{color:var(--color-text); border-color:var(--v4-line-2)}
.v4-cat:hover .ph{transform:translateY(-1px)}
.v4-cat:active{transform:scale(.96)}
.v4-cat[aria-current="true"]{
  color:var(--color-text);
  background:linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 22%, var(--color-surface)), var(--color-surface));
  border-color:color-mix(in srgb, var(--color-primary) 70%, transparent);
  box-shadow:0 8px 20px -14px var(--v4-glow), inset 0 1px 0 color-mix(in srgb, var(--color-secondary) 30%, transparent);
}
.v4-cat[aria-current="true"] .ph{color:var(--c-accent)}
.v4-cat .v4-cat-vivo{
  position:absolute; top:7px; right:9px;
  width:7px; height:7px; border-radius:50%; background:var(--v4-ao-vivo);
  animation:v4pulso 1.4s ease-out infinite;
}
.v4-cat{position:relative}
.v4-cat.busca{min-width:56px}
@media (min-width:1024px){
  .v4-cat{min-width:88px; height:70px; font-size:12.5px}
}

/* 7.3 Avisos */
.v4-avisos{display:flex; flex-direction:column; gap:8px}
.v4-avisos:empty{display:none}
.v4-avisos{margin-top:6px}
.v4-aviso{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  border:1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  font-size:13.5px; line-height:1.4; color:var(--v4-soft);
}
.v4-aviso > .ph, .v4-aviso > .ph-fill{flex-shrink:0; font-size:22px; color:var(--c-accent)}
.v4-aviso b{color:var(--color-text)}
.v4-aviso .v4-aviso-txt{flex:1; min-width:0}
.v4-aviso .v4-btn{flex-shrink:0; height:34px; padding:0 12px; font-size:12.5px}
.v4-aviso.erro{
  background:color-mix(in srgb, var(--c-danger) 12%, var(--color-surface));
  border-color:color-mix(in srgb, var(--c-danger) 40%, transparent);
}
.v4-aviso.erro > .ph, .v4-aviso.erro > .ph-fill{color:var(--c-danger)}
.v4-aviso-x{flex-shrink:0; background:none; border:0; color:var(--v4-muted); font-size:18px; cursor:pointer; padding:4px}

/* 7.4 Seções e fileiras */
.v4-view{min-height:40vh}
.v4-carregando{display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 0; color:var(--v4-muted); font-size:14px}
.v4-sec{margin-top:22px}
.v4-sec:first-child{margin-top:12px}
.v4-sec-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 11px}
.v4-sec-tit{
  display:flex; align-items:center; gap:9px; min-width:0; margin:0;
  font:800 17px/1.2 var(--font-display); letter-spacing:-.01em;
}
.v4-sec-tit .ph, .v4-sec-tit .ph-fill{font-size:21px; color:var(--c-accent); flex-shrink:0}
/* fileira de provedor: nome em texto + a logo oficial num selo à esquerda */
.v4-sec-tit .v4-sec-logo{
  flex-shrink:0; display:grid; place-items:center;
  width:46px; height:28px; border-radius:8px;
  background:var(--v4-raised); border:1px solid var(--v4-line);
}
.v4-sec-tit .v4-sec-logo img{max-width:40px; max-height:22px; width:auto; height:auto; filter:grayscale(1) brightness(2.2)}
.v4-sec-tit .v4-ponto{flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--v4-ao-vivo); animation:v4pulso 1.4s ease-out infinite}
.v4-sec-acoes{display:flex; align-items:center; gap:6px; flex-shrink:0}
.v4-mais{
  display:inline-flex; align-items:center; gap:3px;
  background:none; border:0; padding:6px 2px; cursor:pointer;
  color:var(--color-secondary); font:700 13px var(--font-sans); text-decoration:none; white-space:nowrap;
}
.v4-mais:hover{text-decoration:underline}
.v4-seta{
  display:none; width:32px; height:32px; place-items:center;
  border-radius:50%; border:1px solid var(--v4-line-2);
  background:var(--v4-raised); color:var(--color-text); cursor:pointer; font-size:15px;
}
.v4-seta:hover{border-color:var(--color-primary)}
.v4-seta:disabled{opacity:.35; cursor:default}
@media (hover:hover) and (min-width:768px){ .v4-seta{display:grid} }

.v4-row{
  display:flex; gap:10px;
  overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
  margin:0 calc(var(--v4-gutter) * -1);
  padding:2px var(--v4-gutter) 10px;
  scroll-padding:0 var(--v4-gutter);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.v4-row::-webkit-scrollbar{display:none}
.v4-row > *{scroll-snap-align:start}

/* 7.5 Tile de jogo */
.v4-tile{
  position:relative; flex:0 0 auto;
  width:var(--v4-tile-w); aspect-ratio:3/4;
  padding:0; border:0; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg, hsl(var(--h, 260) 55% 30%), hsl(calc(var(--h, 260) + 40) 60% 16%));
  color:#fff; cursor:pointer; text-align:left;
  box-shadow:0 8px 18px -12px rgba(0,0,0,.9);
  transition:transform .18s var(--ease-out), box-shadow .18s;
  -webkit-tap-highlight-color:transparent;
}
.v4-grid .v4-tile{width:100%}
.v4-tile img.capa{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s var(--ease-out)}
.v4-tile .v4-tile-nome{
  position:absolute; inset:auto 8px 10px 8px; z-index:1;
  font:800 11.5px/1.25 var(--font-sans); text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  display:none;
}
.v4-tile.sem-capa .v4-tile-nome{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; bottom:32px}
.v4-tile.sem-capa::before{
  content:""; position:absolute; left:50%; top:38%; width:38%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:rgba(255,255,255,.12);
}
.v4-tile-play{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
  opacity:0; transition:opacity .18s;
}
.v4-tile-play i{
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; background:var(--v4-grad); color:var(--c-on-primary);
  font-size:20px; box-shadow:0 10px 24px -8px var(--v4-glow);
  transform:scale(.85); transition:transform .18s var(--ease-out);
}
@media (hover:hover){
  .v4-tile:hover{transform:translateY(-4px); box-shadow:0 18px 30px -16px var(--v4-glow), 0 6px 14px rgba(0,0,0,.4)}
  .v4-tile:hover img.capa{transform:scale(1.05)}
  .v4-tile:hover .v4-tile-play{opacity:1}
  .v4-tile:hover .v4-tile-play i{transform:scale(1)}
}
.v4-tile:active{transform:scale(.97)}
.v4-tile:focus-visible{outline:2px solid var(--color-primary); outline-offset:2px}
.v4-tile-prov{
  position:absolute; left:6px; bottom:6px; z-index:2; max-width:calc(100% - 12px);
  padding:2px 6px; border-radius:6px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  font:700 9.5px var(--font-sans); letter-spacing:.02em; color:rgba(255,255,255,.88);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:none;
}
/* a arte oficial já traz o provedor escrito no pé: a etiqueta só aparece
   no jogo novo que ainda não tem capa */
.v4-tile.sem-capa .v4-tile-prov{display:block}
.v4-tag-vivo{
  position:absolute; top:6px; left:6px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 7px; border-radius:999px;
  background:var(--v4-ao-vivo); color:#fff;
  font:800 9.5px var(--font-sans); letter-spacing:.06em;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.6);
}
.v4-tag-vivo::before{content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:v4pulsoB 1.4s ease-out infinite}
/* ranking ("Em alta"): número vazado no pé da capa */
.v4-row.ranking{--v4-tile-w: clamp(124px, 36vw, 188px)}
.v4-rank{
  position:absolute; left:6px; bottom:-6px; z-index:2;
  font:900 italic clamp(40px, 11vw, 62px)/1 var(--font-display);
  color:var(--color-bg);
  -webkit-text-stroke:2px var(--color-secondary);
  text-shadow:0 4px 18px rgba(0,0,0,.7);
  pointer-events:none;
}
.v4-tile.com-rank::after{
  content:""; position:absolute; inset:auto 0 0 0; height:42%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.55));
}
/* "ver todos" no fim da fileira */
.v4-tile-todos{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:var(--v4-raised); border:1px dashed var(--v4-line-2);
  color:var(--v4-soft); font:700 12.5px var(--font-sans); text-align:center;
}
.v4-tile-todos .ph{font-size:24px; color:var(--c-accent)}

@keyframes v4pulso{
  0%{box-shadow:0 0 0 0 rgba(229,32,46,.7)}
  70%{box-shadow:0 0 0 7px rgba(229,32,46,0)}
  100%{box-shadow:0 0 0 0 rgba(229,32,46,0)}
}
@keyframes v4pulsoB{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.85)}
  70%{box-shadow:0 0 0 5px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
  .v4-tag-vivo::before, .v4-kicker .v4-ponto, .v4-sec-tit .v4-ponto, .v4-cat .v4-cat-vivo{animation:none}
}

/* 7.6 Grade (categoria aberta) */
.v4-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
@media (min-width:560px){ .v4-grid{grid-template-columns:repeat(4, minmax(0, 1fr))} }
@media (min-width:768px){ .v4-grid{grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px} }
@media (min-width:1024px){ .v4-grid{grid-template-columns:repeat(6, minmax(0, 1fr))} }
@media (min-width:1200px){ .v4-grid{grid-template-columns:repeat(7, minmax(0, 1fr))} }
.v4-grid-fim{height:1px}
.v4-vazio{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:40px 16px; color:var(--v4-muted); font-size:14px;
}
.v4-vazio .ph{font-size:40px; color:var(--v4-line-2)}

/* 7.7 Cabeçalho da categoria, busca e filtros */
.v4-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:16px 0 12px}
.v4-cab h1{margin:0; font:900 italic clamp(22px, 6vw, 30px)/1.05 var(--font-display); text-transform:uppercase; letter-spacing:-.01em}
.v4-cab small{display:block; margin-top:4px; color:var(--v4-muted); font-size:12.5px; font-weight:600}
.v4-busca{
  display:flex; align-items:center; gap:10px;
  padding:0 14px; height:46px; margin-bottom:12px;
  background:var(--v4-raised); border:1px solid var(--v4-line); border-radius:13px;
  transition:border-color .15s, box-shadow .15s;
}
.v4-busca:focus-within{border-color:var(--color-primary); box-shadow:0 0 0 3px var(--v4-tint)}
.v4-busca .ph{font-size:19px; color:var(--v4-muted)}
.v4-busca input{flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--color-text); font:500 15px var(--font-sans)}
.v4-busca input::placeholder{color:var(--v4-muted)}
.v4-busca input::-webkit-search-cancel-button{display:none}
.v4-busca-x{background:none; border:0; color:var(--v4-muted); font-size:17px; cursor:pointer; padding:4px; display:none}
.v4-busca.tem .v4-busca-x{display:block}
.v4-pills{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--v4-gutter) * -1) 12px; padding:0 var(--v4-gutter)}
.v4-pills::-webkit-scrollbar{display:none}
.v4-pill{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 13px; border-radius:999px;
  background:var(--v4-raised); border:1px solid var(--v4-line);
  color:var(--v4-soft); font:700 12.5px var(--font-sans); cursor:pointer; white-space:nowrap;
}
.v4-pill .ph{font-size:15px}
.v4-pill small{color:var(--v4-muted); font-weight:700}
.v4-pill[aria-pressed="true"]{background:var(--v4-grad); color:var(--c-on-primary); border-color:transparent}
.v4-pill[aria-pressed="true"] small{color:inherit; opacity:.7}
.v4-provs{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--v4-gutter) * -1) 14px; padding:2px var(--v4-gutter) 4px}
.v4-provs::-webkit-scrollbar{display:none}
.v4-prov{
  flex:0 0 auto; width:108px; height:54px;
  display:grid; place-items:center; padding:8px 10px;
  background:var(--v4-raised); border:1px solid var(--v4-line); border-radius:12px;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.v4-prov img{max-width:90px; max-height:34px; width:auto; height:auto; object-fit:contain; filter:grayscale(1) brightness(2.1); opacity:.8; transition:filter .15s, opacity .15s}
.v4-prov span{font:800 12.5px var(--font-sans); color:var(--v4-soft); text-align:center; line-height:1.15}
.v4-prov:hover img{opacity:1; filter:grayscale(1) brightness(3)}
.v4-prov[aria-pressed="true"]{border-color:var(--color-primary); background:color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))}
.v4-prov[aria-pressed="true"] img{opacity:1; filter:grayscale(1) brightness(3)}
.v4-nota{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:18px; padding:12px 14px; border-radius:13px;
  background:var(--v4-raised); border:1px solid var(--v4-line);
  border-left:3px solid var(--color-primary);
  font-size:12.5px; line-height:1.45; color:var(--v4-muted);
}
.v4-nota .ph{flex-shrink:0; font-size:18px; color:var(--color-secondary)}

/* 7.8 Produtos (bicho, loterias, bingo, futebol, federal) */
.v4-prods{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--v4-gutter) * -1); padding:2px var(--v4-gutter) 10px}
.v4-prods::-webkit-scrollbar{display:none}
.v4-prod{
  position:relative; flex:0 0 auto;
  width:clamp(132px, 38vw, 210px); aspect-ratio:1;
  border-radius:16px; overflow:hidden; display:block;
  background:var(--v4-raised); border:0; padding:0; cursor:pointer;
  box-shadow:0 10px 22px -14px rgba(0,0,0,.9);
  transition:transform .18s var(--ease-out), box-shadow .18s;
}
.v4-prod img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s var(--ease-out)}
@media (hover:hover){
  .v4-prod:hover{transform:translateY(-4px); box-shadow:0 18px 30px -16px var(--v4-glow)}
  .v4-prod:hover img{transform:scale(1.04)}
}
@media (min-width:1024px){
  .v4-prods{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); overflow:visible; margin:0; padding:2px 0 10px}
  .v4-prod{width:auto}
}
/* selo de produto desligado: o mesmo vermelho do v3; quebra em 2 linhas
   ("Bloqueado a seu pedido" não cabe numa só em card de celular) */
.v4-selo-off{
  position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:2;
  width:max-content; max-width:calc(100% - 16px); padding:4px 10px; border-radius:10px;
  background:#b91c1c; color:#fff; font:800 9.5px/1.25 var(--font-sans);
  letter-spacing:.05em; text-transform:uppercase; text-align:center;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.45), 0 4px 10px -4px rgba(0,0,0,.6);
}
.v4-prod.off, .v4-painel.off .v4-painel-arte{filter:grayscale(.6) brightness(.75)}
.v4-prod.off{cursor:default}

/* painel de produto (categoria Bicho, Loterias...) */
.v4-painel{
  display:grid; gap:16px; margin-top:14px;
  padding:16px; border-radius:20px;
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 60%),
    var(--v4-raised);
  border:1px solid var(--v4-line);
}
.v4-painel-arte{width:100%; max-width:320px; aspect-ratio:1; border-radius:16px; object-fit:cover; justify-self:center; box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}
.v4-painel-txt{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.v4-painel-txt h1{margin:0; font:900 italic clamp(24px, 7vw, 38px)/1.02 var(--font-display); text-transform:uppercase}
.v4-painel-txt p{margin:0; font-size:15px; line-height:1.5; color:var(--v4-soft); max-width:46ch}
.v4-painel-txt .v4-btn{height:50px; padding:0 26px; font-size:15.5px; border-radius:14px; margin-top:4px}
.v4-painel-off{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:13px; background:color-mix(in srgb, var(--c-danger) 12%, transparent); border:1px solid color-mix(in srgb, var(--c-danger) 38%, transparent); font-size:13.5px; line-height:1.45; color:var(--v4-soft)}
.v4-painel-off .ph-fill{color:var(--c-danger); font-size:20px; flex-shrink:0}
.v4-extracoes{display:flex; flex-wrap:wrap; gap:7px}
.v4-extracoes span{padding:6px 10px; border-radius:9px; background:var(--v4-raised-2); border:1px solid var(--v4-line); font:700 12px var(--font-sans); color:var(--v4-soft)}
.v4-extracoes-tit{font:800 12px var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--v4-muted)}
@media (min-width:720px){
  .v4-painel{grid-template-columns:minmax(220px, 320px) 1fr; align-items:center; padding:22px; gap:26px}
}

/* ---------------- 8. PLAYER ---------------- */
.v4-player{position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; background:#05070b; padding-bottom:env(safe-area-inset-bottom)}
.v4-player[hidden]{display:none !important}
.v4-player-bar{
  flex-shrink:0; display:flex; align-items:center; gap:10px;
  padding:8px 10px 8px 14px; padding-top:max(8px, env(safe-area-inset-top));
  background:#0b0e15; border-bottom:1px solid rgba(255,255,255,.07); color:#fff;
}
.v4-player-nome{flex:1; min-width:0; font:800 14px var(--font-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.v4-player-saldo{flex-shrink:0; padding:6px 10px; border-radius:9px; background:rgba(255,255,255,.08); font:800 12.5px var(--font-sans); font-variant-numeric:tabular-nums}
.v4-player-saldo:empty{display:none}
.v4-player-x{flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:11px; background:rgba(255,255,255,.12); color:#fff; font-size:18px; cursor:pointer}
.v4-player-x:hover{background:rgba(255,255,255,.2)}
.v4-player-palco{position:relative; flex:1; min-height:0}
.v4-player-palco iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#05070b}
.v4-player-load{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; color:#fff; background:#05070b}
.v4-player-load[hidden]{display:none !important}
.v4-player-msg{font-size:14px; font-weight:600; max-width:300px; line-height:1.45}
.v4-player-msg.erro{color:#fca5a5}
.v4-player-load .v4-btn[hidden]{display:none !important}

/* ---------------- 9. MODAIS ---------------- */
.v4-entrar{text-align:center; padding-top:30px}
.v4-entrar-capa{display:flex; justify-content:center; margin-bottom:14px}
.v4-entrar-capa img{width:110px; aspect-ratio:3/4; object-fit:cover; border-radius:14px; box-shadow:0 18px 36px -16px var(--v4-glow)}
.v4-entrar-capa:empty{display:none}
.v4-entrar h2{font:900 italic 24px var(--font-display); text-transform:uppercase}
.v4-entrar .sub{margin-bottom:18px}
.v4-entrar-acoes{display:flex; flex-direction:column; gap:10px}

/* popup pós-login — mesmo desenho do v3 (ali vive inline no inicio.html) */
.bpop{position:relative; width:100%; max-width:400px}
.bpop img{width:100%; height:auto; display:block; border-radius:16px; box-shadow:var(--shadow-lg)}
.bpop-link{display:block; line-height:0}
.bpop-close{position:absolute; top:-12px; right:-8px; width:34px; height:34px; display:grid; place-items:center; background:var(--color-surface); color:var(--color-text); border:1px solid var(--v4-line); border-radius:50%; cursor:pointer; box-shadow:var(--shadow); z-index:2}
.bpop [hidden]{display:none !important}
.bpop.tem-nav{background:var(--color-surface); border:1px solid var(--v4-line); border-radius:18px; padding:10px; box-shadow:var(--shadow-lg)}
.bpop.tem-nav img{border-radius:10px; box-shadow:none}
.bpop.tem-nav .bpop-close{top:-10px; right:-10px}
.bpop-nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-top:12px}
.bpop-lado{display:flex}
.bpop-lado.fim{justify-content:flex-end}
.bpop-meio{display:flex; align-items:center; gap:8px}
.bpop-passo{font-size:12px; font-weight:700; color:var(--v4-muted)}
.bpop-dots{display:flex; gap:6px}
.bpop-dot{width:7px; height:7px; border-radius:50%; background:var(--v4-line-2)}
.bpop-dot.on{background:var(--color-primary)}
.bpop-btn{padding:10px 18px; border:0; border-radius:10px; cursor:pointer; font-size:14px; font-weight:800; color:var(--c-on-primary); background:var(--v4-grad)}
.bpop-btn.ghost{background:transparent; color:var(--v4-muted); border:1px solid var(--v4-line-2)}

/* ---------------- 10. RODAPÉ ---------------- */
.v4-foot{
  position:relative; z-index:1; margin-top:44px;
  border-top:1px solid var(--v4-line);
  background:color-mix(in srgb, var(--color-bg) 60%, #000);
}
.v4-foot-in{max-width:1280px; margin:0 auto; padding:28px var(--v4-gutter) 24px; display:grid; gap:20px}
.v4-foot-marca img{max-height:40px; width:auto}
.v4-foot-marca p{margin:10px 0 0; max-width:46ch; font-size:13px; line-height:1.5; color:var(--v4-muted)}
.v4-foot-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.v4-foot-col{display:flex; flex-direction:column; gap:9px}
.v4-foot-col b{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--v4-soft)}
.v4-foot-col a{color:var(--v4-muted); text-decoration:none; font-size:13.5px}
.v4-foot-col a:hover{color:var(--c-accent)}
.v4-foot-selos{display:flex; flex-wrap:wrap; gap:8px}
.v4-selo{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px 6px 7px; border-radius:999px;
  border:1px solid var(--v4-line); background:var(--v4-raised);
  font:700 12px var(--font-sans); color:var(--v4-soft);
}
.v4-selo .ph-fill{font-size:16px; color:var(--color-secondary)}
.v4-selo .v4-18{width:22px; height:22px; font-size:9px}
.v4-foot-legal, .v4-foot-copy{margin:0; font-size:12px; line-height:1.55; color:var(--v4-muted)}
@media (min-width:768px){
  .v4-foot-in{grid-template-columns:1.4fr 1fr; align-items:start}
  .v4-foot-selos, .v4-foot-legal, .v4-foot-copy{grid-column:1 / -1}
}

/* ---------------- 11. TELAS INTERNAS (v3 com a pele do v4) ---------------- */
/* tema sempre escuro no v4: a escolha de Aparência da Minha Conta some */
body[data-v4-page="conta.html"] :has(> #themeSeg){display:none !important}

/* ---------------- 12. ENTRAR / CADASTRO ---------------- */
body[data-v4-page="login.html"],
body[data-v4-page="register.html"]{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 80%, transparent), color-mix(in srgb, var(--color-bg) 96%, transparent)),
    url(/v4/img/auth-bg.webp) center / cover no-repeat,
    var(--color-bg);
}
body[data-v4-page="login.html"] .card,
body[data-v4-page="register.html"] .card{
  background:color-mix(in srgb, var(--color-surface) 90%, transparent);
  border-color:var(--v4-line-2);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
body[data-v4-page="login.html"] .btn-primary,
body[data-v4-page="register.html"] .btn-primary{background:var(--v4-grad); color:var(--c-on-primary)}
body[data-v4-page="login.html"] .btn-primary:hover,
body[data-v4-page="register.html"] .btn-primary:hover{filter:brightness(1.07); color:var(--c-on-primary)}
.v4-auth-volta{
  position:fixed; top:max(12px, env(safe-area-inset-top)); left:12px; z-index:20;
  display:inline-flex; align-items:center; gap:4px;
  padding:8px 13px 8px 9px; border-radius:999px;
  background:color-mix(in srgb, var(--color-surface) 80%, transparent);
  border:1px solid var(--v4-line-2); backdrop-filter:blur(10px);
  color:var(--color-text); text-decoration:none; font:700 13px var(--font-sans);
}
.v4-auth-volta:hover{border-color:var(--color-primary)}
/* o card do login começa logo abaixo do botão de voltar no celular */
@media (max-width:480px){
  body[data-v4-page="login.html"], body[data-v4-page="register.html"]{padding-top:62px}
}

/* ---------------- 13. TELAS ESTREITAS (320–374px) ----------------
   No FIM do arquivo de propósito: precisa vencer as regras base do banner
   e do aviso, que têm a mesma especificidade e vêm antes. */
@media (max-width:374px){
  .v4-slide-txt{width:64%}
  .v4-slide-txt p{display:none}
  .v4-slide-txt h2{font-size:17px}
  /* capas menores e mais pra direita: o título não encosta nelas */
  .v4-leque img{height:64%}
  .v4-leque img:nth-child(2){right:4%}
  .v4-leque img:nth-child(3){right:-22%}
  .v4-slide-arte img.prod{right:-18%; height:92%}
  /* aviso: o botão desce pra baixo do texto */
  .v4-aviso{display:grid; grid-template-columns:auto 1fr auto; column-gap:10px; row-gap:8px}
  .v4-aviso .v4-btn{grid-column:2; grid-row:2; justify-self:start}
  .v4-aviso .v4-aviso-x{grid-column:3; grid-row:1}
}