/* CSS Gerado pelo Edunet Customizer V2 - 28/12/2025, 10:34:19 */

 /* CSS: Banner (Carrossel de Imagens) */
 .carousel-container {
         max-width: 1200px;
         margin: 20px auto;
         overflow: hidden;
         position: relative;
         border-radius: 12px;
         max-height: 450px;
 }

 .carousel-slide {
         display: flex;
         transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .carousel-item {
         min-width: 100%;
         box-sizing: border-box;
 }

 .carousel-item img {
         width: 100%;
         display: block;
         border-radius: 12px;
         max-height: 450px;
         object-fit: cover;
 }

 .carousel-nav {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         width: 100%;
         display: flex;
         justify-content: space-between;
         padding: 0 20px;
         pointer-events: none;
 }

 .nav-button {
         background: rgba(0, 255, 255, 0.1);
         color: white;
         border: none;
         width: 45px;
         height: 45px;
         border-radius: 50%;
         cursor: pointer;
         opacity: 0;
         transition: all 0.3s ease;
         pointer-events: all;
         font-size: 1.5rem;
 }

 .carousel-container:hover .nav-button {
         opacity: 0.8;
 }

 .nav-button:hover {
         opacity: 1;
 }

 /* CSS: Banner (Imagem com Texto) */
 .image-banner-container {
         position: relative;
         width: 100%;
         max-width: 1200px;
         margin: 20px auto;
         height: 400px;
         background-image: url('https://via.placeholder.com/1200x400/555/FFFFFF?text=Imagem+de+Fundo');
         background-size: cover;
         background-position: center;
         border-radius: 12px;
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         padding: 20px;
         color: white;
 }

 .image-banner-container::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: rgba(0, 0, 0, 0.5);
         z-index: 1;
 }

 .image-banner-content {
         position: relative;
         z-index: 2;
         max-width: 700px;
 }

 .image-banner-content h1 {
         color: #FFFFFF !important;
         font-size: 2.8rem;
         font-weight: 700;
         margin: 0 0 15px 0;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .image-banner-content p {
         color: #DDDDDD !important;
         font-size: 1.2rem;
         margin: 0;
         line-height: 1.6;
 }

 @media (max-width: 600px) {
         .image-banner-content h1 {
                 font-size: 2rem;
         }

         .image-banner-content p {
                 font-size: 1rem;
         }
 }

 
 /* CSS: Banner Hero Detalhado */
 .boaplay-hero {
         position: relative;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 50px;
         background: #0D0E11;
         border-radius: 12px;
         overflow: hidden;
         margin: 20px 0;
         min-height: 400px;
 }

 .quality-badge {
         position: absolute;
         top: 20px;
         left: 20px;
         background-color: #D674F1;
         color: #FFFFFF;
         padding: 5px 15px;
         border-radius: 20px;
         font-size: 12px;
         font-weight: bold;
         z-index: 2;
 }

 .boaplay-hero-left {
         flex: 1;
         max-width: 450px;
         z-index: 2;
         padding-right: 30px;
 }

 .boaplay-hero-left h1 {
         font-size: 3.2rem;
         color: #F5F5F5 !important;
         font-weight: bold;
         margin-bottom: 20px;
         line-height: 1.1;
 }

 .boaplay-hero-left p {
         font-size: 1rem;
         color: #8C8C8C !important;
         margin-bottom: 30px;
         line-height: 1.6;
 }

 .boaplay-buttons {
         display: flex;
         flex-wrap: wrap;
         gap: 15px;
 }

 .boaplay-buttons button {
         padding: 12px 24px;
         border: none;
         border-radius: 8px;
         font-size: 1rem;
         font-weight: 600;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
 }

 .btn-explorar {
         background-color: #F5F5F5;
         color: #0D0E11 !important;
 }

 .btn-explorar:hover {
         opacity: 0.85;
 }

 .btn-whatsapp {
         background-color: #1C1C1C;
         color: #F5F5F5 !important;
         border: 1px solid #1B1B20;
 }

 .btn-whatsapp:hover {
         background-color: #2a2a2a;
 }

 .whatsapp-icon {
         display: inline-block;
         width: 20px;
         height: 20px;
         background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23FFFFFF" viewBox="0 0 256 256"><path d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a88,88,0,0,1-44.36-12.71a8,8,0,0,0-5.87-.53l-25.54,8.51L60.8,185.73a8,8,0,0,0-.53-5.87A88,88,0,1,1,128,216Zm56-88.67c-1.85-3.68-8.4-8-11.72-9.28s-5.85-1.3-8.33.82-3.87,4.86-5.84,6.83-3.95,2.18-7.3,0S140,120.3,131.45,112.5c-7.25-6.5-12-14.47-10.5-17.45s2.33-4.5,4.3-6.47,3.18-3.28,4.78-5.47S132.85,79.5,132,78s-5.85-7-8-9.62-4.28-2.28-6.48-2.33-4.63-.05-7,3.15-8.58,10.2-11.15,14.8c-3.18,5.7-6,11.62-5.18,18.48s6,13,8.63,15.62c6.23,6.23,16.7,21.3,32.67,29.67,18.5,9.6,27.5,10.2,33.5,8.13,3.33-1.13,9.62-5.47,11.57-9.8s2-8.13.7-10.77S185.85,131,184,127.33Z"></path></svg>');
         background-repeat: no-repeat;
         background-position: center;
         background-size: contain;
 }

 .boaplay-hero-image {
         position: relative;
         flex: 1;
         max-width: 50%;
         display: block;
 }

 .boaplay-hero-image a {
         display: block;
         position: relative;
         border-radius: 12px;
         overflow: hidden;
 }

 .boaplay-hero-image img#boaplay-banner-img-hero {
         width: 100%;
         height: auto;
         display: block;
         border-radius: 12px;
         max-height: 350px;
         object-fit: cover;
 }

 .progress-bar-container {
         position: absolute;
         bottom: 10px;
         left: 5%;
         width: 90%;
         height: 4px;
         background-color: rgba(255, 255, 255, 0.3);
         border-radius: 2px;
         z-index: 3;
 }

 .progress-bar {
         height: 100%;
         width: 0%;
         background-color: #FFFFFF;
         border-radius: 2px;
 }

 .boaplay-hero-image .arrow {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         width: 40px;
         height: 40px;
         background-color: rgba(0, 0, 0, 0.5);
         border-radius: 50%;
         cursor: pointer;
         z-index: 3;
         transition: all 0.3s ease;
         padding: 8px;
         box-sizing: border-box;
         display: flex;
         align-items: center;
         justify-content: center;
 }

 .boaplay-hero-image .arrow svg {
         width: 16px;
         height: 16px;
         fill: white;
 }

 .boaplay-hero-image .arrow:hover {
         background-color: rgba(0, 0, 0, 0.8);
 }

 .boaplay-hero-image .arrow.left {
         left: 10px;
 }

 .boaplay-hero-image .arrow.right {
         right: 10px;
 }

 .mobile-banner-container {
         display: none;
         width: 100%;
         overflow: hidden;
         position: relative;
 }

 .mobile-banner-track {
         display: flex;
         transition: transform 0.5s ease;
 }

 .mobile-banner-slide {
         min-width: 100%;
         position: relative;
 }

 .mobile-banner-slide img {
         width: 100%;
         display: block;
         border-radius: 12px;
 }

 .mobile-banner-dots {
         position: absolute;
         bottom: 10px;
         left: 50%;
         transform: translateX(-50%);
         display: flex;
         gap: 8px;
         z-index: 4;
 }

 .mobile-banner-dot {
         width: 8px;
         height: 8px;
         border-radius: 50%;
         background-color: rgba(255, 255, 255, 0.5);
         transition: all 0.3s ease;
         cursor: pointer;
 }

 .mobile-banner-dot.active {
         background-color: #FFFFFF;
 }

 @media (max-width: 900px) {
         .boaplay-hero {
                 flex-direction: column;
                 padding: 20px;
         }

         .boaplay-hero-left {
                 max-width: 100%;
                 padding-right: 0;
                 text-align: center;
                 order: 2;
         }

         .boaplay-hero-left h1 {
                 font-size: 2.5rem;
         }

         .boaplay-hero-left p {
                 font-size: 0.9rem;
         }

         .boaplay-buttons {
                 justify-content: center;
         }

         .boaplay-hero-image {
                 display: none;
         }

         .mobile-banner-container {
                 display: block;
                 order: 1;
                 margin-bottom: 20px;
                 max-width: 100%;
         }
 }

/* ==========================
       Barra Lateral de Redes Sociais - ESTILOS
       ========================== */

:root {
        /* Cores oficiais das redes */
        --apx-instagram: #e4405f;
        --apx-whatsapp: #25d366;
        --apx-x: #000000;
        --apx-discord: #5865f2;
        --apx-tiktok: #010101;
        --apx-telegram: #229ed9;
}

/* Container principal */
#apx-social-bar {
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 1050;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px 10px;

        /* visual "recortado" + vidro fosco */
        background: linear-gradient(135deg, rgba(15, 15, 30, 0.85), rgba(15, 15, 30, 0.6));
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border-radius: 18px 0 0 18px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-right: none;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);

        /* efeito de borda recortada com pseudo-elemento */
        overflow: hidden;
}

#apx-social-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 40%),
                radial-gradient(circle at top, rgba(255, 255, 255, 0.15), transparent 55%);
        mix-blend-mode: screen;
        opacity: 0.35;
}

/* Cada botão individual */
#apx-social-bar a {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        text-decoration: none;
        overflow: hidden;
        isolation: isolate;

        /* base neutra translúcida */
        background: radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.65));
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow:
                0 8px 18px rgba(0, 0, 0, 0.65),
                inset 0 0 0 1px rgba(255, 255, 255, 0.03);

        transition:
                transform 0.2s ease-out,
                box-shadow 0.2s ease-out,
                border-color 0.2s ease-out;
}

/* Glow suave contínuo (pulsando de leve mesmo parado) */
#apx-social-bar a::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.15), transparent 60%);
        opacity: 0.15;
        mix-blend-mode: screen;
        animation: apx-soft-pulse 3.6s ease-in-out infinite;
        z-index: -1;
}

/* Camada de cor da rede, controlada via CSS custom property setada pelo JS */
#apx-social-bar a::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.18), transparent 40%),
                linear-gradient(135deg, color-mix(in srgb, var(--apx-color, #ffffff) 40%, #000 60%),
                        color-mix(in srgb, var(--apx-color, #ffffff) 70%, #111 30%));
        opacity: 0;
        /* começa transparente */
        transition: opacity 0.2s ease-out;
        z-index: -1;
}

#apx-social-bar i {
        font-size: 21px;
        color: #f5f5f5;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.85);
        transition:
                color 0.18s ease-out,
                transform 0.18s ease-out,
                text-shadow 0.18s ease-out;
}

/* Hover geral (independente da rede) */
#apx-social-bar a:hover {
        transform: translateX(-3px) scale(1.08);
        box-shadow:
                0 14px 32px rgba(0, 0, 0, 0.8),
                0 0 0 1px rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.35);
}

#apx-social-bar a:hover::after {
        opacity: 1;
        /* revela a cor oficial da rede */
}

#apx-social-bar a:hover i {
        color: #ffffff;
        transform: scale(1.08) translateY(-1px);
        text-shadow:
                0 0 14px rgba(0, 0, 0, 0.9),
                0 0 18px rgba(255, 255, 255, 0.65);
}

/* Pulso ao passar o mouse */
#apx-social-bar a:hover {
        animation: apx-strong-pulse 0.7s ease-out;
}

/* Pequena animação de entrada da barra */
@keyframes apx-slide-in-right {
        from {
                transform: translate(110%, -50%);
                opacity: 0;
        }

        to {
                transform: translate(0, -50%);
                opacity: 1;
        }
}

/* Aplicar no container quando criado via JS */
#apx-social-bar.apx-enter {
        animation: apx-slide-in-right 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes apx-soft-pulse {

        0%,
        100% {
                opacity: 0.12;
        }

        50% {
                opacity: 0.25;
        }
}

@keyframes apx-strong-pulse {
        0% {
                transform: translateX(-3px) scale(1.08);
                box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85);
        }

        50% {
                transform: translateX(-5px) scale(1.15);
                box-shadow:
                        0 18px 40px rgba(0, 0, 0, 0.95),
                        0 0 22px rgba(255, 255, 255, 0.3);
        }

        100% {
                transform: translateX(-3px) scale(1.08);
                box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85);
        }
}

/* Responsivo: esconde em telas muito pequenas, se quiser */
@media (max-width: 640px) {
        #apx-social-bar {
                right: 4px;
                padding: 10px 8px;
                transform: translateY(-50%) scale(0.92);
        }

        #apx-social-bar a {
                width: 38px;
                height: 38px;
                border-radius: 12px;
        }

        #apx-social-bar i {
                font-size: 19px;
        }
}

 /* CSS: Fundo de Partículas (Constelação) */
 #constellation-bg {
         position: fixed;
         top: 0;
         left: 0;
         z-index: -1;
         pointer-events: none;
 }

 /* CSS: Mensagem de Boas-Vindas (Overlay) */
 #custom-overlay-wrapper {
         position: fixed;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         background: rgba(0, 0, 0, 0.4);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
         z-index: 9999;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         color: white;
         text-align: center;
         padding: 2rem;
         opacity: 0;
         animation: overlayEntrance 0.5s ease forwards;
 }

 #custom-overlay-wrapper h1 {
         font-size: 2.5rem;
         font-weight: 700;
         margin-bottom: 1rem;
 }

 #custom-overlay-wrapper h1 strong {
         color: #8A2BE2;
 }

 #custom-overlay-wrapper p {
         font-size: 1.1rem;
         color: rgba(255, 255, 255, 0.8);
         margin-top: 0;
         margin-bottom: 2rem;
 }

 .custom-overlay-buttons {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
         justify-content: center;
 }

 .custom-overlay-btn {
         padding: 0.8rem 1.5rem;
         border-radius: 999px;
         cursor: pointer;
         font-weight: bold;
         font-size: 1rem;
         transition: all 0.3s ease;
         border: 2px solid transparent;
 }

 .custom-overlay-btn.primary {
         background-color: #8A2BE2;
         color: white;
 }

 .custom-overlay-btn.primary:hover {
         filter: brightness(1.2);
 }

 .custom-overlay-btn.secondary {
         background-color: transparent;
         color: white;
         border-color: white;
 }

 .custom-overlay-btn.secondary:hover {
         background-color: white;
         color: #8A2BE2;
 }

 @keyframes overlayEntrance {
         from {
                 opacity: 0;
                 transform: scale(0.95);
         }

         to {
                 opacity: 1;
                 transform: scale(1);
         }
 }

 @keyframes overlayExit {
         from {
                 opacity: 1;
                 transform: scale(1);
         }

         to {
                 opacity: 0;
                 transform: scale(0.95);
         }
 }

 /* CSS: Modal de Horários de Atendimento */
 #personagem-suporte {
         position: fixed !important;
         right: 20px;
         bottom: 0px;
         width: 220px;
         height: 220px;
         z-index: 999 !important;
         cursor: pointer;
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.3s ease;
 }

 @keyframes float {

         0%,
         100% {
                 transform: translateY(0);
         }

         50% {
                 transform: translateY(-10px);
         }
 }

 #personagem-suporte:hover {
         filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
         transform: scale(1.05) translateY(-5px);
 }

 .blur-background>*:not(#confirmation-modal):not(script):not(style) {
         filter: blur(8px);
         transition: filter 0.3s ease;
         pointer-events: none;
 }

 .blur-background>#personagem-suporte {
         filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.25)) !important;
         pointer-events: auto;
 }

 #confirmation-modal {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.75);
         display: flex;
         justify-content: center;
         align-items: center;
         z-index: 2000;
         transition: opacity 0.3s ease, visibility 0.3s ease;
         padding: 15px;
         box-sizing: border-box;
 }

 .modal-hidden {
         opacity: 0;
         visibility: hidden;
         pointer-events: none;
 }

 .modal-visible {
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
 }

 .modal-content {
         background: #1A2238;
         color: #FFFFFF;
         width: 100%;
         max-width: 550px;
         border-radius: 24px;
         box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
         padding: 35px 30px;
         position: relative;
         transform: translateY(0);
         transition: transform 0.4s ease, box-shadow 0.4s ease;
         max-height: 90vh;
         overflow-y: auto;
         backdrop-filter: blur(10px);
         border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .modal-hidden .modal-content {
         transform: translateY(50px);
 }

 .close-modal {
         position: absolute;
         top: 20px;
         right: 25px;
         font-size: 24px;
         font-weight: bold;
         color: #AAAAAA;
         cursor: pointer;
         transition: all 0.2s;
         height: 36px;
         width: 36px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         background-color: rgba(255, 255, 255, 0.05);
         z-index: 10;
 }

 .close-modal:hover {
         color: #FFFFFF;
         background-color: rgba(255, 255, 255, 0.15);
         transform: rotate(90deg);
 }

 .modal-content h2 {
         margin-top: 0;
         padding-bottom: 20px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         font-size: 28px;
         color: #25D366 !important;
         text-align: center;
         font-weight: 700;
         letter-spacing: 0.5px;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .modal-body {
         margin: 20px 0;
 }

 .warning {
         background-color: rgba(255, 87, 34, 0.15);
         border-left: 4px solid #FF5722;
         color: #FFFFFF !important;
         padding: 15px;
         margin: 15px 0;
         font-weight: bold;
         border-radius: 12px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         transform: translateZ(0);
         position: relative;
         overflow: hidden;
 }

 .warning:before {
         content: '';
         position: absolute;
         top: -50%;
         left: -50%;
         width: 200%;
         height: 200%;
         background: radial-gradient(circle, rgba(255, 87, 34, 0.05) 0%, transparent 70%);
         opacity: 0.5;
         z-index: -1;
 }

 .modal-content h3 {
         font-size: 20px;
         margin: 25px 0 15px;
         color: #EAEAEA !important;
         position: relative;
         padding-bottom: 8px;
         text-align: center;
 }

 .modal-content h3:after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
         width: 80px;
         height: 3px;
         background: linear-gradient(90deg, transparent, #25D366, transparent);
 }

 .schedule {
         background-color: rgba(37, 211, 102, 0.08);
         border-radius: 16px;
         padding: 20px;
         margin-top: 20px;
         box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
         border: 1px solid rgba(37, 211, 102, 0.2);
 }

 .day {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         padding: 12px 0;
         border-bottom: 1px solid rgba(255, 255, 255, 0.08);
         transition: all 0.2s ease;
 }

 .day:hover {
         background-color: rgba(255, 255, 255, 0.03);
         transform: translateX(4px);
 }

 .day:last-child {
         border-bottom: none;
 }

 .day-name {
         font-weight: bold;
         color: #25D366 !important;
         letter-spacing: 0.5px;
         flex-shrink: 0;
         padding-right: 15px;
 }

 .day-hours-container {
         display: flex;
         flex-direction: column;
         gap: 8px;
         text-align: right;
 }

 .hora-item {
         font-weight: 500;
         color: #EEEEEE !important;
         background-color: rgba(255, 255, 255, 0.06);
         padding: 6px 10px;
         border-radius: 6px;
         transition: all 0.2s ease;
         display: inline-block;
         border-left: 2px solid rgba(37, 211, 102, 0.4);
 }

 .hora-item:hover {
         background-color: rgba(255, 255, 255, 0.1);
         transform: translateX(2px);
 }

 .today-highlight {
         background-color: rgba(37, 211, 102, 0.15);
         border-radius: 12px;
         padding: 18px !important;
         margin: 10px 0;
         border-left: 4px solid #25D366;
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         position: relative;
         overflow: hidden;
         display: block !important;
         flex-direction: column;
         align-items: center;
         text-align: center;
 }

 .today-highlight .day-name {
         font-size: 1.3em;
         margin-bottom: 10px;
         display: block;
         color: #25D366 !important;
         text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
         width: 100%;
         padding-right: 0;
 }

 .today-highlight .day-hours-container {
         width: 100%;
         align-items: center;
         text-align: center;
 }

 .today-highlight .hora-item {
         font-size: 1.05em;
         background-color: rgba(255, 255, 255, 0.15);
         border-left: 3px solid #25D366;
         color: #EEEEEE !important;
 }

 .modal-actions {
         display: grid;
         grid-template-columns: 1fr;
         gap: 15px;
         margin-top: 30px;
 }

 .modal-actions.two-buttons {
         grid-template-columns: repeat(2, 1fr);
 }

 .modal-actions button {
         border: none;
         border-radius: 12px;
         font-weight: bold;
         cursor: pointer;
         transition: all 0.3s ease;
         font-size: 15px;
         padding: 15px 0;
         text-align: center;
         letter-spacing: 0.5px;
         position: relative;
         overflow: hidden;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 .btn-secondary {
         background: #24344D;
         color: #DDDDDD !important;
         border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .btn-whatsapp {
         background: #1FAD56;
         color: #FFFFFF !important;
 }

 .modal-actions button:hover {
         transform: translateY(-3px);
         box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
 }

 .modal-actions button:active {
         transform: translateY(0);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .btn-secondary:before,
 .btn-whatsapp:before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
         transition: all 0.6s ease;
 }

 .btn-secondary:hover:before,
 .btn-whatsapp:hover:before {
         left: 100%;
 }

 @media (max-width: 768px) {
         #personagem-suporte {
                 display: none !important;
         }
 }

 @media (max-width: 600px) {
         .modal-content {
                 padding: 25px 20px;
                 border-radius: 20px;
         }

         .day {
                 flex-direction: column;
                 align-items: center;
                 padding: 15px 0;
                 text-align: center;
         }

         .day-name {
                 padding-right: 0;
                 margin-bottom: 8px;
         }

         .day-hours-container {
                 text-align: center;
                 width: 100%;
         }

         .modal-actions {
                 grid-template-columns: 1fr;
         }

         .modal-actions button {
                 padding: 16px 0;
                 font-size: 16px;
         }

         .modal-content h2 {
                 font-size: 24px;
                 padding-bottom: 15px;
         }

         .warning {
                 padding: 15px 12px;
                 font-size: 0.95em;
         }

         .close-modal {
                 top: 15px;
                 right: 15px;
         }
 }

 /* CSS: Ocultar 'Powered by Ereemby' */
 footer.sc-8a04aca7-0 a[aria-label="Powered by Ereemby"] {
         display: none !important;
         visibility: hidden !important;
         opacity: 0 !important;
         width: 0 !important;
         height: 0 !important;
         overflow: hidden;
 }

 footer.sc-8a04aca7-0 a[href="https://ereemby.com"] {
         display: none !important;
         visibility: hidden !important;
         opacity: 0 !important;
         width: 0 !important;
         height: 0 !important;
         overflow: hidden;
 }

 footer.sc-8a04aca7-0 #powered-ereemby {
         display: none !important;
 }

 /* CSS: Painel de Controle Inicial */
 :root {
         --painel-hero-bg-color: transparent;
         --painel-hero-primary: #B91010;
         --painel-hero-primary-darker: #A90F0F;
         --painel-hero-panel-bg: rgba(28, 27, 34, 0.65);
         --painel-hero-text-primary: #e0e0e0;
         --painel-hero-text-secondary: #a0a0a0;
         --painel-hero-border-color: #2a2931;
         --painel-hero-font-family: 'Poppins', sans-serif;
 }

 body,
 .__className_e8ce0c {
         font-family: var(--painel-hero-font-family) !important;
 }

 html {
         scroll-behavior: smooth;
 }

 .container-hero {
         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
         padding: 0 15px;
         position: relative;
         z-index: 2;
 }

 .hero-section {
         position: relative;
         padding: 30px 0;
         z-index: 1;
         background-color: var(--painel-hero-bg-color);
         font-family: var(--painel-hero-font-family);
         color: var(--painel-hero-text-primary);
 }

 .hero-container {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 40px;
         perspective: 1500px;
 }

 .hero-presentation {
         flex: 1;
         max-width: 100%;
         text-align: center;
 }

 .hero-title {
         font-size: 2.2rem;
         font-weight: 700;
         line-height: 1.2;
         margin-bottom: 15px;
         color: var(--painel-hero-text-primary) !important;
 }

 .hero-title span {
         color: var(--painel-hero-primary) !important;
         text-shadow: 0 0 15px rgba(185, 16, 16, 0.5);
 }

 .hero-subtitle {
         font-size: 0.95rem;
         color: var(--painel-hero-text-secondary) !important;
         margin-bottom: 25px;
         line-height: 1.5;
 }

 .hero-buttons {
         display: flex;
         flex-direction: column;
         gap: 15px;
         margin-bottom: 25px;
         align-items: center;
 }

 .hero-btn {
         padding: 12px 24px;
         border: none;
         border-radius: 8px;
         font-size: 0.95rem;
         font-weight: 600;
         cursor: pointer;
         transition: all 0.3s ease;
         text-decoration: none;
         width: 100%;
         max-width: 280px;
         display: inline-block;
         text-align: center;
 }

 .hero-btn-primary {
         background-color: var(--painel-hero-primary);
         color: white !important;
         box-shadow: 0 4px 15px rgba(185, 16, 16, 0.2);
 }

 .hero-btn-primary:hover {
         transform: translateY(-3px);
         background-color: var(--painel-hero-primary-darker);
         box-shadow: 0 10px 20px rgba(185, 16, 16, 0.3);
 }

 .hero-btn-secondary {
         background-color: var(--painel-hero-panel-bg);
         color: var(--painel-hero-text-primary) !important;
         border: 1px solid var(--painel-hero-border-color);
 }

 .hero-btn-secondary:hover {
         background-color: #25242b;
         border-color: var(--painel-hero-text-secondary);
 }

 .hero-features {
         display: flex;
         flex-wrap: nowrap;
         justify-content: center;
         gap: 15px;
         color: var(--painel-hero-text-secondary);
         font-size: 0.85rem;
         overflow-x: auto;
         padding-bottom: 10px;
 }

 .hero-features span {
         display: flex;
         align-items: center;
         gap: 8px;
         white-space: nowrap;
         color: var(--painel-hero-text-secondary) !important;
 }

 .hero-features i {
         color: var(--painel-hero-primary) !important;
 }

 .control-panel {
         display: none;
         flex: 1;
         max-width: 450px;
         background: var(--painel-hero-panel-bg);
         backdrop-filter: blur(12px);
         border: 1px solid rgba(42, 41, 49, 0.8);
         border-radius: 16px;
         padding: 25px;
         transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease, border-color 0.6s ease;
 }

 .control-panel:hover {
         transform: scale(1.05);
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 25px rgba(185, 16, 16, 0.6);
         border-color: rgba(185, 16, 16, 0.7);
 }

 .panel-header {
         display: flex;
         align-items: center;
         gap: 15px;
         margin-bottom: 25px;
         padding-bottom: 15px;
         border-bottom: 1px solid var(--painel-hero-border-color);
 }

 .panel-icon-bg {
         background-color: var(--painel-hero-primary);
         width: 40px;
         height: 40px;
         border-radius: 10px;
         display: grid;
         place-items: center;
         flex-shrink: 0;
 }

 .panel-icon-bg .fa-solid {
         font-size: 1.5rem;
         color: white !important;
 }

 .panel-header h3 {
         font-size: 1.25rem;
         font-weight: 600;
         color: var(--painel-hero-text-primary) !important;
 }

 .panel-grid {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 15px;
 }

 .panel-item {
         background-color: rgba(16, 15, 20, 0.7);
         border: 1px solid var(--painel-hero-border-color);
         border-radius: 12px;
         padding: 20px;
         text-decoration: none;
         color: var(--painel-hero-text-primary);
         transition: background-color 0.3s ease, transform 0.3s ease;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         text-align: center;
 }

 .panel-item:hover {
         background-color: #2a2931;
         transform: translateY(-5px);
 }

 .panel-item .fa-solid,
 .panel-item .fa-brands {
         color: var(--painel-hero-primary) !important;
         font-size: 1.6rem;
         margin-bottom: 12px;
         filter: drop-shadow(0 0 10px rgba(185, 16, 16, 0.7));
         transition: filter 0.3s ease;
 }

 .panel-item:hover .fa-solid,
 .panel-item:hover .fa-brands {
         filter: drop-shadow(0 0 15px rgba(185, 16, 16, 0.7));
 }

 .panel-item h4 {
         font-size: 1rem;
         font-weight: 600;
         margin-bottom: 5px;
         color: var(--painel-hero-text-primary) !important;
 }

 .panel-item p {
         font-size: 0.85rem;
         color: var(--painel-hero-text-secondary) !important;
 }

 .panel-footer {
         margin-top: 25px;
 }

 .panel-footer a {
         display: flex;
         align-items: center;
         gap: 15px;
         text-decoration: none;
         color: var(--painel-hero-text-primary);
         background-color: rgba(16, 15, 20, 0.7);
         padding: 15px;
         border-radius: 12px;
         border: 1px solid var(--painel-hero-border-color);
         transition: background-color 0.3s ease, transform 0.3s ease;
 }

 .panel-footer a:hover {
         background-color: #2a2931;
         transform: translateY(-5px);
 }

 .panel-footer h4 {
         font-size: 1rem;
         font-weight: 600;
         margin: 0;
         line-height: 1.2;
         color: var(--painel-hero-text-primary) !important;
 }

 .panel-footer p {
         font-size: 0.85rem;
         color: var(--painel-hero-text-secondary) !important;
         margin: 0;
         line-height: 1.2;
 }

 .panel-footer .fa-brands {
         color: var(--painel-hero-primary) !important;
 }

 @media (min-width: 576px) {
         .hero-title {
                 font-size: 2.8rem;
         }

         .hero-subtitle {
                 font-size: 1rem;
         }

         .hero-buttons {
                 flex-direction: row;
                 justify-content: center;
         }

         .hero-btn {
                 width: auto;
                 max-width: none;
         }

         .hero-features {
                 flex-wrap: wrap;
                 gap: 25px;
                 font-size: 0.9rem;
         }
 }

 @media (min-width: 768px) {
         .hero-container {
                 flex-direction: row;
                 justify-content: space-between;
                 align-items: center;
                 gap: 60px;
         }

         .hero-presentation {
                 text-align: left;
         }

         .hero-buttons {
                 justify-content: flex-start;
         }

         .hero-features {
                 justify-content: flex-start;
         }

         .control-panel {
                 display: block;
         }
 }

 @media (min-width: 992px) {
         .hero-title {
                 font-size: 3.8rem;
         }

         .hero-subtitle {
                 font-size: 1.1rem;
         }
 }

 .product_card,
 .sc-284a1cfc-6 {
         background: rgba(255, 255, 255, 0.05) !important;
         backdrop-filter: blur(15px) !important;
         -webkit-backdrop-filter: blur(15px) !important;
         border-radius: 16px !important;
         border: 1px solid rgba(255, 255, 255, 0.12) !important;
         box-shadow: none !important;
         transition: transform 0.3s ease, border-color 0.3s ease !important;
 }

 .product_card:hover,
 .sc-284a1cfc-6:hover {
         transform: translateY(-5px) scale(1.02) !important;
         border-color: rgba(255, 255, 255, 0.25) !important;
 }

 .product_card button,
 .sc-284a1cfc-28 {
         background: rgba(0, 255, 255, 0.8) !important;
         backdrop-filter: blur(10px) !important;
         border: 1px solid rgba(255, 255, 255, 0.1) !important;
         border-radius: 12px !important;
         color: black !important;
         font-weight: 600 !important;
         transition: all 0.3s ease !important;
 }

 .product_card button:hover,
 .sc-284a1cfc-28:hover {
         background: rgba(255, 255, 255, 0.2) !important;
 }

 .sc-284a1cfc-17,
 .sc-284a1cfc-21,
 .sc-284a1cfc-22,
 .sc-296417d8-0 {
         color: #ffffff !important;
 }

 .product_info,
 .sc-284a1cfc-14,
 .sc-284a1cfc-8,
 .sc-284a1cfc-8 img,
 .product_card div,
 .sc-284a1cfc-27 {
         background: transparent !important;
 }

 /* ==========================
   CSS: Pop-ups de Vendas Estratégicos
   ========================== */
 .sales-popup {
         position: fixed;
         bottom: 25px;
         left: 25px;
         z-index: 9999;
         background: rgba(10, 10, 15, 0.8);
         backdrop-filter: blur(15px);
         -webkit-backdrop-filter: blur(15px);
         color: #fff;
         padding: 12px 20px;
         border-radius: 12px;
         border: 1px solid rgba(255, 255, 255, 0.1);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
         display: flex;
         align-items: center;
         gap: 15px;
         opacity: 0;
         transform: translateY(30px) scale(0.9);
         visibility: hidden;
         transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
         max-width: 350px;
         pointer-events: none;
 }

 .sales-popup.show {
         opacity: 1;
         transform: translateY(0) scale(1);
         visibility: visible;
 }

 /* Ícone */
 .popup-icon {
         width: 40px;
         height: 40px;
         background: rgba(0, 255, 255, 0.1);
         border-radius: 10px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: rgb(0, 255, 255);
         font-size: 18px;
         flex-shrink: 0;
         box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
         animation: apx-pulse-cyan 2s infinite;
 }

 /* Texto e Destaques Ciano */
 .popup-text {
         font-size: 14px;
         line-height: 1.4;
         font-family: 'Inter', sans-serif;
 }

 .apx-highlight {
         color: rgb(0, 255, 255) !important;
         font-weight: 700;
         text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
 }

 /* Animação de Pulso */
 @keyframes apx-pulse-cyan {
         0% {
                 box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.4);
         }

         70% {
                 box-shadow: 0 0 0 10px rgba(0, 255, 255, 0);
         }

         100% {
                 box-shadow: 0 0 0 0 rgba(0, 255, 255, 0);
         }
 }

 /* Responsivo */
 @media (max-width: 640px) {
         .sales-popup {
                 left: 10px;
                 right: 10px;
                 bottom: 15px;
                 max-width: none;
         }
 }

 /* CSS: Rodapé Personalizado (v3) */
 footer.sc-8a04aca7-0 {
         display: none !important;
         visibility: hidden !important;
         height: 0 !important;
         overflow: hidden !important;
         margin: 0 !important;
         padding: 0 !important;
         opacity: 0 !important;
 }

 @keyframes fadeInFooter_v3_minimalist {
         from {
                 opacity: 0;
                 transform: translateY(20px);
         }

         to {
                 opacity: 1;
                 transform: translateY(0);
         }
 }

 #store-custom-footer-v3-minimalist {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
         background-color: transparent;
         color: #ffffff;
         border-radius: 20px;
         padding: 2.5rem 3rem;
         margin: 30px 20px;
         position: relative;
         overflow: hidden;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
         opacity: 0;
         animation: fadeInFooter_v3_minimalist 0.8s ease-out 0.1s forwards;
         text-align: center;
 }

 #store-custom-footer-v3-minimalist * {
         font-family: inherit !important;
         box-sizing: border-box !important;
         text-decoration: none !important;
 }

 #store-custom-footer-v3-minimalist .store-footer-container {
         position: relative;
         z-index: 2;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1.8rem;
 }

 #store-custom-footer-v3-minimalist .store-footer-logo {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 0.7rem;
         font-weight: 700 !important;
         font-size: 1.2rem;
 }

 #store-custom-footer-v3-minimalist .store-logo-text {
         color: #FFFFFF !important;
 }

 #store-custom-footer-v3-minimalist .store-footer-logo img {
         object-fit: contain;
 }

 #store-custom-footer-v3-minimalist .store-footer-nav-links {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 1.5rem;
         margin-top: 0.5rem;
 }

 #store-custom-footer-v3-minimalist .store-footer-nav-links a {
         color: #AAAAAA !important;
         font-size: 0.9rem;
         font-weight: 400 !important;
         transition: color 0.3s ease, transform 0.3s ease;
         padding: 0 0.5rem;
 }

 #store-custom-footer-v3-minimalist .store-footer-nav-links a:hover {
         color: #FFFFFF !important;
         transform: translateY(-2px);
 }

 #store-custom-footer-v3-minimalist .store-footer-nav-links a:active {
         transform: translateY(0);
 }

 #store-custom-footer-v3-minimalist .store-social-links {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 1.2rem;
         margin-top: 1rem;
 }

 #store-custom-footer-v3-minimalist .store-social-links a {
         color: #888888 !important;
         display: inline-block !important;
         transition: color 0.3s ease, transform 0.3s ease;
 }

 #store-custom-footer-v3-minimalist .store-social-links a:hover {
         color: #FFFFFF !important;
         transform: translateY(-3px) scale(1.1);
 }

 #store-custom-footer-v3-minimalist .store-social-links a:active {
         transform: translateY(-1px) scale(1.05);
 }

 #store-custom-footer-v3-minimalist .store-copyright {
         font-size: 0.8rem;
         font-weight: 400 !important;
         color: #888888 !important;
         margin-top: 1.5rem;
 }

 @media (max-width: 800px) {
         #store-custom-footer-v3-minimalist {
                 padding: 2rem 1rem;
                 margin: 20px 10px;
         }

         #store-custom-footer-v3-minimalist .store-footer-nav-links {
                 flex-direction: column;
                 gap: 0.8rem;
         }

         #store-custom-footer-v3-minimalist .store-social-links {
                 gap: 1rem;
         }
 }

 /* CSS GLOBAL - Adicione ao seu arquivo CSS */
 .whatsapp-btn {
         position: fixed;
         z-index: 9999;
         cursor: pointer;
         transition: all 0.3s ease;
         display: flex;
         align-items: center;
         justify-content: center;
 }

 /* Para Mobile (A1, A2, A3) */
 .whatsapp-btn.mobile {
         background: #25D366 !important;
         color: white !important;
 }

 /* Para Desktop (B1, B2, B3) */
 .whatsapp-btn.desktop {
         background: white !important;
         border: 2px solid #25D366 !important;
         color: #25D366 !important;
 }

 /* Animações */
 @keyframes pulse {
         0% {
                 box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
         }

         70% {
                 box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
         }

         100% {
                 box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
         }
 }

 .pulse {
         animation: pulse 2s infinite;
 }

 /* ===== CSS PARA BOTÕES FLUTUANTES WHATSAPP ===== */
:root {
    --whatsapp-green: #25D366;
    --whatsapp-dark: #128C7E;
    --whatsapp-light: #DCF8C6;
}

/* Botão para Celular (Ícone Circular) */
.whatsapp-btn-mobile {
    position: fixed;
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: white;
    color: var(--whatsapp-green);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 2px solid var(--whatsapp-green);
}

.whatsapp-btn-mobile:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    background: #f9f9f9;
}

/* Animação de pulso para o botão móvel */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.pulse { animation: pulse 2s infinite; }

/* Botão para Desktop/Laptop (Texto + Ícone) */
.whatsapp-btn-desktop {
    position: fixed;
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease;
    bottom: 30px;
    left: 30px;
    padding: 15px 25px;
    border-radius: 50px;
    background: white;
    color: var(--whatsapp-green);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 2px solid var(--whatsapp-green);
}

.whatsapp-btn-desktop:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    background: #f9f9f9;
}

/* ===== CSS PARA O MODAL ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--whatsapp-dark), var(--whatsapp-green));
    color: white;
    border-radius: 16px 16px 0 0;
}

.modal-body {
    padding: 24px;
}

.close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: background 0.2s;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.info-section {
    margin-bottom: 24px;
}

.info-section h3 {
    color: var(--whatsapp-dark);
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
}

.streaming-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.streaming-option {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    min-width: 120px;
    text-align: center;
}

.streaming-option:hover {
    background: #e5e7eb;
    transform: translateY(-2px);
}

.streaming-option.selected {
    background: var(--whatsapp-light);
    border-color: var(--whatsapp-green);
    color: var(--whatsapp-dark);
    font-weight: 600;
}

.whatsapp-action-btn {
    background: linear-gradient(135deg, var(--whatsapp-dark), var(--whatsapp-green));
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    transition: all 0.3s;
}

.whatsapp-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

/* WHATSAPP INTEGRATION - ereemby.com */
:root {
    --wa-green: #25D366;
    --wa-dark: #128C7E;
    --wa-light: #DCF8C6;
}

/* Visibilidade Condicional */
@media (max-width: 768px) {
    .wa-btn-desktop { display: none !important; }
    .wa-btn-mobile { display: flex !important; }
}
@media (min-width: 769px) {
    .wa-btn-mobile { display: none !important; }
    .wa-btn-desktop { display: flex !important; }
}

/* Botão Mobile (Direita) */
.wa-btn-mobile {
    position: fixed; bottom: 30px; right: 30px;
    width: 60px; height: 60px; border-radius: 50%;
    background: white; color: var(--wa-green);
    border: 2px solid var(--wa-green);
    font-size: 30px; z-index: 9999;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    cursor: pointer; transition: 0.3s;
}

/* Botão Desktop (Esquerda) */
.wa-btn-desktop {
    position: fixed; bottom: 30px; left: 30px;
    padding: 12px 20px; border-radius: 50px;
    background: white; color: var(--wa-green);
    border: 2px solid var(--wa-green);
    font-size: 16px; font-weight: bold; z-index: 9999;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    cursor: pointer; transition: 0.3s;
}

.wa-btn-mobile:hover, .wa-btn-desktop:hover { transform: scale(1.05); background: #f9f9f9; }

/* Modal */
.wa-modal-overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.7); z-index: 10000;
    display: none; align-items: center; justify-content: center;
}
.wa-modal-overlay.active { display: flex; }

.wa-modal-card {
    background: white; width: 90%; max-width: 450px;
    border-radius: 16px; overflow: hidden; animation: waSlideUp 0.3s ease;
}
@keyframes waSlideUp { from {transform: translateY(20px); opacity:0;} to {transform: translateY(0); opacity:1;} }

.wa-modal-header {
    background: linear-gradient(135deg, var(--wa-dark), var(--wa-green));
    color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center;
}
.wa-modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; }

.wa-option {
    background: #f3f4f6; padding: 12px; margin-bottom: 8px;
    border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: 0.2s;
}
.wa-option:hover { background: #e5e7eb; }
.wa-option.selected { background: var(--wa-light); border-color: var(--wa-green); font-weight: bold; }

.wa-send-btn {
    background: var(--wa-green); color: white; width: 100%;
    padding: 15px; border-radius: 50px; font-weight: bold;
    border: none; margin-top: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* Animação de Pulso */
.wa-pulse { animation: waPulseAnim 2s infinite; }
@keyframes waPulseAnim {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* CONFIGURAÇÃO WHATSAPP - ereemby.com */
:root {
        --wa-green: #25D366;
        --wa-dark: #128C7E;
        --wa-light: #DCF8C6;
}

/* Exibição Inteligente */
@media (max-width: 768px) {
        .wa-btn-desktop {
                display: none !important;
        }

        .wa-btn-mobile {
                display: flex !important;
        }
}

@media (min-width: 769px) {
        .wa-btn-mobile {
                display: none !important;
        }

        .wa-btn-desktop {
                display: flex !important;
        }
}

/* Botão Mobile (Direita) */
.wa-btn-mobile {
        position: fixed;
        z-index: 9999;
        bottom: 30px;
        right: 30px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: white;
        color: var(--wa-green);
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        border: 2px solid var(--wa-green);
        cursor: pointer;
        transition: all 0.3s ease;
}

/* Botão Desktop (Esquerda) */
.wa-btn-desktop {
        position: fixed;
        z-index: 9999;
        bottom: 30px;
        left: 30px;
        padding: 15px 25px;
        border-radius: 50px;
        background: white;
        color: var(--wa-green);
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        border: 2px solid var(--wa-green);
        cursor: pointer;
        transition: all 0.3s ease;
}

.wa-btn-mobile:hover,
.wa-btn-desktop:hover {
        transform: scale(1.05);
        background: #f9f9f9;
}

/* Modal Estilizado */
.wa-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10000;
}

.wa-modal-overlay.active {
        display: flex;
}

.wa-modal-content {
        background: white;
        border-radius: 16px;
        width: 90%;
        max-width: 500px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        animation: waSlideUp 0.3s ease;
}

@keyframes waSlideUp {
        from {
                transform: translateY(20px);
                opacity: 0;
        }

        to {
                transform: translateY(0);
                opacity: 1;
        }
}

.wa-modal-header {
        background: linear-gradient(135deg, var(--wa-dark), var(--wa-green));
        color: white;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
}

.wa-modal-body {
        padding: 24px;
        text-align: left;
}

.wa-info-section {
        margin-bottom: 24px;
}

.wa-info-section h3 {
        color: var(--wa-dark);
        margin-bottom: 12px;
        font-size: 18px;
        font-weight: 600;
}

.wa-streaming-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
}

.wa-streaming-option {
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 10px 15px;
        cursor: pointer;
        transition: all 0.2s;
        flex: 1;
        min-width: 120px;
        text-align: center;
}

.wa-streaming-option:hover {
        background: #e5e7eb;
}

.wa-streaming-option.selected {
        background: var(--wa-light);
        border-color: var(--wa-green);
        color: var(--wa-dark);
        font-weight: 600;
}

.wa-action-btn {
        background: linear-gradient(135deg, var(--wa-dark), var(--wa-green));
        color: white;
        border: none;
        border-radius: 50px;
        padding: 14px 28px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        transition: all 0.3s;
}

.wa-close-x {
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
}

/* Animação Pulso */
.wa-pulse {
        animation: waPulseAnim 2s infinite;
}

@keyframes waPulseAnim {
        0% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        }

        70% {
                box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
        }

        100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        }
}

/* Trava de Proporção para Celular */
html,
body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        width: 100%;
        position: relative;
}


/* Botão Desktop - Corrigido para direito sem ficar gigante */
.wa-btn-desktop {
        position: fixed;
        z-index: 9999;
        bottom: 30px;
        right: 30px;
        /* Coloca na borda direita */
        left: auto;
        /* Bloqueia posicionamento à esquerda */
        padding: 15px 25px;
        border-radius: 50px;
        background: white;
        color: var(--wa-green);
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        border: 2px solid var(--wa-green);
        cursor: pointer;
        transition: all 0.3s ease;
        max-width: 250px;
        /* Limita o largura máxima */
        min-width: 120px;
        /* Largura mínima */
        width: auto;
        /* Largura automática para ajuste */
}


/* RGB Animado para Digital Play */
.store-logo-text {
        background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
        background-size: 400% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 800;
        font-size: 1.8rem;
        animation: rgbAnimation 3s linear infinite;
}

@keyframes rgbAnimation {
        0% {
                background-position: 0% 50%;
        }

        100% {
                background-position: 400% 50%;
        }
}

/* Classe para aplicar RGB em outros textos */
.rgb-text-animated {
        background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000);
        background-size: 400% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: rgbAnimation 3s linear infinite;
}

/* Efeito glow RGB (opcional) */
.rgb-glow {
        animation: rgbGlow 2s ease-in-out infinite alternate;
}

@keyframes rgbGlow {
        0% {
                text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6);
        }

        33% {
                text-shadow: 0 0 10px rgba(0, 255, 0, 0.8), 0 0 20px rgba(0, 255, 0, 0.6);
        }

        66% {
                text-shadow: 0 0 10px rgba(0, 0, 255, 0.8), 0 0 20px rgba(0, 0, 255, 0.6);
        }

        100% {
                text-shadow: 0 0 10px rgba(255, 0, 255, 0.8), 0 0 20px rgba(255, 0, 255, 0.6);
        }
}




/* =============================================
   FOOTER DIGITAL PLAY - ESTILO MODERNO COM RGB
   ============================================= */

/* Container principal do footer */
#store-custom-footer-v3-minimalist {
        background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%) !important;
        border-top: 3px solid #10b981 !important;
        padding: 40px 20px !important;
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

#store-custom-footer-v3-minimalist .store-footer-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
}

/* Logo com RGB animado */
#store-custom-footer-v3-minimalist .store-footer-logo {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
}

#store-custom-footer-v3-minimalist .store-footer-logo img {
        width: 50px !important;
        height: 50px !important;
        border-radius: 12px !important;
        border: 2px solid #10b981 !important;
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

#store-custom-footer-v3-minimalist .store-logo-text {
        background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff0000) !important;
        background-size: 400% 100% !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        font-weight: 800 !important;
        font-size: 2rem !important;
        animation: rgbAnimation 3s linear infinite !important;
}

@keyframes rgbAnimation {
        0% {
                background-position: 0% 50%;
        }

        100% {
                background-position: 400% 50%;
        }
}

/* Links de navegação */
#store-custom-footer-v3-minimalist .store-footer-nav-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 24px !important;
}

#store-custom-footer-v3-minimalist .store-footer-nav-links a {
        color: #94a3b8 !important;
        text-decoration: none !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        padding: 8px 16px !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        border-bottom: 2px solid transparent !important;
}

#store-custom-footer-v3-minimalist .store-footer-nav-links a:hover {
        color: #10b981 !important;
        background: rgba(16, 185, 129, 0.1) !important;
        border-bottom-color: #10b981 !important;
        transform: translateY(-2px) !important;
}

/* Ícones sociais */
#store-custom-footer-v3-minimalist .store-social-links {
        display: flex !important;
        gap: 16px !important;
        justify-content: center !important;
}

#store-custom-footer-v3-minimalist .store-social-links a {
        text-decoration: none !important;
}

#store-custom-footer-v3-minimalist .social-icon-wrapper {
        width: 50px !important;
        height: 50px !important;
        background: linear-gradient(135deg, #1f2937 0%, #0f172a 100%) !important;
        border: 2px solid #10b981 !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
}

#store-custom-footer-v3-minimalist .social-icon-wrapper:hover {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        border-color: #059669 !important;
        transform: translateY(-4px) scale(1.1) !important;
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4) !important;
}

#store-custom-footer-v3-minimalist .social-icon-wrapper svg {
        width: 24px !important;
        height: 24px !important;
        transition: all 0.3s ease !important;
}

/* Cores específicas dos ícones */
#store-custom-footer-v3-minimalist #social-link-instagram .social-icon-wrapper svg {
        fill: #E4405F !important;
}

#store-custom-footer-v3-minimalist #social-link-discord .social-icon-wrapper svg {
        fill: #5865F2 !important;
}

#store-custom-footer-v3-minimalist #social-link-whatsapp .social-icon-wrapper svg {
        fill: #25D366 !important;
}

#store-custom-footer-v3-minimalist .social-icon-wrapper:hover svg {
        fill: #ffffff !important;
}

/* Copyright */
#store-custom-footer-v3-minimalist .store-copyright {
        background: linear-gradient(135deg, #94a3b8 0%, #e2e8f0 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-align: center !important;
        margin-top: 16px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(16, 185, 129, 0.3) !important;
        width: 100% !important;
}

/* Responsivo */
@media (max-width: 640px) {
        #store-custom-footer-v3-minimalist {
                padding: 30px 15px !important;
        }

        #store-custom-footer-v3-minimalist .store-logo-text {
                font-size: 1.5rem !important;
        }

        #store-custom-footer-v3-minimalist .store-footer-nav-links {
                flex-direction: column !important;
                align-items: center !important;
                gap: 8px !important;
        }

        #store-custom-footer-v3-minimalist .social-icon-wrapper {
                width: 44px !important;
                height: 44px !important;
        }
}

/* Esconde o footer antigo */
footer.sc-8a04aca7-0 {
        display: none !important;
}


/* CSS para Banner Responsivo 1920x720 */
.hero-banner-section {
        position: relative;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
}

/* Container de proporção fixa (1920:720 = 8:3) */
.hero-banner-section .banner-container {
        position: relative;
        width: 100%;
        padding-top: 37.5%;
        /* 720/1920 = 0.375 → 37.5% */
        overflow: hidden;
}

/* Imagem responsiva */
.hero-banner-section .banner-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Corta ou estica a imagem para preencher o espaço */
        object-position: center;
        /* Foca no centro da imagem */
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
        .hero-banner-section .banner-container {
                padding-top: 50%;
                /* Aumenta altura em mobile */
        }
}

@media (max-width: 480px) {
        .hero-banner-section .banner-container {
                padding-top: 60%;
                /* Ainda mais altura em telas pequenas */
        }
}



/* Desktop - Proporção original 1920x720 */
@media (min-width: 1921px) {
        .hero-banner-section .banner-image {
                aspect-ratio: 1920 / 720 !important;
        }
}

/* Laptop (1200-1920px) - 16:9 */
@media (max-width: 1920px) and (min-width: 1200px) {
        .hero-banner-section .banner-container {
                padding-top: 37.5% !important;
                /* 720/1920 = 37.5% */
        }
}

/* Tablet (768-1199px) - 4:3 */
@media (max-width: 1199px) and (min-width: 768px) {
        .hero-banner-section .banner-container {
                padding-top: 66.67% !important;
                /* 4:3 = 133.33% de altura */
        }
}

/* Mobile Grande (481-767px) - 16:9 */
@media (max-width: 767px) and (min-width: 481px) {
        .hero-banner-section .banner-container {
                padding-top: 56.25% !important;
                /* 16:9 = 56.25% */
        }
}

/* Mobile Médio (376-480px) - 9:8 */
@media (max-width: 480px) and (min-width: 376px) {
        .hero-banner-section .banner-container {
                padding-top: 66.67% !important;
        }
}

/* Mobile Pequeno (até 375px) - 1:1 */
@media (max-width: 375px) {
        .hero-banner-section .banner-container {
                padding-top: 100% !important;
                /* 1:1 = quadrado */
        }
}