/*==================================================
  PEDRO SCÄRÅBÉLO
  LANDING PAGE PREMIUM
  O DESPERTAR DO SABER OCULTO
===================================================*/

/*==================================================
RESET PROFISSIONAL
===================================================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    text-rendering:optimizeLegibility;

}

body{

    overflow-x:hidden;
    background:#050505;
    color:#f5f5f5;
    font-family:'Poppins',sans-serif;
    line-height:1.7;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}

img{

    max-width:100%;
    display:block;

}

picture{

    display:block;

}

svg{

    display:block;

}

a{

    color:inherit;
    text-decoration:none;

}

button{

    border:none;
    background:none;
    cursor:pointer;
    font-family:inherit;

}

input,
textarea,
select{

    font:inherit;
    outline:none;

}

ul{

    list-style:none;

}

section{

    position:relative;
    width:100%;
    overflow:hidden;

}

::selection{

    background:#c8a44d;
    color:#000;

}


/*==================================================
VARIÁVEIS GLOBAIS
===================================================*/

:root{

/*========== CORES ==========*/

--black:#050505;
--black-soft:#0b0b0b;
--black-card:#111111;

--white:#ffffff;
--text:#efefef;
--text-soft:#b8b8b8;

--gold:#D4AF37;
--gold-light:#F4D77C;
--gold-dark:#8F6A16;

--wine:#541a23;
--wine-dark:#25080d;

--bronze:#8b6a3d;

--shadow:

0 20px 50px rgba(0,0,0,.45);

--shadow-gold:

0 0 40px rgba(212,175,55,.22);

--glass:

rgba(255,255,255,.05);

--glass-border:

rgba(255,255,255,.10);

--gradient-gold:

linear-gradient(
135deg,
#7d5b18,
#D4AF37,
#F6DF8E,
#D4AF37,
#7d5b18
);

--gradient-dark:

linear-gradient(
180deg,
#050505,
#090909,
#050505
);

--gradient-hero:

linear-gradient(
to bottom,
rgba(0,0,0,.20),
rgba(0,0,0,.75),
#050505
);

/*========== TIPOGRAFIA ==========*/

--font-title:'Cinzel',serif;

--font-body:'Poppins',sans-serif;

--fs-xs:.80rem;
--fs-sm:.92rem;
--fs-base:1rem;
--fs-md:1.15rem;
--fs-lg:1.40rem;
--fs-xl:2.4rem;
--fs-xxl:4rem;
--fs-display:5.6rem;

--fw-light:300;
--fw-normal:400;
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--fw-black:900;

/*========== ESPAÇAMENTOS ==========*/

--space-1:.5rem;
--space-2:1rem;
--space-3:1.5rem;
--space-4:2rem;
--space-5:3rem;
--space-6:4rem;
--space-7:6rem;
--space-8:8rem;

/*========== BORDAS ==========*/

--radius-sm:8px;
--radius:16px;
--radius-lg:30px;
--radius-full:999px;

/*========== TRANSIÇÕES ==========*/

--transition:

all .35s ease;

--transition-slow:

all .7s ease;

}

/*==================================================
TIPOGRAFIA
===================================================*/

body{

    font-family:var(--font-body);

}

h1,
h2,
h3,
h4,
h5{

    font-family:var(--font-title);
    font-weight:700;
    line-height:1.2;
    letter-spacing:.8px;

}

h1{

    font-size:clamp(3rem,7vw,var(--fs-display));

}

h2{

    font-size:clamp(2rem,5vw,var(--fs-xxl));

}

h3{

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

}

h4{

    font-size:1.25rem;

}

p{

    font-size:1.05rem;
    color:var(--text-soft);
    margin-top:1rem;

}

strong{

    color:var(--gold);

}

blockquote{

    font-family:var(--font-title);
    font-style:italic;
    font-size:1.4rem;
    color:var(--gold-light);

    border-left:4px solid var(--gold);

    padding-left:25px;

    margin:40px 0;

    opacity:.95;

}

.gold{

    color:var(--gold);

}

.highlight-text{

    color:#ffffff;

    font-size:1.2rem;

    font-weight:600;

}

/*==================================================
CONFIGURAÇÕES BASE
===================================================*/

body{

    background:

    radial-gradient(circle at top,

    rgba(212,175,55,.06),

    transparent 40%),

    var(--gradient-dark);

}

main{

    position:relative;
    z-index:2;

}

.container{

    width:min(1280px,92%);
    margin:auto;

}

section{

    padding:

    var(--space-8)

    0;

}

.section-title{

    text-align:center;
    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:5px;

    font-weight:600;

    margin-bottom:15px;

}

.section-title h2{

    max-width:900px;

    margin:auto;

}

.section-title p{

    max-width:780px;

    margin:

    25px auto 0;

}

/*==================================================
ELEMENTOS DECORATIVOS GLOBAIS
===================================================*/

.blur-gold{

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

    rgba(212,175,55,.10);

    filter:blur(140px);

    pointer-events:none;

    z-index:-1;

}

.divider{

    width:160px;

    height:2px;

    margin:40px auto;

    background:

    var(--gradient-gold);

}

.glass{

    background:

    var(--glass);

    backdrop-filter:blur(18px);

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

    border:

    1px solid

    var(--glass-border);

    border-radius:

    var(--radius);

    box-shadow:

    var(--shadow);

}

/*==================================================
ANIMAÇÃO SUAVE PADRÃO
===================================================*/

.fade-up{

    opacity:0;

    transform:

    translateY(60px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:

    translateY(0);

}
/*==================================================
CONTAINERS AVANÇADOS
==================================================*/

.container{

    width:min(1320px,92%);
    margin-inline:auto;
    padding-inline:20px;
    position:relative;
    z-index:2;

}

.container-sm{

    width:min(980px,92%);
    margin-inline:auto;

}

.container-lg{

    width:min(1500px,95%);
    margin-inline:auto;

}

.full-width{

    width:100%;

}

.center{

    text-align:center;

}


/*==================================================
HEADER PREMIUM
==================================================*/

#header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:99999;

    transition:all .45s ease;

    padding:22px 0;

    background:transparent;

}

#header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/*==================================================
HEADER STICKY
Adicionado via JavaScript:
header.classList.add("sticky");
==================================================*/

#header.sticky{

    background:

    rgba(5,5,5,.82);

    backdrop-filter:blur(18px);

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

    box-shadow:

    0 15px 45px rgba(0,0,0,.45);

    border-bottom:

    1px solid rgba(212,175,55,.15);

    padding:14px 0;

}


/*==================================================
LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    user-select:none;

    transition:.4s;

}

.logo:hover{

    transform:translateY(-2px);

}

.logo span{

    font-family:var(--font-title);

    font-size:2rem;

    font-weight:900;

    letter-spacing:2px;

    color:#fff;

}

.logo .gold{

    color:var(--gold);

}

.logo small{

    display:block;

    margin-top:2px;

    color:#b7b7b7;

    font-size:.70rem;

    letter-spacing:3px;

    text-transform:uppercase;

}


/* brilho dourado */

.logo{

    position:relative;

}

.logo::after{

    content:"";

    position:absolute;

    bottom:-10px;
    left:0;

    width:0;

    height:2px;

    background:

    var(--gradient-gold);

    transition:.45s;

}

.logo:hover::after{

    width:100%;

}


/*==================================================
MENU DESKTOP
==================================================*/

nav{

    display:flex;

    align-items:center;

}

nav ul{

    display:flex;

    align-items:center;

    gap:38px;

}

nav ul li{

    position:relative;

}

nav ul li a{

    position:relative;

    display:inline-block;

    color:#ffffff;

    font-weight:500;

    font-size:.95rem;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:.35s;

}


/*==================================================
HOVER DOURADO
==================================================*/

nav ul li a::before{

    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    transform:translateX(-50%);

    width:0;

    height:2px;

    border-radius:50px;

    background:

    var(--gradient-gold);

    transition:.35s;

}

nav ul li a:hover{

    color:var(--gold-light);

}

nav ul li a:hover::before{

    width:100%;

}


/*==================================================
EFEITO BRILHO
==================================================*/

nav ul li{

    overflow:hidden;

}

nav ul li::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:50%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.18),

    transparent

    );

    transform:skewX(-25deg);

    transition:.7s;

}

nav ul li:hover::after{

    left:180%;

}


/*==================================================
CTA DO MENU
==================================================*/

.menu-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    background:

    var(--gradient-gold);

    color:#111;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    box-shadow:

    0 10px 30px rgba(212,175,55,.28);

    transition:.35s;

    position:relative;

    overflow:hidden;

}


/* brilho */

.menu-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.65),

    transparent

    );

    transform:skewX(-28deg);

}

.menu-btn:hover::before{

    animation:

    shimmerMenu 1.2s linear;

}

.menu-btn:hover{

    transform:

    translateY(-4px);

    box-shadow:

    0 18px 45px rgba(212,175,55,.45);

}


/*==================================================
MENU CTA STICKY
==================================================*/

#header.sticky .menu-btn{

    padding:14px 28px;

}


/*==================================================
MENU LINK ATIVO
==================================================*/

nav ul li a.active{

    color:var(--gold);

}

nav ul li a.active::before{

    width:100%;

}


/*==================================================
ANIMAÇÃO
==================================================*/

@keyframes shimmerMenu{

0%{

left:-120%;

}

100%{

left:220%;

}

}
/*==================================================
MENU MOBILE
==================================================*/

.menu-mobile{

    width:54px;
    height:54px;

    display:none;

    justify-content:center;
    align-items:center;

    flex-direction:column;

    gap:7px;

    border-radius:50%;

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

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

    backdrop-filter:blur(15px);

    transition:.35s;

    cursor:pointer;

    z-index:999999;

}

.menu-mobile:hover{

    background:rgba(212,175,55,.10);

    border-color:rgba(212,175,55,.30);

}

.menu-mobile span{

    width:24px;
    height:2px;

    background:#ffffff;

    border-radius:20px;

    transition:.35s;

}


/*==================================================
ÍCONE HAMBÚRGUER ANIMADO
==================================================*/

.menu-mobile.active span:nth-child(1){

    transform:
    translateY(9px)
    rotate(45deg);

}

.menu-mobile.active span:nth-child(2){

    opacity:0;

}

.menu-mobile.active span:nth-child(3){

    transform:
    translateY(-9px)
    rotate(-45deg);

}


/*==================================================
OVERLAY
==================================================*/

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:.45s;

    z-index:9998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}


/*==================================================
OFF CANVAS
==================================================*/

.mobile-nav{

    position:fixed;

    top:0;
    right:-420px;

    width:380px;

    max-width:90%;

    height:100vh;

    background:

    rgba(8,8,8,.96);

    backdrop-filter:blur(30px);

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

    border-left:

    1px solid rgba(212,175,55,.15);

    box-shadow:

    -20px 0 60px rgba(0,0,0,.55);

    transition:.55s cubic-bezier(.77,0,.18,1);

    z-index:99999;

    padding:100px 45px;

    overflow-y:auto;

}


/* brilho dourado */

.mobile-nav::before{

    content:"";

    position:absolute;

    top:-200px;
    right:-150px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:

    rgba(212,175,55,.10);

    filter:blur(90px);

    pointer-events:none;

}


/*==================================================
ESTADO ABERTO
==================================================*/

.mobile-nav.active{

    right:0;

}


/*==================================================
BOTÃO FECHAR
==================================================*/

.close-mobile{

    position:absolute;

    top:30px;
    right:25px;

    width:48px;
    height:48px;

    border-radius:50%;

    background:

    rgba(255,255,255,.05);

    color:#ffffff;

    font-size:2rem;

    line-height:1;

    transition:.35s;

}

.close-mobile:hover{

    background:

    rgba(212,175,55,.15);

    color:var(--gold);

}


/*==================================================
LINKS
==================================================*/

.mobile-nav ul{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.mobile-nav ul li{

    opacity:0;

    transform:translateX(40px);

    transition:

    opacity .45s ease,

    transform .45s ease;

}


/* efeito cascata */

.mobile-nav.active li{

    opacity:1;

    transform:translateX(0);

}

.mobile-nav.active li:nth-child(1){transition-delay:.10s;}
.mobile-nav.active li:nth-child(2){transition-delay:.16s;}
.mobile-nav.active li:nth-child(3){transition-delay:.22s;}
.mobile-nav.active li:nth-child(4){transition-delay:.28s;}
.mobile-nav.active li:nth-child(5){transition-delay:.34s;}
.mobile-nav.active li:nth-child(6){transition-delay:.40s;}

.mobile-nav a{

    display:block;

    color:#ffffff;

    font-size:1.08rem;

    text-transform:uppercase;

    letter-spacing:2px;

    padding-bottom:12px;

    border-bottom:

    1px solid rgba(255,255,255,.05);

    transition:.35s;

}

.mobile-nav a:hover{

    color:var(--gold);

    padding-left:12px;

}


/*==================================================
BOTÃO MOBILE
==================================================*/

.mobile-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:20px;

    padding:18px 20px;

    border-radius:999px;

    background:

    var(--gradient-gold);

    color:#111 !important;

    font-weight:700;

    border:none !important;

    box-shadow:

    0 15px 35px rgba(212,175,55,.35);

}

.mobile-btn:hover{

    transform:translateY(-3px);

}


/*==================================================
BODY LOCK
==================================================*/

body.menu-open{

    overflow:hidden;

}
/*==================================================
 RESPONSIVIDADE
 DESKTOP GRANDE → TABLET
 1200px / 992px
==================================================*/


/*==================================================
 1200PX
 NOTEBOOKS GRANDES / TELAS MENORES
==================================================*/

@media (max-width:1200px){


/*==============================
 CONTAINERS
==============================*/

.container{

    width:min(94%,1200px);

    padding-inline:15px;

}


/*==============================
 HEADER
==============================*/

#header{

    padding:18px 0;

}


#header.sticky{

    padding:12px 0;

}



/*==============================
 LOGO
==============================*/

.logo span{

    font-size:1.7rem;

}


/*==============================
 MENU DESKTOP
==============================*/


nav ul{

    gap:24px;

}


nav ul li a{

    font-size:.88rem;

    letter-spacing:.8px;

}


/*==============================
 CTA HEADER
==============================*/


.menu-btn{

    padding:14px 26px;

    font-size:.85rem;

}



/*==============================
 HERO
==============================*/

.hero-content{

    max-width:850px;

}


.hero-content h1{

    font-size:

    clamp(3rem,6vw,5rem);

}


.hero-content p{

    max-width:700px;

    font-size:1rem;

}



/*==============================
 SEÇÕES
==============================*/


section{

    padding:

    6rem 0;

}



/*==============================
 GRIDS
==============================*/


.pillar-grid{

    gap:25px;

}


.author-grid{

    gap:40px;

}



}


/*==================================================
 992PX
 TABLETS HORIZONTAIS
==================================================*/

@media (max-width:992px){



/*==============================
 HEADER
==============================*/


#header{

    padding:15px 0;

}



#header .container{

    padding-inline:10px;

}



/* esconder menu desktop */

#header nav{

    display:none;

}



/* mostrar menu mobile */

.menu-mobile{

    display:flex;

}



/*==============================
 LOGO
==============================*/


.logo span{

    font-size:1.5rem;

}


.logo small{

    display:none;

}


/*==============================
 CONTAINERS
==============================*/


.container{

    width:92%;

}



/*==============================
 HERO
==============================*/


.hero{

    min-height:

    90vh;

}



.hero-content{

    text-align:center;

    margin:auto;

}


.hero-content h1{

    font-size:

    clamp(2.8rem,8vw,4rem);

}


.hero-content h1 br{

    display:none;

}


.hero-content p{

    margin-inline:auto;

}


/*==============================
 BOTÕES HERO
==============================*/


.hero-buttons{

    justify-content:center;

    flex-wrap:wrap;

}


/*==============================
 TÍTULOS
==============================*/


.section-title{

    margin-bottom:50px;

}


.section-title span{

    letter-spacing:3px;

}


.section-title h2{

    font-size:

    clamp(2rem,6vw,3rem);

}


/*==============================
 PILLARS
==============================*/


.pillar-content{

    text-align:center;

}


.pillar-number{

    margin-inline:auto;

}


.pillar-grid{

    grid-template-columns:

    1fr 1fr;

}



.pillar-grid h4{

    margin-top:20px;

}


/*==============================
 AUTHOR
==============================*/


.author-grid{

    grid-template-columns:

    1fr;

    text-align:center;

}


.author-photo{

    margin:auto;

    max-width:350px;

}


.author-content blockquote{

    text-align:left;

}



/*==============================
 CTA FINAL
==============================*/


.final-cta h2{

    font-size:

    clamp(2rem,7vw,3rem);

}



/*==============================
 FOOTER
==============================*/


footer{

    text-align:center;

}



}
/*==================================================
 RESPONSIVIDADE FINAL
 TABLET VERTICAL / SMARTPHONE
 768px / 576px / 420px
==================================================*/


/*==================================================
 768PX
 TABLETS VERTICAIS E SMARTPHONES GRANDES
==================================================*/

@media(max-width:768px){


/*==============================
 BASE
==============================*/

html{

    overflow-x:hidden;

}


body{

    overflow-x:hidden;

}


.container{

    width:92%;

    padding:0;

}


section{

    padding:

    4.5rem 0;

}



/*==============================
 HEADER MOBILE
==============================*/


#header{

    padding:14px 0;

}


#header.sticky{

    padding:10px 0;

}


.logo span{

    font-size:1.35rem;

    letter-spacing:1px;

}


.menu-mobile{

    display:flex;

    width:48px;

    height:48px;

}



/*==============================
 MENU OFF CANVAS
==============================*/


.mobile-nav{

    width:340px;

    max-width:88%;

    padding:

    90px 30px;

}


.mobile-nav a{

    font-size:.95rem;

}


/*==============================
 HERO
==============================*/


.hero{

    min-height:

    100svh;

}


.hero-content{

    padding-top:80px;

}


.hero-content h1{

    font-size:

    clamp(2.3rem,10vw,3.5rem);

    line-height:1.15;

}


.hero-content p{

    font-size:.98rem;

}


.hero-buttons{

    flex-direction:column;

    width:100%;

}


.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

    width:100%;

    justify-content:center;

}



/*==============================
 TITULOS
==============================*/


.section-title{

    margin-bottom:40px;

}


.section-title span{

    font-size:.75rem;

    letter-spacing:2px;

}


.section-title h2{

    font-size:

    clamp(1.8rem,8vw,2.6rem);

}


/*==============================
 GRID GERAL
==============================*/


.grid,
.benefits-grid,
.pillar-grid,
.numbers-grid,
.info-grid{

    grid-template-columns:

    1fr !important;

}



/*==============================
 PILARES
==============================*/


.pillar-number{

    width:80px;

    height:80px;

    font-size:2rem;

}


.pillar-content h2{

    font-size:

    clamp(1.8rem,8vw,2.5rem);

}


.pillar-content h3{

    font-size:1.2rem;

}


.pillar blockquote{

    font-size:1.15rem;

    margin:25px 0;

}



/*==============================
 CARDS
==============================*/


.card,
.glass{

    padding:25px;

}


.card p{

    font-size:.95rem;

}



/*==============================
 BIOGRAFIA
==============================*/


.author-photo{

    max-width:280px;

}


.author-content h2{

    font-size:2rem;

}


.author-content blockquote{

    font-size:1rem;

}



/*==============================
 INVESTIMENTO
==============================*/


.price-box{

    padding:30px 20px;

}


.price{

    font-size:3.8rem;

}



.final-cta p{

    font-size:.95rem;

}



/*==============================
 FOOTER
==============================*/


footer{

    padding:

    45px 0;

}


footer p{

    font-size:.85rem;

}


}




/*==================================================
 576PX
 SMARTPHONES MÉDIOS
==================================================*/

@media(max-width:576px){



/*==============================
 TIPOGRAFIA
==============================*/


body{

    font-size:.95rem;

}


h1{

    letter-spacing:0;

}


h2{

    letter-spacing:0;

}



/*==============================
 LOGO
==============================*/


.logo span{

    font-size:1.15rem;

}


.logo::after{

    display:none;

}



/*==============================
 HERO
==============================*/


.hero-content{

    text-align:center;

}


.hero-content h1{

    font-size:

    2.25rem;

}


.hero-content p{

    line-height:1.6;

}



/*==============================
 BOTÕES
==============================*/


.btn-primary,
.btn-secondary,
.menu-btn{

    width:100%;

    padding:

    16px 20px;

    font-size:.85rem;

}



/*==============================
 CRONOGRAMA
==============================*/


.pillar{

    text-align:center;

}


.pillar-grid > div{

    padding:

    20px 10px;

}


.pillar-grid ul{

    text-align:left;

}



/*==============================
 CTA FINAL
==============================*/


.final-cta h2{

    font-size:

    2rem;

}


.final-cta .huge{

    padding:

    18px;

}



/*==============================
 FAQ
==============================*/


.faq-item{

    padding:20px;

}


.faq-item h3{

    font-size:1.1rem;

}


}




/*==================================================
 420PX
 SMARTPHONES PEQUENOS
==================================================*/

@media(max-width:420px){



.container{

    width:94%;

}



/* HEADER */

.logo span{

    font-size:1rem;

}


.menu-mobile{

    width:44px;

    height:44px;

}



/* HERO */


.hero-content h1{

    font-size:

    1.95rem;

}


.hero-content p{

    font-size:.9rem;

}



/* TITULOS */


.section-title h2{

    font-size:

    1.8rem;

}


/* BOTÕES */


.btn-primary,
.btn-secondary{

    font-size:.78rem;

    letter-spacing:.5px;

}



/* PREÇO */


.price{

    font-size:

    3rem;

}


/* MOBILE MENU */


.mobile-nav{

    padding:

    80px 22px;

}


.mobile-nav ul{

    gap:20px;

}



.mobile-nav a{

    font-size:.85rem;

}



/* PILLARS */


.pillar-number{

    width:65px;

    height:65px;

}


.pillar-content h2{

    font-size:

    1.7rem;

}


.pillar-content h3{

    font-size:

    1rem;

}



/* TEXTO */

p{

    font-size:.92rem;

}



}
/*==================================================
 PARTE 2.1C
 LOADER
 SCROLLBAR
 BOTÕES PREMIUM
 ANIMAÇÕES GLOBAIS
==================================================*/



/*==================================================
 LOADER CINEMATOGRÁFICO
==================================================*/


#loader{

    position:fixed;

    inset:0;

    background:

    radial-gradient(
    circle,
    rgba(212,175,55,.12),
    transparent 40%
    ),

    #050505;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    z-index:9999999;

    transition:

    opacity .8s ease,

    visibility .8s ease;

}


#loader.hide{

    opacity:0;

    visibility:hidden;

}


.loader-logo{

    font-family:var(--font-title);

    font-size:

    clamp(2rem,6vw,4rem);

    letter-spacing:5px;

    color:#fff;

    animation:

    loaderGlow 2.5s infinite;

}


.loader-logo span{

    color:var(--gold);

}


.loader-circle{

    width:80px;

    height:80px;

    margin-top:35px;

    border-radius:50%;

    border:

    2px solid rgba(212,175,55,.15);

    border-top-color:

    var(--gold);

    animation:

    rotateLoader 1s linear infinite;

}



@keyframes rotateLoader{

to{

transform:rotate(360deg);

}

}


@keyframes loaderGlow{

0%,100%{

text-shadow:

0 0 10px rgba(212,175,55,.2);

}

50%{

text-shadow:

0 0 40px rgba(212,175,55,.8);

}

}





/*==================================================
 SCROLLBAR PREMIUM
==================================================*/


::-webkit-scrollbar{

    width:12px;

}


::-webkit-scrollbar-track{

    background:#050505;

}


::-webkit-scrollbar-thumb{

    background:

    linear-gradient(

    180deg,

    #F4D77C,

    #D4AF37,

    #8F6A16

    );

    border-radius:50px;

    border:

    3px solid #050505;

}


::-webkit-scrollbar-thumb:hover{

    background:

    linear-gradient(

    180deg,

    #fff0a8,

    #D4AF37

    );

}



/* Firefox */

html{

scrollbar-width:thin;

scrollbar-color:

#D4AF37

#050505;

}





/*==================================================
 BOTÕES PREMIUM
==================================================*/


.btn-primary,
.btn-secondary{


    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:

    18px 42px;


    border-radius:

    var(--radius-full);


    font-size:.95rem;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;


    overflow:hidden;

    transition:

    var(--transition);


}



.btn-primary{


    background:

    var(--gradient-gold);


    color:#111;


    box-shadow:


    0 15px 40px rgba(212,175,55,.35);


}



.btn-secondary{


    background:

    rgba(255,255,255,.04);


    color:#fff;


    border:

    1px solid rgba(212,175,55,.35);


    backdrop-filter:blur(10px);


}



/* brilho passando */

.btn-primary::before,
.btn-secondary::before{


    content:"";


    position:absolute;


    top:0;

    left:-120%;


    width:70%;


    height:100%;


    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.55),

    transparent

    );


    transform:

    skewX(-25deg);


    transition:.7s;


}


.btn-primary:hover::before,
.btn-secondary:hover::before{


    left:150%;


}



.btn-primary:hover{


    transform:

    translateY(-5px);


    box-shadow:


    0 25px 60px rgba(212,175,55,.55);


}



.btn-secondary:hover{


    transform:

    translateY(-5px);


    background:

    rgba(212,175,55,.12);


    border-color:

    var(--gold);


}




/* botão grande */

.huge{


    padding:

    22px 55px;

    font-size:

    1.05rem;

}





/*==================================================
 CTA PULSE
==================================================*/


.pulse{


animation:

pulseButton 2.5s infinite;

}



@keyframes pulseButton{


0%{

box-shadow:

0 0 0 0 rgba(212,175,55,.55);

}


70%{

box-shadow:

0 0 0 25px rgba(212,175,55,0);

}


100%{

box-shadow:

0 0 0 0 rgba(212,175,55,0);

}


}





/*==================================================
 ANIMAÇÕES GLOBAIS
==================================================*/


.fade-in{

opacity:0;

animation:

fadeIn 1s forwards;

}



.fade-down{

opacity:0;

transform:

translateY(-40px);

animation:

fadeDown .8s forwards;

}



.fade-up{

opacity:0;

transform:

translateY(50px);

animation:

fadeUp .8s forwards;

}



.fade-left{

opacity:0;

transform:

translateX(-50px);

animation:

fadeLeft .8s forwards;

}



.fade-right{

opacity:0;

transform:

translateX(50px);

animation:

fadeRight .8s forwards;

}



@keyframes fadeIn{

to{

opacity:1;

}

}



@keyframes fadeUp{

to{

opacity:1;

transform:translateY(0);

}

}



@keyframes fadeDown{

to{

opacity:1;

transform:translateY(0);

}

}



@keyframes fadeLeft{

to{

opacity:1;

transform:translateX(0);

}

}



@keyframes fadeRight{

to{

opacity:1;

transform:translateX(0);

}

}





/*==================================================
 FLUTUAÇÃO MÁGICA
==================================================*/


.float{


animation:

floating 5s ease-in-out infinite;


}



@keyframes floating{


0%,100%{

transform:translateY(0);

}


50%{

transform:

translateY(-15px);

}


}




/*==================================================
 BRILHO DOURADO
==================================================*/


.gold-glow{


animation:

goldGlow 3s infinite;


}



@keyframes goldGlow{


0%,100%{


filter:

drop-shadow(

0 0 5px rgba(212,175,55,.3)

);


}



50%{


filter:

drop-shadow(

0 0 25px rgba(212,175,55,.8)

);


}


}




/*==================================================
 REVEAL CINEMATOGRÁFICO
==================================================*/


.reveal{


opacity:0;

transform:

translateY(80px);

transition:

1s ease;


}



.reveal.visible{


opacity:1;

transform:

translateY(0);


}



/*==================================================
 DELAYS
==================================================*/


.delay-1{

animation-delay:.2s;

}


.delay-2{

animation-delay:.4s;

}


.delay-3{

animation-delay:.6s;

}


.delay-4{

animation-delay:.8s;

}
/*==================================================
 PARTE 2.2
 HERO CINEMATOGRÁFICO
==================================================*/


/*==================================================
 HERO BASE
==================================================*/


.hero{

    min-height:100vh;

    width:100%;

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;


    background:

    linear-gradient(

    180deg,

    rgba(0,0,0,.35),

    rgba(0,0,0,.85)

    ),

    url('../images/hero-mago.jpg');


    background-size:cover;

    background-position:center;

}



/*==================================================
 CAMADA CINEMATOGRÁFICA
==================================================*/


.hero::before{


    content:"";


    position:absolute;


    inset:0;


    background:


    radial-gradient(

    circle at center,

    transparent 10%,

    rgba(0,0,0,.75) 75%

    );


    z-index:1;


}



.hero::after{


    content:"";


    position:absolute;


    bottom:0;

    left:0;


    width:100%;

    height:250px;


    background:


    linear-gradient(

    transparent,

    #050505

    );


    z-index:2;


}





/*==================================================
 LUZ DOURADA MÍSTICA
==================================================*/


.hero-light{


    position:absolute;


    width:600px;

    height:600px;


    top:10%;

    left:50%;


    transform:translateX(-50%);


    background:


    radial-gradient(

    circle,

    rgba(212,175,55,.25),

    transparent 70%

    );


    filter:blur(80px);


    animation:

    lightPulse 5s infinite;


    z-index:1;


}



@keyframes lightPulse{


0%,100%{


opacity:.5;


transform:

translateX(-50%)

scale(1);


}


50%{


opacity:1;


transform:

translateX(-50%)

scale(1.15);


}


}




/*==================================================
 CONTEÚDO HERO
==================================================*/


.hero-content{


    position:relative;


    z-index:3;


    width:min(1000px,90%);


    text-align:center;


    margin-top:50px;


}



/*==================================================
 SELO SUPERIOR
==================================================*/


.hero-badge{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:

    12px 28px;


    border-radius:50px;


    background:


    rgba(212,175,55,.10);


    border:

    1px solid rgba(212,175,55,.45);


    backdrop-filter:blur(10px);


    color:

    var(--gold-light);


    text-transform:uppercase;


    font-size:.8rem;


    letter-spacing:4px;


    margin-bottom:35px;


    animation:

    fadeDown 1s ease forwards;


}



/*==================================================
 TITULO PRINCIPAL
==================================================*/


.hero h1{


    font-family:

    var(--font-title);


    color:#fff;


    font-size:


    clamp(3rem,7vw,5.8rem);


    line-height:1.05;


    text-shadow:


    0 10px 50px rgba(0,0,0,.8);


    animation:


    fadeUp 1s .2s ease forwards;


    opacity:0;


}



.hero h1 span{


    display:block;


    background:


    var(--gradient-gold);


    -webkit-background-clip:text;


    background-clip:text;


    color:transparent;


}




/*==================================================
 SUBTÍTULO
==================================================*/


.hero-subtitle{


    max-width:800px;


    margin:

    35px auto;


    color:

    rgba(255,255,255,.85);


    font-size:

    1.25rem;


    line-height:1.8;


    animation:


    fadeUp 1s .4s ease forwards;


    opacity:0;


}




.hero-subtitle strong{


    color:

    var(--gold-light);


}




/*==================================================
 INFORMAÇÕES RÁPIDAS
==================================================*/


.hero-info{


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:20px;


    margin:

    40px 0;


}



.hero-info-item{


    padding:

    15px 25px;


    border-radius:50px;


    background:


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


    border:

    1px solid rgba(255,255,255,.12);


    backdrop-filter:blur(15px);


    font-size:.9rem;


    color:#fff;


}



/*==================================================
 BOTÕES HERO
==================================================*/


.hero-buttons{


    display:flex;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


    margin-top:40px;


}


.hero-buttons .btn-primary{


    min-width:280px;


}



/*==================================================
 FRASE DE IMPACTO
==================================================*/


.hero-quote{


    margin-top:45px;


    font-family:

    var(--font-title);


    font-style:italic;


    color:

    var(--gold-light);


    font-size:1.3rem;


    animation:

    fadeIn 2s 1s forwards;


    opacity:0;


}




/*==================================================
 SCROLL INDICATOR
==================================================*/


.scroll-down{


    position:absolute;


    bottom:40px;


    left:50%;


    transform:translateX(-50%);


    z-index:5;


    display:flex;


    flex-direction:column;


    align-items:center;


    gap:12px;


    color:

    rgba(255,255,255,.7);


    font-size:.7rem;


    letter-spacing:3px;


    text-transform:uppercase;


}



.scroll-down span{


    width:2px;


    height:60px;


    background:


    linear-gradient(

    #D4AF37,

    transparent

    );


    animation:


    scrollMove 2s infinite;


}



@keyframes scrollMove{


0%{


opacity:0;


transform:translateY(-20px);


}


50%{


opacity:1;


}


100%{


opacity:0;


transform:translateY(20px);


}


}





/*==================================================
 RESPONSIVO HERO
==================================================*/


@media(max-width:768px){


.hero{


    background-position:

    55% center;


}



.hero-content{


    margin-top:40px;


}


.hero-info{


    flex-direction:column;


}



.hero-info-item{


    width:100%;


}


.hero-buttons .btn-primary{


    width:100%;


}



.scroll-down{


    display:none;


}


}



@media(max-width:420px){


.hero h1{


    font-size:2rem;


}


.hero-subtitle{


    font-size:.95rem;


}


.hero-badge{


    font-size:.65rem;


    letter-spacing:2px;


}


}
/*==================================================
 PARTE 2.3
 O CHAMADO
 BENEFÍCIOS
 CARDS PREMIUM
==================================================*/


/*==================================================
 SEÇÃO O CHAMADO
==================================================*/


.calling-section{

    position:relative;

    background:

    radial-gradient(

    circle at top,

    rgba(212,175,55,.08),

    transparent 45%

    );

}



.calling-grid{


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:70px;


    align-items:center;


}




/* texto */

.calling-content{


    position:relative;


}



.calling-content h2{


    font-size:

    clamp(2.2rem,5vw,4rem);


    margin-bottom:25px;


}



.calling-content h2 span{


    color:

    var(--gold);


}



.calling-content p{


    font-size:1.1rem;


    line-height:1.9;


}



.calling-highlight{


    margin-top:35px;


    padding:30px;


    border-left:


    4px solid var(--gold);


    background:


    rgba(212,175,55,.06);


    border-radius:0 20px 20px 0;


}




.calling-highlight strong{


    display:block;


    font-family:

    var(--font-title);


    font-size:1.5rem;


    color:

    var(--gold-light);


    margin-bottom:10px;


}





/*==================================================
 IMAGEM / ELEMENTO VISUAL CHAMADO
==================================================*/


.calling-image{


    position:relative;


}



.calling-image img{


    border-radius:

    30px;


    box-shadow:


    0 40px 80px rgba(0,0,0,.7);


}



.calling-image::before{


    content:"";


    position:absolute;


    inset:-20px;


    border:


    1px solid rgba(212,175,55,.25);


    border-radius:40px;


    z-index:-1;


}



/*==================================================
 BENEFÍCIOS
==================================================*/


.benefits-section{


    background:


    linear-gradient(

    180deg,

    #050505,

    #090909,

    #050505

    );


}



.benefits-grid{


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:30px;


}




/*==================================================
 CARD PREMIUM
==================================================*/


.benefit-card{


    position:relative;


    padding:40px 30px;


    border-radius:

    25px;


    background:


    rgba(255,255,255,.04);


    border:


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


    backdrop-filter:

    blur(20px);


    overflow:hidden;


    transition:

    .45s ease;


}





.benefit-card::before{


    content:"";


    position:absolute;


    top:0;

    left:0;


    width:100%;


    height:3px;


    background:


    var(--gradient-gold);


    transform:

    scaleX(0);


    transform-origin:left;


    transition:.45s;


}




.benefit-card:hover{


    transform:


    translateY(-12px);


    border-color:


    rgba(212,175,55,.35);


    box-shadow:


    0 30px 60px rgba(0,0,0,.5);


}



.benefit-card:hover::before{


    transform:

    scaleX(1);


}





/* ícone */


.benefit-icon{


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    margin-bottom:25px;


    background:


    rgba(212,175,55,.10);


    border:


    1px solid rgba(212,175,55,.30);


    font-size:2rem;


    color:

    var(--gold);


}



.benefit-card h3{


    font-size:1.35rem;


    margin-bottom:15px;


}



.benefit-card p{


    font-size:.95rem;


}





/*==================================================
 PARA QUEM É
==================================================*/


.audience-section{


    position:relative;


}




.audience-grid{


    display:grid;


    grid-template-columns:


    repeat(2,1fr);


    gap:25px;


}





.audience-item{


    display:flex;


    align-items:center;


    gap:20px;


    padding:25px;


    border-radius:20px;


    background:


    rgba(255,255,255,.04);


    border:


    1px solid rgba(255,255,255,.08);


    transition:.35s;


}



.audience-item:hover{


    border-color:

    rgba(212,175,55,.35);


    transform:

    translateX(8px);


}



.audience-item span{


    width:45px;


    height:45px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:

    var(--gradient-gold);


    color:#111;


    font-weight:900;


}



/*==================================================
 CTA INTERMEDIÁRIO
==================================================*/


.middle-cta{


    margin-top:80px;


    padding:60px 40px;


    text-align:center;


    border-radius:35px;


    background:


    linear-gradient(

    135deg,

    rgba(212,175,55,.12),

    rgba(255,255,255,.03)

    );


    border:


    1px solid rgba(212,175,55,.25);


}




.middle-cta h3{


    font-size:

    clamp(1.8rem,4vw,2.8rem);


}



.middle-cta p{


    max-width:700px;


    margin:20px auto 35px;


}



/*==================================================
 RESPONSIVO
==================================================*/


@media(max-width:992px){


.calling-grid{


    grid-template-columns:1fr;


}



.calling-image{


    order:-1;


}



.benefits-grid{


    grid-template-columns:

    repeat(2,1fr);


}



}



@media(max-width:768px){



.calling-grid{


    gap:40px;


}



.benefits-grid{


    grid-template-columns:1fr;


}



.audience-grid{


    grid-template-columns:1fr;


}



.middle-cta{


    padding:40px 25px;


}



}


@media(max-width:420px){


.calling-highlight{


    padding:20px;


}



.benefit-card{


    padding:30px 20px;


}



.audience-item{


    flex-direction:column;


    text-align:center;


}


}
/*==================================================
 PARTE 2.4
 OS 7 PILARES DO MAGO
 TIMELINE PREMIUM
==================================================*/


/*==================================================
 SEÇÃO CRONOGRAMA
==================================================*/


.pillars-section{

    position:relative;

    background:

    radial-gradient(

    circle at center,

    rgba(212,175,55,.06),

    transparent 50%

    );

}



.pillars-intro{

    max-width:850px;

    margin:

    0 auto 80px;

    text-align:center;

}



/*==================================================
 TIMELINE
==================================================*/


.pillars-timeline{

    position:relative;

    max-width:1100px;

    margin:auto;

}


/* linha central */


.pillars-timeline::before{


    content:"";


    position:absolute;


    top:0;

    bottom:0;


    left:50%;


    width:2px;


    background:


    linear-gradient(

    transparent,

    var(--gold),

    transparent

    );


    transform:translateX(-50%);


}



/*==================================================
 CARD DO PILAR
==================================================*/


.pillar-card{


    position:relative;


    width:calc(50% - 45px);


    margin-bottom:90px;


    padding:40px;


    border-radius:30px;


    background:


    rgba(255,255,255,.04);


    border:


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


    backdrop-filter:

    blur(20px);


    box-shadow:


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


    transition:.45s ease;


}



.pillar-card:hover{


    transform:

    translateY(-10px);


    border-color:

    rgba(212,175,55,.45);


    box-shadow:


    0 40px 80px rgba(0,0,0,.55);


}



/* esquerda */


.pillar-card:nth-child(odd){

    margin-right:auto;

}


/* direita */


.pillar-card:nth-child(even){

    margin-left:auto;

}



/*==================================================
 MARCADOR CENTRAL
==================================================*/


.pillar-card::before{


    content:attr(data-number);


    position:absolute;


    top:30px;


    width:80px;

    height:80px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:50%;


    background:


    var(--gradient-gold);


    color:#111;


    font-family:

    var(--font-title);


    font-size:2rem;


    font-weight:900;


    box-shadow:


    0 0 40px rgba(212,175,55,.45);


}



/* posição esquerda */


.pillar-card:nth-child(odd)::before{


    right:-85px;


}



/* posição direita */


.pillar-card:nth-child(even)::before{


    left:-85px;


}



/*==================================================
 CONTEÚDO
==================================================*/


.pillar-day{


    color:

    var(--gold);


    text-transform:uppercase;


    letter-spacing:4px;


    font-size:.75rem;


    font-weight:700;


}



.pillar-card h3{


    margin:

    15px 0 20px;


    font-size:

    clamp(1.5rem,3vw,2rem);


}



.pillar-card h3 span{


    color:

    var(--gold);


}



.pillar-card p{


    line-height:1.8;


}



/* premissa */


.pillar-premise{


    margin:

    25px 0;


    padding:

    20px;


    border-left:


    3px solid var(--gold);


    background:


    rgba(212,175,55,.08);


    border-radius:

    0 15px 15px 0;


}



.pillar-premise strong{


    display:block;


    font-family:

    var(--font-title);


    color:

    var(--gold-light);


    font-size:1.2rem;


}



/* foco */


.pillar-focus{


    margin-top:25px;


}



.pillar-focus strong{


    color:#fff;


}



.pillar-focus ul{


    margin-top:15px;


}



.pillar-focus li{


    position:relative;


    padding-left:25px;


    margin-bottom:10px;


    color:

    var(--text-soft);


}



.pillar-focus li::before{


    content:"✦";


    position:absolute;


    left:0;


    color:

    var(--gold);


}



/*==================================================
 CTA 49 VAGAS
==================================================*/


.vacancies-box{


    margin-top:80px;


    padding:

    60px 40px;


    text-align:center;


    border-radius:35px;


    background:


    linear-gradient(

    135deg,

    rgba(212,175,55,.15),

    rgba(255,255,255,.03)

    );


    border:


    1px solid rgba(212,175,55,.30);


}



.vacancies-number{


    font-family:

    var(--font-title);


    font-size:

    clamp(4rem,10vw,8rem);


    line-height:1;


    background:


    var(--gradient-gold);


    -webkit-background-clip:text;


    background-clip:text;


    color:transparent;


}



.vacancies-box h3{


    font-size:

    2rem;


}



.vacancies-box p{


    max-width:700px;


    margin:

    20px auto 35px;


}



/*==================================================
 ANIMAÇÃO DOS PILARES
==================================================*/


.pillar-card{


    opacity:0;


    transform:

    translateY(60px);


}



.pillar-card.visible{


    opacity:1;


    transform:

    translateY(0);


}





/*==================================================
 TABLET
==================================================*/


@media(max-width:992px){


.pillars-timeline::before{


    left:40px;


}



.pillar-card{


    width:

    calc(100% - 90px);


    margin-left:90px !important;


}



.pillar-card::before{


    left:-85px !important;


    right:auto !important;


}



}




/*==================================================
 MOBILE
==================================================*/


@media(max-width:768px){



.pillars-intro{


    margin-bottom:50px;


}



.pillars-timeline::before{


    left:30px;


}



.pillar-card{


    width:

    calc(100% - 60px);


    margin-left:60px !important;


    padding:30px 25px;


}



.pillar-card::before{


    width:60px;


    height:60px;


    left:-60px !important;


    font-size:1.5rem;


}



.pillar-day{


    letter-spacing:2px;


}



.pillar-card h3{


    font-size:1.35rem;


}



.vacancies-box{


    padding:

    40px 20px;


}


}
/*==================================================
 PARTE 2.5
 FAQ
 RODAPÉ
 RESPONSIVIDADE FINAL
==================================================*/


/*==================================================
 FAQ SECTION
==================================================*/


.faq-section{


    position:relative;


    background:


    radial-gradient(

    circle at top,

    rgba(212,175,55,.08),

    transparent 45%

    );


}



.faq-container{


    max-width:900px;


    margin:auto;


}



.faq-item{


    margin-bottom:20px;


    border-radius:20px;


    overflow:hidden;


    background:


    rgba(255,255,255,.04);


    border:


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


    transition:.35s;


}



.faq-item:hover{


    border-color:


    rgba(212,175,55,.35);


}



/* pergunta */


.faq-question{


    width:100%;


    padding:

    25px 30px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:20px;


    background:none;


    color:#fff;


    font-size:1.05rem;


    font-weight:700;


    text-align:left;


    cursor:pointer;


}



.faq-question span{


    color:

    var(--gold);


    font-size:1.8rem;


    transition:.35s;


}




.faq-item.active .faq-question span{


    transform:

    rotate(45deg);


}



/* resposta */


.faq-answer{


    max-height:0;


    overflow:hidden;


    transition:

    max-height .45s ease;


}



.faq-answer p{


    padding:

    0 30px 30px;


    line-height:1.8;


    color:

    var(--text-soft);


}





/*==================================================
 CTA FINAL
==================================================*/


.final-section{


    padding:

    100px 0;


    position:relative;


}



.final-box{


    text-align:center;


    padding:

    70px 40px;


    border-radius:40px;


    background:


    linear-gradient(

    135deg,

    rgba(212,175,55,.15),

    rgba(255,255,255,.04)

    );


    border:


    1px solid rgba(212,175,55,.35);


    box-shadow:


    0 40px 100px rgba(0,0,0,.5);


}




.final-box h2{


    font-family:

    var(--font-title);


    font-size:

    clamp(2.2rem,5vw,4rem);


}



.final-box h2 span{


    color:

    var(--gold);


}



.final-price{


    margin:

    35px 0;


}



.final-price small{


    display:block;


    color:

    var(--text-soft);


}



.final-price strong{


    display:block;


    font-family:

    var(--font-title);


    font-size:

    clamp(3rem,8vw,5rem);


    background:


    var(--gradient-gold);


    -webkit-background-clip:text;


    background-clip:text;


    color:transparent;


}



.final-details{


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:15px;


    margin:

    35px 0;


}



.final-details span{


    padding:

    12px 20px;


    border-radius:50px;


    background:


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


    border:


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


}





/*==================================================
 FOOTER PREMIUM
==================================================*/


.footer{


    position:relative;


    padding:

    70px 0 30px;


    background:#030303;


    border-top:


    1px solid rgba(212,175,55,.15);


}



.footer-grid{


    display:grid;


    grid-template-columns:

    1.5fr 1fr 1fr;


    gap:50px;


}



.footer-logo{


    font-family:

    var(--font-title);


    font-size:2rem;


    color:#fff;


}



.footer-logo span{


    color:

    var(--gold);


}




.footer h4{


    color:

    var(--gold-light);


    margin-bottom:20px;


}



.footer ul li{


    margin-bottom:12px;


}



.footer a{


    color:

    var(--text-soft);


    transition:.3s;


}



.footer a:hover{


    color:

    var(--gold);


}




.footer-bottom{


    margin-top:50px;


    padding-top:25px;


    border-top:


    1px solid rgba(255,255,255,.08);


    text-align:center;


    font-size:.85rem;


    color:

    rgba(255,255,255,.55);


}



/*==================================================
 TABLET
==================================================*/


@media(max-width:992px){



.footer-grid{


    grid-template-columns:

    1fr 1fr;


}



}




/*==================================================
 SMARTPHONE
==================================================*/


@media(max-width:768px){



.final-box{


    padding:

    45px 20px;


}



.final-details{


    flex-direction:column;


}



.final-details span{


    width:100%;


}



.faq-question{


    padding:

    20px;


    font-size:.95rem;


}



.faq-answer p{


    padding:

    0 20px 25px;


}



.footer-grid{


    grid-template-columns:

    1fr;


    text-align:center;


}



.footer{


    padding-top:50px;


}


}



@media(max-width:420px){



.final-price strong{


    font-size:

    3rem;


}



.footer-logo{


    font-size:

    1.5rem;


}



}