@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* CS FIBRA TV — TEMA INTERNO TECNOLOGIA 2.1 */
body.csf-v21-interna {
    font-family: 'Manrope', Arial, sans-serif !important;
    background: #041126 !important;
    color: #dcecff !important;
}

.csf-v21-interna #wrapper,
.csf-v21-interna #content,
.csf-v21-interna section,
.csf-v21-interna main {
    background-color: transparent;
}

.csf-v21-interna #content {
    min-height: 450px;
    padding: 65px 0 85px;
    background:
      radial-gradient(ellipse at 85% 10%,
        rgba(28,118,236,.16), transparent 48%),
      linear-gradient(155deg,#041126,#071a36 70%,#041126) !important;
}

.csf-v21-interna header,
.csf-v21-interna .navbar,
.csf-v21-interna .navbar-default,
.csf-v21-interna .navbar-static-top {
    background: #041126 !important;
    border-color: rgba(59,168,255,.16) !important;
    box-shadow: none !important;
}

.csf-v21-interna header {
    border-bottom: 1px solid rgba(59,168,255,.18) !important;
}

.csf-v21-interna .navbar-nav > li > a,
.csf-v21-interna .navbar-default .navbar-nav > li > a {
    color: #c6ddf8 !important;
    font-weight: 700;
}

.csf-v21-interna .navbar-nav > li > a:hover,
.csf-v21-interna .navbar-nav > .active > a,
.csf-v21-interna .navbar-nav > .active > a:hover {
    color: #4bd6ff !important;
    background: rgba(30,133,240,.13) !important;
}

.csf-v21-interna .navbar-brand img {
    filter: brightness(0) invert(1);
}

.csf-v21-interna #inner-headline,
.csf-v21-interna .inner-headline {
    background:
      radial-gradient(circle at 80% 40%,
        rgba(29,157,255,.20),transparent 45%),
      linear-gradient(120deg,#081a39,#0d3564) !important;
    border-bottom: 1px solid rgba(56,168,255,.25);
    padding-top: 37px !important;
    padding-bottom: 37px !important;
}

.csf-v21-interna .pageTitle,
.csf-v21-interna #inner-headline h1 {
    color: #f4f9ff !important;
    font-size: clamp(26px,3.4vw,42px) !important;
    font-weight: 800 !important;
    letter-spacing: -.04em;
    line-height: 1.2;
}

.csf-v21-interna #content h1,
.csf-v21-interna #content h2,
.csf-v21-interna #content h3,
.csf-v21-interna #content h4 {
    color: #f4f9ff !important;
    font-family: 'Manrope',Arial,sans-serif !important;
    font-weight: 800 !important;
}

.csf-v21-interna #content h2 {
    font-size: clamp(24px,2.5vw,32px);
    letter-spacing: -.035em;
}

.csf-v21-interna #content p,
.csf-v21-interna #content small,
.csf-v21-interna #content .about-logo,
.csf-v21-interna #content .text-muted {
    color: #b2c7e3 !important;
    line-height: 1.8;
}

.csf-v21-interna #content strong,
.csf-v21-interna #content b {
    color: #e8f5ff;
}

.csf-v21-interna #content a:not(.btn) {
    color: #54cfff;
}

.csf-v21-interna .csf-v21-option {
    background:
      linear-gradient(150deg,
        rgba(15,48,91,.98),
        rgba(7,25,53,.98)) !important;
    border: 1px solid rgba(72,176,255,.28) !important;
    border-radius: 19px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.20) !important;
    padding: 25px !important;
    transition: transform .2s ease,border-color .2s ease;
    height: 100%;
}

.csf-v21-interna .csf-v21-option:hover {
    transform: translateY(-4px);
    border-color: rgba(70,210,255,.75) !important;
}

.csf-v21-interna .csf-v21-option h3,
.csf-v21-interna .csf-v21-option p,
.csf-v21-interna .csf-v21-option small,
.csf-v21-interna .csf-v21-option span {
    color: #edf6ff !important;
}

.csf-v21-interna .csf-v21-option a,
.csf-v21-interna #content .btn {
    display: inline-block;
    border-radius: 10px !important;
    background: linear-gradient(110deg,#137af0,#00baff) !important;
    border: 1px solid rgba(144,224,255,.3) !important;
    color: #fff !important;
    font-weight: 800 !important;
    padding: 12px 20px !important;
    text-decoration: none !important;
    box-shadow: 0 7px 24px rgba(0,130,255,.18);
}

.csf-v21-interna .csf-v21-option a:hover,
.csf-v21-interna #content .btn:hover {
    filter: brightness(1.13);
}

.csf-v21-interna footer {
    background: #031024 !important;
    color: #b2c7e3 !important;
    border-top: 1px solid rgba(57,153,255,.19);
}

.csf-v21-interna footer a {
    color: #57cfff !important;
}

.csf-v21-interna .csf-preview-ribbon {
    background: #0b3764;
    color: #dcf5ff;
    text-align: center;
    font: 700 12px 'Manrope',Arial,sans-serif;
    letter-spacing: .06em;
    padding: 10px;
    border-bottom: 1px solid #2464a7;
}

@media(max-width:767px) {
    .csf-v21-interna #content {
        padding: 35px 0 55px;
    }
    .csf-v21-interna .csf-v21-option {
        margin-bottom: 18px;
    }
    .csf-v21-interna .navbar-collapse {
        background: #061a37 !important;
    }
}


/* CS FIBRA TV - REFINAMENTO INTERNO V2.2 */

/* Selos dos testes */
body.csf-v21-interna #content .hub-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 9px !important;
    margin: 16px 0 !important;
}

body.csf-v21-interna #content .hub-badges span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(29, 97, 163, .35) !important;
    color: #d9f2ff !important;
    border: 1px solid rgba(74, 185, 255, .38) !important;
    border-radius: 999px !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    white-space: nowrap;
}

/* Acabamento dos cards */
body.csf-v21-interna #content .csf-v21-option {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%,
          rgba(29, 153, 255, .13), transparent 55%),
        linear-gradient(145deg, #102e55, #071b38) !important;
}

body.csf-v21-interna #content .csf-v21-option h3 {
    letter-spacing: -.025em;
    line-height: 1.25;
    margin-bottom: 12px;
}

body.csf-v21-interna #content .csf-v21-option:hover {
    border-color: rgba(70, 210, 255, .8) !important;
    box-shadow: 0 20px 55px rgba(0, 110, 255, .13) !important;
}

/* Espaçamento e acabamento responsivo */
@media (max-width: 767px) {
    body.csf-v21-interna #content .hub-badges {
        gap: 7px !important;
    }

    body.csf-v21-interna #content .hub-badges span {
        font-size: 10px !important;
        padding: 6px 9px !important;
    }
}


/* REFINAMENTO INTERNO V2.4 */

/* Cabeçalho premium */
body.csf-v21-interna header {
    background: #041126 !important;
    border-bottom: 1px solid rgba(65,177,255,.22) !important;
}

body.csf-v21-interna header .navbar {
    background: transparent !important;
    box-shadow: none !important;
}

body.csf-v21-interna header .navbar-nav > li > a {
    border-radius: 9px !important;
    margin: 3px 2px !important;
    padding: 12px 13px !important;
    transition: background .2s, color .2s;
}

body.csf-v21-interna header .navbar-nav > li > a:hover {
    background: rgba(24,130,235,.17) !important;
    color: #60d6ff !important;
}

body.csf-v21-interna header .navbar-nav > .active > a {
    background: rgba(19,113,210,.24) !important;
    color: #7edfff !important;
    border: 1px solid rgba(61,177,255,.25);
}

/* Hierarquia visual */
body.csf-v21-interna #content h2 {
    font-weight: 800 !important;
    letter-spacing: -.045em;
    margin-bottom: 13px;
}

body.csf-v21-interna #content .csf-v21-option {
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

/* Acessibilidade */
body.csf-v21-interna a:focus-visible {
    outline: 2px solid #6adfff !important;
    outline-offset: 3px;
}

@media(max-width:767px) {
    body.csf-v21-interna header .navbar-nav > li > a {
        margin: 3px 8px !important;
    }
}

body.csf-v21-interna .hub-badges > span {
    background: #123b68 !important;
    color: #e4f5ff !important;
    -webkit-text-fill-color: #e4f5ff !important;
    border: 1px solid #328ec7 !important;
    border-radius: 999px !important;
    padding: 7px 12px !important;
}


/* CS FIBRA - CARDS PREMIUM V2.5 */

/* Planos CS e TV Online */
body.csf-v21-interna #content .pricing-box-item {
    background: #092244 !important;
    border: 1px solid rgba(61,169,255,.35) !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,.22) !important;
}

body.csf-v21-interna #content .pricing-box-item
.pricing-heading,
body.csf-v21-interna #content .pricing-box-item
.pricing-terms,
body.csf-v21-interna #content .pricing-box-item
.pricing-action,
body.csf-v21-interna #content .pricing-box-item ul,
body.csf-v21-interna #content .pricing-box-item li {
    background: #0b294e !important;
    border-color: rgba(79,161,240,.20) !important;
}

body.csf-v21-interna #content .pricing-box-item h3,
body.csf-v21-interna #content .pricing-box-item h4,
body.csf-v21-interna #content .pricing-box-item p,
body.csf-v21-interna #content .pricing-box-item li,
body.csf-v21-interna #content .pricing-box-item span,
body.csf-v21-interna #content .pricing-box-item strong {
    color: #ecf6ff !important;
    -webkit-text-fill-color: #ecf6ff !important;
}

body.csf-v21-interna #content .pricing-box-item
.pricing-terms h6,
body.csf-v21-interna #content .pricing-box-item
.pricing-terms h6 * {
    color: #58d1ff !important;
    -webkit-text-fill-color: #58d1ff !important;
}

/* Revenda */
body.csf-v21-interna #content .rev-card {
    background: linear-gradient(145deg,#103058,#071a37) !important;
    border: 1px solid rgba(69,178,255,.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,.2) !important;
}

body.csf-v21-interna #content .rev-card h3,
body.csf-v21-interna #content .rev-card p,
body.csf-v21-interna #content .rev-card li,
body.csf-v21-interna #content .rev-card span {
    color: #e5f2ff !important;
    -webkit-text-fill-color: #e5f2ff !important;
}

/* Destaque TV Online */
body.csf-v21-interna #content .hero-highlight {
    background: linear-gradient(135deg,#103b6c,#0a2550) !important;
    border: 1px solid rgba(72,187,255,.35) !important;
    border-radius: 17px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.20);
}

body.csf-v21-interna #content .hero-highlight h2,
body.csf-v21-interna #content .hero-highlight p,
body.csf-v21-interna #content .hero-highlight strong {
    color: #edf7ff !important;
    -webkit-text-fill-color: #edf7ff !important;
}