/*
======================================================================
BraGoTech3Framework 1.0
STYLE.CSS

Framework Premium para Websites Profissionais
Powered by BookFlip Engine

Autor: BraGoTech3
======================================================================
*/



/*======================================================================
01 • RESET
======================================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}

body{

    /* min-height:100vh; */
    min-height:100%;

    overflow-x:hidden;

    overflow-y:hidden;

    font-family:var(--bgt3-font-primary);

    background:var(--bgt3-background);

    color:var(--bgt3-text);

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

picture{

    display:block;

}

video{

    display:block;

    width:100%;

    height:auto;

}

svg{

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    font:inherit;

    border:none;

    background:none;

    cursor:pointer;

}

input,
textarea,
select{

    font:inherit;

    outline:none;

}

ul,
ol{

    list-style:none;

}



/*======================================================================
02 • DESIGN TOKENS
======================================================================*/

:root{


    /*--------------------------------------------------
    CORES
    --------------------------------------------------*/

    --bgt3-primary:#2563eb;

    --bgt3-primary-light:#4f8cff;

    --bgt3-primary-dark:#163fa6;

    --bgt3-secondary:#06b6d4;

    --bgt3-accent:#38bdf8;

    --bgt3-success:#22c55e;

    --bgt3-warning:#f59e0b;

    --bgt3-danger:#ef4444;

    /*--------------------------------------------------
    Z-INDEX
    --------------------------------------------------*/

    --bgt3-z-background:-10;

    --bgt3-z-overlay:-5;

    --bgt3-z-content:10;

    --bgt3-z-header:5000;

    --bgt3-z-modal:10000;


    /*--------------------------------------------------
    BACKGROUND
    --------------------------------------------------*/

    --bgt3-background:#071018;

    --bgt3-surface:#101b28;

    --bgt3-surface-2:#172534;

    --bgt3-card:#1b2a3b;



    /*--------------------------------------------------
    TEXTO
    --------------------------------------------------*/

    --bgt3-text:#ffffff;

    --bgt3-text-light:#d6e2ee;

    --bgt3-text-muted:#9fb3c8;



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

    --bgt3-border:

        rgba(255,255,255,.08);



    /*--------------------------------------------------
    SOMBRAS
    --------------------------------------------------*/

    --bgt3-shadow-sm:

        0 6px 18px rgba(0,0,0,.10);

    --bgt3-shadow-md:

        0 15px 40px rgba(0,0,0,.18);

    --bgt3-shadow-lg:

        0 35px 80px rgba(0,0,0,.28);



    /*--------------------------------------------------
    RAIOS
    --------------------------------------------------*/

    --bgt3-radius-xs:8px;

    --bgt3-radius-sm:14px;

    --bgt3-radius-md:22px;

    --bgt3-radius-lg:34px;

    --bgt3-radius-xl:50px;



    /*--------------------------------------------------
    FONTES
    --------------------------------------------------*/

    --bgt3-font-primary:

        "Inter",
        "Segoe UI",
        sans-serif;

    --bgt3-font-heading:

        "Poppins",
        sans-serif;



    /*--------------------------------------------------
    TAMANHOS
    --------------------------------------------------*/

    --bgt3-container-width:1280px;

    --bgt3-section-spacing:

        clamp(80px,10vw,160px);



    /*--------------------------------------------------
    TRANSIÇÕES
    --------------------------------------------------*/

    --bgt3-transition-fast:.25s;

    --bgt3-transition:.40s;

    --bgt3-transition-slow:.75s;



    /*--------------------------------------------------
    GLASS
    --------------------------------------------------*/

    --bgt3-glass:

        rgba(255,255,255,.08);

    --bgt3-glass-border:

        rgba(255,255,255,.12);

    --bgt3-blur:18px;

        /*--------------------------------------------------
    SPACE BETWEEN ELEMENTS
    --------------------------------------------------*/
    --bgt3-spacing-sm: 10px;
    --bgt3-spacing-md: 20px;
    --bgt3-spacing-lg: 30px;
    --bgt3-spacing-xl: 50px;
}



/*======================================================================
03 • BASE
======================================================================*/

section{

    position:relative;

}

main{

    position:relative;

}

.bgt3-container{

    width:min(92%, var(--bgt3-container-width));

    margin-inline:auto;

}

.bgt3-section{

    padding-block:

        var(--bgt3-section-spacing);

}

.bgt3-content{

    position:relative;

    z-index:5;

}


/*======================================================================
04 • SELEÇÃO
======================================================================*/

::selection{

    background:

        var(--bgt3-primary);

    color:white;

}

::-moz-selection{

    background:

        var(--bgt3-primary);

    color:white;

}



/*======================================================================
05 • SCROLLBAR
======================================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#09131d;

}

::-webkit-scrollbar-thumb{

    background:

        linear-gradient(

            var(--bgt3-primary),

            var(--bgt3-secondary)

        );

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:

        linear-gradient(

            var(--bgt3-secondary),

            var(--bgt3-accent)

        );

}

/*======================================================================
06 • TYPOGRAPHY
======================================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--bgt3-font-heading);

    color:var(--bgt3-text);

    line-height:1.15;

    font-weight:700;

}

h1{

    font-size:clamp(3rem,6vw,5.8rem);

}

h2{

    font-size:clamp(2.2rem,4vw,3.8rem);

}

h3{

    font-size:clamp(1.6rem,3vw,2.4rem);

}

h4{

    font-size:1.5rem;

}

p{

    color:var(--bgt3-text-light);

    font-size:1.05rem;

    line-height:1.8;

}

small{

    color:var(--bgt3-text-muted);

}

/*======================================================================
07 • GRID SYSTEM
======================================================================*/

.bgt3-grid{

    display:grid;

    gap:40px;

}

.bgt3-grid-2{

    grid-template-columns:

        repeat(2,minmax(0,1fr));

}

.bgt3-grid-3{

    grid-template-columns:

        repeat(3,minmax(0,1fr));

}

.bgt3-grid-4{

    grid-template-columns:

        repeat(4,minmax(0,1fr));

}

/*======================================================================
08 • FLEX UTILITIES
======================================================================*/

.bgt3-flex{

    display:flex;

}

.bgt3-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.bgt3-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.bgt3-flex-column{

    display:flex;

    flex-direction:column;

}

/*======================================================================
09 • SPACING UTILITIES
======================================================================*/

.bgt3-mt-1{margin-top:10px;}
.bgt3-mt-2{margin-top:20px;}
.bgt3-mt-3{margin-top:30px;}
.bgt3-mt-4{margin-top:40px;}
.bgt3-mt-5{margin-top:60px;}

.bgt3-mb-1{margin-bottom:10px;}
.bgt3-mb-2{margin-bottom:20px;}
.bgt3-mb-3{margin-bottom:30px;}
.bgt3-mb-4{margin-bottom:40px;}
.bgt3-mb-5{margin-bottom:60px;}

.bgt3-pt-1{padding-top:10px;}
.bgt3-pt-2{padding-top:20px;}
.bgt3-pt-3{padding-top:30px;}
.bgt3-pt-4{padding-top:40px;}
.bgt3-pt-5{padding-top:60px;}

.bgt3-pb-1{padding-bottom:10px;}
.bgt3-pb-2{padding-bottom:20px;}
.bgt3-pb-3{padding-bottom:30px;}
.bgt3-pb-4{padding-bottom:40px;}
.bgt3-pb-5{padding-bottom:60px;}

/*======================================================================
10 • ALIGNMENT
======================================================================*/

.bgt3-text-center{

    text-align:center;

}

.bgt3-text-left{

    text-align:left;

}

.bgt3-text-right{

    text-align:right;

}

/*======================================================================
11 • WIDTH UTILITIES
======================================================================*/

.bgt3-w-100{

    width:100%;

}

.bgt3-max-600{

    max-width:600px;

}

.bgt3-max-800{

    max-width:800px;

}

.bgt3-max-1000{

    max-width:1000px;

}

.bgt3-max-1200{

    max-width:1200px;

}

/*======================================================================
12 • GLASS EFFECT
======================================================================*/

.bgt3-glass{

    background:var(--bgt3-glass);

    backdrop-filter:blur(var(--bgt3-blur));

    -webkit-backdrop-filter:blur(var(--bgt3-blur));

    border:1px solid var(--bgt3-glass-border);

    border-radius:var(--bgt3-radius-md);

    box-shadow:var(--bgt3-shadow-md);

}

/*======================================================================
13 • CARDS

See Down
======================================================================*/




/*======================================================================
14 • SECTION TITLES
======================================================================*/

.bgt3-section-title{

    margin-bottom:20px;

}

.bgt3-section-subtitle{

    max-width:760px;

    margin-inline:auto;

    color:var(--bgt3-text-muted);

    line-height:1.8;

}

/*======================================================================
15 • DIVIDERS
======================================================================*/

.bgt3-divider{

    width:120px;

    height:4px;

    margin:25px auto;

    border-radius:999px;

    background:

        linear-gradient(

            90deg,

            var(--bgt3-primary),

            var(--bgt3-accent)

        );

}

/*======================================================================
16 • HEADER
======================================================================*/

#bgt3-header{

    position:fixed;

    top:0;

    left:0;

    right:0;

    width:100%;

    height:85px;

    display:flex;

    align-items:center;

    z-index:5000;

    transition:
        background var(--bgt3-transition),
        backdrop-filter var(--bgt3-transition),
        height var(--bgt3-transition),
        box-shadow var(--bgt3-transition);
    background:rgba(232, 225, 175, 0.08 );


}

#bgt3-header.scrolled{

    height:72px;

    background:rgba(134, 199, 255, 0.78);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:0 10px 35px rgba(248, 3, 3, 0.28);

}

/*======================================================================
17 • HEADER CONTAINER
======================================================================*/

.bgt3-header-container{

    width:min(92%,1280px);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;


}

/*======================================================================
18 • LOGO
======================================================================*/

.bgt3-logo{

    display:flex;

    align-items:center;

    gap:14px;

    user-select:none;
    border-radius: 20px;
}

.bgt3-logo img{

    width:250px;

    height:85px;

    border-radius: 25%;

    object-fit:contain;


}

.bgt3-logo h1{

    font-size:1.45rem;

    font-weight:700;

    letter-spacing:.04em;

    color:white;

}

.bgt3-logo span{

    display:block;

    font-size:.72rem;

    color:var(--bgt3-text-muted);

    letter-spacing:.18em;

    text-transform:uppercase;

}

/*======================================================================
19 • NAVIGATION
======================================================================*/

#bgt3-navbar{

    display:flex;

    align-items:center;

    gap:40px;

}

#bgt3-navbar a{

    position:relative;

    color:white;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.04em;

    transition:color var(--bgt3-transition);

}

#bgt3-navbar a:hover{

    color:var(--bgt3-accent);

}

/*==================================================
UNDERLINE ANIMATION
==================================================*/

#bgt3-navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        var(--bgt3-primary),

        var(--bgt3-accent)

    );

    transition:width .35s ease;

}

#bgt3-navbar a:hover::after{

    width:100%;

}

/*======================================================================
20 • HEADER BUTTON
======================================================================*/

.bgt3-header-button{

    margin-left:30px;

}

/* --- BOTÃO DO WHATSAPP NO MENU --- */
.menu-whatsapp-btn {
    color: #25D366 !important;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espaço entre o ícone e o texto */
    text-decoration: none;
    transition: 0.3s;
}

.menu-whatsapp-btn:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.6));
}

/* Opcional: Esconde o texto em computadores e deixa só o ícone se o menu for apertado */
@media (min-width: 769px) {
    .whatsapp-text-mobile {
        display: none; /* Em telas grandes, fica apenas o símbolo verde */
    }
}




/*======================================================================
21 • MENU ICON
======================================================================*/

.bgt3-menu-button{

    display:none;

    width:48px;

    height:48px;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:white;

    cursor:pointer;

    transition:all .35s;

}

.bgt3-menu-button:hover{

    background:var(--bgt3-primary);

}

/*======================================================================
22 • ACTIVE LINK
======================================================================*/

#bgt3-navbar a.active{

    color:var(--bgt3-accent);

}

#bgt3-navbar a.active::after{

    width:100%;

}

/*======================================================================
23 • HEADER FADE
======================================================================*/

#bgt3-header{

    animation:bgt3HeaderFade 1.2s ease;

}

@keyframes bgt3HeaderFade{

    from{

        opacity:0;

        transform:translateY(-25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*
======================================================================
24 • HERO CINEMATOGRÁFICO
======================================================================*/

#bgt3-home{

    position:relative;

    width:100%;

    min-height:100%;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    isolation:isolate;

}

/*======================================================================
25 • CAMADAS DO HERO
======================================================================*/

.bookflip-page-background{

    position:absolute;

    inset:0;

    z-index:-10;

    overflow:hidden;

}

.bookflip-page-overlay{

    position:absolute;

    inset:0;

    background:rgba(4,10,20,.55);

    z-index:-8;

}


/*======================================================================
26 • HERO & INTRO DE ELITE (2026)
======================================================================*/













.bgt3-hero {
    position: relative;
    width: 100%;
/*     height: 100vh; */
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
/*     overflow: hidden; */
    overflow: hidden !important;
    perspective: 1000px;
    max-height: calc(100vh - 100px) !important;

    box-sizing: border-box;
}

/* Container que centraliza o logotipo no meio da tela */
.bgt3-logo-intro-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transform-style: preserve-3d;
}

/* A Mágica do Surgimento e Desaparecimento do Logotipo */
/*======================================================================
26 • INTRO DE ELITE (VERSÃO ULTRA CONFORTÁVEL)
======================================================================*/
.bgt3-hero-logo-animate {
    max-width: 450px;
    height: auto;
    display: block;
    transform-style: preserve-3d;

    /* Mantém a entrada de 0.6s e aplica a nova saída suave de 0.7s após 1s */
    animation:
        logoElegantIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards,
        logoDataDissolve 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1s forwards;
}

/* 1. ENTRADA ÓPTICA: O logo surge do fundo de forma plana e limpa, sem flashes */
@keyframes logoElegantIn {
    0% {
        filter: blur(15px);
        opacity: 0;
        transform: scale(0.98);
    }
    100% {
        filter: blur(0px);
        opacity: 1;
        transform: scale(1);
    }
}

/* 2. SAÍDA DATA DISSOLVE: O logo desmaterializa-se sem agredir a visão */
@keyframes logoQuantumOut/* logoDataDissolve */ {
    0% {
        filter: blur(0px) brightness(1);
        transform: scale(1) scaleX(1);
        opacity: 1;
    }
    30% {
        /* Inicia uma sutil distorção horizontal tecnológica (estilo fibra óptica) */
        filter: blur(1px) brightness(1.05);
        transform: scale(1.01) scaleX(1.05);
        opacity: 0.8;
    }
    100% {
        /* O logo estica horizontalmente e achata verticalmente enquanto desaparece no ar */
        filter: blur(12px);
        transform: scaleY(0.8) scaleX(1.2);
        opacity: 0;
    }
}

/*======================================================================
27 • VÍDEO
======================================================================*/
.bgt3-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.95;
}


/*======================================================================
27 • VÍDEO
======================================================================*/

.bgt3-hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-10;

    opacity:.95;

}

/*======================================================================
28 • IMAGEM
======================================================================*/

.bgt3-hero-image{

    position:absolute;

    inset:0;

    background-image:url("../assets/images/logo-superdotado.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    z-index:-11;
    border-radius: 30% !important;

}

/*======================================================================
29 • GRADIENTE
======================================================================*/

.bgt3-hero-gradient{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(2,8,20,.92),
        rgba(6,25,45,.72),
        rgba(0,90,170,.28)
    );

    z-index:-7;

}

/*======================================================================
30 • LUZ VOLUMÉTRICA
======================================================================*/

.bgt3-hero-light{

    position:absolute;

    width:900px;

    height:900px;

    right:-180px;

    top:-220px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(60,170,255,.35),

        transparent 70%

    );

    filter:blur(90px);

    animation:bgt3HeroLight 12s ease-in-out infinite alternate;

    z-index:-6;

}

/*======================================================================
31 • PARTÍCULAS
======================================================================*/

.bgt3-particles{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(

        rgba(255,255,255,.30) 1px,

        transparent 1px

    );

    background-size:65px 65px;

    opacity:.30;

    animation:bgt3Particles 40s linear infinite;

    z-index:-5;

}

/*======================================================================
32 • CONTAINER
======================================================================*/

.bgt3-parallax-container{

    position:relative;

    perspective:1800px;

    transform-style:preserve-3d;

    z-index:5;

}

/*======================================================================
33 • HERO CONTENT
======================================================================*/

.bgt3-hero-content{

    max-width:760px;

    display:flex;

    flex-direction:column;

    gap:30px;

}

/*======================================================================
34 • BADGE
======================================================================*/

.bgt3-hero-badge{

    width:max-content;

    padding:10px 24px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    color:white;

    font-size:.9rem;

    letter-spacing:.08em;

    font-weight:600;

}

/*======================================================================
35 • TITLE
======================================================================*/

.bgt3-hero-title{

    font-size:clamp(3.5rem,7vw,6.5rem);

    font-weight:800;

    line-height:1.05;

    color:white;

    text-shadow:

        0 12px 35px rgba(0,0,0,.45);

}

/*======================================================================
36 • SUBTITLE
======================================================================*/

.bgt3-hero-subtitle{

    font-size:clamp(1.4rem,2.5vw,2rem);

    color:#dcecff;

    font-weight:500;

    line-height:1.6;

}

/*======================================================================
37 • DESCRIPTION
======================================================================*/

.bgt3-hero-description{

    max-width:700px;

    color:rgba(255,255,255,.86);

    line-height:1.9;

    font-size:1.08rem;

}

/*======================================================================
38 • BOTÕES
======================================================================*/

.bgt3-hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:10px;

}

.bgt3-button{

    min-width:220px;

    padding:18px 36px;

    border-radius:60px;

}

.bgt3-button-primary{

    color:white;

    background:

    linear-gradient(

        135deg,

        var(--bgt3-primary),

        var(--bgt3-accent)

    );

    box-shadow:

        0 20px 40px rgba(37,99,235,.35);

}

.bgt3-button-primary:hover{

    transform:translateY(-6px);

}

.bgt3-button-outline{

    border:2px solid rgba(255,255,255,.25);

    color:white;

    backdrop-filter:blur(12px);

}

.bgt3-button-outline:hover{

    background:white;

    color:#111;

}

/*======================================================================
39 • SCROLL INDICATOR
======================================================================*/

.bgt3-scroll-indicator{

    position:absolute;

    left:90%;

    bottom:35px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:white;

    opacity:.85;

    animation:bgt3ScrollIndicator 2.2s infinite;

    z-index:20;

}

.bgt3-scroll-indicator span{

    font-size:.85rem;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.bgt3-scroll-indicator i{

    font-size:1.4rem;

}

/*======================================================================
40 • HERO ANIMATIONS
======================================================================*/

@keyframes bgt3HeroLight{

    from{

        transform:
            translate(0,0)
            scale(1);

    }

    to{

        transform:
            translate(-90px,50px)
            scale(1.25);

    }

}

@keyframes bgt3Particles{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120px);

    }

}

@keyframes bgt3ScrollIndicator{

    0%{

        transform:
            translate(-50%,0);

    }

    50%{

        transform:
            translate(-50%,12px);

    }

    100%{

        transform:
            translate(-50%,0);

    }

}

/*======================================================================
42 • CARDS
======================================================================*/

.bgt3-card{

    position:relative;

    overflow:hidden;

    background:var(--bgt3-card);

    border:1px solid var(--bgt3-border);

    border-radius:var(--bgt3-radius-md);

    transition:

        transform .4s,

        box-shadow .4s,

        border-color .4s;

}

#bgt3-home-intro-card{
    margin-top: -250px !important;
}


.bgt3-card:hover{

    transform:translateY(-10px);

    border-color:

        rgba(56,189,248,.40);

    box-shadow:

        0 25px 60px rgba(0,0,0,.35);

}

.bgt3-card-body{

    padding:36px;

}

/*======================================================================
43 • CARD ICON
======================================================================*/

.bgt3-card-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    margin-bottom:24px;

    background:

        linear-gradient(

            135deg,

            var(--bgt3-primary),

            var(--bgt3-accent)

        );

    color:white;

    font-size:1.8rem;

}

/*======================================================================
44 • IMAGENS
======================================================================*/

.bgt3-image{

    position:relative;

    overflow:hidden;

    border-radius:var(--bgt3-radius-md);

}

.bgt3-image img{

    width:100%;

    transition:transform .8s;

}

.bgt3-image:hover img{

    transform:scale(1.08);

}

/*======================================================================
45 • GALERIA
======================================================================*/

.bgt3-gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;
}

.bgt3-gallery-grid img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:16px;
}

/*======================================================================
46 • BADGES
======================================================================*/

.bgt3-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:999px;

    background:

        rgba(56,189,248,.15);

    color:

        var(--bgt3-accent);

    font-size:.85rem;

    font-weight:600;

}

/*======================================================================
47 • HOVER GLOW
======================================================================*/

.bgt3-glow{

    position:relative;

}

.bgt3-glow::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

        linear-gradient(

            135deg,

            transparent,

            rgba(56,189,248,.4),

            transparent

        );

    opacity:0;

    transition:opacity .4s;

    pointer-events:none;

}

.bgt3-glow:hover::after{

    opacity:1;

}

/*======================================================================
48 • FADE ANIMATIONS
======================================================================*/

.bgt3-fade-up{

    animation:bgt3FadeUp .9s ease both;

}

.bgt3-fade-left{

    animation:bgt3FadeLeft .9s ease both;

}

.bgt3-fade-right{

    animation:bgt3FadeRight .9s ease both;

}

/*======================================================================
49 • KEYFRAMES
======================================================================*/

@keyframes bgt3FadeUp{

    from{

        opacity:0;

        transform:

            translateY(40px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

@keyframes bgt3FadeLeft{

    from{

        opacity:0;

        transform:

            translateX(-50px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

@keyframes bgt3FadeRight{

    from{

        opacity:0;

        transform:

            translateX(50px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}

/*======================================================================
50 • UTILITÁRIOS
======================================================================*/

.bgt3-shadow{

    box-shadow:var(--bgt3-shadow-lg);

}

.bgt3-rounded{

    border-radius:var(--bgt3-radius-lg);

}

.bgt3-hidden{

    display:none !important;

}

.bgt3-visible{

    display:block !important;

}

.bgt3-relative{

    position:relative;

}

.bgt3-absolute{

    position:absolute;

}

.bgt3-overflow-hidden{

    overflow:hidden;

}

/*======================================================================
51 • FORMS
======================================================================*/

.bgt3-form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.bgt3-input,
.bgt3-textarea,
.bgt3-select{

    width:100%;

    padding:18px 22px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    border-radius:var(--bgt3-radius-sm);

    color:var(--bgt3-text);

    transition:all var(--bgt3-transition);

}

.bgt3-input::placeholder,
.bgt3-textarea::placeholder{

    color:var(--bgt3-text-muted);

}

.bgt3-input:focus,
.bgt3-textarea:focus,
.bgt3-select:focus{

    border-color:var(--bgt3-primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.bgt3-textarea{

    resize:vertical;

    min-height:180px;

}

/*======================================================================
52 • FOOTER
======================================================================*/

footer{

    position:relative;

    padding:80px 0 40px;

    background:#050b12;

}

.bgt3-footer{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

}

.bgt3-footer h3{

    margin-bottom:20px;

}

.bgt3-footer ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.bgt3-footer a{

    transition:color .3s;

}

.bgt3-footer a:hover{

    color:var(--bgt3-accent);

}

.bgt3-copyright{

    margin-top:60px;

    text-align:center;

    color:var(--bgt3-text-muted);

    font-size:.9rem;

}

/*======================================================================
53 • SOCIAL ICONS
======================================================================*/

.bgt3-social{

    display:flex;

    gap:16px;

}

.bgt3-social a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    transition:all .35s;

}

.bgt3-social a:hover{

    transform:translateY(-6px);

    background:var(--bgt3-primary);

}

/*======================================================================
54 • BACK TO TOP
======================================================================*/

#bgt3-back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--bgt3-primary),
        var(--bgt3-accent)
    );

    color:white;

    cursor:pointer;

    box-shadow:var(--bgt3-shadow-lg);

    opacity:0;

    visibility:hidden;

    transition:all .4s;

    z-index:9999;

}

#bgt3-back-to-top.show{

    opacity:1;

    visibility:visible;

}

#bgt3-back-to-top:hover{

    transform:translateY(-6px);

}

/*======================================================================
55 • LOADER
======================================================================*/

#bookflip-loader{

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:var(--bgt3-background);

    z-index:99999;

    transition:opacity .8s;

}

.bgt3-loader-logo{

    font-size:2rem;

    font-weight:700;

    margin-bottom:30px;

    color:white;

}

.bookflip-loader-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    border:5px solid rgba(255,255,255,.12);

    border-top-color:var(--bgt3-primary);

    animation:bgt3LoaderSpin 1s linear infinite;

}

#bookflip-loader.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/*======================================================================
56 • HELPERS
======================================================================*/

.bgt3-hidden{

    display:none !important;

}

.bgt3-invisible{

    visibility:hidden;

}

.bgt3-visible{

    visibility:visible;

}

.bgt3-text-gradient{

    background:linear-gradient(
        135deg,
        var(--bgt3-primary),
        var(--bgt3-accent)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.bgt3-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*======================================================================
57 • KEYFRAMES
======================================================================*/

@keyframes bgt3LoaderSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* Container do jogo com efeito de vidro jateado e sombra premium */
.bgt3-scratch-container {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 540px; /* Largura ideal para o player do Scratch */
    margin: 30px auto;
    padding: 25px;

    /* Padrão de Vidro do Framework */
    background: rgba(10, 15, 30, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border-radius: 28px !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);

    /* Efeito de inclinação suave se quiser usar o script do rato */
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

/* Força o player do Scratch a respeitar as bordas arredondadas modernas */
.bgt3-scratch-container iframe {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}