/* GLOBAL RESET */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: #fff;
    color: #333;
    line-height: 1.6;
}

h1,
h2,
h3,
h4,
p,
ul,
li {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

/* UTILITIES */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

.section-title {
    font-size: 2rem;
    text-align: center;
    font-weight: 700;
    margin-bottom: 40px;
    color: #111;
}

.highlight-text {
    background: linear-gradient(90deg, #6A0DAD, #FF69B4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* THREE.JS CANVAS */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    /* Subtle hint behind everything */
}

/* --- HERO SECTION (ID="hero") --- */
#hero {
    /* Using Radial Gradient as requested for Dark Premium look */
    background: radial-gradient(circle at 70% 50%, #2b1055 0%, #0f0c29 100%);
    color: white;
    padding: 100px 5%;
    /* Desktop padding */
    display: flex;
    align-items:
        position: relative;
    min-height: 85vh;
    border-bottom-right-radius: 80px;
    /* Elegant Detail */
    z-index: 1;
    /* Above canvas */
}

.hero-container {
    display: flex;
    flex-direction: column;
    /* Mobile first */
    align-items: center;
    gap: 50px;
    width: 100%;
}

.hero-text {
    text-align: center;
    flex: 1;
}

#hero h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

#hero p {
    font-size: 1.1rem;
    color: #d1d1d1;
    margin-bottom: 40px;
}

/* 3D Image Container */
.hero-img-container {
    flex: 1;
    position: relative;
    animation: float 6s ease-in-out infinite;
}

.hero-img-container img {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    filter: drop-shadow(0 0 50px rgba(138, 43, 226, 0.4));
    transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
    transition: transform 0.3s;
}

/* Hover effect on 3D image */
.hero-img-container:hover img {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* BTN CTA (Neon) */
.btn-cta {
    background: linear-gradient(90deg, #6A0DAD, #FF69B4);
    color: white;
    padding: 18px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
    display: inline-block;
    transition: all 0.3s;
}

.btn-cta:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 0 40px rgba(255, 105, 180, 0.8);
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 105, 180, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 105, 180, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 105, 180, 0);
    }
}

/* --- FILTER SECTION --- */
#filtro {
    background: #f4f4f6;
    padding: 80px 0;
    position: relative;
    z-index: 2;
    /* Cover any canvas spill */
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.check-card h3 {
    color: #2e7d32;
    margin-bottom: 20px;
    font-weight: 800;
}

.x-card h3 {
    color: #c62828;
    margin-bottom: 20px;
    font-weight: 800;
}

.list-check li,
.list-x li {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.list-check li::before {
    content: '✓';
    color: #2e7d32;
    font-weight: bold;
}

.list-x li::before {
    content: '✕';
    color: #c62828;
    font-weight: bold;
}

/* --- TSL (CARTA) --- */
#carta {
    background: #fff;
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.text-container {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: #444;
}

.text-container p {
    margin-bottom: 20px;
}

/* --- MASTERY --- */
#dominar {
    background: #fff;
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.feature-card {
    text-align: center;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.text-purple {
    color: #6A0DAD;
}

.price-card {
    text-align: center;
    border: 1px solid #eee;
    position: relative;
}

.price-card.premium {
    border: 2px solid #6A0DAD;
    transform: scale(1.05);
    z-index: 5;
}

.tag {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #6A0DAD;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111;
    margin: 20px 0;
}

.premium .price {
    color: #6A0DAD;
}

.price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9rem;
}

.btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    padding: 60px 0;
    position: relative;
    z-index: 2;
}

.guarantee-flex,
.bio-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 30px;
}

.shield-icon {
    font-size: 4rem;
    color: #6A0DAD;
}

.bio-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #6A0DAD;
}

/* --- FOOTER --- */
#footer {
    background: #111;
    color: #777;
    padding: 30px;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* --- GALLERY (INFINITE MARQUEE) --- */
/* Global Styles for Gallery - Applies to all unless overridden */
.slider {
    height: 400px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
    background: white;
}

.slide-track {
    display: flex;
    width: calc(250px * 16);
    animation: scroll 30s linear infinite;
}

.slide-track img {
    height: 350px;
    width: 250px;
    margin: 0 15px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

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

    100% {
        transform: translateX(calc(-250px * 8 - 30px * 8));
    }
}

/* Força bruta para manter horizontal no celular */
@media (max-width: 768px) {
    .slider {
        height: 250px;
        /* Altura um pouco menor no celular */
    }

    .slide-track {
        display: flex !important;
        /* O !important garante que nada sobrescreva */
        flex-direction: row !important;
        /* Garante linha horizontal */
        width: calc(150px * 16);
        /* Recalcula largura baseada em imagens menores */
        animation: scrollMobile 20s linear infinite;
    }

    .slide-track img {
        width: 150px;
        /* Imagens menores para caber melhor na telinha */
        height: 220px;
        margin: 0 10px;
    }
}

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

    100% {
        transform: translateX(calc(-150px * 8 - 20px * 8));
    }
}


/* --- DESKTOP MEDIA QUERY --- */
@media (min-width: 900px) {
    .hero-container {
        flex-direction: row;
        text-align: left;
    }

    .hero-text {
        text-align: left;
        padding-right: 50px;
    }

    #hero h1 {
        font-size: 3.5rem;
    }

    .grid-2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Gallery styles moved to global scope */


    .bio-flex {
        flex-direction: row;
        text-align: left;
    }

    .bio-img {
        width: 250px;
        height: 250px;
        flex-shrink: 0;
    }
}
/* --- PREMIUM GUARANTEE SECTION (NEW) --- */
#garantia {
    background: #FFFFFF;
    padding: 100px 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

.guarantee-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* Selo 3D */
.selo-garantia {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #4B0082 0%, #FF1493 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    box-shadow: 0 15px 35px rgba(106, 13, 173, 0.5);
    margin-bottom: 10px;
    animation: floatingSeal 4s ease-in-out infinite;
}

@keyframes floatingSeal {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Badge Capsule */
.guarantee-badge {
    background: #000;
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Typography */
.guarantee-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111;
    margin: 0;
}

.guarantee-desc {
    color: #444;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}


/* --- DARK OFFER SECTION (HIGH TICKET) --- */
.offer-section { padding: 80px 5%; background: #fff; position: relative; z-index: 2; }

.offer-box-dark {
    background: radial-gradient(circle at top right, #2d1b4e 0%, #000000 100%);
    border: 1px solid rgba(106, 13, 173, 0.3);
    border-radius: 30px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(106, 13, 173, 0.25);
    color: white;
    position: relative;
    overflow: hidden;
}

.offer-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* More space for list */
    gap: 40px;
    align-items: center;
}

/* LIST */
.offer-benefits h3 { font-size: 1.5rem; margin-bottom: 30px; color: #FF69B4; border-bottom: 1px solid rgba(255,105,180,0.2); padding-bottom: 15px; }
.benefit-list { list-style: none; padding: 0; }
.benefit-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.benefit-list i { color: #00ff88; font-size: 1.2rem; margin-right: 15px; }
.benefit-list span { font-size: 1.1rem; font-weight: 500; }
.price-tag .riscado { text-decoration: line-through; color: #888; font-size: 0.9rem; margin-right: 5px; }
.price-tag .free { background: #00ff88; color: #000; padding: 2px 8px; border-radius: 4px; font-weight: bold; font-size: 0.8rem; }

/* PRICE */
.offer-price-col {
    background: rgba(255,255,255,0.03);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
}
.anchor-text { color: #aaa; font-size: 1.1rem; margin-bottom: 10px; }
.main-price .big-number {
    display: block; font-size: 4.5rem; font-weight: 800;
    line-height: 1; color: #fff;
    text-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
    margin: 10px 0;
}
.main-price small { color: #ccc; font-size: 1rem; }

.btn-mega-checkout {
    display: block; width: 100%; padding: 20px;
    background: linear-gradient(90deg, #6A0DAD 0%, #FF1493 100%);
    color: white; font-weight: 800; font-size: 1.2rem;
    border-radius: 50px; margin-top: 20px;
    box-shadow: 0 0 30px rgba(255, 20, 147, 0.4);
    transition: transform 0.3s;
}
.btn-mega-checkout:hover { transform: scale(1.05); box-shadow: 0 0 50px rgba(255, 20, 147, 0.7); }

.security-badges { margin-top: 20px; color: #888; font-size: 0.9rem; }

/* RESPONSIVE OFFER */
@media (max-width: 900px) {
    .offer-grid { grid-template-columns: 1fr; }
    .offer-box-dark { padding: 30px; }
    .main-price .big-number { font-size: 3.5rem; }
    .benefit-list li { flex-direction: column; align-items: flex-start; gap: 5px; }
    .price-tag { align-self: flex-end; }
}


/* ESTILO DARK PREMIUM (Thiago Finch Style) */
.offer-section-dark {
    padding: 80px 20px;
    background: #fff; /* Fundo da se��o continua branco para contraste */
}

.offer-box-unified {
    background: radial-gradient(circle at 100% 0%, #2d1b4e 0%, #000000 100%);
    border-radius: 30px;
    padding: 0; /* O grid controla o padding */
    box-shadow: 0 30px 60px rgba(106, 13, 173, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    overflow: hidden;
    position: relative;
}

.offer-content-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr; /* Esquerda maior, Direita focada */
}

/* Coluna Esquerda */
.benefits-col {
    padding: 50px;
    background: rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.offer-title { font-size: 1.8rem; margin-bottom: 30px; color: #fff; }

.premium-list { list-style: none; padding: 0; }
.premium-list li {
    display: flex; align-items: flex-start; margin-bottom: 25px;
}
.premium-list i {
    color: #00ff88; /* Verde Neon para Check */
    font-size: 1.4rem; margin-right: 15px; margin-top: 5px;
}
.premium-list strong { display: block; font-size: 1.1rem; font-weight: 700; }
.tag-value { font-size: 0.9rem; color: #ccc; }
.tag-free { color: #00ff88; font-weight: bold; font-size: 0.9rem; }

/* Coluna Direita (Pre�o) */
.price-col {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(0,0,0,0.2);
}

.anchor-price { font-size: 1.1rem; color: #aaa; margin-bottom: 15px; }
.anchor-price .riscado { text-decoration: line-through; }

.final-price-box small { display: block; color: #ddd; font-size: 0.9rem; margin-bottom: 5px; }

.big-price {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    background: linear-gradient(90deg, #fff, #ffccff);
    -webkit-background-clip: text;
    background-clip: text;
    margin: 10px 0;
    text-shadow: 0 0 30px rgba(255,255,255,0.3);
}

.btn-ultra-cta {
    display: block;
    width: 100%;
    padding: 20px;
    background: linear-gradient(90deg, #6A0DAD, #FF1493);
    color: white;
    font-weight: 800;
    font-size: 1.2rem;
    border-radius: 50px;
    margin-top: 25px;
    text-decoration: none;
    box-shadow: 0 0 30px rgba(255, 20, 147, 0.5);
    transition: transform 0.3s;
}
.btn-ultra-cta:hover { transform: scale(1.05); }

.secure-text { font-size: 0.9rem; color: #888; margin-top: 15px; }

/* Mobile Offer */
@media (max-width: 900px) {
    .offer-content-grid { grid-template-columns: 1fr; }
    .benefits-col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 30px; }
    .price-col { padding: 40px 20px; }
    .big-price { font-size: 3.5rem; }
}


/* ESTILO DOS DOIS PLANOS NA OFERTA DARK */
.plan-highlight {
    background: rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid rgba(255, 105, 180, 0.3);
    position: relative;
    margin-bottom: 20px;
}
.tag-rec {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: #FF1493; color: white; padding: 4px 12px; border-radius: 20px;
    font-size: 0.75rem; font-weight: bold; text-transform: uppercase;
}
.plan-divider { 
    text-align: center; margin: 10px 0; position: relative; color: #888; font-size: 0.8rem;
}
.plan-secondary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    background: rgba(0,0,0,0.2); transition: 0.3s;
}
.plan-secondary:hover { background: rgba(255,255,255,0.05); }
.secondary-info { text-align: left; display: flex; flex-direction: column; }
.secondary-info span { font-size: 0.85rem; color: #ccc; }
.secondary-info strong { font-size: 1.2rem; color: #fff; }

.btn-ghost {
    padding: 8px 20px; border: 1px solid #666; color: #ccc; 
    border-radius: 8px; text-decoration: none; font-size: 0.9rem;
    transition: 0.3s;
}
.btn-ghost:hover { border-color: #fff; color: #fff; }


/* ESTILO PREMIUM PARA O FILTRO */
.filtro-premium-section {
    padding: 80px 20px;
    background: #FBF5FF; /* Roxo Clarinho Suave (Pedido do cliente) */
    position: relative;
    z-index: 2;
}

.filtro-main-title {
    text-align: center; font-size: 2rem; color: #4B0082;
    margin-bottom: 50px; font-weight: 800;
}

.filtro-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    max-width: 1000px; margin: 0 auto;
}

.filtro-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(106, 13, 173, 0.08); /* Sombra roxa suave */
    border: 1px solid rgba(106, 13, 173, 0.1);
    transition: transform 0.3s ease;
}
.filtro-card:hover { transform: translateY(-5px); }

.card-header {
    display: flex; align-items: center; gap: 15px;
    margin-bottom: 30px; border-bottom: 2px solid #f0f0f0; padding-bottom: 20px;
}
.card-header h3 { font-size: 1.4rem; font-weight: 800; margin: 0; }

.icon-circle {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #fff;
}
.check-icon { background: #00C851; box-shadow: 0 5px 15px rgba(0, 200, 81, 0.3); }
.times-icon { background: #ff4444; box-shadow: 0 5px 15px rgba(255, 68, 68, 0.3); }

/* Cores dos Textos */
.positive-card h3 { color: #007E33; }
.negative-card h3 { color: #CC0000; }

.filtro-list { list-style: none; padding: 0; margin: 0; }
.filtro-list li {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 15px; font-size: 1rem; color: #555; line-height: 1.6;
}
.filtro-list i { margin-top: 4px; font-size: 1.1rem; }
.filtro-list .fa-check-circle { color: #00C851; }
.negative-list .fa-times-circle { color: #ff4444; }

/* MOBILE */
@media (max-width: 768px) {
    .filtro-grid { grid-template-columns: 1fr; }
    .filtro-card { padding: 30px 20px; }
}


/* ESTILO LUXURY LEARNING */
.luxury-learning-section {
    padding: 100px 20px;
    background: #FFFFFF;
    position: relative;
    z-index: 2;
}

.section-title-luxury {
    text-align: center; font-size: 2.5rem; color: #111;
    margin-bottom: 60px; font-weight: 800;
}

.luxury-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsivo autom�tico */
    gap: 30px;
    max-width: 1200px; margin: 0 auto;
}

.learn-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 25px;
    border: 1px solid rgba(106, 13, 173, 0.05); /* Borda roxa quase invis�vel */
    box-shadow: 0 10px 40px rgba(0,0,0,0.03); /* Sombra inicial suave */
    transition: all 0.4s ease;
    text-align: center;
    position: relative; overflow: hidden;
}

/* Efeito Hover de Luxo */
.learn-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(106, 13, 173, 0.15); /* Sombra roxa ao flutuar */
    border-color: rgba(106, 13, 173, 0.2);
}

.icon-glow {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #6A0DAD 0%, #FF69B4 100%);
    border-radius: 50%;
    margin: 0 auto 25px auto;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 2rem;
    box-shadow: 0 10px 20px rgba(106, 13, 173, 0.3); /* Brilho do �cone */
    transition: transform 0.4s;
}

.learn-card:hover .icon-glow {
    transform: scale(1.1) rotate(5deg); /* �cone cresce levemente */
}

.learn-card h3 {
    font-size: 1.4rem; color: #4B0082; margin-bottom: 15px; font-weight: 700;
}

.learn-card p {
    font-size: 1rem; color: #666; line-height: 1.6;
}

/* MOBILE */
@media (max-width: 768px) {
    .luxury-grid { grid-template-columns: 1fr; }
    .learn-card { padding: 30px 20px; }
}


/* BIO LUXURY & AUTHORITY */
.luxury-bio-section {
    padding: 120px 20px; /* MUITO RESPIRO (Corrigindo o aperto) */
    background: #fff;
    position: relative;
    z-index: 2;
}

.bio-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    gap: 60px;
}

/* FOTO COM MOLDURA PREMIUM */
.bio-image-col {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-frame {
    position: relative;
    width: 350px; height: 350px;
}

.expert-photo {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 30px; /* Canto arredondado suave, n�o redondo */
    box-shadow: 0 20px 60px rgba(0,0,0,0.15); /* Sombra elegante */
    position: relative;
    z-index: 2;
}

.frame-accent {
    position: absolute;
    top: 20px; left: -20px;
    width: 100%; height: 100%;
    border: 2px solid #6A0DAD; /* Borda Roxa deslocada */
    border-radius: 30px;
    z-index: 1;
    opacity: 0.6;
}

/* TEXTO DE AUTORIDADE */
.bio-text-col { flex: 1.2; }

.bio-tag {
    font-size: 0.9rem; font-weight: bold; letter-spacing: 2px;
    color: #FF69B4; text-transform: uppercase;
    margin-bottom: 10px; display: block;
}

.bio-name {
    font-size: 2.8rem; line-height: 1.1; margin-bottom: 30px;
    color: #111; font-weight: 800;
}

.text-gradient {
    background: linear-gradient(90deg, #6A0DAD, #FF1493);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bio-story p {
    font-size: 1.1rem; color: #555; line-height: 1.8;
    margin-bottom: 20px;
}

.bio-story strong { color: #000; font-weight: 700; }

.bio-mission {
    border-left: 4px solid #6A0DAD;
    padding-left: 20px;
    font-style: italic;
    color: #333;
}

.signature-line {
    width: 100px; height: 4px;
    background: #ddd; margin-top: 30px;
    border-radius: 2px;
}

/* MOBILE */
@media (max-width: 900px) {
    .luxury-bio-section { padding: 80px 20px; }
    .bio-wrapper { flex-direction: column; text-align: center; gap: 40px; }
    .bio-mission { border-left: none; border-top: 4px solid #6A0DAD; padding-top: 20px; padding-left: 0; }
    .image-frame { width: 280px; height: 280px; margin: 0 auto; }
    .signature-line { margin: 30px auto 0; }
}


/* CARTA DE VENDAS LUXURY */
.luxury-letter-section {
    padding: 80px 20px;
    background: #F9F9F9; /* Fundo levemente cinza para destacar o papel branco */
}

.letter-paper {
    background: #fff;
    max-width: 800px;
    margin: 0 auto;
    padding: 60px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(106, 13, 173, 0.05); /* Sombra muito suave */
    position: relative;
    overflow: hidden;
}

/* Linha colorida no topo do papel */
.letter-header-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 6px;
    background: linear-gradient(90deg, #6A0DAD, #FF1493);
}

.letter-salutation {
    font-size: 1.6rem; color: #111; margin-bottom: 30px; font-weight: 800;
}

.letter-body p {
    font-size: 1.15rem; /* Fonte maior para leitura confort�vel */
    line-height: 1.8;
    color: #444;
    margin-bottom: 25px;
}

.text-highlight { color: #FF1493; font-weight: 700; }
.purple-strong { color: #6A0DAD; font-weight: 800; }

/* CAIXA DE DESTAQUE (Mental Trigger) */
.highlight-box {
    background: linear-gradient(135deg, rgba(106, 13, 173, 0.05) 0%, rgba(255, 20, 147, 0.05) 100%);
    border-left: 4px solid #6A0DAD;
    padding: 30px;
    margin: 40px 0;
    border-radius: 0 15px 15px 0;
}

.highlight-box h4 {
    margin: 0 0 10px 0; font-size: 1.1rem; color: #555; text-transform: uppercase; letter-spacing: 1px;
}

.big-question {
    font-size: 1.4rem !important;
    font-weight: 700;
    color: #111 !important;
    margin-bottom: 0 !important;
}

/* MOBILE */
@media (max-width: 768px) {
    .letter-paper { padding: 30px 20px; }
    .letter-body p { font-size: 1.05rem; }
    .big-question { font-size: 1.2rem !important; }
}


/* RODAP� LUXURY */
.luxury-footer {
    background: radial-gradient(circle at 50% -20%, #1a0b2e 0%, #000000 100%);
    padding: 60px 20px 40px;
    position: relative;
    text-align: center;
    color: white;
    z-index: 2;
}

.footer-gradient-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #6A0DAD, #FF1493, transparent);
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.5);
}

.footer-content {
    display: flex; flex-direction: column; align-items: center; gap: 30px;
}

.brand-name {
    font-size: 1.8rem; font-weight: 800; margin: 0;
    background: linear-gradient(90deg, #fff, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.brand-tag {
    font-size: 0.75rem; letter-spacing: 4px; color: #FF69B4;
    text-transform: uppercase; margin-top: 5px; display: block;
    opacity: 0.8;
}

.footer-links {
    display: flex; gap: 15px; align-items: center; justify-content: center;
}

.legal-link {
    color: #888; text-decoration: none; font-size: 0.95rem;
    transition: 0.3s; position: relative;
}
.legal-link:hover { color: #FF1493; }

.separator { color: #444; }

.copyright-text {
    font-size: 0.85rem; color: #555; line-height: 1.6; margin: 0;
}

.secure-badge {
    color: #666; font-size: 0.8rem; display: inline-block; margin-top: 5px;
}

/* MOBILE */
@media (max-width: 768px) {
    .luxury-footer { padding: 50px 20px 30px; }
    .brand-name { font-size: 1.5rem; }
    .footer-links { flex-direction: column; gap: 10px; }
    .separator { display: none; }
}


/* TOP BAR LUXURY STYLE */
.top-bar-gradient {
    background: linear-gradient(90deg, #240b36 0%, #c31432 100%); /* Degrad� Roxo Escuro para Vermelho/Rosa intenso */
    color: white;
    padding: 10px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-family: 'Poppins', sans-serif;
}

.scarcity-text {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; font-size: 0.9rem; letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.scarcity-text i { color: #FFD700; animation: blink 2s infinite; }

.countdown-timer {
    display: flex; align-items: center; gap: 5px;
}

.time-box {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    min-width: 45px;
}

.time-box span {
    font-size: 1.1rem; font-weight: 800; line-height: 1;
    font-family: monospace; color: #fff;
}

.time-box small {
    font-size: 0.5rem; opacity: 0.7; letter-spacing: 1px;
}

.divider { font-weight: bold; font-size: 1.1rem; margin-top: -8px; opacity: 0.5; }

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* Ajuste Mobile */
@media (max-width: 768px) {
    .bar-content { flex-direction: column; gap: 5px; }
    .scarcity-text { font-size: 0.8rem; }
}


/* WHATSAPP FLOAT STYLE */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 9999; /* Fica acima de tudo */
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    
    /* Anima��o de Pulso */
    animation: pulse-green 2s infinite;
}

.whatsapp-float:hover {
    background-color: #128C7E; /* Verde mais escuro no hover */
    transform: scale(1.1);
}

.whatsapp-float i {
    margin-top: 2px; /* Ajuste fino para centralizar o �cone */
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px; height: 50px; font-size: 25px;
        bottom: 20px; right: 20px;
    }
}


/* Ajuste Responsivo para T�tulos */
@media (max-width: 768px) {
    .section-title-luxury {
        font-size: 1.5rem !important; /* Reduz de 2.5rem para 1.5rem no celular */
        padding: 0 15px; /* Margem lateral para n�o colar na borda */
        line-height: 1.3;
    }
    
    /* Aproveitando para ajustar o t�tulo da oferta tamb�m se precisar */
    .offer-title { font-size: 1.5rem !important; }
}


/* ATUALIZA��O RECENTE: Background da Oferta com Imagem */
.offer-box-unified {
    /* Imagem de fundo com Overlay Escuro para leitura */
    background: linear-gradient(to right, rgba(15, 12, 41, 0.95), rgba(48, 43, 99, 0.85)), url('fundo-oferta.png');
    
    background-size: cover;      /* Cobre todo o espa�o */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat;
    
    /* Mantendo as bordas e sombras anteriores */
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(106, 13, 173, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    position: relative;
    overflow: hidden;
    padding: 0;
}


/* AJUSTE OPACIDADE: Background da Oferta mais leve */
.offer-box-unified {
    /* Ajustei a opacidade de 0.95 para 0.7/0.5 */
    background: linear-gradient(to right, rgba(15, 12, 41, 0.7), rgba(48, 43, 99, 0.5)), url('fundo-oferta.png');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Mantendo as bordas e sombras anteriores */
    border-radius: 30px;
    box-shadow: 0 30px 60px rgba(106, 13, 173, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    position: relative;
    overflow: hidden;
    padding: 0;
}


/* DESIGN ESTILO THIAGO FINCH (ADAPTADO ROXO) */
.finch-section {
    padding: 80px 20px;
    background: #fff; /* Fundo da p�gina branco */
}

.finch-box {
    /* O SEGREDO DO FUNDO: Imagem + Overlay Roxo Transparente */
    background: linear-gradient(90deg, rgba(30, 5, 50, 0.9) 0%, rgba(75, 0, 130, 0.75) 100%), url('fundo-oferta.png');
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(106, 13, 173, 0.35); /* Sombra Roxa Glow */
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.finch-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Esquerda levemente maior */
    min-height: 500px;
}

/* --- COLUNA ESQUERDA --- */
.col-benefits {
    padding: 50px;
    background: rgba(255, 255, 255, 0.02); /* Leve separa��o visual */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; flex-direction: column; justify-content: center;
}

.benefits-title {
    font-size: 1.5rem; margin-bottom: 30px; font-weight: 600; color: #fff;
}

.finch-list { list-style: none; padding: 0; margin: 0; }
.finch-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.check-icon { color: #00FF88; font-size: 1.2rem; margin-right: 10px; } /* Check Verde igual Finch */
.item-name { font-size: 1rem; color: #eee; flex: 1; }
.item-name small { color: #ccc; font-size: 0.8rem; }

.badges { display: flex; align-items: center; gap: 8px; }
.price-strike { text-decoration: line-through; color: #888; font-size: 0.85rem; border: 1px solid #555; padding: 2px 6px; border-radius: 4px; }
.tag-free { background: #00FF88; color: #000; font-weight: 800; font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; }

.brand-micro { margin-top: auto; padding-top: 30px; color: #aaa; font-size: 0.9rem; }

/* --- COLUNA DIREITA --- */
.col-price {
    padding: 50px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    position: relative;
}

.total-value { font-size: 1.1rem; color: #ccc; margin-bottom: 5px; }
.total-value .strike { text-decoration: line-through; }
.by-only { font-size: 1rem; color: #fff; margin-bottom: 15px; }

.big-price-display {
    display: flex; align-items: baseline; gap: 5px; margin-bottom: 5px;
}
.big-price-display small { font-size: 1.5rem; font-weight: 500; }
.huge-number {
    font-size: 4rem; font-weight: 800; line-height: 1;
    color: #fff; text-shadow: 0 0 30px rgba(255, 105, 180, 0.5);
}

.cash-price { font-size: 1rem; color: #ddd; margin-bottom: 30px; }

/* BOT�O ESTILO FINCH (MAS ROSA/ROXO) */
.btn-finch-cta {
    background: linear-gradient(180deg, #FF1493 0%, #C71585 100%);
    width: 100%; padding: 20px;
    border-radius: 12px;
    text-decoration: none; color: white;
    box-shadow: 0 10px 0 #8B0A50, 0 20px 40px rgba(0,0,0,0.4); /* Efeito 3D S�lido */
    transition: transform 0.1s;
    display: flex; flex-direction: column; align-items: center;
    font-weight: 800; font-size: 1.3rem; text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.2);
}
.btn-finch-cta:hover { transform: translateY(4px); box-shadow: 0 6px 0 #8B0A50, 0 10px 20px rgba(0,0,0,0.4); }
.btn-sub { font-size: 0.75rem; font-weight: normal; text-transform: none; opacity: 0.9; margin-top: 5px; }

.small-link { color: #aaa; text-decoration: underline; font-size: 0.9rem; margin-bottom: 20px; }
.small-link:hover { color: #fff; }

.payment-icons { font-size: 1.5rem; color: #666; display: flex; gap: 10px; }

/* MOBILE */
@media (max-width: 900px) {
    .finch-grid { grid-template-columns: 1fr; }
    .col-benefits, .col-price { padding: 30px 20px; border-right: none; }
    .col-benefits { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .huge-number { font-size: 3rem; }
}


/* RESTRUTURA��O DE CAMADAS (DEPTH EFFECT) - OVERRIDE */

/* FUNDO DA SE��O (Camada de Tr�s) */
.finch-section {
    position: relative;
    padding: 100px 20px 150px; /* Mais espa�o em cima e embaixo */
    background-color: #0f0520; /* Cor de fundo base escura (Roxo profundo) */
    overflow: hidden; /* Garante que nada vaze da se��o */
    z-index: 1;
}

/* O TRUQUE DO FINCH: Pseudo-elemento para a imagem de fundo */
.finch-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* A imagem fundo-oferta.png posicionada no topo */
    background: url('fundo-oferta.png') no-repeat top center;
    background-size: 100% auto; /* Cobre a largura, altura autom�tica */
    
    /* M�SCARA DE DEGRAD�: Faz a imagem sumir suavemente para baixo */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 90%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 90%);
    
    z-index: -1; /* Fica atr�s de tudo */
    opacity: 0.6; /* Leve transpar�ncia para n�o brigar com o conte�do */
}

/* A CAIXA DE PRE�O (A Camada da Frente 'Flutuante') */
.finch-box {
    position: relative;
    z-index: 10; /* Garante que fique na frente da imagem de fundo */
    
    /* Fundo SEMITRANSPARENTE escuro (Glassmorphism Roxo) */
    background: rgba(30, 5, 50, 0.75);
    backdrop-filter: blur(10px); /* Desfoque do fundo atr�s da caixa */
    
    /* Bordas e Sombras para dar volume 3D */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4); /* Borda superior mais clara para luz */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 
                inset 0 0 60px rgba(106, 13, 173, 0.2); /* Sombra externa + Brilho interno roxo */
    
    border-radius: 25px;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    color: white;
}


/* RESTRUTURA��O DE CAMADAS - VERS�O 2 (GRADIENT FADE) */

.finch-section {
    position: relative;
    padding: 100px 20px 150px; /* Mais espa�o vertical */
    background-color: #0f0520; /* Cor base escura (Roxo Profundo) */
    overflow: hidden;
    z-index: 1;
}

/* Pseudo-elemento para a imagem de fundo e o degrad� de fus�o */
.finch-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%; /* N�o vai at� o final absoluto para ajudar no fade */
    /* O segredo: Um degrad� que come�a transparente e escurece para fundir com a cor base */
    background: linear-gradient(to bottom, rgba(15, 5, 32, 0.1) 0%, #0f0520 90%), url('fundo-oferta.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: -1; /* Fica atr�s do conte�do */
    opacity: 0.8; /* Ajuste fino da intensidade da imagem */
    mask-image: none; /* Resetando m�scara anterior se houver */
    -webkit-mask-image: none;
}

.finch-box {
    position: relative;
    z-index: 10; /* Garante que fique na frente da imagem de fundo */
    background: rgba(30, 5, 50, 0.75);
    backdrop-filter: blur(10px); /* Desfoque do fundo atr�s da caixa */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(106, 13, 173, 0.2);
    border-radius: 25px;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
    color: white;
}


/* AJUSTE DE POSICIONAMENTO (REVELAR FUNDO) - OVERRIDE */
.finch-section {
    position: relative;
    /* AUMENTEI O TOPO para 180px (empurra a caixa para baixo) */
    padding: 180px 20px 100px; 
    background-color: #0f0520;
    overflow: hidden;
    z-index: 1;
}

.finch-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cobre a altura total para o fade funcionar bem */
    
    /* Alinhamento TOP CENTER � crucial aqui */
    background: linear-gradient(to bottom, rgba(15, 5, 32, 0.2) 0%, #0f0520 95%), url('fundo-oferta.png');
    background-size: cover;
    background-position: center top; /* Garante que os notebooks fiquem no topo */
    background-repeat: no-repeat;
    
    z-index: -1;
    opacity: 0.8;
}


/* AJUSTE MOBILE PARA A OFERTA FINCH */
@media (max-width: 768px) {
    
    .finch-section {
        /* Aumentamos o espa�o em cima para a imagem aparecer antes da caixa */
        padding: 160px 15px 60px !important; 
    }

    .finch-section::before {
        /* No celular, usamos 160% para dar um zoom no notebook central
           e garantir que ele preencha o topo sem ficar min�sculo */
        background-size: 160% auto !important;
        background-position: top center !important;
        height: 600px !important; /* Altura suficiente para o fade acontecer */
        
        /* Ajuste da m�scara para o celular (fade mais curto) */
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%) !important;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%) !important;
    }

    .finch-box {
        /* Ajustes da caixa de vidro no celular */
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5); /* Sombra um pouco menor */
        background: rgba(45, 10, 70, 0.85); /* Um pouco mais opaco para leitura */
    }
    
    /* Garante que o grid vire coluna �nica */
    .finch-grid { display: flex; flex-direction: column; }
    
    /* Ajuste do tamanho do pre�o gigante para caber na tela */
    .huge-number { font-size: 3.2rem !important; }
}


/* ESTRUTURA OFERTA V2 (GLASS BOX REBUILT) */

.finch-section-v2 {
    position: relative;
    padding: 150px 20px 100px;
    background-color: #0f0520;
    overflow: hidden;
    z-index: 1;
}

.finch-section-v2::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 75%;
    background: linear-gradient(to bottom, rgba(15, 5, 32, 0.1) 0%, #0f0520 100%), url('fundo-oferta.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.8;
}

/* CAIXA DE VIDRO FLUTUANTE */
.finch-glass-box {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    margin: 0 auto;
    background: rgba(30, 5, 50, 0.6); /* Mais transpar�ncia */
    backdrop-filter: blur(15px); /* Desfoque potente */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 40px 100px rgba(0,0,0,0.6), inset 0 0 40px rgba(106, 13, 173, 0.1);
    border-radius: 30px;
    overflow: hidden;
}

.glass-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* COLUNA ESQUERDA */
.glass-col-left {
    padding: 50px;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.col-header h3 { font-size: 1.6rem; color: #fff; margin-bottom: 5px; }
.col-header p { font-size: 0.9rem; color: #aaa; margin-bottom: 30px; }

.premium-check-list { list-style: none; padding: 0; }
.premium-check-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.premium-check-list i { color: #00ff88; font-size: 1.2rem; margin-right: 15px; }
.premium-check-list span { color: #eee; font-size: 1rem; flex: 1; }

.badge-free { background: #00ff88; color: #000; padding: 2px 8px; border-radius: 4px; font-weight: bold; font-size: 0.75rem; }
.badge-value { color: #888; text-decoration: line-through; font-size: 0.85rem; }

/* COLUNA DIREITA */
.glass-col-right {
    padding: 50px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
}

.price-display-huge {
    display: flex; align-items: baseline; gap: 5px; margin: 10px 0;
}
.price-display-huge .prefix { font-size: 1.5rem; color: #ddd; }
.price-display-huge .value {
    font-size: 4.5rem; font-weight: 800; line-height: 1;
    background: linear-gradient(180deg, #fff 0%, #ffccff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(255, 20, 147, 0.4));
}

.riscado { text-decoration: line-through; color: #777; }
.vista-price { color: #bbb; margin-bottom: 30px; }

.btn-neon-pulse {
    background: linear-gradient(90deg, #ff00cc, #333399);
    color: white; width: 100%; padding: 20px;
    border-radius: 12px; text-decoration: none;
    font-weight: 800; font-size: 1.2rem;
    box-shadow: 0 0 30px rgba(255, 0, 204, 0.4);
    transition: transform 0.2s;
    display: flex; flex-direction: column; align-items: center;
}
.btn-neon-pulse:hover { transform: scale(1.03); box-shadow: 0 0 50px rgba(255, 0, 204, 0.6); }
.btn-neon-pulse small { font-size: 0.75rem; font-weight: normal; opacity: 0.9; margin-top: 3px; }

.payment-methods { font-size: 1.8rem; color: #555; display: flex; gap: 15px; margin-top: 20px; }

/* MOBILE V2 */
@media (max-width: 768px) {
    .glass-grid { grid-template-columns: 1fr; }
    .glass-col-left, .glass-col-right { padding: 30px 20px; }
    .finch-section-v2 { padding: 160px 15px 80px; }
    .finch-section-v2::before { background-size: 180% auto; background-position: top center; height: 50% }
    .price-display-huge .value { font-size: 3.5rem; }
}


/* === SE��O FINCH V2 (ESTRUTURA DE CAMADAS) === */

/* CAMADA 1: O FUNDO DA P�GINA COM A IMAGEM */
.finch-section-v2 {
    position: relative;
    padding-top: 250px; /* Empurra a caixa para baixo para ver a imagem no topo */
    padding-bottom: 100px;
    background-color: #0f0520; /* Fundo Roxo Profundo */
    overflow: hidden;
    z-index: 1;
}

/* A IMAGEM DE FUNDO (Notebooks) */
.finch-section-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px; /* Altura da imagem de fundo */
    
    background: url('fundo-oferta.png') no-repeat top center;
    background-size: cover; 
    
    /* O SEGREDO: M�SCARA DE DEGRAD� (Faz a imagem sumir suavemente para baixo) */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    
    opacity: 0.6; /* Transpar�ncia para n�o brigar com o texto */
    z-index: -1;
}

/* CAMADA 2: A CAIXA DE VIDRO (FLUTUANTE) */
.finch-glass-box {
    background: rgba(30, 5, 50, 0.7); /* Vidro Roxo Escuro */
    backdrop-filter: blur(20px); /* Desfoque forte atr�s */
    -webkit-backdrop-filter: blur(20px);
    
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Luz no topo */
    box-shadow: 0 40px 100px rgba(0,0,0,0.6); /* Sombra pesada para dar altura */
    
    border-radius: 24px;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.glass-grid {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
}

/* LADO ESQUERDO */
.glass-col-left {
    padding: 50px;
    border-right: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent);
}

.col-header h3 { font-size: 1.8rem; color: #fff; margin-bottom: 5px; }
.col-header p { color: #aaa; margin-bottom: 30px; font-size: 0.95rem; }

.premium-check-list { list-style: none; padding: 0; }
.premium-check-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #eee;
}
.premium-check-list i { color: #00FF88; margin-right: 10px; font-size: 1.2rem; }
.badge-free { background: #00FF88; color: #000; font-weight: 800; font-size: 0.7rem; padding: 4px 8px; border-radius: 4px; }
.badge-value { color: #888; text-decoration: line-through; font-size: 0.9rem; }

/* LADO DIREITO (PRE�O) */
.glass-col-right {
    padding: 50px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
}

.total-ancoragem { color: #ccc; font-size: 1.1rem; }
.riscado { text-decoration: line-through; }
.por-apenas { color: #fff; margin-bottom: 10px; }

.price-display-huge {
    display: flex; align-items: baseline; gap: 5px;
    margin-bottom: 10px;
}
.price-display-huge .prefix { font-size: 1.5rem; font-weight: 600; color: #fff; }
.price-display-huge .value {
    font-size: 4.5rem; font-weight: 800; line-height: 1;
    background: linear-gradient(to right, #fff, #ffccff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(255, 20, 147, 0.4);
}

.btn-neon-pulse {
    background: linear-gradient(90deg, #FF1493, #6A0DAD);
    width: 100%; padding: 20px; border-radius: 12px;
    color: white; text-decoration: none; font-weight: 800; font-size: 1.2rem;
    box-shadow: 0 0 20px rgba(255, 20, 147, 0.4);
    display: flex; flex-direction: column; align-items: center;
    margin-top: 20px; transition: transform 0.2s;
}
.btn-neon-pulse:hover { transform: scale(1.02); box-shadow: 0 0 40px rgba(255, 20, 147, 0.7); }
.btn-neon-pulse small { font-size: 0.8rem; font-weight: normal; opacity: 0.9; margin-top: 3px; }

.payment-methods { margin-top: 20px; font-size: 1.5rem; color: #666; display: flex; gap: 15px; }

/* --- RESPONSIVIDADE MOBILE --- */
@media (max-width: 768px) {
    .finch-section-v2 { padding-top: 180px; } /* Menos espa�o no topo */
    
    .finch-section-v2::before {
        height: 500px; /* Imagem menor */
        background-size: 150%; /* Zoom no centro da imagem */
    }
    
    .glass-grid { grid-template-columns: 1fr; }
    .glass-col-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 30px 20px; }
    .glass-col-right { padding: 40px 20px; }
    .price-display-huge .value { font-size: 3.5rem; }
}


/* CORRE��O VISUAL: LAYERS E POSICIONAMENTO (OVERRIDE) */

.finch-section-v2 {
    position: relative;
    padding-top: 320px; /* AUMENTADO: Empurra a caixa para baixo para revelar os notebooks no topo */
    padding-bottom: 100px;
    background-color: transparent; /* Removido para n�o tapar */
    overflow: hidden;
    z-index: 1;
}

.finch-section-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ocupa a se��o toda */
    
    /* A COR DE FUNDO VEM AQUI AGORA, misturada com a imagem */
    background: linear-gradient(to bottom, rgba(15, 5, 32, 0.1) 0%, #0f0520 80%), url('fundo-oferta.png');
    background-color: #0f0520; /* Cor de seguran�a */
    
    background-size: 1600px auto; /* Tamanho fixo largo para garantir que os notebooks apare�am grandes */
    background-position: top center; /* FOCA NO TOPO onde est�o os notebooks */
    background-repeat: no-repeat;
    
    z-index: -1;
    opacity: 1; /* Garantir visibilidade total da camada */
    mask-image: none; /* Resetar m�scaras anteriores se houver conflito */
    -webkit-mask-image: none;
}

.finch-glass-box {
    position: relative;
    z-index: 10; /* Garante que flutue ACIMA do fundo */
    margin-top: -50px; /* Puxa um pouco pra cima para morder a imagem suavemente */
}

/* CORRE��O MOBILE */
@media (max-width: 768px) {
    .finch-section-v2 { padding-top: 200px !important; }
    .finch-section-v2::before {
        background-size: 200% !important; /* Zoom nos notebooks para celular */
        background-position: top center !important;
    }
}


/* === CORRE��O DEFINITIVA DA SE��O OFERTA === */

.finch-section-v2 {
    position: relative;
    width: 100%;
    overflow: hidden;
    
    /* 1. ESPA�AMENTO: Garante que os notebooks apare�am no topo livres */
    padding-top: 350px; 
    padding-bottom: 100px;

    /* 2. O FUNDO M�GICO (Tudo em uma regra s� para n�o ter erro) */
    background: 
        /* Camada 1: Degrad� que escurece para baixo (Overlay) */
        linear-gradient(to bottom, rgba(15, 5, 32, 0.2) 0%, #0f0520 85%),
        /* Camada 2: A Imagem dos Notebooks */
        url('fundo-oferta.png');

    /* Configura��es da Imagem */
    background-color: #0f0520; /* Cor de seguran�a se a imagem falhar */
    background-repeat: no-repeat;
    background-position: top center; /* Foca sempre no topo */
    background-size: 1920px auto; /* For�a a imagem a ficar GRANDE e n�o cortar */

    z-index: 1;
}

/* Removemos o ::before antigo para n�o dar conflito */
.finch-section-v2::before {
    display: none !important;
}

/* Ajuste da Caixa de Vidro */
.finch-glass-box {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin: 0 auto;
    
    /* Vidro Roxo */
    background: rgba(30, 5, 50, 0.85); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 50px 100px rgba(0,0,0,0.6);
}

/* AJUSTE MOBILE IMPORTANTE */
@media (max-width: 768px) {
    .finch-section-v2 {
        padding-top: 200px; /* Menos espa�o no celular */
        background-size: 250% auto; /* Zoom nos notebooks para ver detalhes */
        background-position: top center;
    }
}


/* === SUAVIZA��O DE TRANSI��O (FADE OUT) === */
.finch-section-v2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px; /* Altura da �rea de suaviza��o */
    
    /* Degrad�: Come�a invis�vel (cor do fundo roxo) e termina Branco (pr�xima se��o) */
    background: linear-gradient(to bottom, rgba(15, 5, 32, 0) 0%, #ffffff 100%);
    
    pointer-events: none; /* Garante que n�o atrapalhe cliques */
    z-index: 2; /* Fica acima do fundo, mas abaixo da caixa de pre�o se ela estiver ali */
}

/* Ajuste fino para garantir que a caixa de pre�o fique acima desse fade */
.finch-glass-box {
    position: relative;
    z-index: 10 !important; /* For�a a caixa a ficar acima da n�voa branca */
}


/* === CORRE��O MOBILE DEFINITIVA (OFERTA FINCH) === */
@media (max-width: 768px) {
    
    .finch-section-v2 {
        /* 1. Ajuste da Imagem de Fundo no Celular */
        /* Zoom controlado para focar nos notebooks centrais sem cortar tudo */
        background-size: 170% auto !important; 
        background-position: top center !important;
        
        /* 2. Espa�o para a imagem aparecer antes da caixa */
        padding-top: 180px !important; 
        padding-bottom: 60px !important;
    }

    /* Ajuste da Caixa de Vidro para a tela pequena */
    .finch-glass-box {
        margin: 0 15px !important; /* Margem lateral para n�o colar na borda */
        width: auto !important;
        border-radius: 20px;
    }

    /* Empilhar colunas (Lista em cima, Pre�o embaixo) */
    .glass-grid {
        grid-template-columns: 1fr !important;
        display: flex;
        flex-direction: column;
    }

    /* Espa�amentos internos menores */
    .glass-col-left {
        padding: 30px 20px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .glass-col-right {
        padding: 30px 20px !important;
    }

    /* Tipografia Ajustada */
    .col-header h3 { font-size: 1.4rem !important; }
    
    .price-display-huge .value {
        font-size: 3.5rem !important; /* Pre�o menor para n�o quebrar a linha */
    }
    
    .price-display-huge .prefix {
        font-size: 1.2rem !important;
    }

    .btn-neon-pulse {
        font-size: 1rem !important;
        padding: 15px !important;
    }
    
    /* Ajuste do Fade Out no rodap� para telas curtas */
    .finch-section-v2::after {
        height: 100px !important;
    }
}


/* === CORRE��O DE ALINHAMENTO E WHATSAPP === */

/* 1. TRAVA GLOBAL (Evita que o site fique sambando para os lados) */
html, body {
    overflow-x: hidden; /* Corta qualquer elemento que vaze da largura */
    width: 100%;
    position: relative;
}

/* 2. AJUSTE MOBILE ESPEC�FICO */
@media (max-width: 768px) {
    
    /* Centralizar a Caixa de Pre�o Perfeitamente */
    .finch-glass-box {
        width: 92% !important; /* Ocupa 92% da tela (deixa borda de respiro) */
        margin: 0 auto !important; /* Centraliza matematicamente */
        left: 0; right: 0; /* Garante eixo central */
    }

    /* Corrigir Bot�o WhatsApp no Celular */
    .whatsapp-float {
        bottom: 20px !important; /* Mais perto da base */
        right: 20px !important;  /* Mais para dentro da tela (seguran�a) */
        width: 55px !important;
        height: 55px !important;
        font-size: 28px !important;
    }
    
    /* Garantir que a imagem de fundo da oferta n�o quebre a largura */
    .finch-section-v2 {
        background-size: cover !important; /* Ou 180% auto se preferir zoom */
        background-position: center top !important;
    }
}



/* === CORRE��O NUCLEAR DE ALINHAMENTO MOBILE === */
@media (max-width: 768px) {
    
    /* 1. O PAI: Obriga tudo a ficar no centro */
    .finch-section-v2, 
    .finch-section-v2 .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centraliza Horizontalmente */
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .finch-section-v2 {
        padding-top: 180px !important; /* Mant�m o topo para a imagem */
        padding-bottom: 50px !important;
    }

    /* 2. O FILHO (A Caixa): Reseta tudo e define largura segura */
    .finch-glass-box {
        display: block !important;
        position: relative !important;
        
        /* LARGURA SEGURA: 90% da tela do dispositivo */
        width: 90vw !important; 
        max-width: 90vw !important;
        min-width: 0 !important; /* Previne travar em tamanho m�nimo */

        /* Zera posicionamentos antigos que podem estar empurrando */
        left: auto !important;
        right: auto !important;
        margin: 0 !important; /* O flex do pai j� vai centralizar */
        transform: none !important;
    }

    /* 3. Ajuste de conte�do interno para n�o estourar */
    .glass-col-left, .glass-col-right {
        padding: 25px 15px !important;
        width: 100% !important;
    }

    /* 4. Fundo Mobile (Zoom nos Notebooks) */
    .finch-section-v2 {
        background-position: top center !important;
        background-size: 180% auto !important;
    }
}


/* === CORREÇÃO VISUAL: PREÇO E ÍCONES === */

/* 1. ÍCONES DE PAGAMENTO (Estilo Prateado Luxo) */
.payment-methods-fixed {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: center;
}

.payment-methods-fixed i {
    color: #e0e0e0;
    /* PRATA CLARO (Visível no fundo roxo) */
    font-size: 2rem;
    /* Tamanho legível */
    opacity: 0.6;
    /* Leve transparência para elegância */
    transition: all 0.3s ease;
}

.payment-methods-fixed i:hover {
    color: #fff;
    /* Branco puro no hover */
    opacity: 1;
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    /* Brilho */
}

/* 2. ANCORAGEM REFINADA */
.total-ancoragem {
    font-size: 0.95rem;
    color: #bbb;
    /* Cinza médio */
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.riscado {
    text-decoration: line-through;
    color: #666;
    /* Preço antigo bem apagado para não chamar atenção */
    font-weight: 400;
}

.por-apenas {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 5px;
    font-style: italic;
    font-family: serif;
    /* Toque de sofisticação */
}

/* 3. PREÇO GIGANTE COM GLOW */
.price-display-huge .value {
    font-size: 4.5rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 25px rgba(255, 20, 147, 0.6);
    /* Glow Rosa Neon */
    line-height: 1;
}

.secure-text-small {
    margin-top: 10px;
    font-size: 0.75rem;
    color: #666;
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .payment-methods-fixed i {
        font-size: 1.8rem;
    }

    .price-display-huge .value {
        font-size: 3.5rem;
    }
}
/* === REFINAMENTO DA LISTA DE BENEFÍCIOS (LUXO) === */

/* 1. O ITEM DA LISTA (Container) */
.premium-check-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Texto na esq, Tags na dir */
    padding: 14px 0;
    /* Mais respiro vertical */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Linha divisória sutil */
}

/* Remove a borda do último item para não ficar estranho */
.premium-check-list li:last-child {
    border-bottom: none;
}

/* 2. O ÍCONE DE CHECK (Ajuste fino) */
.premium-check-list i {
    color: #00FF88;
    /* Verde Neon */
    font-size: 1.1rem;
    margin-right: 15px;
    min-width: 20px;
    /* Garante alinhamento se o ícone mudar */
}

/* 3. O TEXTO DO BENEFÍCIO */
.premium-check-list span:first-of-type {
    flex: 1;
    /* Ocupa o espaço disponível */
    text-align: left;
    font-size: 1rem;
    color: #f0f0f0;
    font-weight: 500;
    line-height: 1.4;
}

/* 4. AS ETIQUETAS (BADGES) - A Mágica Acontece Aqui */

/* Estilo Base para todas as tags */
.badge-free,
.badge-value,
.badge-vip,
.badge-incluso {
    font-size: 0.7rem !important;
    /* Fonte pequena e elegante */
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px !important;
    /* Tamanho Pílula */
    border-radius: 50px !important;
    /* Arredondamento total */
    margin-left: 10px;
    white-space: nowrap;
    /* Impede quebra de linha */
    display: inline-block;
}

/* ETIQUETA GRÁTIS / INCLUSO / VIP (Verde Neon Sutil) */
.badge-free {
    background: rgba(0, 255, 136, 0.15);
    /* Fundo translúcido tech */
    color: #00FF88;
    /* Texto Neon */
    border: 1px solid rgba(0, 255, 136, 0.3);
    /* Borda fina */
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.1);
    /* Glow leve */
}

/* ETIQUETA DE PREÇO RISCADO (R$ 197) */
.badge-value {
    background: transparent;
    color: #888;
    text-decoration: line-through;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Borda cinza sutil */
}

/* MOBILE AJUSTE */
@media (max-width: 768px) {
    .premium-check-list li {
        flex-wrap: wrap;
        /* Permite quebrar linha se o celular for muito pequeno */
    }

    .badge-free,
    .badge-value {
        margin-top: 5px;
        /* Espaço se quebrar linha */
    }
}
/* === ESTILO DA OFERTA ANUAL (SECUNDÁRIA) === */

.annual-option-container {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 20px;
}

/* Divisor elegante "ou" */
.divider-ou {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 0.8rem;
    text-transform: uppercase;
    margin: 15px 0;
}

.divider-ou::before,
.divider-ou::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.divider-ou span {
    padding: 0 10px;
}

/* O Card Anual */
.annual-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    /* Fundo muito sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    border-radius: 12px;
    transition: 0.3s;
}

.annual-card-row:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.annual-text {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.annual-text strong {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
}

.annual-text span {
    font-size: 0.75rem;
    color: #aaa;
}

.annual-cta {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.price-small {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

/* Botão Ghost (Borda Fina) */
.btn-ghost-outline {
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ccc;
    border: 1px solid #666;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-ghost-outline:hover {
    color: #000;
    background: #fff;
    border-color: #fff;
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .annual-card-row {
        flex-direction: row;
        align-items: center;
    }

    /* Mantém lado a lado no celular */
}
/* === ESTILO DO PLANO ANUAL (CORREÇÃO) === */
.annual-upgrade-box {
    width: 100%;
    margin: 20px 0;
}

.divider-text {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.75rem;
    margin-bottom: 15px;
}

.divider-text::before,
.divider-text::after {
    content: '';
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    flex: 1;
}

.divider-text span {
    padding: 0 10px;
}

.annual-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 12px 20px;
    border-radius: 10px;
    transition: 0.3s;
}

.annual-row:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.annual-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.annual-title {
    font-size: 0.85rem;
    color: #ccc;
}

.annual-price {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 700;
}

.btn-annual-outline {
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px 15px;
    border-radius: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: 0.3s;
}

.btn-annual-outline:hover {
    background: #fff;
    color: #000;
}

/* Mobile Fix */
@media (max-width: 768px) {
    .annual-row {
        flex-direction: row;
        gap: 10px;
    }

    .annual-price {
        font-size: 1rem;
    }
}
/* CORREÇÃO DAS ETIQUETAS (BADGES PÍLULA) */
.premium-check-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.li-content {
    display: flex;
    align-items: center;
    text-align: left;
}

.li-content i {
    color: #00FF88;
    margin-right: 10px;
    min-width: 20px;
}

/* O ESTILO PÍLULA PEQUENO */
.badge-free,
.badge-vip,
.badge-incluso,
.badge-value {
    font-size: 0.65rem !important;
    /* Fonte bem pequena */
    font-weight: 800;
    padding: 4px 10px !important;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-block;
    min-width: fit-content;
}

.badge-free,
.badge-vip,
.badge-incluso {
    background: rgba(0, 255, 136, 0.1);
    color: #00FF88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.badge-value {
    background: transparent;
    color: #666;
    text-decoration: line-through;
    border: 1px solid rgba(255, 255, 255, 0.1);
}/* --- SEÇÃO 5: LUXURY OFFER --- */
.luxury-offer-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    /* Fundo escuro premium */
    color: #fff;
    text-align: center;
}

.offer-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.05);
    /* Vidro sutil */
    border: 1px solid rgba(255, 215, 0, 0.3);
    /* Borda dourada sutil */
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.offer-header .luxury-title {
    font-size: 2.5rem;
    background: linear-gradient(45deg, #FFD700, #FDB931);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.offer-subtitle {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 30px;
}

.stack-grid {
    text-align: left;
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stack-item {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stack-item i {
    color: #FFD700;
    /* Ícones dourados */
}

.stack-item.bonus {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid #FFD700;
    border-radius: 8px;
    font-weight: bold;
}

.price-box {
    margin: 40px 0;
}

.price-label {
    display: block;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.price-value {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
}

/* BOTÃO PULSANTE */
.cta-button {
    background: linear-gradient(45deg, #d63384, #e91e63);
    /* Rosa vibrante da marca */
    color: white;
    padding: 20px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(233, 30, 99, 0.4);
    transition: transform 0.3s ease;
    width: 100%;
    max-width: 400px;
}

.cta-button:hover {
    transform: scale(1.05);
}

.cta-button.pulse {
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(233, 30, 99, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
    }
}

.guarantee-text {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #888;
}
/* --- SEÇÃO GALERIA DE RESULTADOS --- */
.luxury-gallery-section {
    padding: 80px 20px;
    background: #151515;
    /* Slightly lighter than pure black/gradient for contrast */
    text-align: center;
}

.gallery-header {
    margin-bottom: 50px;
}

.gallery-subtitle {
    font-size: 1.1rem;
    color: #ccc;
    max-width: 600px;
    margin: 10px auto 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.img-wrapper {
    width: 100%;
    aspect-ratio: 4/5;
    /* Keep consistent vertical aspect */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(214, 51, 132, 0.3);
    /* Primary color border subtle */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.img-wrapper:hover {
    box-shadow: 0 15px 40px rgba(214, 51, 132, 0.4);
    /* Glow on hover */
    border-color: rgba(214, 51, 132, 0.8);
}

.img-wrapper:hover img {
    transform: scale(1.1);
    /* Zoom effect */
}

.caption {
    font-size: 1rem;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}

.caption i {
    color: #FFD700;
    /* Gold check icon */
}
/* --- FAQ SECTION (ACCORDION) --- */
.faq-section {
    padding: 80px 20px;
    background: #18191a;
    /* Dark background, slightly lighter than body */
    text-align: center;
}

.faq-title {
    margin-bottom: 50px;
}

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

.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active {
    border-color: rgba(233, 30, 99, 0.5);
    /* Neon Pink/Purple Accent */
    box-shadow: 0 5px 15px rgba(233, 30, 99, 0.1);
}

.faq-question {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.faq-question:hover {
    color: #FFD700;
    /* Gold hover */
}

.faq-icon {
    font-size: 1.2rem;
    color: #d63384;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(0, 0, 0, 0.2);
}

.faq-answer p {
    padding: 20px;
    margin: 0;
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
}
/* --- NEW DUAL PLAN OFFER SECTION --- */
.luxury-offer-section {
    position: relative;
    padding: 100px 20px;
    background: radial-gradient(circle at center, #1a051a 0%, #000000 100%);
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.luxury-offer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('fundo-oferta.png');
    /* User provided placeholder */
    background-size: cover;
    background-position: center;
    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.offer-header {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.luxury-title-large {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.offer-subtitle {
    font-size: 1.2rem;
    color: #ccc;
    font-weight: 300;
}

/* Pricing Grid */
.pricing-grid {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
    /* Align cards vertically center */
}

/* Base Card Style */
.pricing-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    text-align: left;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Annual Plan Specifics */
.pricing-card.annual {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.pricing-card.annual .plan-title {
    font-size: 1.5rem;
    color: #ddd;
    margin-bottom: 20px;
}

/* Lifetime Plan Specifics (FEATURED) */
.pricing-card.lifetime {
    position: relative;
    background: rgba(20, 0, 20, 0.6);
    /* Slightly darker/purple tint */
    border: 2px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    /* Gradient Border Trick */
    background-image: linear-gradient(#150015, #150015), linear-gradient(135deg, #9C27B0, #E91E63);

    transform: scale(1.05);
    /* Make it pop */
    box-shadow: 0 20px 60px rgba(233, 30, 99, 0.2);
    z-index: 3;
}

.pricing-card.lifetime:hover {
    transform: scale(1.08);
}

.badge-best-seller {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #9C27B0, #E91E63);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(233, 30, 99, 0.4);
}

.plan-title-lifetime {
    font-size: 1.8rem;
    background: linear-gradient(to right, #fff, #ffccff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Price Styling */
.price-tag {
    margin-bottom: 30px;
}

.price-installment {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.lifetime .price-installment {
    font-size: 2.8rem;
    background: linear-gradient(45deg, #ffffff, #ff80ab);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.price-full {
    display: block;
    font-size: 1rem;
    color: #888;
    margin-top: 5px;
}

/* Benefits List */
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    flex-grow: 1;
    /* Push button down */
}

.benefits-list li {
    margin-bottom: 12px;
    font-size: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #ddd;
}

.benefits-list li i {
    color: #666;
    /* Default check color */
    margin-top: 4px;
}

.lifetime .benefits-list li i {
    color: #FFD700;
    /* Gold check for lifetime */
}

/* Buttons */
.btn-outline {
    display: block;
    width: 100%;
    padding: 15px;
    border: 1px solid #9C27B0;
    background: transparent;
    color: #E1BEE7;
    text-align: center;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: rgba(156, 39, 176, 0.1);
    color: #FFF;
}

.btn-gradient-fill {
    display: block;
    width: 100%;
    padding: 18px;
    background: linear-gradient(45deg, #9C27B0, #E91E63);
    color: white;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(233, 30, 99, 0.3);
    transition: transform 0.3s ease;
}

.btn-gradient-fill:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(233, 30, 99, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .pricing-grid {
        flex-direction: column;
        gap: 50px;
    }

    .pricing-card.lifetime {
        transform: scale(1);
        order: -1;
        /* Show lifetime first on mobile? Or verify preference. Usually best seller first is good. */
    }

    .luxury-title-large {
        font-size: 2.2rem;
    }
}
/* --- HERO SECTION REFRESH (LUXURY) --- */
#hero {
    background: transparent;
    /* Allow body/canvas to show */
    padding: 120px 0 80px 0;
    /* Adjust spacing */
    position: relative;
    z-index: 1;
    /* Above canvas */
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-text h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 3.5rem;
    /* Larger luxury font */
    line-height: 1.1;
    margin-bottom: 25px;

/* =========================================
   LUXURY HERO SECTION STYLING (Auto-Injected)
   ========================================= */

/* 1. FUNDO ATMOSFÉRICO (#hero) */
#hero {
    /* Camada 1 (Base): Linear-gradient preto para roxo muito escuro */
    /* Camada 2 (Iluminação): Radial-gradient suave em Top Right */
    background: 
        radial-gradient(circle at top right, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, #050505 0%, #1a051a 100%);
    
    /* Borda inferior sutil */
    border-bottom: 1px solid rgba(255, 20, 147, 0.1);
    
    /* Refinamento: Espaçamento generoso */
    padding-top: 100px;
    padding-bottom: 100px;
    
    /* Ensure text is readable over dark bg */
    position: relative;
    z-index: 1;
}

/* 2. TIPOGRAFIA DE IMPACTO */
#hero h1 {
    color: #ffffff;
    font-weight: 800; /* A increased weight */
    margin-bottom: 24px;
    line-height: 1.2;
    font-size: 3.2rem; /* Ensure grandeur */
}

#hero .highlight-text {
    background: linear-gradient(90deg, #FF1493, #8A2BE2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0px 0px 20px rgba(255, 20, 147, 0.3); /* Brilho sutil */
    /* Note: text-shadow on transparent text can behave weirdly in some browsers, 
       often works best if applied to a parent or using filter drop-shadow, 
       but standard trick is dropshadow on the element itself.
       Actually, standard 'color: transparent' + 'text-shadow' shows the shadow of the transparent text 
       which might look like the text itself. 
       Better approached: use filter: drop-shadow(...) for the glow on the gradient text. */
    filter: drop-shadow(0px 0px 5px rgba(255, 20, 147, 0.5));
    text-shadow: none; /* Reset standard text shadow */
}

#hero p {
    color: #d1d1d1; /* Cinza claro */
    line-height: 1.6; /* Elegância */
    margin-bottom: 40px;
    font-size: 1.15rem;
    max-width: 600px;
}

/* 3. BOTÃO CTA (.btn-cta) */
#hero .btn-cta, .btn-cta { /* Target class specifically too */
    background: linear-gradient(90deg, #8A2BE2, #FF1493);
    color: #fff;
    padding: 18px 45px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0px 10px 30px rgba(138, 43, 226, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    display: inline-block;
    border: none;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
}

#hero .btn-cta:hover, .btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0px 15px 40px rgba(138, 43, 226, 0.6);
    filter: brightness(1.2);
}

/* 4. REFINAMENTOS DE LAYOUT */
/* Force Flex container behavior if not already correctly applied */
#hero .hero-container, #hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2;
}

#hero .hero-text {
    flex: 1;
    text-align: left;
}

#hero .hero-img-container {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Align aligned */
    position: relative;
}

#hero .hero-img-container img {
    max-width: 100%;
    height: auto;
    /* Optional glow behind image */
    filter: drop-shadow(0 0 30px rgba(138,43,226,0.1));
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    #hero h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    #hero .hero-container, #hero .container {
        flex-direction: column-reverse; /* Text on top usually, actually users often prefer image top on mobile or text top? 
                                           Standard is Text Top for sales letters, but "Image" top for "Hero" visual. 
                                           Let's stick to user request: "Mantenha a imagem... alinhada". 
                                           Usually column-reverse puts last element first. 
                                           Text is first in HTML. Image is second.
                                           column-reverse -> Image Top, Text Bottom.
                                           column -> Text Top, Image Bottom. 
                                           Most landing pages do Image Top on mobile or Text Top.
                                           Let's keep Text Top (default column) or Image Bottom.
                                           A lot of modern designs do Text Top.
                                           Let's just use flex-direction: column (Text Top); 
                                         */
        flex-direction: column; 
        text-align: center;
        padding-top: 40px;
    }
    
    #hero .hero-img-container {
        justify-content: center;
        margin-top: 30px;
    }
    
    #hero p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- CSS FORÇADO HERO LUXURY --- */
#hero {
    background: 
        /* Glow Rosa no topo direito */
        radial-gradient(circle at 90% 10%, rgba(255, 20, 147, 0.25) 0%, transparent 40%),
        /* Glow Roxo na esquerda */
        radial-gradient(circle at 10% 50%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        /* Base Escura Premium */
        linear-gradient(180deg, #050505 0%, #1a051a 100%) !important;
    
    position: relative !important;
    z-index: 10 !important; /* Garante que fique acima do canvas antigo se houver bug */
    border-bottom: 1px solid rgba(138, 43, 226, 0.3) !important;
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}

.hero-text h1 {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0px 0px 20px rgba(0,0,0,0.8);
}

.highlight-text {
    background: linear-gradient(90deg, #FF1493, #8A2BE2) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 800 !important;
    filter: drop-shadow(0px 0px 5px rgba(255, 20, 147, 0.5));
}

.hero-container {
    position: relative;
    z-index: 11; /* Conteúdo acima do fundo */
}

/* --- FIM CSS FORÇADO --- */

/* --- FIX DEFINITIVO HERO LUXURY (LAYER METHOD) --- */

/* 1. Garante que o corpo do site tenha base escura para evitar flashes brancos */
body {
    background-color: #050505 !important;
}

/* 2. Prepara o Hero para receber a camada de fundo */
#hero {
    position: relative !important;
    background: none !important; /* Remove qualquer fundo bugado antigo */
    z-index: 5 !important;
    border-bottom: 1px solid rgba(138, 43, 226, 0.2) !important;
}

/* 3. A CAMADA FANTASMA - Isso cria o visual degradê luxury */
#hero::before {
    content: "" !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important; /* Fica atrás do texto */
    
    /* O Degradê Infinito: Roxo Profundo no topo descendo para o preto */
    background: 
        radial-gradient(circle at 70% 20%, rgba(255, 20, 147, 0.12) 0%, transparent 60%), /* Luz Rosa suave na direita */
        radial-gradient(circle at 20% 60%, rgba(138, 43, 226, 0.15) 0%, transparent 60%), /* Luz Roxa suave na esquerda */
        linear-gradient(180deg, #1a051a 0%, #020202 100%) !important; /* Base Escura */
}

/* 4. Garante que o texto fique branco e legível sobre o fundo escuro */
.hero-text, .hero-text p {
    color: #e0e0e0 !important;
    position: relative !important;
    z-index: 6 !important;
}

.hero-text h1 {
    color: #ffffff !important;
}

/* --- FIM DO FIX --- */