/* --- RESET BÁSICO --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'proxima-nova', sans-serif;
            background-color: #fff;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        img {
            
            height: auto;
            display: block;
        }

        /* --- ESTRUTURA GERAL --- */
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* --- HEADER --- */
        .header {
            padding: 20px 0;
            background-color: #fff;
            /* Removemos o flex daqui para usar o alinhamento via margin na imagem */
        }

        .header-logo {
            width: 120px;
            margin: 0 auto; /* CORREÇÃO: Isso centraliza a imagem horizontalmente */
        }

        /* --- HERO SECTION --- */
        .hero-section {
            background-color: #f4f4f4;
            padding: 40px 0;
        }

        .hero-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 40px;
        }

        /* MOBILE FIRST: Estilos Centralizados */
        .hero-content {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: start;
        }

        .hero-title {
            
            color: #4D008C;
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 20px;
            line-height: 1.1;
        }

        /* Container dos badges (imagens) */
        .hero-badges {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            justify-content: center;
            align-items: center;
        }

        .hero-subtitle {     
            color: #4D008C;
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 1.3;
            margin-bottom: 30px;
            max-width: 400px; 
        }
        
        #d1{
            width: 130px;
        }
        #d12{
            width: 80px;
        }
        


        /* Área da Imagem Principal */
        .hero-image-container {
            width: 100%;
            max-width: 500px;
        }

        /* --- RESPONSIVIDADE (DESKTOP) --- */
        @media (min-width: 992px) {
            .warranty-link {
                margin-top: 50px;
             }
            #d1{
                 width: 100%;
            }
            #d12{
                width: 100%;
            }
            .hero-section {
                padding: 80px 0;
                min-height: 80vh; 
                display: flex;
                align-items: center;
            }

            .hero-wrapper {
                flex-direction: row;
                justify-content: space-between;
                align-items: center; 
                text-align: left;
                gap: 20px;
            }

            .hero-content {
                align-items: flex-start;
                text-align: left;
                flex: 1; 
                max-width: 45%; 
            }

            .hero-title {
                font-size: 3.5rem;
            }
            
            /* Alinha os badges à esquerda no desktop */
            .hero-badges {
                justify-content: flex-start;
            }

            .hero-subtitle {
                font-size: 1.8rem;
                max-width: none; 
            }

            .hero-image-container {
                flex: 1;
                max-width: 55%;
                display: flex;
                justify-content: flex-end; 
            }
            
            .hero-image-container img {
                 max-width: 120%; 
                 margin-right: -5%; 
            }
        }
         @media (max-width: 992px) {
            .hero-subtitle {
                margin-left: auto;
                margin-right: auto;
            }
            .warranty-link{
                margin-left: auto;
                margin-right: auto;  
            }
         }
         /* --- FEATURES SECTION (Nova Dobra 2) --- */
.features-section {
    background-color: #fff;
    padding: 50px 0;
}

/* Wrapper para a estrutura de colunas/linhas */
.features-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Item individual da feature */
.feature-item {
    display: flex;
    /* MOBILE: Coluna (Imagem em cima, Texto embaixo) */
    flex-direction: column;
    /* MOBILE: Alinha tudo à ESQUERDA (Start) */
    align-items: flex-start; 
    text-align: left;
    gap: 15px;
    
    /* Opcional: Se quiser limitar a largura no mobile para não ficar muito longo */
    /* max-width: 80%; */ 
}

/* Círculo do ícone */
.feature-icon {
    width: 60px;
    height: 60px;
    background-color: #4D008C;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.feature-icon img {
    width: 30px; 
    height: auto;
}

/* Texto da feature */
.feature-text {
    font-size: 1rem;
    line-height: 1.4;
    color: #4D008C;
}


/* --- MEDIA QUERY (DESKTOP) --- */
@media (min-width: 992px) {
    .features-section {
        padding: 0;
    }

    .features-wrapper {
        flex-direction: row; 
        justify-content: space-between;
        align-items: flex-start; /* Alinhamento vertical topo no container geral */
        gap: 30px;
        
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        padding: 40px 0;
        margin: 50px auto;
    }

    .feature-item {
        /* DESKTOP: Muda para linha (Ícone ao lado do texto) */
        flex-direction: row; 
        align-items: center; /* Centraliza ícone e texto verticalmente um com o outro */
        flex: 1;
    }

    .feature-icon {
        width: 70px;
        height: 70px;
    }
    
    .feature-icon img {
        width: 35px;
    }

}
/* --- SEÇÃO GALERIA E TEXTO (Dobra 3) --- */
.gallery-text-section {
    background-color: #fff;
    padding: 50px 0;
}

.gallery-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* --- GRADE DE CARDS --- */
.gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Estilo do Card (Container "fluido") */
.gallery-card {
    display: block;
    width: 100%;
    /* Removemos overflow, height e aspect-ratio fixos */
}

.gallery-card img {
    width: 100%;
    height: auto; /* Mantém a proporção original da imagem */
    display: block;
    /* Se quiser manter o arredondamento via CSS, descomente a linha abaixo.
       Se as imagens já vierem redondas, pode deixar sem. */
    border-radius: 20px; 
}

/* --- BLOCO DE TEXTO INFORMATIVO --- */
.info-text-block {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.info-text-block strong {
    color: #4D008C;
    font-weight: 700;
}

/* --- MEDIA QUERY (DESKTOP) --- */
@media (min-width: 992px) {
    .gallery-text-section {
        padding: 80px 0;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 colunas de largura igual */
        gap: 30px;
        /* IMPORTANTE: Alinha os itens ao topo. 
           Isso impede que imagens menores estiquem para ficar do tamanho das maiores */
        align-items: start; 
    }

    .info-text-block {
        max-width: 1200px;
        margin: 0 auto;
        font-size: 1.3rem;
    }
    #d35{
        margin-top: -45px;
    }
}
/* --- SEÇÃO SPLIT (ZIG-ZAG) --- */
.split-section {
    background-color: #fff;
    padding: 50px 0;
}

.split-wrapper {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Espaço entre os blocos (Mulher e Homem) */
}

/* Item individual (Linha) */
.split-row {
    display: flex;
    flex-direction: column; /* Mobile: Coluna (Img topo, Texto baixo) */
    gap: 20px;
    align-items: center; /* Centraliza no mobile */
}

/* Estilo das Imagens */
.split-image {
    width: 100%;
    max-width: 500px; /* Limita largura no mobile */
}

.split-image img {
    width: 100%;
    height: auto;
    border-radius: 20px; /* Arredondamento conforme design */
    object-fit: cover;
}

/* Estilo do Conteúdo de Texto */
.split-content {
    text-align: left; /* Texto alinhado a esquerda no mobile conforme imagem */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}

.split-title {
    color: #4D008C;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
}

.split-text {
    color: #333;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- MEDIA QUERY (DESKTOP) --- */
@media (min-width: 992px) {
    .split-section {
        padding: 80px 0;
        
    }

    .split-row {
        flex-direction: row; /* Lado a lado */
        justify-content: space-between;
        gap: 80px; /* Espaço maior entre imagem e texto */
    }

    /* Classe auxiliar para inverter a ordem na segunda linha */
    .split-row.reverse-desktop {
        flex-direction: row-reverse;
    }

    .split-image, 
    .split-content {
        flex: 1; /* Ocupam 50% cada */
    }

    .split-title {
        font-size: 3rem;
    }

    .split-text {
        margin-top: 20px;
        font-size: 1.3rem;
        max-width: 450px; /* Evita linhas muito longas de leitura */
    }
}
@media (max-width: 992px) {
    .split-section {
        padding: 80px 0;
       
    }
    .split-section .container {
         max-width: 500px;
    }
    .features-section .container {
         max-width: 500px;
    }
    .gallery-text-section .container {
         max-width: 500px;
    }
}
/* --- SEÇÃO CARROSSEL (Dobra 5) --- */
.carousel-section {
    background-color: #fff;
    padding: 50px 0;
    overflow: hidden; 
}

/* Wrapper relativo (caso precise de posicionamento futuro) */
.carousel-wrapper-relative {
    position: relative;
    /* Removemos a máscara esfumaçada daqui */
}

/* Container do Slider */
.carousel-container {
    display: flex;
    overflow-x: auto; /* Garante o scroll horizontal e o efeito "cortado" */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; 
    gap: 20px;
    padding-bottom: 20px; 
    
    /* Esconde barra de rolagem para visual limpo */
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}
.carousel-container::-webkit-scrollbar {
    display: none; 
}

/* Item do Carrossel (Mobile: 1 por vez) */
.carousel-item {
    min-width: 100%; /* Ocupa 100% da tela no mobile */
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.carousel-img-wrapper {
    background-color: #eef0f2;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    mix-blend-mode: multiply; 
}

.carousel-content {
    text-align: left;
    padding: 0 5px;
}

.carousel-title {
    color: #4D008C;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
}

.carousel-text {
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Navegação (Setas) */
.carousel-nav {
    display: flex;
    justify-content: center; /* Centralizado no Mobile */
    gap: 15px;
    margin-top: 20px;
}

.nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #4D008C;
    background-color: transparent;
    color: #4D008C;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background-color: #4D008C;
    color: #fff;
}

.nav-btn svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* --- MEDIA QUERY (DESKTOP) --- */
@media (min-width: 992px) {
    .carousel-section {
        padding: 80px 0;
    }

    .carousel-container {
        display: flex; /* Mantém flex para o scroll funcionar */
        gap: 30px;
    }

    .carousel-item {
        /* LÓGICA DO CORTADO:
           Definimos uma largura fixa menor que 50% (ex: 42%).
           42% + 42% = 84%. Sobram 16% para o terceiro item aparecer cortado na direita.
        */
        min-width: 42%; 
        scroll-snap-align: start; /* Alinha o card à esquerda ao parar de rolar */
    }

    /* Ajuste da Navegação no Desktop */
    .carousel-nav {
        display: flex;
        justify-content: center; /* Mantém centralizado também no Desktop */
        margin-top: 40px; /* Mais espaço no desktop */
    }
    
    .carousel-title {
        font-size: 1.4rem;
    }
}
/* --- SEÇÃO GARANTIA VITALÍCIA (Dobra 6) --- */
.warranty-section {
    background-color: #4D008C; /* Roxo principal */
    color: #fff;
    /* SOLICITADO: Padding ajustado para 30px */
    padding: 30px 0px 0px 0px; 
    position: relative;
    overflow: hidden;
}

.warranty-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* Garante texto centralizado */
    gap: 30px;
}

/* Coluna 1: Título e Selo */
.warranty-col-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.warranty-title {
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 1.1;
}

.warranty-badge-img {
    
    height: auto;
  
}

/* Coluna 2: Mochila Central */
.warranty-col-center {
    width: 100%;
    max-width: 350px;
    display: flex;
    justify-content: center;
}

/* Coluna 3: Texto Descritivo */
.warranty-col-right {
    display: flex;
    flex-direction: column;
    /* SOLICITADO: Texto ao centro */
    align-items: center; 
    text-align: center;
    gap: 20px;
    max-width: 400px;
}

.warranty-desc {
    text-align: left;
    font-size: 1.5rem;
    line-height: 1.4;
}

.warranty-desc strong {
    font-weight: 700;
}

/* --- FAIXA DE DISCLAIMER (*A garantia...) --- */
.disclaimer-strip {
    background-color: #4D008C; /* Tom de roxo ligeiramente diferente */
    padding: 15px 0;
    text-align: center;
}

.warranty-disclaimer {
    color: #fff;
    font-size: 0.6rem;
    opacity: 0.9;
    line-height: 1.3;
    margin: 0;
    font-weight: 200;
    margin-top: 20px;
}

/* --- FOOTER --- */
.footer-strip {
    background-color: #fff; /* Fundo branco para a imagem do footer */
    padding: 30px 0;
    width: 100%;
    text-align: center; /* Centraliza conteúdo */
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo {
    width: 40%;

    height: auto;
    display: block;
    margin: 0 auto; /* Centraliza a imagem */
}

/* --- MEDIA QUERY (DESKTOP) --- */
@media (min-width: 992px) {
    #d7{
        width: 150%!important;
    }
    .warranty-section {
        padding: 50px 0px 0px 0px; /* Um pouco mais de respiro no desktop */
    }

    .warranty-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
    }

    .warranty-col-left,
    .warranty-col-right {
        flex: 1;
        /* Mantém centralizado conforme pedido, mesmo no desktop */
        align-items: center; 
        text-align: center;
    }

    .warranty-col-center {
        flex: 1;
    }
}
@media (max-width: 992px) {
    #d7{
        width: 100%!important;
    }
    .warranty-desc {
        text-align: center;
            font-size: 1.3rem;
    }
    .warranty-disclaimer {
        
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 0.8rem;
    }
    .warranty-title {
    font-size: 2.2rem;
    }
    .footer-logo {
        width: 80%;
        max-width: 400px;
    }
}
.only-desktop {
    display: flex !important;
}

.only-mobile {
    display: none !important;
}

@media screen and (max-width: 992px) {
    .only-desktop {
        display: none !important;
    }
    .only-mobile {
        display: block !important;
    }
}