/* V1.27.83 — desktop = uma única vista mobile, centralizada, sem cortes.
   A faixa usa aproximadamente 1/3 do monitor, com limites para não ficar estreita/larga demais. */
@media (min-width:701px){
  :root{
    --public-centered-canvas:clamp(430px,33.333vw,640px);
    --public-centered-gutter:max(0px,calc((100vw - var(--public-centered-canvas))/2));
  }

  html{
    width:100%!important;
    min-width:100%!important;
    overflow-x:hidden!important;
    background:#c9ced7!important;
  }

  body{
    box-sizing:border-box!important;
    width:var(--public-centered-canvas)!important;
    max-width:var(--public-centered-canvas)!important;
    min-width:0!important;
    min-height:100vh!important;
    margin:0 auto!important;
    position:relative!important;
    overflow-x:hidden!important;
    border-left:1px solid rgba(15,23,42,.07)!important;
    border-right:1px solid rgba(15,23,42,.07)!important;
    box-shadow:0 0 34px rgba(15,23,42,.08)!important;
  }

  body > header,
  body > main,
  body > footer,
  body > main > section,
  body > main > .section{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Um único gutter, igual ao mobile. */
  body .container,
  body > header .container,
  body > main .container,
  body > footer .container,
  body .legal-information > .container{
    box-sizing:border-box!important;
    width:calc(100% - 10px)!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Campanha: sempre uma coluna, exatamente como a vista mobile. */
  body #campanha .layout{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  body #campanha .layout > *,
  body #campanha .layout > div:first-child,
  body #campanha .campaign-post-hero-content,
  body #campanha #pacotes-promocionais,
  body #campanha #campaignTagsCenter,
  body #campanha #comprar.buy{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  body #campanha #comprar.buy{
    position:static!important;
    inset:auto!important;
  }

  /* Corrige a causa do corte: no desktop centralizado nunca usar 100vw dentro do canvas. */
  body #campanha .campaign-hero-card,
  body #campanha .campaign-hero-card > .cover,
  body #campanha .campaign-hero-card > .campaign-hero-copy,
  body #campanha .campaign-hero-card > .campaign-my-titles-bar,
  body #campanha .campaign-hero-card > .campaign-hero-progress,
  body #campanha .campaign-hero-card .campaign-progress-square{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:none!important;
  }
  body #campanha .campaign-hero-card > .cover{
    aspect-ratio:4/3!important;
  }

  /* Todos os módulos públicos pertencem à mesma faixa, sem avanço lateral. */
  body #roleta-instantanea-card,
  body #caixinhas-premiadas,
  body #cotas-premiadas,
  body #dinamicas,
  body #resultados,
  body #roleta-instantanea-card > .wheel-unified-white-card,
  body #caixinhas-premiadas > .prize-section-white-card,
  body #cotas-premiadas > .prize-section-white-card,
  body #resultados > .ranking-section-white-card,
  body #roleta-instantanea-card #ofertas-roleta > .container,
  body #roleta-instantanea-card #roleta > .container{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  body #roleta-instantanea-card > .wheel-unified-white-card,
  body #caixinhas-premiadas > .prize-section-white-card,
  body #cotas-premiadas > .prize-section-white-card,
  body #resultados > .ranking-section-white-card{
    width:calc(100% - 10px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body img,
  body video,
  body canvas,
  body svg{
    max-width:100%;
  }

  /* Controles que no mobile usam viewport passam a respeitar a faixa central no PC. */
  body .top-menu-dropdown{
    right:calc(var(--public-centered-gutter) + 8px)!important;
    left:auto!important;
    width:auto!important;
    max-width:calc(var(--public-centered-canvas) - 16px)!important;
  }
  body .social-tag-dock{
    right:calc(var(--public-centered-gutter) + 8px)!important;
    left:auto!important;
    width:auto!important;
    max-width:calc(var(--public-centered-canvas) - 16px)!important;
  }
  body .purchase-live-toast{
    max-width:calc(var(--public-centered-canvas) - 24px)!important;
  }

  /* Evita qualquer resíduo horizontal de componentes antigos. */
  body #campanha,
  body #campanha *:not(.modal):not(.modal *),
  body #roleta-instantanea-card,
  body #caixinhas-premiadas,
  body #cotas-premiadas,
  body #dinamicas,
  body #resultados{
    min-width:0;
  }

  body::before{
    width:100%!important;
    max-width:var(--public-centered-canvas)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* V1.27.84 — campanha superior usa o mesmo eixo/largura dos cards de premiação.
   Corrige o recuo excessivo no desktop de tudo que fica da Roleta para cima. */
@media (min-width:701px){
  :root{--public-major-card-gutter:5px}

  /* O container da campanha deixa de criar uma segunda faixa estreita. */
  body #campanha > .container{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Breadcrumb continua alinhado ao conteúdo, sem encostar na borda. */
  body #campanha > .container > .breadcrumb{
    box-sizing:border-box!important;
    width:calc(100% - (var(--public-major-card-gutter) * 2))!important;
    margin-left:var(--public-major-card-gutter)!important;
    margin-right:var(--public-major-card-gutter)!important;
  }

  /* Toda a área principal, do hero até Verificar ganhador, usa a mesma largura da Roleta. */
  body #campanha > .container > .layout{
    box-sizing:border-box!important;
    width:calc(100% - (var(--public-major-card-gutter) * 2))!important;
    max-width:calc(100% - (var(--public-major-card-gutter) * 2))!important;
    min-width:0!important;
    margin-left:var(--public-major-card-gutter)!important;
    margin-right:var(--public-major-card-gutter)!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  body #campanha .layout > div:first-child,
  body #campanha .campaign-hero-card,
  body #campanha .campaign-post-hero-content,
  body #campanha #pacotes-promocionais,
  body #campanha #campaignTagsCenter,
  body #campanha #comprar.buy,
  body #campanha #purchaseOpenContent,
  body #campanha #automaticPane,
  body #campanha #packs,
  body #campanha .qty-row,
  body #campanha #checkoutBtn,
  body #campanha .description-regulation-trigger,
  body #campanha #verifyWinnerBtn{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* O card de compra usa o mesmo respiro interno do card unificado da Roleta. */
  body #campanha #comprar.buy{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* Remove recuos desktop herdados de breakpoints antigos das TAGs centrais. */
  body #campanha .campaign-post-hero-content > .campaign-tags-center{
    margin-left:0!important;
    margin-right:0!important;
  }
  body #campanha .campaign-tags-center > section,
  body #campanha .campaign-tags-center .campaign-tag-card,
  body #campanha .campaign-tags-center .double-chance-card,
  body #campanha .campaign-tags-center .unit-discount-card{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Nunca reutilizar 100vw dentro do canvas central no desktop. */
  body #campanha .campaign-hero-card{
    margin-left:0!important;
    margin-right:0!important;
    transform:none!important;
  }
}

/* V1.27.85 — topo desktop com geometria idêntica ao mobile dentro do canvas central.
   - Hero full-bleed até as bordas do site central, sem usar 100vw do monitor.
   - Seletores de cotas sem segunda camada de padding.
   - Header fixo com logo/menu dentro do mesmo eixo central e respiro mobile. */
@media (min-width:701px){
  :root{
    --v12785-site-edge:5px;
    --v12785-header-edge:12px;
  }

  /* Barra fixa: tudo pertence ao canvas do site, nunca às bordas do monitor. */
  html body > header{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    background:rgba(7,11,10,.96)!important;
    border-bottom:1px solid rgba(255,255,255,.05)!important;
    box-shadow:none!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  html body > header > .container.head{
    box-sizing:border-box!important;
    width:calc(100% - (var(--v12785-header-edge) * 2))!important;
    max-width:none!important;
    min-width:0!important;
    height:60px!important;
    min-height:60px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }

  /* Logo da campanha/vitrine com a mesma leitura visual do mobile: imagem arredondada
     levemente sobreposta dentro da faixa preta. */
  html body > header .header-brand,
  html body > header .brand{
    min-width:0!important;
    max-width:min(55%,210px)!important;
    height:54px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    display:flex!important;
    align-items:center!important;
    position:relative!important;
    z-index:2!important;
  }
  html body > header .header-brand img,
  html body > header .brand-image{
    display:block;
    width:auto!important;
    max-width:100%!important;
    height:auto!important;
    max-height:48px!important;
    object-fit:contain!important;
    object-position:left center!important;
    border-radius:11px!important;
    padding:2px 4px!important;
    background:rgba(4,8,7,.82)!important;
    box-shadow:0 5px 14px rgba(0,0,0,.18)!important;
    transform:translateY(2px)!important;
  }
  html body > header .top-links,
  html body > header .top-menu{
    margin-left:auto!important;
    margin-right:0!important;
    padding:0!important;
    flex:0 0 auto!important;
  }
  html body > header #topMenuBtn,
  html body > header #topMenuBtn:hover,
  html body > header #topMenuBtn:active,
  html body > header #topMenuBtn:focus,
  html body > header #topMenuBtn:focus-visible,
  html body > header #topMenuBtn[aria-expanded="false"],
  html body > header #topMenuBtn[aria-expanded="true"]{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }
  html body > header #topMenuBtn span,
  html body > header #topMenuBtn[aria-expanded="true"] span:nth-child(1),
  html body > header #topMenuBtn[aria-expanded="true"] span:nth-child(3){
    width:18px!important;
  }
  html body > header .top-menu-dropdown{
    right:calc(var(--public-centered-gutter) + var(--v12785-header-edge))!important;
    max-width:calc(var(--public-centered-canvas) - (var(--v12785-header-edge) * 2))!important;
  }

  /* Hero: no mobile ele sai do gutter de 5px e encosta na largura da viewport.
     No PC fazemos a mesma coisa, mas somente até as bordas do canvas central. */
  html body #campanha > .container > .layout > div:first-child{
    overflow:visible!important;
  }
  html body #campanha .campaign-hero-card{
    box-sizing:border-box!important;
    width:calc(100% + (var(--v12785-site-edge) * 2))!important;
    max-width:calc(100% + (var(--v12785-site-edge) * 2))!important;
    margin-left:calc(var(--v12785-site-edge) * -1)!important;
    margin-right:calc(var(--v12785-site-edge) * -1)!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }
  html body #campanha .campaign-hero-card > .cover,
  html body #campanha .campaign-hero-card > .campaign-hero-copy,
  html body #campanha .campaign-hero-card > .campaign-my-titles-bar,
  html body #campanha .campaign-hero-card > .campaign-hero-progress,
  html body #campanha .campaign-hero-card .campaign-progress-square{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  html body #campanha .campaign-hero-card > .cover{
    border-radius:0!important;
  }

  /* Compra: remove o segundo recuo interno que deixava as 6 opções de cotas estreitas. */
  html body #campanha #comprar.buy{
    padding-left:0!important;
    padding-right:0!important;
  }
  html body #campanha #purchaseOpenContent,
  html body #campanha #automaticPane,
  html body #campanha #packs,
  html body #campanha .packs,
  html body #campanha .qty-row,
  html body #campanha #checkoutBtn,
  html body #campanha .description-regulation-trigger,
  html body #campanha #verifyWinnerBtn{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Mesmo comportamento mobile para os seis botões: ocupa toda a largura útil. */
  html body #campanha #packs{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  html body #campanha #comprar #packs > button.pack{
    min-width:0!important;
    width:100%!important;
  }

  /* Preço, pacotes e Central de TAGs acompanham a mesma largura útil dos controles. */
  html body #campanha .campaign-post-hero-content,
  html body #campanha .campaign-price-row,
  html body #campanha #pacotes-promocionais,
  html body #campanha #campaignTagsCenter,
  html body #campanha .campaign-tags-center{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}