/* ========================================
   POKERFI - ESTILOS PRINCIPAIS
   ======================================== */

/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100% !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #e2e8f0;
    overflow-x: hidden !important;
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Wrapper principal - garantir footer no final */
/* Removido CSS duplicado - usando apenas a versão no final do arquivo */

/* ========================================
   ANIMAÇÕES PERSONALIZADAS
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
    }
}

@keyframes bounceSubtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
    }
}

@keyframes gentle-pulse {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.1);
    }
}

@keyframes gentle-bounce {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes smooth-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-15px) rotate(2deg);
    }
    66% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes gentle-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
        transform: scale(1.02);
    }
}

@keyframes soft-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.2), 0 0 30px rgba(251, 191, 36, 0.1);
        opacity: 0.3;
    }
    50% {
        box-shadow: 0 0 25px rgba(251, 191, 36, 0.4), 0 0 50px rgba(251, 191, 36, 0.2);
        opacity: 0.4;
    }
}

@keyframes gentle-bounce-subtle {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Classes de Animação */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-spin-slow {
    animation: spinSlow 20s linear infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-soft-glow {
    animation: soft-glow 3s ease-in-out infinite;
}

.animate-gentle-bounce-subtle {
    animation: gentle-bounce-subtle 2s ease-in-out infinite;
}

.animate-bounce-subtle {
    animation: bounceSubtle 2s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

.animate-gentle-pulse {
    animation: gentle-pulse 3s ease-in-out infinite;
}

.animate-gentle-bounce {
    animation: gentle-bounce 2s ease-in-out infinite;
}

.animate-smooth-float {
    animation: smooth-float 4s ease-in-out infinite;
}

.animate-gentle-pulse-glow {
    animation: gentle-pulse-glow 2s ease-in-out infinite;
}

/* ========================================
   LOADING SCREEN
   ======================================== */

#pageLoader {
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#pageLoader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Conteúdo da página - invisível até carregar (SEO-friendly) */
.page-content-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in, visibility 0.5s ease-in;
}

.page-content-visible {
    opacity: 1;
    visibility: visible;
}

/* pageContent deve ser flex container e ocupar TODO o espaço disponível do body */
#pageContent {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    min-height: 100vh !important;
}

/* min-h-screen dentro do pageContent deve crescer para ocupar todo o espaço */
#pageContent > .min-h-screen {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    min-height: 100vh !important;
}

/* Animação de rotação lenta para a logo */
@keyframes spin-slow-loader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loader-spin {
    animation: spin-slow-loader 3s linear infinite;
}

/* Animação de mudança de cor para os naipes - da esquerda para direita */
@keyframes suit-color-change {
    0%, 100% {
        color: #fbbf24; /* amarelo ouro */
    }
    50% {
        color: #ffffff; /* branco */
    }
}

.suit-icon {
    animation: suit-color-change 0.3s ease-in-out infinite;
    display: inline-block;
    /* Velocidade: 10x mais rápido que a logo (logo 3s = 1 rotação, naipes 0.3s = 10 ciclos por rotação) */
}

/* Delay escalonado da esquerda para direita (efeito onda) */
.suit-icon:nth-child(1) {
    animation-delay: 0s; /* ♠ primeiro */
}

.suit-icon:nth-child(2) {
    animation-delay: 0.075s; /* ♥ segundo */
}

.suit-icon:nth-child(3) {
    animation-delay: 0.15s; /* ♦ terceiro */
}

.suit-icon:nth-child(4) {
    animation-delay: 0.225s; /* ♣ quarto */
}

/* Animação de mudança de cor para o texto CARREGANDO - metade da velocidade dos naipes */
#loadingText {
    animation: suit-color-change 0.6s ease-in-out infinite;
    /* Metade da velocidade dos naipes (naipes 0.3s, texto 0.6s) */
}

/* ========================================
   ANIMAÇÕES BLOCKCHAIN
   ======================================== */

@keyframes blockchain-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

@keyframes blockchain-flow {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes blockchain-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes blockchain-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(187, 153, 19, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(187, 153, 19, 0.6);
    }
}

/* ========================================
   ELEMENTOS BLOCKCHAIN
   ======================================== */

.blockchain-bg {
    position: relative;
    overflow: hidden;
}

.blockchain-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.blockchain-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #bb9913, transparent);
    animation: blockchain-flow 3s ease-in-out infinite;
}

.blockchain-line:nth-child(1) {
    top: 20%;
    left: 0;
    width: 100%;
    animation-delay: 0s;
}

.blockchain-line:nth-child(2) {
    top: 40%;
    left: 0;
    width: 100%;
    animation-delay: 0.5s;
}

.blockchain-line:nth-child(3) {
    top: 60%;
    left: 0;
    width: 100%;
    animation-delay: 1s;
}

.blockchain-line:nth-child(4) {
    top: 80%;
    left: 0;
    width: 100%;
    animation-delay: 1.5s;
}

.blockchain-line:nth-child(5) {
    top: 0;
    left: 20%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #bb9913, transparent);
    animation: blockchain-flow 4s ease-in-out infinite;
    animation-delay: 0.2s;
}

.blockchain-line:nth-child(6) {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #bb9913, transparent);
    animation: blockchain-flow 4s ease-in-out infinite;
    animation-delay: 1.2s;
}

.blockchain-line:nth-child(7) {
    top: 0;
    left: 80%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #bb9913, transparent);
    animation: blockchain-flow 4s ease-in-out infinite;
    animation-delay: 2.2s;
}

.blockchain-nodes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.blockchain-node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #bb9913;
    border-radius: 50%;
    animation: blockchain-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(187, 153, 19, 0.5);
}

.blockchain-node:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.blockchain-node:nth-child(2) {
    top: 20%;
    left: 50%;
    animation-delay: 0.3s;
}

.blockchain-node:nth-child(3) {
    top: 20%;
    left: 80%;
    animation-delay: 0.6s;
}

.blockchain-node:nth-child(4) {
    top: 50%;
    left: 20%;
    animation-delay: 0.9s;
}

.blockchain-node:nth-child(5) {
    top: 50%;
    left: 50%;
    animation-delay: 1.2s;
}

.blockchain-node:nth-child(6) {
    top: 50%;
    left: 80%;
    animation-delay: 1.5s;
}

.blockchain-node:nth-child(7) {
    top: 80%;
    left: 20%;
    animation-delay: 1.8s;
}

.blockchain-node:nth-child(8) {
    top: 80%;
    left: 80%;
    animation-delay: 2.1s;
}

.blockchain-connections {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.blockchain-connection {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, #bb9913, transparent);
    animation: blockchain-glow 3s ease-in-out infinite;
}

.blockchain-connection:nth-child(1) {
    top: 20%;
    left: 20%;
    width: 30%;
    animation-delay: 0s;
}

.blockchain-connection:nth-child(2) {
    top: 50%;
    left: 20%;
    width: 30%;
    animation-delay: 1s;
}

.blockchain-connection:nth-child(3) {
    top: 80%;
    left: 20%;
    width: 60%;
    animation-delay: 2s;
}

.blockchain-connection:nth-child(4) {
    top: 35%;
    left: 50%;
    width: 30%;
    animation-delay: 1.5s;
}

/* ========================================
   SELETOR DE IDIOMAS
   ======================================== */

.language-selector {
    height: 2.25rem;
    padding: 0.5rem 2rem 0.5rem 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    min-width: 80px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.language-selector:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.language-selector:active {
    transform: scale(0.95);
}

.language-selector:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.language-selector option {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 0.5rem;
    font-weight: 500;
}

.language-selector option:hover {
    background-color: #334155;
}

/* Versão Mobile */
.language-selector-mobile {
    height: 2rem;
    padding: 0.375rem 1.5rem 0.375rem 0.75rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.375rem center;
    background-repeat: no-repeat;
    background-size: 0.875rem 0.875rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    min-width: 70px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.language-selector-mobile:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.language-selector-mobile:active {
    transform: scale(0.95);
}

.language-selector-mobile:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.language-selector-mobile option {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 0.25rem;
    font-weight: 500;
    font-size: 0.75rem;
}

.language-selector-mobile option:hover {
    background-color: #334155;
}

/* ========================================
   OCULTAR CARTAS ESPECÍFICAS
   ======================================== */

/* Ocultar as cartas específicas que foram removidas */
.absolute.-top-8.-left-8:has-text("Q♠"),
.absolute.-top-4.-right-8:has-text("K♥"),
.absolute.-bottom-8.-left-4:has-text("A♦"),
.absolute.-bottom-4.-right-12:has-text("J♣") {
    display: none !important;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

/* Proteção para o container dos botões do header */
#headerButtons {
    position: relative;
    z-index: 20;
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    flex-direction: row;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto;
    height: auto;
}

#headerButtons .language-selector {
    flex-shrink: 0;
    order: 1;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#headerButtons a {
    order: 2;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsividade para o seletor */
@media (max-width: 767px) {
    #headerButtons {
        display: none !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;
    }
}

@media (min-width: 768px) {
    #headerButtons {
        display: flex !important;
    }
    
    .md\\:hidden.flex.items-center.gap-2 {
        display: none !important;
    }
}

/* Responsividade já está incluída nas classes específicas */

/* ========================================
   RESPONSIVIDADE MOBILE - AJUSTES CUIDADOSOS
   ======================================== */

/* Garantir que não haja overflow horizontal */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 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;
    }
    
    /* 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: hidden !important;
        margin: 0 !important;
        display: block !important;
    }
    
    /* Container externo animate-fade-in-right - ajustar para caber na tela */
    #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: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }
    
    /* Segunda coluna (container da imagem) - reduzir padding ao mínimo */
    #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: hidden !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 - overflow hidden para evitar scroll */
    #inicio .grid > div:last-child,
    #home .grid > div:last-child {
        overflow: hidden !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 */
    #inicio .relative.animate-fade-in-right,
    #home .relative.animate-fade-in-right {
        overflow: hidden !important;
        max-width: 100% !important;
        width: 100% !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;
    }
}

/* ========================================
   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 */
    }
    
    /* 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
   ======================================== */
@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 */
    /* Sobrescrever a classe object-cover do HTML */
    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 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) - ajuste ainda mais fino */
@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;
    }
    
    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;
    }
}

/* Ajustes para telas um pouco maiores (tablets pequenos) */
@media (min-width: 481px) and (max-width: 767px) {
    #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 */
    }
    
    /* Container do botão - garantir centralização no mobile */
    #inicio .grid > div:first-child > div[class*="flex"][class*="flex-col"],
    #home .grid > div:first-child > div[class*="flex"][class*="flex-col"] {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Botão - garantir centralização absoluta */
    #inicio .grid > div:first-child a[href*="play.pokerfigame.com"],
    #home .grid > div:first-child a[href*="play.pokerfigame.com"] {
        display: flex !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: auto !important;
        max-width: 100% !important;
    }
    
    /* Segunda coluna (imagem) - centralizar container */
    /* Removido overflow: hidden para preservar efeitos de blur externos */
    #inicio .grid > div:last-child,
    #home .grid > div:last-child {
        display: flex !important;
        justify-content: center !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;
        overflow: visible !important; /* Permite efeitos de blur externos */
    }
    
    /* Container relativo da imagem - garantir largura e centralização */
    #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;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    
    /* Container interno da imagem - garantir largura máxima e centralização */
    /* Removido overflow: hidden para preservar efeitos de iluminação */
    #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;
        margin: 0 auto !important;
        padding: 0.5rem !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* Permite efeitos de iluminação */
    }
    
    /* Container da imagem com h-80 - garantir largura e altura responsiva */
    #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;
        height: 16rem !important; /* Ajustado para tablets pequenos */
        max-height: 16rem !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin: 0 !important;
    }
    
    /* Imagem dentro do container - garantir que não ultrapasse */
    #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;
    }
    
    /* Imagem genérica dentro do container - garantir que não ultrapasse */
    #inicio .grid > div:last-child img {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Esconder elementos decorativos absolutos no mobile */
    #inicio .relative.animate-fade-in-right > div.absolute.z-10.animate-spin-slow,
    #home .relative.animate-fade-in-right > div.absolute.z-10.animate-spin-slow {
        display: none !important;
    }
    
    /* Garantir que elementos absolutos não causem overflow */
    #inicio .relative.animate-fade-in-right > div.absolute,
    #home .relative.animate-fade-in-right > div.absolute {
        max-width: calc(100% - 1rem) !important;
        box-sizing: border-box !important;
    }
    
    /* Garantir que o container com blur não ultrapasse, mas mantenha os efeitos visíveis */
    #inicio .relative.animate-fade-in-right > div.absolute.inset-0,
    #inicio .relative.animate-fade-in-right > div.absolute.inset-2,
    #inicio .relative.animate-fade-in-right > div.absolute.inset-4,
    #inicio .relative.animate-fade-in-right > div.absolute.inset-8 {
        max-width: 100% !important;
        box-sizing: border-box !important;
        /* Permitir que os efeitos de blur sejam visíveis */
        pointer-events: none !important; /* Não interferir com interações */
    }
    
    /* Garantir que os efeitos de iluminação nas bordas sejam visíveis */
    #inicio .grid > div:last-child > div.relative.z-10 > div.absolute.inset-0,
    #inicio .grid > div:last-child > div.relative.z-10 > div.absolute.inset-2 {
        pointer-events: none !important;
    }
    
    /* Garantir que as linhas de iluminação nas bordas sejam visíveis */
    #inicio .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80 > div.absolute[class*="top-2"],
    #inicio .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80 > div.absolute[class*="bottom-2"],
    #inicio .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80 > div.absolute[class*="left-2"],
    #inicio .grid > div:last-child .relative.overflow-hidden.rounded-xl.h-80 > div.absolute[class*="right-2"] {
        pointer-events: none !important;
        /* Garantir que as linhas de iluminação sejam visíveis */
    }
    
    /* ========================================
       REMOVER EFEITOS DE LUZ PULSANTE NO RESPONSIVO
       ======================================== */
    
    /* Remover todas as divs absolutas com blur dentro do container animate-fade-in-right */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute[class*="blur"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Remover todas as divs absolutas com animate-gentle-pulse */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute[class*="animate-gentle-pulse"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Remover todas as divs com inset e blur (todas as camadas de luz) */
    #inicio .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"],
    #inicio .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 especificamente as três divs principais de luz pulsante */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.inset-0.blur-2xl.animate-gentle-pulse {
        display: none !important;
    }
    
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.inset-4.blur-xl.animate-gentle-pulse {
        display: none !important;
    }
    
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute.inset-8.blur-lg.animate-gentle-pulse {
        display: none !important;
    }
    
    /* Remover todas as divs com gradientes amarelos que criam efeitos de luz */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute[class*="bg-gradient"][class*="yellow"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Remover TODAS as divs pulsantes na seção #inicio */
    #inicio > div.absolute.inset-0[class*="bg-gradient"][class*="yellow"][class*="animate-gentle-pulse"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    #inicio > div.absolute.inset-0.bg-gradient-to-br.from-yellow-500\/5.animate-gentle-pulse,
    #inicio > div.absolute.inset-0[class*="from-yellow-500"][class*="animate-gentle-pulse"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    #inicio div.absolute[class*="bg-gradient"][class*="yellow"][class*="animate-gentle-pulse"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    #inicio div.absolute.animate-gentle-pulse[class*="bg-gradient"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    #inicio > div.absolute.inset-0.animate-gentle-pulse {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    /* Remover completamente os elementos laterais de luz */
    #inicio .grid > div:last-child > div.relative.animate-fade-in-right > div.absolute[class*="w-16"][class*="h-48"] {
        display: none !important;
    }
    
    /* Remover elementos dentro do container z-10 */
    #inicio .grid > div:last-child > div.relative.z-10 > div.absolute.inset-0.blur-sm {
        display: none !important;
    }
    
    #inicio .grid > div:last-child > div.relative.z-10 > div.absolute.inset-2 {
        display: none !important;
    }
    
    #inicio .grid > div:last-child > div.relative.z-10 > div.absolute[class*="bg-gradient"][class*="yellow"] {
        display: none !important;
    }
    
    /* Remover efeito pulsante de luz nas bordas */
    #inicio .grid > div:last-child > div.relative.z-10.animate-glow,
    #home .grid > div:last-child > div.relative.z-10.animate-glow,
    #inicio .grid > div:last-child .animate-glow,
    #home .grid > div:last-child .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"] {
        border-color: transparent !important;
        border-width: 0 !important;
    }
    
    #inicio .grid > div:last-child > div.relative.z-10 {
        box-shadow: none !important;
        filter: none !important;
    }
    
    /* Garantir que elementos com largura fixa não ultrapassem */
    #inicio .relative.animate-fade-in-right > div.absolute.z-10.animate-spin-slow,
    #home .relative.animate-fade-in-right > div.absolute.z-10.animate-spin-slow {
        max-width: 48px !important;
        box-sizing: border-box !important;
    }
}

/* Tablets - ajustes intermediários */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ========================================
   UTILITÁRIOS
   ======================================== */

.text-gradient {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.bg-gradient-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

/* ========================================
   BOTÕES DE AÇÃO - LAYOUT RESPONSIVO
   ======================================== */
/* 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;
    }
}

/* Desktop */
@media (min-width: 768px) {
    #action-buttons-container {
        flex-direction: row !important;
    }
    
    #action-buttons-container > button {
        width: 220px !important;
        flex-shrink: 0 !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }
}

.backdrop-blur {
    backdrop-filter: blur(10px);
}

/* ========================================
   ESTADOS DE HOVER E FOCUS
   ======================================== */

.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
}

/* ========================================
   MODAL RESPONSIVIDADE E NUMERAÇÃO
   ======================================== */

/* 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;
    }
}

/* Numeração dos passos de instalação */
.install-steps-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
}

.install-steps-list li {
    padding-left: 0;
    margin-left: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    list-style: none;
}

.install-steps-list li span:first-child {
    margin-right: 0.75rem !important;
    display: inline-block !important;
    min-width: 2rem !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fbbf24 !important; /* Amarelo ouro apenas para números */
    font-weight: 700 !important; /* font-bold */
    font-size: 1.125rem !important; /* Tamanho maior para destacar */
    line-height: 1.5 !important;
}

/* Texto dos passos na cor padrão */
.install-steps-list li span:not(:first-child) {
    color: #d1d5db !important; /* text-gray-300 - cor padrão */
}

/* Garantir que os números apareçam em todos os dispositivos - apenas o primeiro span (número) */
#installAppModal .install-steps-list li span:first-child,
#howToInstallAppModal .install-steps-list li span:first-child {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fbbf24 !important; /* Amarelo ouro apenas para números */
    font-weight: 700 !important;
}

/* Estilos para a lista numerada do modal de instalação */
#howToInstallAppModal .install-steps-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
}

#howToInstallAppModal .install-steps-list li {
    padding-left: 0;
    margin-left: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    list-style: none;
}

#howToInstallAppModal .install-steps-list li span:first-child {
    margin-right: 0.75rem !important;
    display: inline-block !important;
    min-width: 2rem !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fbbf24 !important; /* Amarelo ouro apenas para os números */
    font-weight: 700 !important;
    font-size: 1.125rem !important; /* Tamanho maior para destacar */
    line-height: 1.5 !important;
}

/* Garantir que o texto dos passos fique na cor padrão (cinza) */
#howToInstallAppModal .install-steps-list li span:not(:first-child) {
    color: #d1d5db !important; /* text-gray-300 - cor padrão dos tutoriais */
}

/* Garantir que os links dentro do texto mantenham sua cor */
#howToInstallAppModal .install-steps-list li span:not(:first-child) strong {
    color: #fbbf24 !important; /* Manter URLs e texto destacado em amarelo */
}

/* Quebrar URLs longas no modal de instalação */
#installAppModal li,
#installAppModal p,
#installAppModal strong,
#installAppModal a {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
}

/* Garantir que URLs quebrem corretamente */
#installAppModal a[href*="https://"],
#installAppModal strong {
    display: inline !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

/* FORÇAR modal de instalação a ficar SEMPRE oculto por padrão */
#installAppModal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Só mostrar quando tiver AMBAS as condições: não hidden E user-triggered */
#installAppModal:not(.hidden).user-triggered {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Se tiver hidden, SEMPRE oculto, mesmo com user-triggered */
#installAppModal.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Garantir que modais ocultos não apareçam */
#howToRegisterModal.hidden,
#howToDepositModal.hidden,
#howToWithdrawModal.hidden {
    display: none !important;
}

/* Garantir que modais sem hidden apareçam */
#howToRegisterModal:not(.hidden),
#howToDepositModal:not(.hidden),
#howToWithdrawModal:not(.hidden) {
    display: flex !important;
}

/* ========================================
   AJUSTE DE ESPAÇAMENTO ENTRE TÍTULOS
   Artigos do Blog e Páginas de Dicas de Poker
   ======================================== */

/* H2 - FORÇAR margin-top alto para separar do texto acima */
/* Regras com máxima especificidade para sobrescrever Tailwind */
html body section.pb-16 .bg-slate-900 h2.mt-10,
html body section.pb-16 .bg-slate-900 h2.mt-10.mb-6 {
    margin-top: 4rem !important; /* 4rem = 64px - espaço generoso */
}

/* H2 após parágrafos - espaço extra */
html body section.pb-16 .bg-slate-900 p + h2.mt-10,
html body section.pb-16 .bg-slate-900 p + h2.mt-10.mb-6 {
    margin-top: 4.5rem !important; /* 4.5rem = 72px */
}

/* H2 após listas - espaço extra */
html body section.pb-16 .bg-slate-900 ul + h2.mt-10,
html body section.pb-16 .bg-slate-900 ul + h2.mt-10.mb-6,
html body section.pb-16 .bg-slate-900 ol + h2.mt-10,
html body section.pb-16 .bg-slate-900 ol + h2.mt-10.mb-6 {
    margin-top: 4.5rem !important; /* 4.5rem = 72px */
}

/* H2 após divs - espaço extra */
html body section.pb-16 .bg-slate-900 div + h2.mt-10,
html body section.pb-16 .bg-slate-900 div + h2.mt-10.mb-6 {
    margin-top: 4.5rem !important; /* 4.5rem = 72px */
}

/* H2 genérico - aplicar espaçamento padrão */
html body section.pb-16 .bg-slate-900 h2 {
    margin-top: 3.5rem !important; /* Espaço generoso para todos os H2 */
    margin-bottom: 1.25rem !important;
}

html body section.pb-16 .bg-slate-900 h2.mb-6 {
    margin-bottom: 1.25rem !important;
}

/* H3 - Aumentar espaçamento superior e inferior */
section.pb-16 .bg-slate-900 h3.mt-8 {
    margin-top: 2rem !important; /* Aumentado para 2rem - espaço adequado acima */
    padding-top: 0.5rem !important; /* Espaço extra no topo */
}

section.pb-16 .bg-slate-900 h3.mb-4 {
    margin-bottom: 1rem !important; /* Aumentado para 1rem - espaço adequado abaixo */
    padding-bottom: 0.25rem !important; /* Espaço extra na base */
}

/* H3 sem classes específicas - aplicar espaçamento padrão */
section.pb-16 .bg-slate-900 h3 {
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.25rem !important;
}

/* H3 dentro de cards - reduzir espaçamento */
section.pb-16 .bg-slate-900 [class*="bg-slate-800"] h3,
section.pb-16 .bg-slate-900 [class*="bg-red-900"] h3,
section.pb-16 .bg-slate-900 [class*="bg-slate-800"] h3.mb-3,
section.pb-16 .bg-slate-900 [class*="bg-red-900"] h3.mb-3 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* Reduzido para cards */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* H4 - Aumentar espaçamento */
section.pb-16 .bg-slate-900 h4.mb-3 {
    margin-bottom: 0.75rem !important; /* Aumentado para 0.75rem */
    margin-top: 1.5rem !important; /* Adicionar espaço superior */
    padding-bottom: 0.25rem !important;
}

/* H4 sem classes específicas */
section.pb-16 .bg-slate-900 h4 {
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.25rem !important;
}

/* Ajuste para títulos dentro de cards/boxes - reduzir espaçamento */
section.pb-16 .bg-slate-900 [class*="bg-slate-800"] h3,
section.pb-16 .bg-slate-900 [class*="bg-slate-800"] h4,
section.pb-16 .bg-slate-900 [class*="bg-red-900"] h3,
section.pb-16 .bg-slate-900 [class*="bg-red-900"] h4 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* Reduzido para 0.5rem - espaçamento menor nos cards */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Parágrafos após títulos - adicionar espaço adequado */
section.pb-16 .bg-slate-900 h2 + p,
section.pb-16 .bg-slate-900 h3 + p,
section.pb-16 .bg-slate-900 h4 + p {
    margin-top: 0.75rem !important; /* Espaço adequado após títulos */
    padding-top: 0 !important;
}

/* Regras adicionais para garantir margin-top em todos os casos */
/* Sobrescrever qualquer classe Tailwind que possa estar interferindo */
html body section.pb-16 .bg-slate-900 .text-gray-300 h2.mt-10,
html body section.pb-16 .bg-slate-900 .text-gray-300 h2.mt-10.mb-6 {
    margin-top: 4rem !important; /* 4rem = 64px */
}

/* H2 após qualquer elemento dentro do container de texto */
html body section.pb-16 .bg-slate-900 .text-gray-300 > * + h2.mt-10,
html body section.pb-16 .bg-slate-900 .text-gray-300 > * + h2.mt-10.mb-6 {
    margin-top: 4.5rem !important; /* 4.5rem = 72px */
}

/* Garantir quebra de linha adequada */
section.pb-16 .bg-slate-900 h1,
section.pb-16 .bg-slate-900 h2,
section.pb-16 .bg-slate-900 h3,
section.pb-16 .bg-slate-900 h4 {
    display: block !important;
    line-height: 1.4 !important;
    page-break-after: avoid !important;
}

/* Removido - usando apenas CSS para espaçamento */

/* ========================================
   CORREÇÃO FINAL - FOOTER NO FUNDO
   ======================================== */
/* Garantir que html e body tenham altura total */
html {
    height: 100% !important;
}

/* Body deve ser flex container - sobrescrever qualquer style inline */
/* O overflow: auto do JS não deve interferir no flexbox */
body {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    /* overflow-y pode ser auto (definido pelo JS), mas não interfere no flex */
}

/* O wrapper min-h-screen deve usar flexbox para empurrar o footer para baixo */
/* Ele é o único elemento flex dentro do body (header e menu são fixed) */
/* Considerar que pode estar dentro de #pageContent */
html body #pageContent div.min-h-screen,
html body div.min-h-screen {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    /* Garantir que o wrapper cresça para ocupar todo o espaço disponível */
}

/* Header fixed não conta no flexbox - ignorar */
html body div.min-h-screen > header[class*="fixed"],
html body header[class*="fixed"] {
    position: fixed !important;
    /* Não participa do flexbox */
}

/* Menu mobile fixed também não conta */
html body div.min-h-screen > div#mobileMenu,
html body div#mobileMenu {
    position: fixed !important;
    /* Não participa do flexbox */
}

/* Breadcrumbs não deve interferir - não crescer */
html body div.min-h-screen > nav[aria-label="Breadcrumb"],
html body nav[aria-label="Breadcrumb"] {
    flex-shrink: 0 !important;
}

/* Section precisa crescer para ocupar TODO o espaço disponível */
/* Usar flex-grow: 1 para empurrar o footer para baixo */
html body div.min-h-screen > section,
html body div.min-h-screen section {
    flex: 1 0 auto !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
}

/* Se houver breadcrumbs antes do section, o section ainda deve crescer */
html body div.min-h-screen nav + section {
    flex: 1 0 auto !important;
    flex-grow: 1 !important;
}

/* Footer sempre no final - usar margin-top: auto para empurrar para baixo */
/* Considerar que pode estar dentro de #pageContent */
html body #pageContent div.min-h-screen > footer,
html body #pageContent div.min-h-screen footer,
html body div.min-h-screen > footer,
html body div.min-h-screen footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

/* ========================================
   FALLBACK PARA BACKDROP-FILTER
   Compatibilidade com Firefox Mobile e navegadores antigos
   ======================================== */
@supports not (backdrop-filter: blur(4px)) {
  /* Fallback para elementos com backdrop-blur que não suportam a propriedade */
  .backdrop-blur-sm,
  [class*="backdrop-blur"],
  header[class*="backdrop-blur"],
  div[class*="backdrop-blur"] {
    background-color: rgba(15, 23, 42, 0.98) !important;
  }
  
  /* Fallback específico para header */
  header.bg-slate-900\/95.backdrop-blur-sm {
    background-color: rgba(15, 23, 42, 0.98) !important;
  }
  
  /* Fallback para modais */
  div[class*="backdrop-blur"][class*="fixed"] {
    background-color: rgba(0, 0, 0, 0.7) !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;
    }
}

/* Garantir que apareçam apenas em telas grandes (desktop) */
@media (min-width: 1024px) {
    #decorative-circle-yellow,
    #decorative-circle-red,
    #decorative-circle-blue,
    #decorative-circle-green,
    #decorative-circle-purple,
    #decorative-circle-orange {
        display: block !important;
        visibility: visible !important;
        /* Mantém a opacidade original (opacity-30 = 30%) definida nas classes */
        /* Garante que as animações funcionem */
        animation-play-state: running !important;
    }
}