/* Ocultar texto dos botões de compartilhamento no mobile */
.share-button-text {
    display: none !important;
}

/* Desabilitar animações na faixa 481-767px para evitar overflow */
@media (min-width: 481px) and (max-width: 767px) {
    /* Desabilitar fadeInRight */
    #home .animate-fade-in-right,
    #inicio .animate-fade-in-right {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    /* DESABILITAR COMPLETAMENTE A ANIMAÇÃO gentle-pulse QUE CAUSA OVERFLOW */
    /* A animação scale(1.1) aumenta o elemento em 10% causando barra de rolagem */
    #home .animate-gentle-pulse,
    #inicio .animate-gentle-pulse,
    #home [class*="animate-gentle-pulse"],
    #inicio [class*="animate-gentle-pulse"],
    #home *[class*="animate-gentle-pulse"],
    #inicio *[class*="animate-gentle-pulse"] {
        animation: none !important;
        transform: none !important;
        transform: scale(1) !important;
    }
    
    /* OCULTAR ELEMENTO ESPECÍFICO QUE CAUSA OVERFLOW */
    /* Elemento: <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 via-transparent to-yellow-600/5 animate-gentle-pulse"> */
    #home > div.absolute.inset-0.animate-gentle-pulse,
    #inicio > div.absolute.inset-0.animate-gentle-pulse,
    #home > div.absolute[class*="inset-0"][class*="animate-gentle-pulse"],
    #inicio > div.absolute[class*="inset-0"][class*="animate-gentle-pulse"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        animation: none !important;
        transform: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    /* ========================================
       REMOVER BORDA DOURADA DA DIV MOBILE - IGUAL VERSÃO MOBILE
       ======================================== */
    
    /* ========================================
       REMOVER BORDA DOURADA DA DIV MOBILE - FAIXA 481-767px
       ======================================== */
    
    /* Remover borda dourada (border-yellow-500/30) da div mobile na faixa 481-767px */
    /* Elemento: <div class="relative z-10 bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-2 border border-yellow-500/30 shadow-2xl block md:hidden mx-auto max-w-xs"> */
    
    /* Seletores específicos para capturar o elemento e remover a borda */
    #home .grid > div:last-child > div.relative.z-10.block.md\\:hidden[class*="border-yellow"],
    #inicio .grid > div:last-child > div.relative.z-10.block.md\\:hidden[class*="border-yellow"],
    #home .grid > div:last-child > div.relative.z-10[class*="border-yellow"][class*="block"][class*="md:hidden"],
    #inicio .grid > div:last-child > div.relative.z-10[class*="border-yellow"][class*="block"][class*="md:hidden"],
    #home .max-w-xs[class*="border-yellow"][class*="block"][class*="md:hidden"],
    #inicio .max-w-xs[class*="border-yellow"][class*="block"][class*="md:hidden"],
    /* Seletores mais diretos para garantir que capture o elemento */
    #home .relative.z-10[class*="max-w-xs"][class*="border"],
    #inicio .relative.z-10[class*="max-w-xs"][class*="border"],
    #home div[class*="border-yellow-500"][class*="max-w-xs"],
    #inicio div[class*="border-yellow-500"][class*="max-w-xs"],
    /* Seletores ultra-específicos para capturar diretamente pela classe border-yellow-500/30 */
    #home div[class*="border-yellow-500/30"],
    #inicio div[class*="border-yellow-500/30"],
    /* Seletores diretos para qualquer div com border dentro do grid na última coluna */
    #home .grid > div:last-child div[class*="border"][class*="max-w-xs"],
    #inicio .grid > div:last-child div[class*="border"][class*="max-w-xs"],
    /* Remover borda de qualquer elemento com as classes relativas à div mobile */
    #home .relative.z-10.block.md\\:hidden.mx-auto.max-w-xs[class*="border"],
    #inicio .relative.z-10.block.md\\:hidden.mx-auto.max-w-xs[class*="border"],
    /* Seletores ainda mais específicos - captura direta pela estrutura completa */
    #home section .container .grid > div:last-child > div.relative.z-10[class*="max-w-xs"][class*="border"],
    #inicio section .container .grid > div:last-child > div.relative.z-10[class*="max-w-xs"][class*="border"],
    /* Captura direta de qualquer div com border-yellow dentro do grid */
    #home .grid > div:last-child > div[class*="border-yellow"],
    #inicio .grid > div:last-child > div[class*="border-yellow"] {
        border: none !important;
        border-width: 0 !important;
        border-color: transparent !important;
        border-style: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* REGRA ULTRA-ESPECÍFICA PARA REMOVER BORDA DOURADA DOS CANTOS DO TELEFONE */
    /* Captura qualquer elemento que tenha a classe border e esteja na div mobile */
    #home .relative.z-10[class*="border"][class*="max-w-xs"],
    #inicio .relative.z-10[class*="border"][class*="max-w-xs"],
    #home div.relative.z-10.block.md\\:hidden[class*="border"],
    #inicio div.relative.z-10.block.md\\:hidden[class*="border"],
    /* Qualquer div dentro da última coluna do grid que tenha border */
    #home .grid > div:last-child > *[class*="border"][class*="max-w-xs"],
    #inicio .grid > div:last-child > *[class*="border"][class*="max-w-xs"] {
        border: none !important;
        border-width: 0 !important;
        border-top-width: 0 !important;
        border-right-width: 0 !important;
        border-bottom-width: 0 !important;
        border-left-width: 0 !important;
        border-color: transparent !important;
        border-style: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    /* ========================================
       REGRA DIRETA PARA REMOVER BORDA AMARELA - FAIXA 481-767px
       ======================================== */
    /* Remove a borda amarela (border-yellow-500/30) da div mobile usando seletores por atributo */
    div.relative.z-10.block.md\\:hidden.max-w-xs[class*="border-yellow"],
    div[class*="relative"][class*="z-10"][class*="block"][class*="md:hidden"][class*="max-w-xs"][class*="border"],
    /* Seletores mais específicos para capturar o elemento */
    #home .grid > div:last-child > div.relative.z-10[class*="max-w-xs"][class*="border"],
    #inicio .grid > div:last-child > div.relative.z-10[class*="max-w-xs"][class*="border"],
    #home div[class*="block"][class*="md:hidden"][class*="max-w-xs"][class*="border-yellow"],
    #inicio div[class*="block"][class*="md:hidden"][class*="max-w-xs"][class*="border-yellow"] {
        border: none !important;
        border-width: 0 !important;
        border-top-width: 0 !important;
        border-right-width: 0 !important;
        border-bottom-width: 0 !important;
        border-left-width: 0 !important;
        border-color: transparent !important;
        border-style: none !important;
        outline: none !important;
    }
    
    /* ========================================
       REGRA FINAL SIMPLES E DIRETA - REMOVE BORDA AMARELA 481-767px
       ======================================== */
    /* Remove borda de qualquer div que tenha border-yellow e max-w-xs e seja block md:hidden */
    div[class*="border-yellow"][class*="max-w-xs"][class*="block"],
    /* Versão ainda mais abrangente - captura qualquer elemento com border-yellow na faixa mobile */
    *[class*="border-yellow-500"][class*="block"][class*="md:hidden"],
    /* Regra ultra-específica para garantir que capture o elemento exato */
    .relative.z-10.block.md\\:hidden.max-w-xs[class*="border"],
    div.relative.z-10.block.md\\:hidden.mx-auto.max-w-xs[class*="border"],
    /* Captura qualquer elemento que tenha border e max-w-xs e block md:hidden */
    [class*="max-w-xs"][class*="block"][class*="md:hidden"][class*="border"],
    /* Regra mais abrangente: remove borda de qualquer elemento block md:hidden max-w-xs com border */
    *[class*="block"][class*="md:hidden"][class*="max-w-xs"]:has([class*="border"]),
    /* Regra final garantida - remove qualquer borda de elementos com essas características */
    section .grid > div:last-child > div[class*="block"][class*="md:hidden"][class*="max-w-xs"],
    #home .grid > div:last-child > div[class*="block"][class*="md:hidden"][class*="max-w-xs"],
    #inicio .grid > div:last-child > div[class*="block"][class*="md:hidden"][class*="max-w-xs"],
    /* Regra específica para o elemento exato: remove borda amarela na faixa 481-767px */
    div.relative.z-10.bg-gradient-to-br.from-slate-800.to-slate-900.rounded-2xl.p-2.border.shadow-2xl.block.md\\:hidden.mx-auto.max-w-xs,
    /* Versão com seletores por atributo para garantir captura */
    div[class*="relative"][class*="z-10"][class*="bg-gradient-to-br"][class*="from-slate-800"][class*="to-slate-900"][class*="rounded-2xl"][class*="p-2"][class*="border"][class*="shadow-2xl"][class*="block"][class*="md:hidden"][class*="mx-auto"][class*="max-w-xs"] {
        border: none !important;
        border-width: 0 !important;
        border-top-width: 0 !important;
        border-right-width: 0 !important;
        border-bottom-width: 0 !important;
        border-left-width: 0 !important;
        border-color: transparent !important;
        border-style: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
}

/* Responsividade para o seletor */
@media (max-width: 767px) {
    /* Ocultar botões do header no mobile - FORÇAR OCULTAMENTO */
    #headerButtons {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Ocultar também os elementos filhos */
    #headerButtons * {
        display: none !important;
        visibility: hidden !important;
    }
    
    .md\\:hidden.flex.items-center.gap-2 {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .language-selector-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Ajustes gerais para mobile */
@media (max-width: 767px) {
    /* Títulos principais dos artigos (como "Poker Texas Hold'em") */
    section.pb-16 .bg-slate-900 h1 {
        font-size: 1.5rem !important;  /* menor no mobile para caber melhor */
        line-height: 1.3 !important;
    }
    
    /* Subtítulos logo abaixo do H1 */
    section.pb-16 .bg-slate-900 h1 + p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
    
    /* Header com padding reduzido */
    header {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    header .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Logo menor em mobile */
    header img {
        max-width: 100px !important;
        height: auto !important;
    }
    
    /* Seções com padding reduzido mas proporcional */
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Reduzir espaçamento superior da seção recursos/features no mobile */
    #recursos,
    #features {
        padding-top: 2rem !important; /* Reduzido de pt-20 (5rem) para 2rem no mobile */
    }
    
    /* Containers sem overflow */
    .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Container da seção hero - garantir que não ultrapasse e fique centralizado */
    #inicio .container,
    #home .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Grid com gap reduzido em mobile */
    .grid {
        gap: 1.5rem !important;
    }
    
    /* Cards e elementos com padding reduzido */
    .rounded-xl, .rounded-lg {
        padding: 1rem !important;
    }
    /* EXCEÇÃO 1: cards do blog não devem ter padding, para a imagem colar na borda do card */
    .blog-card.rounded-lg {
        padding: 0 !important;
    }
    /* EXCEÇÃO 2: cards da seção \"Últimas Atualizações\" na home também não devem ter padding */
    #atualizacoes a.flex.flex-col.h-full.rounded-lg {
        padding: 0 !important;
    }
    /* EXCEÇÃO 3: cards da seção \"Posts Relacionados\" no post também não devem ter padding */
    div.mt-12.pt-8.border-t a.flex.flex-col.h-full.rounded-lg {
        padding: 0 !important;
    }
    
    /* Garantir que imagens sejam responsivas */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Garantir que todos os containers da seção hero não ultrapassem - CORRIGIR OVERFLOW */
    #inicio,
    #home {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        position: relative !important;
    }
    
    /* Garantir que body e html não tenham overflow horizontal */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Garantir que a seção #inicio e seus filhos não causem overflow */
    #inicio > *,
    #home > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Garantir que elementos absolutos não ultrapassem */
    #inicio .relative.animate-fade-in-right > div.absolute,
    #home .relative.animate-fade-in-right > div.absolute {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Imagem da plataforma responsiva - ajustar altura em mobile (apenas desktop h-80) */
    .relative.overflow-hidden.rounded-xl.h-80 {
        height: 16rem !important; /* Ajuste proporcional para mobile */
        max-height: 16rem !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .relative.overflow-hidden.rounded-xl.h-80 img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        box-sizing: border-box !important;
    }

    /* Grid da seção hero - ajustes para todos os dispositivos */
    #inicio .grid,
    #home .grid {
        gap: 1rem !important; /* Reduzido para evitar overflow */
        width: 100% !important;
        max-width: 100% !important;
        place-items: center !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important; /* Força coluna única no mobile */
    }
    
    /* Em mobile, o grid fica em coluna única - centralizar ambos os itens */
    #inicio .grid > div,
    #home .grid > div {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* Não aplicar overflow: hidden aqui para preservar efeitos visuais */
    }
    
    /* Primeira coluna (texto) - garantir centralização e quebra de linha */
    #inicio .grid > div:first-child,
    #home .grid > div:first-child {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin: 0 auto !important;
    }
    
    /* H1 e parágrafo - garantir quebra de linha e centralização */
    #inicio .grid > div:first-child h1,
    #inicio .grid > div:first-child p,
    #home .grid > div:first-child h1,
    #home .grid > div:first-child p {
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Aumentar fontes apenas no mobile - H1 (ajustado para não ficar muito grande) */
    #inicio .grid > div:first-child h1,
    #home .grid > div:first-child h1 {
        font-size: 2rem !important; /* text-3xl - tamanho adequado para mobile */
        line-height: 1.3 !important;
    }
    
    /* Aumentar fontes apenas no mobile - Parágrafo (ajustado para não ficar muito grande) */
    #inicio .grid > div:first-child p,
    #home .grid > div:first-child p {
        font-size: 1.125rem !important; /* text-lg - tamanho adequado para mobile */
        line-height: 1.6 !important;
    }

    /* Linha de estatísticas (Qualidade / Seguro / 24/7) - evitar corte em telas pequenas */
    #inicio .hero-stats,
    #home .hero-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 0.5rem !important;
    }

    /* Imagem mobile - garantir que funcione igual em todas as versões */
    #inicio .max-w-xs[class*="block"][class*="md:hidden"],
    #home .max-w-xs[class*="block"][class*="md:hidden"],
    #inicio .max-w-xs.block,
    #home .max-w-xs.block,
    #inicio .relative.z-10.max-w-xs,
    #home .relative.z-10.max-w-xs {
        width: 100% !important;
        max-width: 20rem !important; /* max-w-xs = 20rem */
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Imagem dentro do picture na versão mobile */
    #inicio .max-w-xs picture,
    #home .max-w-xs picture,
    #inicio .relative.z-10 picture,
    #home .relative.z-10 picture {
        width: 100% !important;
        display: block !important;
    }
    
    #inicio .max-w-xs picture img,
    #home .max-w-xs picture img,
    #inicio .relative.z-10 picture img,
    #home .relative.z-10 picture img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
        border-radius: 0.75rem !important; /* rounded-xl */
    }
    
    /* Garantir que a div da imagem mobile na segunda coluna do grid funcione corretamente */
    #inicio .grid > div:last-child .max-w-xs,
    #home .grid > div:last-child .max-w-xs,
    #inicio .grid > div:last-child .relative.z-10.max-w-xs,
    #home .grid > div:last-child .relative.z-10.max-w-xs {
        width: 100% !important;
        max-width: 20rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

}

/* Ajustes específicos para iPhones e telas muito pequenas */
@media (max-width: 480px) {
    /* Tamanho do H1 em telas muito pequenas */
    #inicio .grid > div:first-child h1,
    #home .grid > div:first-child h1 {
        font-size: 1.75rem !important; /* text-2xl - adequado para telas pequenas */
        line-height: 1.3 !important;
    }
    
    /* Tamanho do parágrafo em telas muito pequenas */
    #inicio .grid > div:first-child p,
    #home .grid > div:first-child p {
        font-size: 1rem !important; /* text-base - adequado para telas pequenas */
        line-height: 1.5 !important;
    }
    
    /* Container da imagem - altura e largura ajustadas para telas muito pequenas */
    #inicio .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80,
    #home .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80 {
        height: 12rem !important; /* Reduzido para 12rem (192px) para caber melhor */
        max-height: 12rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    /* Garantir que o quadro da imagem caiba completamente na tela - ajuste final */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.relative.z-10,
    #home .grid > div:last-child > div.relative.animate-fade-in-right > div.relative.z-10 {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important; /* Sem padding para maximizar espaço */
    }
    
    /* Imagem dentro do container - garantir que respeite os limites */
    #inicio .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80 img,
    #home .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80 img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        box-sizing: border-box !important;
    }
    
    /* Container z-10 em telas muito pequenas - remover padding para evitar overflow */
    #inicio .grid > div:last-child > div.relative.z-10,
    #home .grid > div:last-child > div.relative.z-10 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important; /* Removido completamente para evitar overflow */
        box-sizing: border-box !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        margin: 0 !important;
        display: block !important;
    }
    
    /* Container externo animate-fade-in-right - SEM overflow hidden para evitar barra de rolagem */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right,
    #home .grid > div:last-child > div.relative.animate-fade-in-right {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    /* Segunda coluna (container da imagem) - reduzir padding ao mínimo - SEM overflow hidden */
    #inicio .grid > div:last-child,
    #home .grid > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.25rem !important; /* Reduzido ao mínimo */
        padding-right: 0.25rem !important; /* Reduzido ao mínimo */
        box-sizing: border-box !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* Container principal da seção hero - reduzir padding ao mínimo */
    #inicio .container,
    #home .container {
        padding-left: 0.5rem !important; /* Ajustado para telas muito pequenas */
        padding-right: 0.5rem !important; /* Ajustado para telas muito pequenas */
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Garantir que o grid tenha gap mínimo */
    #inicio .grid,
    #home .grid {
        gap: 0.5rem !important; /* Gap reduzido para telas pequenas */
    }
    
    /* Container da imagem - garantir que caiba na tela */
    #inicio .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80,
    #home .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ========================================
       REMOVER TODAS AS DIVS PULSANTES EM TELAS PEQUENAS
       ======================================== */
    
    /* Remover TODAS as divs pulsantes com animate-gentle-pulse na seção #inicio */
    #inicio div.absolute.animate-gentle-pulse[class*="bg-gradient"],
    #home div.absolute.animate-gentle-pulse[class*="bg-gradient"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Remover div específica: absolute inset-0 bg-gradient-to-br from-yellow-500/5 via-transparent to-yellow-600/5 animate-gentle-pulse */
    #inicio > div.absolute.inset-0.animate-gentle-pulse,
    #home > div.absolute.inset-0.animate-gentle-pulse {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Remover todas as divs absolutas com blur e animate-gentle-pulse */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute[class*="blur"][class*="animate-gentle-pulse"],
    #home .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute[class*="blur"][class*="animate-gentle-pulse"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Remover todas as divs com gradientes amarelos e blur */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute[class*="bg-gradient"][class*="yellow"][class*="blur"],
    #home .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute[class*="bg-gradient"][class*="yellow"][class*="blur"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Remover elementos com inset e blur */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.inset-0[class*="blur"],
    #home .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.inset-0[class*="blur"],
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.inset-4[class*="blur"],
    #home .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.inset-4[class*="blur"],
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.inset-8[class*="blur"],
    #home .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.inset-8[class*="blur"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Remover ícones decorativos "P" que podem causar overflow */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.z-10.animate-spin-slow,
    #home .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.z-10.animate-spin-slow {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Remover efeitos de luz pulsante nas bordas */
    #inicio .grid > div:last-child > div.relative.z-10.animate-glow,
    #home .grid > div:last-child > div.relative.z-10.animate-glow {
        animation: none !important;
        box-shadow: none !important;
        filter: none !important;
    }
    
    /* Remover borda e sombra amarela */
    #inicio .grid > div:last-child > div.relative.z-10[class*="border-yellow"],
    #home .grid > div:last-child > div.relative.z-10[class*="border-yellow"] {
        border-color: transparent !important;
        border-width: 0 !important;
    }
    
    #inicio .grid > div:last-child > div.relative.z-10,
    #home .grid > div:last-child > div.relative.z-10 {
        box-shadow: none !important;
        filter: none !important;
    }
    
    /* ========================================
       CORRIGIR OVERFLOW EM TELAS PEQUENAS
       ======================================== */
    
    /* Garantir que não haja overflow horizontal */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    /* Garantir que a seção #inicio não cause overflow */
    #inicio,
    #home {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 0.25rem !important; /* Reduzido ao mínimo */
        padding-right: 0.25rem !important; /* Reduzido ao mínimo */
        position: relative !important;
    }
    
    /* Garantir que todos os containers não ultrapassem */
    #inicio > *,
    #home > *,
    #inicio .container,
    #home .container,
    #inicio .grid,
    #home .grid,
    #inicio .grid > *,
    #home .grid > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Container da imagem - SEM overflow hidden para evitar barra de rolagem dupla */
    #inicio .grid > div:last-child,
    #home .grid > div:last-child {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        padding-left: 0.125rem !important; /* Mínimo possível */
        padding-right: 0.125rem !important; /* Mínimo possível */
    }
    
    /* Garantir que elementos absolutos não causem overflow - SEM barra de rolagem */
    #inicio .relative.animate-fade-in-right,
    #home .relative.animate-fade-in-right {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Limitar elementos decorativos absolutos para não ultrapassarem - igual versão PT */
    /* Container dos elementos decorativos - limitar para não causar overflow */
    #home > div.absolute.inset-0,
    #inicio > div.absolute.inset-0 {
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        max-height: 100% !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
        clip-path: inset(0 0 0 0) !important;
    }
    
    /* Elementos decorativos dentro do container - garantir que não ultrapassem */
    #home > div.absolute.inset-0 > div.absolute,
    #inicio > div.absolute.inset-0 > div.absolute {
        max-width: 100vw !important;
        max-height: 100vh !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
        position: absolute !important;
    }
    
    /* Garantir que a seção contenha todos os elementos sem overflow - igual versão PT */
    #home,
    #inicio {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        position: relative !important;
    }
    
    /* Garantir que o container z-10 caiba perfeitamente */
    #inicio .grid > div:last-child > div.relative.z-10,
    #home .grid > div:last-child > div.relative.z-10 {
        width: calc(100% - 0.25rem) !important; /* Considera padding do pai */
        max-width: calc(100% - 0.25rem) !important;
        margin: 0 auto !important;
    }
    
    /* Limitar elementos decorativos absolutos da seção para não causar overflow - igual versão PT */
    #home > div.absolute.inset-0 > div.absolute[class*="w-2"],
    #inicio > div.absolute.inset-0 > div.absolute[class*="w-2"],
    #home > div.absolute.inset-0 > div.absolute[class*="text-6xl"],
    #inicio > div.absolute.inset-0 > div.absolute[class*="text-6xl"],
    #home > div.absolute.inset-0 > div.absolute[class*="text-5xl"],
    #inicio > div.absolute.inset-0 > div.absolute[class*="text-5xl"],
    #home > div.absolute.inset-0 > div.absolute[class*="animate-smooth-float"],
    #inicio > div.absolute.inset-0 > div.absolute[class*="animate-smooth-float"] {
        max-width: 100vw !important;
        max-height: 100vh !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }
    
    /* Garantir que a seção contenha todos os elementos decorativos sem overflow */
    #home,
    #inicio {
        contain: layout style paint !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        position: relative !important;
    }
    
    /* Container absoluto da seção - limitar para não causar overflow */
    #home > div.absolute.inset-0,
    #inicio > div.absolute.inset-0 {
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* ========================================
   AJUSTES ESPECÍFICOS PARA TELAS DE 360px OU MENORES
   Garantir que não haja corte de conteúdo nas laterais
   ======================================== */
@media (max-width: 360px) {
    /* Reduzir ainda mais o padding para maximizar espaço */
    #inicio,
    #home {
        padding-left: 0.25rem !important; /* 4px */
        padding-right: 0.25rem !important; /* 4px */
    }
    
    #inicio .container,
    #home .container {
        padding-left: 0.5rem !important; /* 8px */
        padding-right: 0.5rem !important; /* 8px */
    }
    
    /* Reduzir gap do grid para telas muito pequenas */
    .grid {
        gap: 1rem !important; /* 16px ao invés de 24px */
    }
    
    #inicio .grid,
    #home .grid {
        gap: 0.75rem !important; /* 12px para telas de 360px */
    }
    
    /* Reduzir padding de cards e elementos arredondados */
    .rounded-xl, .rounded-lg {
        padding: 0.75rem !important; /* 12px ao invés de 16px */
    }
    /* EXCEÇÃO 1: cards do blog não devem ter padding em telas muito pequenas */
    .blog-card.rounded-lg {
        padding: 0 !important;
    }
    /* EXCEÇÃO 2: cards da seção \"Últimas Atualizações\" na home também não devem ter padding em telas muito pequenas */
    #atualizacoes a.flex.flex-col.h-full.rounded-lg {
        padding: 0 !important;
    }
    /* EXCEÇÃO 2.1: cards da seção \"Torneios de Hoje\" na home também não devem ter padding em telas muito pequenas */
    #torneios-destaque div.flex.flex-col.h-full.rounded-lg {
        padding: 0 !important;
    }
    /* EXCEÇÃO 3: cards da seção \"Posts Relacionados\" no post também não devem ter padding em telas muito pequenas */
    div.mt-12.pt-8.border-t a.flex.flex-col.h-full.rounded-lg {
        padding: 0 !important;
    }
    
    /* Garantir que nenhum elemento ultrapasse a largura da tela */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Header com padding mínimo */
    header {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    header .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Seções com padding reduzido */
    section {
        padding-left: 0.75rem !important; /* 12px */
        padding-right: 0.75rem !important; /* 12px */
    }
    
    /* Container da imagem - garantir que caiba perfeitamente */
    #inicio .grid > div:last-child,
    #home .grid > div:last-child {
        padding-left: 0.125rem !important; /* 2px - mínimo possível */
        padding-right: 0.125rem !important; /* 2px - mínimo possível */
    }
    
    /* Container z-10 ajustado para 360px */
    #inicio .grid > div:last-child > div.relative.z-10,
    #home .grid > div:last-child > div.relative.z-10 {
        width: calc(100% - 0.25rem) !important;
        max-width: calc(100% - 0.25rem) !important;
        padding: 0 !important;
    }
    
    /* Garantir overflow hidden em todos os containers */
    #inicio,
    #home,
    #inicio .container,
    #home .container,
    #inicio .grid,
    #home .grid {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* ========================================
   AJUSTE DINÂMICO PARA IMAGEM MOBILE (mesa_mobile.webp)
   Garantir que a imagem se ajuste perfeitamente à tela sem cortar
   Otimizado para diferentes resoluções: 360w, 480w, 640w
   ======================================== */
@media (max-width: 767px) {
    /* Container da imagem mobile - ajuste baseado na largura da tela */
    .relative.z-10.block.md\\:hidden.mx-auto,
    #inicio .relative.z-10.block.md\\:hidden.mx-auto,
    #home .relative.z-10.block.md\\:hidden.mx-auto {
        max-width: calc(100vw - 2rem) !important; /* Largura da tela menos padding */
        width: 100% !important;
        height: auto !important; /* Altura automática baseada no conteúdo */
        min-height: auto !important;
        max-height: none !important; /* SEM limitação de altura */
        box-sizing: border-box !important;
        overflow: visible !important; /* Não cortar conteúdo */
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* Picture element - garantir que não limite altura */
    .relative.z-10.block.md\\:hidden picture,
    #inicio .relative.z-10.block.md\\:hidden picture,
    #home .relative.z-10.block.md\\:hidden picture {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Ajuste específico para a imagem mesa_mobile.webp - SEM CORTES */
    /* Otimizado para diferentes resoluções de imagem */
    picture img[src*="mesa_mobile"],
    picture img[alt*="Mesa de Poker"],
    .relative.z-10.block.md\\:hidden img,
    .relative.z-10.block.md\\:hidden img.object-cover,
    #inicio .relative.z-10.block.md\\:hidden img,
    #home .relative.z-10.block.md\\:hidden img,
    #inicio .relative.z-10.block.md\\:hidden img.object-cover,
    #home .relative.z-10.block.md\\:hidden img.object-cover {
        width: 100% !important;
        height: auto !important; /* Altura automática mantém proporção */
        max-width: 100% !important;
        max-height: none !important; /* REMOVER qualquer limitação de altura */
        min-height: auto !important;
        object-fit: contain !important; /* Não cortar - mostrar imagem completa (sobrescreve object-cover) */
        object-position: center !important;
        display: block !important;
        /* Garantir que a imagem seja renderizada corretamente em qualquer resolução */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Garantir que o container pai também se ajuste */
    #inicio .grid > div:last-child,
    #home .grid > div:last-child {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    
    /* Container da imagem mobile - ajuste final */
    #inicio .relative.animate-fade-in-right > div.block.md\\:hidden,
    #home .relative.animate-fade-in-right > div.block.md\\:hidden {
        width: 100% !important;
        max-width: calc(100% - 1rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* Para telas muito pequenas (360px ou menos) - usar imagem mesa_mobile_360w.webp */
@media (max-width: 360px) {
    .relative.z-10.block.md\\:hidden.mx-auto,
    #inicio .relative.z-10.block.md\\:hidden.mx-auto,
    #home .relative.z-10.block.md\\:hidden.mx-auto {
        max-width: calc(100vw - 1rem) !important; /* Menos padding em telas pequenas */
        padding: 0.5rem !important; /* Reduzir padding interno */
        height: auto !important;
        max-height: none !important; /* SEM limitação de altura */
        overflow: visible !important;
    }
    
    /* Otimização para imagem 360w (360x640px) */
    picture img[src*="mesa_mobile"],
    picture img[alt*="Mesa de Poker"],
    .relative.z-10.block.md\\:hidden img,
    .relative.z-10.block.md\\:hidden img.object-cover,
    #inicio .relative.z-10.block.md\\:hidden img.object-cover,
    #home .relative.z-10.block.md\\:hidden img.object-cover {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important; /* SEM limitação de altura */
        object-fit: contain !important; /* Mostrar imagem completa (sobrescreve object-cover) */
        object-position: center !important;
        /* Garantir renderização nítida para imagem 360w */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Para telas médias mobile (361px - 480px) - usar imagem mesa_mobile_480w.webp */
@media (min-width: 361px) and (max-width: 480px) {
    /* Otimização para imagem 480w (480x853px) */
    picture img[src*="mesa_mobile"],
    picture img[alt*="Mesa de Poker"],
    .relative.z-10.block.md\\:hidden img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* Ajustes para telas um pouco maiores (tablets pequenos) - APLICAR MESMAS REGRAS DO MOBILE */
@media (min-width: 481px) and (max-width: 767px) {
    /* Garantir que não haja overflow horizontal - igual mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    #inicio .grid > div:first-child h1,
    #home .grid > div:first-child h1 {
        font-size: 2.25rem !important; /* text-4xl - tamanho intermediário */
    }
    
    #inicio .grid > div:first-child p,
    #home .grid > div:first-child p {
        font-size: 1.25rem !important; /* text-xl - tamanho intermediário */
    }
    
    /* Garantir que a seção #inicio não cause overflow - igual mobile */
    #inicio,
    #home {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 0.25rem !important; /* Reduzido ao mínimo */
        padding-right: 0.25rem !important; /* Reduzido ao mínimo */
        position: relative !important;
    }
    
    /* Garantir que todos os containers não ultrapassem - igual mobile */
    #inicio > *,
    #home > *,
    #inicio .container,
    #home .container,
    #inicio .grid,
    #home .grid,
    #inicio .grid > *,
    #home .grid > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Container da imagem - SEM overflow hidden para evitar barra de rolagem dupla - igual mobile */
    #inicio .grid > div:last-child,
    #home .grid > div:last-child {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        padding-left: 0.125rem !important; /* Mínimo possível */
        padding-right: 0.125rem !important; /* Mínimo possível */
    }
    
    /* Garantir que elementos absolutos não causem overflow - SEM barra de rolagem - igual mobile */
    #inicio .relative.animate-fade-in-right,
    #home .relative.animate-fade-in-right {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Limitar elementos decorativos absolutos para não ultrapassarem - igual mobile */
    /* Container dos elementos decorativos - limitar para não causar overflow */
    #home > div.absolute.inset-0,
    #inicio > div.absolute.inset-0 {
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        max-height: 100% !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
        clip-path: inset(0 0 0 0) !important;
    }
    
    /* Elementos decorativos dentro do container - garantir que não ultrapassem */
    #home > div.absolute.inset-0 > div.absolute,
    #inicio > div.absolute.inset-0 > div.absolute {
        max-width: 100vw !important;
        max-height: 100vh !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
        position: absolute !important;
    }
    
    /* Garantir que a seção contenha todos os elementos sem overflow - igual mobile */
    #home,
    #inicio {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        position: relative !important;
    }
    
    /* Garantir que o container z-10 caiba perfeitamente - igual mobile */
    #inicio .grid > div:last-child > div.relative.z-10,
    #home .grid > div:last-child > div.relative.z-10 {
        width: calc(100% - 0.25rem) !important; /* Considera padding do pai */
        max-width: calc(100% - 0.25rem) !important;
        margin: 0 auto !important;
    }
    
    /* Limitar elementos decorativos absolutos da seção para não causar overflow - igual mobile */
    #home > div.absolute.inset-0 > div.absolute[class*="w-2"],
    #inicio > div.absolute.inset-0 > div.absolute[class*="w-2"],
    #home > div.absolute.inset-0 > div.absolute[class*="text-6xl"],
    #inicio > div.absolute.inset-0 > div.absolute[class*="text-6xl"],
    #home > div.absolute.inset-0 > div.absolute[class*="text-5xl"],
    #inicio > div.absolute.inset-0 > div.absolute[class*="text-5xl"],
    #home > div.absolute.inset-0 > div.absolute[class*="animate-smooth-float"],
    #inicio > div.absolute.inset-0 > div.absolute[class*="animate-smooth-float"] {
        max-width: 100vw !important;
        max-height: 100vh !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }
    
    /* Garantir que a seção contenha todos os elementos decorativos sem overflow - igual mobile */
    #home,
    #inicio {
        contain: layout style paint !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        position: relative !important;
    }
    
    /* Container absoluto da seção - limitar para não causar overflow - igual mobile */
    #home > div.absolute.inset-0,
    #inicio > div.absolute.inset-0 {
        max-width: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    
    /* DESABILITAR ANIMAÇÃO - igual mobile */
    #home .relative.animate-fade-in-right,
    #inicio .relative.animate-fade-in-right,
    #home .animate-fade-in-right,
    #inicio .animate-fade-in-right {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    
    /* ========================================
       DESABILITAR ANIMAÇÃO gentle-pulse QUE CAUSA OVERFLOW
       A animação scale(1.1) aumenta o elemento e causa barra de rolagem
       ======================================== */
    
    /* Desabilitar animação gentle-pulse que causa overflow */
    /* A animação scale(1.1) aumenta o elemento causando overflow */
    #home .animate-gentle-pulse,
    #inicio .animate-gentle-pulse,
    #home [class*="animate-gentle-pulse"],
    #inicio [class*="animate-gentle-pulse"],
    #home *[class*="animate-gentle-pulse"],
    #inicio *[class*="animate-gentle-pulse"] {
        animation: none !important;
        transform: none !important;
        transform: scale(1) !important;
    }
    
    /* OCULTAR ELEMENTO ESPECÍFICO QUE CAUSA OVERFLOW */
    /* Elemento: <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 via-transparent to-yellow-600/5 animate-gentle-pulse"> */
    /* A animação scale(1.1) aumenta o elemento em 10% causando overflow horizontal */
    #home > div.absolute.inset-0.animate-gentle-pulse,
    #inicio > div.absolute.inset-0.animate-gentle-pulse,
    #home > div.absolute.inset-0[class*="animate-gentle-pulse"],
    #inicio > div.absolute.inset-0[class*="animate-gentle-pulse"],
    #home > div[class*="inset-0"][class*="animate-gentle-pulse"]:not([class*="container"]):not([class*="grid"]),
    #inicio > div[class*="inset-0"][class*="animate-gentle-pulse"]:not([class*="container"]):not([class*="grid"]) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        animation: none !important;
        transform: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
}
/* Mobile - garantir que não saia da tela */
@media (max-width: 767px) {
    #action-buttons-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        box-sizing: border-box !important;
    }
    
    #action-buttons-container > button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* Centralizar modal no mobile */
@media (max-width: 767px) {
    .modal-container {
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem !important;
        display: flex !important;
    }
    
    .modal-content {
        margin: 0 auto !important;
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
    }
    
    #installAppContent {
        text-align: left !important;
    }
}

/* ========================================
   AJUSTE DOS HEADERS DAS SEÇÕES DO BLOG EM MOBILE
   ======================================== */
@media (max-width: 639px) {
    /* Headers das seções do blog - colocar link abaixo do título e centralizar */
    .blog-section-header:not(.grid),
    section .blog-section-header:not(.grid),
    section.pb-16 .blog-section-header:not(.grid) {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }
    
    /* Centralizar título "Posts Relacionados" em mobile */
    div.mt-12.pt-8.border-t h2,
    div[class*="mt-12"][class*="pt-8"][class*="border-t"] h2 {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Grids com blog-section-header - remover comportamento grid e usar flex em mobile */
    .blog-section-header.grid,
    section .blog-section-header.grid,
    section.pb-16 .blog-section-header.grid,
    .grid.blog-section-header,
    section .grid.blog-section-header,
    section.pb-16 .grid.blog-section-header,
    div .blog-section-header.grid,
    div .grid.blog-section-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    
    .blog-section-header h2,
    section .blog-section-header h2,
    section.pb-16 .blog-section-header h2 {
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .blog-section-link,
    section .blog-section-link,
    section.pb-16 .blog-section-link {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
}

/* ========================================
   AJUSTE DO RODAPÉ DOS CARDS DO BLOG EM MOBILE
   ======================================== */
@media (max-width: 767px) {
    /* Reduzir padding lateral da seção do blog em mobile - reduzir ainda mais */
    section.pb-16[class*="px-4"],
    section.pb-16[class*="sm:px-6"],
    section.pb-16[class*="lg:px-8"] {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    /* Reduzir padding do container interno em mobile - reduzir ainda mais */
    section.pb-16 .bg-slate-900.rounded-xl[class*="p-6"],
    section.pb-16 .bg-slate-900.rounded-xl[class*="md:p-8"],
    section.pb-16 .bg-slate-900.rounded-xl[class*="lg:p-12"],
    section.pb-16 .bg-slate-900.rounded-xl.border[class*="p-6"],
    section.pb-16 .bg-slate-900.rounded-xl.border[class*="md:p-8"],
    section.pb-16 .bg-slate-900.rounded-xl.border[class*="lg:p-12"] {
        padding: 0.5rem !important;
    }
    
    /* Converter grid para flex em mobile - remover comportamento grid quando tem blog-section-header */
    section.pb-16 .grid.blog-section-header[class*="md:grid-cols-2"],
    section.pb-16 .grid.blog-section-header[class*="lg:grid-cols-3"],
    section.pb-16 .grid.blog-section-header[class*="lg:grid-cols-4"],
    section.pb-16 .blog-section-header.grid[class*="md:grid-cols-2"],
    section.pb-16 .blog-section-header.grid[class*="lg:grid-cols-3"],
    section.pb-16 .blog-section-header.grid[class*="lg:grid-cols-4"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    
    /* Garantir que os cards ocupem toda a largura disponível em mobile - similar ao blog-section-header */
    section.pb-16 .grid > a.flex.flex-col.h-full,
    section.pb-16 .grid > a[class*="bg-gradient"],
    section.pb-16 .grid > a[class*="blog-card"],
    section.pb-16 .grid[class*="md:grid-cols-2"] > a,
    section.pb-16 .grid[class*="lg:grid-cols-3"] > a,
    section.pb-16 .grid[class*="lg:grid-cols-4"] > a,
    .blog-section-header.grid > a.flex.flex-col.h-full,
    .grid.blog-section-header > a.flex.flex-col.h-full,
    div .blog-section-header.grid > a,
    div .grid.blog-section-header > a {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Padding interno dos cards em mobile para alinhar texto com a imagem,
       mas ainda deixar um respiro em torno do conteúdo.
       Aplica em cards do blog e nas \"Últimas Atualizações\" da home. */
    section .grid > a.flex.flex-col.h-full .flex.flex-col.flex-grow.p-6,
    #atualizacoes .grid > a.flex.flex-col.h-full .flex.flex-col.flex-grow.p-6,
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.flex-col.flex-grow.p-6,
    .blog-card .flex.flex-col.flex-grow.p-6 {
        padding: 0.75rem !important; /* ~12px */
    }

    /* Dar um pequeno respiro entre a imagem e a categoria no mobile */
    .blog-card span.text-xs {
        display: inline-block !important;
        margin-top: 0.35rem !important; /* ~5-6px */
    }
    
    /* Rodapé do card - ajustar layout em telas pequenas */
    /* Seletores usando atributo de classe para capturar border-t */
    section .grid > a.flex.flex-col.h-full .flex.items-center.justify-between[class*="border-t"],
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between[class*="border-t"],
    .blog-card .flex.items-center.justify-between[class*="border-t"],
    div.flex.items-center.justify-between.text-xs.text-gray-400.pt-4[class*="border-t"].flex-shrink-0.mt-auto {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding-top: 1.25rem !important;
    }
    
    /* Container de data e tempo de leitura - ajustar layout e ordem (primeiro) */
    section .grid > a.flex.flex-col.h-full .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center,
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center,
    .blog-card .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center,
    div.flex.items-center.justify-between.text-xs.text-gray-400.pt-4[class*="border-t"].flex-shrink-0.mt-auto > div.flex.items-center {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        width: 100% !important;
        font-size: 0.8125rem !important;
        order: 1 !important;
        padding-bottom: 0.25rem !important;
    }
    
    /* "Ler mais" - ajustar tamanho, espaçamento e ordem (segundo, abaixo) */
    section .grid > a.flex.flex-col.h-full .flex.items-center.justify-between[class*="border-t"] > span.text-yellow-400,
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between[class*="border-t"] > span.text-yellow-400,
    .blog-card .flex.items-center.justify-between[class*="border-t"] > span.text-yellow-400,
    div.flex.items-center.justify-between.text-xs.text-gray-400.pt-4[class*="border-t"].flex-shrink-0.mt-auto > span.text-yellow-400 {
        font-size: 0.9375rem !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        margin-top: 0.25rem !important;
        order: 2 !important;
    }
    
    /* Ícones SVG - reduzir tamanho em mobile */
    section .grid > a.flex.flex-col.h-full .flex.items-center.justify-between[class*="border-t"] svg,
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between[class*="border-t"] svg,
    .blog-card .flex.items-center.justify-between[class*="border-t"] svg,
    div.flex.items-center.justify-between.text-xs.text-gray-400.pt-4[class*="border-t"].flex-shrink-0.mt-auto svg {
        width: 0.75rem !important;
        height: 0.75rem !important;
    }
    
    /* Texto de data e tempo - ajustar tamanho */
    section .grid > a.flex.flex-col.h-full .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center > span,
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center > span,
    .blog-card .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center > span,
    div.flex.items-center.justify-between.text-xs.text-gray-400.pt-4[class*="border-t"].flex-shrink-0.mt-auto > div.flex.items-center > span {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }
}

/* Ajustes adicionais para telas muito pequenas (360px ou menos) */
@media (max-width: 360px) {
    /* Reduzir ainda mais o padding lateral em telas muito pequenas */
    section.pb-16[class*="px-4"],
    section.pb-16[class*="sm:px-6"],
    section.pb-16[class*="lg:px-8"] {
        padding-left: 0.125rem !important;
        padding-right: 0.125rem !important;
    }
    
    /* Reduzir ainda mais o padding do container interno */
    section.pb-16 .bg-slate-900.rounded-xl[class*="p-6"],
    section.pb-16 .bg-slate-900.rounded-xl[class*="md:p-8"],
    section.pb-16 .bg-slate-900.rounded-xl[class*="lg:p-12"],
    section.pb-16 .bg-slate-900.rounded-xl.border[class*="p-6"],
    section.pb-16 .bg-slate-900.rounded-xl.border[class*="md:p-8"],
    section.pb-16 .bg-slate-900.rounded-xl.border[class*="lg:p-12"] {
        padding: 0.375rem !important;
    }
    
    /* Converter grid para flex em telas muito pequenas - remover comportamento grid quando tem blog-section-header */
    section.pb-16 .grid.blog-section-header[class*="md:grid-cols-2"],
    section.pb-16 .grid.blog-section-header[class*="lg:grid-cols-3"],
    section.pb-16 .grid.blog-section-header[class*="lg:grid-cols-4"],
    section.pb-16 .blog-section-header.grid[class*="md:grid-cols-2"],
    section.pb-16 .blog-section-header.grid[class*="lg:grid-cols-3"],
    section.pb-16 .blog-section-header.grid[class*="lg:grid-cols-4"],
    div .grid.blog-section-header[class*="md:grid-cols-2"],
    div .grid.blog-section-header[class*="lg:grid-cols-3"],
    div .blog-section-header.grid[class*="md:grid-cols-2"],
    div .blog-section-header.grid[class*="lg:grid-cols-3"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
    }
    
    /* Garantir que os cards ocupem toda a largura em telas muito pequenas */
    section.pb-16 .grid[class*="md:grid-cols-2"] > a,
    section.pb-16 .grid[class*="lg:grid-cols-3"] > a,
    section.pb-16 .grid[class*="lg:grid-cols-4"] > a,
    .blog-section-header.grid > a,
    .grid.blog-section-header > a,
    div .blog-section-header.grid > a,
    div .grid.blog-section-header > a {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    
    /* Rodapé do card - manter espaçamento adequado mesmo em telas muito pequenas */
    section .grid > a.flex.flex-col.h-full .flex.items-center.justify-between[class*="border-t"],
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between[class*="border-t"],
    .blog-card .flex.items-center.justify-between[class*="border-t"],
    div.flex.items-center.justify-between.text-xs.text-gray-400.pt-4[class*="border-t"].flex-shrink-0.mt-auto {
        gap: 0.875rem !important;
        padding-top: 1rem !important;
    }
    
    /* Container de data e tempo - layout em coluna se necessário (mantém ordem 1) */
    section .grid > a.flex.flex-col.h-full .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center,
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center,
    .blog-card .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center,
    div.flex.items-center.justify-between.text-xs.text-gray-400.pt-4[class*="border-t"].flex-shrink-0.mt-auto > div.flex.items-center {
        gap: 0.625rem !important;
        font-size: 0.75rem !important;
        order: 1 !important;
        padding-bottom: 0.25rem !important;
    }
    
    /* Texto de data e tempo - tamanho adequado */
    section .grid > a.flex.flex-col.h-full .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center > span,
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center > span,
    .blog-card .flex.items-center.justify-between[class*="border-t"] > div.flex.items-center > span,
    div.flex.items-center.justify-between.text-xs.text-gray-400.pt-4[class*="border-t"].flex-shrink-0.mt-auto > div.flex.items-center > span {
        font-size: 0.75rem !important;
    }
    
    /* "Ler mais" - mantém ordem 2 (abaixo) com tamanho adequado */
    section .grid > a.flex.flex-col.h-full .flex.items-center.justify-between[class*="border-t"] > span.text-yellow-400,
    a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between[class*="border-t"] > span.text-yellow-400,
    .blog-card .flex.items-center.justify-between[class*="border-t"] > span.text-yellow-400,
    div.flex.items-center.justify-between.text-xs.text-gray-400.pt-4[class*="border-t"].flex-shrink-0.mt-auto > span.text-yellow-400 {
        order: 2 !important;
        font-size: 0.875rem !important;
        margin-top: 0.25rem !important;
    }
}

/* ========================================
   OCULTAR CÍRCULOS DECORATIVOS EM MOBILE E TELAS PEQUENAS
   ======================================== */
   @media (max-width: 1023px) {
    /* Ocultar todos os círculos decorativos em telas menores que lg (1024px) */
    #decorative-circle-yellow,
    #decorative-circle-red,
    #decorative-circle-blue,
    #decorative-circle-green,
    #decorative-circle-purple,
    #decorative-circle-orange {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Forçar que a versão inglesa (#home) siga EXATAMENTE as mesmas regras da portuguesa (#inicio) */
@media (max-width: 767px) {
    /* Remover borda dourada da div mobile - aplicar para ambos igualmente */
    #home .grid > div:last-child > div.relative.z-10.block.md\\:hidden[class*="border-yellow"],
    #inicio .grid > div:last-child > div.relative.z-10.block.md\\:hidden[class*="border-yellow"] {
        border: none !important;
        border-width: 0 !important;
        border-color: transparent !important;
    }
    
    /* Garantir overflow igual - sem barra de rolagem dupla */
    #home .container.mx-auto.relative.z-10,
    #inicio .container.mx-auto.relative.z-10 {
        overflow: visible !important;
    }
    
    /* Grid - garantir comportamento idêntico entre todas as versões */
    #home .container.mx-auto.relative.z-10 .grid,
    #inicio .container.mx-auto.relative.z-10 .grid,
    #inicio .container.mx-auto.relative.z-10 .grid.lg\\:grid-cols-2,
    #home .container.mx-auto.relative.z-10 .grid.lg\\:grid-cols-2 {
        overflow: visible !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important; /* Força coluna única no mobile */
        place-items: center !important;
    }
    
    /* Garantir que os elementos do grid sejam iguais */
    #home .grid > div,
    #inicio .grid > div {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Garantir que a animação do grid não cause barra de rolagem - idêntico para ambas versões */
    #home .grid > div:last-child > div.relative.animate-fade-in-right,
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Garantir que a borda seja idêntica - remover qualquer borda dourada extra */
    #home .grid > div:last-child > div.relative.z-10.block.md\\:hidden,
    #inicio .grid > div:last-child > div.relative.z-10.block.md\\:hidden {
        border: none !important;
        border-width: 0 !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
    
    /* Container com animação - garantir que não cause scroll */
    #home .container.mx-auto.relative.z-10 .grid > div:last-child > div.relative.animate-fade-in-right,
    #inicio .container.mx-auto.relative.z-10 .grid > div:last-child > div.relative.animate-fade-in-right {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Garantir que elementos absolutos dentro do animate-fade-in-right não ultrapassem - igual versão PT */
    #home .relative.animate-fade-in-right > div.absolute,
    #inicio .relative.animate-fade-in-right > div.absolute {
        max-width: calc(100% - 1rem) !important;
        box-sizing: border-box !important;
        position: absolute !important;
    }
    
    /* Garantir que o container animate-fade-in-right não ultrapasse os limites do grid */
    #home .grid > div:last-child > div.relative.animate-fade-in-right,
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* GARANTIR que o botão Download Now do header seja OCULTO no mobile */
    #headerButtons {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    #headerButtons * {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ========================================
       GARANTIR OVERFLOW IDÊNTICO - EN = PT
       ======================================== */
    /* Seção principal - overflow igual ao português */
    #home,
    #inicio {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        position: relative !important;
    }
    
    /* Container absoluto dos elementos decorativos - limitar para não causar overflow */
    #home > div.absolute.inset-0,
    #inicio > div.absolute.inset-0 {
        overflow: hidden !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
    
    /* Elementos decorativos absolutos - limitar para não ultrapassarem */
    #home > div.absolute.inset-0 > div.absolute,
    #inicio > div.absolute.inset-0 > div.absolute {
        max-width: 100vw !important;
        max-height: 100vh !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }
    
    /* Garantir que a seção não tenha overflow - replicar exatamente versão PT */
    section#home,
    section#inicio {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
    
    /* Container principal - garantir que contenha tudo sem overflow */
    #home .container.mx-auto.relative.z-10,
    #inicio .container.mx-auto.relative.z-10 {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Container dos elementos decorativos - FORÇAR limite para evitar overflow */
    #home > div.absolute.inset-0,
    #inicio > div.absolute.inset-0 {
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        clip-path: inset(0) !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
    
    /* Elementos decorativos - garantir que não ultrapassem os limites da seção */
    #home > div.absolute.inset-0 > div[style*="left"],
    #inicio > div.absolute.inset-0 > div[style*="left"] {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* Menu Mobile - Garantir scroll funcional */
#mobileMenu {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    max-height: calc(100vh - 4rem) !important;
}

#mobileMenu .container {
    padding-bottom: 2rem !important;
}