/* Base configs */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Fundamental para não quebrar largura */
}

img,
video {
    max-width: 100%;
    /* A imagem nunca será maior que a tela do celular */
    height: auto;
    /* Mantém a proporção sem achatar a foto */
    display: block;
}

body {

    font-family: 'Inter', sans-serif;
    background-color: rgb(247, 247, 247);
    width: 100%;
    overflow-x: hidden;
    /* Proíbe o scroll horizontal (a barra chata que vai pro lado) */
}

a {
    text-decoration: none;
    color: inherit;
}



/* Nav Config */
nav {
    margin: 10px 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    opacity: 0;
    animation: surge 1s ease-in-out 0.3s forwards;
    /* O Nav aparece em 0.8 segundos */

}

.Orçamento {
    background-color: rgb(0, 0, 0);
    padding: 15px;
    color: white;
    border-radius: 70px;
    transition: 0.3s ease;
    /* Suaviza a animação */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
}

.Orçamento:hover {
    transform: scale(1.2);
}

nav a:hover {
    text-decoration: underline;

}

/* Main Config */

main {
    margin: 0px 50px;
    max-height: 815px;
    height: 815px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    opacity: 0;
    /* Começa invisível para não dar 'piscada' */
    animation: surge 0.4s ease-out 1s forwards;
    /* O '0.5s' no final é o atraso. Ele espera o Nav começar para surgir. */
}

.Main1 {
    position: absolute;
    max-height: 400px;
    left: 300px;
    top: 200px;
    height: 400px;
    width: 500px;
}

.Main1 h6 {
    font-size: medium;
    color: rgb(0, 81, 255);
}

.Main1 h1 {
    margin-top: 15px;
    font-weight: bolder;
    font-size: 70px;
}

.Main1 span {
    color: rgb(0, 81, 255);
}

.Main1 p {
    font-size: small;
    margin-top: 15px;
    display: flex;
    text-align: center;
    opacity: 0;
    animation: surge 0.7s ease-out 1.25s forwards
}

.BoxButom {
    padding: 20px;
    margin-top: 18px;
}

/* Botao WhasAPP*/
.WhatsAppButom {
    background-color: rgb(78, 212, 16);
    color: white;
    padding: 20px;
    border-radius: 10px;
    transition: 0.3s ease;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: surge 0.7s ease-out 1.25s forwards
}

.WhatsAppButom a {
    text-decoration: none;
}

.WhatsAppButom:hover {
    background: rgb(62, 184, 5);
}

/* Botao Planos */

.PlanosButom {
    background-color: rgb(255, 255, 255);
    padding: 15px;
    border: solid 1px gray;
    border-radius: 10px;
    transition: 0.3s ease;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: surge 0.7s ease-out 1.25s forwards
}

.PlanosButom:hover {
    text-decoration: underline;
    background-color: rgb(231, 231, 231);
}

/* img do site main 2*/
.Main2 {
    position: relative;
    left: 350px;
    bottom: 30px;
    max-width: 500px;
    max-height: 300px;
    height: 300px;
    width: 500px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.Main2 img {
    max-width: 500px;
    max-height: 305px;
    height: 305px;
    width: 500px;
    border-radius: 10px;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
    animation: flutuar 3s ease-in-out infinite;
    /* 3s é o tempo; ease-in-out deixa o movimento suave; infinite faz não parar nunca */
}

/* Section Configs*/

section {
    background-color: rgb(243, 243, 243);
}

.PlanosSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100vw;
    max-height: 100vh;
    height: 970px;
    position: relative;
}

.TitlteSectionPlan {

    text-align: center;
    position: absolute;
    top: 70px;
}

.TitlteSectionPlan h2 {
    font-size: 30px;
    font-weight: bolder;
}

.TitlteSectionPlan p {
    font-size: 15px;
}

.TitlteSectionPlan span {
    color: rgb(0, 81, 255);
    font-weight: bolder;
}

/* Caixas dos Planos */

.PlansBoxes {
    display: flex;
    flex-direction: row;
    height: 500px;
    width: 1200px;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
}


.WeblanceStandard {
    opacity: 0;
    transform: translateX(-100px);
    /* Começa bem à esquerda */
    transition: 0.3s ease;
    /* Animação suave */
    max-height: 500px;
    height: 500px;
    width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border: solid 1px rgb(209, 209, 209);
    border-radius: 40px;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
}



.WeblanceStandard.visivel {
    opacity: 1;
    transform: translateX(0);
    /* Volta para o lugar dele */
}


.WeblancePlatinum {
    max-height: 500px;
    height: 500px;
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border: solid 2px rgb(0, 81, 255);
    border-radius: 40px;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    opacity: 0;
    transform: translateX(-100px);
    /* Começa bem à esquerda */
}

.WeblancePlatinum.visivel {
    opacity: 1;
    transform: translateX(0);
    /* Volta para o lugar dele */
}

.Thebestplan {
    color: white;
    background-color: rgb(0, 81, 255);
    text-align: center;
    width: 200px;
    position: absolute;
    bottom: 490px;
    left: 91px;
    font-size: 20px;
    font-weight: bolder;
    border-radius: 10px;
}




.WeblanceBlack {
    max-height: 500px;
    height: 500px;
    width: 550px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border: solid 1px rgb(209, 209, 209);
    border-radius: 40px;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease;
    opacity: 0;
    transform: translateX(-100px);
    /* Começa bem à esquerda */
}

.WeblanceBlack.visivel {
    opacity: 1;
    transform: translateX(0);
}

.TextPlan {
    text-align: center;
    margin-top: 25px;
}

.TextPlan h3 {
    font-size: 20px;
    font-weight: bolder;
}

.TextPlan p {
    color: rgb(0, 81, 255);
    font-weight: bolder;
}


.Prices h3 {
    font-size: 20px;
    font-weight: 800;
    margin-left: 10px;
    margin-top: 10px;
}

.Prices p {
    font-size: 15px;
    font-weight: lighter;
    color: rgb(145, 144, 144);
    margin-left: 10px;
}

.listaplans {
    list-style: none;
    margin-left: 10px;
    margin-top: 10px;
}

.listaplans p {
    text-align: center;
}

.listaplans li {
    font-weight: 550;
    font-size: 15px;
}

.listaplans p {
    font-size: 20px;
    font-weight: bolder;
}

.listaplans span {
    text-align: center;
    font-size: 13px;
    font-weight: bolder;
    margin-left: 20px;
}

.BtnAssine {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.BtnAssine a {
    padding: 20px 70px;
    border: solid 1px rgb(209, 209, 209);
    border-radius: 20px;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
    background-color: rgb(80, 194, 28);
    color: white;
    cursor: pointer;
    transition: 0.3s ease;
    font-size: 13px;
    font-weight: bolder;
}

/* Plans Animation */

.WeblanceStandard:hover {
    transform: scale(1.1);
}

.WeblancePlatinum:hover {
    transform: scale(1.1);
}

.WeblanceBlack:hover {
    transform: scale(1.1);
}

.BtnAssine a:hover {
    background-color: rgb(0, 81, 255);
}

/* Duvidas Section */

#contatos {
    background-color: rgb(247, 247, 247);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 300px;
    text-align: center;
    margin-top: 40px;
}

#contatos h2 {
    font-weight: bolder;
    font-size: 25px;
}

#contatos p {
    margin-top: 5px;
    font-size: 15px;
}

.TitlteSectionContatos span {
    color: rgb(0, 81, 255);
    font-size: 17px;
    font-weight: bolder;
}

.MainContatos {
    height: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.Duvidas {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.Duvidas span {
    color: rgb(196, 195, 195);
    font-size: 16px;
    font-weight: bolder;
}

.ImgDuvidas {
    max-width: 50px;
    max-height: 50px;
    height: 50px;
    width: 50px;
    transition: 0.4s ease;
}

.ImgDuvidas:hover {
    transform: scale(1.2);
}

footer {
    border-top: solid 1px rgb(240, 239, 239);
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

footer p {
    margin-top: 10px;
    font-size: 10px;
    font-weight: bolder;
    font-style: italic;
    text-decoration: overline;
}

footer span {
    color: rgb(206, 206, 206);
    margin-top: 25px;
    font-size: 20px;
    font-weight: bolder;
    letter-spacing: 10px;
}

/* Animation */

@keyframes surge {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes flutuar {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
        /* Sobe 15 pixels */
    }

    100% {
        transform: translateY(0);
    }
}

/* =======================================================
   CORREÇÃO FINAL: DESTRAVANDO AS SEÇÕES (MOBILE)
   ======================================================= */

@media (max-width: 900px) {

    /* 1. DESTRAVA TOTAL DE ALTURAS */
    /* Isso impede que uma seção invada a outra */
    html,
    body {
        height: auto !important;
        overflow-x: hidden !important;
    }

    main,
    section,
    #planos,
    .PlanosSection,
    #contatos {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* Remove o 100vh e o 970px */
        position: relative !important;
        /* Muda de static para relative para aceitar o fluxo */
        display: block !important;
        padding: 60px 20px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* 2. ALINHAMENTO DO TOPO (MAIN) */
    .Main1,
    .Main2 {
        position: static !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .Main1 h1 br {
        display: none !important;
    }

    .Main1 p {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .Main2 {
        display: flex;
        max-width: 100vw;
        justify-content: center;
    }

    .BoxButom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
    }

    /* 3. CONSERTANDO A SEÇÃO DE PLANOS (A que está quebrando) */
    .TitlteSectionPlan {
        position: static !important;
        /* Tira do top: 70px */
        margin-bottom: 40px !important;
    }

    .PlansBoxes {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 50px !important;
        /* Espaço entre os cards */
        height: auto !important;
        width: 100% !important;
        position: static !important;
    }

    .WeblanceStandard,
    .WeblancePlatinum,
    .WeblanceBlack {
        position: relative !important;
        transform: none !important;
        /* Desativa o deslocamento do JS */
        opacity: 1 !important;
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
        /* Deixa o card crescer com o texto */
        min-height: 450px !important;
        margin: 0 auto !important;
        padding-bottom: 30px !important;
    }

    /* Ajuste do selo "Mais Vendido" para não sumir */
    .Thebestplan {
        position: absolute !important;
        top: -15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: auto !important;
    }

    /* 4. SEÇÃO DE CONTATOS (RODAPÉ) */
    #contatos {
        margin-top: 50px !important;
        border-top: 1px solid #eee !important;
    }

    .MainContatos,
    .Duvidas {
        height: auto !important;
        max-width: 100vw;
        flex-direction: row !important;
        justify-content: center;
        gap: 25px !important;
    }

    .Duvidas span {
        display: none !important;
        /* Remove as setinhas que quebram o alinhamento */
    }
     
    footer {
        height: auto !important;
        padding: 40px 0 !important;
        position: static !important;
    }
}


/* =======================================================
   RESET TOTAL PARA 360PX (FORÇA BRUTA)
   ======================================================= */

@media (max-width: 400px) {
    /* 1. ELIMINANDO MARGENS DO CORPO */
    body, html {
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }



        /* =======================================================
   FIX DO NAV - FORÇA TOTAL 360PX
   ======================================================= */

nav {
    /* Reseta as margens absurdas de 200px */
    margin: 0 !important; 
    padding: 15px 10px !important;
    
    /* Força o alinhamento central empilhado */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Destrava a altura */
    height: auto !important;
    width: 100% !important;
    position: static !important;
    gap: 15px !important;
}

nav h2 {
    font-size: 24px !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

.Orçamento {
    /* Ajusta o botão de orçamento para não sumir */
    position: static !important;
    width: fit-content !important;
    padding: 10px 20px !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    display: block !important;
}

/* Remove qualquer animação que mova o nav para fora do eixo */
nav {
    transform: none !important;
    opacity: 1 !important;
}

    /* 2. RESET DE SEÇÕES (ELIMINA O ESMAGAMENTO LATERAL) */
    main, section, #planos, #contatos, .PlanosSection {
        width: 100% !important;
        margin: 0 !important;
        padding: 40px 10px !important; /* Padding mínimo para não colar na borda */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        min-height: auto !important;
        position: static !important;
    }

    /* 3. AJUSTE DE TEXTO (TOPO) */
    .Main1 {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 20px !important;
    }

    .Main1 h1 {
        font-size: 26px !important; /* Diminuindo para não quebrar feio */
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }

    .Main1 h1 br, .Main1 p br {
        display: none !important; /* Mata quebras manuais do HTML */
    }

    .BoxButom {
        width: 100% !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    .WhatsAppButom, .PlanosButom {
        width: 50% !important; /* Botões largos e fáceis de clicar */
        margin: 0 auto !important;
        padding: 15px 5px !important;
        display: block !important;
    }

    /* 4. IMAGEM DO SITE (MAIS COMPACTA) */
    .Main2 {
        width: 100% !important;
        margin: 20px 0 !important;
    }

    .Main2 img {
        width: 95% !important;
        max-width: 300px !important; /* Evita que a imagem domine a tela toda */
        height: auto !important;
        margin: 0 auto !important;
    }

    /* 5. CARDS DE PLANOS (MÁXIMO APROVEITAMENTO) */
    .BtnAssine{
        height: 85%;
    }

   
    

    .PlansBoxes {
        width: 100% !important;
        gap: 35px !important;
        padding: 10px 0 !important;
    }

   /* 2. OS CARDS (O SEGREDO ESTÁ AQUI) */
    .WeblanceStandard, .WeblancePlatinum, .WeblanceBlack {
        width: 100% !important;
        max-width: 340px !important;
        /* Removemos a altura fixa de 500px */
        height: auto !important; 
        min-height: 560px !important; 
        
        /* Forçamos o conteúdo a se distribuir verticalmente */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important; 
        
        padding: 30px 15px 20px 15px !important; /* Aumentamos o padding inferior */
        margin: 0 auto !important;
        position: relative !important;
        overflow: visible !important; /* Garante que o selo apareça */
    }
    /* Ajuste da lista interna para 360px */
    .listaplans {
        margin: 15px 0 !important;
        padding: 0 !important;
        flex-grow: 1 !important; /* Faz a lista empurrar o botão para baixo */
    }

    .listaplans li {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        list-style: none !important;
    }

    /* 6. CONTATOS E ÍCONES */
    .TitlteSectionContatos h2 {
        font-size: 22px !important;
    }

    .Duvidas {
        flex-direction: row !important;
        gap: 20px !important;
    }

    .Duvidas span {
        display: none !important; /* Remove texto desnecessário no 360px */
    }

    .ImgDuvidas {
        width: 55px !important;
        height: 55px !important;
    }

    /* 7. FOOTER */
    footer span {
        font-size: 14px !important;
        letter-spacing: 3px !important;
    }

    footer p{
    font-size: 9px;


    }
}