/*
 * Home — camada MOBILE (10/11/2026). Em teste no espelho /teste-mobile (App\Support\HomeMobile).
 * Regra: o desktop fica INTOCÁVEL — tudo de layout mora dentro de @media (max-width: 767px).
 * Fora da media query só a troca de texto: versão curta (.pg-so-cel) escondida no desktop.
 */
.pg-so-cel{display: none;}
/* o embrulho .pg-so-desk é um <span>: sem isto o "título span" do home-titulos.css pintaria o título inteiro de
   vermelho no desktop. Neutro aqui = só a parte vermelha original (span[style]) leva o degradê, como na Home real. */
/* seletor mais forte que o do home-titulos.css (.pg-doc.pg-8460 :is(...) .pg-heading-title span, com !important),
   senão a parte BRANCA do título ficava transparente no desktop (bug visto pelo Joel 10/11) */
.pg-doc .pg-heading-title .pg-so-desk,
.pg-doc.pg-8460 .pg-element .pg-heading-title span.pg-so-desk{background: none !important; color: inherit !important; filter: none !important;
    -webkit-background-clip: border-box !important; background-clip: border-box !important; text-shadow: inherit;}

@media (max-width: 767px){
    /* borda dos cards: branca e sutil — o fundo do site é escuro e imagem escura "sumia"; vermelho ficou marcado
       demais (Joel 10/11). Só as setas da taberna ficam vermelhas. */
    :root{--pg-borda-card: rgba(255,255,255,.32);}

    /* ---------- textos: no celular some o textão e aparece a versão curta ---------- */
    .pg-so-desk{display: none !important;}
    .pg-so-cel{display: inline;}

    /* ---------- tipografia das seções: título em até 2 linhas, apoio em 1–2 ---------- */
    .pg-cb02576 .pg-heading-title,
    .pg-42459a5 .pg-heading-title,
    .pg-a9d394e .pg-heading-title,
    .pg-8a972ac .pg-heading-title{font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -.01em;}
    .pg-2ebfd8e .pg-heading-title{font-size: 20px !important; line-height: 1.2 !important;}
    .pg-dd499cd .pg-heading-title,
    .pg-2ed34e3 .pg-heading-title,
    .pg-2ed34e3 .pg-heading-title span{font-size: 17px !important; line-height: 1.25 !important;}
    .pg-d2be315, .pg-d2be315 .pg-w-container,
    .pg-c8cebcf p, .pg-b34e675 p{font-size: 15px !important; line-height: 1.4 !important; color: #d8d8dc;}

    /* ---------- respiro entre seções: 50–100 px do desktop viram 28–36 px ---------- */
    .pg-3652d20{padding-top: 28px !important; padding-bottom: 28px !important;}
    .pg-bc5c519 > .pg-bloco-inner, .pg-9c2a5d3 > .pg-bloco-inner{padding-top: 32px !important; padding-bottom: 32px !important;}
    .pg-2fbee66 > .pg-bloco-inner{padding-top: 36px !important; padding-bottom: 28px !important;}

    /* ---------- topo: logo menor, menos espaço antes do conteúdo ---------- */
    .pg-a17ef5a img{max-height: 62px; width: auto !important;}

    /* ---------- seção 2: destaques ---------- */
    /* título "Pesados Gamers a plataforma gamer completa." some no celular: a notícia vem logo abaixo do menu (Joel 10/11) */
    .pg-cb02576{display: none !important;}
    .pg-3652d20{padding-top: 16px !important;}
    /* carrossel principal: imagem 224 px e o título FORA dela, embaixo, em 1 linha com "…" (pedido do Joel 10/11).
       A imagem é fundo do bloco .pg-0bce4c1; o slide ganha 32 px a mais para o título caber dentro dele. */
    .pg-04f91f7, .pg-e56a6e6{min-height: 0 !important; height: auto !important;}
    .pg-e56a6e6 .pg-0bce4c1{min-height: 224px !important; height: 224px !important; overflow: visible !important;}
    .pg-e56a6e6 .pg-cobre-wrap, .pg-e56a6e6 .pg-doc{height: 256px !important;}
    .pg-e56a6e6 .pg-doc.pg-4062 .pg-w-heading{top: 231px !important; bottom: auto !important; left: 2px !important; right: 2px !important;
        width: auto !important; max-width: none !important; overflow: hidden;}
    .pg-e56a6e6 .pg-heading-title{font-size: 16px !important; line-height: 1.3 !important; text-shadow: none !important;
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;}
    /* os outros destaques: lado a lado (2 colunas), cards baixos */
    .pg-5be9a4e{flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important;}
    .pg-5be9a4e > .pg-element{flex: 1 1 0 !important; min-width: 0; width: auto !important;}
    .pg-5be9a4e .pg-w-image img{height: 112px !important; object-fit: cover;}
    /* título FORA da imagem, embaixo, em 1 linha com "…" (pedido do Joel 10/11) */
    .pg-5be9a4e .pg-0bce4c1{display: flex !important; flex-direction: column !important; min-height: 0 !important; height: auto !important;}
    .pg-5be9a4e .pg-w-image{order: 1;}
    .pg-5be9a4e .pg-doc.pg-4077 .pg-w-heading{order: 2; position: static !important; width: 100% !important; inset: auto !important;
        transform: none !important; margin: 0 !important; padding: 7px 2px 0 !important;}
    .pg-5be9a4e .pg-heading-title{font-size: 14px !important; line-height: 1.25 !important; text-shadow: none !important;
        display: block !important; -webkit-line-clamp: unset; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;}
    .pg-5be9a4e .pg-w-image img{border-radius: 8px; border: 1px solid var(--pg-borda-card);}
    .pg-e56a6e6 .pg-0bce4c1{border: 1px solid var(--pg-borda-card) !important; border-radius: 8px !important;}
    .pg-5be9a4e .pg-doc.pg-4077 .pg-w-heading, .pg-5be9a4e .pg-w-heading .pg-w-container{min-width: 0; max-width: 100% !important; overflow: hidden;}
    .pg-5be9a4e .pg-heading-title, .pg-5be9a4e .pg-heading-title *{max-width: 100%; width: auto !important;}
    .pg-5be9a4e .pg-heading-title a{display: inline !important; white-space: nowrap !important;}
    .pg-5be9a4e .pg-w-button .pg-button{font-size: 10px !important; padding: 4px 7px !important;}

    /* ---------- seção 3: "Direto da taberna" (Joel 10/11) ----------
       título colado no card; card na largura toda (como os de notícia) com borda; setas pequenas na linha do
       título, nos cantos; título do conteúdo em 1 linha com "…" */
    .pg-2ebfd8e .pg-w-container{padding: 24px 0 12px !important;}
    .pg-286229b > .pg-w-container{padding: 0 !important;}
    .pg-286229b .pg-grade{margin: 0 !important;}
    .pg-286229b .pg-b98ad73{border: 1px solid var(--pg-borda-card) !important; border-radius: 10px !important; overflow: hidden;}
    .pg-286229b .pg-grade__slider-icon{top: -40px !important; margin: 0 !important; width: 30px !important; height: 30px !important;
        display: flex !important; align-items: center; justify-content: center;
        border: 2px solid #e3192b; border-radius: 50%; background: rgba(0,0,0,.45); color: #ff3344;}
    .pg-286229b .pg-grade__slider-icon svg{width: 16px !important; height: 16px !important;}
    .pg-286229b .pg-grade__slider-icon svg path{fill: #ff3344 !important; stroke: #ff3344 !important;}
    .pg-286229b .prev-arrow{left: 0 !important; right: auto !important;}
    .pg-286229b .next-arrow{right: 0 !important; left: auto !important;}
    .pg-286229b .pg-2a1ae83 .pg-campo__inline-wrap{min-width: 0; width: 100%;}
    .pg-286229b .pg-2a1ae83 .pg-campo__content{min-width: 0; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;}

    /* ---------- seção 4: jogos (Joel 10/11) — 2 capas por vez, inteiras (recortar cortou o logo; 3 ficou pequeno).
       Título 1 linha + subtítulo 1 linha, colados; UM par de setas no topo, ladeando o texto (o do 1º carrossel) que move os dois
       carrosséis (sincronia em HomeMobile::SCRIPT); setas laterais do 2º somem; borda sutil nas capas ---------- */
    .pg-bc5c519 > .pg-bloco-inner{row-gap: 0 !important; gap: 0 !important;}
    .pg-42459a5 .pg-w-container, .pg-d2be315 .pg-w-container{margin: 0 !important; padding: 0 !important;}
    .pg-42459a5 .pg-heading-title{white-space: nowrap; font-size: 24px !important; line-height: 1.2 !important; margin: 0 !important;}
    /* títulos das seções (jogos, clã, mundo dos jogos, crie e compartilhe) — mesma tipografia do desktop (home-titulos.css, que só vale ≥1025px): Roboto 900, sombra preta forte,
       parte vermelha em degradê com brilho; subtítulo cinza-claro com sombra, peso 500 no celular (Joel 10/11) */
    :is(.pg-42459a5,.pg-a9d394e,.pg-8a972ac,.pg-f1f297c) .pg-heading-title{font-family: Roboto, sans-serif !important; font-weight: 900 !important; letter-spacing: -.01em;
        color: #f1f1f3 !important; text-shadow: 0 1px 4px rgba(0,0,0,.8);
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.95)) drop-shadow(0 0 8px rgba(0,0,0,.85));}
    :is(.pg-42459a5,.pg-a9d394e,.pg-8a972ac) .pg-heading-title span[style],
    .pg-f1f297c .pg-heading-title{
        background: linear-gradient(180deg,#ff4b56,#d10f1f 60%,#a30814); -webkit-background-clip: text; background-clip: text;
        color: transparent !important; text-shadow: none;
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.95)) drop-shadow(0 0 8px rgba(0,0,0,.85)) drop-shadow(0 0 12px rgba(255,30,45,.35));}
    :is(.pg-d2be315,.pg-c8cebcf,.pg-fb5cb5f,.pg-b34e675), :is(.pg-d2be315,.pg-c8cebcf,.pg-fb5cb5f,.pg-b34e675) p{font-family: Roboto, sans-serif !important; font-weight: 500 !important; color: #d6d6da !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.9);}
    .pg-d2be315{margin: 6px 0 0 !important;}
    .pg-d2be315, .pg-d2be315 p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0 !important;}
    .pg-172d9aa{margin-top: -20px !important;}
    .pg-172d9aa .pg-grade__slider-icon{top: -78px !important; margin: 0 !important; width: 30px !important; height: 30px !important;
        display: flex !important; align-items: center; justify-content: center;
        border: 2px solid #e3192b; border-radius: 50%; background: rgba(0,0,0,.45); color: #ff3344;}
    .pg-172d9aa .pg-grade__slider-icon svg{width: 16px !important; height: 16px !important;}
    .pg-172d9aa .pg-grade__slider-icon svg path{fill: #ff3344 !important; stroke: #ff3344 !important;}
    .pg-172d9aa .prev-arrow{left: 0 !important; right: auto !important;}
    .pg-172d9aa .next-arrow{right: 0 !important; left: auto !important;}
    .pg-7c654e8 .pg-grade__slider-icon{display: none !important;}
    /* borda só na imagem da frente: no card inteiro ela cortava o personagem que sai do card no toque */
    .pg-172d9aa .img_card_home, .pg-7c654e8 .img_card_home{border: 1px solid var(--pg-borda-card) !important; border-radius: 8px;}

    /* ---------- seção 5: "Encontre um clã" (Joel 10/11) — título 1 linha + subtítulo 1 linha; setas do card do clã
       saem de cima do banner e vão para fora, ladeando o texto (como na seção dos jogos); ATIVO colado embaixo do
       emblema; VER CLÃ e DIVULGAR CLÃ lado a lado, 50% cada ---------- */
    .pg-a9d394e .pg-heading-title{white-space: nowrap; font-size: 24px !important; line-height: 1.2 !important; margin: 0 !important;}
    .pg-a9d394e .pg-w-container, .pg-c8cebcf .pg-w-container{margin: 0 !important; padding: 0 !important;}
    .pg-c8cebcf{margin: 6px 0 0 !important;}
    .pg-c8cebcf, .pg-c8cebcf p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0 !important;}
    /* setas continuam presas ao banner (é nele que o JS as procura); só libera o corte para elas saírem por cima */
    .pg-2fbee66 .pg-jc, .pg-2fbee66 .pg-jc-cla, .pg-2fbee66 .pg-jc-cla__capa{overflow: visible !important;}
    .pg-2fbee66 .pg-jc{margin-top: 20px !important;}
    .pg-2fbee66 .pg-jc-seta{position: absolute !important; top: -73px !important; margin: 0 !important;
        width: 30px !important; height: 30px !important; backdrop-filter: none;
        border: 2px solid #e3192b !important; border-radius: 50%; background: rgba(0,0,0,.45) !important; color: #ff3344 !important;}
    .pg-2fbee66 .pg-jc-seta svg{width: 16px !important; stroke: #ff3344 !important; stroke-width: 2.5 !important;}
    .pg-2fbee66 .pg-jc-seta--esq{left: -7px !important; right: auto !important;}
    .pg-2fbee66 .pg-jc-seta--dir{right: -7px !important; left: auto !important;}
    .pg-2fbee66 .pg-jc-cla__info{grid-template-areas: "emblema dados" "status dados" "acoes acoes";
        grid-template-columns: 96px minmax(0,1fr) !important; row-gap: 8px !important; align-items: start !important;}
    .pg-2fbee66 .pg-jc-cla__emblema{grid-area: emblema;}
    .pg-2fbee66 .pg-jc-cla__dados{grid-area: dados;}
    .pg-2fbee66 .pg-jc-status{grid-area: status; height: 34px !important; font-size: 13px !important;}
    .pg-2fbee66 .pg-jc-cla__acoes{grid-area: acoes; flex-direction: row !important; gap: 8px !important;}
    .pg-2fbee66 .pg-jc-cla__acoes .pg-jc-botao{flex: 1 1 0 !important; height: 42px !important; padding: 0 6px !important;
        gap: 6px !important; font-size: 13px !important; white-space: nowrap;}
    .pg-2fbee66 .pg-jc-cla__acoes .pg-jc-botao__seta{display: none !important;}

    /* ---------- seção 5: card do jogo — plataformas quebram linha em vez de cortar ---------- */
    .pg-jc-jogo__chips{flex-wrap: wrap !important; row-gap: 6px;}

    /* ---------- seção 6a: "Crie uma página para o seu clã" — fluxo normal em vez da arte encolhida ---------- */
    .pg-cla2{aspect-ratio: auto !important; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 8px;
        grid-template-areas: "topo topo" "aparelhos aparelhos" "painel painel" "cad ver"; padding: 44px 16px 36px;}
    .pg-cla2__topo{grid-area: topo; position: static !important;}
    .pg-cla2__titulo{font-size: 25px !important;}
    .pg-cla2__subtitulo{margin-top: 8px !important; font-size: 15px !important; line-height: 1.4 !important;}
    .pg-cla2__aparelho{grid-area: aparelhos; position: relative !important; left: auto !important; top: auto !important;}
    .pg-cla2__notebook{width: 84% !important; justify-self: end;}
    .pg-cla2__celular{width: 30% !important; justify-self: start; align-self: end;}
    /* janela "Tudo que seu clã precisa" (Joel 10/11): em pé e SEM moldura — monitor com a página real do clã em
       cima, depois título, linha e os 6 botões (que trocam a aba no monitor) */
    .pg-cla2__painel{grid-area: painel; position: relative !important; left: auto !important; top: auto !important;
        width: auto !important; height: auto !important; margin-top: 4px; display: flex; flex-direction: column;}
    /* sem título nem linha no celular (Joel 10/11): monitor e botões direto */
    .pg-cla2__moldura, .pg-cla2__painel-titulo, .pg-cla2__divisor{display: none !important;}
    .pg-cla2__monitor{order: -1;}
    .pg-cla2__painel-titulo{position: static !important; margin: 4px 0 0 !important; font-size: 16px !important; white-space: normal !important; text-align: center;}
    .pg-cla2__divisor{position: static !important; display: block; width: 80% !important; margin: 10px auto 14px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), rgba(120,40,40,.4), transparent) !important;}
    .pg-cla2__monitor{position: relative !important; left: auto !important; top: auto !important; width: 100% !important;
        height: auto !important; aspect-ratio: 422 / 300; margin: 0 0 12px; padding: 6px !important; border-radius: 8px !important;
        transform: none !important;}
    .pg-cla2__recursos{position: static !important; grid-template-columns: 1fr 1fr !important; grid-auto-rows: 54px !important; gap: 8px !important;}
    .pg-cla2__recurso{gap: 10px !important; padding: 0 10px !important; border-radius: 8px !important;}
    .pg-cla2__recurso i{width: 22px !important; font-size: 19px !important;}
    .pg-cla2__recurso strong{font-size: 13px !important;}
    .pg-cla2__recurso small{font-size: 11px !important; white-space: normal !important; margin-top: 1px !important;}
    .pg-cla2__acao{position: static !important; width: 100% !important; height: 46px !important; gap: 7px !important;
        font-size: 11.5px !important; border-radius: 8px;}  /* menor a pedido do Joel 10/11 */
    .pg-cla2__acao i{font-size: 12px !important;}
    .pg-cla2__acao .fa-chevron-right{font-size: 9px !important;}
    .pg-cla2__acao--cadastrar{grid-area: cad;}
    .pg-cla2__acao--ver{grid-area: ver;}

    /* ---------- seção 6b: Turbo "Agora você tem o controle!" (Joel 10/11) — título 1 linha + subtítulo 1 linha, cards
       com ícone e título lado a lado (descrição embaixo), notebook e só depois o botão Turbo Grátis ---------- */
    .pg-turbo2{aspect-ratio: auto !important; display: flex; flex-direction: column; align-items: center; gap: 14px;
        padding: 48px 16px 40px; text-align: center;}
    .pg-turbo2__titulo{position: static !important; font-size: 28px !important; white-space: nowrap !important;}
    .pg-turbo2__titulo span{display: inline !important;}
    .pg-turbo2__texto{position: static !important; width: auto !important; margin-top: -8px !important; font-size: 15px !important;
        font-weight: 500 !important; line-height: 1.4 !important; white-space: nowrap; color: #d6d6da !important; text-shadow: 0 1px 3px rgba(0,0,0,.9);}
    .pg-turbo2__botao{position: static !important; order: 5; width: 220px !important; height: 46px !important; gap: 10px !important;
        font-size: 16px !important; border-radius: 9px !important;}
    .pg-turbo2__botao svg{width: 19px !important; height: 19px !important;}
    .pg-turbo2__cards{position: static !important; width: 100%; grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: auto !important; gap: 8px !important; text-align: left;}
    .pg-turbo2__card{display: grid !important; grid-template-columns: 30px minmax(0,1fr); align-items: center !important;
        gap: 8px 9px !important; padding: 12px !important; border-radius: 10px !important;}
    .pg-turbo2__card > div{display: contents;}
    .pg-turbo2__card img{width: 30px !important;}
    .pg-turbo2__card h3{font-size: 14px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; margin: 0 !important;}
    .pg-turbo2__card p{grid-column: 1 / -1; font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important;}
    .pg-turbo2__lateral--esq, .pg-turbo2__lateral--dir{display: none !important;}
    .pg-turbo2__notebook{position: static !important; order: 4; width: 100% !important; margin-top: 6px;}

    /* ---------- seção 7: "Crie e compartilhe" (Joel 10/11) — título 1 linha + subtítulo 1 linha; título do tutorial
       colado no vídeo; embaixo do 1º vídeo "Criar postagem" e "Compartilhar dica" lado a lado (50% cada); embaixo do
       2º vídeo "Cadastrar Clã" na largura toda. A seção já é flex com quebra de linha: só a ordem muda. ---------- */
    .pg-8a972ac .pg-heading-title{white-space: nowrap; font-size: 24px !important; line-height: 1.2 !important; margin: 0 !important;}
    .pg-8a972ac .pg-w-container, .pg-b34e675 .pg-w-container{margin: 0 !important; padding: 0 !important;}
    .pg-b34e675{margin: 6px 0 0 !important;}
    .pg-b34e675, .pg-b34e675 p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0 !important;}
    .pg-9c2a5d3 > .pg-bloco-inner{column-gap: 8px !important; justify-content: center;}
    .pg-d40ae2f{order: 1; margin-top: 22px !important;}
    .pg-499fc3a, .pg-f86bd08{order: 2;}
    .pg-48a3105{order: 3; margin-top: 26px !important;}
    .pg-2b927b4{order: 4;}
    .pg-dd499cd .pg-w-container, .pg-2ed34e3 .pg-w-container{margin: 0 !important; padding: 0 0 8px !important;}
    .pg-dd499cd, .pg-2ed34e3{margin: 0 !important; padding: 0 !important;}
    .pg-d40ae2f, .pg-48a3105, .pg-d40ae2f > .pg-bloco-inner, .pg-48a3105 > .pg-bloco-inner{gap: 0 !important; row-gap: 0 !important;}
    .pg-499fc3a, .pg-f86bd08{width: 158px !important; max-width: none; margin: 10px 0 0 !important;}
    .pg-2b927b4{width: 324px !important; max-width: 100%; margin: 10px auto 0 !important;}
    .pg-499fc3a > .pg-w-container, .pg-f86bd08 > .pg-w-container, .pg-2b927b4 > .pg-w-container{margin: 0 !important; padding: 0 !important;}
    .pg-499fc3a .pg-botao__instance, .pg-f86bd08 .pg-botao__instance, .pg-2b927b4 .pg-botao__instance{width: 100% !important;
        height: 40px; justify-content: center; white-space: nowrap;}

    /* ---------- esteira de jogos (fim da página): cards em 50% do tamanho, MESMA proporção deitada (Joel 10/11) —
       metade da largura (2 por tela em vez de 1); altura pela proporção 16:9 das capas (960×540) para a arte
       aparecer inteira, sem corte em cima e embaixo (85 px cortava — Joel 10/11) ---------- */
    .pg-esteira__trilho{--pg-esteira-por-vez: 2 !important;}
    .pg-esteira .pg-carousel-slide img{height: auto !important; aspect-ratio: 16 / 9;}
    .pg-esteira .pg-carousel-title{padding: 5px 4px !important; font-size: 11px !important;}

    /* ---------- rodapé: as 7 redes numa linha só (48 px + 5 px não cabiam em 360 px; TikTok caía sozinho) ---------- */
    .pg-45dfa60 img, .pg-1fe345f img, .pg-4ef0a34 img, .pg-840d88b img, .pg-97ee15f img, .pg-2c43ab4 img, .pg-7708473 img{width: 42px !important; height: 42px !important;}
    .pg-45dfa60, .pg-1fe345f, .pg-4ef0a34, .pg-840d88b, .pg-97ee15f, .pg-2c43ab4, .pg-7708473{width: 42px !important;}
}