/* Light 300 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/poppins-v24-latin/poppins-v24-latin-300.woff2') format('woff2');
}

/* Regular 400 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/poppins-v24-latin/poppins-v24-latin-regular.woff2') format('woff2');
}

/* SemiBold 600 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/poppins-v24-latin/poppins-v24-latin-600.woff2') format('woff2');
}

/* Bold 700 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/poppins-v24-latin/poppins-v24-latin-700.woff2') format('woff2');
}

/* ExtraBold 800 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/poppins-v24-latin/poppins-v24-latin-800.woff2') format('woff2');
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', sans-serif; /* Força a fonte bonita em tudo */
    background-color: #050005;
    color: #fff;
}

/* --- HERO SECTION --- */
.hero-purple {
    position: relative;
    background-color: #050005;
    background-image:
        url('CloudSync\ -\ 13.webp'); /* Sua textura */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 60px 20px 80px; /* Mais espaço embaixo */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.logo-holdingtotal {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin-bottom: 30px;
}

.main-title {
    font-size: 32px; /* Aumentei um pouco */
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
    max-width: 600px;
}

.highlight { color: #FE9A00; } /* Laranja do seu pedido */

.description {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #e0e0e0;
    max-width: 600px;
}

.sub-description {
    font-size: 16px;
    color: #aaa;
    margin-bottom: 30px;
    font-weight: 300;
}

/* LISTA DE BENEFÍCIOS (Quadrado Icon) */
.quadrado-icon {
    list-style: none;
    margin-bottom: 40px;
}

.quadrado-icon li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.4;
}

/* O ícone Check estilizado */
.quadrado-icon li::before {
    content: '✔';
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 20px;
    height: 20px;
    background: rgba(254, 154, 0, 0.1); /* Fundo laranja transparente */
    border: 1px solid #FE9A00;
    color: #FE9A00;
    font-size: 11px;
    border-radius: 4px;
    margin-top: 2px;
}

/* BOTÃO CTA (Verde Vibrante) */
.cta-button {
    display: inline-block;
    background: linear-gradient(90deg, #16a34a 0%, #15803d 100%); /* Gradiente Verde */
    color: white;
    text-decoration: none;
    padding: 20px 40px;
    border-radius: 8px; /* Borda levemente arredondada (mais moderno que pílula total as vezes) */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4); /* Brilho verde */
    width: 100%;
    max-width: 600px;
    text-align: center;
}

/* BOTÃO CTA (Verde Vibrante) */
.cta-button-2 {
    display: inline-block;
    background: linear-gradient(90deg, #16a34a 0%, #15803d 100%); /* Gradiente Verde */
    color: white;
    text-decoration: none;
    padding: 20px 40px;
    border-radius: 8px; /* Borda levemente arredondada (mais moderno que pílula total as vezes) */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4); /* Brilho verde */
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin-top:40px ;
}
.cta-button-3 {
    display: inline-block;
    background: linear-gradient(90deg, #16a34a 0%, #15803d 100%); /* Gradiente Verde */
    color: white;
    text-decoration: none;
    padding: 20px 40px;
    border-radius: 8px; /* Borda levemente arredondada (mais moderno que pílula total as vezes) */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4); /* Brilho verde */
    width: 100%;
    max-width: 1000px;
    text-align: center;
    margin-top:40px ;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.6);
}

/* --- SEÇÃO DE DORES (Pain Section) --- */
.pain-section {
    background-color: #000;
    padding: 60px 20px 100px;
    position: relative;
    /* Um brilho sutil no fundo para separar as seções visualmente */
    
}

.container-pain {
    max-width: 800px; /* Card mais estreito para focar a leitura */
    margin: 0 auto;
    text-align: center;
}

.pain-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.highlight-white { color: #fff; text-decoration: underline decoration-red-500; }

/* O CARD DE DORES (Estilo Premium) */
.pain-card {
    background: rgba(20, 20, 20, 0.6); /* Fundo semi-transparente */
    border: 1px solid #333;
    border-radius: 16px;
    padding: 50px;
    text-align: left;
    backdrop-filter: blur(10px); /* Efeito de vidro fosco (Glassmorphism) */
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.pain-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pain-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    color: #ccc;
    margin-bottom: 10px;
    font-weight: 400;
    border-bottom: 1px solid #222; /* Linha sutil entre itens */
    padding-bottom: 15px;
}

.pain-list li:last-child { border-bottom: none; }

.icon-close {
    color: #ef4444; /* Vermelho vivo */
    font-size: 22px;
    font-weight: bold;
}

.card-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #444, transparent);
    margin: 30px 0;
}

.pain-footer-text {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #fff;
}

.highlight-purple {
    color: #FE9A00; /* Roxo destaque */
}

/* RESPONSIVO */
@media (max-width: 768px) {
    .hero-purple {
        /* Coloque aqui o nome da sua imagem vertical */
        background-image: url('CloudSync\ -\ 14.webp');
        
        /* Garante que cubra a tela toda */
        background-size: cover;
        
        /* Centraliza a imagem */
        background-position: center center;
        
        padding: 40px 20px;
    }
    .main-title { font-size: 22px; }
    .hero-purple { padding-bottom: 40px; background-position: center center; }
    .description { font-size: 16px;}
    
    .pain-card { padding: 30px 20px; }
    .pain-title { font-size: 24px; }
    .pain-list li { font-size: 16px; }
}

/* --- SEÇÃO 3: SOLUÇÃO (HOLDING) --- */
.solution-section {
    background-color: #080108; /* Mantém fundo escuro para contraste */
    padding: 60px 20px;
    overflow: hidden;
}

.solution-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* --- TIPO E TEXTOS --- */
.solution-content {
    flex: 1;
    max-width: 600px;
}

.solution-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
    color: #fff;
}

/* Destaque Laranja no Texto */
.highlight-orange {
    color: #FE9A00; 
}

.solution-description {
    font-size: 18px;
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 35px;
    border-left: 4px solid #FE9A00; /* Linha Laranja lateral */
    padding-left: 20px;
}

/* --- LISTA DE CHECKS --- */
.solution-list {
    list-style: none;
}

.solution-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.solution-list li:hover {
    transform: translateX(10px);
    border-color: #FE9A00; /* Borda fica laranja ao passar o mouse */
}

.check-icon {
    font-size: 20px;
}

/* --- IMAGEM E EFEITOS --- */
.solution-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

.solution-img {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(254, 154, 0, 0.3); /* Borda laranja sutil */
}

/* O brilho LARANJA atrás da imagem */
.orange-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    /* Gradiente laranja (RGB 254, 154, 0) com transparência */
    background: radial-gradient(circle, rgba(254, 154, 0, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 1;
    filter: blur(40px);
}

/* --- RESPONSIVO (MOBILE) --- */
@media (max-width: 900px) {
    .solution-layout {
        flex-direction: column;
        text-align: left;
    }

    .solution-title {
        font-size: 28px;
    }

    .solution-img {
        max-width: 100%;
        margin-top: 30px;
    }
    
    .solution-list li {
        font-size: 16px;
    }
}
/* --- SEÇÃO 4: URGÊNCIA --- */
.urgency-section {
    background-color: #050005;
    /* Gradiente sutil avermelhado/alaranjado no centro para dar o tom de alerta */
    background-image: radial-gradient(circle at 50% 50%, rgba(200, 50, 0, 0.15) 0%, rgba(5, 0, 5, 1) 70%);
    padding: 80px 20px;
    text-align: center;
    position: relative;
}

.urgency-container {
    max-width: 800px; /* Conteúdo mais centralizado */
    margin: 0 auto;
}

.urgency-title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.urgency-intro {
    font-size: 22px;
    color: #e0e0e0;
    margin-bottom: 30px;
    font-weight: 600;
}

/* --- LISTA DE AVISOS (⚠️) --- */
.warning-list {
    list-style: none;
    margin-bottom: 50px;
    display: inline-block; /* Para centralizar o bloco da lista */
    text-align: left;
}

.warning-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 19px;
    color: #ccc;
    margin-bottom: 20px;
    font-weight: 500;
}

.warning-icon {
    font-size: 24px;
    /* Um filtro sutil para deixar o emoji amarelo mais integrado se necessário, 
       mas o padrão costuma funcionar bem */
}

/* --- BLOCO DE DESTAQUE COM BORDA --- */
.urgency-highlight-box {
    background: rgba(254, 154, 0, 0.05); /* Fundo laranja muito sutil */
    border: 2px solid #FE9A00; /* Borda laranja vibrante */
    border-radius: 12px;
    padding: 40px;
    max-width: 700px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(254, 154, 0, 0.1); /* Sombra alaranjada */
    text-align: left;
}

.action-now, .action-later {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 20px;
    font-weight: 700;
}

.action-now {
    color: #fff;
}

.action-later {
    color: #e0e0e0; /* Um pouco mais apagado para contraste */
}

.check-icon-bold {
    font-size: 24px;
    filter: drop-shadow(0 0 5px rgba(22, 163, 74, 0.5)); /* Brilho verde no check */
}

.cross-icon-bold {
    font-size: 24px;
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.5)); /* Brilho vermelho no X */
}

/* Linha divisória dentro da caixa */
.box-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #FE9A00, transparent);
    margin: 25px 0;
    opacity: 0.5;
}

/* --- RESPONSIVO (MOBILE) --- */
@media (max-width: 768px) {
    .urgency-title {
        font-size: 28px;
    }
    .urgency-intro {
        font-size: 18px;
    }
    .warning-list li, .action-now, .action-later {
        font-size: 16px;
    }
    .urgency-highlight-box {
        padding: 30px 20px;
    }
}
/* --- SEÇÃO DE DEPOIMENTOS --- */
.testimonials-section {
    background-color: #050005;
    padding: 80px 20px;
    border-top: 1px solid #1a1a1a; /* Separação sutil da seção anterior */
}

.center-text {
    text-align: center;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 50px;
}

/* O GRID (Que vira Carousel no Mobile) */
.testimonials-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap; /* No desktop, quebra linha se precisar */
}

/* --- CARD DE DEPOIMENTO --- */
.testimonial-card {
    background: #111; /* Fundo cinza escuro */
    border: 1px solid #333;
    border-radius: 16px;
    padding: 30px;
    flex: 1;
    min-width: 300px; /* Largura mínima */
    max-width: 380px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-card:hover {
    transform: translateY(-5px); /* Leve subida ao passar o mouse */
    border-color: #FE9A00; /* Borda laranja no hover */
}

.quote-icon {
    font-size: 60px;
    color: #FE9A00;
    font-family: serif; /* Fonte serifada para aspas bonitas */
    line-height: 1;
    margin-bottom: 15px;
    opacity: 0.5;
}

.testimonial-text {
    font-size: 18px;
    font-style: italic;
    color: #e0e0e0;
    line-height: 1.5;
    margin-bottom: 30px;
}

.testimonial-text strong {
    color: #fff;
    font-weight: 600;
}

/* --- AUTOR DO DEPOIMENTO --- */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #222;
    padding-top: 20px;
}

/* Avatar Simulado (Letra) */
.avatar-placeholder {
    width: 45px;
    height: 45px;
    background: #222;
    color: #FE9A00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    border: 1px solid #444;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-info strong {
    color: #fff;
    font-size: 16px;
}

.author-info span {
    color: #888;
    font-size: 14px;
}

/* --- MOBILE (Efeito Carousel/Scroll) --- */
@media (max-width: 900px) {
    .testimonials-grid {
        flex-wrap: nowrap; /* Impede quebra de linha */
        overflow-x: auto;  /* Permite rolagem lateral */
        justify-content: flex-start; /* Alinha no começo */
        padding-bottom: 20px; /* Espaço para a barra de rolagem não colar */
        
        /* Snap Scroll (Efeito de travar no card) */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .testimonial-card {
        min-width: 85%; /* O card ocupa 85% da tela do celular */
        scroll-snap-align: center; /* Trava no centro ao rolar */
    }
    
    /* Estilizar a barra de rolagem para ficar sutil */
    .testimonials-grid::-webkit-scrollbar {
        height: 6px;
    }
    .testimonials-grid::-webkit-scrollbar-track {
        background: #111;
    }
    .testimonials-grid::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 10px;
    }
}
/* --- SEÇÃO 6: O QUE VAI APRENDER --- */
.learning-section {
    background-color: #080108; /* Fundo escuro levemente diferenciado */
    padding: 80px 20px;
    background-image: radial-gradient(circle at 10% 10%, rgba(254, 154, 0, 0.05) 0%, transparent 40%);
}

.learning-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Colunas */
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

/* CARD DE APRENDIZADO */
.learning-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.learning-item:hover {
    border-color: #FE9A00;
    background: rgba(254, 154, 0, 0.05); /* Brilho laranja sutil */
    transform: translateY(-3px);
}

.learning-item p {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

/* Ícone de Check customizado */
.check-circle {
    font-size: 22px;
    min-width: 24px;
    /* Se quiser usar o emoji nativo, ok. 
       Se quiser estilizar mais, pode adicionar filtros aqui. */
}

/* Para o último item ficar centralizado e ocupar a largura total no desktop */
.full-width {
    grid-column: span 2; /* Ocupa as 2 colunas */
    justify-content: center; /* Centraliza o conteúdo */
}
.cta-full-width {
    grid-column: span 2; /* Ocupa as 2 colunas */
    justify-content: center; /* Centraliza o conteúdo */
}

/* --- RESPONSIVO (MOBILE) --- */
@media (max-width: 768px) {
    .learning-grid {
        grid-template-columns: 1fr; /* 1 Coluna no celular */
    }

    .full-width {
        grid-column: span 1; /* Volta ao normal no mobile */
        justify-content: flex-start;
    }
    
    .learning-item {
        padding: 20px;
    }
    
    .learning-item p {
        font-size: 16px;
    }
}
/* --- SEÇÃO 7: SOBRE O MENTOR --- */
.mentor-section {
    background-color: #050005;
    padding: 100px 20px;
    position: relative;
    border-top: 1px solid #222;
}

.mentor-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px; /* Espaço entre foto e texto */
}

/* --- IMAGEM E SELO --- */
.mentor-image-container {
    position: relative;
    max-width: 400px;
}

.mentor-img {
    width: 100%;
    border-radius: 12px;
    /* Um brilho sutil atrás da foto */
    box-shadow: -20px 20px 0px rgba(30, 30, 30, 0.5); 
    border: 1px solid #333;
}

/* Selo Flutuante (Badge) */
.authority-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: linear-gradient(135deg, #FE9A00 0%, #d97706 100%);
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    text-align: center;
    border: 2px solid #050005; /* Borda preta para destacar do fundo */
}

.badge-number {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.badge-text {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
}

/* --- TEXTO DO MENTOR --- */
.mentor-content {
    flex: 1;
    max-width: 500px;
}

.text-left {
    text-align: left; /* Alinha o título à esquerda nesta seção */
    margin-bottom: 20px;
}

.mentor-name {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.mentor-role {
    font-size: 18px;
    color: #ccc;
    font-weight: 400;
    line-height: 1.5;
}

.mentor-divider {
    width: 50px;
    height: 3px;
    background-color: #FE9A00;
    margin: 25px 0;
}

.mentor-bio {
    font-size: 18px;
    color: #e0e0e0;
    line-height: 1.6;
}

/* --- RESPONSIVO (MOBILE) --- */
@media (max-width: 900px) {
    .mentor-layout {
        flex-direction: column-reverse; /* Foto embaixo, texto em cima (ou vice-versa) */
        text-align: center;
    }

    .text-left {
        text-align: center;
    }

    .mentor-divider {
        margin: 25px auto; /* Centraliza a linha */
    }

    .mentor-image-container {
        margin: 0 auto;
        width: 80%;
    }
    
    .authority-badge {
        right: 0; /* Ajusta selo no mobile */
    }
}
/* --- SEÇÃO 8: BÔNUS (Fundo Claro) --- */
.bonus-section {
    background-color: #f5f5f5; /* Cinza claro para contraste máximo com o site preto */
    padding: 80px 20px;
    color: #1a1a1a; /* Texto escuro para leitura no fundo claro */
}

/* O Cartão Centralizado */
.offer-card {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border: 1px solid #e5e5e5;
}

.bonus-title {
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 40px;
    color: #050005;
}

/* Destaque Laranja no título */
.bonus-title .highlight-orange {
    color: #FE9A00;
}

/* LISTA DE ITENS */
.bonus-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bonus-list li {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.bonus-list li:last-child {
    border-bottom: none;
}

/* Ícone */
.icon-gift {
    font-size: 28px;
    min-width: 40px;
    text-align: center;
}

/* Texto do item */
.bonus-text {
    display: flex;
    flex-direction: column;
}

.bonus-text strong {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

.bonus-text span {
    font-size: 15px;
    color: #666;
}

/* --- DESTAQUE PARA O BÔNUS FINAL --- */
.bonus-highlight-item {
    background-color: #fff8eb; /* Fundo laranja bem clarinho */
    border: 2px dashed #FE9A00; /* Borda tracejada laranja */
    border-radius: 12px;
    margin-top: 10px;
}

.bonus-highlight-item .bonus-text strong {
    color: #e54706; /* Laranja escuro no texto */
    text-transform: uppercase;
}

/* --- RESPONSIVO --- */
@media (max-width: 768px) {
    .offer-card {
        padding: 30px 20px;
    }
    
    .bonus-title {
        font-size: 26px;
    }
    
    .bonus-list li {
        gap: 15px;
    }
    
    .bonus-text strong {
        font-size: 16px;
    }
}

/* --- SEÇÃO 9: PREÇO (Dark Premium) --- */
.price-section {
    background-color: #050005; /* Volta para o fundo preto */
    padding: 80px 20px;
    text-align: center;
}

/* O Card com Borda Dourada/Laranja */
.price-card-golden {
    max-width: 600px;
    margin: 0 auto;
    background: #0a0a0a;
    border: 2px solid #FE9A00; /* A borda "dourada" solicitada */
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 0 40px rgba(254, 154, 0, 0.15); /* Brilho laranja ao redor */
}

.price-title {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* --- PREÇOS --- */
.anchor-price {
    font-size: 20px;
    color: #888;
    margin-bottom: 10px;
}

.strikethrough {
    text-decoration: line-through;
    color: #ef4444; /* Risco vermelho no preço antigo */
    font-weight: 600;
}

.main-price {
    font-size: 80px; /* Bem grande */
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 25px;
    letter-spacing: -2px;
}

.currency {
    font-size: 40px;
    vertical-align: super;
    margin-right: 5px;
    color: #FE9A00; /* R$ em laranja */
}

/* --- ESCASSEZ --- */
.scarcity-text {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 40px;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
    display: inline-block;
}

.highlight-white {
    color: #fff;
    font-weight: 600;
}

/* --- EFEITO DE PULSO NO BOTÃO --- */
.pulse-effect {
    animation: pulse-animation 2s infinite;
    display: inline-block; /* Garante que a animação funcione */
    width: 100%; /* Ocupa largura do card */
}

@keyframes pulse-animation {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(22, 163, 74, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* --- BADGES DE SEGURANÇA --- */
.secure-badges {
    margin-top: 25px;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* RESPONSIVO */
@media (max-width: 768px) {
    .price-card-golden {
        padding: 40px 20px;
    }
    
    .main-price {
        font-size: 60px;
    }
    
    .price-title {
        font-size: 26px;
    }
}
/* --- NOTIFICAÇÃO DE VENDAS --- */
.sales-notify {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999; /* Fica acima de tudo */
    
    background-color: #111; /* Fundo escuro */
    border: 1px solid #333;
    border-left: 4px solid #FE9A00; /* Detalhe Laranja da sua marca */
    border-radius: 12px;
    padding: 15px 20px;
    
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    min-width: 280px;
    max-width: 320px;
    
    /* Animação de entrada/saída */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
    font-family: 'Poppins', sans-serif;
}

/* Estado Escondido (Para baixo e invisível) */
.sales-notify.hidden {
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
}

/* Estado Visível */
.sales-notify.visible {
    transform: translateY(0);
    opacity: 1;
}

/* Ícone de Check */
.notify-icon {
    background: rgba(22, 163, 74, 0.2); /* Fundo verde transparente */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.check-symbol {
    color: #22c55e; /* Verde Sucesso */
    font-weight: bold;
    font-size: 20px;
}

/* Textos */
.notify-content {
    display: flex;
    flex-direction: column;
}

.notify-title {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    margin: 0;
}

.notify-desc {
    color: #ccc;
    font-size: 12px;
    margin: 2px 0;
}

.notify-content small {
    color: #888;
    font-size: 11px;
}

/* Mobile: Ajustar para não ocupar a tela toda */
/* --- NOTIFICAÇÃO DE VENDAS NO MOBILE (TOPO) --- */
@media (max-width: 768px) {
    .sales-notify {
        /* Remove a fixação no fundo */
        bottom: auto; 
        
        /* Fixa no topo com uma margem */
        top: 20px; 
        
        /* Centraliza horizontalmente */
        left: 50%;
        width: 90%;
    }
    
    /* Estado Escondido no Mobile (Sobe para fora da tela) */
    .sales-notify.hidden {
        opacity: 0;
        pointer-events: none;
        /* translateX(-50%) mantém centralizado na horizontal */
        /* translateY(-150%) joga o elemento para CIMA (fora da visão) */
        transform: translateX(-50%) translateY(-150%) !important;
    }
    
    /* Estado Visível no Mobile (Desce para a posição) */
    .sales-notify.visible {
        opacity: 1;
        /* Traz para a posição correta (0 no eixo Y) */
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* --- SEÇÃO 10: FAQ --- */
.faq-section {
    background-color: #080108; /* Um tom levemente diferente para separar visualmente */
    padding: 80px 20px 100px;
    border-top: 1px solid #222;
}

.faq-wrapper {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* O ITEM (Caixa Fechada) */
.faq-item {
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Quando estiver aberto (Classe adicionada pelo JS) */
.faq-item.active {
    border-color: #FE9A00; /* Borda laranja */
    box-shadow: 0 4px 15px rgba(254, 154, 0, 0.1);
}

/* O BOTÃO DA PERGUNTA */
.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px 25px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    outline: none;
}

.faq-question:hover {
    background-color: #1a1a1a;
}

/* ÍCONE (+/-) */
.faq-icon {
    font-size: 24px;
    color: #FE9A00; /* Laranja */
    transition: transform 0.3s ease;
    font-weight: 400;
}

/* Gira o ícone quando ativo */
.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Vira um X */
}

/* A RESPOSTA (Escondida por padrão) */
.faq-answer {
    max-height: 0; /* Altura zero = escondido */
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: #0a0a0a;
}

.faq-answer p {
    padding: 0 25px 25px; /* Espaçamento interno */
    margin: 0;
    color: #ccc;
    font-size: 16px;
    line-height: 1.6;
}

/* Quando ativo, a altura aumenta para mostrar o texto */
.faq-item.active .faq-answer {
    max-height: 200px; /* Altura suficiente para o texto caber */
}

/* Responsivo */
@media (max-width: 768px) {
    .faq-question {
        font-size: 16px;
        padding: 15px 20px;
    }
}
/* --- SEÇÃO FINAL (CTA) --- */
.final-cta-section {
    background-color: #050005;
    padding: 40px 20px 80px;
    background-image: linear-gradient(to top, #000 0%, #080108 100%);
}

.final-cta-card {
    max-width: 700px;
    margin: 0 auto;
    background: #0f0f0f;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

/* LISTA DE RESUMO */
.final-summary-list {
    list-style: none;
    text-align: left;
    display: inline-block; /* Para centralizar o bloco da lista */
    margin-bottom: 40px;
}

.final-summary-list li {
    font-size: 18px;
    color: #e0e0e0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.check-orange {
    color: #FE9A00;
    font-size: 20px;
}

/* Destaque de Preço na Lista */
.price-summary-item {
    font-weight: 700;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 10px;
}

.strike-small {
    text-decoration: line-through;
    color: #777;
    font-weight: 400;
    margin: 0 5px;
    font-size: 16px;
}

.highlight-price {
    color: #FE9A00;
    font-size: 22px;
}

/* BOTÃO FINAL GIGANTE */
.big-final-btn {
    width: 100%;
    max-width: 500px; /* Mais largo que os outros */
    padding: 25px;    /* Mais alto */
    font-size: 20px;  /* Letra maior */
    display: inline-block;
    margin-bottom: 30px;
    /* Mantém o estilo verde do botão anterior, se quiser roxo mude o background */
}

/* URGÊNCIA FINAL */
.final-urgency-text p {
    color: #ef4444; /* Vermelho alerta suave */
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* --- FOOTER --- */
.site-footer {
    background-color: #000;
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid #222;
    color: #666;
    font-size: 14px;
}

.legal-links {
    margin-top: 10px;
    font-size: 12px;
}

/* RESPONSIVO */
@media (max-width: 768px) {
    .final-cta-card {
        padding: 30px 20px;
    }
    
    .final-summary-list li {
        font-size: 16px;
    }
    
    .big-final-btn {
        font-size: 18px;
        padding: 20px;
    }
}

/* Ajuste de layout para o grupo de texto de preço */
.price-text-group {
    display: flex;
    flex-direction: row; /* No desktop, um ao lado do outro */
    align-items: center;
    gap: 5px;
    flex-wrap: wrap; /* Permite quebrar linha se não couber */
}

/* --- MOBILE: UM EMBAIXO DO OUTRO --- */
@media (max-width: 768px) {
    /* O container principal do item (Check + Texto) */
    .price-summary-item {
        flex-direction: column; /* Coloca o check em cima do texto */
        text-align: center;     /* Centraliza tudo */
        gap: 10px;              /* Espaço entre check e texto */
    }

    /* O grupo de textos (De R$997 / Por R$197) */
    .price-text-group {
        flex-direction: column; /* Coloca o 'De' em cima do 'Por' */
        gap: 5px;
    }

    /* Ajuste fino para os textos */
    .old-price-text {
        font-size: 16px;
        color: #aaa;
    }

    .highlight-price {
        font-size: 24px; /* Aumenta o preço final no mobile */
    }
}
/* --- ESTILO DO FORMULÁRIO FINAL --- */
.form-title {
    font-size: 28px;
    color: #fff;
    margin-bottom: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

.final-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre os campos */
    max-width: 500px;
    margin: 0 auto 30px; /* Centraliza o form */
}

/* Estilo dos Inputs e Selects */
.custom-input {
    width: 100%;
    background-color: #f5f5f5; /* Fundo bem escuro */
    border: 1px solid #333;
    border-radius: 8px;
    padding: 18px 20px;
    color: #000;
    font-family: 'Poppins', sans-serif;
    outline: none; /* Remove contorno padrão do navegador */
    transition: all 0.3s ease;
}

/* Placeholder (texto de ajuda) com cor suave */
.custom-input::placeholder {
    color: #888;
}

/* Quando o usuário clica para digitar (Foco) */
.custom-input:focus {
    border-color: #FE9A00; /* Borda fica laranja */
    box-shadow: 0 0 10px rgba(254, 154, 0, 0.2); /* Brilho sutil */
    background-color: #fff;
}

/* Ajuste específico para o Select (Seta) */
.custom-select {
    appearance: none; /* Remove seta padrão feia */
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FE9A00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    cursor: pointer;
}

/* Ajuste do botão dentro do form */
.big-final-btn {
    width: 100%;
    margin-top: 10px;
    border: none;
    cursor: pointer;
}

/* Responsivo */
@media (max-width: 768px) {
    .form-title {
        font-size: 22px;
    }
    
    .custom-input {
        padding: 15px;
        font-size: 15px;
    }
}