*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Essencial para o cálculo de largura/altura */
   
}
:root{ 
    --cor-principal: #4D0D1A;
    --cor-secundaria: #2E0F16;
    --cor-tercearia: #E9E9EA;
    --cor-complemento: #5A493C;
    --cor-complemento2: #483628;
} 
@font-face {
    font-family: 'FonteAtto';
    src: url('fonts/LouisGeorgeCafe.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body{
    background-color: var(--cor-tercearia);
}

.mobile-only { display: none !important; }
.cabecalho{
    display: flex;
    justify-content: space-between;
    padding: 15px 25px 10px 25px;
    width: 100%;
    /* margin-bottom: -60px; */
}
/* Container da busca */
.buscarProduto {
    position: relative;
    display: flex;
    align-items: center;
}

.search-container {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid var(--cor-principal);
    border-radius: 25px;
    padding: 5px 15px;
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

.search-container.active {
    width: 250px; /* Largura da barra expandida */
    opacity: 1;
    visibility: visible;
    margin-right: -10px;
}

.search-container input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'FonteAtto', sans-serif;
    width: 100%;
    color: var(--cor-principal);
}

.btn-fechar-busca {
    background: none;
    border: none;
    color: var(--cor-principal);
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
}

#lupaIcon {
    cursor: pointer;
    transition: transform 0.3s;
}

#lupaIcon.hidden {
    transform: scale(0);
    opacity: 0;
}

.opcoes{
    display: flex;
    width: 25%;
    gap: 10px;
    justify-content: space-around;
    font-family: 'FonteAtto', sans-serif;
    padding: 0, 15px, 0, 15px;
    margin-left: 20px;
    align-items: center;
}
.opcoes a{
    /* font-size: 18px; */
    color: var(--cor-principal);
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;

}

.logo{
    display: flex;
    align-items: center;
    justify-content:center;
    margin-left: -20vw;
   
}

.logo img{
    display: flex;
    width: 60px;
    height: auto;
    align-items: center;
}

.buscarProduto{
    display: flex;
    padding: 0, 15px, 0, 15px;
    cursor: pointer;  
    align-items: center;
    justify-content: center;
    margin-right: 40px;
}


.buscarProduto img {
    width: 18px;
    height: 18px;
   
}

.containerP{
    width: 100%;
}
.banner1{
    width: 100%;
    position: relative; /* ESSENCIAL: O botão será absoluto em relação a este container */
    display: flex; /* Ajuda no alinhamento vertical padrão se necessário */
    overflow: hidden;   
    margin-bottom: 4%;
}
.banner1 img{
   width: 100%;
    height: auto;
    display: block; /* Remove espaços em branco indesejados abaixo da imagem */
    z-index: 0; /* Fica na camada de trás */
}

.banner1 a.btn-sobre {
    display: inline-block; /* Permite aplicar padding e width corretamente */
    position: absolute;   /* ESSENCIAL: Posicionamento preciso */
    
    /* -- Posicionamento baseado na imagem de referência -- */
    top: 45%;             /* Distância do topo do container (ajuste conforme necessário) */
    left: 25%;            /* Distância da esquerda do container (ajuste conforme necessário) */
    transform: translate(-50%, -50%); /* Centraliza o próprio botão no ponto top/left definido */

    /* -- Visual do Botão (cores e bordas) -- */
    background-color: var(--cor-tercearia); /* Cor de fundo clara, igual à do body */
    color: var(--cor-principal);           /* Cor do texto escura */
    border: 1px solid rgba(0,0,0,0.1);    /* Borda muito sutil */
    
    /* -- Tipografia e Espaçamento -- */
    font-family: 'FonteAtto', sans-serif;
    font-size: 14px;      /* Tamanho um pouco menor, igual ao menu */
    text-decoration: none;/* Remove o sublinhado do link */
    padding: 8px 24px;   /* Espaçamento interno (Cima/Baixo Direita/Esquerda) */
    border-radius: 25px;  /* Arredondamento pronunciado (efeito pílula) */
    
    /* -- Camada e Interação -- */
    z-index: 10;          /* Garante que o botão fique na frente da imagem */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Efeito suave no hover */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra leve para dar profundidade */
}

/* -- Efeito ao passar o mouse -- */
.banner1 a.btn-sobre:hover {
    background-color: #f5f5f5; /* Um cinza bem claro no hover */
}
/* Container do WhatsApp fixo na tela */
.whats {
    position: fixed; /* ESSENCIAL: Fixa o elemento na janela do navegador */
    bottom: 30px;    /* Distância do limite inferior da tela */
    right: 15px;     /* Distância da lateral direita da tela */
    z-index: 999;    /* Garante que ele flutue por cima de todas as imagens e banners */
}

/* Visual do Botão */
.whats a.botaoWhats {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Cores: Estou sugerindo o verde oficial do Whats, 
       mas você pode voltar para var(--cor-tercearia) se preferir */
    background-color: var(--cor-tercearia); /* Cor de fundo clara, igual à do body */
    color: var(--cor-principal);           /* Cor do texto escura */
    border: 1px solid rgba(0,0,0,0.1);    /* Borda muito sutil */
    
    /* -- Tipografia e Espaçamento -- */
    font-family: 'FonteAtto', sans-serif;
    font-size: 20px;      /* Tamanho um pouco menor, igual ao menu */
    text-decoration: none;/* Remove o sublinhado do link */
    padding: 8px 24px;   /* Espaçamento interno (Cima/Baixo Direita/Esquerda) */
    border-radius: 25px;  /* Arredondamento pronunciado (efeito pílula) */
    
    /* Medidas para deixar ele um círculo perfeito (Padrão de UI/UX) */
    width: 60px;
    height: 60px;
    border-radius: 50%; 
    
    /* Efeitos de sombra e transição */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    transition: transform 0.3s ease, background-color 0.3s ease; 
}

/* Efeito ao passar o mouse */
.whats a.botaoWhats:hover {
    background-color: #1ebc5a; /* Fica um verde mais escuro */
    transform: scale(1.1); /* Dá um leve zoom para convidar ao clique */
    color: white;
}


.lancamentos{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-principal);
    font-family: 'FonteAtto', sans-serif;
    margin-bottom: 0%;
    margin-top: 1%;
    font-size: 28px;
    width: 100%;
    
}
.verTodos {
    margin-right: 2vw;
    padding: 0 15px;
    
    cursor: pointer;
    text-decoration: none;
    text-align: end;
    justify-content: end;
}

.verTodos a {

    color: var(--cor-principal);
    font-family: 'FonteAtto', sans-serif;
    font-size: 14px;
     text-decoration: none;
}
.verTodosMob {
    margin-right: 2vw;
    padding: 0 15px;
    
    cursor: pointer;
    text-decoration: none;
    text-align: end;
    justify-content: end;
}

.verTodosMob a {

    color: var(--cor-principal);
    font-family: 'FonteAtto', sans-serif;
    font-size: 14px;
     text-decoration: none;
}
.cardsLancamento{
    display: flex;
    gap: 20px;
    padding: 50px;
    
}
.card {
    display: flex;
    flex-direction: column; /* A MÁGICA AQUI: Força o texto a ficar embaixo da foto */
    background: #5a493c27;
    border-radius: 8px; /* Arredondei um pouquinho mais para ficar mais suave */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    align-items: center;
    justify-content: space-between; 
    overflow: hidden; /* Garante que a foto não vaze os cantos do card */
}
.card img {
    width: 20vw;
    height: auto;
    transition: transform 0.5s ease, opacity 0.3s ease;
    width: 100%; /* Garante que a imagem preencha o card */
    display: block;
    
    
}
.card:hover img {
    transform: scale(1.05); /* Dá um leve zoom na foto nova */
}
/* #card3 img, #card4 img,
#card2 img{
    transform: rotate(-90deg);
} */
.card-insta-site {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 500px; /* Limita o tamanho para não ficar gigante na tela do PC */
    margin: 40px auto; /* Centraliza na tela */
}

.nomesCards{
    margin-top: -80px;
    display: flex;
    padding: 50px;
    justify-items: start;
    justify-content: space-around;
    

}
.nomeCard2, .nomeCard3, .nomeCard4,
.nomeCard1{
    display: flex;
    width: 100%;
    color: var(--cor-principal);
    font-family: 'FonteAtto', sans-serif;
    
    
}

.nomeCard2{
    margin-left: 27px;
}

.nomeCard3{
    margin-left: 27px;
}

.nomeCard4{
    margin-left: 27px;
}
.banner2 {
    width: 100%;
    /* position: relative; ESSENCIAL: O botão será absoluto em relação a este container */
    display: flex; /* Ajuda no alinhamento vertical padrão se necessário */
    overflow: hidden;   
    position: relative;
}
/* Troque .banner2 img por .banner2 .img-fundo-banner */
.banner2 .img-fundo-banner {
    width: 100%;
    height: auto;
    display: block; 
    z-index: 0; 
}



/* Classe para as imagens que vão formar o rastro */
.img-trail {
    position: absolute;
    width: 200px; /* Tamanho da imagem do rastro - ajuste como preferir */
    height: auto;
    pointer-events: none; /* ESSENCIAL: impede que a imagem bloqueie o mouse */
    z-index: 50;
    opacity: 0; /* Começa invisível para o GSAP animar */
   
}

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

.TituloCate{
    color: var(--cor-principal);
    font-family: 'FonteAtto', sans-serif;
    margin-bottom: 3%;
    margin-top: 9%;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 28px;
}

.categorias img{
    width: 100%;
    height: auto;
    display: block;
}

.cardCate1 {
    position: relative; /* ESSENCIAL: Segura o botão aqui dentro */
    display: flex; /* Ajuda a manter a estrutura */
}
.cardCate2 {
    position: relative; /* ESSENCIAL: Segura o botão aqui dentro */
    display: flex; /* Ajuda a manter a estrutura */
}
.cardCate3 {
    position: relative; /* ESSENCIAL: Segura o botão aqui dentro */
    display: flex; /* Ajuda a manter a estrutura */
}
.cardCate4 {
    position: relative; /* ESSENCIAL: Segura o botão aqui dentro */
    display: flex; /* Ajuda a manter a estrutura */
}

.cardCate1 img{
    display: block;
    z-index: 0;
   
}
.cardCate2 img{
    display: block;
    z-index: 0;
   
}
.cardCate3 img{
    display: block;
    z-index: 0;
   
}
.cardCate4 img{
    display: block;
    z-index: 0;
   
}
.cardCate1 a.btn-cardCate1{
    display: inline-block; /* Permite aplicar padding e width corretamente */
    position: absolute;   /* ESSENCIAL: Posicionamento preciso */
    
    /* -- Posicionamento baseado na imagem de referência -- */
    top: 90%;             /* Distância do topo do container (ajuste conforme necessário) */
    left: 50%;            /* Distância da esquerda do container (ajuste conforme necessário) */
    transform: translate(-50%, -50%); /* Centraliza o próprio botão no ponto top/left definido */

    /* -- Visual do Botão (cores e bordas) -- */
    background-color: var(--cor-tercearia); /* Cor de fundo clara, igual à do body */
    color: var(--cor-principal);           /* Cor do texto escura */
    border: 1px solid rgba(0,0,0,0.1);    /* Borda muito sutil */
    
    /* -- Tipografia e Espaçamento -- */
    font-family: 'FonteAtto', sans-serif;
    font-size: 14px;      /* Tamanho um pouco menor, igual ao menu */
    text-decoration: none;/* Remove o sublinhado do link */
    padding: 8px 24px;   /* Espaçamento interno (Cima/Baixo Direita/Esquerda) */
    border-radius: 25px;  /* Arredondamento pronunciado (efeito pílula) */
    
    /* -- Camada e Interação -- */
    z-index: 10;          /* Garante que o botão fique na frente da imagem */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Efeito suave no hover */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra leve para dar profundidade */
}

.cardCate2 a.btn-cardCate2{
    display: inline-block; /* Permite aplicar padding e width corretamente */
    position: absolute;   /* ESSENCIAL: Posicionamento preciso */
    
    /* -- Posicionamento baseado na imagem de referência -- */
    top: 90%;             /* Distância do topo do container (ajuste conforme necessário) */
    left: 50%;            /* Distância da esquerda do container (ajuste conforme necessário) */
    transform: translate(-50%, -50%); /* Centraliza o próprio botão no ponto top/left definido */

    /* -- Visual do Botão (cores e bordas) -- */
    background-color: var(--cor-tercearia); /* Cor de fundo clara, igual à do body */
    color: var(--cor-principal);           /* Cor do texto escura */
    border: 1px solid rgba(0,0,0,0.1);    /* Borda muito sutil */
    
    /* -- Tipografia e Espaçamento -- */
    font-family: 'FonteAtto', sans-serif;
    font-size: 14px;      /* Tamanho um pouco menor, igual ao menu */
    text-decoration: none;/* Remove o sublinhado do link */
    padding: 8px 24px;   /* Espaçamento interno (Cima/Baixo Direita/Esquerda) */
    border-radius: 25px;  /* Arredondamento pronunciado (efeito pílula) */
    
    /* -- Camada e Interação -- */
    z-index: 10;          /* Garante que o botão fique na frente da imagem */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Efeito suave no hover */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra leve para dar profundidade */
}
.cardCate3 a.btn-cardCate3{
    display: inline-block; /* Permite aplicar padding e width corretamente */
    position: absolute;   /* ESSENCIAL: Posicionamento preciso */
    
    /* -- Posicionamento baseado na imagem de referência -- */
    top: 90%;             /* Distância do topo do container (ajuste conforme necessário) */
    left: 50%;            /* Distância da esquerda do container (ajuste conforme necessário) */
    transform: translate(-50%, -50%); /* Centraliza o próprio botão no ponto top/left definido */

    /* -- Visual do Botão (cores e bordas) -- */
    background-color: var(--cor-tercearia); /* Cor de fundo clara, igual à do body */
    color: var(--cor-principal);           /* Cor do texto escura */
    border: 1px solid rgba(0,0,0,0.1);    /* Borda muito sutil */
    
    /* -- Tipografia e Espaçamento -- */
    font-family: 'FonteAtto', sans-serif;
    font-size: 14px;      /* Tamanho um pouco menor, igual ao menu */
    text-decoration: none;/* Remove o sublinhado do link */
    padding: 8px 24px;   /* Espaçamento interno (Cima/Baixo Direita/Esquerda) */
    border-radius: 25px;  /* Arredondamento pronunciado (efeito pílula) */
    
    /* -- Camada e Interação -- */
    z-index: 10;          /* Garante que o botão fique na frente da imagem */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Efeito suave no hover */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra leve para dar profundidade */
}
.cardCate4 a.btn-cardCate4{
    display: inline-block; /* Permite aplicar padding e width corretamente */
    position: absolute;   /* ESSENCIAL: Posicionamento preciso */
    
    /* -- Posicionamento baseado na imagem de referência -- */
    top: 90%;             /* Distância do topo do container (ajuste conforme necessário) */
    left: 50%;            /* Distância da esquerda do container (ajuste conforme necessário) */
    transform: translate(-50%, -50%); /* Centraliza o próprio botão no ponto top/left definido */

    /* -- Visual do Botão (cores e bordas) -- */
    background-color: var(--cor-tercearia); /* Cor de fundo clara, igual à do body */
    color: var(--cor-principal);           /* Cor do texto escura */
    border: 1px solid rgba(0,0,0,0.1);    /* Borda muito sutil */
    
    /* -- Tipografia e Espaçamento -- */
    font-family: 'FonteAtto', sans-serif;
    font-size: 14px;      /* Tamanho um pouco menor, igual ao menu */
    text-decoration: none;/* Remove o sublinhado do link */
    padding: 8px 24px;   /* Espaçamento interno (Cima/Baixo Direita/Esquerda) */
    border-radius: 25px;  /* Arredondamento pronunciado (efeito pílula) */
    
    /* -- Camada e Interação -- */
    z-index: 10;          /* Garante que o botão fique na frente da imagem */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Efeito suave no hover */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra leve para dar profundidade */
}
.cardCate1 a.btn-cardCate1:hover {
    background-color: var(--cor-principal); 
    color: var(--cor-tercearia);/* Um cinza bem claro no hover */
}
.cardCate2 a.btn-cardCate2:hover {
    background-color: var(--cor-principal); 
    color: var(--cor-tercearia);/* Um cinza bem claro no hover */
}
.cardCate3 a.btn-cardCate3:hover {
    background-color: var(--cor-principal); 
    color: var(--cor-tercearia);/* Um cinza bem claro no hover */
}
.cardCate4 a.btn-cardCate4:hover {
    background-color: var(--cor-principal); 
    color: var(--cor-tercearia);/* Um cinza bem claro no hover */
}


.depoimentos{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1%;
    width: 100%;
    
}


.phone1{
    display: flex;
    justify-content: space-between;
    gap: 20px;

}

.phone1 img{
    width: 400px;
    height: auto;
}

.tituloFooter{
    display: flex;
     margin-top: 9%;
     width: 100%;
     font-family: 'FonteAtto', sans-serif;
     font-size: 28px;
     color: var(--cor-principal);
     align-items: center;
     justify-content: center;
}


.insta{
    display: flex;
    background-color: var(--cor-principal);
    margin-top: 20px;
    padding: 25px;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    font-family: FonteAtto, sans-serif;
    gap: 5px;
    color: var(--cor-tercearia);
}

.insta i{
    color: var(--cor-tercearia);
    font-size: 40px;
}

.insta a{
    margin-top: 5px;
    color: var(--cor-tercearia);
    font-size: 24px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}

.insta a:hover{
    font-size: 26px;
    transition: 0.5s;
}

.infosRodape{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 30px;
    font-family: FonteAtto, sans-serif;
    color: var(--cor-principal);
}
/* ========================================== */
/* ESTILO DA LEGENDA DOS LANÇAMENTOS          */
/* ========================================== */
.nome-lancamento-home {
    width: 100%;
    padding: 15px 10px;
    font-family: 'FonteAtto', sans-serif;
    color: var(--cor-principal);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    background-color: #ffffff; /* Fundo branco para destacar a legenda */
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(0,0,0,0.05); /* Uma linha super fina separando a foto */
}

/* ========================================== */
/* FAIXA DE LANÇAMENTO (VERDE) PARA A HOME    */
/* ========================================== */
.tarja-status {
    display: flex;
    font-family: 'FonteAtto', sans-serif;
    position: absolute;
    top: 10px;
    left: 0px;
    /* padding: 14px 14px 14px 14px; */
    width: 50%;
    height: 7%;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    align-items: center;
    justify-content: center;
    letter-spacing: 1.5px;
    color: white;
    border-radius: 0px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    pointer-events: none; 
}

.tarja-lancamento {
    background-color: #28a745; 
}
/* PC: Lado a lado, centrado */
.phone1.carrossel-scroll {
    display: flex;
    justify-content: center;
    gap: 40px;
    align-items: center;
    width: 100%;
}

.card-insta-site {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 500px; /* Tamanho perfeito para o PC */
    width: 100%;
}