/* Global Vars */
:root {
    --primary-green: #22c55e;
    --primary-blue: #0ea5e9;
    --primary-red: #ef4444;
    --dark-bg: #0f172a;
    --light-bg: #fff1f2;
    /* Lighter pink (was gray) */
    --white: #ffffff;
    --bg-pink: #ffe4e6;
    /* Main pink (slightly deeper) */
    --text-main: #334155;
    --text-light: #64748b;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    background-color: var(--light-bg);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Utility Classes */
.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #1e293b;
}

.section-subtitle {
    text-align: center;
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.highlight-blue {
    color: var(--primary-blue);
}

.highlight-red {
    color: var(--primary-red);
}

/* Buttons */
.btn-main,
.btn-pricing.primary {
    background-color: var(--primary-green);
    color: white;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    display: inline-block;
    transition: transform 0.2s, background-color 0.2s;
    text-transform: uppercase;
    box-shadow: var(--shadow-md);
}

.btn-main:hover,
.btn-pricing.primary:hover {
    background-color: #16a34a;
    transform: translateY(-2px);
}

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

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Sticky Banner */
/* Sticky Banner */
.sticky-banner {
    background-color: var(--primary-red);
    color: white;
    padding: 0.5rem 0;
    /* Reduced padding */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    font-size: 0.9rem;
    /* Base font size */
}

.banner-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    /* Allow wrapping on very small screens */
}

.banner-text {
    font-weight: 800;
    /* Extra bold */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.countdown {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 800;
    font-size: 1.25rem;
}

.time-box {
    background-color: white;
    color: var(--primary-red);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    min-width: 2.5rem;
    text-align: center;
    line-height: 1;
}

.btn-banner {
    background-color: white;
    color: var(--primary-red);
    font-weight: 800;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    /* Pill shape */
    text-transform: uppercase;
    display: none;
    /* Hide button to match reference image compactness if needed, or keep it small? User didn't explicitly ask to remove button, but the image doesn't show it. I'll keep it but make it smaller or hidden on mobile if needed. Let's keep it visible for now but compact. */
}

@media (max-width: 600px) {
    .banner-text {
        font-size: 0.8rem;
        width: 100%;
        /* Check if this breaks layout */
    }

    .banner-content {
        gap: 0.5rem;
    }

    .btn-banner {
        display: none;
        /* Often sticky banners hide the button on mobile to save space */
    }
}

/* Hero Section */
.hero-section {
    padding: 4rem 0;
    background: linear-gradient(to bottom, #ffffff, var(--light-bg));
    text-align: center;
}

.hero-headline h1 {
    font-size: 2.5rem;
    /* Mobile first adjustment later */
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #0f172a;
}

.hero-headline .subheadline {
    font-size: 1.125rem;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto 2.5rem;
}

.hero-image-wrapper {
    max-width: 800px;
    margin: 0 auto 2.5rem;
    position: relative;
    /* Removed aspect-ratio to let image define height */
}

.hero-img {
    width: 100%;
    height: auto;
    display: block;
    /* Optional: add drop shadow if needed, but keeping it clean for now */
}

.hero-checklist {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.hero-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.icon-green {
    color: var(--primary-green);
}

.icon-red {
    color: var(--primary-red);
}

/* Pain Section */
.pain-section {
    padding: 5rem 0;
    background-color: var(--bg-pink);
}

.pain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.pain-card {
    background-color: white;
    /* Contrast with pink section */
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #fecdd3;
    text-align: center;
}

.icon-box-red {
    background-color: #fee2e2;
    color: var(--primary-red);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.pain-card h3 {
    margin-bottom: 0.75rem;
    color: #881337;
}

/* Bonus Section */
.bonus-section {
    padding: 5rem 0;
    background-color: var(--light-bg);
}

.bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.bonus-card {
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.bonus-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.bonus-header {
    background-color: var(--primary-green);
    color: white;
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.bonus-card h3 {
    margin-bottom: 0.5rem;
}

/* Pricing Section */
.pricing-section {
    padding: 5rem 0;
    background-color: var(--bg-pink);
}

.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    /* Center vertically if heights differ */
}

.pricing-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    padding: 3rem 2rem;
    flex: 1;
    max-width: 400px;
    text-align: center;
    position: relative;
}

.pricing-card.complete {
    border: 2px solid var(--primary-green);
    box-shadow: var(--shadow-xl);
    transform: scale(1.05);
    /* Slight emphasis */
    z-index: 10;
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-green);
    color: white;
    padding: 0.35rem 1rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.price-desc {
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.original-price {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 500;
}

.price-label {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: -0.5rem;
}

.price {
    background: transparent;
    color: var(--dark-bg);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
    line-height: 1;
}

.price .currency {
    font-size: 1.5rem;
    font-weight: 500;
    color: #94a3b8;
    align-self: flex-end;
    margin-bottom: 10px;
}

.price .int-value {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    color: #1e293b;
    /* Changed from blue to dark/black */
    letter-spacing: -2px;
}

.pricing-card.complete .price .int-value {
    color: var(--primary-green);
}

.price .decimal-value {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    align-self: flex-end;
    margin-bottom: 10px;
}

.pricing-features {
    text-align: left;
    margin-bottom: 2rem;
    display: inline-block;
}

.pricing-features li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pricing-features li svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.pricing-features .disabled {
    color: #94a3b8;
    text-decoration: line-through;
}

.btn-pricing {
    display: block;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-pricing.ghost {
    background-color: transparent;
    border: 2px solid #cbd5e1;
    color: #64748b;
}

.btn-pricing.ghost:hover {
    border-color: #94a3b8;
    color: #475569;
}

/* Testimonials */
.testimonials-section {
    padding: 5rem 0;
    background-color: var(--light-bg);
    color: var(--text-main);
}

.testimonials-section .section-title {
    color: #1e293b;
}

.testimonials-carousel {
    position: relative;
    max-width: 900px;
    margin: 3rem auto 2rem;
    display: block;
    /* Changed from flex */
    padding: 0 3rem;
}

.testimonial-track-container {
    overflow: hidden;
    width: 100%;
}

.testimonial-track {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.testimonial-slide {
    min-width: 100%;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
}

/* Image Testimonial Styles */
.testimonial-image-wrapper {
    max-width: 700px;
    /* Increased */
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: none;
}

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

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

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #334155;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 10;
}

.nav-btn:hover {
    color: var(--primary-blue);
}

.nav-btn.prev {
    left: 0;
}

.nav-btn.next {
    right: 0;
}

@media (max-width: 768px) {
    .testimonials-carousel {
        padding: 0 2rem;
    }
}

.carousel-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    cursor: pointer;
}

.carousel-indicator.current-slide {
    background-color: var(--primary-green);
}

/* Guarantee */
.guarantee-section {
    background-color: var(--bg-pink);
    padding: 4rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.guarantee-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: 800px;
    border: 2px dashed #cbd5e1;
    padding: 2rem;
    border-radius: 1rem;
    background-color: white;
}

.guarantee-icon {
    width: 80px;
    height: 80px;
    color: #0f172a;
}

.guarantee-icon svg {
    width: 100%;
    height: 100%;
}

/* Author */
.author-section {
    padding: 5rem 0;
}

.author-container {
    display: flex;
    align-items: center;
    gap: 3rem;
    max-width: 900px;
}

.author-img {
    flex-shrink: 0;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #cbd5e1;
}

.img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.5rem;
    font-weight: 700;
}

/* FAQ */
.faq-section {
    padding: 5rem 0;
    background-color: var(--light-bg);
    /* Keep light gray for contrast or make pink too? User said white sections. FAQ was light-bg. Let's keep it distinct or make it white? Let's keep light-bg for now unless requested. OR: "seções que estão nessa cor de branco". light-bg is basically white. Let's make it pink too for consistency? No, maybe alternating is better. Let's stick to what was explicitly WHITE first. But Bonus was light-bg. Wait, I changed Bonus to pink above. Let's check. Bonus was light-bg (#f8fafc) which is basically white. I will change FAQ to pink if I changed Bonus. */
}

.accordion {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-item {
    background-color: white;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.accordion-header {
    width: 100%;
    text-align: left;
    padding: 1.25rem;
    background: white;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-icon {
    transition: transform 0.3s;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 1.25rem;
}

.accordion-content p {
    padding-bottom: 1.25rem;
    color: #475569;
}

.accordion-item.active .accordion-content {
    max-height: 200px;
    /* Approximate height */
}

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

/* Footer */
footer {
    background-color: var(--bg-pink);
    padding: 3rem 0;
    text-align: center;
    border-top: 1px solid #e2e8f0;
}

.legal-text {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.5rem;
}

/* Media Queries */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.75rem;
    }

    .hero-headline h1 {
        font-size: 2rem;
    }

    .pricing-card.complete {
        transform: none;
    }

    .author-container {
        flex-direction: column;
        text-align: center;
    }

    .guarantee-content {
        flex-direction: column;
        text-align: center;
    }

    .banner-content {
        flex-direction: column;
        gap: 0.5rem;
    }
}