/* Estilos Gerais */
* { padding: 0; margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
ul { list-style: none; }
a { text-decoration: none; }
button { cursor: pointer; border: none; outline: none; }
body { background-color: #000; }
body, button, input, textarea { font-family: Poppins, sans-serif; }
::-webkit-scrollbar { width: .5rem; }
::-webkit-scrollbar-thumb { background: #3C383B; transition: all .5s ease-in-out; }
::-webkit-scrollbar-thumb:hover { background: #222224; }
::-webkit-scrollbar-track { background: #f9f9f9; }
.container { max-width: 1080px; margin-left: auto; margin-right: auto; }
.section { padding: 6rem 0 0rem; max-width: 1200px; }
.grid { display: grid; gap: 1.5rem; }
.hidden { opacity: 0; filter: blur(5px); transform: translate(-100%); transition: all 1s; }
.show { opacity: 1; filter: blur(0); transform: translate(0); }
@media screen and (max-width: 992px) { .container { margin-left: 1.5rem; margin-right: 1.5rem; } }
@media screen and (max-width: 768px) { body { margin: 0 0 3rem; } .section { padding: 2rem 0 4rem; } .section-subtitle { margin-bottom: 3rem; } }
@media screen and (max-width: 350px) { .container { margin-left: 1rem; margin-right: 1rem; } }

/* Banner */
.banner { color: #fff; height: 100vh; background-color: #262626; }
.banner-texts { padding-top: 32vh; }
.banner-title { font-size: 3rem; color: #f2e432; font-weight: 600; }
.banner-subtitle { font-size: 2.5rem; font-weight: 400; width: 100%; }
.banner-container { position: relative; }
.img-header { position: absolute; top: 14rem; left: 40rem; opacity: .3; transition: .5s; max-width: 32rem; }
.img-header:hover { opacity: 1; transform: scale(1.1); }
h2 { max-width: 40ch; transform: scale(.94); animation: scale 3s forwards cubic-bezier(.5, 1, .89, 1); }
@keyframes scale { to { transform: scale(1); } }
span {
    cursor: default;
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
    margin-right: 0.5rem; /* <-- ADICIONE ESTA LINHA */
}
span:nth-child(1) { animation: fade-in .8s .1s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(2) { animation: fade-in .8s .2s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(3) { animation: fade-in .8s .3s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(4) { animation: fade-in .8s .4s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(5) { animation: fade-in .8s .5s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(6) { animation: fade-in .8s .6s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(7) { animation: fade-in .8s .7s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(8) { animation: fade-in .8s .8s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(9) { animation: fade-in .8s .9s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(10) { animation: fade-in .8s 1s forwards cubic-bezier(.11, 0, .5, 0); }
span:nth-child(11) { animation: fade-in .8s 1.1s forwards cubic-bezier(.11, 0, .5, 0); color: #f2e432; }
span:nth-child(12) { animation: fade-in .8s 1.2s forwards cubic-bezier(.11, 0, .5, 0); color: #f2e432; }
span:nth-child(13) { animation: fade-in .8s 1.3s forwards cubic-bezier(.11, 0, .5, 0); color: #f2e432; }
span:nth-child(14) { animation: fade-in .8s 1.4s forwards cubic-bezier(.11, 0, .5, 0); color: #f2e432; }
@keyframes fade-in { to { opacity: 1; filter: blur(0); } }
.button { margin-top: 2rem; display: inline-block; padding: .75rem 2.5rem; transition: all .3s; position: relative; overflow: hidden; z-index: 1; border-radius: .3rem; }
.button:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #f2e432; z-index: -2; }
.button:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-color: #cbbd0d; transition: all .3s; z-index: -1; }
.button:hover { color: #000; }
.button:hover:before { width: 100%; }
.button-link { font-size: 1.7rem; text-transform: uppercase; letter-spacing: .1rem; font-weight: 600; color: #fff; }
@media screen and (max-width: 1366px) { .banner-texts { padding-top: 25vh; } .img-header { max-width: 25rem; top: 9rem; left: 40rem; } }
@media screen and (max-width: 768px) { .img-header { display: none !important; } .banner-texts { padding-top: 2rem; } .banner-title { text-align: center; margin-bottom: 1.5rem; } .button { width: 100%; text-align: center; } }
@media screen and (max-width: 350px) { .img-header { display: none !important; } .banner-texts { padding-top: 0; } .banner-title { font-size: 2rem; color: #f2e432; font-weight: 800; text-align: center; } .banner-subtitle { font-size: 2rem; width: 100%; text-align: center; } span:nth-child(11), span:nth-child(12), span:nth-child(13), span:nth-child(14) { font-size: 2.3rem; font-weight: 800; } .button { width: 100%; justify-content: center; align-items: center; text-align: center; } }

/* Header e Navegação */
.header { width: 100%; position: fixed; top: 0; left: 0; z-index: 100; background-color: #3c383b; }
.nav { height: 4.5rem; display: flex; justify-content: space-between; align-items: center; column-gap: 1rem; font-weight: 600; }
.nav-logo img { margin-top: .2rem; width: 3.7rem; align-items: center; justify-content: center; }
.slogan { 
    color: #fff; 
    font-size: .7rem; 
    border-left: 1px solid #F2E432; 
    padding-left: 1.4rem; 
    margin-right: auto; /* Empurra o menu para a direita de forma flexível */
}
.nav-toggle { color: #fff; font-weight: 300; }
.nav-list { display: flex; column-gap: 2rem; }
.nav-link { display: flex; flex-direction: column; align-items: center; font-size: .8rem; color: #fff; transition: .3s; text-transform: uppercase; white-space: nowrap; /* Impede a quebra de linha */ }
.contact { color: #ff5b00; }
.contact:hover { color: #fff; }
.nav-close, .nav-toggle, .nav-icon { display: none; }
.active-link, .nav-link:hover { color: #f2e432; }
.scroll-header { box-shadow: 0 -1px 4px #00000026; }
@media screen and (max-width: 768px) { .header { top: initial; bottom: 0; } .nav { height: 3rem; } .nav-logo img { width: 3rem; position: absolute; left: 1.3rem; bottom: .1rem; } .nav-menu { position: fixed; bottom: -100%; left: 0; width: 100%; background-color: #3c383b; padding: 2rem 1.5rem 4rem; box-shadow: 0 -1px 4px #00000026; border-radius: 1.5rem 1.5rem 0 0; transition: .3s; } .slogan { display: none; } .show-menu { bottom: 0; } .nav-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .nav-icon { font-size: 1.2rem; padding: .5rem; } .nav-close { position: absolute; right: 1.3rem; bottom: .5rem; font-size: 1.5rem; cursor: pointer; color: #fff; } .nav-close:hover { color: #ff5b00; } .nav-toggle { font-size: 1.5rem; cursor: pointer; margin-top: .3rem; } .nav-icon, .nav-close, .nav-toggle { display: block; } }
@media screen and (max-width: 350px) { .nav-menu { padding: 2rem .25rem 4rem; } .nav-list { column-gap: 0; } }

/* Esconde o logo do banner na versão desktop por padrão */
.banner-logo-mobile {
    display: none;
}

/* Seção de Serviços */
#services { background-color: #f2e432; padding: 5rem; }
.services-title { text-align: center; font-size: 2rem; padding-bottom: 3rem; text-transform: uppercase; font-weight: 800; }
.grid-services { display: grid; grid-template-columns: repeat(4, 3fr); grid-gap: 1rem; position: relative; width: 100%; }
.card-services { width: 100%; background-color: #000; padding: 1.8rem 1rem 1rem; border-radius: .2rem; border: 1px solid #3C383B; cursor: default; position: relative; }
.icon { position: relative; display: table; padding: 8px; color: #fff; font-size: 2.2rem; }
h4 { position: relative; margin: 12px 0 4px; font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 2; color: #f2e432; }
p { position: relative; margin: 0; font-weight: 300; font-size: .8rem; line-height: 1.7; color: #fff; }
@media screen and (max-width: 992px) { .grid-services { column-gap: 3rem; } }
@media screen and (max-width: 768px) { .grid-services { margin: 0; padding: 0; width: 100%; max-width: 100%; grid-template-columns: 100%; row-gap: 2rem; } .card-services { max-width: 100%; padding: .8rem; } }

/* ==================== PLANOS ==================== */
.plans-section {
    padding-top: 4rem;
    padding-bottom: 6rem;
}

/* Garante que o título "Nossos Planos" seja branco */
.plans-section .services-title {
    color: #fff;
}

.plans-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: center; 
}

.plan-card {
    background-color: #111;
    color: #fff;
    border: 2px solid #f2e432;
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s;
}

.plan-card:hover {
    transform: translateY(-10px);
}

.plan-card-recommended {
    background-color: #f2e432;
    color: #000;
    transform: scale(1.05); 
    position: relative;
    border: none;
}

.plan-card-recommended:hover {
    transform: scale(1.08) translateY(-10px);
}

.best-choice-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: #c09d00;
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transform: rotate(10deg);
}

.plan-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff; /* Garante que o título do card seja branco */
    margin-bottom: 0.5rem;
}

.plan-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: #ccc;
}

.plan-card-recommended .plan-subtitle {
    color: #333;
}

.plan-features {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.plan-features .bx-check {
    color: #28a745;
    font-size: 1.2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.plan-card-recommended .plan-features .bx-check {
    color: #008000;
}

.plan-price {
    font-size: 2.2rem;
    font-weight: 700;
}

/* Responsividade para a seção de planos */
@media screen and (max-width: 992px) {
    .plans-container {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .plan-card-recommended {
        transform: scale(1);
    }
    .plan-card-recommended:hover {
        transform: translateY(-10px);
    }
}


/* Seção Sobre */
#about { font-family: 'Josefin Sans', sans-serif; color: #fff; margin-top: 2.5rem; }
.about-container { max-width: 100%; }
.about-subtitle { font-size: 1.3rem; font-weight: lighter; text-transform: uppercase; }
.about-title { font-size: 2rem; padding: 5px 0; text-transform: uppercase; }
.row { padding: 4rem 0; max-width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.5rem; cursor: default; }
.seperator { margin-bottom: 1.9rem; width: 1.8rem; height: .2rem; background: #F2E432; border: none; transition: .4s; margin: .6rem 0; }
.title { text-align: center; }
.title .row { padding: 50px 0 0; }
.item-in { height: 14rem; background: #111; padding: 2.5rem; position: relative; border-radius: .3rem; border: 1px solid #F2E432; }
.item, .card-title-about { font-size: 1.2rem; margin-top: .7rem; letter-spacing: 2px; text-transform: uppercase; }
.item, .card-text { font-size: 1rem; margin-top: 1.5rem; font-weight: 200; }
@media screen and (max-width: 992px) { .row { column-gap: 3rem; } .item-in { height: 18rem; } }
@media screen and (max-width: 768px) { .row { grid-template-columns: 1fr; row-gap: 2rem; } .item-in { height: auto; } }

/* Estilos Personalizados do Carrossel (Swiper) */
.briefs { 
    margin-top: -2rem !important; 
    background-color: #111;
    padding: 4rem 0; /* Usa padding vertical e remove o horizontal */
}
.briefs-title { text-align: center; font-size: 2rem; padding-bottom: .2rem; text-transform: uppercase; font-weight: 600; color: #fff; }
.briefs-subtitle { text-align: center; font-size: 1rem; padding-bottom: 3rem; text-transform: uppercase; font-weight: 400; color: #fff; }
.swiper { width: 100%; padding-bottom: 3rem; max-width: 1080px; margin: 0 auto; } /* Adiciona max-width e centraliza o carrossel */
.swiper-card img { width: 100%; height: 100%; filter: grayscale(0); }
.swiper-card img:hover { filter: grayscale(0); /* Mantém sem efeito no hover */ }
.swiper-card { margin-top: 1rem; border-radius: 5rem; }
.swiper-card:hover { transform: scale(1.05); transition: .4s ease-in-out; background-color: #fff; }
.swiper-pagination-bullet { padding: .3rem; background: #fff; }
.swiper-pagination-bullet-active { background: #F2E432; }
.swiper-button-prev, .swiper-button-next { 
    color: #f2e432; 
    top: 45%; /* Ajusta a altura vertical */
}
.swiper-button-prev { left: -10px; } /* Move a seta esquerda para fora */ .swiper-button-next { right: -10px; } /* Move a seta direita para fora */
@media screen and (max-width: 992px) { .cards { column-gap: 3rem; } }
@media screen and (max-width: 768px) { .swiper { width: 100%; } .swiper-slide, .swiper-slide img { width: 100% !important; height: 100% !important; } .swiper-button-prev, .swiper-button-next { display: none; } .swiper-pagination-bullet { padding: .2rem; background: #FFF; } .swiper-pagination-bullet-active { padding: .2rem; background: #F2E432; } .swiper-pagination-bullets { top: 96% !important; } .swiper-card { margin-top: 1rem; border-radius: 7rem; background-color: #fff; } .swiper-card img { width: 50%; height: 50%; } .swiper-card:hover { transform: scale(1); } .swiper-card:nth-child(5) { background-color: #f2e432; } .swiper-card:nth-child(5):hover { transform: scale(1); } }

/* Formulário de Contato */
.cont-title-section { text-align: center; margin-bottom: 3rem; font-size: 2rem; text-transform: uppercase; color: #fff; }
.form-container { 
    grid-template-columns: 1fr; /* Alterado para uma única coluna */
    justify-content: center; 
    padding-bottom: 3rem; 
    gap: 0; /* Remove o espaçamento entre colunas do grid */
    color: #fff; 
}
.form-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-title { text-align: center; font-size: 1.2rem; font-weight: 500; margin-bottom: 1.5rem; }
.form-info { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* Cria 3 colunas lado a lado */
    gap: 1.5rem; /* Espaçamento entre os cards */
    justify-content: center; 
}
.contact-form { width: 20rem; }
.contact-card { background-color: #111; border: 1px solid #F2E432; padding: 1rem; border-radius: .2rem; text-align: center; }
.contact-icon { font-size: 1.7rem; color: #fff; margin-bottom: .25rem; }
.contact-card-title { font-weight: 2.5rem; color: #f2e432; }
.contact-card-data { font-size: .9rem; display: block; margin-bottom: .75rem; }
.contact-button { color: #f2e432; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; column-gap: .25rem; }
.contact-button-icon { font-size: 1rem; transition: .4s ease-in-out; }
.contact-button:hover, .contact-button-icon { transform: translate(.25rem); color: #fff; }
.contact-form { width: 360px; }
.contact-form-div { position: relative; margin-bottom: 2rem; height: 3rem; }
.contact-form-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #F2E432; background: none; color: #fff; outline: none; border-radius: .2rem; padding: 1.5rem; z-index: 1; }
.contact-form-tag { position: absolute; top: -1rem; left: 1.25rem; padding: .25rem; background-color: #000; z-index: 10; }
.contact-form-area { height: 11rem; }
.contact-form-area textarea { resize: none; }
.button-flex { display: inline-flex; align-items: center; }
.button-form { display: inline-block; background-color: #111; color: #fff; padding: 1.5rem; border-radius: .2rem; transition: .3s; }
.button-form:hover { background-color: #f2e432; }
.button-icon { margin-left: .5rem; }
@media screen and (max-width: 992px) { .form-container { column-gap: 3rem; } }
@media screen and (max-width: 768px) { .form-container { grid-template-columns: 1fr; row-gap: 3rem; } .button-form { width: 100%; } .contact-info { justify-content: center; } .contact-form { margin: 0 auto; } }
@media screen and (max-width: 576px) { 
    .form-info { grid-template-columns: 1fr; } /* Faz os cards voltarem a ficar um embaixo do outro em telas pequenas */
    .contact-info { grid-template-columns: 1fr; } 
    .button-form, .contact-form { width: 100%; } 
}
@media screen and (max-width: 320px) { .button-form { width: 100%; } .contact-form { width: 80%; } }

/* Footer */
#footer { color: #fff; font-family: "Josefin sans", sans serif; background-color: #262626; }
#footer p { font-weight: 200; }
.columns { display: grid; grid-template-columns: repeat(3, 4fr); grid-gap: 2rem; }
.column { width: 100%; padding: 2rem; }
.logo img { margin-left: 3.5rem; padding: .3rem; width: 50%; }
.logo p { font-size: .8rem; padding: 1rem 0; }
.services-footer p { padding: .2rem 0; }
.services-footer h3 { margin-bottom: .5rem; }
.social-media { display: flex; }
.social-media a { padding: 0 .5rem; font-size: 1.5rem; color: #fff; }
.social-media i:hover { transition: .4s ease; color: #f2e432; }
.pay { display: flex; text-align: center; }
.pay ul { margin: 0 40%; text-align: center; display: flex; }
.pay li { padding: .5rem; text-align: center; font-size: 1.5rem; color: #f2e432; }
.copy { text-align: center; padding: .5rem; }
@media screen and (max-width: 992px) { .columns { column-gap: 3rem; } }
@media screen and (max-width: 768px) { .columns { text-align: center; grid-template-columns: 1fr; row-gap: 1rem; } .logo img { margin-left: 0rem; padding: .5rem; width: 50%; } .pay ul { margin: 0 20%; } .social-media { margin: 0 35%; } .card-briefs { margin-top: 3rem; } }


/* ==================== AJUSTES RESPONSIVOS FINAIS PARA O SITE ==================== */

/* Ajustes para telas menores que 768px (celulares e tablets) */
@media screen and (max-width: 768px) {

    /* --- GERAL DO BANNER --- */
    .banner-texts {
        padding-top: 4rem; /* Dá um pouco mais de espaço no topo */
    }

    /* --- ESCONDE O LOGO DA BARRA DE NAVEGAÇÃO --- */
    .nav-logo {
        display: none !important;
    }

    /* --- CONTAINER DO TÍTULO E LOGO --- */
    .banner-title-container {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 2.5rem; /* Aumenta o espaço entre o título e o subtítulo */
    }
    .banner-logo-mobile {
        display: block;
        width: 90px; /* Mantém o logo no tamanho maior que você pediu */
        height: auto;
        margin-right: 0.8rem;
    }
    .banner-title {
        font-size: 2.2rem;
        text-align: left;
        line-height: 1.2;
        margin-bottom: 0;
    }

    /* --- SUBTÍTULO GRANDE E IMPACTANTE --- */
    .banner-subtitle {
        font-size: 2.8rem;
        line-height: 1.4;
        font-weight: 500;
        text-align: center;
        width: 100%;
    }

    /* --- RESET DOS SPANS DO SUBTÍTULO PARA PERMITIR A FORMATAÇÃO --- */
    .banner-subtitle span:not(.highlight) {
        display: inline;
        margin-right: 0;
        opacity: 1;
        filter: none;
        animation: none;
        color: #fff;
    }
    
    /* Garante o destaque na palavra "hoje!" */
    .banner-subtitle span.highlight {
        display: inline;
        opacity: 1;
        filter: none;
        animation: none;
        color: #f2e432;
        font-weight: 600;
    }
}

/* Ajustes finos para telas MUITO pequenas */
@media screen and (max-width: 350px) {
    .banner-title {
        font-size: 1.8rem; 
    }
    .banner-logo-mobile {
        width: 60px; /* Reduz um pouco o logo em telas minúsculas */
    }
    .banner-subtitle {
        font-size: 2.2rem;
    }
}