/* ==========================================
   FULL VAPING TACO - AUDIO LANDING
   ========================================== */

.fvt-audio-card {
    width: 100%;
    max-width: 760px;
    margin: 35px auto;
    padding: 18px 22px;

    display: flex;
    align-items: center;
    gap: 18px;

   

	
	background: linear-gradient(179deg, #5c5c5c 0%, #000000 100%);

	
	
    border-radius: 18px;
    box-sizing: border-box;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .22);

    color: #fff;
}


/* LOGO */

.fvt-audio-logo {
    width: 65px;
    min-width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.fvt-audio-logo img {
    display: block;
    max-width: 65px;
    max-height: 65px;
    width: auto;
    height: auto;
}


/* BOTÓN PLAY */

.fvt-audio-play {
    width: 54px;
    height: 54px;
    min-width: 54px;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #8B0000;

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

    font-size: 19px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.fvt-audio-play:hover {
    transform: scale(1.08);

    box-shadow:
        0 0 0 5px rgba(255,255,255,.12);
}

.fvt-audio-play:active {
    transform: scale(.96);
}


/* CONTENIDO */

.fvt-audio-main {
    flex: 1;
    min-width: 0;
}


/* TEXTO */

.fvt-audio-text {
    display: flex;
    flex-direction: column;
	text-align:center;
}

.fvt-audio-text strong {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.fvt-audio-text span {
    margin-top: 3px;

    font-size: 12px;

    opacity: .78;
}


/* ONDAS */

.fvt-audio-wave {
    width: 100%;
    height: 32px;

    margin-top: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;

    overflow: hidden;
}

.fvt-audio-wave i {
    display: block;

    width: 3px;
    height: 8px;

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

    border-radius: 10px;

    transform-origin: center;

    animation: fvtWave 1s ease-in-out infinite;
    animation-play-state: paused;
}

/* Diferentes alturas/ritmos */

.fvt-audio-wave i:nth-child(1) {
    animation-delay: -.8s;
}

.fvt-audio-wave i:nth-child(2) {
    animation-delay: -.4s;
}

.fvt-audio-wave i:nth-child(3) {
    animation-delay: -.7s;
}

.fvt-audio-wave i:nth-child(4) {
    animation-delay: -.2s;
}

.fvt-audio-wave i:nth-child(5) {
    animation-delay: -.6s;
}

.fvt-audio-wave i:nth-child(6) {
    animation-delay: -.1s;
}

.fvt-audio-wave i:nth-child(7) {
    animation-delay: -.5s;
}

.fvt-audio-wave i:nth-child(8) {
    animation-delay: -.3s;
}

.fvt-audio-wave i:nth-child(9) {
    animation-delay: -.9s;
}

.fvt-audio-wave i:nth-child(10) {
    animation-delay: -.2s;
}

.fvt-audio-wave i:nth-child(11) {
    animation-delay: -.7s;
}

.fvt-audio-wave i:nth-child(12) {
    animation-delay: -.4s;
}

.fvt-audio-wave i:nth-child(13) {
    animation-delay: -.8s;
}

.fvt-audio-wave i:nth-child(14) {
    animation-delay: -.1s;
}

.fvt-audio-wave i:nth-child(15) {
    animation-delay: -.5s;
}


@media (max-width: 768px) {

    .fvt-audio-wave {
        width: 100%;
        height: 28px;
        margin-top: 7px;
    }

    .fvt-audio-wave i {
        width: 2px;
    }
}


/* ANIMACIÓN */

@keyframes fvtWave {

    0%, 100% {
        height: 6px;
        opacity: .55;
    }

    50% {
        height: 26px;
        opacity: 1;
    }
}


/* ACTIVAR ONDAS CUANDO SUENA */

.fvt-audio-card.is-playing .fvt-audio-wave i {
    animation-play-state: running;
}


/* BARRA INFERIOR */

.fvt-audio-bottom {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 5px;

    font-size: 10px;

    opacity: .8;
}

.fvt-audio-progress {
    flex: 1;

    height: 4px;

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

    border-radius: 10px;

    overflow: hidden;

    cursor: pointer;
}

.fvt-audio-progress div {
    width: 0;
    height: 100%;

    background: #fff;

    border-radius: 10px;
}


/* ==========================================
   MÓVIL
   ========================================== */

@media (max-width: 768px) {

    .fvt-audio-card {
        width: calc(100% - 20px);

        margin: 22px auto;

        padding: 15px;

        gap: 11px;

        border-radius: 14px;
    }

    .fvt-audio-logo {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    .fvt-audio-logo img {
        max-width: 42px;
        max-height: 42px;
    }

    .fvt-audio-play {
        width: 46px;
        height: 46px;
        min-width: 46px;

        font-size: 16px;
    }

    .fvt-audio-text strong {
        font-size: 14px;
    }

    .fvt-audio-text span {
        font-size: 11px;
    }

    .fvt-audio-wave {
        height: 24px;
        margin-top: 7px;
    }

    .fvt-audio-wave i {
        width: 2px;
    }

    .fvt-audio-bottom {
        margin-top: 2px;
    }
}


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

body{
    background:#000;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100vh;
    overflow-x:hidden;
}

.container{
    width:100%;
    max-width:1800px;
    margin:0 auto;
    padding:20px 10px;
}

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

.hero{
    position:relative;
    max-width:1800px;
    margin:40px auto;
    overflow:visible;
    animation:bannerEntrance 4s ease;
}

.hero img{
    width:100%;
    display:block;
    position:relative;
    z-index:10;
	border-radius:10px;
    filter:
        drop-shadow(0 0 25px rgba(180,0,255,.35))
        drop-shadow(0 0 50px rgba(0,255,120,.25));
}

/* ========================================
   VAPOR
======================================== */
.vapors{
position:absolute;
inset:-150px -250px;
z-index:2;
pointer-events:none;
overflow:visible;
}

.vapors span{
position:absolute;
bottom:-100px;


width:200px;
height:200px;

border-radius:50%;
filter:blur(80px);

opacity:0;

animation:vape 14s linear infinite;


}

/* LADO IZQUIERDO */

.vapors span:nth-child(1){ left:-18%; background:rgba(180,0,255,.45); animation-delay:0s; }
.vapors span:nth-child(2){ left:-12%; background:rgba(255,255,255,.20); animation-delay:1s; }
.vapors span:nth-child(3){ left:-8%; background:rgba(0,255,150,.25); animation-delay:2s; }
.vapors span:nth-child(4){ left:-3%; background:rgba(255,0,255,.35); animation-delay:3s; }
.vapors span:nth-child(5){ left:2%; background:rgba(220,220,220,.18); animation-delay:4s; }

/* CENTRO IZQUIERDO */

.vapors span:nth-child(6){ left:15%; background:rgba(180,0,255,.30); animation-delay:5s; }
.vapors span:nth-child(7){ left:25%; background:rgba(255,255,255,.15); animation-delay:6s; }
.vapors span:nth-child(8){ left:35%; background:rgba(0,255,150,.25); animation-delay:7s; }

/* CENTRO */

.vapors span:nth-child(9){ left:45%; background:rgba(255,255,255,.12); animation-delay:1.5s; }
.vapors span:nth-child(10){ left:52%; background:rgba(255,0,255,.25); animation-delay:3.5s; }
.vapors span:nth-child(11){ left:58%; background:rgba(180,0,255,.25); animation-delay:5.5s; }

/* CENTRO DERECHO */

.vapors span:nth-child(12){ left:70%; background:rgba(0,255,150,.30); animation-delay:2s; }
.vapors span:nth-child(13){ left:78%; background:rgba(255,255,255,.18); animation-delay:4s; }
.vapors span:nth-child(14){ left:86%; background:rgba(255,0,255,.30); animation-delay:6s; }

/* LADO DERECHO */

.vapors span:nth-child(15){ left:96%; background:rgba(0,255,150,.35); animation-delay:2.5s; }
.vapors span:nth-child(16){ left:102%; background:rgba(255,255,255,.20); animation-delay:4.5s; }
.vapors span:nth-child(17){ left:108%; background:rgba(180,0,255,.40); animation-delay:6.5s; }
.vapors span:nth-child(18){ left:114%; background:rgba(255,0,255,.30); animation-delay:8s; }
.vapors span:nth-child(19){ left:120%; background:rgba(0,255,150,.30); animation-delay:9s; }
.vapors span:nth-child(20){ left:126%; background:rgba(255,255,255,.15); animation-delay:10s; }



@keyframes vape{

    0%{
        transform:
            translateY(0)
            translateX(0)
            scale(.4);

        opacity:0;
    }

    15%{
        opacity:.45;
    }

    50%{
        opacity:.35;
    }

    100%{
        transform:
            translateY(-500px)
            translateX(120px)
            scale(3);

        opacity:0;
    }
}

/* ========================================
   BOTÓN
======================================== */

.cta-container{
    text-align:center;
    margin:40px 0;
}
@media(max-width:768px){

    .btn-compra{

        width:100%;
        max-width:340px;

        font-size:1rem;

        padding:16px 24px;
    }

}
.btn-compra{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px 40px;

    font-family:'Segoe UI', Arial, sans-serif;
    font-size:1.2rem;
    font-weight:700;

    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:1px;

    color:#fff;

    background:linear-gradient(180deg,#ff2b2b,#d80000);

    border:2px solid rgba(255,255,255,.4);
    border-radius:8px;

    box-shadow:
        0 0 18px rgba(255,0,0,.55),
        0 8px 18px rgba(0,0,0,.45);

    transition:.25s ease;

    transform:none;
}

.btn-compra:hover{

    background:linear-gradient(180deg,#ff4444,#ff0000);

    transform:translateY(-2px);

    box-shadow:
        0 0 28px rgba(255,0,0,.9),
        0 10px 28px rgba(0,0,0,.55);
}
/* ========================================
   REDES
======================================== */

.social{
    margin-top:4px;

    display:flex;
    justify-content:center;
    gap:35px;
}

.social a{
    color:#fff;
    font-size:34px;
    transition:.3s;
}

.social a:hover{
    color:#e600ff;
    transform:scale(1.15);
}

/* ========================================
   ANIMACIONES
======================================== */

@keyframes bannerEntrance{

    from{
        opacity:0;
        transform:scale(.9);
    }

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

/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:768px){
	.container{
    display:flex;
    flex-direction:column;
}

.loader-screen{
    order:1;
    margin:30px auto;
}

.cta-container{
    order:2;
    margin:5px 0 5px;
}

.hero{
    order:3;
    margin-top:1px;
}

.social{
    order:4;
}

footer{
    order:5;
}
    .container{
        padding:15px;
    }

    .btn-compra{
        font-size:1.3rem;
        padding:14px 28px;
    }

    .social a{
        font-size:28px;
    }

    .vapors span{
        width:100px;
        height:100px;
    }
}

	
	
.loader-screen{
    width:70%;
    max-width:555px;
    margin:100px auto;
    text-align:center;
}

.loader-screen h4{
    font-family:'Permanent Marker', cursive;
    font-size:1rem;
    color:#fff;

    text-shadow:
        0 0 10px #ff00ff,
        0 0 20px #b000ff,
        0 0 40px #00ff99;

    margin-bottom:4px;
}

.loader-bar{
    width:100%;
    height:18px;

    border:3px solid rgba(255,255,255,.3);
    border-radius:50px;

    overflow:hidden;

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

    box-shadow:
        0 0 20px rgba(180,0,255,.5),
        0 0 35px rgba(0,255,150,.3);
}

.loader-progress{
    width:0%;
    height:100%;

    border-radius:50px;

    background:
        linear-gradient(
            90deg,
            #b000ff 0%,
            #ff00ff 40%,
            #ffffff 60%,
            #00ff99 100%
        );

    box-shadow:
        0 0 20px #b000ff,
        0 0 40px #00ff99;

    animation:loading 5s linear infinite;
}

.loader-text{
    margin-top:10px;
    color:#ccc;
    font-size:0.8rem;
    letter-spacing:2px;
}

@keyframes loading{
    from{
        width:0%;
    }
    to{
        width:100%;
    }
}
	
	#ctaContainer{
    opacity:0;
    transform:translateY(30px);
    transition:.8s ease;
}

#ctaContainer.show{
    opacity:1;
    transform:translateY(0);
}
	
	.landing-center{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

	
.loader-screen{
    width:100%;
    max-width:555px;

    margin:0px auto;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}
	
	.loader-bar,
.loader-text,
.loader-screen h2{
    width:100%;
}
	
	
	.cta-container{

    position:relative;

    display:none;

    opacity:0;

    transform:translateY(20px) scale(.85);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.cta-container.show{

    opacity:1;

    transform:translateY(0) scale(1);
}

.btn-compra{

    display:inline-flex;
    align-items:center;
    gap:14px;

    padding:10px 10px;

    border:none;

    border-radius:14px;

    background:
        linear-gradient(135deg,#7a00ff,#ff006a);

    color:#fff;

    font-size:18px;

    font-weight:700;

    font-family:'Segoe UI',sans-serif;

    letter-spacing:.8px;

    text-decoration:none;

    box-shadow:
        0 0 20px rgba(170,0,255,.45),
        0 0 60px rgba(255,0,120,.30);

    transition:.3s;
}

.btn-compra:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 35px rgba(170,0,255,.8),
        0 0 80px rgba(255,0,120,.5);
}
	.smoke-pop{

    position:absolute;

    inset:-80px;

    pointer-events:none;
}

.smoke-pop span{

    position:absolute;

    left:50%;
    top:50%;

    width:140px;
    height:140px;

    border-radius:50%;

    filter:blur(45px);

    opacity:0;

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

}
	.smoke-pop.play span{

    animation:smokePop 1.4s ease-out forwards;
}

.smoke-pop span:nth-child(1){animation-delay:.0s;}
.smoke-pop span:nth-child(2){animation-delay:.08s;}
.smoke-pop span:nth-child(3){animation-delay:.16s;}
.smoke-pop span:nth-child(4){animation-delay:.24s;}
.smoke-pop span:nth-child(5){animation-delay:.32s;}

@keyframes smokePop{

    0%{

        transform:
            translate(-50%,-50%)
            scale(.2);

        opacity:0;
    }

    20%{

        opacity:.55;
    }

    100%{

        transform:
            translate(-50%,-170%)
            scale(2.6);

        opacity:0;
    }

}
	@media (max-width:768px){

    html,
    body{
        overflow-x:hidden;
        overflow-y:auto;
    }

    .container{
        min-height:auto;
        padding-bottom:20px;
    }

    footer{
        margin-bottom:0 !important;
        padding-bottom:20px !important;
    }

    .social{
        margin-bottom:0px;
    }

    .vapors{
        overflow:hidden;
    }

}