/* ==================================================
ESTILOS GERAIS DA PÁGINA (LANDING PAGE)
==================================================
*/

/* --- Configuração das Seções --- */
/* Define todas as seções principais para ocuparem
   a altura total da tela (Viewport Height) */

/*Fundo Interativo*/


body {
    background: radial-gradient(circle at center, #fff, #eaedf8);
    transition: 0.1s ease;
}

#home {
    background: radial-gradient(circle at -10% 50%, #977dff, transparent 50%),
        radial-gradient(circle at 110% 50%, #00033d, transparent 50%),
        radial-gradient(circle at 50% -10%, #EC4899, transparent 60%),
        linear-gradient(135deg, #f8fbff 0%, #e9f0ff 100%);
    background-attachment: fixed;
    background-size: 200% 200%;
    animation: gradientMove 8s ease-in-out infinite alternate;
}

/* Animação suave do fundo */
@keyframes gradientMove {
    0% {
        background-position: 20% 20%, 80% 30%, 50% 80%, 0% 0%;
    }

    50% {
        background-position: 25% 25%, 75% 35%, 55% 85%, 50% 50%;
    }

    100% {
        background-position: 30% 30%, 70% 40%, 60% 90%, 100% 100%;
    }
}

#home,
#precos,
#sobre,
#contato,
#politica {
    /* Nota: Usar 100vh pode ser complicado em mobile 
       devido às barras do navegador. Considere `min-height: 100vh` 
       ou uma altura diferente se notar problemas.
    */
    height: 100vh;
}

#sobre {
    background-image: url(/img/laptop-sem-fundo.png);
    background-repeat: no-repeat;
    background-size: 150vh;
    background-position: left center;
}

.blur-card {
    background: rgba(151, 125, 255, 0.3);
    /* leve transparência */
    backdrop-filter: blur(12px);
    /* desfoque REAL */
    -webkit-backdrop-filter: blur(12px);
    /* suporte ao Safari */
    padding: 25px;
    border-radius: 16px;
    border: 0px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

@media  (max-width: 1100px) {
    #sobre {
        background-image: url(/img/laptop-sem-fundo.png);
        background-repeat: no-repeat;
        background-size: 120vh;
        background-position: 90% 50%;
    }
}


#precos {
    background-color: #977dff;
}


/* --- Seção Home --- */
#home img {
    border-radius: 10px;
    max-width: 800px;

}

#features {
    height: auto;
}

.card {
    border-width: 0;
}

section {
    overflow: hidden;
    /* Evita barras de rolagem indesejadas */
}

/* --- Placeholders (Wireframe) --- */
/* Estilo genérico para as caixas cinzas de marcação */
.placeholder-box {
    background-color: #e0e0e0;
    border-radius: 8px;
}

.placeholder-btn {
    width: 200px;
    height: 45px;
    border-radius: 50px;
}

/* --- Seção 'Sobre' (Imagens Sobrepostas) --- */
.overlap-container {
    position: relative;
    min-height: 250px;
}

.overlap-img-main {
    width: 90%;
    height: 250px;
    position: relative;
    z-index: 1;
}

.overlap-img-sub {
    width: 150px;
    height: 220px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    /* Fica por cima da imagem principal */
    border: 5px solid white;
}

#sobre img {
    height: 350px;
    border-radius: 10px;
}

/* --- Preços --- */
#precos .card {
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 15px;
    border-color: #977dff;
    max-width: 500px;
    height: auto;
    margin: 0 auto;

}

#precos .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

}

#precos .card-price {
    font-size: 2rem;
    font-weight: bold;
}

#precos {
    color: #f8fbff !important;
}

/* --- Contato --- */

#contato form {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* --- Rodapé (Footer) --- */
.footer {
    background-color: #00033d;
}

.footer-placeholder-lines {
    width: 150px;
}

.footer-placeholder-lines .placeholder-box {
    height: 8px;
    margin-bottom: 8px;
}

.social-icons a svg {
    transition: transform 0.2s ease;
}

.social-icons a:hover svg {
    transform: scale(1.15);
}

.footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer a:hover {
    color: #977dff !important;
}

/* --- Navbar (Menu) --- */
/* Este é o estilo aplicado pelo JS (Script 1) */
nav.scrolled {
    background-color: #00033d !important;
    transition: background-color 0.3s ease;
    color: white !important;
}

.navbar {
    background-color: #00033d !important;
}

.navbar a {
    color: #fff !important;

}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Este é o estilo aplicado pelo JS (Script 2) */
li.active {
    font-weight: bold;
}

/* ==================================================
ESTILOS DO MODAL DE LOGIN (FLUTUANTE)
==================================================
*/

/* --- Container (Fundo escuro) --- */
.login-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;

    /* Configuração inicial para a transição de fade */
    visibility: hidden;
    /* Oculta o modal por padrão */
    opacity: 0;
    /* Começa transparente */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Classe 'show' (adicionada pelo JS) torna o modal visível */
.login-container.show {
    visibility: visible;
    opacity: 1;
}


/* --- Box do formulário (Card) --- */
.login-container .box {
    position: relative;
    width: 350px;
    border-radius: 20px;
    overflow: hidden;
    /* Essencial para o efeito da borda */
}

/* --- Efeito de Borda Giratória --- */
/* Pseudoelemento que cria o gradiente cônico */
.login-container .box::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(transparent, transparent, #03f);
    /* Aplica a animação 'rotating' */
    animation: rotating 4s linear infinite;
    z-index: 1;
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Pseudoelemento que cria o "fundo" da caixa,
   escondendo parte da borda giratória */
.login-container .box::after {
    content: "";
    position: absolute;
    inset: 4px;
    /* "Encolhe" 4px de todos os lados */
    background-color: #00033d;
    border-radius: 15px;
    border: 0 solid #25252b;
    z-index: 2;
}

/* --- Conteúdo do Formulário (Inputs, etc.) --- */
.login-container .form-content {
    position: relative;
    z-index: 3;
    /* Fica acima da borda e do fundo */
    padding: 2rem;
    color: #fff;
}

.login-container .form-content .form-control {
    background-color: #eaedf8;
    color: #fff;
}

.login-container .form-content .form-control:focus {
    border-color: #03f;
    box-shadow: 0 0 10px #03f;
}


.login-container .form-content .btn-submit {
    background-color: #03f;
    border: none;
    color: #fff;
    font-weight: bold;
    width: 100%;
}

.login-container .form-content .btn-submit:hover {
    background-color: #fff;
    color: #03f;
}

.login-container .form-content a {
    color: #03f;
    transition: color 0.3s ease;
}

.login-container .form-content a:hover {
    color: #03f;
}

/*Formulario entre em contato*/

.form-control:focus {
    border-color: #03f !important;
    box-shadow: 0 0 10px #03f !important;
    outline: none;
}


/* --- Botão de Fechar (X) --- */
.login-container .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    /* Garante que fique acima do conteúdo */
    transition: transform 0.2s ease;
}

.login-container .close-btn:hover {
    transform: scale(1.1);
}

/* imagens dos cards */
.img-hover {
    position: relative;
    width: auto;
    height: 200px;
    overflow: hidden;
    border-radius: 0.25rem;
}

.img-hover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
}

.img-hovered {
    opacity: 0;
}

.card {
    max-width: 280px;
    height: 200px;
    margin: 0 auto;
}

.card:hover .img-hovered {
    opacity: 1;
}

.card:hover .img-default {
    opacity: 0;
}

.more-text {
    display: none;
    text-decoration: none !important;
}

.read-more {
    text-decoration: none !important;
}

/* Correções gerais para versão mobile */
@media (max-width: 768px) {

    /* Remove o alinhamento vertical forçado */
    section.d-flex.align-items-center {
        display: block !important;
        text-align: center;
        padding: 60px 20px;
    }

    /* Garante que as imagens se ajustem à largura da tela */
    #home img,
    #sobre img {
        max-width: 100%;
        height: 250px;
    }

    /* Espaçamento entre os blocos */
    #home .d-flex,
    #sobre .row,
    #precos .row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }

    /* Evita que o conteúdo fique colado no topo */
    section {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    /* Corrige cards de features e preços para ocupar a tela toda */
    .col-md-3,
    .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
    }

    #home,
    #precos,
    #sobre,
    #contato {
        height: auto;
    }

    #home h2 {
        font-size: x-large !important;
        font-weight: bold;
        text-align: center;
        padding-top: 100px;
        padding-bottom: 50px;
        justify-content: center;
    }

}

/*Botão*/

.btn-dark {
    background-color: #00033d;
    border: 0;
}

.btn-dark:hover {
    background-color: #03f;
}

.btn-outline-dark {
    background-color: #EC4899;
    border: 0;
    color: white;
}

.btn-outline-dark:hover {
    background-color: #03f;
    border: 0;
}

.bi:hover {
    fill: #977dff;
}



#home h2 {
    font-size: 3rem;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

span {
    display: flex;
    opacity: 0;
    transform: translateY(100%);
    animation: reveal 0.6s ease forwards;
}

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

/*icone*/

.icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.15), rgba(0, 123, 255, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-wrapper i {
    font-size: 2rem;
}

.card:hover .icon-wrapper {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
}

.card:hover .card-title {
    color: #0d6efd;
}

/* Overlay do popup */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Caixa do popup */
.popup-content {
    background: #fff;
    width: 90%;
    max-width: 1000px;
    padding: 50px;
    border-radius: 20px;
    text-align: center;
    animation: fadeIn 0.3s ease;
    position: relative;
}

/* Botão de fechar */
.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
}

/* Grid dos membros */
.team-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(5, 1fr);
    /* 5 EM UMA LINHA NO DESKTOP */
    justify-items: center;
}

/* Cada membro */
.team-member img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Animação no hover */
.team-member img:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.team-grid a {
    text-decoration: none !important;
}


/* Animação de entrada do popup */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

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



/* ====== MOBILE (ATÉ 768px) ====== */
@media (max-width: 768px) {

    /* Grid com 2 por linha */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Popup responsivo com scroll interno */
    .popup-content {
        max-width: 90%;
        padding: 20px;
        max-height: 85vh;
        /* impede corte */
        overflow-y: auto;
        /* ativa scroll quando necessário */
    }

    /* Imagens menores */
    .team-member img {
        width: 90px;
        height: 90px;
    }
}

/* ====== MOBILE PEQUENO (ATÉ 480px) ====== */
@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr;
        /* 1 por linha */
    }
}