/* --- Reset para Responsividade --- */
body {
    overflow-x: hidden; /* Impede o scroll horizontal em todas as resoluções */
}

@media (min-width: 2400px) {
        .hero h1,
    .hero .btn-primary,
    .treatments h2,
    .treatments-content,
    .testimonials h2,
    .testimonials-grid,
    .info-content,
    .info-content2,
    .more-info h2,
    .more-info p,
    .filter-buttons {
        margin-left: auto; /* Centraliza o conteúdo */
        margin-right: auto; /* Centraliza o conteúdo */
        text-align: center;
    }

    .hero .btn-primary {
        display: table; /* Garante a centralização com margin: auto */
    }


    .final-cta-v2 h2 {
        margin-left: -2% !important;
        margin-right: -10% !important;
    }

    .final-cta-v2 a {
        margin-left: 37% !important;
        margin-right: -29% !important;
    }

    .footer {
        margin-left: 14% !important;
    }

    .header .logo {
        margin-left: -30%;
        margin-right: 80%;
    }
}

@media (max-width: 1700px) {
            .header .logo {
            margin-left: -20%;
            margin-right: 50%;
        }

    .footer {
        margin-left: -2.5%;
    }
}

/* --- Estilos para Widescreen e Laptops Maiores (Ajustes finos) --- */
@media (max-width: 1600px) { /* Ajustado para um breakpoint maior */
    .header .container,
    .info-content,
    .info-content2,
    .testimonials-grid,
    .more-info .container,
    .booking .container {
        margin-left: auto;
        margin-right: auto;
    }

    .hero h1 {
        margin-right: 10%; /* Ajuste fino para telas um pouco menores */
    }

    .hero .btn-primary {
        margin-right: 10%; /* Ajuste fino para telas um pouco menores */
    }

    .info-text p, .info-text h2, .info-text2 p, .info-text2 h2, .info-text2 h3 {
        margin-left: 0;
    }

    .btn-light2 {
        left: 0;
        margin-left: 0;
    }

    .final-cta-v2 .container h2 {
        margin-left: 0;
    }

    .final-cta-v2::after {
        padding-bottom: 10px !important;
    }

    .final-cta-v2 .container a.btn-light2 {
        margin-left: 0;
    }

    .footer {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Estilos para Laptops (até 1440px) --- */
@media (max-width: 1440px) {
    /* Centraliza todos os containers e remove margens laterais desnecessárias */
    .hero h1,
    .hero .btn-primary,
    .treatments h2,
    .treatments-content,
    .testimonials h2,
    .testimonials-grid,
    .info-content,
    .info-content2,
    .more-info h2,
    .more-info p,
    .filter-buttons {
        margin-left: auto; /* Centraliza o conteúdo */
        margin-right: auto; /* Centraliza o conteúdo */
        text-align: center;
    }

    .hero .btn-primary {
        display: table; /* Garante a centralização com margin: auto */
    }


    .final-cta-v2 a {
        margin-left: 33% !important;
        margin-right: -29% !important;
    }

    .footer {
        margin-left: -14% !important;
    }

            .header .logo {
            margin-left: -10%;
            margin-right: 30%;
        }
}

/* --- Estilos para Laptops e Tablets (até 1024px) --- */
@media (max-width: 1024px) {
    /* --- Reset Geral para 1024px --- */
    .container,
    .header .container,
    section .container,
    .footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* --- Cabeçalho e Menu --- */
    .header .container {
        justify-content: space-between;
        gap: 15px;
    }
    .logo {
        margin-left: 0;
    }
    .nav-menu ul {
        gap: 0;
        font-size: 11px;
        margin-left: 0;
    }
    .nav-menu ul li {
        margin-left: 12px;
    }
    .nav-menu a.btn {
        padding: 8px 15px !important;
    }

    /* --- Seção Hero --- */
    .hero {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
    }
    .hero h1, .hero .btn-primary {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Seção Tratamentos --- */
    .treatments h2 {
        text-align: center;
    }
    .treatments-content {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .treatments-left-col, .treatments-images-container {
        flex-basis: 100%;
        max-width: 600px;
        margin-left: 0;
    }
    .treatments-image-large {
        width: 100%;
    }
    .treatments-images-small-row {
        width: 100%;
    }

    .treatments-cta .btn-light2 {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /* --- Seção "Quer saber mais?" e Botões de Filtro --- */
    .more-info h2, .more-info p, .filter-buttons {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- Botão da seção de informações --- */
    .info-section .btn-light2 {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /* --- Botão da seção de unidades --- */
    .unidades-section .btn-fale-conosco {
        margin-left: auto;
        margin-right: auto;
        display: table; /* Garante a centralização */
    }

    /* --- Seções de Informação (O que é Crioterapia, Quem Somos) --- */
    .info-content, .info-content2 {
        gap: 20px;
        align-items: center;
    }
    .info-text, .info-text2 {
        flex: 1.2; /* Dá um pouco mais de espaço para o texto */
    }
    .info-image, .info-image2 {
        flex: 0.8;
    }
    .info-text h2, .info-text p,
    .info-text2 h3, .info-text2 h2, .info-text2 p {
        margin-left: 0;
        text-align: left;
    }
    .info-image img, .info-image2 img {
        width: 100%;
        height: auto;
        margin-left: 0;
    }

    /* --- Seção Depoimentos --- */
    .testimonials h2, .testimonials-grid {
        text-align: center;
    }

    /* --- Botão do CTA Final --- */
    .final-cta-v2 .btn-light2 {
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
        margin-bottom: 40px;
        display: block;
    }

    /* --- Oculta elementos decorativos que podem atrapalhar --- */
    .snowflake-bg-treatments {
        display: none !important;
    }
}

@media (min-width: 1240px) {
    .footer {
        margin-right: 17%;
    }

}
/* --- Estilos para Tablets e Celulares (até 768px) --- */
@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; margin-bottom: 30px; }

    .container {
        max-width: 90%; /* Garante que o container não vaze */
    }
    .header {
        position: absolute;
        padding: 10px 0;
    }
    .header .logo {
       margin-left: 0%;  
       margin-right: -15%;
    }
    .header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 15px;
    }

    .menu-toggle {
        display: block; /* Mostra o botão hambúrguer no mobile */
    }

    .logo {
        margin: 10px 0;
    }

    .nav-menu {
        display: none; /* Esconde o menu por padrão */
        position: fixed;
        top: 80px; /* Altura aproximada do header */
        left: 0;
        width: 100%;
        background-color: rgb(21, 101, 192);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .nav-menu.active {
        display: block; /* Mostra o menu quando a classe 'active' está presente */
    }

    .nav-menu ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px;
        font-size: 16px; /* Aumenta a fonte para mobile */
    }

    .nav-menu ul li {
        margin: 0;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hero {
        margin-top: 0;
        padding: 80px 0;
        background-size: cover; /* Garante que a imagem cubra a área */
        background-position: center center; /* Centraliza a imagem no mobile */
        position: relative; /* Necessário para o overlay */
        z-index: 1;
    }

    .hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: rgba(10, 46, 108, 0.4); /* Overlay azul para contraste */
        z-index: -1;
        border-radius: inherit;
    }

    .hero h1 {
        max-width: 90%;
    }

    .btn, .btn-primary, .btn-light, .btn-light2 {
        width: auto !important; /* Remove larguras fixas */
        max-width: 90%; /* Garante que não vaze */
        padding: 12px 25px !important; /* Diminui o padding */
        font-size: 16px !important; /* Diminui a fonte */
        white-space: normal !important; /* Permite quebra de linha se necessário */
    }

    .hero .btn-primary {
        display: table; /* Garante a centralização com margin: auto */
    }

    .treatments-accordion,
    .treatments-images-container {
        flex: 1 1 100%;
        margin-top: 0;
    }

    .treatments-accordion {
        order: 1;
        margin-bottom: 0;
    }

    .treatments-cta { 
        order: 2; 
        margin-top: 0;
        width: 100%; /* Garante que o container ocupe toda a largura */
    }
    .treatments-images-container { order: 3; }

    .treatments-cta .btn-light2 {
        position: static; /* Remove posicionamento absoluto */
        margin: 20px auto 0 !important; /* Garante centralização */
    }

    .treatments-images-container,
    .treatments-images-small-row {
        flex-direction: column;
    }

    .treatments-image-large,
    .treatments-image-small {
        width: 100%;
        max-width: 100%;
        overflow: hidden; /* Garante que nada vaze do container da imagem */
    }

    .treatments-image-large img,
    .treatments-image-small img {
        width: 100% !important; /* Força a imagem a ocupar 100% do container pai */
        height: 250px !important; /* Mantém a altura fixa para consistência */
        object-fit: cover !important; /* Cobre o espaço sem distorcer */
    }

    .filter-buttons {
        padding: 0 15px;
        justify-content: center; /* Centraliza os botões de filtro */
    }

    .treatments-cta {
        margin-top: 20px;
        margin-right: 0;
    }

    .info-content, .info-content2 {
        flex-direction: column;
    }

    .info-image, .info-image2 {
        order: -1; /* Move a imagem para cima do texto */
    }
    .info-image, .info-image2 {
        padding: 0;
        margin: 0 auto;
    }

    .info-image img, .info-image2 img {
        margin: 0 auto;
        display: block;
        max-width: 100%;
        width: 100%;
        max-width: 400px;
        height: auto;
    }
    .info-text, .info-text2 {
        padding: 0;
        margin: 0;
    }

    .info-section .btn-light2 {
        left: auto; /* Reseta o posicionamento */
        position: static; /* Remove o posicionamento relativo que causa problemas */
        display: block;
        margin: 20px auto 0 !important; /* Força a centralização */
    }

    .booking-content {
        flex-direction: column;
        gap: 40px; /* Adiciona um espaço entre o mapa e o texto */
    }

    .booking-streetview {
        order: 1; /* Mapa primeiro */
        width: 100%;
        padding-right: 0; /* Remove padding desnecessário no mobile */
    }

    .booking-text {
        order: 2; /* Texto depois do mapa */
        padding-left: 0; /* Remove padding desnecessário no mobile */
    }

    .booking h2 {
        font-size: 2.2rem;
    }

    .testimonial-author {
        flex-direction: column; /* Empilha o nome e as estrelas */
        align-items: flex-start; /* Alinha à esquerda dentro do card */
        gap: 5px; /* Reduz o espaçamento entre nome e estrelas */
    }

    .testimonials-grid {
        flex-direction: column;
        align-items: center;
        margin: 0;
    }


    .testimonials h2 {
        margin-right: 0; /* Centraliza o título dos depoimentos */
    }

    .faq-section .container {
        flex-direction: column;
        align-items: center;
    }

    .faq-left {
        text-align: center;
        margin-bottom: 30px;
    }

    .faq-section .snowflake-bg {
        display: none; /* Esconde o floco de neve em telas menores para não poluir */
    }

    .final-cta-v2 .container h2 {
        font-size: 2rem !important;
        margin-left: 0 !important; /* Remove a margem inline */
        text-align: center; /* Centraliza o texto */
    }

    .final-cta-v2 .container h2 span {
        font-size: 2.5rem !important;
    }

    .final-cta-v2 {
        background-position: center 1px; /* Desce a imagem de fundo em 1px */
    }

    .final-cta-v2::after {
        padding-bottom: 10px !important;
    }

    .final-cta-v2 .container a.btn-light2 {
        margin: 20px auto 40px !important; /* Adiciona margem inferior */
        width: fit-content;
        display: table; /* Garante a centralização */
    }

    .footer .container {
        flex-direction: column;
        align-items: center; /* Centraliza todos os itens dentro do container */
    }


    /* --- Seção Nossas Unidades --- */
    .unidades-section {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .unidades-section h2 {
        font-size: 2rem !important;
        margin-bottom: 40px;
    }

    .unidades-container {
        flex-direction: column;
    }

}

/* --- Estilos para Celulares (até 767px) --- */
@media (max-width: 767px) {
    section {
        padding: 60px 0;
    }

    .container {
        padding: 0 15px;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; margin-bottom: 30px; }
    .treatments h2, .testimonials h2, .more-info h2 { font-size: 2.2rem !important; }

    .treatments-cta {
        margin-top: 20px;
    }
    .treatments-images-container {
        gap: 20px;
    }

    .snowflake-bg-treatments {
        width: 150px;
        height: 150px;
        bottom: -30px;
        right: -30px;
    }

    .more-info p {
        font-size: 1.2rem;
        margin-top: -15px;
    }

    .filter-buttons .btn {
        width: auto !important;
        font-size: 0.9rem !important; /* Diminui a fonte dos botões de filtro */
        padding: 8px 15px !important; /* Diminui o padding dos botões de filtro */
    }

    .info-text p, .info-text2 p, .modal-layout p {
        font-size: 1rem;
    }

    .info-text h2, .info-text2 h2 {
        font-size: 2.2rem;
    }

    .info-text h2 span, .faq-left h2 span {
        font-size: 2.2rem !important; /* Diminui o tamanho do span nos títulos */
    }

    .final-cta-v2 .container h2 {
        font-size: 1.2rem !important; /* Diminui a fonte do título final */
        letter-spacing: 1px;
    }

    .final-cta-v2 .container h2 span {
        font-size: 1.6rem !important; /* Diminui a fonte do span no título final */
    }

    .final-cta-v2::after {
        height: 150px;
        margin-bottom: -15px;
    }

    .modal-content {
        padding: 20px;
        width: 95%;
    }

    .modal-left h2 {
        font-size: 1.8rem !important; /* Diminui a fonte do título do modal */
    }
}

/* --- Estilos para Celulares Pequenos (até 480px) --- */
@media (max-width: 480px) {
    .treatments-images-small-row {
        flex-direction: column;
        height: auto;
    }
}

/* --- Estilos para Celulares Pequenos (até 480px) --- */
@media (max-width: 480px) {
    .unidade-card {
        max-width: 100%; /* Permite que o card ocupe a largura total */
    }
}

@media (max-width: 1000px) {
            .header .logo {
            margin-left: 1%;
            margin-right: -30%;
        }
}

@media (max-width: 801px) {
            .header .logo {
            margin-left: 0%;
            margin-right: 0%;
        }
}

@media (max-width: 480px) {
    .treatments-image-small {
        height: auto !important; /* Garante que a altura seja automática */
    }
}