/* ==================================== */
/* Variáveis e Reset           */
/* ==================================== */
:root {
    --bs-primary: #106CAE;
    /* Azul #106CAE */
    --bs-secondary: #6c757d;
    --bs-dark: #343a40;
    --custom-blue: #106CAE;
    /* Atualizado para #106CAE */
    --custom-blue-hover: #0c5285;
    /* Versão mais escura do #106CAE (calculado aprox) */
    --custom-red: #dc3545;
    /* Cor para o plano em destaque */
    --custom-red-hover: #c82333;
    /* Cor mais escura para o hover do vermelho */
    --text-dark: #333;
    /* Cor de texto mais escura para o corpo */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    background-color: #f8f9fa;
    /* Um fundo mais claro para a página */
}

/* ==================================== */
/* Header / Navbar          */
/* ==================================== */
.navbar {
    background-color: #ffffff;
    /* Fundo branco da navbar */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    /* Sombra sutil para destacar a navbar */
    padding-top: 1rem;
    padding-bottom: 1rem;
    overflow: visible !important;
    /* Garante que o menu flutuante não seja cortado */
}

.navbar-brand {
    color: var(--text-dark);
    /* Cor do texto da marca */
    font-weight: 700;
    font-size: 1.8rem;
}

.navbar-nav .nav-link {
    color: var(--text-dark);
    /* Cor dos links da navbar */
    font-weight: 500;
    margin-right: 15px;
    /* Espaçamento entre os links */
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--custom-blue);
    /* Cor no hover */
}

.navbar-nav .nav-link i {
    margin-right: 5px;
}

/* Botão "Central do Assinante" */
.btn-subscriber {
    background-color: var(--custom-blue);
    color: #ffffff;
    border: 1px solid var(--custom-blue);
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-subscriber:hover {
    background-color: var(--custom-blue-hover);
    /* Usar variável hover */
    color: #ffffff;
    border-color: var(--custom-blue-hover);
}

/* Para telas de tablet e menores (breakpoint 'lg' do Bootstrap, 992px) */
/* Isso afetará telas de 991.98px para baixo (md, sm, xs) */
@media (max-width: 991.98px) {
    /* Exibição completa do menu (Ícone + Texto) solicitada pelo usuário */

    .navbar-nav .nav-item .nav-link {
        padding-left: 0;
        /* Alinhamento padrão */
    }

    /* Ajusta espaçamento entre itens no modo mobile */
    .navbar-nav .nav-item {
        margin-bottom: 10px;
    }
}

/* Opcional: Se você quiser que o navbar-brand (3E Network) também se ajuste em telas menores */
@media (max-width: 767.98px) {

    /* Em telas pequenas (md e abaixo) */
    .navbar-brand {
        font-size: 1.25rem;
        /* Reduz o tamanho da fonte do logo */
    }
}

/* ==================================== */
/* Banner (Versão corrigida, do seu CSS anterior) */
/* ==================================== */
.hero {
    overflow: hidden;
    /* Garante que o conteúdo não vaze */
}

.hero .carousel-item {
    height: 400px;
    /* Define a altura fixa do slide */
    background-color: #333;
    /* Cor de fundo caso a imagem demore a carregar */
}

.hero .carousel-item img {
    height: 100%;
    /* Faz a imagem preencher a altura do item */
    object-fit: cover;
    /* Garante que a imagem cubra a área sem distorcer, cortando o excesso */
    width: 100%;
    /* Garante que a imagem preencha a largura */
}

/* Opcional: Ajustar o posicionamento do caption se necessário */
.hero .carousel-caption {
    bottom: 20px;
    /* Ajusta a posição vertical do caption */
    left: 0;
    /* Começa da borda esquerda */
    right: 0;
    /* Vai até a borda direita */
    bottom: 20px;
    /* Ajusta a posição vertical */
    padding: 0;
    /* Remove padding do wrapper */
    text-align: left;
    /* Garante alinhamento à esquerda */
}

.hero .banner-text-box {
    background-color: rgba(0, 0, 0, 0.5);
    /* Fundo semi-transparente para melhor leitura */
    padding: 20px 30px;
    border-radius: 5px;
    display: inline-block;
    /* Para o fundo ocupar apenas o tamanho do conteúdo até o max-width */
    max-width: 50%;
    /* Limita a largura do box de texto */
}

.hero .carousel-caption h2 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.hero .carousel-caption p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

/* Botões de navegação do carrossel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5);
    /* Fundo escuro para os ícones */
    border-radius: 50%;
    /* Formato redondo */
    padding: 15px;
}


/* ==================================== */
/* Seção de Planos         */
/* ==================================== */
#planos {
    padding: 60px 0;
    background-color: #ffffff;
}

#planos h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--text-dark);
}

/* Estilo das abas de navegação */
.nav-tabs {
    border-bottom: none;
    margin-bottom: 40px !important;
}

.nav-tabs .nav-item .nav-link {
    border: 1px solid var(--custom-blue);
    border-radius: 5px;
    margin: 0 10px;
    color: var(--custom-blue);
    background-color: transparent;
    transition: all 0.3s ease;
    padding: 10px 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.nav-tabs .nav-item .nav-link i {
    margin-right: 8px;
}

.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-item .nav-link:hover {
    background-color: var(--custom-blue);
    color: #ffffff;
    border-color: var(--custom-blue);
}

/* Cards de Plano */
.plan-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
}

.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Card em Destaque (Plano Essencial / Vermelho) */
.plan-card.featured {
    border: 2px solid var(--custom-red);
    position: relative;
    /* Essencial para o posicionamento do selo */
    overflow: hidden;
    /* Esconde as partes da fita que saem para os lados */
}

/* NOVO CÓDIGO PARA O SELO DE FITA (RIBBON) */
.plan-card.featured::before {
    content: "Mais Popular";
    position: absolute;
    top: -10px;
    /* Posição vertical */
    right: -10px;
    /* Posição horizontal */
    background-color: var(--custom-red);
    color: white;
    width: 150px;
    /* Largura da fita */
    padding: 10px 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(45deg) translate(15%, -35%);
    /* Rotação e ajuste fino */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
}


/* Estilos de texto dentro do card-body */
.plan-card .card-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.plan-card .speed {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--custom-blue);
    margin-bottom: 5px;
}

.plan-card .description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
    /* Garante alinhamento à esquerda */
}

.price.h3,
.plan-card .price {
    font-size: 1.6rem !important;
    /* Diminui a fonte do preço */
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 25px;
}

.plan-card .price span {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--bs-secondary);
}

.plan-card .btn-primary,
.plan-card .btn-danger {
    padding: 12px 30px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.plan-card.featured .card-title,
.plan-card.featured .speed,
.plan-card.featured .price {
    color: var(--custom-red);
}

.plan-card.featured .btn-danger {
    background-color: var(--custom-red);
    border-color: var(--custom-red);
}

.plan-card.featured .btn-danger:hover {
    background-color: var(--custom-red-hover);
    border-color: var(--custom-red-hover);
}

/* ==================================== */
/* Seção Sobre Nós          */
/* ==================================== */
#sobre {
    padding: 80px 0;
    background-color: #f9f9f9;
}

#sobre h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--text-dark);
}

#sobre p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

/* ==================================== */
/* Seção Contato            */
/* ==================================== */
#contato {
    padding: 80px 0;
    background-color: #f0f2f5;
}

#contato h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: var(--text-dark);
}

#contato .form-control {
    border-radius: 5px;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ddd;
}

#contato .form-control:focus {
    border-color: var(--custom-blue);
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

#contato textarea.form-control {
    resize: vertical;
}

#contato .btn-primary {
    background-color: var(--custom-blue);
    border-color: var(--custom-blue);
    color: #ffffff;
    padding: 12px 30px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

#contato .btn-primary:hover {
    background-color: var(--custom-blue-hover);
    border-color: var(--custom-blue-hover);
}

/* Caixa de Notificação */
.notification-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-weight: 500;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s ease-out;
    width: 100%;
    max-width: 700px;
    /* Ajuste para centralizar com o formulário */
    margin-left: auto;
    margin-right: auto;
}

.notification-box.hidden {
    display: none;
    opacity: 0;
}

.notification-box.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.notification-box.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.notification-box.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.notification-box .close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
}

.notification-box .close-btn:hover {
    opacity: 0.7;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================================== */
/* Outros CSS            */
/* ==================================== */
/* Garanta que estes estejam no final para sobrescrever, se necessário */
.text-primary {
    color: var(--custom-blue) !important;
}

.btn-primary {
    background-color: var(--custom-blue);
    border-color: var(--custom-blue);
}

.btn-primary:hover {
    background-color: var(--custom-blue-hover);
    border-color: var(--custom-blue-hover);
}

.text-danger {
    color: var(--custom-red) !important;
}

/* Adicione ao seu arquivo CSS personalizado */
.price.h3 {
    font-size: 1.75rem;
    /* Tamanho padrão do h3 no Bootstrap 5 */
    /* Ajuste este valor conforme necessário */
    /* Por exemplo, para um tamanho um pouco menor: */
    font-size: 1.5rem;
    /* Ou para um tamanho de h4: */
    /* font-size: 1.5rem; */
    /* Ou para um tamanho fixo em pixels: */
    /* font-size: 24px; */
}

/* Se quiser ajustar também a versão maior em telas maiores */
@media (min-width: 992px) {

    /* Exemplo para telas médias e grandes */
    .price.h3 {
        font-size: 1.6rem;
        /* Um pouco menor que o padrão h3 em desktops */
    }
}

.contact img {
    max-width: 100%;
    /* Garante que a imagem não ultrapasse sua coluna */
    height: auto;
    /* Mantém a proporção da imagem */
    display: block;
    /* Remove espaço extra abaixo da imagem */
}

.h6-equivalent {
    font-size: 0.95rem;
    /* Tamanho exato solicitado */
    /* Você também pode usar valores 'rem' para melhor responsividade, por exemplo: 0.875rem (que é o padrão para 14px se a base for 16px) */
    line-height: 1.5;
    /* Garante bom espaçamento de linha */
    margin-bottom: 0.5rem;
    /* Um pouco de espaço abaixo, ajustável */
}

/* Para o texto de condições */
.small-text-bold {
    font-size: 0.75rem;
    /* Tamanho exato solicitado */
    font-weight: bold;
    /* Deixa o texto em negrito */
    line-height: 1.3;
    /* Ajusta o espaçamento de linha */
    margin-top: 1rem;
    /* Margem superior para separar do conteúdo acima */
    color: #ff4800;
    /* Opcional: cor cinza para texto menor */
}

/* ==================================== */
/* Correções para Carousel de Cards     */
/* ==================================== */

.carousel-plans .carousel-inner {
    padding-top: 2rem;
    /* Mantém o espaço interno no topo para o selo "Mais Popular" */
    /* NOVO: Adiciona espaço nas laterais para os botões de navegação */
    padding-left: 5%;
    /* Ajuste a porcentagem se precisar de mais ou menos espaço lateral */
    padding-right: 5%;
    /* Ajuste a porcentagem se precisar de mais ou menos espaço lateral */
}

/* Garante que o card em destaque ainda permita o 'overflow' do seu pseudo-elemento */
.plan-card.featured {
    overflow: visible;
    position: relative;
}

/* Ajustes para os controles do carousel dentro da seção de planos */
.carousel-plans .carousel-control-prev,
.carousel-plans .carousel-control-next {
    width: 3%;
    /* ANTES: 5%. Reduz a largura dos botões para serem mais discretos */
    opacity: 0.7;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    transition: opacity 0.3s ease;
    align-items: center;
    /* Garante alinhamento vertical */

    /* NOVO: Remove o padding-top para não desalinhá-los com o .carousel-inner */
    padding-top: 0;

    /* NOVO: Ajusta a posição vertical para que fiquem no meio do conteúdo do card */
    /* Isso é um ajuste fino. Você pode precisar ajustar a porcentagem ou usar 'transform: translateY()' */
    top: 50%;
    /* Tenta centralizar verticalmente */
    transform: translateY(-50%);
    /* Ajusta 50% para cima para centralização perfeita */
    height: 80px;
    /* Define uma altura fixa para os botões */
}

.carousel-plans .carousel-control-prev:hover,
.carousel-plans .carousel-plans .carousel-control-next:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

.carousel-plans .carousel-control-prev-icon,
.carousel-plans .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
}

/* Garante que o carousel se ajuste bem ao conteúdo */
.carousel-plans {
    padding-bottom: 20px;
}

/* Estilo para garantir que cards dentro do carousel fiquem com altura consistente */
.carousel-item .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    /* Garante que os cards estiquem para ter a mesma altura */
}

.carousel-item .row .col-lg-4 {
    display: flex;
    flex-direction: column;
    /* Para o card preencher a altura da coluna */
}

.carousel-item .row .col-lg-4 .card {
    width: 100%;
    height: 100%;
    /* Garante que o card ocupe 100% da altura da coluna */
}

/* ==================================== */
/* Logo Personalizado                   */
/* ==================================== */
.navbar-brand img {
    height: 80px;
    /* Tamanho maior para desktop */
    width: auto;
    transition: height 0.3s ease;
}

@media (max-width: 991.98px) {
    .navbar-brand img {
        height: 50px;
        /* Tamanho reduzido para mobile */
    }
}

/* ================================================= */
/* FIX: Menu Flutuante Alinhado à Direita (Estilo Esboço) */
/* ================================================= */

/* 1. Garante que o menu se posicione em relação à barra de navegação */
.navbar .container {
    position: relative;
}

/* 2. Transforma o menu em um bloco flutuante no canto direito */
.navbar-collapse {
    position: absolute;
    /* Sai do fluxo da página (não empurra o banner) */
    top: 100%;
    /* Começa logo abaixo do header */
    right: 0;
    /* Cola na direita */
    width: 260px;
    /* Largura fixa para ficar elegante */
    background-color: #ffffff;
    padding: 15px;
    border-radius: 0 0 0 10px;
    /* Arredonda apenas o canto inferior esquerdo */
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
    /* Sombra para destacar do fundo */
    z-index: 9999;
    /* Garante que fique ACIMA do banner/fotos */
}

/* 3. Alinha todo o conteúdo da lista para a direita */
.navbar-nav {
    align-items: flex-end;
    /* Força os itens (li) para a direita no Flexbox */
    width: 100%;
}

/* 4. Alinha o texto dos links e os ícones */
.navbar-nav .nav-link {
    text-align: right;
    /* Texto para a direita */
    display: flex;
    justify-content: flex-end;
    /* Joga o conteúdo (texto + ícone) para o final */
    align-items: center;
    width: 100%;
    padding-right: 0;
    /* Remove padding extra da direita para alinhar perfeito */
}

/* 5. Ajuste específico para o Dropdown de Serviços ficar bonito */
.dropdown-menu {
    text-align: right;
    /* Texto do submenu à direita */
    right: 0;
    /* Cola na direita */
    left: auto !important;
    /* Impede que vá para a esquerda */
    border: none;
    background-color: #f8f9fa;
    /* Um cinza bem leve para diferenciar */
}

.dropdown-item {
    display: flex;
    justify-content: flex-end;
    /* Alinha itens do submenu à direita */
    align-items: center;
}

/* Mantém o texto do menu visível (ajuste anterior) */
.navbar-nav .nav-item .nav-link .menu-text {
    display: inline-block !important;
}

/* Ajuste das linhas divisórias (opcional, mantendo do código anterior para elegância) */
.navbar-nav .nav-item {
    margin-bottom: 5px;
    border-bottom: 1px solid #f0f0f0;
}

.navbar-nav .nav-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}