/* ==================================================
   F1-NET TV+ PREMIUM
================================================== */

body{
    background:#050505;
}
/* FORÇA TEMA F1NET */

.f1tv-faq .accordion-button,
.f1tv-faq .accordion-button.collapsed{
    background:#0a0a0a !important;
    color:#ffffff !important;
    border:1px solid rgba(255,0,0,.25) !important;
}

.f1tv-faq .accordion-button:not(.collapsed){
    background:#140000 !important;
    color:#ff0000 !important;
    border-color:#ff0000 !important;
}

.f1tv-faq .accordion-button::after{
    filter:brightness(0) invert(1) !important;
}

.f1tv-faq .accordion-body{
    background:#080808 !important;
    color:#d0d0d0 !important;
    border-left:3px solid #ff0000 !important;
}

.f1tv-faq .accordion-item{
    background:transparent !important;
    border:none !important;
}

.f1tv-faq .accordion-button:focus{
    box-shadow:none !important;
}

.f1tv-faq .accordion-button:not(.collapsed)::after{
    filter:brightness(0) invert(1) !important;
}
.f1tv-title{
    color:#fff;
    font-size:56px;
    font-weight:800;
    line-height:1.1;
}

.text-red{
    color:#ff0000;
}
/* HERO */

.tv-premium-section{
    position:relative;
    overflow:hidden;
    min-height:750px;

    background:
    radial-gradient(
        circle at center,
        rgba(255,0,0,.15),
        transparent 50%
    ),
    #050505;
}

.tv-premium-section::after{
    content:'';

    position:absolute;

    width:700px;
    height:700px;

    left:50%;
    top:50%;

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

    background:
    radial-gradient(
        rgba(255,0,0,.12),
        transparent 70%
    );

    pointer-events:none;
    z-index:2;
}

.tv-glow-container{
    position:relative;
}

.tv-glow-container::before{
    content:'';

    position:absolute;

    width:500px;
    height:500px;

    left:50%;
    top:50%;

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

    background:
    radial-gradient(
        rgba(255,0,0,.25),
        transparent 70%
    );

    filter:blur(60px);

    z-index:-1;
}

.tv-title{
    color:#fff !important;
    font-weight:800 !important;
}

.tv-description{
    color:#d5d5d5 !important;
}

.btn-premium-tv{
    background:#ff0000 !important;
    border:none;
    transition:.3s;
}

.btn-premium-tv:hover{
    background:#d80000 !important;

    transform:translateY(-2px);

    box-shadow:
    0 10px 30px rgba(255,0,0,.35);
}

/* ==================================================
   CANAIS
================================================== */

.f1tv-channels-section{
    position:relative;

    overflow:hidden;

    padding:70px 0;

    background:
    radial-gradient(
        circle at 50% 0,
        rgba(255,0,0,.16),
        transparent 38%
    ),
    linear-gradient(
        180deg,
        #080808,
        #000000
    );
}

.f1tv-channels-section::before{
    content:'';

    position:absolute;

    inset:0;

    pointer-events:none;
    opacity:.18;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 54px,
            rgba(255,0,0,.32) 55px,
            transparent 57px
        );
    animation:f1tv-platform-lines 14s linear infinite;
}

.f1tv-marquee{
    position:relative;
    z-index:2;
    overflow:hidden;
    width:100%;
}

.f1tv-track{
    display:flex;

    gap:20px;

    width:max-content;

    --f1tv-scroll-distance:50%;
    animation:f1tv-scroll var(--f1tv-scroll-duration, 35s) linear infinite;
    will-change:transform;
}

.f1tv-track:hover{
    animation-play-state:paused;
}

@keyframes f1tv-scroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(calc(var(--f1tv-scroll-distance) * -1));
    }
}

.f1tv-channel{
    width:100px;
    height:100px;

    border-radius:50%;

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

    flex-shrink:0;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02)
    );

    backdrop-filter:blur(15px);

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

    transition:.3s;
}

.f1tv-channel:hover{
    transform:translateY(-5px);

    border-color:#ff0000;

    box-shadow:
    0 0 30px rgba(255,0,0,.25);
}

.f1tv-channel img{
    max-width:55px;
    max-height:55px;
}

/* ==================================================
   DISPOSITIVOS
================================================== */

.f1tv-devices{
  position:relative;
    overflow:hidden;
    padding:0 0 70px;

    background:
    radial-gradient(
        circle at 50% 0,
        rgba(255,0,0,.16),
        transparent 38%
    ),
    linear-gradient(
        180deg,
        #080808,
        #000000
    );
}

.f1tv-devices::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.18;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 54px,
            rgba(255,0,0,.32) 55px,
            transparent 57px
        );
    animation:f1tv-platform-lines 14s linear infinite;
}

.f1tv-devices .container{
    position:relative;
    z-index:2;
}

.f1tv-title{
    font-size:56px;
    font-weight:800;
    line-height:1.1;
}

.f1tv-desc{
    color:#c9c9c9;
    font-size:18px;
    margin-bottom:40px;
}

.f1tv-card{
    position:relative;
    overflow:hidden;
    display:flex;

    gap:20px;

    padding:28px;

    margin-bottom:20px;

    border-radius:24px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.01)
    );

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

    backdrop-filter:blur(15px);

    transition:.3s;
}

.f1tv-card::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,0,0,.18),
            transparent 58%
        );
    transform:translateX(-100%);
    transition:.45s;
}

.f1tv-card:hover{
    transform:translateX(8px);

    border-color:#ff0000;

    box-shadow:
    0 0 30px rgba(255,0,0,.18);
}

.f1tv-card:hover::before{
    opacity:1;
    transform:translateX(100%);
}

.f1tv-card > *{
    position:relative;
    z-index:1;
}

.f1tv-card i{
    width:70px;
    height:70px;

    min-width:70px;

    border-radius:18px;

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

    background:
    linear-gradient(
        135deg,
        #ff0000,
        #7a0000
    );

    color:#fff;

    font-size:28px;
}

.f1tv-card h4{
    color:#fff;
    font-weight:700;
    margin-bottom:10px;
}

.f1tv-card p{
    color:#c7c7c7;
    margin:0;
}

.tv-device-box{
    padding:40px;

    border-radius:35px;

    background:
    linear-gradient(
        145deg,
        rgba(255,0,0,.08),
        rgba(255,255,255,.02)
    );

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

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

.f1tv-device-image{
    width:100%;
    max-width:700px;

    border-radius:25px;
    border:2px solid rgba(255,0,0,.3);

    filter:
    drop-shadow(0 0 40px rgba(255,0,0,.35));

    animation:f1tv-device-glow 4.8s ease-in-out infinite;
}

@keyframes f1tv-device-glow{
    0%,100%{
        transform:translateY(0);
        filter:drop-shadow(0 0 34px rgba(255,0,0,.30));
    }
    50%{
        transform:translateY(-10px);
        filter:drop-shadow(0 0 58px rgba(255,0,0,.48));
    }
}
#f1-particles{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:4;
    pointer-events:none;
}

#f1-particles canvas{
    display:block !important;
    width:100% !important;
    height:100% !important;
}

.tv-mockup-img{
    animation:f1tv-float 5s ease-in-out infinite;
}

@keyframes f1tv-float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-14px);
    }
}

.tv-premium-section .container{
    position:relative;
    z-index:5;
}

/* ==================================================
   PLATAFORMAS
================================================== */

.f1tv-platforms{
    position:relative;
    overflow:hidden;
    padding:20px 0 80px;

    background:
    radial-gradient(
        circle at 50% 0,
        rgba(255,0,0,.16),
        transparent 38%
    ),
    linear-gradient(
        180deg,
        #080808,
        #000000
    );
}

.f1tv-platforms::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.18;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 54px,
            rgba(255,0,0,.32) 55px,
            transparent 57px
        );
    animation:f1tv-platform-lines 14s linear infinite;
}

.f1tv-platforms .container{
    position:relative;
    z-index:2;
}

@keyframes f1tv-platform-lines{
    to{
        transform:translateX(-57px);
    }
}

.f1tv-flow-bg{
    position:relative;
    overflow:hidden;
    background:
    radial-gradient(
        circle at 50% 12%,
        rgba(255,0,0,.18),
        transparent 34%
    ),
    radial-gradient(
        circle at 78% 62%,
        rgba(255,0,0,.08),
        transparent 30%
    ),
    linear-gradient(
        180deg,
        #080808 0%,
        #030303 48%,
        #000000 100%
    );
}

.f1tv-flow-bg::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.18;
    z-index:0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 54px,
            rgba(255,0,0,.32) 55px,
            transparent 57px
        );
    animation:f1tv-platform-lines 14s linear infinite;
}

.f1tv-flow-bg::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        linear-gradient(
            180deg,
            rgba(255,0,0,.08),
            transparent 18%,
            transparent 78%,
            rgba(255,0,0,.05)
        );
}

.f1tv-channels-section,
.f1tv-devices,
.f1tv-platforms{
    isolation:isolate;
    background:transparent !important;
    border:0;
    margin:0;
}

.f1tv-channels-section::before,
.f1tv-devices::before,
.f1tv-platforms::before,
.f1tv-channels-section::after,
.f1tv-devices::after{
    display:none;
}

.f1tv-marquee,
.f1tv-devices .container,
.f1tv-platforms .container{
    position:relative;
    z-index:2;
}

.f1tv-platforms h3{
    color:#fff;
    font-size:42px;
    font-weight:800;
}

.f1tv-platforms p{
    color:#c9c9c9;
    margin-bottom:34px;
}

.f1tv-platform-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;
}

.f1tv-platform{
    position:relative;
    overflow:hidden;
    width:150px;
    height:95px;

    border-radius:22px;

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

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

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

    transition:.3s;
}

.f1tv-platform::before{
    content:'';
    position:absolute;
    inset:auto 14px 10px 14px;
    height:2px;
    border-radius:999px;
    background:#ff0000;
    box-shadow:0 0 18px rgba(255,0,0,.85);
    transform:scaleX(.28);
    transition:.3s;
}

.f1tv-platform:hover{
    transform:translateY(-5px);

    border-color:#ff0000;

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

.f1tv-platform:hover::before{
    transform:scaleX(1);
}

.f1tv-platform > *{
    position:relative;
    z-index:1;
}

.f1tv-platform i{
    color:#fff;
    font-size:42px;
}

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

@media(max-width:991px){

    .tv-title,
    .f1tv-title{
        font-size:40px !important;
        text-align:center;
    }

    .f1tv-desc{
        text-align:center;
    }

    .f1tv-channel{
        width:80px;
        height:80px;
    }

    .f1tv-channel img{
        max-width:40px;
        max-height:40px;
    }

    .f1tv-platform{
        width:120px;
        height:80px;
    }
    #f1-particles{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:4;
}

.tv-premium-section .container{
    position:relative;
    z-index:5;
}

}