/* Section Nav Menu */

.navbar-light .navbar-nav .nav-link.active {
    color: var(--color-secondary-500);
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--color-secondary-300);
}


.navbar-light .navbar-nav .nav-link {
    font-family: var(--body-font-family);
    margin-right: var(--spacing-5);
    font-size: var(--font-size-md);
    text-transform: none;
    outline: none;
    font-weight: var(--font-weight-semibold);
}

.navbar .nav-item:hover .dropdown-menu > .dropdown-item {
    font-family: var(--body-font-family);
    margin-right: var(--spacing-5);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-md);
    text-transform: none;
    outline: none;
    font-weight: var(--font-weight-semibold);
}

.nav-bar > .navbar {
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    background-color: var(--color-neutral-white)!important;
}

.nav-bar.sticky-top > .navbar {
    border-radius: var(--radius-none)!important;
}

/* Section Intro */

h1.display-5.animated.fadeIn.mb-4 {
    font-size: var(--heading-h2-size);
    font-family: var(--body-font-family);
}

/* Esquerda */

.container-fluid.header .row .col-md-6.p-3.mt-lg-5 {
    background-color: var(--color-neutral-white);
    margin-top: var(--spacing-0)!important;
    padding: var(--spacing-5)!important;
}

.container-fluid.header .row .col-md-6.p-3.mt-lg-5 h3 {    
    color: var(--color-primary-500)!important;
    font-family: var(--body-font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-0)!important;
}

.container-fluid.header .row .col-md-6.p-3.mt-lg-5 .btn i {
    margin-right: 8px;
}

.container-fluid.header .row .col-md-6.p-3.mt-lg-5 h2 {
    color: var(--color-neutral-900)!important;
    font-family: var(--body-font-family);
    font-size: var(--font-size-hg);
    font-weight: var(--font-weight-medium);
}

.container-fluid.header .row .col-md-6.p-3.mt-lg-5 p {
    color: var(--color-neutral-600)!important;
    font-family: var(--body-font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

/* Section Planos */
.planos .container-xxl.py-3 {
   padding: var(--spacing-0) var(--spacing-0)!important;
}

.container .text-center h1 {
    color: var(--color-neutral-900)!important;
    font-family: var(--body-font-family);
    font-size: var(--font-size-xxxl);
    font-weight: var(--font-weight-medium);
}

/* Customizar Item do Plano*/
.cat-item {
    background-color: var(--color-neutral-white);
    border: none!important;
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    font-size: var(--heading-h3-size);
    font-family: var(--body-font-family);
    position: relative;
}

/* Plano em destaque + selo "Mais Popular" */
.cat-destaque {
    outline: 2px solid var(--color-accent-500);
    outline-offset: -2px;
}

.badge-popular {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-accent-500);
    color: var(--color-neutral-white);
    font-family: var(--body-font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

#planos .row>* {
    margin-top: 0;
}

.cat-item div {
    background: #00a0df75;
    transition: .5s;
    border-radius: 10px;
}

.text-primary {
    color: #00A0DF !important;
}

.text-muted {
    color: #ffffff !important;
}

.btn.btn-primary, .btn.btn-secondary {
    color: #FFFFFF;
    background-color: var(--color-accent-500);
    border-color: var(--color-accent-500);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.cat-item:hover {
    border-color: var(--color-primary-800)!important;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.cat-item p {
    color: #000000;
}

.cat-item div:hover {
    background-color: var(--color-primary-500)!important;
}

.cat-item:hover div {
    background: var(--color-primary-500)!important;
    border-color: transparent;
}

.cat-item.d.p-5:hover {
    background-color: var(--color-secondary-500);
}

.cat-item h5.text-dark {
    color: var(--color-neutral-900)!important;
    font-family: var(--body-font-family);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    margin-bottom: 15px; /* Espaço abaixo do título */
    margin-top: 15px;
}

/* Descrição do plano — legível no card claro */
.cat-item .plano-descricao {
    color: var(--color-neutral-700);
    font-family: var(--body-font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-regular);
}

/* Ao passar o mouse (card azul sólido) o texto vira branco */
.cat-item:hover h5.text-dark,
.cat-item:hover .plano-descricao,
.cat-item:hover p {
    color: var(--color-neutral-white)!important;
}

.text-center.mx-auto.mb-5.wow.fadeInUp.pt-3 {
    margin-bottom: var(--spacing-5)!important;
}

/* Planos Indicados */
#recomendacao .container-fluid {
    margin-top: 0!important;
}

#recomendacao .row.g-2{
    margin: 0;
    padding: var(--spacing-5) var(--spacing-7)!important;
}

#recomendacao .row.g-5 .text-center h2 {
    font-family: var(--body-font-family)!important;
    font-size: var(--font-size-hg)!important;
    font-weight: var(--font-weight-medium)!important;
    color: var(--color-neutral-white)!important;
}

#recomendacao .row.g-5 .text-center p {
    color: var(--color-neutral-600)!important;
    font-family: var(--body-font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
}

.card-body {
    background-color: var(--color-neutral-white);
    border: none !important;
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
}

/* Estilizando o título dentro do card */
.card-title.text-primary {
    color: var(--color-neutral-900) !important;
    font-family: var(--body-font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: 15px; /* Espaço abaixo do título */
}

/* Estilizando o texto dentro do card */
.card-text {
    font-size: 1rem;
    color: var(--color-neutral-800);
}


/* Efeito ao passar o mouse no card */
.card-body:hover {
    border-color: var(--color-primary-800);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}


/* Estilo da imagem no card */
.card-body img {
    width: 100%; /* Imagem se ajustando ao tamanho do card */
    border-radius: 10px; /* Bordas arredondadas na imagem */
    margin-bottom: 1rem; /* Espaço inferior para imagem */
}

/* Customização do parágrafo de descrição */
.card-body p {
    font-size: 1rem;
    color: var(--color-neutral-600);
    margin-bottom: 1.5rem;
}

a.btn.btn-lg.btn-primary.btn-lg-square.back-to-top {
    width: 48px!important;
}


/* Ajustando o efeito de hover no card */


.footer-bg {
    background-color: var(--color-secondary-500)!important;
    font-family: var(--body-font-family)!important;
}

.footer {
    background-color: var(--color-secondary-600);
}
#linksProvedor {
    width: 0;
}

.LinksProvedor h5{
    font-family: var(--body-font-family);
}
.text-white.mb-4{
    font-family: var(--body-font-family);
}

.LinksProvedor a.link-chamada-plans{
    font-family: var(--body-font-family);
}

#ProvedorFone,#ProvedorCelular,#ProvedorEmail,#ProvedorEndereco {
    font-family: var(--body-font-family);
}

.col-md-6.p-3.mt-lg-5 span p {
    font-family: var(--body-font-family);
}

/* Breadcrumbs */

li.breadcrumb-item , li.breadcrum-item .active {
    font-size: var(--font-size-md)!important;
    font-family: var(--body-font-family);
    text-transform: none!important;
}

li.breadcrumb-item::first-letter , li.breadcrum-item .active::first-letter {
    text-transform: capitalize!important;
}

li.breadcrumb-item a {
    color: var(--color-primary-500);
}

li.breadcrumb-item a:hover {
    color: var(--color-primary-700);
}

/* Fale conosco */

span.ProvedorEmail {
    font-family: var(--body-font-family);
    width: 100%;
}

p.ProvedorEndereco {
    font-family: var(--body-font-family);
    width: 100%;
}

span.ProvedorFone {
    font-family: var(--body-font-family);
    width: 100%;
}

/* Ajustes Página/Form Cadastro */
.d-flex.justify-content-center.text-center {
    margin-top: var(--spacing-7);
}

#form .row.g-3 {
    margin-bottom: var(--spacing-7);
}

#formCadastro p.col-md-6 {
    margin-bottom: var(--spacing-5);
}

/* Ajustes do botão */
.cat-item.d-block.text-center.rounded {
    background-color: var(--color-neutral-white);
}

.cat-item.d-block.text-center.rounded:hover {
    /* Estilos para quando o mouse passa sobre o item */
    background-color: var(--color-primary-500); /* Cor de fundo ao passar o mouse */
    color: var(--color-neutral-white); /* Cor do texto ao passar o mouse */
    transform: scale(1.05); /* Aumenta um pouco o tamanho do item */
}

/* Ajustes Mobile Media Query */
@media only screen and (max-width: 600px) {

    .container-fluid.header.bg-white.p-0 .col-md-6.p-5.mt-lg-5 {
        padding: var(--spacing-4)!important;
    }

    .container-fluid.header .row .col-md-6.p-3.mt-lg-5 {
        padding: var(--spacing-4)!important;
    }

    .container-fluid.header .row .col-md-6.p-3.mt-lg-5 {
        margin-top: var(--spacing-0)!important;
    }

    #planos h1.mb-3 {
        font-size: var(--heading-h3-size);
    }

    a.btn.btn-primary {
        width: 100%!important;
    }

    #planos a.button.btn.btn-primary{
        width: 100%;
        background-color: var(--color-accent-500);
    }

    a.btn.btn-lg.btn-primary.btn-lg-square.back-to-top {
        width: 48px!important;
    }

    #planos .btn-primary {
        background-color: var(--color-accent-500);
    }

    .back-to-top {
        background-color: var(--color-primary-700)!important;
    }

    .d-flex.justify-content-center.text-center {
        margin-top: var(--spacing-0);
    }

    #form {
        width: 100%;
    }

    #form .row.g-3 {
        gap: var(--spacing-2);
        width: 100%;
    }

    #formCadastro .row>* {
        padding: 0px 0px;
    }

    #formCadastro #form {
        width: 100%;
        font-family: var(--body-font-family);
    }

    #formCadastro {
        width: 100%;
        padding: 24px 24px;
    }

    #formCadastro .container.gx-4 {
        padding: 0px;
        margin: 0px;
        width: 100%;
        --bs-gutter-x: 0;
    }

    .container.gx-4 .row.g-4 {
        width: 100%;
        margin: 0px;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    .d-flex.justify-content-center.text-center {
        width: 100%;
    }

    #form .row {
        margin: 0;
    }

}

/* ============================
   Section Card (Notícias / App do Cliente)
   ============================ */
.section-card {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: box-shadow .3s ease, transform .3s ease;
}

.section-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* ============================
   Botões — estados e transição
   ============================ */
.btn.btn-primary, .btn.btn-secondary {
    transition: background-color .25s ease, border-color .25s ease,
                transform .15s ease, box-shadow .25s ease;
}

.btn.btn-primary:hover, .btn.btn-secondary:hover {
    background-color: var(--color-accent-600);
    border-color: var(--color-accent-600);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn.btn-primary:focus-visible, .btn.btn-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 134, 52, 0.35);
}

/* ============================
   Navbar — sublinhado animado
   ============================ */
.navbar-light .navbar-nav .nav-link {
    transition: color .25s ease;
    position: relative;
}

.navbar-light .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-secondary-500);
    transition: width .25s ease;
}

.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link.active::after {
    width: calc(100% - var(--spacing-5));
}

.nav-bar > .navbar {
    transition: box-shadow .3s ease, border-radius .3s ease;
}

/* ============================
   Ritmo de espaçamento entre seções
   ============================ */
.container-xxl > .bg-light.rounded.p-3 {
    margin-block: var(--spacing-5);
}

/* ============================
   Formulários — inputs, selects e foco
   ============================ */
.form-control, .form-select {
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(0, 160, 223, 0.18);
    outline: none;
}

.form-control::placeholder {
    color: var(--color-neutral-500);
}

.form-floating > label {
    color: var(--color-neutral-600);
    font-family: var(--body-font-family);
}

.form-label {
    color: var(--color-neutral-800);
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-1);
}

.form-check-input:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(0, 160, 223, 0.18);
}

.form-check-input:checked {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

/* ============================
   Responsividade — Tablets e telas médias
   ============================ */
@media only screen and (max-width: 991.98px) {

    /* Hero centralizado quando empilha */
    .container-fluid.header .row .col-md-6.p-3.mt-lg-5 {
        text-align: center;
        padding: var(--spacing-5)!important;
        margin-top: var(--spacing-0)!important;
    }

    .container-fluid.header .row .col-md-6.p-3.mt-lg-5 h2 {
        font-size: var(--font-size-xxl);
    }

    /* Navbar: reduz o afastamento da central do cliente */
    .navbar .ms-lg-5 {
        margin-left: var(--spacing-3)!important;
    }

    /* Cartões de seção com respiro menor */
    .section-card {
        padding: var(--spacing-4)!important;
    }

    /* Títulos de seção proporcionais */
    .container .text-center h1 {
        font-size: var(--font-size-xxl);
    }
}

@media only screen and (min-width: 601px) and (max-width: 767.98px) {

    /* Botões principais ocupam a largura toda em telas médias */
    .container-fluid.header .row .col-md-6.p-3.mt-lg-5 .btn.btn-primary {
        width: 100%;
    }

    /* Espaçamento vertical entre seções mais compacto */
    .container-xxl > .bg-light.rounded.p-3 {
        margin-block: var(--spacing-4);
    }
}

/* ============================
   Rodapé — links, redes sociais e copyright
   ============================ */
.footer .copyright {
    color: rgba(255, 255, 255, 0.7);
    padding-block: var(--spacing-4);
}

.footer .copyright a.ProvedorNome {
    color: var(--color-neutral-white);
    text-decoration: none;
}

.footer .copyright a.ProvedorNome:hover {
    color: var(--color-primary-300);
}

.footer .btn-link.textF {
    transition: color .2s ease, padding-left .2s ease;
}

.footer .btn-link.textF:hover {
    color: var(--color-primary-300)!important;
    padding-left: var(--spacing-1);
}

.redes-sociais .btn-social {
    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease, transform .2s ease;
}

.redes-sociais .btn-social:hover {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: var(--color-neutral-white);
    transform: translateY(-2px);
}

/* ============================
   Botão voltar ao topo
   ============================ */
a.btn.back-to-top {
    transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease;
}

a.btn.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ============================
   Carrossel do hero
   ============================ */
.header-carousel .owl-carousel-item img {
    border-radius: var(--radius-xl);
}