/* Copyright 2023 by Wolf Carls D´ */
/* Upgrade 2024/2025 by Wolf Carls D´ (NO USE !) */
/* Upgrade 2026 by Wolf Carls D´ (NO USE !) */

/* Selected text (seleção texto)
Tags match high ( div/span) AZUL(2º plano)
Tags Atribute ( miolo class)  */


/* CSS nº 1 - Estilos base para body e elementos de texto */

/* Altura base do documento */
html, body { height: 100%; }

/* CSS nº 2 - Margens padrão para body em todos os dispositivos */
body { margin: 0px; /* Margens padrão */ } 

/* CSS nº 3 - Margens para dispositivos desktop (min-width: 769px) */
@media (min-width: 769px) { body { margin: 0px; /* Margens maiores para desktop */ } }


/* CSS nº 4 - Importação de fontes externas */
@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aoboshi+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100;200;300;400;500;600;700;800;900&family=Lilita+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');



/* CSS nº 5 - Classes para famílias de fontes */
.wg-font-Rammetto { font-family: "Rammetto One"; }
.wg-font-Kalam { font-family: "Kalam"; }
.wg-font-Aoboshi { font-family: "Aoboshi One", serif; }
.wg-font-Lilita { font-family: "Lilita One", cursive; }
.wg-font-Encode { font-family: "Encode Sans", sans-serif; }
.wg-font-Poppins { font-family: "Poppins", sans-serif; }

/* CSS nº 6 - Classes para pesos de fontes */
.wg-fonte100 { font-weight: 100; }
.wg-fonte200 { font-weight: 200; }
.wg-fonte300 { font-weight: 300; }
.wg-fonte400 { font-weight: 400; }
.wg-fonte500 { font-weight: 500; }
.wg-fonte600 { font-weight: 600; }
.wg-fonte700 { font-weight: 700; }
.wg-fonte800 { font-weight: 800; }
.wg-fonte900 { font-weight: 900; }

/* CSS nº 7 - Gradiente laranja para fontes com brilho */
.wg-font-laranja_degrade {
    background: linear-gradient(to bottom, red,  yellow);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
	/* Brilho leve, realçando sem cobrir o gradiente */
    text-shadow: 0 1px 2px rgba(255, 120, 30, 0.4),
                 0 2px 3px rgba(255, 150, 50, 0.3);
}

/* CSS nº 8 - Estilos para fontes de oferta e preço com cores forçadas */
.wg-fonte-claquete-oferta { font-family: "Rammetto One"; color: #f23333!important; }
.wg-fonte-preco-family { font-family: "Rammetto One"; color: #ff0000!important; }
.wg-fonte-oferta { font-family: "Aoboshi One", serif; color: #000000!important; }

/* Aplica a transição para o tamanho da fonte e largura */ 															 
/* CSS nº 9 - Transição para inputs com mensagem associada */
.wg-animate-input { transition: font-size 0.4s ease-in-out, width 0.4s ease-in-out, color 0.4s ease-in-out; width: 100%; color: black; }
.message { position: absolute; bottom: 220px; padding-left: 5%!important; text-align: center; color: white; font-family: "Aoboshi One"; transition: color 2.0s ease-in-out; display: none; }
.wg-animate-input:focus { font-size: 20px; width: 70% !important; color: green; }
.wg-animate-input:focus + .message { display: block; padding-left: 5%!important; text-align: center; }
#searchInput { width: 300px; padding: 5px; margin: 10px; }
#searchResults { margin: 10px; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; }


/* CSS nº 10 - Textos entre linhas margem */
/* ===== LINE HEIGHT UTILITÁRIOS Vr1.00 - 19/05/26 ===== */

.wg-texto-margem-entre-linhas_0-5{ line-height:0.5; }
.wg-texto-margem-entre-linhas_0-8{ line-height:0.8; } 
.wg-texto-margem-entre-linhas_0-9{ line-height:0.9; } 
.wg-texto-margem-entre-linhas_1-1{ line-height:1.1; } 
.wg-texto-margem-entre-linhas_1-2{ line-height:1.2; } 
.wg-texto-margem-entre-linhas_1-3{ line-height:1.3; } 
.wg-texto-margem-entre-linhas_1-4{ line-height:1.4; } 
.wg-texto-margem-entre-linhas_1-5{ line-height:1.5; } 
.wg-texto-margem-entre-linhas_1-6{ line-height:1.6; } 
.wg-texto-margem-entre-linhas_1-7{ line-height:1.7; } 
.wg-texto-margem-entre-linhas_1-8{ line-height:1.8; } 
.wg-texto-margem-entre-linhas_1-9{ line-height:1.9; } 
.wg-texto-margem-entre-linhas_2-0{ line-height:2.0; } 

/* CSS nº 11 - Estilos para inputs estilizados */
.wg-input-styled { width: 100px; text-align: center; font-size: 15px; color: black; margin-bottom: 10px; font-family: "Aoboshi One"; }
.wg-input-styled-text { width: 100px; text-align: center; font-size: 15px; color: black; margin-bottom: 10px; font-family: "Aoboshi One"; }

/* CSS nº 12 - Container de input de quantidade com media queries */
 /* INPUT CSS quantidade */						   
.input-container { display: none; } 
/* Para telas maiores (por exemplo, telas maiores que 768px de largura) */																		  
@media screen and (min-width: 768px) {
    .input-container { position: relative; width: 70%; margin: auto auto; text-align: center; }
}
@media screen and (max-width: 768px) {
    .input-container { position: relative; width: 40%; margin: auto auto; text-align: center; }
}

/* CSS nº 13 - Estilos para exibição de unidade e container de quantidade */
.unit-display { font-weight: bold; }
input[name="quantity"] { text-align: center; } 

@media screen and (min-width: 768px) {
	input[name="quantity"] { width: 100px; flex-grow: 1; margin-right: 5px; }
} 
@media screen and (max-width: 768px) {
	input[name="quantity"] { width: 60px; flex-grow: 1; margin-right: 5px; }
}

.quantity-container { display: flex; align-items: center; }
.quantity-container button { flex: 0 0 auto; }
.quantity-container button:first-child { margin-right: 10px; }


/* Para telas maiores (por exemplo, telas maiores que 768px de largura) */
@media screen and (min-width: 768px) {
        position: relative;
        width: 70%; /* Largura de 70% para desktop */
        margin: auto auto;
        text-align: center;
        /* Outras regras de estilo para desktop */
    }
}

/* Para telas menores (por exemplo, telas menores que 768px de largura) */
@media screen and (max-width: 768px) {
     position: relative;
        width: 40%; /* Largura de 40% para dispositivos móveis */
        margin: auto auto;
        text-align: center;
        /* Outras regras de estilo para dispositivos móveis */    }}

    .quantity-container button {
        flex: 0 0 auto; /* Evita que os botões flexionem */    }
    .quantity-container button:first-child {
        margin-right: 10px; /* Espaçamento entre o botão - e o campo de entrada */    }

/* CSS nº 14 - Estilo para elementos destacados */
.highlighted { background-color: yellow; font-weight: bold; }
/* ----------------------------------------- */											   

/* ////  wg-TAMANHOS font /// */								
/* CSS nº 15 - Tamanhos de fontes em vw para todas as telas */
.wg-font-04vw { font-size: 0.4vw; }
.wg-font-05vw { font-size: 0.5vw; }
.wg-font-06vw { font-size: 0.6vw; }
.wg-font-07vw { font-size: 0.7vw; }
.wg-font-08vw { font-size: 0.8vw; }
.wg-font-09vw { font-size: 0.9vw; }
.wg-font-1vw { font-size: 1vw; }
.wg-font-1-5vw { font-size: 1.5vw; }
.wg-font-2vw { font-size: 2vw; }
.wg-font-2-5vw { font-size: 2.5vw; }
.wg-font-3vw { font-size: 3vw; }
.wg-font-3-5vw { font-size: 3.5vw; }
.wg-font-4vw { font-size: 4vw; }
.wg-font-4-5vw { font-size: 4.5vw; }
.wg-font-5vw { font-size: 5vw; }
.wg-font-5-5vw { font-size: 5.5vw; }
.wg-font-6vw { font-size: 6vw; }
.wg-font-6-5vw { font-size: 6.5vw; }
.wg-font-7vw { font-size: 7vw; }
.wg-font-7-5vw { font-size: 7.5vw; }
.wg-font-8vw { font-size: 8vw; }
.wg-font-8-5vw { font-size: 8.5vw; }
.wg-font-9vw { font-size: 9vw; }
.wg-font-9-5vw { font-size: 9.5vw; }
.wg-font-10vw { font-size: 10vw; }
.wg-font-10-5vw { font-size: 10.5vw; }
.wg-font-11vw { font-size: 11vw; }
.wg-font-11-5vw { font-size: 11.5vw; }
.wg-font-12vw { font-size: 12vw; }
.wg-font-12-5vw { font-size: 12.5vw; }
.wg-font-13vw { font-size: 13vw; }
.wg-font-13-5vw { font-size: 13.5vw; }
.wg-font-14vw { font-size: 14vw; }
.wg-font-14-5vw { font-size: 14.5vw; }
.wg-font-15vw { font-size: 15vw; }

/* CSS nº 16 - Tamanhos de fontes em px para todas as telas */
.wg-font-10px { font-size: 10px; }
.wg-font-12px { font-size: 12px; }
.wg-font-14px { font-size: 14px; }
.wg-font-16px { font-size: 16px; }
.wg-font-18px { font-size: 18px; }
.wg-font-20px { font-size: 20px; }
.wg-font-22px { font-size: 22px; }
.wg-font-24px { font-size: 24px; }
.wg-font-26px { font-size: 26px; }
.wg-font-28px { font-size: 28px; }
.wg-font-30px { font-size: 30px; }
.wg-font-32px { font-size: 32px; }
.wg-font-34px { font-size: 34px; }
.wg-font-38px { font-size: 38px; }
.wg-font-42px { font-size: 42px; }
.wg-font-45px { font-size: 45px; }
.wg-font-50px { font-size: 50px; }
.wg-font-55px { font-size: 55px; }
.wg-font-60px { font-size: 60px; }
.wg-font-65px { font-size: 65px; }
.wg-font-70px { font-size: 70px; }
.wg-font-75px { font-size: 75px; }
.wg-font-80px { font-size: 80px; }
.wg-font-85px { font-size: 85px; }
.wg-font-90px { font-size: 90px; }

/* CSS nº 17 - Tamanhos de fontes em vw para telas grandes (min-width: 768px) */
@media (min-width: 768px) {
    .wg-font-04vw-desk { font-size: 0.4vw; }
    .wg-font-05vw-desk { font-size: 0.5vw; }
    .wg-font-06vw-desk { font-size: 0.6vw; }
    .wg-font-07vw-desk { font-size: 0.7vw; }
    .wg-font-08vw-desk { font-size: 0.8vw; }
    .wg-font-09vw-desk { font-size: 0.9vw; }
    .wg-font-1vw-desk { font-size: 1vw; }
    .wg-font-1-5vw-desk { font-size: 1.5vw; }
    .wg-font-2vw-desk { font-size: 2vw; }
    .wg-font-2-5vw-desk { font-size: 2.5vw; }
    .wg-font-3vw-desk { font-size: 3vw; }
    .wg-font-3-5vw-desk { font-size: 3.5vw; }
    .wg-font-4vw-desk { font-size: 4vw; }
    .wg-font-4-5vw-desk { font-size: 4.5vw; }
    .wg-font-5vw-desk { font-size: 5vw; }
    .wg-font-5-5vw-desk { font-size: 5.5vw; }
    .wg-font-6vw-desk { font-size: 6vw; }
    .wg-font-6-5vw-desk { font-size: 6.5vw; }
    .wg-font-7vw-desk { font-size: 7vw; }
    .wg-font-7-5vw-desk { font-size: 7.5vw; }
    .wg-font-8vw-desk { font-size: 8vw; }
    .wg-font-8-5vw-desk { font-size: 8.5vw; }
    .wg-font-9vw-desk { font-size: 9vw; }
    .wg-font-9-5vw-desk { font-size: 9.5vw; }
    .wg-font-10vw-desk { font-size: 10vw; }
    .wg-font-10-5vw-desk { font-size: 10.5vw; }
    .wg-font-11vw-desk { font-size: 11vw; }
    .wg-font-11-5vw-desk { font-size: 11.5vw; }
    .wg-font-12vw-desk { font-size: 12vw; }
    .wg-font-12-5vw-desk { font-size: 12.5vw; }
    .wg-font-13vw-desk { font-size: 13vw; }
    .wg-font-13-5vw-desk { font-size: 13.5vw; }
    .wg-font-14vw-desk { font-size: 14vw; }
    .wg-font-14-5vw-desk { font-size: 14.5vw; }
    .wg-font-15vw-desk { font-size: 15vw; }
}

/* CSS nº 18 - Tamanhos de fontes em px para telas grandes (min-width: 768px) */
@media (min-width: 768px) {
    .wg-font-10px-desk { font-size: 10px; }
    .wg-font-12px-desk { font-size: 12px; }
    .wg-font-14px-desk { font-size: 14px; }
    .wg-font-16px-desk { font-size: 16px; }
    .wg-font-18px-desk { font-size: 18px; }
    .wg-font-20px-desk { font-size: 20px; }
    .wg-font-22px-desk { font-size: 22px; }
    .wg-font-24px-desk { font-size: 24px; }
    .wg-font-26px-desk { font-size: 26px; }
    .wg-font-28px-desk { font-size: 28px; }
    .wg-font-30px-desk { font-size: 30px; }
    .wg-font-32px-desk { font-size: 32px; }
    .wg-font-34px-desk { font-size: 34px; }
    .wg-font-38px-desk { font-size: 38px; }
    .wg-font-42px-desk { font-size: 42px; }
    .wg-font-45px-desk { font-size: 45px; }
    .wg-font-50px-desk { font-size: 50px; }
    .wg-font-55px-desk { font-size: 55px; }
    .wg-font-60px-desk { font-size: 60px; }
    .wg-font-65px-desk { font-size: 65px; }
    .wg-font-70px-desk { font-size: 70px; }
    .wg-font-75px-desk { font-size: 75px; }
    .wg-font-80px-desk { font-size: 80px; }
    .wg-font-85px-desk { font-size: 85px; }
    .wg-font-90px-desk { font-size: 90px; }
}

/* CSS nº 19 - Tamanhos de fontes em vw para telas menores (max-width: 767px) */
@media (max-width: 767px) {
    .wg-font-04vw-cel { font-size: 0.4vw; }
    .wg-font-05vw-cel { font-size: 0.5vw; }
    .wg-font-06vw-cel { font-size: 0.6vw; }
    .wg-font-07vw-cel { font-size: 0.7vw; }
    .wg-font-08vw-cel { font-size: 0.8vw; }
    .wg-font-09vw-cel { font-size: 0.9vw; }
    .wg-font-1vw-cel { font-size: 1vw; }
    .wg-font-1-5vw-cel { font-size: 1.5vw; }
    .wg-font-2vw-cel { font-size: 2vw; }
    .wg-font-2-5vw-cel { font-size: 2.5vw; }
    .wg-font-3vw-cel { font-size: 3vw; }
    .wg-font-3-5vw-cel { font-size: 3.5vw; }
    .wg-font-4vw-cel { font-size: 4vw; }
    .wg-font-4-5vw-cel { font-size: 4.5vw; }
    .wg-font-5vw-cel { font-size: 5vw; }
    .wg-font-5-5vw-cel { font-size: 5.5vw; }
    .wg-font-6vw-cel { font-size: 6vw; }
    .wg-font-6-5vw-cel { font-size: 6.5vw; }
    .wg-font-7vw-cel { font-size: 7vw; }
    .wg-font-7-5vw-cel { font-size: 7.5vw; }
    .wg-font-8vw-cel { font-size: 8vw; }
    .wg-font-8-5vw-cel { font-size: 8.5vw; }
    .wg-font-9vw-cel { font-size: 9vw; }
    .wg-font-9-5vw-cel { font-size: 9.5vw; }
    .wg-font-10vw-cel { font-size: 10vw; }
    .wg-font-10-5vw-cel { font-size: 10.5vw; }
    .wg-font-11vw-cel { font-size: 11vw; }
    .wg-font-11-5vw-cel { font-size: 11.5vw; }
    .wg-font-12vw-cel { font-size: 12vw; }
    .wg-font-12-5vw-cel { font-size: 12.5vw; }
    .wg-font-13vw-cel { font-size: 13vw; }
    .wg-font-13-5vw-cel { font-size: 13.5vw; }
    .wg-font-14vw-cel { font-size: 14vw; }
    .wg-font-14-5vw-cel { font-size: 14.5vw; }
    .wg-font-15vw-cel { font-size: 15vw; }
}

/* CSS nº 20 - Tamanhos de fontes em px para telas menores (max-width: 767px) */
@media (max-width: 767px) {
    .wg-font-10px-cel { font-size: 10px; }
    .wg-font-12px-cel { font-size: 12px; }
    .wg-font-14px-cel { font-size: 14px; }
    .wg-font-16px-cel { font-size: 16px; }
    .wg-font-18px-cel { font-size: 18px; }
    .wg-font-20px-cel { font-size: 20px; }
    .wg-font-22px-cel { font-size: 22px; }
    .wg-font-24px-cel { font-size: 24px; }
    .wg-font-26px-cel { font-size: 26px; }
    .wg-font-28px-cel { font-size: 28px; }
    .wg-font-30px-cel { font-size: 30px; }
    .wg-font-32px-cel { font-size: 32px; }
    .wg-font-34px-cel { font-size: 34px; }
    .wg-font-38px-cel { font-size: 38px; }
    .wg-font-42px-cel { font-size: 42px; }
    .wg-font-45px-cel { font-size: 45px; }
    .wg-font-50px-cel { font-size: 50px; }
    .wg-font-55px-cel { font-size: 55px; }
    .wg-font-60px-cel { font-size: 60px; }
    .wg-font-65px-cel { font-size: 65px; }
    .wg-font-70px-cel { font-size: 70px; }
    .wg-font-75px-cel { font-size: 75px; }
    .wg-font-80px-cel { font-size: 80px; }
    .wg-font-85px-cel { font-size: 85px; }
    .wg-font-90px-cel { font-size: 90px; }
}

/* ////  wg-CORES font /// */
/* CSS nº 21 - Cores de fontes com transparência */
.wg-font-transp40 { color: rgba(0, 0, 0, 0.4); }
.wg-font-transparente { color: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 0); }
.wg-font-transp-branco { color: rgba(255, 255, 255, 0.3); }

/* CSS nº 22 - Cores de fontes padrão */
.wg-font-azul{color:#0c3c60 !important;}
.wg-font-azul2{color:#0033cc !important;}
.wg-font-azul3{color:#3333ff !important;}
.wg-font-verde{color:#54f233 !important;}
.wg-font-vermelho{color:#f23333 !important;}
.wg-font-amarelo{color:#fdde00 !important;}
.wg-font-laranja{color:#ffa542 !important;}
.wg-font-laranja2{color:#ff6600 !important;}
.wg-font-laranja3{color:#ff6a00 !important;}
.wg-font-branca{color:#ffffff !important;}
.wg-font-preto{color:#000000 !important;}


/* CSS nº 23 - Cores de fontes para logo */
.wg-font-logo-cor-azul { color: #18ABE3; }
.wg-font-logo-cor-azul2 { color: #0033cc !important; }
.wg-font-logo-cor-azul3 { color: #3333ff !important; }
.wg-font-logo-cor-rosa { color: #DC088B; }
.wg-font-logo-cor-rosa2 { color: #f83aaf; }

/* CSS nº 24 - Degradês para fontes de logo */
.wg-font-logo-3D_v1 { color: #ffffff !important; background: linear-gradient(to bottom, #18ABE3 25%, #DC088B 80%); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.wg-font-logo-3D_v2 { color: #ffffff !important; background: linear-gradient(to bottom, #DC088B, #18ABE3); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.wg-font-laranja2D-branco { color: #ffffff !important; background: linear-gradient(to bottom, #ff6600 20%, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent !important; }


/* WG-FONTE-EFX-SUBLI-LARANJA-1 */
.wg-fonte-efx-subli-laranja-1{position:relative;display:inline-block;font-weight:900;padding:0 8px;line-height:1.5}
.wg-fonte-efx-subli-laranja-1:before{content:"";position:absolute;inset:5% 0;background:linear-gradient(180deg,transparent 10%,#f28c38 10%,#f28c38 90%,transparent 90%);border-radius:4px;opacity:.92;z-index:-1;box-shadow:0 4px 12px rgba(242,140,56,.45)}
.wg-fonte-efx-subli-laranja-1 span{background:linear-gradient(90deg,#fff 0%,#fff 30%,#f28c38 50%,#e8c670 90%,#f28c38 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wgFusionPulse 4s ease-in-out infinite}
@keyframes wgFusionPulse{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}



/* WG-MARCA TEXTO MATRIZ */

.wg-marca-txt-laranja{
    position:relative;
    display:inline-block;
    z-index:1;
    padding:0 .20em;
}

.wg-marca-txt-laranja::before{
    content:"";
    position:absolute;

    left:-8px;
    right:-8px;

    /* ajustado */
    top:18%;
    height:82%;

    z-index:-1;

    background:
    
    radial-gradient(circle at 8% 40%,
    transparent 0 3px,
    rgba(255,145,0,.82) 4px),

    radial-gradient(circle at 22% 60%,
    rgba(255,150,0,.72) 0 12px,
    transparent 13px),

    radial-gradient(circle at 50% 30%,
    rgba(255,165,40,.90) 0 14px,
    transparent 15px),

    radial-gradient(circle at 74% 70%,
    rgba(255,135,0,.75) 0 12px,
    transparent 13px),

    radial-gradient(circle at 92% 35%,
    rgba(255,160,30,.85) 0 11px,
    transparent 12px),

    linear-gradient(
    92deg,
    rgba(255,120,0,.80),
    rgba(255,165,40,.95),
    rgba(255,130,0,.85)
    );

    transform:
    rotate(-1.8deg)
    skewX(-8deg);

    border-radius:
    18px 5px 22px 8px /
    4px 15px 7px 16px;

    opacity:.95;

    filter:
    blur(.5px)
    drop-shadow(0 2px 4px rgba(255,120,0,.30));
}


.wg-marca-txt-verde1{
    position:relative;
    display:inline-block;
    z-index:1;
    padding:0 .20em;
	
}

.wg-marca-txt-verde1::before{
     content:"";
    position:absolute;

    left:-8px;
    right:-8px;

    /* ajustado */
    top:18%;
    height:82%;

    z-index:-1;

    background:
    
    radial-gradient(circle at 8% 40%,
    transparent 0 3px,
    rgba(37,211,102,.82) 4px),

    radial-gradient(circle at 22% 60%,
    rgba(37,211,102,.72) 0 12px,
    transparent 13px),

    radial-gradient(circle at 50% 30%,
    rgba(70,230,120,.90) 0 14px,
    transparent 15px),

    radial-gradient(circle at 74% 70%,
    rgba(20,180,75,.75) 0 12px,
    transparent 13px),

    radial-gradient(circle at 92% 35%,
    rgba(50,220,105,.85) 0 11px,
    transparent 12px),

    linear-gradient(
    92deg,
    rgba(20,165,70,.80),
    rgba(37,211,102,.95),
    rgba(18,145,60,.85)
    );

    transform:
    rotate(-1.8deg)
    skewX(-8deg);

    border-radius:
    18px 5px 22px 8px /
    4px 15px 7px 16px;

    opacity:.95;

    filter:
    blur(.5px)
    drop-shadow(0 2px 4px rgba(37,211,102,.30));
}

.wg-marca-txt-verde2{
    position:relative;
    display:inline-block;
    z-index:1;
    padding:0 .20em;
}

.wg-marca-txt-verde2::before{
    content:"";
    position:absolute;

    left:-8px;
    right:-8px;

    /* idêntico ao laranja */
    top:18%;
    height:82%;

    z-index:-1;

    background:
    
    radial-gradient(circle at 8% 40%,
    transparent 0 3px,
    rgba(84,242,51,.82) 4px),

    radial-gradient(circle at 22% 60%,
    rgba(84,242,51,.72) 0 12px,
    transparent 13px),

    radial-gradient(circle at 50% 30%,
    rgba(110,255,85,.90) 0 14px,
    transparent 15px),

    radial-gradient(circle at 74% 70%,
    rgba(65,220,40,.75) 0 12px,
    transparent 13px),

    radial-gradient(circle at 92% 35%,
    rgba(130,255,100,.85) 0 11px,
    transparent 12px),

    linear-gradient(
    92deg,
    rgba(65,220,40,.80),
    rgba(84,242,51,.95),
    rgba(50,200,28,.85)
    );

    transform:
    rotate(-1.8deg)
    skewX(-8deg);

    border-radius:
    18px 5px 22px 8px /
    4px 15px 7px 16px;

    opacity:.95;

    filter:
    blur(.5px)
    drop-shadow(
    0 2px 4px rgba(84,242,51,.30));
}

/* ===== MARCA TEXTO VERMELHO 1 Vr1.00 - 19/05/26 ===== */

.wg-marca-txt-vermelho1{
    position:relative;
    display:inline-block;
    z-index:1;
    padding:0 .20em;
}

.wg-marca-txt-vermelho1::before{
    content:"";
    position:absolute;

    left:-8px;
    right:-8px;

    top:18%;
    height:82%;

    z-index:-1;

    background:

    radial-gradient(circle at 8% 40%,
    transparent 0 3px,
    rgba(255,70,70,.82) 4px),

    radial-gradient(circle at 22% 60%,
    rgba(255,60,60,.72) 0 12px,
    transparent 13px),

    radial-gradient(circle at 50% 30%,
    rgba(255,90,90,.90) 0 14px,
    transparent 15px),

    radial-gradient(circle at 74% 70%,
    rgba(220,40,40,.75) 0 12px,
    transparent 13px),

    radial-gradient(circle at 92% 35%,
    rgba(255,80,80,.85) 0 11px,
    transparent 12px),

    linear-gradient(
    92deg,
    rgba(180,20,20,.80),
    rgba(255,50,50,.95),
    rgba(140,10,10,.85)
    );

    transform:
    rotate(-1.8deg)
    skewX(-8deg);

    border-radius:
    18px 5px 22px 8px /
    4px 15px 7px 16px;

    opacity:.95;

    filter:
    blur(.5px)
    drop-shadow(0 2px 4px rgba(255,50,50,.35));
}

/* WG-FONTE-EFX-ZOOM */
/* ============================= */
/* ZOOM 50% */
/* ============================= */

.wg-textos-zoom-50p{
display:inline-block;
transform-origin:center;
animation:wgZoom50 10s ease-in-out infinite;
}

@keyframes wgZoom50{

0%{transform:scale(1);}
40%{transform:scale(1);} /* 4s parado */

70%{transform:scale(1.5);} /* +50% */

100%{transform:scale(1);} /* volta */

}


/* ============================= */
/* ZOOM 100% */
/* ============================= */

.wg-textos-zoom-100p{
display:inline-block;
transform-origin:center;
animation:wgZoom100 10s ease-in-out infinite;
}

@keyframes wgZoom100{

0%{transform:scale(1);}
40%{transform:scale(1);} /* 4s parado */

70%{transform:scale(2);} /* +100% */

100%{transform:scale(1);} /* volta */

}

</style>



.wg-textos-zoom-200p{display:inline-block;
animation:wgZoom200 8s ease-in-out infinite;
}
@keyframes wgZoom200{
0%{transform:scale(1);}
25%{transform:scale(1);} /* pausa 2s */
60%{transform:scale(2);} /* 200% */
100%{transform:scale(1);} /* volta */
}


.wg-textos-zoom-200p{
display:inline-block;
transform-origin:center;
will-change:transform;
animation:wgZoom200 8s ease-in-out infinite;
}

.wg-textos-zoom-full-out{
display:inline-block;
animation:wgZoomFull 8s ease-in-out infinite;
}
@keyframes wgZoomFull{
0%{transform:scale(1);}
25%{transform:scale(1);} /* pausa */
70%{transform:scale(6);} /* explode */
100%{transform:scale(1);}

}



/* ===== WG PULSAR FX Vr1.00 ===== */
.wg-txt-anime-pulsar {
  display: inline-block;
  animation: wgPulse 2.0s infinite ease-in-out;
  transform-origin: center;
}

@keyframes wgPulse {
  0%   { transform: scale(1.0);   opacity: 0.8; }
  50%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1.0);   opacity: 0.8; }
}

/* ---------------FINAL FONT COR TAMANHO-------------------------- */																	 

/* ------------- INICIO wg-textoS --------------------------- */

/* CSS nº 25 - Estilos para texto animado com efeito de máquina de escrever */
#typed-strings { display: none; }
#typed { font-size: 52px; line-height: 58px; font-family: "Gotham Black", sans-serif; color: #000; display: inline; vertical-align: top; }
@media screen and (max-width: 992px) { #typed { font-size: 42px; line-height: 42px; } }
@media screen and (max-width: 534px) { #typed { font-size: 24px; line-height: 24px; } }
.typed-cursor { color: #FBBD00; font-size: 60px; opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite; }
@media screen and (max-width: 992px) { .typed-cursor { font-size: 74px; } }
@media screen and (max-width: 534px) { .typed-cursor { font-size: 24px; } }


.wg-texto { color: #FFFFFF; font-size: 18px; font-weight: bold; }

.wg-texto-no-select {
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge antigo */
  user-select: none;         /* padrão */
}

/* CSS nº 26 - Estilos alinhamento para textos */
.wg-text-esq{text-align:left!important;}
.wg-text-dir{text-align:right!important;}
.wg-text-justify{text-align:justify!important;}
.wg-text-center{text-align:center!important;}
.wg-text-abaixo {text-align: bottom!important;}
.wg-text-acima {text-align: top!important;}

/* substituido wg-font-margem por wg-text-margem */												   
/* CSS nº 27 - Margens fixas para textos */
.wg-text-margem-A3 { padding: 3px; }
.wg-text-margem-A5 { padding: 5px; }
.wg-text-margem-A7 { padding: 5px; }
.wg-text-margem-A10 { padding: 10px; }
.wg-text-margem-A12 { padding: 12px; }
.wg-text-margem-A14 { padding: 14px; }
.wg-text-margem-A16 { padding: 16px; }
.wg-text-margem-A18 { padding: 18px; }
.wg-text-margem-A20 { padding: 20px; }
.wg-text-margem-A25 { padding: 25px; }

/* Margem porcentagem % superior, inferior, esquerda e direita */																 
/* CSS nº 28 - Margens em porcentagem para textos */
.wg-text-margem-A12p { padding: 12%; }
.wg-text-margem-A13p { padding: 13%; }
.wg-text-margem-A14p { padding: 14%; }
.wg-text-margem-A15p { padding: 15%; }
.wg-text-margem-A16p { padding: 16%; }
.wg-text-margem-A17p { padding: 17%; }
.wg-text-margem-A18p { padding: 18%; }
.wg-text-margem-A19p { padding: 19%; }
.wg-text-margem-A20p { padding: 20%; }
.wg-text-margem-A25p { padding: 25%; }
.wg-text-margem-A30p { padding: 30%; }

/* Margem % esquerda e direita */								 
.wg-text-margemLR10p {	padding-left: 10%;	padding-right: 10%;}
.wg-text-margemLR15p {	padding-left: 15%;	padding-right: 15%;}
.wg-text-margemLR20p {	padding-left: 20%;	padding-right: 20%;}


/* Margem FIXA esquerda e direita */									
/* CSS nº 29 - Margens laterais fixas para textos */
.wg-text-margemLR10 { padding-left: 10px; padding-right: 10px; }
.wg-text-margemLR12 { padding-left: 12px; padding-right: 12px; }
.wg-text-margemLR14 { padding-left: 14px; padding-right: 14px; }
.wg-text-margemLR15 { padding-left: 15px; padding-right: 15px; }
.wg-text-margemLR16 { padding-left: 16px; padding-right: 16px; }
.wg-text-margemLR18 { padding-left: 18px; padding-right: 18px; }
.wg-text-margemLR20 { padding-left: 20px; padding-right: 20px; }
.wg-text-margemLR22 { padding-left: 22px; padding-right: 22px; }
.wg-text-margemLR24 { padding-left: 24px; padding-right: 24px; }
.wg-text-margemLR25 { padding-left: 20px; padding-right: 25px; }
.wg-text-margemLR26 { padding-left: 26px; padding-right: 26px; }
.wg-text-margemLR28 { padding-left: 28px; padding-right: 28px; }
.wg-text-margemLR30 { padding-left: 30px; padding-right: 30px; }

/* CSS nº 30a - Margens verticais fixas para textos TOP */
.wg-text-margem-top-10 { margin-top: 10px; }
.wg-text-margem-top-12 { margin-top: 12px; }
.wg-text-margem-top-14 { margin-top: 14px; }
.wg-text-margem-top-16 { margin-top: 16px; }
.wg-text-margem-top-18 { margin-top: 18px; }
.wg-text-margem-top-20 { margin-top: 20px; }
.wg-text-margem-top-25 { margin-top: 25px; } 

/* CSS nº 30b - Margens verticais fixas para textos RODAPÉ*/
.wg-text-margem-bot-10 { margin-bottom: 10px; }
.wg-text-margem-bot-12 { margin-bottom: 12px; }
.wg-text-margem-bot-14 { margin-bottom: 14px; }
.wg-text-margem-bot-16 { margin-bottom: 16px; }
.wg-text-margem-bot-18 { margin-bottom: 18px; }
.wg-text-margem-bot-20 { margin-bottom: 20px; }
.wg-text-margem-bot-25 { margin-bottom: 25px; }

/* CSS nº 31 LIVRE */


/* CSS nº 32 - Estilos para divs de texto com margem e fundo */
.wg-div-text-esq24 {
    margin-left: 24px;
    padding: 16px;
    background-color: #f0f0f0;
}

.wg-div-text-paragrafo {
    margin-left: 24px;
    padding: 16px;
    background-color: #007BFF;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* CSS nº 33 - Estilos para seção FAQ */
.faq-container { max-width: 600px; margin: 0 auto; padding: 20px; }
.faq-question { font-weight: bold; cursor: pointer; }
.faq-answer { display: none; }
.active { display: block; }

/* CSS nº 34 - Estilo para exibição de data e hora */
#dataHoraDiv {
	position: fixed;
	bottom: 10px;
	right: 10px;
	background-color: transparent;
	padding: 10px;
	border-radius: 8px!important;
	font-family: "Aoboshi One", serif;
	font-size: 16px;
	font-weight: bold;
	color: red;
}

/* ------------------ IMAGENS ----------------------- */

/* CSS nº 35 - Controle de visibilidade de imagens por dispositivo */
.wg-img-desk { display: none; }
.wg-img-cel { display: block; }

@media (min-width: 769px) {
  .wg-img-desk { display: block; }
  .wg-img-cel { display: none; }
}

/* CSS nº 36 - Estilo para imagens dentro de divs */
.wg-div-img100p img { max-width: 100%; height: auto; }
.wg-imagem-pb { filter: grayscale(100%); }

/* ===== IMAGENS PRETO E BRANCO Vr1.00-ok- 18/05/26 | 18:35 ===== */

.wg-img-preto-branco img{
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);

    transition:filter .5s ease;
}

/* ===== IMG INVADIR DIV ESQUERDA Vr1.00 - 19/05/26 ===== */

.wg-img-invade-esquerda{
		position:relative;
		margin-right:120px;
		margin-top:12%;
		z-index:2;
    /* invade a coluna esquerda */
    transform:translateX(-220px);
}
/*
transform:translateX(-80px);   * leve *
transform:translateX(-120px);  * médio *
transform:translateX(-180px);  * forte *
transform:translateX(-250px);  * bem destacado
*/

/* Mobile reduz o deslocamento */
@media(max-width:768px){.wg-img-invade-esquerda{transform:translateX(-30px);}}


/* CSS nº 37 - Efeito parallax para imagens de fundo */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}


/* CSS nº 38 - Margens para imagens de oferta */
.wg-div-margem-oferta-img { margin-bottom: 15px!important; margin-top: 15px!important;} 

/* CSS nº 39 - Estilos para logos de oferta */
.wg-logo-img-ofertas {
	background-image: url('https://www.soundrecords.com.br/modelos/imagens/LOG_MERC_CEJEC.png');
	background-size: 40px 40px;
	background-position: top 5px left 0px;
    background-repeat: no-repeat;
    border-radius: 0;
    height: auto;
    position: relative;
}

.wg-logo-img-ofertas2 {
	background-image: url('https://www.soundrecords.com.br/modelos/imagens/LOG_MERC_CEJEC.png');
	background-size: 60px 60px;
	background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    height: auto;
    position: relative;
	align-items: center;
}

/* CSS nº 40 - Container para tabelas com rolagem */
.wg-tabela-container {
    width: 400px;
    height: 300px;
    overflow: auto;
}



/* ----------------------- FUNDOS E IMAGENS --------------------------- */
.wg-fund-grad-imagem { margin: 0; background: url('https://www.soundrecords.com.br/modelos/imagens/LOG_MERC_CEJEC.png'); }

.wg-fund-branco {background-color: #FFFFFF !important; height: auto;}
.wg-fund-preto { background: #000000 !important; } 
.wg-fund-azul1 { background: #0c3c60 !important; } 
.wg-fund-azul2-suave { background: #d1e0eb !important; } 

.wg-fundo-azul{color:#000!important;background:#0c3c60!important}
.wg-fundo-azul-hover:hover{color:#000!important;background:#0c3c60!important}
.wg-fundo-azul2{color:#000!important;background:#091ac3!important}
.wg-fundo-azul2-hover:hover{color:#000!important;background:#091ac3!important}
.wg-fundo-azul3-suave{color:#000!important;background:#2b99eb}
.wg-fundo-azul3-suave-hover:hover{color:#000!important;background:#2b99eb!}
.wg-fundo-azul4-suave{color:#000!important;background:#d1e0eb!important}
.wg-fundo-azul4-suave-hover:hover{color:#000!important;background:#d1e0eb!important}

.wg-fund-vermelho1 { background: #f23333 !important; } 
.wg-fund-vermelho2 { background: #f23333 !important; } 
.wg-fund-amarelo { background: #fdde00 !important; } 
.wg-fund-laranja1 { background: #ffa542 !important; } 
.wg-fund-laranja2 { background: #ff9933 !important; } 
.wg-fund-verde { background: #4CAF50 !important; } 
.wg-fund-roxo { background: #800080 !important; } 

.wg-fundo-escurowg-fundo-escuro{background-color: #ccc;}

.wg-fund-transp {background-color: transparent; height: auto;}
.wg-fund-transp50p {opacity:0.5;}

/* CSS nº 43 - Fundos com gradientes */
.wg-fund-ofer-lara { margin: 0; background: linear-gradient(to right, #FF5400, #FFBB72); height: auto; justify-content: space-between; }
.wg-fund-grad-verde { margin: 0; background: linear-gradient(to right, #003300, #00ff00); }
.wg-fund-grad-laranja { margin: 0; background: linear-gradient(to right, #FF5400, #FFBB72); height: auto; }

.wg-fund-grad-amar-verm { margin: 0; background: linear-gradient(to right, #FFFD55, #FC0004); height: auto;}
.wg-fund-grad-amar-verm80p { margin: 0; background: linear-gradient(to right, rgba(255, 253, 85, 0.8), rgba(252, 0, 4, 0.8)); height: auto; }
.wg-fund-grad-verm-amar { margin: 0; background: linear-gradient(to left, #FFFD55, #FC0004); height: auto;}
.wg-fund-grad-verm-amar80p { margin: 0; background: linear-gradient(to left, rgba(255, 253, 85, 0.8), rgba(252, 0, 4, 0.8)); height: auto; } 
.wg-fund-grad-verm-amar2 { margin: 0; background: linear-gradient(to right, red, yellow); } 
.wg-fund-grad-verd-amar2 { margin: 0; background: linear-gradient(to right, green, yellow); } 
.wg-fund-grad-lara-amar1 { margin: 0; background: linear-gradient(to right, orange, yellow); } 
.wg-fund-grad-lara-verm { margin: 0; background: linear-gradient(to right, #FFFD55, #FC0004); }
.wg-fund-grad-lara-verm80p { margin: 0; background: linear-gradient(to right, rgba(255, 253, 85, 0.8), rgba(252, 0, 4, 0.8)); } 
.wg-fund-grad-verm-lara { margin: 0; background: linear-gradient(to right, red, orange ); } 
.wg-fund-grad-verm-lara80p { margin: 0; background: linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(255, 165, 0, 0.8)); } 

/* wg Gradiente Radial */ 
.wg-fund-grad-rad-amar-verm { margin: 0; background: radial-gradient(circle, #FFFD55, #FC0004); }
.wg-fund-grad-multicor1 { margin: 0; background: radial-gradient(circle, #003300, #00ff00, #FF5400, #FFBB72); }
.wg-fund-grad-conic { margin: 0; background: conic-gradient(from 45deg, #003300, #00ff00); }

.wg-fund-grad-transp { margin: 0; background: radial-gradient(circle, rgba(0, 51, 0, 0.5), rgba(0, 255, 0, 0.8)); }

.wg-fund-degrade-preto-20 { background: rgba(0, 0, 0, 0.2); }
.wg-fund-degrade-preto-40 { background: rgba(0, 0, 0, 0.4); }
.wg-fund-degrade-preto-50 { background: rgba(0, 0, 0, 0.5); }
.wg-fund-degrade-preto-60 { background: rgba(0, 0, 0, 0.6); }
.wg-fund-degrade-preto-80 { background: rgba(0, 0, 0, 0.8); }
.wg-fund-degrade-preto-100 { background: rgba(0, 0, 0, 1); }

.wg-img-degrade { width: 300px; height: 200px; position: relative; overflow: hidden; }
.degrade-div img { width: 100%; height: 100%; object-fit: cover; }
.degrade-div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%); }


/* CSS nº 44 - Fundos com degradês de transparência preta */
.wg-fund-degrade-preto-L20 { background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); } 
.wg-fund-degrade-preto-L40 { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)); }
.wg-fund-degrade-preto-L60 { background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); } 
.wg-fund-degrade-preto-L80 { background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)); } 
.wg-fund-degrade-preto-L100 { background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)); }
.wg-fund-degrade-preto-cima { background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); } 
.wg-fund-degrade-preto-cima2 { background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); } 
.wg-fund-degrade-preto-cima70 { background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); } 
.wg-fund-degrade-preto-cima50 { background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5)); } 
.wg-fund-degrade-preto-vert { background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); } 
.wg-fund-degrade-preto-diag { background: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); }

/* WG FUNDO BLACK 2026 - Isolado, só fundo premium dark com gradiente */
:root {
  --wg-fundo-black-2026-dark-base: #0a0a0c;        /* preto profundo */
  --wg-fundo-black-2026-dark-mid: #141414;         /* cinza escuro elegante */
  --wg-fundo-black-2026-gradient: linear-gradient(135deg, #0a0a0c 0%, #1a0f05 50%, #0f0f0f 100%);
  --wg-fundo-black-2026-gold: #d4af37;             /* para eventuais destaques se quiser */
}

.wg-fundo-black-2026 { background: var(--wg-fundo-black-2026-gradient); color: #e0e0e0;                                  /* texttexto claro para contraste */ min-height: 100vh;                               /* garante que cubra a tela toda se aplicado no body */ }

/* Opcional: se quiser aplicar em divs internas sem forçar altura total */
.wg-fundo-black-2026-container { background: var(--wg-fundo-black-2026-gradient); color: #e0e0e0; }

/* Extra: se quiser um overlay sutil de ruído ou textura (opcional, comente se não quiser) */
.wg-fundo-black-2026::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.02) 0%, transparent 70%); pointer-events: none; z-index: -1; } 



/* CSS nº 45 - Fundos com degradês de vermelho */
.wg-fund-degrade-vermelho-20 { background: rgba(255, 0, 0, 0.2); } 
.wg-fund-degrade-vermelho-40 { background: rgba(255, 0, 0, 0.4); } 
.wg-fund-degrade-vermelho-50 { background: rgba(255, 0, 0, 0.5); } 
.wg-fund-degrade-vermelho-60 { background: rgba(255, 0, 0, 0.6); } 
.wg-fund-degrade-vermelho-80 { background: rgba(255, 0, 0, 0.8); } 
.wg-fund-degrade-vermelho-100 { background: rgba(255, 0, 0, 1); } 

.wg-fund-degrade-vermelho-para-cima { background: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); } 
.wg-fund-degrade-vermelho-para-direita { background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); } 
.wg-fund-degrade-vermelho-vertical { background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); } 
.wg-fund-degrade-vermelho-para-esquerda { background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); } 
.wg-fund-degrade-vermelho-diagonal { background: linear-gradient(45deg, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); } 

/* CSS nº 46 - Fundos com degradês de azul */
.wg-fund-degrade-azul-20 { background: rgba(0, 0, 255, 0.2); } 
.wg-fund-degrade-azul-40 { background: rgba(0, 0, 255, 0.4); } 
.wg-fund-degrade-azul-50 { background: rgba(0, 0, 255, 0.5); } 
.wg-fund-degrade-azul-60 { background: rgba(0, 0, 255, 0.6); } 
.wg-fund-degrade-azul-80 { background: rgba(0, 0, 255, 0.8); } 
.wg-fund-degrade-azul-100 { background: rgba(0, 0, 255, 1); } 

.wg-fund-degrade-azul-cima { background: linear-gradient(to top, rgba(0, 0, 255, 0), rgba(0, 0, 255, 1)); } 
.wg-fund-degrade-azul-vert { background: linear-gradient(to bottom, rgba(0, 0, 255, 0), rgba(0, 0, 255, 1)); } 
.wg-fund-degrade-azul-dir { background: linear-gradient(to right, rgba(0, 0, 255, 0), rgba(0, 0, 255, 1)); } 
.wg-fund-degrade-azul-esq { background: linear-gradient(to left, rgba(0, 0, 255, 0), rgba(0, 0, 255, 1)); } 
.wg-fund-degrade-azul-diag { background: linear-gradient(45deg, rgba(0, 0, 255, 0), rgba(0, 0, 255, 1)); }
.wg-fund-degrade-azul2-dir { background: linear-gradient(to right, rgba(2, 0, 214, 1), rgba(255, 165, 0, 1)); }
.wg-fund-degrade-azul-2  {background: linear-gradient(180deg, #0a2f4d, #000); } 

/* CSS nº 47 - Fundos com degradês de verde */
.wg-fund-degrade-verde-20 { background: rgba(0, 255, 0, 0.2); } 
.wg-fund-degrade-verde-40 { background: rgba(0, 255, 0, 0.4); } 
.wg-fund-degrade-verde-50 { background: rgba(0, 255, 0, 0.5); } 
.wg-fund-degrade-verde-60 { background: rgba(0, 255, 0, 0.6); } 
.wg-fund-degrade-verde-80 { background: rgba(0, 255, 0, 0.8); } 
.wg-fund-degrade-verde-100 { background: rgba(0, 255, 0, 1); }

.wg-fund-degrade-verde-cima { background: linear-gradient(to top, rgba(0, 255, 0, 0), rgba(0, 255, 0, 1)); }
.wg-fund-degrade-verde-vert { background: linear-gradient(to bottom, rgba(0, 255, 0, 0), rgba(0, 255, 0, 1)); }
.wg-fund-degrade-verde-dir { background: linear-gradient(to right, rgba(0, 255, 0, 0), rgba(0, 255, 0, 1)); }
.wg-fund-degrade-verde-esq { background: linear-gradient(to right, rgba(0, 255, 0, 0), rgba(0, 255, 0, 1)); }
.wg-fund-degrade-verde-diag { background: linear-gradient(45deg, rgba(0, 255, 0, 0), rgba(0, 255, 0, 1)); } 

.wg-fund-degrade-amarelo-20 { background: rgba(255, 255, 0, 0.2); } 
.wg-fund-degrade-amarelo-40 { background: rgba(255, 255, 0, 0.4); } 
.wg-fund-degrade-amarelo-50 { background: rgba(255, 255, 0, 0.5); } 
.wg-fund-degrade-amarelo-60 { background: rgba(255, 255, 0, 0.6); } 
.wg-fund-degrade-amarelo-80 { background: rgba(255, 255, 0, 0.8); } 
.wg-fund-degrade-amarelo-100 { background: rgba(255, 255, 0, 1); }

.wg-fund-degrade-laranja-20 { background: rgba(255, 165, 0, 0.2); } 
.wg-fund-degrade-laranja-40 { background: rgba(255, 165, 0, 0.4); } 
.wg-fund-degrade-laranja-50 { background: rgba(255, 165, 0, 0.5); } 
.wg-fund-degrade-laranja-60 { background: rgba(255, 165, 0, 0.6); } 
.wg-fund-degrade-laranja-80 { background: rgba(255, 165, 0, 0.8); } 
.wg-fund-degrade-laranja-100 { background: rgba(255, 165, 0, 1); }

.wg-fund-degrade-laranja-cima { background: linear-gradient(to top, rgba(255, 165, 0, 0), rgba(255, 165, 0, 1)); } 
.wg-fund-degrade-laranja-dir { background: linear-gradient(to right, rgba(255, 165, 0, 0), rgba(255, 165, 0, 1)); } 
.wg-fund-degrade-laranja-esq { background: linear-gradient(to right, rgba(255, 165, 0, 0), rgba(255, 165, 0, 1)); } 
.wg-fund-degrade-laranja-diag { background: linear-gradient(45deg, rgba(255, 165, 0, 0), rgba(255, 165, 0, 1)); } 
.wg-fund-degrade-laranja-vert { background: linear-gradient(to bottom, rgba(255, 165, 0, 0), rgba(255, 165, 0, 1)); } 
.wg-fund-degrade-laranja2-vert { background: linear-gradient(to bottom, rgba(255, 102, 0, 0), rgba(255, 102, 0, 1)); }

.wg-fund-degrade-cores-preto-meio-vermelho { background: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 50%); } 
.wg-fund-degrade-cores-vermelho-meio-azul { background: linear-gradient(to right, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 255, 1) 50%); } 
.wg-fund-degrade-cores-azul-meio-verde { background: linear-gradient(to right, rgba(0, 0, 255, 1) 50%, rgba(0, 255, 0, 1) 50%); } 
.wg-fund-degrade-cores-verde-meio-laranja { background: linear-gradient(to right, rgba(0, 255, 0, 1) 50%, rgba(255, 165, 0, 1) 50%); } 


/* CSS nº 51 - Fundos com degradês de logo (vermelho, laranja, amarelo) */
/* Variações logo fusão com ambas as cores (vermelho → laranja → amarelo) */
.wg-fund-degrade-logo-sr-cima {   background: linear-gradient(to top, #ff0000, #ff7f00, #ffff00);}
.wg-fund-degrade-logo-sr-dir {   background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00); }
.wg-fund-degrade-logo-sr-esq {   background: linear-gradient(to left, #ff0000, #ff7f00, #ffff00);}
.wg-fund-degrade-logo-sr-diag {   background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00); }
.wg-fund-degrade-logo-sr-vert {   background: linear-gradient(to bottom, #ff0000, #ff7f00, #ffff00); }

/* Variações com degradê de 20% a 80% usando rgba */
.wg-fund-degrade-logo-sr-cima20p80p {  background: linear-gradient(to top, rgba(255,0,0,0.6), rgba(255,127,0,0.7), rgba(255,255,0,0.7)); }
.wg-fund-degrade-logo-sr-cima70p90p {  background: linear-gradient(to top, rgba(255,0,0,0.7), rgba(255,127,0,0.8), rgba(255,255,0,0.9)); }
.wg-fund-degrade-logo-sr-dir20p80p { background: linear-gradient(to right, rgba(255,0,0,0.6), rgba(255,127,0,0.7), rgba(255,255,0,0.7)); }
.wg-fund-degrade-logo-sr-esq20p80p {  background: linear-gradient(to left, rgba(255,0,0,0.6), rgba(255,127,0,0.7), rgba(255,255,0,0.7));}
.wg-fund-degrade-logo-sr-diag20p80p {  background: linear-gradient(45deg, rgba(255,0,0,0.6), rgba(255,127,0,0.7), rgba(255,255,0,0.7));}
.wg-fund-degrade-logo-sr-diag70p90p {   background: linear-gradient(45deg, rgba(255,0,0,0.7), rgba(255,127,0,0.8), rgba(255,255,0,0.9));}
.wg-fund-degrade-logo-sr-vert20p80p {   background: linear-gradient(to bottom, rgba(255,0,0,0.6), rgba(255,127,0,0.7), rgba(255,255,0,0.7));}

/* Variações com degradê invertido de 20% a 80% usando rgba */
.wg-fund-degrade-logo-sr-cima20p80p-inv {   background: linear-gradient(to top, rgba(255,255,0,0.7), rgba(255,127,0,0.6), rgba(255,0,0,0.6));}
.wg-fund-degrade-logo-sr-dir20p80p-inv {  background: linear-gradient(to right, rgba(255,255,0,0.7), rgba(255,127,0,0.6), rgba(255,0,0,0.6));}
.wg-fund-degrade-logo-sr-esq20p80p-inv {   background: linear-gradient(to left, rgba(255,255,0,0.7), rgba(255,127,0,0.6), rgba(255,0,0,0.6));}
.wg-fund-degrade-logo-sr-diag20p80p-inv {   background: linear-gradient(45deg, rgba(255,255,0,0.7), rgba(255,127,0,0.6), rgba(255,0,0,0.6));}
.wg-fund-degrade-logo-sr-vert20p80p-inv {  background: linear-gradient(to bottom, rgba(255,255,0,0.7), rgba(255,127,0,0.6), rgba(255,0,0,0.6));}

 .Fonte-CoresLogoSound {
           font-weight: bold;
      letter-spacing: 6px;
      background: linear-gradient(90deg, #ff2d00, #ff8c00, #ffd700);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 40px rgba(255, 140, 0, 0.7);
    }

/* CSS nº 52 - Fundos com degradês de logo (azul e rosa) */
/* Variações logo fusão com ambas as cores */
.wg-fund-degrade-logo-sp-cima { background: linear-gradient(to top, #18ABE3, #DC088B); }
.wg-fund-degrade-logo-sp-dir { background: linear-gradient(to right, #18ABE3, #DC088B); }
.wg-fund-degrade-logo-sp-esq { background: linear-gradient(to left, #18ABE3, #DC088B); }
.wg-fund-degrade-logo-sp-diag { background: linear-gradient(45deg, #18ABE3, #DC088B); }
.wg-fund-degrade-logo-sp-vert { background: linear-gradient(to bottom, #18ABE3, #DC088B); } 

/* Variações com degradê de 20% a 80% usando rgba */
.wg-fund-degrade-logo-sp-cima20p80p { background: linear-gradient(to top, rgba(220, 8, 139, 0.6), rgba(24, 171, 227, 0.7)); } 
.wg-fund-degrade-logo-sp-cima70p90p { background: linear-gradient(to top, rgba(220, 8, 139, 0.7), rgba(24, 171, 227, 0.9)); } 
.wg-fund-degrade-logo-sp-dir20p80p { background: linear-gradient(to right, rgba(220, 8, 139, 0.6), rgba(24, 171, 227, 0.7)); }
.wg-fund-degrade-logo-sp-esq20p80p { background: linear-gradient(to left, rgba(220, 8, 139, 0.6), rgba(24, 171, 227, 0.7)); }
.wg-fund-degrade-logo-sp-diag20p80p { background: linear-gradient(45deg, rgba(220, 8, 139, 0.6), rgba(24, 171, 227, 0.7)); } 
.wg-fund-degrade-logo-sp-diag70p90p { background: linear-gradient(45deg, rgba(220, 8, 139, 0.7), rgba(24, 171, 227, 0.9)); }
.wg-fund-degrade-logo-sp-vert20p80p { background: linear-gradient(to bottom, rgba(220, 8, 139, 0.6), rgba(24, 171, 227, 0.7)); }

/* Variações com degradê invertido de 20% a 80% usando rgba */
.wg-fund-degrade-logo-sp-cima20p80p-inv { background: linear-gradient(to top, rgba(24, 171, 227, 0.7), rgba(220, 8, 139, 0.6)); }
.wg-fund-degrade-logo-sp-dir20p80p-inv { background: linear-gradient(to right, rgba(24, 171, 227, 0.7), rgba(220, 8, 139, 0.6)); }
.wg-fund-degrade-logo-sp-esq20p80p-inv { background: linear-gradient(to left, rgba(24, 171, 227, 0.7), rgba(220, 8, 139, 0.6)); } 
.wg-fund-degrade-logo-sp-diag20p80p-inv { background: linear-gradient(45deg, rgba(24, 171, 227, 0.7), rgba(220, 8, 139, 0.6)); } 
.wg-fund-degrade-logo-sp-vert20p80p-inv { background: linear-gradient(to bottom, rgba(24, 171, 227, 0.7), rgba(220, 8, 139, 0.6)); } 


.wg-fundo-stud1 {
	background-image: url('https://www.soundrecords.com.br/sr/sr_assets/img/fotos/stud1.png');
	min-height: auto;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 0px;
	height: 0 auto;
	padding-right: 0px;
	margin-right: 0px;}	
	

.wg-fundo-stud2 {
	background-image: url('https://www.soundrecords.com.br/sr/sr_assets/img/fotos/stud2.png');
	min-height: 10%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 0px;
	height: 0 auto;
	padding-right: 0px;
	margin-right: 0px;}	

/* ----------------------- FINAL FUNDOS E IMAGENS --------------------------- */


/* -------------------------- INICIO DIVs Ofertas --------------------------------- */  
/* CSS nº 54 - Estilos para divs de ofertas */
.wg-div-inline { display: inline-block;}
        /* Estilize as wg-div-ofertas */
        .wg-div-ofertas {
            width: 50%; /* Cada wg-div-ofertas ocupa metade da largura da tela */
            box-sizing: border-box; /* Inclui as bordas e o preenchimento na largura */
            padding: 5px; /* Espaçamento interno para melhor aparência */
            float: left; /* Faz com que as wg-div-ofertass fiquem lado a lado em telas grandes */
            text-align: center; /* Centraliza o conteúdo dentro da wg-div-ofertas */
			
        }
        /* Limpa o float após as wg-div-ofertas */
		.clearfix:after { content: ""; clear: both; display: table; }

        /* Regras de mídia para telas pequenas (até 768px de largura) */
        @media (max-width: 768px) {
            .wg-div-ofertas {
                width: 100%; /* Em telas pequenas, cada wg-div-ofertas ocupa 100% da largura */
                float: none; /* Remove o float para que as wg-div-ofertass fiquem uma em cima da outra */
                margin-bottom: 20px; /* Adiciona espaço entre as wg-div-ofertass em telas pequenas */
            }
        }

        /* Estilize as divs dentro das wg-div-ofertass */
        .wg-div-ofertas .wg-div-of {
            width: calc(50% - 10px); /* Cada wg-div-of ocupa metade da largura da wg-div-ofertas, com 5px de margem em cada lado */
            box-sizing: border-box; /* Inclui as bordas e o preenchimento na largura */
            background-color: #ffffff; /* Cor de fundo amarelo suave */
            padding: 10px; /* Espaçamento interno para melhor aparência */
            text-align: center; /* Centraliza o conteúdo dentro da wg-div-of */
            margin: 5px; /* Adiciona margem de 5px em todos os lados da wg-div-of */
            float: left; /* Faz com que as wg-div-ofs fiquem lado a lado */
        }
		
		
		  
.wg-oferta {
  width: calc(50% - 10px); /* Cada wg-oferta ocupa metade da largura disponível, com um espaçamento de 10px entre elas */
  margin-bottom: 20px;
  background-color: #f0f0f0;
  padding: 10px;
  box-sizing: border-box;}

.div-block {
    display: inline-block;
    height: 84px;
    list-style-type: none;
    padding: 6px;
    position: relative;
    transition: transform .2s cubic-bezier(.333,0,0,1);
    vertical-align: top;
    width: 84px;}

/* -------------------------- DIVs ofertas final --------------------------------- */  






/* -------------------------- INICIO DIVs geral --------------------------------- */  

/* CSS nº 55 - Estilo para divs com rolagem horizontal */
.wg-auto {overflow-x: auto;}

/* CSS nº 56 - Controle de visibilidade de divs por dispositivo
/* Classe para mostrar a imagem somente em dispositivos desktop MATRIZ*/
.wg-div-desk {  display: none; /* Por padrão, a imagem está oculta */}

/* Classe para mostrar a imagem somente em dispositivos móveis  MATRIZ */
.wg-div-cel {  display: block; /* Por padrão, a imagem está visível em dispositivos móveis */}

/* Media query para dispositivos desktop */
@media (min-width: 769px) {
.wg-div-desk {    display: block; /* Mostrar a imagem em dispositivos desktop */  }
.wg-div-cel {    display: none; /* Ocultar a imagem em dispositivos desktop */  }}

/* Media query para dispositivos desktop 
@media (min-width: 769px) {  .wg-div-desk2 {    display: none;   }
@media (max-width: 768px) {  .wg-div-cel2 {    display: none;   }}*/


/* CSS nº 57 - Tamanhos de divs em porcentagem para TODAS TELAS */
/* div para desk+cel */	
.wg-div15p {width: 15%;  box-sizing: border-box;}
.wg-div25p {width: 25%;  box-sizing: border-box;}
.wg-div30p {width: 30%;  box-sizing: border-box;}
.wg-div40p {width: 40%;  box-sizing: border-box;}
.wg-div50p {width: 50%;  box-sizing: border-box;}
.wg-div60p {width: 60%;  box-sizing: border-box;}
.wg-div70p {width: 70%;  box-sizing: border-box;}
.wg-div80p {width: 80%;  box-sizing: border-box;}
.wg-div90p {width: 90%;  box-sizing: border-box;}
.wg-div95p {width: 95%;  box-sizing: border-box;}
.wg-div100p {width: 100%;  box-sizing: border-box;}

/* CSS nº 58 - Tamanhos de divs em porcentagem para desktop */
/* div para desk */	
@media screen and (min-width: 768px) {
.wg-div15p-desk {width: 15%;  box-sizing: border-box;}
.wg-div25p-desk {width: 25%;  box-sizing: border-box;}
.wg-div30p-desk {width: 30%;  box-sizing: border-box;}
.wg-div40p-desk {width: 40%;  box-sizing: border-box;}
.wg-div50p-desk {width: 50%;  box-sizing: border-box;}
.wg-div60p-desk {width: 60%;  box-sizing: border-box;}
.wg-div70p-desk {width: 70%;  box-sizing: border-box;}
.wg-div80p-desk {width: 80%;  box-sizing: border-box;}
.wg-div90p-desk {width: 90%;  box-sizing: border-box;}
.wg-div95p-desk {width: 95%;  box-sizing: border-box;}
.wg-div100p-desk {width: 100%;  box-sizing: border-box;} }

/* CSS nº 59 - Tamanhos de divs em porcentagem para celulares */
/* div para cel */	
@media screen and (max-width: 767px) {
.wg-div15p-cel {width: 15%;  box-sizing: border-box;}
.wg-div25p-cel {width: 25%;  box-sizing: border-box;}
.wg-div30p-cel {width: 30%;  box-sizing: border-box;}
.wg-div40p-cel {width: 40%;  box-sizing: border-box;}
.wg-div50p-cel {width: 50%;  box-sizing: border-box;}
.wg-div60p-cel {width: 60%;  box-sizing: border-box;}
.wg-div70p-cel {width: 70%;  box-sizing: border-box;}
.wg-div80p-cel {width: 80%;  box-sizing: border-box;}
.wg-div90p-cel {width: 90%;  box-sizing: border-box;}
.wg-div95p-cel {width: 95%;  box-sizing: border-box;}
.wg-div100p-cel {width: 100%;  box-sizing: border-box;} }

/* ---------------------- DIVs / MARGENS ALINHAMENTO ------------------------ */  
/* CSS nº 60 - Alinhamento de divs com flexbox */
.wg-div-center-full { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
/* Flexbox para alinhar div */
@media (min-width: 768px) {
.wg-div-unidas { display: flex; justify-content: space-between;}  }
 /* Torna o container um flex container */  /* Alinha os filhos com espaço entre eles */ 

@media (max-width: 767px) {
  .wg-div-unidas {
    display: flex;
    flex-wrap: wrap; /* Permite que as divs quebrem para a próxima linha */
    justify-content: space-between;
  }}

.wg-div-center { justify-content: center; /* Alinhe horizontalmente */ align-items: center; /* Alinhe verticalmente */ } 
.wg-div-alin-dir { display: flex; justify-content: flex-end; }
.wg-div-alin-esq { display: flex; justify-content: flex-start; } 
.wg-div-alin-vert {  display: flex;  flex-wrap: wrap;  justify-content: space-between;  margin: 0 auto;  padding: 20px;}
.wg-div-alin-vert-cent { display: flex; align-items: center;  }
.wg-div-alin-vert-top { display: flex; vertical-align: top; }
.wg-div-flex-full {display : flex;  flex-direction: column; } /* Ajusta automaticamente a disposição de fontes e imagens conforme aplicativo android Desktop conforme zoom */
.wg-div-flex { flex-direction: row;} /*os elementos filhos dentro de uma div com essa classe serão dispostos em uma única linha horizontal. */
.wg-div-around {justify-content: space-around; }/* distribui o espaço disponível de maneira uniforme em torno de todos os elementos filhos, criando espaçamento igual entre eles. */

.wg-div-h {margin: 0 auto;}  /* Isso centralizará horizontalmente a div */
.wg-div-v {margin: auto 0;} /* Isso centralizará verticalmente a div */
.wg-div-hv {margin: auto auto;} /* Isso centralizará horizontalmente+verticalmente a div */

/* CSS nº 61 - Margens para divs em porcentagem */
.wg-div-margem5p { margin-left: 5%;  margin-right: 5%;}
.wg-div-margem10p { margin-left: 10%;  margin-right: 10%;}
.wg-div-margem15p { margin-left: 15%;  margin-right: 15%;}
.wg-div-margem20p { margin-left: 20%;  margin-right: 20%;}
.wg-div-margem25p { margin-left: 25%;  margin-right: 25%;}

/* CSS nº 62 - Margens fixas para divs (baixo e cima) */
/* MARGENS FIXAS WG PARA cima RODAPÉ */

.wg-div-margem-bot5{margin-bottom: 5px!important}
.wg-div-margem-bot10{margin-bottom: 10px!important}
.wg-div-margem-bot15{margin-bottom: 15px!important}
.wg-div-margem-bot20{margin-bottom: 20px!important}
.wg-div-margem-bot25{margin-bottom: 25px!important}
.wg-div-margem-bot50{margin-bottom: 50px!important}

/* MARGENS FIXAS WG PARA cima TOP */
.wg-div-margem-top5{margin-top: 5px!important}
.wg-div-margem-top10{margin-top: 10px!important}
.wg-div-margem-top15{margin-top: 15px!important}
.wg-div-margem-top20{margin-top: 20px!important}
.wg-div-margem-top25{margin-top: 25px!important}
.wg-div-margem-top50{margin-top: 50px!important}


/* MARGENS NEGATIVAS PARA BAIXO (empurra o elemento para cima) */
.wg-div-margem-bot-5  { margin-bottom: -5px  !important; }
.wg-div-margem-bot-10 { margin-bottom: -10px !important; }
.wg-div-margem-bot-15 { margin-bottom: -15px !important; }
.wg-div-margem-bot-20 { margin-bottom: -20px !important; }
.wg-div-margem-bot-25 { margin-bottom: -25px !important; }
.wg-div-margem-bot-50 { margin-bottom: -50px !important; }

/* MARGENS NEGATIVAS PARA CIMA (empurra o elemento para baixo) */
.wg-div-margem-top-5  { margin-top: -5px  !important; }
.wg-div-margem-top-10 { margin-top: -10px !important; }
.wg-div-margem-top-15 { margin-top: -15px !important; }
.wg-div-margem-top-20 { margin-top: -20px !important; }
.wg-div-margem-top-25 { margin-top: -25px !important; }
.wg-div-margem-top-50 { margin-top: -50px !important; }


/* CSS nº 63 - Margens fixas gerais para divs */
.wg-div-margem-5 { margin: 5px; }
.wg-div-margem-10 { margin: 10px; } 
.wg-div-margem-12 { margin: 12px; } 
.wg-div-margem-14 { margin: 14px; } 
.wg-div-margem-16 { margin: 16px; } 
.wg-div-margem-18 { margin: 18px; } 
.wg-div-margem-20 { margin: 20px; } 
.wg-div-margem-22 { margin: 22px; } 
.wg-div-margem-24 { margin: 24px; } 
.wg-div-margem-26 { margin: 26px; } 
.wg-div-margem-28 { margin: 28px; } 
.wg-div-margem-30 { margin: 30px; } 
.wg-div-margem-40 { margin: 40px; } 

/* CSS nº 64 - Margens à esquerda para divs */
.wg-div-margem-E5 { margin-left: 5px; } 
.wg-div-margem-E10 { margin-left: 10px; } 
.wg-div-margem-E10 { margin-left: 10px; } 
.wg-div-margem-E12 { margin-left: 12px; } 
.wg-div-margem-E14 { margin-left: 14px; } 
.wg-div-margem-E16 { margin-left: 16px; } 
.wg-div-margem-E18 { margin-left: 18px; } 
.wg-div-margem-E20 { margin-left: 20px; } 
.wg-div-margem-E22 { margin-left: 22px; } 
.wg-div-margem-E24 { margin-left: 24px; } 
.wg-div-margem-E26 { margin-left: 26px; } 
.wg-div-margem-E28 { margin-left: 28px; } 
.wg-div-margem-E30 { margin-left: 30px; }
/* CSS nº 65 - Margens à esquerda em porcentagem para divs */
.wg-div-margem-E5p { margin-left: 5%; } 
.wg-div-margem-E10p { margin-left: 10%; } 
.wg-div-margem-E12p { margin-left: 12%; } 
.wg-div-margem-E14p { margin-left: 14%; } 
.wg-div-margem-E16p { margin-left: 16%; } 
.wg-div-margem-E18p { margin-left: 18%; } 
.wg-div-margem-E20p { margin-left: 20%; } 
.wg-div-margem-E22p { margin-left: 22%; } 
.wg-div-margem-E24p { margin-left: 24%; } 
.wg-div-margem-E26p { margin-left: 26%; } 
.wg-div-margem-E28p { margin-left: 28%; } 
.wg-div-margem-E30p { margin-left: 30%; } 

/* CSS nº 66 - Margens à direita para divs */
.wg-div-margem-D10 { margin-right: 10px; } 
.wg-div-margem-D12 { margin-right: 12px; } 
.wg-div-margem-D14 { margin-right: 14px; } 
.wg-div-margem-D16 { margin-right: 16px; } 
.wg-div-margem-D18 { margin-right: 18px; } 
.wg-div-margem-D20 { margin-right: 20px; } 
.wg-div-margem-D22 { margin-right: 22px; } 
.wg-div-margem-D24 { margin-right: 24px; } 
.wg-div-margem-D26 { margin-right: 26px; } 
.wg-div-margem-D28 { margin-right: 28px; } 
.wg-div-margem-D30 { margin-right: 30px; } 
/* CSS nº 67 - Margens à  direita em porcentagem para divs */
.wg-div-margem-D10p { margin-right: 10%; } 
.wg-div-margem-D12p { margin-right: 12%; } 
.wg-div-margem-D14p { margin-right: 14%; } 
.wg-div-margem-D16p { margin-right: 16%; } 
.wg-div-margem-D18p { margin-right: 18%; } 
.wg-div-margem-D20p { margin-right: 20%; } 
.wg-div-margem-D22p { margin-right: 22%; } 
.wg-div-margem-D24p { margin-right: 24%; } 
.wg-div-margem-D26p { margin-right: 26%; } 
.wg-div-margem-D28p { margin-right: 28%; } 
.wg-div-margem-D30p { margin-right: 30%; } 

/* CSS nº 68 - Paddings gerais para divs */
.wg-div-padding-5 { padding: 5px; }
.wg-div-padding-10 { padding: 10px; }
.wg-div-padding-12 { padding: 12px; }
.wg-div-padding-14 { padding: 14px; }
.wg-div-padding-16 { padding: 16px; }
.wg-div-padding-18 { padding: 18px; }
.wg-div-padding-20 { padding: 20px; }
.wg-div-padding-22 { padding: 22px; }
.wg-div-padding-24 { padding: 24px; }
.wg-div-padding-26 { padding: 26px; }
.wg-div-padding-28 { padding: 28px; }
.wg-div-padding-30 { padding: 30px; }
.wg-div-padding-40 { padding: 40px; }

/* CSS nº 69 - Paddings laterais para divs */
.wg-div-padding-LR5 { padding-left: 5px; padding-right: 5px; }
.wg-div-padding-LR10 { padding-left: 10px; padding-right: 10px; }
.wg-div-padding-LR12 { padding-left: 12px; padding-right: 12px; }
.wg-div-padding-LR14 { padding-left: 14px; padding-right: 14px; }
.wg-div-padding-LR16 { padding-left: 16px; padding-right: 16px; }
.wg-div-padding-LR18 { padding-left: 18px; padding-right: 18px; }
.wg-div-padding-LR20 { padding-left: 20px; padding-right: 20px; }
.wg-div-padding-LR22 { padding-left: 22px; padding-right: 22px; }
.wg-div-padding-LR24 { padding-left: 24px; padding-right: 24px; }
.wg-div-padding-LR26 { padding-left: 26px; padding-right: 26px; }
.wg-div-padding-LR28 { padding-left: 28px; padding-right: 28px; }
.wg-div-padding-LR30 { padding-left: 30px; padding-right: 30px; }

/* CSS nº 70 - Paddings verticais para divs */
.wg-div-padding-top5 { padding-top: 5px; }
.wg-div-padding-top10 { padding-top: 10px; }
.wg-div-padding-top15 { padding-top: 15px; }
.wg-div-padding-top20 { padding-top: 20px; }
.wg-div-padding-top25 { padding-top: 25px; }
.wg-div-padding-bot5 { padding-bottom: 5px; }
.wg-div-padding-bot10 { padding-bottom: 10px; }
.wg-div-padding-bot15 { padding-bottom: 15px; }
.wg-div-padding-bot20 { padding-bottom: 20px; }
.wg-div-padding-bot25 { padding-bottom: 25px; }



#alin-vert {
    display: flex; /* Aplica o display flex para os elementos ficarem em uma linha */
    align-items: flex-start; /* Alinha verticalmente os elementos no topo */}

#alin-vert p {  margin: 0; /* Remove margens para evitar espaços indesejados entre as linhas */}

/* ---------------------- DIVs + IMAGENS ------------------------ */  

/* CSS nº 71 - Estilos para contêineres gerais */
.wg-container { max-width: 1200px; margin: 0 auto; padding: 10px; box-sizing: border-box; }
.wg-container-full { width: 100%; padding: 0 px; box-sizing: border-box; }


/* Classe para posicionar o LOGO de forma relativa */
.wg-posicao-relativa {    position: relative;}

/* Classe para posicionar o LOGO de forma absoluta */
.wg-posicao-absoluta {
    position: absolute;
    top: 20%; /* Ajuste a posição vertical conforme necessário */
    left: 10%; /* Ajuste a posição horizontal conforme necessário */
    width: 100%; /* Ocupa a largura total do contêiner pai */
}


/* LOGO INTRO CEL */
.wg-margens-logo-intro {
    margin-left: 10%;
    margin-right: 8%;
    margin-top: 20%;
    margin-bottom: 10%;
}

/* Estilo da div com imagem transparente e wg-texto */
.wg-div-img-transparente {
	background-position: center; 
	background-size: ;
	min-height: 10%;
	background-repeat: ;
	border-radius: 0px;
	height:  auto;
	padding-right: 0px;
	margin-right: 0px;}	
   

/* Container principal (mantém movimento e comportamento) */
.wg-img-destaque-sr {
  display: inline-block;         /* pode ser inline-block para flow atual */
  max-width: 100%;               /* nunca ultrapassar a largura do pai */
  box-sizing: border-box;
  border-radius: 12px;
  background: linear-gradient(90deg, red, orange, yellow);
  padding: 1px;
  transition: transform 0.7s ease, filter 0.7s ease;
  position: relative;
  overflow: hidden;              /* necessário para clip-path e cortes */
}

/* Imagem sempre respeita o container */
.wg-img-destaque-sr img {
  display: block;
  width: 100%;                   /* preenche 100% do container */
  height: auto;
  object-fit: cover;             /* preenche e permite crop visual */
  object-position: center;
  border-radius: 10px;
  transition: transform 0.7s ease, filter 0.7s ease;
}


/* Container pai com position: relative para o absolute funcionar */
.wg-overlay-container {
    position: relative;           /* Importante! */
    overflow: hidden;             /* Evita que a imagem de cima vaze */
    border-radius: 20px;          /* Mantém o arredondamento */
}

/* Imagem de fundo (conceito) - ocupa todo o espaço */
.wg-img-fundo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* Banner por cima - absolute, centralizado ou ajustado */
.wg-banner-overlay {
    position: absolute;
    top: 50%;                     /* Centraliza verticalmente */
    left: 50%;                    /* Centraliza horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta exatamente no centro */
    width: 80%;                   /* Ajuste o tamanho do banner sobreposto (ex: 80%, 90%, 100%) */
    max-width: 600px;             /* Limite máximo para não ficar gigante */
    height: auto;
    z-index: 2;                   /* Garante que fique por cima */
    border-radius: 20px;          /* Arredondamento no banner também */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Sombra para destacar */
    opacity: 0.95;                /* Leve transparência para misturar melhor (opcional) */
}

/* Responsividade: em telas menores, banner ocupa mais ou fica 100% */
@media (max-width: 768px) {
    .wg-banner-overlay {
        width: 90%;
        max-width: none;
    }
}


/* efeito ativado pelo IntersectionObserver */
.wg-img-destaque-sr.active img {  transform: scale(1.05);  filter: brightness(1.2);}

/* ---------------- sombra separada (mantida) ---------------- */
.wg-sombra-sr-especial {
  padding: 6px;
  animation: pulsar-sr 2.5s infinite;
  transition: transform 0.7s ease, filter 0.7s ease;
}

/* keyframes da sombra (mantém o pulso) */
@keyframes pulsar-sr {
  0% {
    box-shadow: 0 0 10px rgba(255,0,0,0.4), 0 0 20px rgba(255,165,0,0.3), 0 0 30px rgba(255,255,0,0.2); }
  50% {
    box-shadow: 0 0 20px rgba(255,0,0,0.6), 0 0 40px rgba(255,165,0,0.5), 0 0 60px rgba(255,255,0,0.4); }
  100% {
    box-shadow: 0 0 10px rgba(255,0,0,0.4), 0 0 20px rgba(255,165,0,0.3), 0 0 30px rgba(255,255,0,0.2); }}

/* ===========================
   Regras somente para celular
   =========================== */
@media (max-width: 768px) {
  /* garantindo que o container responda corretamente */
  .wg-img-destaque-sr {
    width: 100%;
    max-width: 100%;
  }

  /* Classe utilitária: aplicar ao CONTAINER para controlar % */
  .wg-img-90p-cel {
    width: 90%;           /* largura desejada do container (ex: 90%) */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;   /* centraliza na div mãe */
  }

  /* Se preferir aplicar ao elemento <img> diretamente (alternativa) */
  .wg-img-90p-cel img,
  .wg-img-80p-cel img,
  .wg-img-70p-cel img {
    width: 100%;          /* a imagem enche o container onde a classe foi aplicada */
    height: auto;
    max-width: 100%;
    display: block;
  }

  /* Exemplos de utilitários pronto (você pode criar outras) */
  .wg-img-80p-cel { width: 80%; }
  .wg-img-70p-cel { width: 70%; }
}


/* IMG div para desk */	
@media screen and (min-width: 768px) {
  .wg-img-20p-desk { width: 20%; height: auto; }
  .wg-img-25p-desk { width: 25%; height: auto; }
  .wg-img-30p-desk { width: 30%; height: auto; }
  .wg-img-35p-desk { width: 35%; height: auto; }
  .wg-img-40p-desk { width: 40%; height: auto; }
  .wg-img-50p-desk { width: 50%; height: auto; }
  .wg-img-60p-desk { width: 60%; height: auto; }
  .wg-img-70p-desk { width: 70%; height: auto; }
  .wg-img-80p-desk { width: 80%; height: auto; }
  .wg-img-00p-desk { width: 90%; height: auto; }
  .wg-img-100p-desk { width: 100%; height: auto; }
}

/* IMG div para celulares */
@media screen and (max-width: 767px) {
  .wg-img-20p-cel { width: 20%; height: auto; }
  .wg-img-25p-cel { width: 25%; height: auto; }
  .wg-img-30p-cel { width: 30%; height: auto; }
  .wg-img-35p-cel { width: 35%; height: auto; }
  .wg-img-40p-cel { width: 40%; height: auto; }
  .wg-img-50p-cel { width: 50%; height: auto; }
  .wg-img-60p-cel { width: 60%; height: auto; }
  .wg-img-70p-cel { width: 70%; height: auto; }
  .wg-img-80p-cel { width: 80%; height: auto; }
  .wg-img-90p-cel { width: 90%; height: auto; }
  .wg-img-95p-cel { width: 95%; height: auto; }
  .wg-img-100p-cel { width: 100%; height: auto; }}

/* div para desk */	
@media screen and (min-width: 768px) {
  .wg-img-div-20p-desk { width: 20%; height: 100%; }
  .wg-img-div-25p-desk { width: 25%; height: 100%; }
  .wg-img-div-30p-desk { width: 30%; height: 100%; }
  .wg-img-div-35p-desk { width: 35%; height: 100%; }
  .wg-img-div-40p-desk { width: 40%; height: 100%; }
  .wg-img-div-50p-desk { width: 50%; height: 100%; }
  .wg-img-div-60p-desk { width: 60%; height: 100%; }
  .wg-img-div-70p-desk { width: 70%; height: 100%; }
  .wg-img-div-80p-desk { width: 80%; height: 100%; }
  .wg-img-div-90p-desk { width: 90%; height: 100%; }
  .wg-img-div-95p-desk { width: 95%; height: 100%; }
  .wg-img-div-100p-desk { width: 100%; height: 100%; }}

/* div para celulares */
@media screen and (max-width: 767px) {
  .wg-img-div-20p-cel { width: 20%; height: 100%; }
  .wg-img-div-25p-cel { width: 25%; height: 100%; }
  .wg-img-div-30p-cel { width: 30%; height: 100%; }
  .wg-img-div-35p-cel { width: 35%; height: 100%; }
  .wg-img-div-40p-cel { width: 40%; height: 100%; }
  .wg-img-div-50p-cel { width: 50%; height: 100%; }
  .wg-img-div-60p-cel { width: 60%; height: 100%; }
  .wg-img-div-70p-cel { width: 70%; height: 100%; }
  .wg-img-div-80p-cel { width: 80%; height: 100%; }
  .wg-img-div-90p-cel { width: 90%; height: 100%; }
  .wg-img-div-95p-cel { width: 95%; height: 100%; }
  .wg-img-div-100p-cel { width: 100%; height: 100%; }}

/* CSS nº 72 - IMAGENS  adaptando-se ao tamanho da tela ou do contêiner pai.*/
.wg-img-20p { width: 20%; height: auto; }
.wg-img-25p { width: 25%; height: auto; }
.wg-img-30p { width: 30%; height: auto; }
.wg-img-35p { width: 35%; height: auto; }
.wg-img-40p { width: 40%; height: auto; }
.wg-img-50p { width: 50%; height: auto; }
.wg-img-60p { width: 60%; height: auto; }
.wg-img-70p { width: 70%; height: auto; }
.wg-img-80p { width: 80%; height: auto; }
.wg-img-90p { width: 90%; height: auto; }
.wg-img-95p { width: 95%; height: auto; }
.wg-img-100p { width: 100%; height: auto; }


/* CSS nº 72 - IMAGENS a propriedade height: 100% só funciona corretamente se o contêiner pai tiver uma altura definida (ex.: height: 500px ou height: 100vh). Caso contrário, a altura pode colapsar para zero. */

.wg-img-div-20p { width: 20%; height: 100%; }
.wg-img-div-25p { width: 25%; height: 100%; }
.wg-img-div-30p { width: 30%; height: 100%; }
.wg-img-div-35p { width: 35%; height: 100%; }
.wg-img-div-40p { width: 40%; height: 100%; }
.wg-img-div-50p { width: 50%; height: 100%; }
.wg-img-div-60p { width: 60%; height: 100%; }
.wg-img-div-70p { width: 70%; height: 100%; }
.wg-img-div-80p { width: 80%; height: 100%; }
.wg-img-div-90p { width: 90%; height: 100%; }
.wg-img-div-100p { width: 100%; height: 100%; }


/* Regra só para celular */
@media (max-width: 768px) {
  .wg-img-crop {
    width: 120%;
    overflow: hidden;
    position: relative;
  }

  .wg-img-crop img {
    width: 120%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Exemplo 1: cortar 10% da esquerda e 10% da direita */
  .wg-crop-10-10 img {
    object-position: center;
    clip-path: inset(0 10% 0 10%);
  }

  /* Exemplo 2: cortar 20% da esquerda e 20% da direita */
  .wg-crop-20-20 img {
    object-position: center;
    clip-path: inset(0 20% 0 20%);
  }

  /* Exemplo 3: cortar 30% da esquerda e 0% da direita */
  .wg-crop-30-0 img {
    object-position: center;
    clip-path: inset(0 0% 0 30%);
  }
}


/* CSS para garantir que as imagens não excedam as dimensões desejadas */
.wg-img-auto-size { max-width: 150px; max-height: 150px; width: auto; height: auto; }

.wg-div25 {
width: 30vw; /* Largura 25% da largura da janela de visualização */
height: 15vh; /* Altura 25% da altura da janela de visualização */
background-color: transparent; /* Cor de fundo transparente */
text-align: center;}

/* Estilo para telas menores (celulares) */
@media screen and (max-width: 767px) {  .oferta {    width: 100%;   }}

/* Adicione essa regra para definir a margem entre as ofertas */
.espaco-entre-ofertas {  margin-bottom: 30px;}

/* -------------------------- FINAL DIVs --------------------------------- */  




/* ----------------------------- INICIO BORDAS E SOMBRAS - CSS nº 74 ----------------------------- */

/* CSS nº 74_vr1 - Bordas sólidas pretas (espessuras variadas) */
.wg-div-borda-1 { border: 1px solid #000; }
.wg-div-borda-2 { border: 2px solid #000; }
.wg-div-borda-3 { border: 3px solid #000; }

/* CSS nº 74_vr2 - Bordas coloridas sólidas (2px) */
.wg-div-borda-azul    { border: 2px solid #0c3c60; }
.wg-div-borda-vermelha{ border: 2px solid #f23333; }
.wg-div-borda-verde   { border: 2px solid #54f233; }
.wg-div-borda-laranja { border: 2px solid #ffa542; }

/* CSS nº 74_vr3 - Bordas degradê laranja (linhas curtas fixas) */
.wg-div-borda-laranja-1 { width: 120px;  height: 2px; background: linear-gradient(90deg, transparent, #ff9800, transparent); margin: 10px auto 0; box-shadow: 0 0 15px rgba(255,152,0,0.8); }
.wg-div-borda-laranja-2 { width: 300px;  height: 2px; background: linear-gradient(90deg, transparent, #ff9800, transparent); margin: 10px auto 0; box-shadow: 0 0 15px rgba(255,152,0,0.8); }
.wg-div-borda-laranja-3 { width: 380px;  height: 2px; background: linear-gradient(90deg, transparent, #ff9800, transparent); margin: 10px auto 0; box-shadow: 0 0 15px rgba(255,152,0,0.8); }

/* CSS nº 74_vr4 - Bordas degradê laranja (full width) */
.wg-div-borda-laranja-full-1 { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, #ff9800, transparent); margin: 10px 0 0 0; box-shadow: 0 0 15px rgba(255,152,0,0.8); }
.wg-div-borda-laranja-full-2 { height: 2px; width: 100%; background: linear-gradient(90deg, transparent, #ff9800, transparent); margin: 10px 0 0 0; box-shadow: 0 0 15px rgba(255,152,0,0.8); }
.wg-div-borda-laranja-full-3 { height: 3px; width: 100%; background: linear-gradient(90deg, transparent, #ff9800, transparent); margin: 10px 0 0 0; box-shadow: 0 0 15px rgba(255,152,0,0.8); }
.wg-div-borda-laranja-full-4 { height: 4px; width: 100%; background: linear-gradient(90deg, transparent, #ff5722, #ff9800, #ff5722, transparent); margin: 15px 0 0 0; box-shadow: 0 0 20px rgba(255,87,34,0.9), 0 0 30px rgba(255,152,0,0.6); }

/* CSS nº 74_vr5 - Efeito de destaque pulsante laranja (sem borda sólida) */
.wg-efeito-destaque-laranja {
  position: relative; overflow: hidden; border-radius: 15px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.wg-efeito-destaque-laranja::after {
  content: ""; position: absolute; inset: -2px; border-radius: 17px;
  pointer-events: none; opacity: 0; z-index: 1;
  box-shadow: 0 0 0 rgba(255,140,0,0);
}
.wg-efeito-destaque-laranja:hover::after,
.wg-efeito-destaque-laranja.is-active::after { opacity: 1; }
.wg-efeito-destaque-laranja:hover::after { animation: pulse-orange 1.4s ease-in-out infinite; }
.wg-efeito-destaque-laranja.is-active::after { animation: pulse-orange 1s ease-in-out infinite; }
.wg-efeito-destaque-laranja:hover { transform: scale(1.05); box-shadow: 0 15px 40px rgba(0,0,0,0.5); }
@keyframes pulse-orange {
  0%   { box-shadow: 0 0 0 0 rgba(255,140,0,0.7); }
  50%  { box-shadow: 0 0 35px 15px rgba(255,140,0,0.9); }
  100% { box-shadow: 0 0 0 0 rgba(255,140,0,0); }
}

/* CSS nº 74_vr6 - Bordas degradê douradas (linhas curtas fixas) */
.wg-div-borda-dourada-1 { width: 120px; height: 3px; background: linear-gradient(90deg, transparent, #d4af37, transparent); margin: 10px auto 0; box-shadow: 0 0 15px rgba(212,175,55,0.8); }
.wg-div-borda-dourada-2 { width: 300px; height: 3px; background: linear-gradient(90deg, transparent, #d4af37, transparent); margin: 10px auto 0; box-shadow: 0 0 15px rgba(212,175,55,0.8); }
.wg-div-borda-dourada-3 { width: 380px; height: 3px; background: linear-gradient(90deg, transparent, #d4af37, transparent); margin: 10px auto 0; box-shadow: 0 0 15px rgba(212,175,55,0.8); }

/* CSS nº 74_vr7 - Bordas degradê douradas (full width) */
.wg-div-borda-dourada-full-1 { height: 3px; width: 100%; background: linear-gradient(90deg, transparent, #d4af37, transparent); margin: 10px 0 0 0; box-shadow: 0 0 15px rgba(212,175,55,0.8); }
.wg-div-borda-dourada-full-2 { height: 4px; width: 100%; background: linear-gradient(90deg, transparent, #b8860b, #d4af37, #ffd700, #d4af37, #b8860b, transparent); margin: 15px 0 0 0; box-shadow: 0 0 20px rgba(212,175,55,0.9), 0 0 30px rgba(255,215,0,0.6); }



/* CSS nº 74_vr8 - Sombras básicas neutras */
.wg-div-sombra-1 { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.wg-div-sombra-2 { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
.wg-div-sombra-3 { box-shadow: 0 6px 12px rgba(0,0,0,0.3); }
.wg-div-sombra-hover:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.4); }

/* CSS nº 74_vr9 - Sombras intensas neutras */
.wg-borda-sombra-suave    { box-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.wg-borda-sombra-elevada  { box-shadow: 0 8px 16px rgba(0,0,0,0.8); }
.wg-borda-sombra-interna  { box-shadow: inset 0 2px 4px rgba(0,0,0,0.8); }
.wg-borda-sombra-forte    { box-shadow: 0 12px 24px rgba(0,0,0,0.8); }
.wg-borda-sombra-desfocada{ box-shadow: 0 4px 8px 4px rgba(0,0,0,0.8); }

/* CSS nº 74_vr10 - Bordas com sombra + radius (efeito card/imagem) */
.wg-div-borda05 {
  position: relative; border: 1px solid #ccc; border-radius: 8px;
  overflow: hidden; background-position: center; box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
.wg-div-borda05 img { display: block; background-position: center; }

.wg-div-borda08 {
  position: relative; border: 1px solid #ccc; border-radius: 12px;
  overflow: hidden; background-position: center; box-shadow: 8px 8px 12px rgba(0,0,0,0.8);
}

.wg-div-borda10 { box-shadow: 0 4px 8px rgba(0,0,0,0.8), 0 6px 20px rgba(0,0,0,0.8); }

.wg-div-borda3 {
  position: relative; border: 1px solid #ccc; border-radius: 8px;
  overflow: hidden; background-position: center; box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
}
.wg-div-borda3 img { display: block; background-position: center; }

/* CSS nº 74_vr11 - Border-radius fixos (arredondamento puro) */
.wg-borda2   { border-radius: 2px !important; }
.wg-borda4   { border-radius: 4px !important; }
.wg-borda8   { border-radius: 8px !important; }
.wg-borda10  { border-radius: 10px !important; }
.wg-borda12  { border-radius: 12px !important; }
.wg-borda14  { border-radius: 14px !important; }
.wg-borda16  { border-radius: 16px !important; }
.wg-borda20  { border-radius: 20px !important; }
.wg-borda32  { border-radius: 32px !important; }
.wg-borda40  { border-radius: 40px !important; }
.wg-borda50  { border-radius: 50px !important; }
.wg-borda60  { border-radius: 60px !important; }
.wg-borda100 { border-radius: 50% !important; overflow: hidden; }

/* CSS nº 74_vr12 - Border-radius parcial (apenas bottom ou top) */
.wg-borda50b { border-bottom: 2px solid #000 !important; border-bottom-left-radius: 50px !important; border-bottom-right-radius: 50px !important; }
.wg-borda80b { border-bottom: 2px solid #000 !important; border-bottom-left-radius: 80px !important; border-bottom-right-radius: 80px !important; }
.wg-borda80t { border-top: 2px solid #000 !important; border-top-left-radius: 50px !important; border-top-right-radius: 50px !important; }

/* CSS nº 74_vr13 - Linhas inferiores / esquerda coloridas (2px) */
.border-bottom { border-bottom: 2px solid #f5a539; }
.border-left   { border-left: 2px solid #f5a539; }

.wg-border-linha-logo-azul1  { border-bottom: 2px solid #18ABE3; }
.wg-border-linha-logo-azul2  { border-bottom: 2px solid #0033cc; }
.wg-border-linha-logo-azul3  { border-bottom: 2px solid #3333ff; }
.wg-border-linha-logo-rosa1  { border-bottom: 2px solid #DC088B; }
.wg-border-linha-logo-rosa2  { border-bottom: 2px solid #f83aaf; }
.wg-border-linha-azul        { border-bottom: 2px solid #0c3c60; }
.wg-border-linha-vermelha    { border-bottom: 2px solid #FF0000; }
.wg-border-linha-amarela     { border-bottom: 2px solid #FFFF00; }
.wg-border-linha-verde       { border-bottom: 2px solid #00FF00; }
.wg-border-linha-verde-escuro{ border-bottom: 2px solid #006400; }
.wg-border-linha-branca      { border-bottom: 2px solid #FFFFFF; }
.wg-border-linha-preta       { border-bottom: 2px solid #000000; }
.wg-border-linha-roxa        { border-bottom: 2px solid #800080; }
.wg-border-linha-rosa        { border-bottom: 2px solid #FF69B4; }
.wg-border-linha-ciano       { border-bottom: 2px solid #00FFFF; }
.wg-border-linha-dourada     { border-bottom: 2px solid #FFD700; }
.wg-border-linha-cinza       { border-bottom: 2px solid #808080; }
.wg-border-linha-cinza2      { border-bottom: 2px solid #9e9e9e; }
	

/* CSS nº 74_vr14 - Linha degradê especial (azul → rosa) */
.wg-border-linha-logo-degrade {
  background-image: linear-gradient(to right, #18ABE3 0%, #18ABE3 50%, #DC088B 50%, #DC088B 100%);
  background-size: 100% 2px; background-repeat: no-repeat; background-position: bottom;
  border: none;
}

/* ----------------------------- FINAL BORDAS E SOMBRAS - CSS nº 74 ----------------------------- */

/* ----------------------------- FINAL BORDAS --------------------------------------- */  



/* CSS nº 75_FUNÇÕES PARA MOVIMENTOS TRANSIÇÕES DIVs;;;amostra div_transacoes.html*/
.wg-div-trans-grid,
.wg-button-trans-grid,
.wg-link-trans-grid{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center}
.wg-link-trans-grid a{margin:10px}

/* CSS nº 75_vr1 - Transição básica com escala */
.wg-div-trans-matriz{height:150px;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;font-weight:500;color:#000;cursor:pointer;box-sizing:border-box}
.wg-div-trans-matriz-trans{height:200px;background:#fff;position:relative;overflow:hidden;cursor:pointer;box-sizing:border-box}
.wg-div-transicao{transition:all .2s ease-in-out}
.wg-div-transicao:hover{transform:scale(1.05)}

/* CSS nº 75_vr2 - Transição responsiva para dispositivos móveis */
.wg-div-transicao-mobile{transition:transform .2s ease-in-out}
@media(max-width:767px){.wg-div-transicao-mobile:hover{transform:scale(1.03)}}
@media(min-width:768px){.wg-div-transicao-mobile:hover{transform:scale(1.08)}}

/* CSS nº 75_vr3 - Transição com elevação e sombra */
.wg-div-transicao-elevacao{transition:transform .3s ease,box-shadow .3s ease}
.wg-div-transicao-elevacao:hover{transform:translateY(-5px);box-shadow:0 6px 12px #0004}

/* CSS nº 75_vr4 - Transição com rotação e escala */
.wg-div-transicao-rotacao{transition:transform .3s ease-in-out}
.wg-div-transicao-rotacao:hover{transform:rotate(2deg) scale(1.04)}

/* CSS nº 75_vr5 - Transição com opacidade e fundo colorido */
.wg-div-transicao-opacidade{transition:opacity .3s ease;background:#fff}
.wg-div-transicao-opacidade:hover{opacity:.85}

/* CSS nº 75_vr6 - Transição com borda dinâmica */
.wg-div-transicao-borda{transition:border .3s ease,transform .3s ease;border:2px solid transparent}
.wg-div-transicao-borda:hover{border:2px solid #000;transform:scale(1.02)}

/* CSS nº 75_vr7 - Transição com efeito de brilho */
.wg-div-transicao-brilho{transition:box-shadow .3s ease,transform .3s ease}
.wg-div-transicao-brilho:hover{box-shadow:0 0 10px #0009;transform:scale(1.03)}

/* CSS nº 75_vr8 - Transição com rotação 3D */
.wg-div-transicao-3d{transition:transform .4s ease-in-out;transform-style:preserve-3d}
.wg-div-transicao-3d:hover{transform:rotateY(8deg) scale(1.05)}

/* CSS nº 75_vr9 - Transição com efeito de pulsação */
.wg-div-transicao-pulse{transition:transform .4s ease-in-out}
.wg-div-transicao-pulse:hover{animation:pulse .6s ease-in-out}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* CSS nº 75_vr10 - Transição com gradiente e opacidade */
.wg-div-transicao-gradiente{transition:background .3s ease,opacity .3s ease;background:linear-gradient(to right,#000,#000)}
.wg-div-transicao-gradiente:hover{background:linear-gradient(to right,#000,#000);opacity:.9}

/* CSS nº 75_vr11 - Transição com borda arredondada e cor */
.wg-div-transicao-arredondada{transition:border-radius .3s ease,background .3s ease;background:#fff}
.wg-div-transicao-arredondada:hover{border-radius:12px;background:#000;color:#fff}

/* CSS nº 75_vr12 - Transição responsiva com sombra e escala */
.wg-div-transicao-sombra-mobile{transition:transform .3s ease,box-shadow .3s ease}
@media(max-width:767px){.wg-div-transicao-sombra-mobile:hover{transform:scale(1.02);box-shadow:0 4px 8px #0003}}
@media(min-width:768px){.wg-div-transicao-sombra-mobile:hover{transform:scale(1.06);box-shadow:0 8px 16px #0004}}

/* CSS nº 75_vr13 - MOUSE CIRCULOS E TRIANGULOS TRANSICAO DIV */
.wg-div-trans-box{width:300px;height:300px;position:relative;overflow:hidden;cursor:pointer;border:1px solid #000}
.wg-div-fundo-trans-1,
.wg-div-fundo-trans-2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:500;transition:opacity .5s ease}
.wg-div-fundo-trans-1{background:#fff;color:#000;z-index:2}
.wg-div-fundo-trans-2{background:#000;color:#fff;opacity:0;z-index:1}

/* CSS nº 75_vr13 - Transição com círculo expansivo entrada esquerda */
.wg-div-transicao-circulo-esq::before{content:"";position:absolute;inset:0;background:#000;clip-path:circle(0% at 0% 0%);transition:clip-path .7s ease-in-out;z-index:3}
.wg-div-transicao-circulo-esq:hover::before{clip-path:circle(150% at 0% 0%)}
.wg-div-transicao-circulo-esq:hover .wg-div-fundo-trans-1{opacity:0}
.wg-div-transicao-circulo-esq:hover .wg-div-fundo-trans-2{opacity:1}

/* CSS nº 75_vr14 - Transição com círculo expansivo entrada direita-baixo */
.wg-div-transicao-circulo-dir::before{content:"";position:absolute;inset:0;background:#000;clip-path:circle(0% at 100% 100%);transition:clip-path .7s ease-in-out;z-index:3}
.wg-div-transicao-circulo-dir:hover::before{clip-path:circle(150% at 100% 100%)}
.wg-div-transicao-circulo-dir:hover .wg-div-fundo-trans-1{opacity:0}
.wg-div-transicao-circulo-dir:hover .wg-div-fundo-trans-2{opacity:1}

/* CSS nº 75_vr15 - Transição com triângulo expansivo entrada esquerda (PRETO E BRANCO EXTREMOS) */
.wg-div-transicao-triangulo-esq::before { content: ""; position: absolute; inset: 0; background: #000;           /* fundo preto sólido */ clip-path: polygon(0% 0%, 0% 0%, 0% 0%); transition: clip-path .7s ease-in-out; z-index: 3; }
.wg-div-transicao-triangulo-esq:hover::before { clip-path: polygon(0% 0%, 200% 0%, 0% 200%); }
/* Camadas de fundo (branco → preto na revelação) */ .wg-div-transicao-triangulo-esq:hover .wg-div-fundo-trans-1 { opacity: 0; /* some a camada branca inicial */ }
.wg-div-transicao-triangulo-esq:hover .wg-div-fundo-trans-2 { opacity: 1;                 /* revela a camada preta */ }

/* CSS nº 75_vr16 - Transição com triângulo expansivo entrada direita-baixo */
.wg-div-transicao-triangulo-dir::before{content:"";position:absolute;inset:0;background:#000;clip-path:polygon(100% 100%,100% 100%,100% 100%);transition:clip-path .7s ease-in-out;z-index:3}
.wg-div-transicao-triangulo-dir:hover::before{clip-path:polygon(100% 100%,-100% 100%,100% -100%)}
.wg-div-transicao-triangulo-dir:hover .wg-div-fundo-trans-1{opacity:0}
.wg-div-transicao-triangulo-dir:hover .wg-div-fundo-trans-2{opacity:1}

/* CSS nº 75_vr17 - Transição com triângulo e sombra responsiva */
.wg-div-transicao-triangulo-sombra{transition:box-shadow .5s ease}
.wg-div-transicao-triangulo-sombra::before{content:"";position:absolute;inset:0;background:#000;clip-path:polygon(0% 0%,0% 0%,0% 0%);transition:clip-path .7s ease-in-out;z-index:3}
.wg-div-transicao-triangulo-sombra:hover::before{clip-path:polygon(0% 0%,200% 0%,0% 200%)}
.wg-div-transicao-triangulo-sombra:hover .wg-div-fundo-trans-1{opacity:0}
.wg-div-transicao-triangulo-sombra:hover .wg-div-fundo-trans-2{opacity:1}
@media(max-width:767px){.wg-div-transicao-triangulo-sombra:hover{box-shadow:0 4px 8px #0003}}
@media(min-width:768px){.wg-div-transicao-triangulo-sombra:hover{box-shadow:0 8px 16px #0004}}

/* CSS nº 75_vr18 - Transição com círculo expansivo entrada direita */
.wg-div-transicao-circulo-dir-inv::before{content:"";position:absolute;inset:0;background:#000;clip-path:circle(0% at 100% 0%);transition:clip-path .7s ease-in-out;z-index:3}
.wg-div-transicao-circulo-dir-inv:hover::before{clip-path:circle(150% at 100% 0%)}
.wg-div-transicao-circulo-dir-inv:hover .wg-div-fundo-trans-1{opacity:0}
.wg-div-transicao-circulo-dir-inv:hover .wg-div-fundo-trans-2{opacity:1}

/* CSS nº 75_vr19 - Transição com círculo expansivo entrada esquerda-baixo */
.wg-div-transicao-circulo-esq-baixo::before{content:"";position:absolute;inset:0;background:#000;clip-path:circle(0% at 0% 100%);transition:clip-path .7s ease-in-out;z-index:3}
.wg-div-transicao-circulo-esq-baixo:hover::before{clip-path:circle(150% at 0% 100%)}
.wg-div-transicao-circulo-esq-baixo:hover .wg-div-fundo-trans-1{opacity:0}
.wg-div-transicao-circulo-esq-baixo:hover .wg-div-fundo-trans-2{opacity:1}

/* CSS nº 75_vr20 - Transição com triângulo expansivo entrada direita */
.wg-div-transicao-triangulo-dir-inv::before{content:"";position:absolute;inset:0;background:#000;clip-path:polygon(100% 0%,100% 0%,100% 0%);transition:clip-path .7s ease-in-out;z-index:3}
.wg-div-transicao-triangulo-dir-inv:hover::before{clip-path:polygon(100% 0%,-100% 0%,100% 200%)}
.wg-div-transicao-triangulo-dir-inv:hover .wg-div-fundo-trans-1{opacity:0}
.wg-div-transicao-triangulo-dir-inv:hover .wg-div-fundo-trans-2{opacity:1}

/* CSS nº 75_vr21 - Transição com triângulo expansivo entrada esquerda-baixo */
.wg-div-transicao-triangulo-esq-baixo::before{content:"";position:absolute;inset:0;background:#000;clip-path:polygon(0% 100%,0% 100%,0% 100%);transition:clip-path .7s ease-in-out;z-index:3}
.wg-div-transicao-triangulo-esq-baixo:hover::before{clip-path:polygon(0% 100%,200% 100%,0% -100%)}
.wg-div-transicao-triangulo-esq-baixo:hover .wg-div-fundo-trans-1{opacity:0}
.wg-div-transicao-triangulo-esq-baixo:hover .wg-div-fundo-trans-2{opacity:1}

/* CSS nº 75_vr22 - Transição com triângulo expansivo entrada direita com sombra responsiva */
.wg-div-transicao-triangulo-dir-sombra{transition:box-shadow .5s ease}
.wg-div-transicao-triangulo-dir-sombra::before{content:"";position:absolute;inset:0;background:#000;clip-path:polygon(100% 0%,100% 0%,100% 0%);transition:clip-path .7s ease-in-out;z-index:3}
.wg-div-transicao-triangulo-dir-sombra:hover::before{clip-path:polygon(100% 0%,-100% 0%,100% 200%)}
.wg-div-transicao-triangulo-dir-sombra:hover .wg-div-fundo-trans-1{opacity:0}
.wg-div-transicao-triangulo-dir-sombra:hover .wg-div-fundo-trans-2{opacity:1}
@media(max-width:767px){.wg-div-transicao-triangulo-dir-sombra:hover{box-shadow:0 4px 8px #0003}}
@media(min-width:768px){.wg-div-transicao-triangulo-dir-sombra:hover{box-shadow:0 8px 16px #0004}}

/* Hover comum para todos os clip-path */
[class*="circulo-"]:hover .wg-div-fundo-trans-1,
[class*="triangulo-"]:hover .wg-div-fundo-trans-1{opacity:0}
[class*="circulo-"]:hover .wg-div-fundo-trans-2,
[class*="triangulo-"]:hover .wg-div-fundo-trans-2{opacity:1}


/* CSS nº 75 - Estilos para botões */
.wg-botao { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-family: "Poppins", sans-serif; font-weight: 500; }
.wg-botao-azul { background-color: #0c3c60; color: #fff; }
.wg-botao-azul:hover { background-color: #091ac3; }
.wg-botao-vermelho { background-color: #f23333; color: #fff; }
.wg-botao-vermelho:hover { background-color: #d91a1a; }
.wg-botao-verde { background-color: #54f233; color: #000; }
.wg-botao-verde:hover { background-color: #3cd91a; }
.wg-botao-laranja { background-color: #ffa542; color: #000; }
.wg-botao-laranja:hover { background-color: #ff8c00; }

/* CSS nº 75 - Estilos para botões com gradientes */
.wg-botao-grad-laranja { background: linear-gradient(to right, #FF5400, #FFBB72); color: #fff; }
.wg-botao-grad-laranja:hover { background: linear-gradient(to right, #FFBB72, #FF5400); }
.wg-botao-grad-verde { background: linear-gradient(to right, #003300, #00ff00); color: #fff; }
.wg-botao-grad-verde:hover { background: linear-gradient(to right, #00ff00, #003300); }
.wg-botao-grad-azul { background: linear-gradient(to right, #0c3c60, #2b99eb); color: #fff; }
.wg-botao-grad-azul:hover { background: linear-gradient(to right, #2b99eb, #0c3c60); }


/* CSS nº 76 - Estilos para links */
.wg-link { color: #0c3c60; text-decoration: none; font-weight: 500; }
.wg-link:hover { color: #091ac3; text-decoration: underline; }
.wg-link-vermelho { color: #f23333; }
.wg-link-vermelho:hover { color: #d91a1a; }
.wg-link-verde { color: #54f233; }
.wg-link-verde:hover { color: #3cd91a; }


/* Css wg bordas sombras azul */
 .wg-borda-sombra-suave-azul { box-shadow: 0 2px 4px rgba(33, 150, 243, 0.7); } 
 .wg-borda-sombra-elevada-azul { box-shadow: 0 8px 16px rgba(33, 150, 243, 0.7); }  
 .wg-borda-sombra-interna-azul { box-shadow: inset 0 2px 4px rgba(33, 150, 243, 0.7); }
 .wg-borda-sombra-forte-azul { box-shadow: 0 12px 24px rgba(33, 150, 243, 0.7); }
 .wg-borda-sombra-desfocada-azul { box-shadow: 0 4px 8px 4px rgba(33, 150, 243, 0.7); } 
 
/* Sombra Suave - Rosa */.wg-borda-sombra-suave-rosa { box-shadow: 0 2px 4px rgba(220, 8, 139, 0.7); }
/* Sombra Elevada - Rosa */.wg-borda-sombra-elevada-rosa { box-shadow: 0 8px 16px rgba(220, 8, 139, 0.7); }
/* Sombra Interna - Rosa */.wg-borda-sombra-interna-rosa { box-shadow: inset 0 2px 4px rgba(220, 8, 139, 0.7); }
/* Sombra Forte - Rosa */.wg-borda-sombra-forte-rosa { box-shadow: 0 12px 24px rgba(220, 8, 139, 0.7); }
/* Sombra Desfocada - Rosa */.wg-borda-sombra-desfocada-rosa { box-shadow: 0 4px 8px 4px rgba(220, 8, 139, 0.7); }

  
/* Sombra Suave - Laranja */ .wg-borda-sombra-suave-laranja { box-shadow: 0 2px 4px rgba(255, 152, 0, 0.7); } 
/* Sombra Elevada - Laranja */ .wg-borda-sombra-elevada-laranja { box-shadow: 0 8px 16px rgba(255, 152, 0, 0.7); } 
/* Sombra Interna - Laranja */ .wg-borda-sombra-interna-laranja { box-shadow: inset 0 2px 4px rgba(255, 152, 0, 0.7); } 
/* Sombra Forte - Laranja */ .wg-borda-sombra-forte-laranja { box-shadow: 0 12px 24px rgba(255, 152, 0, 0.7); } 
/* Sombra Desfocada - Laranja */ .wg-borda-sombra-desfocada-laranja { box-shadow: 0 4px 8px 4px rgba(255, 152, 0, 0.7); } 

/* Sombra Suave - Verde */ .wg-borda-sombra-suave-verde { box-shadow: 0 2px 4px rgba(76, 175, 80, 0.7); } 
/* Sombra Elevada - Verde */ .wg-borda-sombra-elevada-verde { box-shadow: 0 8px 16px rgba(76, 175, 80, 0.7); } 
/* Sombra Interna - Verde */ .wg-borda-sombra-interna-verde { box-shadow: inset 0 2px 4px rgba(76, 175, 80, 0.7); } 
/* Sombra Forte - Verde */ .wg-borda-sombra-forte-verde { box-shadow: 0 12px 24px rgba(76, 175, 80, 0.7); } 
/* Sombra Desfocada - Verde */ .wg-borda-sombra-desfocada-verde { box-shadow: 0 4px 8px 4px rgba(76, 175, 80, 0.7); } 

/* Sombra Suave - Vermelho */ .wg-borda-sombra-suave-vermelho { box-shadow: 0 2px 4px rgba(244, 67, 54, 0.7); } 
/* Sombra Elevada - Vermelho */ .wg-borda-sombra-elevada-vermelho { box-shadow: 0 8px 16px rgba(244, 67, 54, 0.7); } 
/* Sombra Interna - Vermelho */ .wg-borda-sombra-interna-vermelho { box-shadow: inset 0 2px 4px rgba(244, 67, 54, 0.7); } 
/* Sombra Forte - Vermelho */ .wg-borda-sombra-forte-vermelho { box-shadow: 0 12px 24px rgba(244, 67, 54, 0.7); } 
/* Sombra Desfocada - Vermelho */ .wg-borda-sombra-desfocada-vermelho { box-shadow: 0 4px 8px 4px rgba(244, 67, 54, 0.7); } 

.wg-borda-sombra-colorida { box-shadow: 0 4px 8px rgba(63, 81, 181, 0.2); } 


/* BOTÃO EFEITO PULSAR */
  
/* Cores para o botão-efx */
.wg-botao-efx-pulsar-cor-azul-1 {   --wg-borda-cor: rgba(12, 60, 96, 1);    --wg-borda-cor0: rgba(12, 60, 96, 0);  }
.wg-botao-efx-pulsar-cor-azul-2 {   --wg-borda-cor: rgba(0, 51, 204, 1);    --wg-borda-cor0: rgba(0, 51, 204, 0);  }
.wg-botao-efx-pulsar-cor-azul-3 {   --wg-borda-cor: rgba(24, 171, 227, 1);    --wg-borda-cor0: rgba(24, 171, 227, 0);  }
.wg-botao-efx-pulsar-cor-azul-4 {   --wg-borda-cor: rgba(128, 93, 248, 1);    --wg-borda-cor0: rgba(128, 93, 248, 0);  }
.wg-botao-efx-pulsar-cor-azul-5 {   --wg-borda-cor: rgba(51, 51, 255, 1);    --wg-borda-cor0: rgba(51, 51, 255, 0);  }
.wg-botao-efx-pulsar-cor-azul-6 {   --wg-borda-cor: rgba(209, 224, 235, 1);    --wg-borda-cor0: rgba(209, 224, 235, 0);  }
.wg-botao-efx-pulsar-cor-rosa-1 {   --wg-borda-cor: rgba(220, 8, 139, 1);     --wg-borda-cor0: rgba(220, 8, 139, 0);   }
.wg-botao-efx-pulsar-cor-rosa-2 {   --wg-borda-cor: rgba(248, 58, 175, 1);     --wg-borda-cor0: rgba(248, 58, 175, 0);   }
.wg-botao-efx-pulsar-cor-vermelha {   --wg-borda-cor: rgba(255, 0, 0, 1);     --wg-borda-cor0: rgba(255, 0, 0, 0);   }
.wg-botao-efx-pulsar-cor-laranja-1 {   --wg-borda-cor: rgba(255, 165, 66, 1) !important;    --wg-borda-cor0: rgba(255, 165, 66, 0) !important;  }
.wg-botao-efx-pulsar-cor-laranja-2 {   --wg-borda-cor: rgba(255, 102, 0, 1) !important;   --wg-borda-cor0: rgba(255, 102, 0, 0) !important;  }
.wg-botao-efx-pulsar-cor-amarela {   --wg-borda-cor: rgba(255, 255, 0, 1);     --wg-borda-cor0: rgba(255, 255, 0, 0);   }
.wg-botao-efx-pulsar-cor-verde {   --wg-borda-cor: rgba(0, 255, 0, 1);     --wg-borda-cor0: rgba(0, 255, 0, 0);   }
.wg-botao-efx-pulsar-cor-verde-escuro {   --wg-borda-cor: rgba(0, 100, 0, 1); /* Cor Verde Escuro */   --wg-borda-cor0: rgba(0, 100, 0, 0);  }
.wg-botao-efx-pulsar-cor-branca {   --wg-borda-cor: rgba(255, 255, 255, 1);     --wg-borda-cor0: rgba(255, 255, 255, 0);   }
.wg-botao-efx-pulsar-cor-preta {   --wg-borda-cor: rgba(0, 0, 0, 1);     --wg-borda-cor0: rgba(0, 0, 0, 0);   }
.wg-botao-efx-pulsar-cor-roxa {   --wg-borda-cor: rgba(128, 0, 128, 1); /* Cor Roxa */   --wg-borda-cor0: rgba(128, 0, 128, 0); /* Cor Roxa 0 */ }
.wg-botao-efx-pulsar-cor-rosa {   --wg-borda-cor: rgba(255, 105, 180, 1); /* Cor Rosa */   --wg-borda-cor0: rgba(255, 105, 180, 0); /* Cor Rosa 0 */ }
.wg-botao-efx-pulsar-cor-ciano {   --wg-borda-cor: rgba(0, 255, 255, 1); /* Cor Ciano */   --wg-borda-cor0: rgba(0, 255, 255, 0); /* Cor Ciano 0 */ }
.wg-botao-efx-pulsar-cor-dourada {   --wg-borda-cor: rgba(255, 215, 0, 1); /* Cor Dourada */   --wg-borda-cor0: rgba(255, 215, 0, 0); /* Cor Dourada 0 */ }
.wg-botao-efx-pulsar-cor-cinza {   --wg-borda-cor: rgba(128, 128, 128, 1); /* Cor Cinza */   --wg-borda-cor0: rgba(128, 128, 128, 0); /* Cor Cinza 0 */ }


.wg-botao-efx-pulsar {
  animation: pulsar-border1 2.0s infinite, pulsar-border-sombra1 2s infinite;
  outline: 1px solid var(--wg-borda-cor);}
@keyframes pulsar-border1 {  0% {    outline-color: var(--wg-borda-cor);    outline-offset: 0;
  }  100% {    outline-color: var(--wg-borda-cor0);    outline-offset: 5px;  }}
@keyframes pulsar-border-sombra1 {  0% {    box-shadow: 0 0 5px var(--wg-borda-cor);  }
  50% {    box-shadow: 0 0 20px var(--wg-borda-cor);  }  100% {    box-shadow: 0 0 5px var(--wg-borda-cor);  }}

.wg-botao-efx-pulsar-full{  animation: pulsar 2s infinite;}
@keyframes pulsar {  0% {    transform: scale(1);  }  50% {    transform: scale(1.1);  }  100% {    transform: scale(1);  }}


       
 .wg-btn-efx-espelho_1 {
            background: linear-gradient(90deg, #f28c38, #e63946);
            color: #fff;
            padding: 18px 40px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            font-size: 18px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            display: inline-flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            animation: pulse-shadow 2s infinite;
        }
        @keyframes pulse-shadow {
            0% { box-shadow: 0 0 10px #f28c38; }
            50% { box-shadow: 0 0 20px #e63946; }
            100% { box-shadow: 0 0 10px #f28c38; }
        }
        .wg-btn-efx-espelho_1 i {
            font-size: 20px;
            animation: ring 1.5s infinite;
        }
        @keyframes ring {
            0% { transform: translateX(0); }
            50% { transform: translateX(5px); }
            100% { transform: translateX(0); }
        }
        .wg-btn-efx-espelho_1::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }
        .wg-btn-efx-espelho_1:hover::before {
            left: 100%;
        }
        .wg-btn-efx-espelho_1:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
            background: linear-gradient(90deg, #e63946, #f28c38);
        }
        .wg-btn-efx-espelho_1:active {
            transform: translateY(0);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
		
 
  
 
    /* Button Style: .wg-botoes-efx LARANJA */
    .wg-botoes-efx {
        position: relative;
        background: linear-gradient(to bottom, #FF6200, #FFC107);
        color: #fff;
        border: none;
        width: 100%;
        max-width: 380px;
        padding: 15px 20px;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        margin: 0 auto;
    }

    .wg-botoes-efx i {
        margin-right: 10px;
        color: #fff;
        font-size: 24px;
        transition: transform 0.3s ease;
    }

    .wg-botoes-efx:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }

    .wg-botoes-efx:hover i {
        transform: scale(1.2);
    }

    .wg-botoes-efx::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        transition: left 0.5s ease;
    }

    .wg-botoes-efx:hover::before {
        left: 100%;
    }

    .wg-botoes-efx:active {
        transform: scale(0.98);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .wg-botoes-efx.disabled {
        background: linear-gradient(to bottom, #ccc, #eee);
        color: #999;
        cursor: not-allowed;
        opacity: 0.7;
    }


/* ================================
   Button Style: .wg-botao-efx-azu-lar
   Azul padrão → Laranja no hover
=================================== */
/* Azul padrão → Laranja no hover (sem erros de sintaxe) */
button.wg-botao-efx-azu-lar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  padding: 12px 20px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(to bottom, #0c3c60 0%, #1a5276 100%); /* AZUL */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.20);
  transition: transform .18s ease, box-shadow .18s ease, background .28s ease;
  margin: 0 auto;
  z-index: 1000;
}

button.wg-botao-efx-azu-lar i {
  margin-right: 10px;
  font-size: 20px;
  transition: transform .18s ease;
}

/* HOVER: muda para laranja */
button.wg-botao-efx-azu-lar:hover {
  background: linear-gradient(to bottom, #FF6200 0%, #FFC107 100%); /* LARANJA */
  transform: scale(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

button.wg-botao-efx-azu-lar:hover i {
  transform: scale(1.15);
}

/* brilho que atravessa o botão */
button.wg-botao-efx-azu-lar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
button.wg-botao-efx-azu-lar:hover::before { left: 120%; }

/* active / clique */
button.wg-botao-efx-azu-lar:active {
  transform: scale(0.98);
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
}

/* estado disabled */
button.wg-botao-efx-azu-lar[disabled],
button.wg-botao-efx-azu-lar.disabled {
  background: linear-gradient(to bottom, #ccc, #eee);
  color: #999;
  cursor: not-allowed;
  opacity: .9;
  box-shadow: none;
}

  
.transparent-button {
    background-color: transparent;
    border: none;
    color: #000;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;}

/* Estilo do botão ao passar o mouse sobre ele */
.transparent-button:hover {
    color: #fff; /* Cor do wg-texto ao passar o mouse */
    background-color: #ccc; /* Cor de fundo ao passar o mouse */}
  



/* CSS nº 76_EFEITOS ESPELHADOS */
/* Vidro com desfoque médio-forte (~30% visual) */
.wg-div-vidro-desfoque1 {
  background: rgba(0, 0, 0, 0.35);          /* overlay escuro para destacar o blur */
  backdrop-filter: blur(18px);              /* desfoque principal – ajuste para 10px a 16px */
  -webkit-backdrop-filter: blur(18px);      /* suporte Safari/iOS */
  border: 1px solid rgba(255, 255, 255, 0.10); /* borda sutil de vidro */
  border-radius: inherit;                   /* herda o border-radius do pai, se quiser */
}

/* Variação mais forte, se precisar (ex: wg-div-vidro-desfoque2) */
.wg-div-vidro-desfoque2 {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Base para o efeito de vidro + shine sweep */
.wg-div-vidro-shine { position: relative;               /* Necessário para posicionar o ::after */ overflow: hidden;                 /* Esconde o brilho que sai da div */ background: rgba(255, 255, 255, 0.15);  /* Vidro semi-transparente (ajuste opacidade) */ backdrop-filter: blur(8px);       /* Efeito fosco de vidro real – o mais importante! */ -webkit-backdrop-filter: blur(8px); /* Suporte Safari/iOS */ border: 1px solid rgba(255, 255, 255, 0.25); /* Borda sutil de vidro */ border-radius: 12px;              /* Arredondado para parecer vidro */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* Sombra suave para profundidade */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Suaviza outros efeitos */ } /* Opcional: leve elevação no hover (como suas outras transições) */ .wg-div-vidro-shine:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } /* O reflexo / brilho que passa da esquerda pra direita */ .wg-div-vidro-shine::after { content: ''; position: absolute; top: -50%; left: -100%;                      /* Começa fora à esquerda */ width: 50%;                       /* Largura do brilho – ajuste para mais fino ou grosso */ height: 200%;                     /* Altura maior para cobrir toda a div */ background: linear-gradient( 120deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%,   /* Ponto mais forte do brilho */ rgba(255, 255, 255, 0.4) 70%, transparent 90% ); /* Gradiente que simula luz refletida */ transform: skewX(-25deg);         /* Inclina para parecer reflexão natural (45° ou -25° são comuns) */ transition: left 0.8s ease;       /* Tempo do sweep – ajuste para mais rápido/lento */ pointer-events: none;             /* Não interfere no clique */ z-index: 1;                       /* Acima do conteúdo, mas abaixo de texto se precisar */ } /* Movimento no hover */ .wg-div-vidro-shine:hover::after { left: 120%;                       /* Vai até sair pela direita */ } 

/* Efeito de vidro escuro + shine sweep (fundo preto 80%) */
.wg-div-vidro-shine-escuro { position: relative; overflow: hidden; /* Fundo preto com 80% de opacidade */ background: rgba(0, 0, 0, 0.80); /* Efeito de vidro fosco – essencial */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Borda clara sutil para destacar o vidro escuro */ border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; /* Sombra mais suave em fundo escuro */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Hover com leve elevação (opcional, mas fica bonito) */ .wg-div-vidro-shine-escuro:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); } /* Brilho sweep – agora com tom mais claro/neutro para contrastar bem no preto */ .wg-div-vidro-shine-escuro::after { content: ''; position: absolute; top: -50%; left: -100%; width: 50%; height: 200%; background: linear-gradient( 120deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%,   /* brilho principal mais forte */ rgba(255, 255, 255, 0.25) 70%, transparent 95% ); transform: skewX(-20deg); transition: left 0.9s ease; pointer-events: none; z-index: 1; } /* Movimento do brilho ao passar o mouse */ .wg-div-vidro-shine-escuro:hover::after { left: 120%; }

.wg-div-efx-vidro-espelho-preto { position: relative;           /* importante */ overflow: hidden;             /* esconde partes do gradiente que saem */ padding: 30px 0 43px 0; background: #1d1d1d;          /* fallback */ background: rgba(0, 0, 0, 0.7); color: #fff; /* Vidro fosco – mantenha se estiver funcionando no seu navegador */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.10);  /* borda bem sutil */ border-radius: 12px;          /* ajuste conforme seu design */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); } /* Pseudo-elemento para o reflexo diagonal em movimento */ .wg-div-efx-vidro-espelho-preto::before { content: ""; position: absolute; inset: 0;                     /* cobre toda a área */ pointer-events: none; z-index: 0;                   /* fica atrás do conteúdo (texto fica em cima) */ background: linear-gradient( 135deg,                   /* diagonal ↗ (de baixo-esquerda para cima-direita) */ transparent 0%, transparent 40%, rgba(255, 255, 255, 0.30) 50%,   /* pico do brilho */ rgba(255, 255, 255, 0.12) 60%, transparent 70%, transparent 100% ); /* Faz o gradiente ser maior para permitir movimento sem repetir */ background-size: 300% 300%; /* Animação: move o background em diagonal */ animation: diagonalShine 5s ease-in-out infinite; } /* Movimento diagonal do reflexo */ @keyframes diagonalShine { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%;   /* move diagonalmente para o canto oposto */ } 100% { background-position: 0% 0%;       /* volta suavemente ao início */ } } 

/* Vidro escuro + brilho sweep automático a cada 5s */
.wg-div-vidro-shine-auto { position: relative; overflow: hidden; background: rgba(0, 0, 0, 0.80); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } /* Camada do brilho que se move sozinho */ .wg-div-vidro-shine-auto::after { content: ''; position: absolute; inset: 0;               /* ocupa toda a área da div */ pointer-events: none; z-index: 1; /* Começa fora da tela à esquerda */ transform: translateX(-150%) skewX(-20deg); width: 60%; height: 120%; top: -50%; background: linear-gradient( 120deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.25) 70%, transparent 95% ); /* Animação infinita - passa a cada 5 segundos */ animation: sweepBrilho 12s linear infinite; } /* A animação propriamente dita */ @keyframes sweepBrilho { 0% { transform: translateX(-150%) skewX(-20deg); } 30% { transform: translateX(-30%) skewX(-20deg);   /* aparece e começa a cruzar */ } 70% { transform: translateX(130%) skewX(-20deg);   /* cruza toda a div */ } 100% { transform: translateX(180%) skewX(-20deg);   /* sai completamente */ } }

/* Vidro escuro premium + brilho sweep suave e elegante */
.wg-div-vidro-shine-premium { position: relative; overflow: hidden; /* Fundo de vidro mais sofisticado */ background: rgba(20, 20, 30, 0.75);          /* tom mais escuro e azulado */ backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); /* Borda sutil com glow interno */ border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; /* Sombras mais profundas e elegantes */ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.06);  /* glow interno sutil */ transition: all 0.4s ease; } /* Camada de brilho sweep refinada */ .wg-div-vidro-shine-premium::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; /* Brilho mais largo e suave */ width: 80%; height: 180%; top: -40%; /* Degradê muito mais elegante e difuso */ background: linear-gradient( 135deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.18) 45%, rgba(255, 255, 255, 0.30) 55%, rgba(255, 255, 255, 0.12) 70%, transparent 90% ); /* Movimento mais lento e fluido */ animation: sweepBrilhoPremium 18s cubic-bezier(0.4, 0, 0.2, 1) infinite; /* Leve rotação para dar mais sofisticação */ transform: translateX(-180%) rotate(8deg); } /* Animação suave e premium */ @keyframes sweepBrilhoPremium { 0% { transform: translateX(-180%) rotate(8deg); opacity: 0; } 20% { transform: translateX(-60%) rotate(8deg); opacity: 1; } 50% { transform: translateX(80%) rotate(8deg); opacity: 0.7; } 80% { transform: translateX(180%) rotate(8deg); opacity: 0; } 100% { transform: translateX(280%) rotate(8deg); opacity: 0; } } /* Hover opcional: aumenta um pouco o brilho e suaviza */ .wg-div-vidro-shine-premium:hover { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.10); } .wg-div-vidro-shine-premium:hover::after { animation-duration: 14s; /* acelera levemente no hover */ } 



/* Vidro espelhado premium + flash randômico PRECISA DO JAVA*/
.wg-div-vidro-espelhado-random { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(25, 25, 35, 0.88), rgba(10, 10, 20, 0.92)); backdrop-filter: blur(14px) saturate(190%); -webkit-backdrop-filter: blur(14px) saturate(190%); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), inset 0 0 25px rgba(255, 255, 255, 0.07); } /* Camada do flash */ .wg-div-vidro-espelhado-random::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; width: 45%; height: 300%; top: -100%; background: linear-gradient( 90deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.65) 48%, rgba(255, 255, 255, 0.30) 58%, transparent 75% ); opacity: 0; transform: translateX(-180%) skewX(-30deg); /* estado inicial */ transition: opacity 0.4s ease, transform 2s ease; } 




    
#total {
	position: fixed;
	bottom: 10px;
	right: 10px;
	background-color: red;
	padding: 10px;
	font-family: "Aoboshi One", serif;
	font-size: 16px;
	font-weight: bold;
	color: white;
	width: 100%;
	height: 0px;
	display: flex;
	justify-content: right;
	align-items: center ;    }

    #total-flutuante {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: transparent;
      padding: 10px;
      border-radius: 8px!important;
	  font-family: "Aoboshi One", serif;
      font-size: 16px;
      font-weight: bold;
	  color: red;    }
   
	



/* ----------------------------- INICIO ANIME ----------------------------------


.wg-anime-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}

.wg-anime-zoom-in{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-500px;opacity:0} to{top:0;opacity:1}}

@media screen and (width: 50%) {
.wg-anime-pular, .wg-anime-piscar, .wg-anime-pulsar2, .wg-anime-pulsar, .wg-anime-esticar, .wg-anime-balancar, .wg-anime-swing,
.wg-anime-esq, .wg-anime-dir, .wg-anime-cim, .wg-anime-bai {
    animation-play-state: paused;
}

@media screen and (min-width: 50%) {
    .wg-anime-pular, .wg-anime-piscar, .wg-anime-pulsar2, .wg-anime-pulsar, .wg-anime-esticar, .wg-anime-balancar, .wg-anime-swing,
    .wg-anime-esq, .wg-anime-dir, .wg-anime-cim, .wg-anime-bai {
        animation-play-state: running;
    }
} ----- */ 

/* CSS nº 84 - Animações gerais */
/* CSS para animações que inicialmente são pausadas */
.wg-animated-div {    animation-play-state: paused;}
.wg-animated {    animation-play-state: running;}
 
/* Estilos anime divs css wolf.b2b@gmail.com */

.wg-anime-pular { animation: bounce 2s 2; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } }

.wg-anime-piscar { animation: flash 2s 2; } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } }

.wg-anime-pulsar2 { animation: pulse 2s 2; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

.wg-anime-pulsar { animation: pulse 2s infinite; /* Alterado para loop infinito */ transform-origin: center bottom; /* Define o ponto de origem da transformação */ } @keyframes pulse { 0%, 100% { transform: scale(1) translateY(0); /* Escala normal e nenhum deslocamento vertical */ } 50% { transform: scale(1.1) translateY(-10%); /* Escala aumentada e deslocamento vertical para cima */ } } 

.wg-anime-esticar { animation: rubberBand 2s 2; } @keyframes rubberBand { 0% { transform: scale(1); } 30% { transform: scaleX(1.25) scaleY(0.75); } 40% { transform: scaleX(0.75) scaleY(1.25); } 60% { transform: scaleX(1.15) scaleY(0.85); } 100% { transform: scale(1); } }

.wg-anime-balancar { animation: shake 2s 2; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } }

.wg-anime-swing { animation: swing 2s 2; } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }

.wg-anime-esq { animation-name: slideInFromLeft; animation-duration: 1.5s; animation-fill-mode: both; opacity: 0; }
@keyframes slideInFromLeft { 0% { transform: translateX(-500%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } 

.wg-anime-dir { animation-name: slideInFromRight; animation-duration: 1.5s; animation-fill-mode: both; opacity: 0; } 
@keyframes slideInFromRight { 0% { transform: translateX(500%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

.wg-anime-cim { animation-name: slideInFromTop; animation-duration: 1.5s; animation-fill-mode: both; opacity: 0; }
@keyframes slideInFromTop { 0% { transform: translateY(-100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } 

.wg-anime-bai { animation-name: slideInFromBottom; animation-duration: 1.5s; animation-fill-mode: both; opacity: 0; }
@keyframes slideInFromBottom { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }



/* nº 86 - Estilo maquina escrever */
#wg-cursor-mqe { width: 10px; height: 2px; background-color: orange; display: inline-block; margin-right: 5px; animation: blinkCursor 0.8s infinite; }
@keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } 
.frase-container { display: none ; font-size: 42px; line-height: 58px; font-family: "Encode Sans", sans-serif; font-weight: 700; 
color: #ff9900 ; vertical-align: top } 
 @media screen and (max-width: 992px) { #frase-container { font-size: 42px; line-height: 42px } } 
 @media screen and (max-width: 534px) { #frase-container { font-size: 20px; line-height: 20px } } 
.hidden { visibility: hidden; }

.frase-container2 { display: none ; font-size: 52px; line-height: 58px; font-family: "Encode Sans", sans-serif; font-weight: 900; 
color: #ff9900 ;  vertical-align: top } 
 @media screen and (max-width: 992px) { #frase-container { font-size: 42px; line-height: 42px } } 
 @media screen and (max-width: 534px) { #frase-container { font-size: 24px; line-height: 24px } } 
 
 
/* ----------------- CAIXAS PLANOS -------------*/  
 .planos-preco {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        .planos {
            border: 1px solid #ccc;
            padding: 20px;
            margin: 10px;
            width: 300px;
        }
        .planos-botao-contratar {
            text-decoration: none;
            background-color: #FF0000;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            margin-top: 20px;
            display: inline-block;
        }
 
/* ------------copyright 2023 by Carls D´ -------------*/ 
  .copyright-notice {
            position: fixed;
            top: 40%;
            left: 0;
            width: 100%;
            background-color: #000000;
            color: #ffffff!important;
            text-align: center;
            padding: 10px;
            display: none;
        }
 
     #copyright-cronometro {
            font-size: 18px;
            margin-top: 10px;
        }
 
 

/* nº 87 -- CARROSSEL INFINITO DE CLIENTES -- */
.wg-carousel-clientes {
    padding: 60px 0;
    text-align: center;
    overflow: hidden;
}

.wg-carousel-clientes h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #fff; /* ou sua cor principal */
}

.wg-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}


.wg-carousel-track {
    display: flex;
    animation: scroll-bounce 120s linear infinite alternate;
   /* will-change: transform;*/
}


.wg-car-cliente {
    flex: 0 0 auto;
    margin: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 300px;
}

.wg-car-cliente img {
    max-width: 200px;
    height: auto;
    transition: transform .1s ease;
}

.wg-car-cliente img:hover {
    transform: scale(1.3);
}


/* esquerda → pausa → direita → pausa */
@keyframes wg-scroll-loop{

    /* início */
    0%{
        transform:translateX(0);
    }

    /* vai totalmente para esquerda */
    45%{
        transform:translateX(calc(-50%));
    }

    /* segura um instante */
    50%{
        transform:translateX(calc(-50%));
    }

    /* retorna */
    95%{
        transform:translateX(0);
    }

    /* segura início */
    100%{
        transform:translateX(0);
    }
}

/* ================= DESTAQUE LOGO HOVER Vr1.00 ================= */

/* mantém o overflow visível para o zoom não cortar */
.wg-carousel-wrapper{
    overflow:visible;
}

.wg-carousel-track{
    overflow:visible;
}

/* transição suave em todos */
.wg-car-cliente{
    position:relative;
    transition:.5s ease;
}

.wg-car-cliente img{
    transition:
        transform .55s ease,
        filter .55s ease,
        box-shadow .55s ease;
}

/* reduz destaque dos demais logos */
.wg-carousel-track:hover .wg-car-cliente{
    opacity:.35;
}

/* logo ativo */
.wg-car-cliente:hover{
    opacity:1 !important;
    z-index:999;
}

/* zoom forte */
.wg-car-cliente:hover img{

    transform:
        scale(2.1)
        translateY(-10px);

    filter:
        drop-shadow(0 0 20px rgba(255,255,255,.5))
        drop-shadow(0 0 35px rgba(0,255,100,.6));

}

/* pausa animação do carrossel */
.wg-carousel-wrapper:hover .wg-carousel-track{
    animation-play-state:paused;
}

/* Responsividade básica */
@media (max-width: 768px) {
    .wg-car-cliente {
        margin: 0 15px;
        min-width: 170px;
    }
    .wg-car-cliente img {
        max-width: 150px;
    }
    .wg-carousel-track {
        animation-duration: 10s; /* mais lento no mobile */
    }
}


/* wg-carousel-1-portfolio - CARROSSEL PADRONIZADO SEM CONFLITOS */
.wg-carousel-1-portfolio {
    padding: 40px 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: transparent;
    text-align: center;
}

.wg-carousel-1-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.wg-carousel-1-item {
    flex: 0 0 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    background: transparent;
}

/* Container imagem + texto overlay */
.wg-carousel-1-img-container {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 60%;
    width: 100%;
}




.wg-carousel-1-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Texto sobreposto - superior esquerdo, branco, desfoque */
.wg-carousel-1-text-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 8px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    max-width: 50%;
    line-height: 1.2;
    z-index: 10;
}

/* Indicadores padronizados */
.wg-carousel-1-indicators {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
    padding: 20px 0;
    gap: 12px;
}

.wg-carousel-1-indicator {
    width: 16px;
    height: 16px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #ddd;
}

.wg-carousel-1-indicator:hover,
.wg-carousel-1-indicator.active {
    background: #f28c38;
    border-color: #f28c38;
    transform: scale(1.3);
}

/* Responsivo */
@media (max-width: 768px) {
    .wg-carousel-1-img-container { max-width: 90%; }
    .wg-carousel-1-text-overlay {
        font-size: 1.6rem;
        top: 15px;
        left: 15px;
        padding: 10px 18px;
        max-width: 70%;
    }
    .wg-carousel-1-indicators { gap: 10px; }
    .wg-carousel-1-indicator { width: 14px; height: 14px; }
}



/* TEXTO PORTFOLIO ABAIXO DA IMAGEM */
.wg-carousel-port-1-img-text-overlay{
    display:block;
    margin-top:12px;
    font-size:2rem;
    font-weight:900;
    color:#ffffff;
    background:rgba(0,0,0,0.45);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:10px 20px;
    border-radius:8px;
    text-align:left;
    width:fit-content;
    text-shadow:1px 1px 4px rgba(0,0,0,0.7);
}






/* ----------------- PLAYER SOUND RECORDS 2026 by Carls D´ -------------*/ 

   .wg-audio-container {
      margin: 0 auto 10px auto;
      background-color: rgba(0, 0, 0, 0.1); 
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }

    audio {
      width: 100% !important;
      display: block;
      background-color: #ffffff !important;
    }

    audio::-webkit-media-controls-panel {
      background-color: #f2f2f3 !important;
    }
    audio::-webkit-media-controls-current-time-display,
    audio::-webkit-media-controls-time-remaining-display {
      color: #000000 !important;
    }

    /* Família 1 – Fundo colorido interno */
    .wg-audio-player1-azul audio { background-color: #0c3c60 !important; border-radius: 20px; }
    .wg-audio-player1-laranja audio { background-color: #ff6b00 !important; border-radius: 20px; }

    /* Família 2 – Bordas finas no audio */
    .wg-audio-player2-azul-rosa audio {
      border-radius: 18px;
      border-left: 5px solid #18ABE3;
      border-right: 5px solid #DC088B;
    }

    /* Player 3 original – fundo azul escuro + radius 0 */
    .wg-audio-player3-original audio {
      background-color: #0c3c60 !important;
      border-radius: 0 !important;
    }
	
	
	/* Estilos específicos do navegador para o player de áudio ORIGINAL */
.audio-player3 {width: 320px;}
.audio-player3 audio::-webkit-media-controls-panel { background-color: #f2f2f3; /* COR DENTRO FUNDO */ }
.audio-player3 audio::-webkit-media-controls-current-time-display,
.audio-player3 audio::-webkit-media-controls-time-remaining-display { color: #000000 !important; /* COR TEXTO */}
.audio-player3 audio { width: 100%; background-color: #0c3c60 !important; /* COR BORDA */ border-radius: 0px;}

/* Estilos específicos do navegador para o player 5 (bordas verde dos dois lados) */
.audio-player5 {width: 320px;}
.audio-player5 audio { width: 320px !important; 
background-color: #ffffff !important; 
border-radius: 50px !important; 
border-left: 15px solid #00ff00 !important; 
border-right: 15px solid #00ff00 !important;}

/* Estilos específicos do navegador para o player 6 (bordas azul escuro dos dois lados) */
.audio-player6 {width: 320px;}
.audio-player6 audio { width: 320px !important; background-color: #ffffff !important; border-radius: 50px !important; border-left: 15px solid #0c3c60 !important; border-right: 15px solid #0c3c60 !important;}
	

    /* Bordas grossas simétricas no container (estilo base do player 6) */
    .wg-border-player {
      overflow: hidden;
      border-radius: 50px;
    }

    .wg-border-azul-escuro  { border-left: 15px solid #0c3c60; border-right: 15px solid #0c3c60; }
    .wg-border-azul-vivo    { border-left: 15px solid #18ABE3; border-right: 15px solid #18ABE3; }
    .wg-border-laranja      { border-left: 15px solid #ff6b00; border-right: 15px solid #ff6b00; }
    .wg-border-laranja-forte{ border-left: 15px solid #ff4500; border-right: 15px solid #ff4500; }
    .wg-border-vermelho     { border-left: 15px solid #dc143c; border-right: 15px solid #dc143c; }
    .wg-border-dourado      { border-left: 15px solid #d4af37; border-right: 15px solid #d4af37; }
    .wg-border-laranja-dourado { border-left: 15px solid #ff8c00; border-right: 15px solid #daa520; }	

 /* cores = azul suave logo #18ABE3  | rosa 1 #DC088B | rosa 2 #f6099b  | cinza fundo #f2f2f3  | azul escuro fonte #0c3c60 */