/* --- ESTILOS GLOBAIS --- */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Ms+Madi&family=Orbitron:wght@400..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playwrite+DK+Uloopet+Guides&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Ms+Madi&family=Orbitron:wght@400..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playwrite+DK+Uloopet+Guides&display=swap');

/* Regra adicionada para rolagem suave (smooth scroll) */

html,
body {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Cormorant", serif;
}

body {
    background: #1b241c;
    background-size: 500% 100%;
    animation: degrade-animado 5s infinite alternate;
    height: 100%;
}

@keyframes degrade-animado {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/*class universal*/
.interface {
    max-width: 1900px;
    margin: 0 auto;
    padding: 0 100px;
}

/*estilo universal button*/
header .btn-contato button,
.hero-site button,
.fotos button {
    font-size: 30px;
    color: #d99343;
    font-weight: 10;
    background: transparent;
    border: 3px solid #1b241c;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
    font-family: "Cormorant", serif;
}

header .btn-contato button:hover,
.hero-site button:hover,
.fotos button:hover {
    background-color: #d99343;
    border: #d99343;
    color: white;
}

/*estilo do header*/
header {
    width: 100%;
    padding: 20px 0;
}

header .interface {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* Ícone de Menu Hambúrguer (Escondido por padrão) */
.btn-abrir-menu {
    display: none;
    /* Esconde no desktop */
    color: #d99343;
    font-size: 40px;
    cursor: pointer;
}


header .logo img {
    max-width: 40px;
    cursor: pointer;
}

header .menu-desktop {
    /* Ocupa o máximo de espaço disponível entre a logo e a borda direita */
    width: 100%;
    /* Garante que o container do menu comece a alinhar no centro */
    display: flex;
    justify-content: center;
    /* Centraliza o bloco do UL */
}

header .menu-desktop nav ul {
    list-style: none;
    padding: 0;
    /* Remove qualquer padding padrão que possa atrapalhar a centralização */
}

header .menu-desktop nav ul li {
    display: inline-block;
    /* Reduz o espaçamento entre os links de 100px para um valor menor e mais equilibrado */
    margin: 0 60px;
}

header .menu-desktop nav ul li a {
    font-family: "Cormorant", serif;
    font-size: 30px;
    color: #d99343;
    font-weight: 10;
    /* Removido o padding-left: 60px; para permitir uma centralização limpa */
    text-decoration: none;
    display: inline-block;
    transition: .2s;
}

.menu-desktop nav a:hover {
    transform: scale(1.2);
}

header .btn-contato button {
    width: 140px;
    height: 50px;
}



/*Estilo do hero*/
section.hero-site {
    height: 98vh;
    background-image: url(img-rc/Gemini_Generated_Image_32ewuv32ewuv32ew.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #d99343;
}

.hero-site .interface {
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-site .txt-hero h1 {
    font-size: 4.7em;
    font-family: "Cormorant", serif;
    color: #d99343;
    line-height: 76px;
    font-weight: 10;
    padding-top: 50px;
    padding-left: 200px;
}

.hero-site .txt-hero h1 span {
    display: block;
    color: #d99343;
    font-weight: 10;
    font-family: "Cormorant", serif;
}

.hero-site .txt-hero p {
    font-size: 20px;
    font-family: "Cormorant", serif;
    font-weight: 200;
    margin: 20px 0;
    font-size: 35px;
    padding-bottom: 85px;
    padding-right: 10px;
    color: #d99343;
    max-width: 100%;

}

.hero-site .txt-hero p span {
    display: block;
    font-family: "Cormorant", serif;
    font-size: 35px;
    color: white;
}

.hero-site button {
    width: 270px;
    height: 60px;
    font-size: 30px;
    color: white;
    border: white;
    padding: 5px;
    font-family: "Cormorant", serif;
}

/* --- BARRA DE INFORMAÇÕES MANUAL (Pagamento/Frete/Garantia) --- */
.info-barra {
    width: 100%;
    padding: 15px 0;
    background-color: #1b241c;
}

.info-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    max-width: 1600px;
    gap: 100px;
}

.info-item {
    color: white;
}

.info-item h2 {
    font-size: 40px;
    font-weight: 10;
    color: #d99343;
    margin-bottom: 5px;
    font-family: "Cormorant", serif;
}

.info-item p {
    font-size: 23px;
    font-weight: 10;
    color: #d99343;
}

/* Estilo da Imagem da Logo Separadora na info-barra */
.separator-logo-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.separator-logo-img img {
    width: 40px;
    height: auto;
}

/* --- DESTAQUES (Galeria de Produtos) --- */
/* --- DESTAQUES (Galeria de Produtos) --- */
.destaques {
    padding: 80px 0;
    background-color: white;
    text-align: center;
}

/* Estilização do cabeçalho de destaques */
.destaques-header {
    max-width: 1200px;
    margin: 0 auto 30px auto;
    text-align: center;
    padding: 0 15px;
}

.titulo-destaques {
    font-size: 60px;
    font-family: "Cormorant", serif;
    font-weight: 300;
    /* Ajustado de 10 para um peso mais adequado */
    color: #d99343;
    margin-bottom: 0;
}

/* --- ESTILO GERAL DO BOTÃO "VER TODOS" (Estilo original da seção Destaques) --- */
/* Este é o botão principal de Destaques, não o da sugestão (que será sobrescrito) */
.btn-ver-todos {
    display: inline-flex;
    align-items: center;
    background-color: #d99343;
    color: #1b241c;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 45px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0;
    border-radius: 4px;
    /* Adicionado para consistência */
}

.btn-ver-todos i {
    margin-left: 30px;
    font-size: 20px;
    transition: transform 0.3s ease;
}

.btn-ver-todos:hover {
    background-color: #1b241c;
    color: #d99343;
    transform: translateY(-2px);
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
}

.btn-ver-todos:hover i {
    transform: translateX(4px);
}

/* FIM DOS ESTILOS DO BOTÃO GERAL */

.destaques-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

.link-produto-card {
    text-decoration: none;
    color: inherit;
    flex-basis: calc(25% - 15px);
    min-width: 200px;
}

.produto-card {
    padding: 15px;
    text-align: left;
    height: 100%;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.produto-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    /* Sombra mais destacada */
    transform: translateY(-5px);
}

.produto-img {
    background-color: #f7f7f7;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.produto-card img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.produto-card h4 {
    font-size: 18px;
    font-weight: 600;
    /* Ajustado de 10 para um peso mais adequado */
    color: #333;
    margin-bottom: 5px;
}

.produto-card p {
    font-size: 16px;
    font-weight: 400;
    /* Ajustado de 10 para um peso mais adequado */
    color: #666;
}

/* ---------------------------------------------------- */
/* --- ESTILO DA ÁREA DE SUGESTÕES (CARROSSEL ATUALIZADO) --- */
/* ---------------------------------------------------- */

.sugestoes-dentro-destaque {
    padding-top: 20px;
    max-width: 1200px;
    margin: 0 auto;
    /* Garante que o contêiner não restrinja a rolagem */
    overflow: visible;
}

/* Container Flex para alinhar título e botão */
.sugestoes-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Padding para alinhar com o conteúdo da interface */
    padding: 0 15px;
    margin-bottom: 30px;
}

/* Estilo do Título "Você também pode gostar" (mais fino e discreto) */
.titulo-sugestoes-dentro {
    font-size: 24px;
    font-weight: 400;
    /* Ajustado para melhor legibilidade */
    color: #555;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* NOVO ESTILO: Sobrescreve o btn-ver-todos para ter o visual BRANCO, SOMBRA, SEM BORDA */
.sugestoes-dentro-destaque .btn-ver-todos {
    background-color: #ffffff;
    /* Fundo Branco - REQUERIDO */
    color: #d99343;
    border: none;
    /* SEM BORDA - REQUERIDO */
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 0;
    display: inline-flex;
    /* Para alinhar o ícone */
    /* SOMBRA CINZA - REQUERIDO */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sugestoes-dentro-destaque .btn-ver-todos:hover {
    background-color: #fcfcfc;
    color: #d99343;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    /* Sombra mais intensa no hover */
    transform: translateY(-1px);
    /* Pequeno lift */
}

.sugestoes-dentro-destaque .btn-ver-todos i {
    margin-left: 10px;
    transition: transform 0.3s ease;
}


/* CONFIGURAÇÃO DO CARROSSEL DE SUGESTÕES */
.sugestoes-grid {
    display: flex;
    gap: 20px;

    /* PROPRIEDADES CHAVE PARA ROLAGEM */
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;

    border-top: 1px solid #e0e0e0;
    padding-top: 20px;

    /* PADDING AUMENTADO PARA AFASTAR BARRA DO ROLAMENTO - REQUERIDO */
    padding-bottom: 30px;

    /* Garante que o carrossel comece com um respiro e termine com um respiro */
    padding-left: 15px;
    padding-right: 30px;
    /* Remove margens externas que podem limitar o container */
    margin: 0;
}

/* Estilização da barra de rolagem (Desktop) - REQUERIDO */
.sugestoes-grid::-webkit-scrollbar {
    height: 10px;
    /* Aumentar um pouco a altura */
}

.sugestoes-grid::-webkit-scrollbar-track {
    background: #ffffff;
    /* Fundo branco - REQUERIDO */
    border-radius: 10px;
    /* Sombra sutil para trilha - REQUERIDO */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
}

.sugestoes-grid::-webkit-scrollbar-thumb {
    background-color: #eee;
    /* Cor Primária */
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Estilo do CARD de sugestão */
.produto-card.card-sugestao {
    min-width: 220px;
    /* Ajustado para melhor visualização */
    flex-shrink: 0;
    /* IMPEDE QUE OS CARDS ENCOLHAM */
    flex-basis: 220px;
    /* Ajustado de 200px */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: none;
    text-align: center;
    padding: 15px;
    /* Ajustado de 10px */
    height: auto;
    /* Remover flex-basis total para que o min-width prevaleça */
    width: auto;
}

.produto-card.card-sugestao:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Sombra ajustada */
    transform: translateY(-2px);
}

.produto-card.card-sugestao a {
    text-decoration: none;
    color: #333;
}

/* ---------------------------------------------------- */
/* --- MEDIA QUERY (Mobile) --- */
/* ---------------------------------------------------- */

@media (max-width: 992px) {

    /* CORREÇÃO CRÍTICA PARA A ROLAGEM MOBILE */
    .sugestoes-grid {
        /* Garante que a rolagem funcione corretamente, removendo limites fixos */
        padding-top: 20px;
        padding-bottom: 30px;
        /* Mantém o afastamento da barra de rolagem - REQUERIDO */
        /* Reset */
        margin: 0;
        /* Reset */
        gap: 10px;

        /* Adiciona o respiro lateral apenas com padding interno */
        padding-left: 10px;
        padding-right: 20px;
    }

    /* Para o Header mobile, garantindo o alinhamento correto */
    .sugestoes-header-flex {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 15px;
        padding: 0 10px;
    }

    .titulo-sugestoes-dentro {
        font-size: 20px;
        margin-bottom: 10px;
    }

    /* Ocupa a largura total para facilitar o toque no botão */
    .btn-ver-todos-container-mobile {
        width: 100%;
        text-align: center;
    }

    .sugestoes-dentro-destaque .btn-ver-todos {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }

    .produto-card.card-sugestao {
        min-width: 150px;
        flex-basis: 150px;
        padding: 8px;
    }

    .produto-card.card-sugestao .produto-img {
        height: 130px;
    }
}


/* ---------------------------------------------------- */
/* --- FIM DA ÁREA DE SUGESTÕES --- */
/* ---------------------------------------------------- */
/* --- BANNER DE CHAMADA PARA AÇÃO (CTA) --- */
.cta-banner {
    height: 450px;
    padding: 50px 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url('img-rc/Gemini_Generated_Image_jb0p2jjb0p2jjb0p.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cta-content {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 150px;
}

.cta-text-left {
    text-align: left;
    margin-right: 200px;
}

.cta-text-right {
    text-align: right;
    margin-left: 200px;
}

.cta-banner h1 {
    font-size: 55px;
    font-weight: 10;
    line-height: 1.1;
    color: #d99343;
    font-family: "Cormorant", serif;
}

.cta-text-right {
    text-align: right;
}

/* --- MARCAS QUE AMAMOS (Logos) --- */
/* --- MARCAS QUE AMAMOS (Logos) --- */
.marcas {
    padding: 80px 0;
    text-align: center;
    background-color: #1b241c;
    overflow: hidden;
    position: relative;
    padding-left: 50px;
    padding-right: 50px;
}

.titulo-marcas {
    font-size: 60px;
    font-weight: 10;
    color: #d99343;
    margin-bottom: 50px;
    font-family: "Cormorant", serif;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 1. CONTAINER PAI (Linha de rolagem) */
.marcas-scroll-container {
    /* Define o container como flex e OBRIGA os filhos a ficarem na mesma linha */
    display: flex;
    width: 100%;
}

/* 2. O GRID/LISTA DE LOGOS (Conjunto Único) */
.marcas-grid {
    display: flex;
    /* Faz a lista ser tão larga quanto seu conteúdo (as 12 caixas) */
    width: fit-content;

    /* CHAVE 1: Aplicamos a animação */
    animation: scroll-logos 40s linear infinite;
    /* Tempo reduzido para o loop de 50% */

    /* CHAVE 2: Duplica o conteúdo VISUALMENTE no mesmo elemento! */
    white-space: nowrap;
    /* Impede a quebra de linha */
    will-change: transform;
    /* Dica de performance ao navegador */
    padding-right: 30px;
}

/* 3. ESTILO DA CAIXA DO LOGO e ESPAÇAMENTO UNIFORME */
.logo-box {
    /* Largura da caixa */
    min-width: 260px;
    height: 150px;
    background-color: white;
    /* Mantido para ter contraste */
    padding: 10px;
    /* <--- AJUSTE REALIZADO: Reduzido para dar mais espaço ao logo */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    /* Espaçamento entre as caixas */
    margin-right: 30px;
}

.logo-box img {
    /* Garante que todos os logos ocupem o mesmo tamanho relativo na .logo-box */
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-box:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(217, 147, 67, 0.6);
}

/* 4. ANIMAÇÃO DE ROLAGEM INFINITA (Solução para o "Flicker") */
@keyframes scroll-logos {
    0% {
        transform: translateX(0%);
    }

    100% {
        /* Usa -50% (o tamanho de uma das listas) e subtrai 1 pixel para que o navegador não pisque */
        transform: translateX(calc(-50% - 1px));
    }
}


/* 5. EFEITO DE SOMBREADO (FADE-OUT EFFECT) */

.marcas::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100px;
    z-index: 10;
    background: linear-gradient(to right, #1b241c, rgba(27, 36, 28, 0));
    pointer-events: none;
}

.marcas::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100px;
    z-index: 10;
    background: linear-gradient(to left, #1b241c, rgba(27, 36, 28, 0));
    pointer-events: none;
}

/* ------------------- RESPONSIVIDADE ------------------- */

@media screen and (max-width: 768px) {
    .titulo-marcas {
        font-size: 40px;
    }

    .logo-box {
        min-width: 150px;
        height: 100px;
        padding: 15px;
        /* Manter este ajuste se o logo ficar muito pequeno no mobile */
        margin-right: 15px;
    }

    .marcas-grid {
        animation-duration: 25s;
    }

    .marcas::before,
    .marcas::after {
        width: 50px;
    }
}

/* --- SEÇÃO CLUBE CLASSIC (INSPIRADA NO MODELO) --- */
.clube-classic {
    padding: 100px 0;
    /* Fundo verde-escuro da sua marca */
    background-color: #1a331a;
    color: #fcfcf7;
    /* Texto claro */
    text-align: center;
}

/* Títulos Principais */
.titulo-clube {
    font-size: 65px;
    font-family: "Cormorant", serif;
    color: #d99343;
    /* Dourado */
    margin-bottom: 20px;
}

.subtitulo-clube {
    font-size: 22px;
    color: #fcfcf7;
    margin-bottom: 25px;
}

.texto-clube {
    font-size: 18px;
    color: #a0a090;
    max-width: 800px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
}

/* Botão de Chamada Principal (CTA) */
.btn-clube-topo {
    display: inline-block;
    background-color: #d99343;
    /* Dourado */
    color: #1a331a;
    font-weight: 700;
    padding: 15px 40px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 60px;
}

.btn-clube-topo:hover {
    background-color: #f0a850;
}

/* Imagem Central */
.clube-imagem {
    max-width: 900px;
    margin: 60px auto;
}

.img-clube {
    width: 100%;
    height: auto;
    /* Adapte a imagem para caber na estrutura. Pode ser um box de relógio, etc. */
    /* Exemplo: Se for uma imagem real, pode usar object-fit: cover; */
}

/* Seção "Como Funciona" */
.clube-como-funciona {
    background-color: #fcfcf7;
    /* Fundo mais claro para contraste */
    padding: 50px 30px;
    border-radius: 8px;
    margin-top: 60px;
}

.titulo-como-funciona {
    font-family: "Cormorant", serif;
    font-size: 35px;
    color: #4a3e2a;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.passos-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    margin-bottom: 50px;
}

.passo-card {
    flex: 1;
    padding: 20px;
    text-align: center;
}

.passo-icone {
    font-size: 50px;
    color: #d99343;
    /* Dourado */
    margin-bottom: 15px;
    display: block;
}

.passo-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #1a331a;
    margin-bottom: 10px;
}

.passo-card p {
    font-size: 16px;
    color: #555;
}

/* Botão do Plano no final */
.btn-clube-plano {
    display: inline-block;
    background-color: #1a331a;
    color: #fcfcf7;
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-size: 16px;
}

.btn-clube-plano:hover {
    background-color: #315e31;
}

/* ---------------------------------------------------- */
/* --- ESTILO DA SEÇÃO SOBRE NÓS (GRID 2 LINHAS x 4 COLUNAS) --- */
/* ---------------------------------------------------- */

.sobre-nos {
    background-color: #fff;
    padding: 80px 0;
}

.titulo-sobre-nos {
    font-size: 50px;
    font-family: "Cormorant", serif;
    font-weight: 10;
    color: #d99343;
    text-align: center;
    margin-bottom: 50px;
}

/* ------------------ CONTAINER: ESTABELECE O GRID 2x4 ------------------ */
.sobre-nos-container {
    display: flex;
    flex-wrap: wrap;
    /* Permite que os itens quebrem para 2 linhas */
    justify-content: center;
    width: 100%;
}

/* Define o estilo para CADA BLOCO (IMAGEM ou TEXTO) no grid */
.grid-item {
    flex: 0 0 25%;
    /* DESKTOP: Cada bloco ocupa 25% da largura (4 por linha) */
    box-sizing: border-box;
    overflow: hidden;
    height: 300px;
    /* Altura fixa para todos os blocos (imagem e texto) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Garante que a ordem no desktop siga o HTML original (I, T, I, T / T, I, T, I) */
    order: initial !important;
}

/* Estilo específico para blocos de imagem */
.imagem-bloco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Estilo específico para blocos de texto */
.texto-bloco {
    background-color: #eeeded;
    padding: 30px 20px;
    text-align: left;
    color: #000;
}

.texto-bloco h3 {
    font-size: 18px;
    font-family: "Cormorant", serif;
    font-weight: 400;
    color: #d99343;
    margin-bottom: 10px;
}

.texto-bloco p {
    font-size: 13px;
    line-height: 1.4;
}

/* ------------------ ESTILO DO TEXTO FINAL ------------------ */
.texto-final-sobre-nos {
    text-align: center;
    width: 100%;
    clear: both;
    margin-top: 30px;
    padding: 50px 0 20px;
    color: #000;
}

.texto-final-sobre-nos p {
    max-width: 800px;
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 1.5;
}

.texto-final-sobre-nos h1 {
    font-size: 70px;
    font-family: "Cormorant", serif;
    font-weight: 100;
    color: #d99343;
    margin: 0;
    letter-spacing: 5px;
}

/* ---------------------------------------------------- */
/* --- MEDIA QUERY (Mobile) - CORREÇÃO DE ORDEM PARA T, I, T, I... --- */
/* ---------------------------------------------------- */
@media screen and (max-width: 900px) {

    .sobre-nos {
        padding: 50px 0;
    }

    .sobre-nos-container {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
    }

    /* Redefine os blocos para 100% de largura no mobile */
    .grid-item {
        flex: 0 0 100%;
        width: 100%;
        height: auto;
    }

    /* ---------------------------------------------------------------------------------- */
    /* CORREÇÃO DE ORDEM (Order) para garantir TEXTO, IMAGEM, TEXTO, IMAGEM em todos os 8 blocos */
    /* A ordem do HTML é: I1, T1, I2, T2, T3, I3, T4, I4 */
    /* A ORDEM DESEJADA NO MOBILE É: T1, I1, T2, I2, T3, I3, T4, I4 */
    /* ---------------------------------------------------------------------------------- */

    /* Item 2 (T1) vem primeiro, Item 1 (I1) vem em segundo. */
    .sobre-nos-container .grid-item:nth-child(1) {
        order: 2;
    }

    /* I1 */
    .sobre-nos-container .grid-item:nth-child(2) {
        order: 1;
    }

    /* T1 */

    /* Item 4 (T2) vem terceiro, Item 3 (I2) vem quarto. */
    .sobre-nos-container .grid-item:nth-child(3) {
        order: 4;
    }

    /* I2 */
    .sobre-nos-container .grid-item:nth-child(4) {
        order: 3;
    }

    /* T2 */

    /* Item 5 (T3), Item 6 (I3), Item 7 (T4), Item 8 (I4) já estão na ordem T/I e seguem naturalmente. */
    .sobre-nos-container .grid-item:nth-child(5) {
        order: 5;
    }

    /* T3 */
    .sobre-nos-container .grid-item:nth-child(6) {
        order: 6;
    }

    /* I3 */
    .sobre-nos-container .grid-item:nth-child(7) {
        order: 7;
    }

    /* T4 */
    .sobre-nos-container .grid-item:nth-child(8) {
        order: 8;
    }

    /* I4 */


    .imagem-bloco {
        height: 250px;
    }

    .texto-bloco {
        padding: 30px 20px;
    }

    .texto-bloco h3 {
        font-size: 26px;
    }

    .texto-final-sobre-nos h1 {
        font-size: 40px;
        letter-spacing: 3px;
    }
}

/* --- RODAPÉ (FOOTER) --- */
footer {
    background-color: #1b241c;
    color: #d99343;
    padding-top: 50px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    /* Adicionado para quebrar as colunas em mobile */
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col {
    flex-basis: 20%;
    padding: 0 15px;
}

.footer-col h3 {
    font-size: 34px;
    font-weight: 10;
    color: #d99343;
    margin-bottom: 15px;
}

.footer-col p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 5px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 5px;
}

.footer-col a {
    color: #d99343;
    text-decoration: none;
    font-size: 21px;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: #d99343;
}

.social-icons {
    margin-top: 15px;
    display: flex;
    gap: 15px;
}

.social-icons i {
    font-size: 24px;
    color: #c0c0c0;
    transition: color 0.3s;
}

.social-icons i:hover {
    color: #d99343;
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    color: #888;
}

/* ======================================================= */
/* --- MEDIA QUERIES (ESTILOS RESPONSIVOS) --- */
/* ======================================================= */

/* ------------------------------------------------------- */
/* --- 1. TABLET (Max-width: 1024px) --- */
/* ------------------------------------------------------- */
@media screen and (max-width: 1024px) {

    /* Ajustes Gerais */
    .interface {
        padding: 0 30px;
    }

    /* HEADER */
    header .menu-desktop nav ul li {
        margin: 0 20px;
    }

    header .menu-desktop nav ul li a {
        font-size: 25px;
    }

    /* HERO SECTION */
    section.hero-site {
        height: 70vh;
    }

    .hero-site .txt-hero h1 {
        font-size: 3.5em;
        line-height: 50px;
        padding-left: 50px;
    }

    /* BARRA DE INFORMAÇÕES (3 COLUNAS) */
    .info-content {
        gap: 30px;
    }

    .info-item h2 {
        font-size: 30px;
    }

    .info-item p {
        font-size: 18px;
    }

    .separator-logo-img img {
        width: 30px;
    }

    /* DESTAQUES (Galeria) */
    .destaques-grid {
        gap: 15px;
    }

    .produto-card {
        flex-basis: calc(50% - 10px);
        /* 2 colunas */
    }

    /* BANNER CTA */
    .cta-banner {
        height: 350px;
    }

    .cta-content {
        padding: 0 50px;
    }

    .cta-banner h1 {
        font-size: 40px;
    }

    .cta-text-left,
    .cta-text-right {
        margin: 0 50px;
    }

    /* MARCAS (Logos) */
    .marcas-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .logo-box {
        height: 150px;
    }

    /* RODAPÉ */
    .footer-col {
        flex-basis: 50%;
        /* 2 colunas */
        margin-bottom: 25px;
    }

    .footer-col:nth-child(2n+1) {
        padding-right: 30px;
    }

    .footer-content {
        padding-bottom: 20px;
    }
}

/* ------------------------------------------------------- */
/* --- 2. MOBILE (Max-width: 767px) --- */
/* ------------------------------------------------------- */
@media screen and (max-width: 767px) {

    .interface {
        padding: 0 15px;
    }

    h2,
    .titulo-destaques,
    .titulo-marcas,
    .titulo-catalogo {
        font-size: 45px !important;
        margin-bottom: 30px;
    }

    /* HEADER (Ajuste da Interface do Cabeçalho e Botão) */
    header .interface {
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
    }

    /* [NOVO] 1. DIMINUIR LOGO NO HEADER */
    /* ATENÇÃO: Se a sua logo tiver outro seletor, substitua '.logo-main' */
    header .logo-main {
        width: 20px;
        /* Muito pequeno, e provavelmente o seletor não está forte o suficiente */
        height: auto;
    }

    header .interface img {
        width: 40px;
        /* Esta é uma boa tentativa, mas afeta todas as <img> no header */
        height: auto;
    }

    /* ESCONDE O MENU DESKTOP NO MOBILE */
    .menu-desktop {
        display: none;
    }

    /* MOSTRA O BOTÃO DE ABRIR MENU */
    .btn-abrir-menu {
        display: block;
        color: #d99343;
        font-size: 35px;
        cursor: pointer;
        z-index: 1001;
    }

    /* CORREÇÃO: BARRA DE INFORMAÇÕES (Remove a posição fixa no mobile) */
    .info-barra {
        position: static;
        bottom: auto;
        left: auto;
        padding: 20px 0;
    }

    /* HERO SECTION (Com a correção de max-width e padding-top) */
    section.hero-site {
        height: 80vh;
        background-position: 70% center;
        padding-top: 0;
    }

    /* Título Principal (Onde a frase está) - AJUSTE FINAL */
    .hero-site .txt-hero h1 {
        font-size: 2.6em;
        line-height: 43px;
        /*AQUIIIIIIIIIIIIIIIIIIIIIII HEADER TEXTO*/
        padding-right: 0;

        /* CHAVE: LIMITA A LARGURA para dar espaço ao relógio à direita */
        max-width: 100%;
        /* Reduzido de 70% para 55% */

        /* CHAVE: Empurra o texto para CIMA */
        padding-top: 3vh;
        /* Reduzido de 15vh para 5vh */

        /* ALINHAMENTO */
        text-align: left;
        padding-left: 10px;
    }

    /* Garante que o container comece o mais alto possível */
    .hero-site .interface {
        justify-content: flex-start;
        align-items: flex-start;
        /* CHAVE: Começa o conteúdo no topo */
    }

    /* BARRA DE INFORMAÇÕES (Empilhamento Vertical) */
    /* BARRA DE INFORMAÇÕES (Empilhamento e Separador) */
    .info-content {
        flex-direction: column;
        /* CHAVE: Empilha os 3 itens verticalmente */
        gap: 0;
    }

    /* 1. MOSTRAR E CENTRALIZAR O SEPARADOR DE LOGO QUE JÁ EXISTE NO HTML */
    .separator-logo-img {
        display: block !important;
        /* FORÇA a exibição do container da logo */
        text-align: center;
        padding: 15px 0;
        /* Espaçamento entre o bloco de texto e a logo */
        width: 100%;
    }

    .separator-logo-img img {
        width: 25px;
        /* Define o tamanho da imagem da logo */
        height: auto;
    }

    /* 2. OCULTAR O ÚLTIMO SEPARADOR (GARANTIA) */
    /* Selecionamos o último elemento com a classe info-item e o SEGUINTE .separator-logo-img */
    .info-content .info-item:last-child+.separator-logo-img {
        display: none !important;
    }

    /* 3. REGRAS INTERNAS DO ITEM DE TEXTO */
    .info-item {
        width: 100%;
        text-align: center;
        padding: 15px 0 0 0;
        /* Ajusta o padding para a logo aparecer ABAIXO */
        display: block;
        /* Volta para o comportamento de bloco simples, centralizado por text-align */
    }

    .info-item h2 {
        font-size: 25px;
        margin-bottom: 5px;
    }

    .info-item p {
        font-size: 16px;
        margin-bottom: 0;
        /* Remove a margem para a logo ficar próxima */
    }

    /* ESTILO DA LOGO PEQUENA PARA SER O SEPARADOR INFERIOR */
    .info-item .info-logo {
        display: block !important;
        /* FORÇA a exibição da logo como separador */
        width: 25px;
        height: auto;

        /* Adiciona um espaçamento GRANDE abaixo da logo para separar o item do próximo */
        margin-bottom: 30px;
    }

    /* Esconder o separador da ÚLTIMA coluna */
    .info-item:last-child .info-logo {
        display: none !important;
        margin-bottom: 0;
    }

    /* DESTAQUES (Galeria) */
    .destaques-grid {
        gap: 10px;
    }

    .produto-card {
        flex-basis: 100%;
        max-width: 350px;
        margin: 0 auto;
    }

    .produto-img {
        height: 250px;
    }

    .produto-card h4,
    .produto-card p {
        text-align: center;
    }

    /* --- Dentro do seu @media (max-width: 767px) --- */

    @media (max-width: 767px) {

        /* 1. Altera a direção do Flexbox para empilhar verticalmente e centralizar TUDO */
        .sugestoes-dentro-destaque .sugestoes-header-flex {
            display: flex;
            /* Garante que ainda é um Flexbox */
            flex-direction: column;
            /* Empilha o título e o botão */
            align-items: center;
            /* Centraliza horizontalmente todos os itens (título e botão) */
            justify-content: center;
            /* (Opcional, mas bom para garantir) */
            width: 100%;
        }

        /* 2. Remove o width: 100% e text-align: center do título, pois o 'align-items: center' já fará o trabalho */
        .sugestoes-dentro-destaque .titulo-sugestoes-dentro {
            text-align: center;
            /* Deixe apenas para garantir que o texto dentro do h2 esteja centralizado */
            margin-bottom: 10px;
            /* Mantém o espaçamento, se houver */
            /* Remova qualquer `width: 100%;` ou `float` aqui */
        }

        /* 3. Garante que o contêiner do botão não cause problemas */
        .sugestoes-dentro-destaque .btn-ver-todos-container-mobile {
            /* Se o align-items: center já centralizou o contêiner, esta regra é opcional */
            /* Se for necessária, use: */
            /* width: auto; */
            /* text-align: center; */
        }
    }

    /* BANNER CTA */
    .cta-banner {
        height: 250px;
    }

    .cta-content {
        flex-direction: column;
        justify-content: center;
        padding: 0 15px;
    }

    .cta-text-left,
    .cta-text-right {
        margin: 5px 0;
        text-align: center;
        width: 100%;
    }

    .cta-banner h1 {
        font-size: 30px;
    }

    /* MARCAS (Logos) */
    .marcas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .logo-box {
        height: 100px;
    }

    /* ======================================================= */
    /* --- SEÇÃO: SUGESTÕES DENTRO DE DESTAQUES (Mobile - Botão Centralizado) --- */
    /* ======================================================= */

    /* MOSTRAR E CENTRALIZAR O BOTÃO MOBILE */
    .btn-ver-todos-container-mobile {
        /* CHAVE: Reverte para 'block' para desativar o flexbox do desktop */
        display: block;

        text-align: center;
        padding-top: 30px;
        padding-bottom: 30px;
        /* Limpa alinhamentos do desktop */
        margin: 0 auto;
        padding-right: 0;
    }

    /* BOTÃO (Centralizado e com largura limitada) */
    .btn-ver-todos-container-mobile .btn-ver-todos {
        /* Garante que o botão use as regras do .btn-ver-todos original */
        display: inline-flex;
        width: 100%;
        max-width: 200px;
        justify-content: center;
        align-items: center;
    }

    /* GRID (Para carrossel) */
    .sugestoes-grid {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        padding: 0 15px 40px 15px;
        gap: 20px;
    }

    /* RODAPÉ (FOOTER) - CENTRALIZAÇÃO TOTAL */
    .footer-content {
        flex-direction: column;
        padding-bottom: 0;
        /* Centraliza as colunas de forma geral */
        align-items: center;
    }

    .footer-col {
        flex-basis: 100%;
        padding: 0 15px 30px 15px;

        /* CHAVE: Centraliza o texto dentro da coluna */
        text-align: center;

        /* Garante que o conteúdo interno (links) possa ser centralizado */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-col h3 {
        font-size: 30px;
    }

    /* GARANTE QUE QUALQUER TEXTO/LINK INTERNO SEJA CENTRALIZADO */
    .footer-col p,
    .footer-col a {
        text-align: center;
        width: 100%;
        /* Permite que o link seja centralizado se for display: block */
    }

    .social-icons {
        /* Já centraliza ícones se o social-icons for display: flex */
        justify-content: center;
    }

    /* ------------------------------------------------------- */
    /* --- ESTILOS DO MENU LATERAL APENAS NO MOBILE (COM CORREÇÃO) --- */
    /* ------------------------------------------------------- */

    /* 2. Estilo do Menu Lateral (ID 'menu-mobile') */
    #menu-mobile {
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100vh;
        background-color: #1b241c;
        z-index: 1000;
        transition: right 0.4s ease-in-out;
        padding-top: 80px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);

        opacity: 0;
        visibility: hidden;
        display: block !important;
    }

    /* ESTADO ABERTO (Adicionado pelo JS) */
    #menu-mobile.aberto {
        right: 0;
        opacity: 1;
        visibility: visible;
    }

    /* Estilizando os links para ficarem verticais */
    #menu-mobile nav ul {
        display: block;
        text-align: center;
        padding: 0;
    }

    #menu-mobile nav ul li {
        display: block;
        margin: 20px 0;
    }

    #menu-mobile nav ul li a {
        font-size: 35px;
        padding: 10px 0;
        display: block;
        color: #d99343;
    }
}


/* ------------------------------------------------------- */
/* --- ESTILOS DO OVERLAY (FORA DA MEDIA QUERY) --- */
/* ------------------------------------------------------- */
/* Este bloco deve ficar fora do @media */

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    backdrop-filter: blur(3px);
}


/* ------------------------------------------- */
/* ESTILOS ESPECÍFICOS DA PÁGINA DE PRODUTO (Dark Theme) */
/* ------------------------------------------- */
/* Estilos de Tema e Fundo */
/* ------------------------------------------- */
/* ESTILOS ESPECÍFICOS DA PÁGINA DE PRODUTO (Dark Theme) */
/* ------------------------------------------- */
/* ------------------------------------------- */
/* ESTILOS ESPECÍFICOS DA PÁGINA DE PRODUTO (Dark Theme) */
/* ------------------------------------------- */
/* ------------------------------------------- */
/* ESTILOS ESPECÍFICOS DA PÁGINA DE PRODUTO (Dark Theme) */
/* ------------------------------------------- */
/* ------------------------------------------- */
/* ESTILOS ESPECÍFICOS DA PÁGINA DE PRODUTO (Dark Theme) */
/* ------------------------------------------- */
/* Estilos de Tema e Fundo */
body.produto-page-dark {
    background-color: #ffffff;
    animation: none;
    color: #000;
    font-family: "Cormorant", serif;
}

/* ------------------------------------------- */
/* AJUSTES DE ALINHAMENTO DO TÍTULO E CONTEÚDO */
/* ------------------------------------------- */

/* Adicione esta regra ao seu style.css, de preferência junto com os estilos .produto-page-dark */
.produto-page-dark header {
    background-color: #1b241c;
    /* Esta linha garante que a barra superior completa (header) seja escura. */
}


/* Categoria (Marca) - NOVO */
.produto-page-dark .produto-categoria {
    font-size: 14px;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/* Títulos: Cores e Fontes */
.produto-page-dark h1 {
    color: #d99343;
    font-family: "Cormorant", serif;
    font-size: 52px;
    /* AJUSTADO: Reduz a margem inferior para dar lugar ao divisor */
    margin-bottom: 5px;
    padding-top: 0;
    /* Necessário para posicionar o ::after (linha) */
    position: relative;
}

/* NOVIDADE: Linha Divisória (Adicionada via CSS após o H1) */
.produto-page-dark h1::after {
    content: "";
    display: block;

    /* CHAVE: Defina a largura exata. Mude 500px para o valor desejado. */
    width: 800px;
    max-width: 100%;

    height: 1px;
    background-color: #333;
    margin-top: 10px;
    margin-bottom: 25px;
}


/* Estilo para a SEÇÃO que contém o H1 (MANTIDO o seletor, mas ajuste desativado no formato novo) */
.produto-page-dark .header-produto {
    /* ADICIONA ESPAÇO DO TOPO DO HEADER */
    padding-top: 40px;

    /* CHAVE DE ALINHAMENTO HORIZONTAL: 5% */
    padding-left: 5%;

    /* Margem negativa para PUXAR a próxima seção (conteudo-principal-produto) para cima */
    margin-bottom: -15px;
}

/* Container Principal (Flexbox) */
.produto-page-dark .conteudo-principal-produto {
    display: flex;
    gap: 70px;
    flex-wrap: wrap;

    /* CHAVE DE ALINHAMENTO HORIZONTAL: DEVE SER IGUAL AO header-produto (5%) */
    padding-left: 5%;

    /* ########### AQUI ESTÁ O AJUSTE PRINCIPAL ########### */
    /* Aumenta o padding-top para EMPURRAR o conteúdo principal para baixo */
    padding-top: 50px;

    padding-bottom: 25px;
    justify-content: flex-start;
    align-items: flex-start;
}


/* ------------------------------------------- */
/* Preço, Subtítulos e Info */
/* ------------------------------------------- */

/* Preço (H2) - ATUALIZADO para o novo design */
.produto-page-dark .info-container h2 {
    color: #000;
    font-family: "Cormorant", serif;
    font-size: 32px;
    font-weight: bold;
    /* ATUALIZADO: A margem superior é 0, pois o espaçamento é dado pelo ::after do H1 */
    margin-top: 0;
    margin-bottom: 5px;
}

/* Subtítulos de detalhes (H3) - ATUALIZADO para o novo design */
.produto-page-dark h3 {
    color: #d99343;
    font-family: "Cormorant", serif;
    font-size: 20px;
    font-weight: bold;
    margin-top: 35px;
    margin-bottom: 10px;
}

/* ------------------------------------------- */
/* 10% OFF NO PIX e Status */
/* ------------------------------------------- */

.produto-page-dark .pix-tag-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #1a1a1a;
    /* Linha sutil de separação */
}

.produto-page-dark .btn-pix-desconto {
    display: flex;
    align-items: center;
    background-color: #d99343;
    /* Azul vibrante para destacar */
    color: #000;
    font-size: 18px;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: default;
}

.produto-page-dark .btn-pix-desconto i {
    margin-right: 8px;
    font-size: 18px;
}

/* Garante que o status fique alinhado */
.produto-page-dark .tag-status {
    font-size: 17px;
    margin-left: 0;
}


/* ------------------------------------------- */
/* DETALHES TÉCNICOS COM ÍCONES (GRID) - NOVO */
/* ------------------------------------------- */

.produto-page-dark .detalhes-grid-box {
    display: grid;
    /* 2 colunas */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #28372a;
}

.produto-page-dark .detalhe-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.produto-page-dark .detalhe-item i {
    color: #d99343;
    /* Ícone em cor de destaque */
    font-size: 18px;
}

.produto-page-dark .detalhe-item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

.produto-page-dark .detalhe-item strong {
    font-weight: bold;
    color: #000;
}


/* ------------------------------------------- */
/* CONTAINER DE MÍDIA (CARROSSEL COM ZOOM DE HOVER) - ATUALIZADO */
/* ------------------------------------------- */
.produto-page-dark .media-container {
    max-width: 450px;
    /* Largura máxima: 450px */
    width: 100%;

    /* ########### AJUSTES PARA AUMENTAR ALTURA E ALINHAMENTO ########### */
    /* Empurra o container da imagem para baixo, 50px de distância do título. */
    margin-top: 10px;
    /* Reduzido de 100px para alinhar melhor com o conteúdo */

    /* Aumenta a altura máxima do contêiner para estender até o "Saiba mais" */
    max-height: 800px;
    /* Aumentado para dar mais destaque */

    position: relative;
    background-color: transparent;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    cursor: zoom-in;
    border-radius: 5px;
}

/* Garante que o container das imagens (carousel-images) ocupe a altura total */
.produto-page-dark .carousel-images {
    display: block;
    width: 100%;
    /* Altura será herdada do media-container (800px) */
    height: 100%;
    overflow: hidden;
}

/* Estilo para cada imagem (SLIDE) */
.produto-page-dark .slide-img {
    width: 100%;
    /* A imagem ocupará a largura total do contêiner (450px) */

    /* CHAVE PARA AUMENTAR O TAMANHO DO RELÓGIO */
    /* 'cover' faz com que a imagem preencha o espaço, ampliando o relógio. */
    object-fit: cover;

    height: 100%;
    display: none;
    display: block;
    transition: transform 0.3s ease;
}

/* Estilo para o zoom: Aumenta a imagem ao passar o mouse */
.produto-page-dark .slide-img:hover {
    /* CHAVE 2: Aumenta a imagem em 5% */
    transform: scale(1.05);
}

/* ------------------------------------------- */
/* Estilos da Lupa (Se você NÃO for usá-la, pode apagar este bloco) */
/* ------------------------------------------- */
#lupa-resultado {
    display: none;
    /* Desabilita a Lupa do JavaScript, focamos no zoom de hover */
}


/* Botões de navegação (Setas) */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #d99343;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    transition: background-color 0.3s;
}

.carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev-btn {
    left: 0;
    border-radius: 0 5px 5px 0;
}

.next-btn {
    right: 0;
    border-radius: 5px 0 0 5px;
}

/* Indicadores (Dots) */
.carousel-dots {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 4px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.dot.active {
    background-color: #d99343;
    /* Cor dourada/laranja ativa */
}


/* ------------------------------------------- */
/* CONTAINER DE INFORMAÇÕES (TEXTO) - REFINADO */
/* ------------------------------------------- */
.produto-page-dark .info-container {
    flex: 2;
    min-width: 300px;
    max-width: 700px;
    margin-top: 0;
    /* Garante alinhamento topo */
}

/* Estilo do Status (Disponível/Esgotado) */
.produto-page-dark .tag-status {
    font-weight: bold;
    color: #25D366;
}

.produto-page-dark .tag-status.esgotado {
    color: #cc0000;
}

/* Estilo da Descrição e Listas - REFINADO */
.produto-page-dark .info-container p {
    line-height: 1.6;
    /* MUDANÇA: Um pouco mais apertado */
    margin-bottom: 12px;
    /* MUDANÇA: Menor espaçamento */
    font-size: 17px;
    /* MUDANÇA: Levemente menor */
    color: #d99343;
    /* MUDANÇA: Cor mais clara para o texto principal */
}

.produto-page-dark .info-container ul {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

.produto-page-dark .info-container ul li {
    margin-bottom: 8px;
    font-size: 17px;
    /* MUDANÇA: Corrigido */
    line-height: 1.5;
}

.produto-page-dark .info-container strong {
    color: #000;
    /* Ajustado para ser mais visível */
    font-weight: bold;
}


/* ------------------------------------------- */
/* BOTÃO WHATSAPP - NOVO ESTILO */
/* ------------------------------------------- */
.produto-page-dark .btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366;
    /* Cor do WhatsApp */
    color: white;
    font-size: 18px;
    padding: 14px 30px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    margin-top: 20px;
    /* Espaçamento acima do botão */
    text-decoration: none;
    /* Para garantir que links usem o estilo */
}

.produto-page-dark .btn-whatsapp i {
    margin-right: 10px;
    font-size: 20px;
}

.produto-page-dark .btn-whatsapp:hover {
    background-color: #1DA851;
    /* Tom mais escuro no hover */
    transform: translateY(-2px);
}

/* Estilo específico para o botão WhatsApp na seção "Compramos" */
/* MUDANÇA: Ajusta o espaçamento para Realizar Oferta */
.compramos-aviso .btn-whatsapp {
    margin-top: 30px;
    max-width: 350px;
    /* Limita a largura do botão na seção Compramos */
}

/* ------------------------------------------- */
/* BOTÕES DE COMPRA E BLOCO ESGOTADO (Antigos) */
/* ------------------------------------------- */

/* Container do Botão (para limitar a largura e aplicar o estado Esgotado) */
.produto-page-dark .box-compra {
    max-width: 350px;
    width: 100%;
    /* Ajusta a margem para ficar mais próximo do bloco de detalhes */
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Estilos antigos escondidos (seletor 'btn-carrinho' ou 'btn-comprar') */
.produto-page-dark .btn-carrinho,
.produto-page-dark .btn-comprar {
    display: none;
    /* Esconde os botões antigos de compra/carrinho */
}

/* Estilo do botão/placeholder quando está esgotado (Adapta-se ao novo contexto) */
.produto-page-dark .box-compra.esgotado .btn-whatsapp {
    /* Oculta o botão principal de compra quando esgotado */
    display: none;
}

.produto-page-dark .box-compra.esgotado .btn-esgotado-placeholder {
    display: block;
    background-color: #1a1a1a;
    color: #000;
    text-align: center;
    font-size: 18px;
    padding: 14px 30px;
    border: 1px solid #333;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: bold;
}


/* ------------------------------------------- */
/* PAINEL ACORDEÃO (Especificações/Descrição) */
/* ------------------------------------------- */

.produto-page-dark .painel-acordeao {
    width: 100%;
    margin-top: 30px;
    border: 1px solid #28372a;
    border-radius: 5px;
    overflow: hidden;
    /* Para garantir que o border-radius funcione */
}

.produto-page-dark .acordeao-item {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #28372a;
    color: #f0f0f0;
}

.produto-page-dark .acordeao-item:last-child {
    border-bottom: none;
}

.produto-page-dark .acordeao-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    font-weight: bold;
    color: #000;
    padding: 15px 20px;
    cursor: pointer;
    /* Remove a marcação padrão de detalhe */
    list-style: none;
}

.produto-page-dark .acordeao-item summary:hover {
    background-color: #d99343;
}

.produto-page-dark .acordeao-item summary i {
    /* Ícone de seta para indicar o estado */
    transition: transform 0.3s ease;
}

.produto-page-dark .acordeao-item[open] summary i {
    transform: rotate(180deg);
}

.produto-page-dark .acordeao-item p,
.produto-page-dark .acordeao-item ul {
    /* Conteúdo interno */
    padding: 0 20px 15px 20px;
    font-size: 16px;
    color: #000;
    line-height: 1.6;
    margin: 0;
}

.produto-page-dark .acordeao-item ul {
    list-style-type: none;
}

.produto-page-dark .acordeao-item ul li {
    margin-bottom: 5px;
}

.produto-page-dark .aviso-estoque {
    padding-top: 0;
    margin-top: 0;
}

/* ----------------------------------------------------- */
/* ESTILOS DA SEÇÃO COMPRAMOS SEU RELÓGIO À VISTA */
/* ----------------------------------------------------- */

.compramos-aviso {
    /* Fundo em cor creme/bege para contraste */
    background-color: #fff;
    padding: 60px 0;
    margin-top: 50px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* Container de largura menor, para centralizar o bloco de aviso */
.compramos-aviso .interface-pequena {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
    /* Padding em mobile */
}

/* Título Serifado (Elegantemente maior) */
.compramos-aviso .titulo-aviso {
    font-family: 'Cormorant', serif;
    font-size: 48px;
    color: #1b241c;
    /* Cor do Dark Theme */
    text-align: left;
    margin-bottom: 40px;
}

/* Estrutura Flex para Texto e Imagem */
.compramos-aviso .aviso-flex-content {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.compramos-aviso .aviso-texto {
    flex: 1;
    font-size: 17px;
    line-height: 1.6;
    color: #444;
    /* Texto escuro no fundo claro */
}

.compramos-aviso .aviso-texto p {
    margin-bottom: 15px;
}

.compramos-aviso .aviso-imagem {
    flex: 1;
    max-width: 45%;
    /* Garante que a imagem não seja maior que a metade */
}

.compramos-aviso .aviso-imagem img {
    width: 130%;
    height: auto;
    display: block;
    border-radius: 5px;
    /* Borda sutil */
}

/* Botão de Ação Antigo (Agora escondido, substituído pelo btn-whatsapp) */
.compramos-aviso .btn-aviso-oferta {
    display: none;
}


/* ------------------------------------------- */
/* ESTILOS DA SEÇÃO DE SUGESTÕES (VOÇÊ TAMBÉM PODE GOSTAR) */
/* ------------------------------------------- */

/* Título "Você também pode gostar" */
.sugestoes-produto-page h2 {
    font-family: 'Cormorant', serif;
    font-size: 32px;
    font-weight: bold;
    color: #000;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

/* Container da seção inteira */
.sugestoes-produto-page {
    padding: 50px 0;
    background-color: #ffffff;
    /* Fundo branco ou neutro */
    border-top: 1px solid #eee;
}

/* Ajuste de largura da interface para centralização */
.sugestoes-produto-page .interface {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* O container que força a rolagem horizontal */
.sugestoes-produto-page .sugestoes-grid {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
    /* Impede que os itens quebrem a linha */
    overflow-x: auto;
    /* CHAVE: Habilita a rolagem horizontal quando necessário */
    padding-bottom: 20px;
    /* Espaço para a barra de rolagem horizontal */
    -webkit-overflow-scrolling: touch;
    /* Melhora a rolagem em iOS */
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #d99343 #f0f0f0;
    /* Firefox */
}

/* Estilizando a barra de rolagem (WebKit - Chrome, Safari) */
.sugestoes-produto-page .sugestoes-grid::-webkit-scrollbar {
    height: 8px;
}

.sugestoes-produto-page .sugestoes-grid::-webkit-scrollbar-track {
    background: #e0e0e0;
    /* Fundo da barra (cinza claro) */
    border-radius: 10px;
}

.sugestoes-produto-page .sugestoes-grid::-webkit-scrollbar-thumb {
    background-color: #d99343;
    /* Cor do controle (dourado) */
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

/* Estilo do Card de Sugestão */
.sugestoes-produto-page .produto-card.card-sugestao {
    flex: 0 0 auto;
    /* Não cresce, não encolhe, base automática */
    width: 250px;
    /* Largura padrão em desktop */
    min-width: 250px;
    /* Garante que não encolha */
    padding: 15px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.sugestoes-produto-page .produto-card.card-sugestao:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.sugestoes-produto-page .produto-card img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 15px;
}

.sugestoes-produto-page .produto-card h3 {
    font-size: 18px;
    color: #1a1a1a;
    margin-top: 5px;
    margin-bottom: 5px;
}

.sugestoes-produto-page .produto-card p {
    font-size: 14px;
    color: #555;
    margin: 3px 0;
}

/* Estilo para o botão Ver Todos (novo) */
.sugestoes-produto-page .btn-ver-todos {
    display: block;
    width: 180px;
    margin: 0 auto 30px auto;
    padding: 10px 20px;
    text-align: center;
    color: #d99343;
    border: 1px solid #d99343;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.sugestoes-produto-page .btn-ver-todos:hover {
    background-color: #d99343;
    color: #fff;
}


/* ------------------------------------------- */
/* RESPONSIVIDADE (COM CORREÇÕES FINAIS) */
/* ------------------------------------------- */

/* Para telas maiores que mobile */
@media (max-width: 1100px) {

    /* Em telas médias, o cursor deve ser de zoom para indicar a possibilidade de clique (se você implementar um lightbox de fallback) */
    .produto-page-dark .media-container {
        cursor: zoom-in;
    }

    /* Reduz a largura do card de sugestão em telas médias */
    .sugestoes-produto-page .produto-card.card-sugestao {
        width: 220px;
        min-width: 220px;
    }
}

/* Para telas de celular */
@media (max-width: 800px) {
    .produto-page-dark .conteudo-principal-produto {
        flex-direction: column;
        gap: 30px;
        /* Remove o efeito de margem negativa em mobile para melhor fluxo */
        margin-top: 0;
        /* CORREÇÃO CHAVE: Define o padding-left/right para usar o .interface mobile */
        padding-left: 15px;
        padding-right: 15px;
        /* VOLTOU para 0 */
        padding-top: 30px;
        /* Garante que o conteúdo ocupe a largura total */
        width: 100%;
        max-width: 100%;
    }

    .produto-page-dark .header-produto {
        padding-top: 30px;
        /* Reduz o espaço do topo */
        margin-bottom: 0;
        /* Remove a margem negativa em mobile */
        /* CORREÇÃO CHAVE: Define o padding-left/right para usar o .interface mobile */
        padding-left: 15px;
        padding-right: 15px;
    }

    .produto-page-dark h1 {
        font-size: 38px;
        padding-top: 0;
    }

    /* NOVIDADE: Ajusta a largura da linha divisória em mobile */
    .produto-page-dark h1::after {
        max-width: 100%;
        /* CORREÇÃO CHAVE: Permite que a linha se ajuste ao container */
        width: 100%;
    }


    .produto-page-dark .info-container h2 {
        font-size: 30px;
    }

    /* A imagem pode ocupar mais espaço em mobile */
    .produto-page-dark .media-container {
        max-width: 100%;
        /* Garante que o container ocupe a largura total da tela (menos padding) */
        width: 100%;
        /* CORREÇÃO CHAVE: Remove o espaçamento forçado de desktop */
        margin-top: 0;
        /* Reduz a altura máxima para que a imagem não fique excessivamente grande */
        max-height: 450px;
    }

    /* Garante que o container de informações também use a largura total */
    .produto-page-dark .info-container {
        width: 100%;
        max-width: 100%;
    }

    /* Em mobile, a grade de detalhes técnicos fica em 1 coluna */
    .produto-page-dark .detalhes-grid-box {
        grid-template-columns: 1fr;
    }

    /* Ajuste de tamanho dos botões do carrossel em mobile */
    .carousel-btn {
        padding: 5px;
        font-size: 16px;
    }

    /* RESPONSIVIDADE PARA A NOVA SEÇÃO COMPRAMOS */
    .compramos-aviso {
        padding: 40px 0;
    }

    .compramos-aviso .titulo-aviso {
        font-size: 36px;
        text-align: center;
        margin-bottom: 30px;
    }

    .compramos-aviso .aviso-flex-content {
        flex-direction: column-reverse;
        /* Coloca a imagem acima do texto em mobile */
        gap: 30px;
    }

    .compramos-aviso .aviso-imagem {
        max-width: 100%;
        /* Imagem ocupa toda a largura */
    }

    /* O botão WhatsApp na seção Compramos deve ocupar a largura total em mobile */
    .compramos-aviso .btn-whatsapp {
        max-width: 100%;
    }

    /* CORREÇÕES CHAVE PARA A ROLAGEM HORIZONTAL E O TÍTULO DA SUGESTÃO */

    /* 1. Título "Você também pode gostar" alinhado à esquerda em mobile */
    .sugestoes-produto-page h2 {
        text-align: left;
        /* CORREÇÃO: Usar padding-left para o container interface no mobile (veja item 2) */
        margin-left: 0;
        padding-left: 15px;
        /* Adiciona o padding para alinhar com o conteúdo principal */
    }

    /* 2. Container da seção inteira sem padding lateral para que o grid com overflow-x funcione */
    .sugestoes-produto-page .interface {
        padding: 0;
        /* O padding lateral deve ser 0 aqui para que o grid interno rolável ocupe 100% da largura e o padding esquerdo/direito funcione na rolagem. */
    }

    /* 3. Ajuste do card em mobile */
    .sugestoes-produto-page .produto-card.card-sugestao {
        width: 180px;
        min-width: 180px;
    }

    /* 4. Grid de Sugestões: Garante que o padding lateral seja aplicado dentro do grid que rola */
    .sugestoes-produto-page .sugestoes-grid {
        padding-left: 15px;
        padding-right: 15px;
        gap: 20px;
        /* Adicionado um espaçamento extra entre os cards para melhor visualização */
    }
}

/* --- Dentro do seu @media (max-width: 767px) --- */


@media (max-width: 767px) {

    /* Regra de Centralização para o título "Você também pode gostar" */
    .destaques .interface h2.titulo-sugestoes-dentro {
        /* ESSENCIAL: Garante que o texto dentro do <h2> fique centralizado */
        text-align: center;
        color: #555;
        font-size: 10px;
        font-weight: 400;

        /* MUITO IMPORTANTE: Se o <h2> estiver flutuando (float) ou 
           não ocupando 100% da largura do contêiner pai (.interface), 
           adicione esta linha: */
        width: 100%;

        /* Opcional: Se houver margem lateral impedindo o alinhamento */
        margin-left: 0;
        margin-right: 0;
    }

    /* ... outras regras mobile ... */
}