/* ------------------------- */
 /* --- Variáveis Globais --- */
 /* ------------------------- */
 :root {
     --primary-gold: #C1A14F;
     /* Cor dourada principal */
     --accent-green: #3aaa7c;
     /* Cor do botão "whatsapp" */
     --dark-text: #3a3a3a;
     --light-text: #fdfdfd;
     --body-bg: #fdfcf9;
     /* Fundo levemente off-white */

     --heading-font: 'Cormorant Garamond', serif;
     --body-font: 'Montserrat', sans-serif;
 }

 body {
     font-family: var(--body-font);
     background-color: var(--body-bg);
     color: var(--dark-text);
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--heading-font);
     font-weight: 700;
     text-transform: uppercase;
 }

 h2 {
     font-size: 2.5rem;
     /* 40px */
 }

 .btn {
     border-radius: 50px;
     padding: 0.75rem 2rem;
     font-weight: 700;
     text-transform: uppercase;
     font-size: 0.9rem;
     letter-spacing: 0.5px;
     border: none;
 }

 .btn-gold {
     background-color: var(--primary-gold);
     color: white;
     transition: all 0.3s ease;
 }

 .btn-gold:hover {
     background-color: #a3895e;
     color: white;
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .btn-green {
     background-color: var(--accent-green);
     color: white;
     transition: all 0.3s ease;
 }

 .btn-green:hover {
     background-color: #32926a;
     color: white;
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .section-padding {
     padding: 5rem 0;
 }

 /* ------------------------- */
 /* --- Seção Hero --- */
 /* ------------------------- */
 .hero {
     position: relative;
     overflow: hidden;
     /* Contém o pseudo-elemento */
     padding: 4rem 0;
 }

 /* Círculo dourado decorativo no fundo */
 .hero::before {
     content: '';
     position: absolute;
     top: -250px;
     right: -250px;
     width: 800px;
     height: 800px;
     background: var(--primary-gold);
     border-radius: 50%;
     z-index: 0;
     opacity: 0.9;
 }

 .hero .container {
     position: relative;
     z-index: 1;
     /* Garante que o conteúdo fique sobre o fundo */
 }

 .hero-content .brand-logo {
     font-family: var(--heading-font);
     font-size: 3rem;
     font-weight: 700;
     color: var(--primary-gold);
     line-height: 1;
 }

 .hero-content .brand-tagline {
     font-size: 0.9rem;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-top: -10px;
     margin-bottom: 2rem;
 }

 .hero-content h1 {
     font-size: 2.5rem;
     color: var(--primary-gold);
 }

 .hero-content .sub-heading {
     font-size: 1.2rem;
     color: #555;
     margin-bottom: 2rem;
 }

 .hero-form .form-control {
     border-radius: 10px;
     border: 1px solid #ddd;
     padding: 0.75rem 1rem;
 }

 .hero-image-gallery img {
     border-radius: 15px;
     /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);*/
 }
 .main-hero-image{
    width: 455px;
 }

 .hero-thumbnails {
     display: flex;
     gap: 1rem;
     margin-top: 1.5rem;
 }

 .hero-thumbnails img {
     width: 163px;
     height: 163px;
     object-fit: cover;
     /*border: 2px solid var(--primary-gold);*/
 }

 /* ------------------------- */
 /* --- Seção Ticker --- */
 /* ------------------------- */
 .ticker {
     background-color: var(--primary-gold);
     color: white;
     padding: 0.75rem 0;
     overflow: hidden;
     white-space: nowrap;
 }

 .ticker-content {
     display: inline-block;
     animation: marquee 30s linear infinite;
 }

 .ticker-item {
     display: inline-block;
     margin: 0 2rem;
     font-size: 0.9rem;
     font-weight: 500;
 }

 .ticker-item i {
     margin-right: 0.5rem;
 }

 @keyframes marquee {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }

     /* Move por 50% (tamanho de 1 bloco) */
 }

 /* ------------------------- */
 /* --- Seção "Limiting" --- */
 /* ------------------------- */
 .limiting-experience h2 {
     color: var(--primary-gold);
     margin-bottom: 1.5rem;
 }

 .limiting-experience p {
     font-size: 1.1rem;
     line-height: 1.7;
 }

 .limiting-experience .sub-link {
     display: block;
     margin-top: 2rem;
     color: var(--dark-text);
     text-decoration: none;
     font-weight: 700;
     font-size: 1.1rem;
 }

 .limiting-experience .sub-link i {
     color: var(--primary-gold);
     margin-left: 0.5rem;
 }

 /* ------------------------- */
 /* --- Seção "Solution" --- */
 /* ------------------------- */
 .solution {
     text-align: center;
 }

 .solution h2 {
     color: var(--primary-gold);
     margin-bottom: 3rem;
 }

 .features-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1.5rem;
     margin-bottom: 3rem;
 }

 .feature-box {
     background-color: var(--primary-gold);
     color: white;
     border-radius: 15px;
     padding: 2rem;
     width: 320px;
     /* Largura fixa para caixas */
     box-shadow: 0 5px 15px rgba(185, 154, 106, 0.3);
     text-align: center;
 }

 .feature-box-icon {
     width: 60px;
     height: 60px;
     margin-bottom: 1rem;
 }

 .feature-box h3 {
     font-family: var(--body-font);
     font-size: 1.1rem;
     font-weight: 700;
 }

 /* ------------------------- */
 /* --- Seção "Diferenciais" --- */
 /* ------------------------- */
 .diferenciais {
     text-align: center;
 }

 .diferenciais img {
     max-width: 450px;
     margin-bottom: 2rem;
 }

 .diferenciais h2 {
     margin-bottom: 2rem;
 }

 .diferenciais-list {
     list-style: none;
     padding-left: 0;
     display: inline-block;
     /* Para centralizar a lista */
     text-align: left;
 }

 .diferenciais-list li {
     font-size: 1.1rem;
     margin-bottom: 1rem;
 }

 .diferenciais-list i {
     color: var(--primary-gold);
     margin-right: 0.75rem;
 }
 .diferenciais img {
    margin: auto;
 }

 /* ------------------------- */
 /* --- Seção "Depoimentos" --- */
 /* ------------------------- */
 .depoimentos {
     background-color: var(--primary-gold);
     color: var(--light-text);
 }

 .depoimentos h2 {
     margin-bottom: 1.5rem;
 }

 .depoimentos p {
     font-size: 1.1rem;
     line-height: 1.8;
     font-weight: 400;
 }

 .depoimentos img {
     border-radius: 15px;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* ------------------------- */
 /* --- Seção "Galeria" --- */
 /* ------------------------- */
 .product-gallery {
     text-align: center;
 }

 .gallery-scroll {
     display: flex;
     overflow-x: auto;
     gap: 1.5rem;
     padding: 1.5rem;
     /* Espaço para sombra */
     margin-bottom: 2rem;
     /* Estilo da barra de rolagem (opcional) */
     scrollbar-width: thin;
     scrollbar-color: var(--primary-gold) #eee;
 }

 .gallery-scroll img {
     width: 300px;
     height: 300px;
     object-fit: cover;
     border-radius: 15px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     flex-shrink: 0;
     /* Impede que as imagens encolham */
 }

 .model-thumbnails {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1rem;
 }

 .model-thumbnails img {
     width: 90px;
     height: 90px;
     object-fit: cover;
     border-radius: 10px;
     border: 2px solid #eee;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .model-thumbnails img:hover {
     border-color: var(--primary-gold);
     transform: scale(1.05);
 }

 /* ------------------------- */
 /* --- Seção FAQ --- */
 /* ------------------------- */
 .faq {
     text-align: center;
 }

 .faq .accordion {
     max-width: 800px;
     margin: 0 auto;
     text-align: left;
 }

 /* Customização do Acordeão do Bootstrap */
 .accordion-item {
     border: 1px solid var(--primary-gold) !important;
     border-radius: 10px !important;
     margin-bottom: 1rem;
     background-color: var(--body-bg);
     overflow: hidden;
     /* Para o border-radius funcionar */
 }

 .accordion-header {
     border-bottom: none;
 }

 .accordion-button {
     font-family: var(--body-font);
     font-weight: 700;
     font-size: 1.1rem;
     color: var(--dark-text);
     background-color: var(--body-bg);
     border-radius: 10px;
 }

 .accordion-button:focus {
     box-shadow: none;
     border-color: rgba(0, 0, 0, 0.125);
 }

 .accordion-button:not(.collapsed) {
     color: var(--dark-text);
     background-color: var(--body-bg);
     box-shadow: none;
 }

 /* Ícone customizado '+' e '-' */
 .accordion-button::after {
     content: '\2b';
     /* Código unicode para '+' */
     font-family: "bootstrap-icons";
     font-weight: bold;
     background-image: none;
     /* Remove o ícone padrão */
     color: var(--primary-gold);
     transform: scale(1.5);
 }

 .accordion-button:not(.collapsed)::after {
     content: '\2212';
     /* Código unicode para '−' */
     background-image: none;
     transform: scale(1.5);
 }

 /* ------------------------- */
 /* --- Rodapé --- */
 /* ------------------------- */
 .site-footer {
     background-color: #333;
     color: #ccc;
     padding: 2rem 0;
     text-align: center;
 }

 .site-footer .footer-logo {
     font-family: var(--heading-font);
     font-size: 2rem;
     font-weight: 700;
     color: var(--primary-gold);
     line-height: 1;
 }

 .site-footer p {
     margin-bottom: 0.25rem;
     font-size: 0.9rem;
 }
 #seta {
    color: var(--primary-gold);
 }

 /* ------------------------- */
/* --- Estilo do Modal (Lightbox) --- */
/* ------------------------- */
.gallery-scroll img {
    cursor: pointer; /* Mostra que a imagem é clicável */
    transition: all 0.2s ease-in-out;
}
.gallery-scroll img:hover {
    transform: scale(1.03); /* Leve zoom no hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Estilização do modal para o efeito lightbox */
#imageModal .modal-dialog {
    max-width: 900px; /* Largura máxima do modal */
}
#imageModal .modal-content {
    background-color: transparent; /* Fundo transparente, sem "caixa" branca */
    border: none;
    box-shadow: none;
}
#imageModal .modal-header {
    border-bottom: none; /* Remove a linha do header */
    z-index: 10; /* Garante que o botão fique na frente */
}
#imageModal .modal-body {
    padding: 0;
}
#imageModal .modal-body img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Borda arredondada na imagem ampliada */
}

/* Deixa o botão 'X' branco e visível */
#imageModal .btn-close {
    filter: invert(1) grayscale(100);
    opacity: 0.9;
    font-size: 1.2rem;
    padding: 1rem;
}

/* ------------------------- */
/* --- Seção de Preço (Detalhado) --- */
/* ------------------------- */

/* Remove o estilo antigo de preço (span grande) */
/* .pricing-card-price { ... }  <-- APAGUE ESTE BLOCO */

/* Novo estilo para a lista de detalhes de preço */
.pricing-card-details {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left; /* Alinha a lista à esquerda dentro do card */
    font-size: 0.95rem;
    color: #444;
}
.pricing-card-details li {
    position: relative;
    padding-left: 28px; /* Espaço para o ícone */
    margin-bottom: 0.75rem;
}
.pricing-card-details li i {
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--primary-gold); /* Ícone dourado */
    font-size: 1.2rem;
}

/* Destaque para o preço principal */
.pricing-card-details .main-price {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark-text);
}

/* Destaque para o preço no PIX */
.pricing-card-details .pix-price {
    font-weight: 700;
    color: var(--accent-green); /* Verde para o desconto */
}

/* O estilo do bônus (só ajustei a altura e margem) */
.pricing-card-bonus {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-green);
    height: 30px; /* Altura menor, já que os preços ocupam mais espaço */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.pricing-card-image {
    width: 100%;
}

@media screen and (max-width: 1000px) {
    .hero-content h1 {
        color: #000000;
    }
}