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

:root {
    /* Prosperity Dark & Gold Palette */
    --color-dark-bg-deep: #0D1B2A; /* Very dark blue-gray, almost black */
    --color-dark-bg-medium: #1C2D40; /* Slightly lighter blue-gray */
    --color-dark-bg-light: #2A3E50; /* Even lighter blue-gray for contrast elements (cards, etc.) */

    --color-gold-primary: #DAA520; /* Goldenrod, main gold accent */
    --color-gold-accent: #FFD700; /* Pure Gold, for strong highlights and titles */
    --color-gold-gradient-start: #BF8916; /* Darker gold for gradients */
    --color-gold-gradient-end: #EBCD83; /* Lighter gold for gradients */

    --color-text-light: #E0E6EE; /* Light text for readability on dark backgrounds */
    --color-text-muted: #A0B0C0; /* Muted light text for secondary info, subtitles */
    --color-text-dark-on-gold: #0D1B2A; /* Very dark text for contrast on gold backgrounds */

    --color-success-green: #4CAF50; /* Classic success green for checkmarks */

    /* Gradients */
    --gradient-bg-dark-1: linear-gradient(135deg, var(--color-dark-bg-deep) 0%, var(--color-dark-bg-medium) 100%);
    --gradient-bg-dark-2: linear-gradient(135deg, var(--color-dark-bg-medium) 0%, var(--color-dark-bg-light) 100%);
    --gradient-gold: linear-gradient(135deg, var(--color-gold-gradient-start) 0%, var(--color-gold-gradient-end) 100%);

    /* New variables for white text marker effect */
    --gradient-text-marker: linear-gradient(to right, #FFFFFF 0%, #E0E6EE 70%, var(--color-gold-gradient-end) 100%);
    --shadow-text-marker: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.5);

    /* Shadows will also adapt to the gold theme */
    --shadow-gold-soft: 0 4px 20px rgba(255, 215, 0, 0.15);
    --shadow-gold-strong: 0 8px 30px rgba(255, 215, 0, 0.25);
    
    /* Typography */
    --font-primary: 'Noto Sans', sans-serif;
    --font-accent: 'Space Mono', monospace;
}

body {
    font-family: var(--font-primary);
    line-height: 1.5; /* Reduced line-height */
    color: var(--color-text-light); /* Default text color for body */
    background: var(--color-dark-bg-deep); /* Default body background */
    scroll-behavior: smooth;
}

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

/* Typography */
.main-title {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem); /* Reduced font size */
    font-weight: 700;
    line-height: 1.15; /* Reduced line-height */
    margin-bottom: 1.5rem; /* Reduced margin */
    background: var(--gradient-gold); /* Gold gradient for main title */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.2); /* Stronger subtle gold glow for better visibility */
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2rem;
    background: var(--gradient-gold); /* Gold gradient for section titles */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.2); /* Stronger subtle gold glow for better visibility */
}

.subtitle {
    font-weight: 400;
    color: var(--color-text-muted); /* Muted text for subtitles */
    font-size: 0.8em;
}

/* Base highlight for general gold text if needed elsewhere, but not used for Sobreviver/Crenças Tóxicas anymore */
.highlight {
    position: relative;
    /* Color here is largely overridden by parent's background-clip: text if inside title */
    color: var(--color-gold-accent); 
}

/* Specific gold highlight for words like "Prosperar" and "Comandar" */
.highlight.gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* New class for the specific white text marker effect on "Sobreviver" and "Crenças Tóxicas" */
.text-marker-white {
    background-image: var(--gradient-text-marker);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: var(--shadow-text-marker); /* Unique white glow */
}

/* Hero Section */
.hero-section {
    padding: 4rem 0; /* Reduced padding */
    background: var(--gradient-bg-dark-1); /* Dark gradient background */
    text-align: center;
}

.hero-subtitle {
    font-size: 1.2rem; /* Reduced font size */
    color: var(--color-text-muted); /* Muted text */
    margin-bottom: 1.5rem; /* Reduced margin */
    font-weight: 400;
    line-height: 1.4; /* Reduced line-height */
}

.hero-description {
    font-size: 1.1rem; /* Reduced font size */
    margin: 1.5rem auto 2.5rem; /* Adjusted margin for new position */
    max-width: 800px;
    line-height: 1.6; /* Reduced line-height */
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-light); /* Light text */
}

.video-intro {
    font-size: 1rem; /* Reduced font size */
    color: var(--color-text-muted); /* Muted text */
    margin-bottom: 2rem; /* Reduced margin */
}

/* Video Container */
.video-container {
    max-width: 800px;
    margin: 0 auto 1.5rem; /* Reduced margin-bottom */
    position: relative; /* Essential for overlay positioning */
}

/* New style for vertical video (9:16) */
.video-container.vertical {
    max-width: 400px; /* Constrain width for portrait aspect */
}

.vsl-video {
    width: 100%;
    aspect-ratio: 9 / 16;
    display: block;
    border-radius: 15px;
    box-shadow: var(--shadow-gold-strong);
    border: 3px solid var(--color-gold-primary);
    background: var(--color-dark-bg-medium); /* Fallback background for video area */
    object-fit: cover;
    z-index: 1; 
}

/* Video Overlay Styles (Thumbnail and Play Button) */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: var(--color-dark-bg-deep);
    z-index: 5;
    transition: opacity 0.3s ease;
}

.video-overlay.hidden {
    opacity: 0;
    pointer-events: none; /* Allows interaction with elements underneath */
}

.vsl-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6); /* Slightly dim the thumbnail */
}

.play-button {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.9); /* Gold background, slightly opaque */
    color: var(--color-dark-bg-deep);
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    transform: translateY(-120px); /* moved up ~120px */
}

.play-button svg {
    width: 40px;
    height: 40px;
    margin-left: 5px; /* Adjust for triangle optical centering */
}

.play-button:hover {
    transform: translateY(-120px) scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
}

.play-button:active {
    transform: translateY(-120px) scale(1.02);
}

/* Custom Controls (Progress Bar) */
.custom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 10px 10px; /* Padding for visual separation */
    z-index: 2; /* Below the overlay, above the video */
    pointer-events: none; /* User cannot influence this bar */
    transition: opacity 0.3s ease;
}

.custom-controls.hidden {
    opacity: 0;
}

.progress-bar-container {
    height: 5px;
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent white track */
    border-radius: 5px;
    width: 100%;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--gradient-gold); /* Gold gradient fill */
    transition: width 0.1s linear; /* Smooth progress update */
}

/* Image Placeholders */
.image-placeholder {
    border: 3px solid var(--color-gold-primary); /* Gold border */
    border-radius: 15px;
    padding: 3rem 2rem;
    margin: 3rem auto;
    text-align: center;
    background: var(--color-dark-bg-medium); /* Dark background */
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* New variant: when using a video inside the image-placeholder, render borderless and full */
.image-placeholder .video-frame {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0;
}

.image-placeholder .embed-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* remove rounded border for borderless look */
    border: 0;
    display: block;
    box-shadow: none; /* remove shadow */
}

.image-placeholder.medium {
    max-width: 400px;
}

.image-placeholder.large {
    max-width: 800px;
    min-height: 300px;
}

/* New: ensure mockup image fills the placeholder responsively */
.mockup-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
    border: 0;
}

.image-icon {
    font-size: 3rem;
    color: var(--color-gold-accent); /* Strong gold icon */
    margin-bottom: 1rem;
}

.image-placeholder span {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-light); /* Light text */
    text-align: center;
    line-height: 1.4;
}

/* Sections */
section {
    padding: 4rem 0; /* Reduced padding */
}

.problem-section {
    background: var(--gradient-bg-dark-2); /* Dark gradient background */
}

.mechanism-section {
    background: var(--gradient-bg-dark-1); /* Dark gradient background */
}

.transformation-section {
    background: var(--gradient-bg-dark-2); /* Dark gradient background */
}

.offer-section {
    background: var(--gradient-bg-dark-1); /* Dark gradient background */
}

.guarantee-section {
    background: var(--gradient-bg-dark-2); /* Dark gradient background */
}

.content-block {
    max-width: 800px;
    margin: 0 auto 3rem;
    font-size: 1.2rem;
    line-height: 1.7;
    text-align: center;
    color: var(--color-text-light); /* Light text */
}

.content-block p {
    margin-bottom: 1.2rem; /* Reduced margin */
}

.content-block strong {
    color: var(--color-gold-primary); /* Gold for strong text */
}

.emphasized {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-gold-accent); /* Strong gold */
}

/* Transformation Section */
.intro-block {
    max-width: 900px;
    margin: 0 auto 4rem;
    text-align: center;
    font-size: 1.2rem;
}

.week-block {
    background: var(--color-dark-bg-light); /* Lighter dark background for cards */
    border-radius: 20px;
    padding: 3rem;
    margin: 3rem auto;
    max-width: 1000px;
    box-shadow: var(--shadow-gold-soft); /* Gold shadow */
    border: 1px solid rgba(255, 215, 0, 0.2); /* Subtle gold border */
}

.week-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.check-icon {
    color: var(--color-success-green); /* Success green */
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.week-header h3 {
    font-size: 1.5rem;
    color: var(--color-gold-primary); /* Gold for week titles */
    font-weight: 700;
    line-height: 1.3;
}

.fluir-method {
    background: var(--gradient-gold); /* Gold gradient background */
    color: var(--color-dark-bg-deep); /* Dark text on gold */
    padding: 2rem;
    border-radius: 15px;
    margin: 2rem 0;
    font-weight: 600;
}

.method-letter {
    background: rgba(0, 0, 0, 0.2); /* Darker background for readability */
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    font-weight: 700;
    font-family: var(--font-accent);
    color: var(--color-gold-accent); /* Gold text */
}

.what-you-do {
    margin-top: 2rem;
}

.what-you-do h4 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: var(--color-gold-primary); /* Gold for subheadings */
}

.what-you-do ul {
    list-style: none;
    padding: 0;
}

.what-you-do li {
    margin-bottom: 1.2rem; /* Reduced margin */
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.6;
    color: var(--color-text-light); /* Light text */
}

.what-you-do li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-gold-accent); /* Strong gold bullet */
    font-weight: 700;
    font-size: 1.2rem;
}

.final-result {
    background: var(--gradient-bg-dark-1); /* Dark gradient background */
    color: var(--color-text-light); /* Light text */
    padding: 3rem;
    border-radius: 20px;
    text-align: center;
    margin: 4rem auto;
    max-width: 800px;
}

.final-result h3 {
    font-size: 2rem;
    color: var(--color-gold-accent); /* Strong gold */
    margin-bottom: 1.5rem;
}

/* Offer Section */
.offer-list {
    max-width: 900px;
    margin: 3rem auto;
}

.offer-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.2rem 0; /* Reduced padding */
    border-bottom: 1px solid rgba(255, 215, 0, 0.2); /* Subtle gold border */
    font-size: 1.1rem;
}

.offer-item.bonus {
    background: var(--color-dark-bg-light); /* Lighter dark background for bonus items */
    padding: 1.2rem; /* Reduced padding */
    border-radius: 10px;
    border: none;
    margin-bottom: 1rem;
}

.item-text {
    flex: 1;
}

.value {
    color: var(--color-gold-accent); /* Strong gold for values */
    font-weight: 700;
}

.value-summary {
    text-align: center;
    margin: 3rem auto 2rem; /* Reduced margin */
    max-width: 600px;
}

.total-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.price {
    color: var(--color-gold-accent); /* Strong gold for price */
}

.value-note {
    font-size: 1.1rem;
    color: var(--color-text-muted); /* Muted text */
    font-style: italic;
}

.pricing-section {
    text-align: center;
    max-width: 700px;
    margin: 4rem auto;
    padding: 3rem;
    background: var(--color-dark-bg-medium); /* Dark background */
    border-radius: 20px;
}

.pricing-section h3 {
    font-size: 2rem;
    color: var(--color-gold-primary); /* Gold for pricing section title */
    margin-bottom: 1rem; /* Reduced margin */
}

.pricing-section p {
    margin-bottom: 0.8rem; /* Added margin for paragraphs */
}

.price-container {
    margin: 2rem 0; /* Reduced margin */
}

.installment-price {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.price-highlight {
    background: var(--gradient-gold); /* Gold gradient for price highlight */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cash-price {
    font-size: 1.3rem;
    color: var(--color-text-muted); /* Muted text */
}

.cash-highlight {
    color: var(--color-success-green); /* Success green for cash price */
    font-weight: 700;
}

/* CTA Button */
.cta-button {
    background: var(--gradient-gold); /* Gold gradient button */
    color: var(--color-dark-bg-deep); /* Dark text on gold button */
    border: none;
    padding: 2rem 3rem;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-gold-strong); /* Strong gold shadow */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-primary);
    margin-top: 1.5rem; /* Reduced margin */
    width: 100%;
    max-width: 600px;
    text-decoration: none;
    display: block;
    text-align: center;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(255, 215, 0, 0.4); /* Enhanced gold shadow on hover */
    filter: brightness(1.1);
}

.cta-button:active {
    transform: translateY(-1px);
}

.play-button:active {
    transform: translateY(-120px) scale(1.02);
}

/* Guarantee Section */
.guarantee-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.guarantee-intro h3 {
    font-size: 1.8rem;
    color: var(--color-gold-primary); /* Gold for guarantee intro title */
    margin-bottom: 1.5rem;
}

.guarantee-parts {
    display: grid;
    gap: 3rem;
    max-width: 1000px;
    margin: 0 auto;
}

.guarantee-part {
    background: var(--color-dark-bg-light); /* Lighter dark background for guarantee cards */
    padding: 3rem;
    border-radius: 20px;
    box-shadow: var(--shadow-gold-soft); /* Gold shadow */
    border: 2px solid rgba(255, 215, 0, 0.2); /* Subtle gold border */
}

.guarantee-part h4 {
    font-size: 1.5rem;
    color: var(--color-gold-primary); /* Gold for guarantee part titles */
    margin-bottom: 1.5rem;
}

.guarantee-part p {
    margin-bottom: 0.8rem; /* Reduced margin */
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--color-text-light); /* Light text */
}

.guarantee-part p strong {
    color: var(--color-gold-accent); /* Strong gold for emphasized text */
}

/* Footer */
.footer-section {
    padding: 3rem 0;
    background: var(--color-dark-bg-deep); /* Deep dark background */
    color: var(--color-text-light); /* Light text */
    text-align: center;
}

.logo-placeholder {
    margin-bottom: 2rem;
}

.logo-placeholder .image-icon {
    color: var(--color-gold-primary); /* Gold icon */
}

.logo-placeholder span {
    color: var(--color-text-muted); /* Muted text */
}

.footer-links {
    font-size: 0.9rem;
}

.footer-links a {
    color: var(--color-text-muted); /* Muted text links */
    text-decoration: none;
    margin: 0 1rem;
}

.footer-links a:hover {
    color: var(--color-gold-accent); /* Strong gold on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    section {
        padding: 2.5rem 0; /* Reduced padding */
    }
    
    .hero-section {
        padding: 2.5rem 0; /* Reduced padding */
    }
    
    .week-block {
        padding: 2rem 1.5rem;
        margin: 2rem auto;
    }
    
    .week-header {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .check-icon {
        align-self: flex-start;
    }
    
    .fluir-method {
        padding: 1.5rem;
    }
    
    .offer-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .pricing-section {
        padding: 2rem 1.5rem;
    }
    
    .cta-button {
        padding: 1.5rem 2rem;
        font-size: 1.1rem;
    }
    
    .guarantee-part {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .installment-price {
        font-size: 2rem;
    }
    
    .main-title {
        font-size: 2.2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
}

.vsl-iframe {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    border: 3px solid var(--color-gold-primary);
    box-shadow: var(--shadow-gold-strong);
    background: var(--color-dark-bg-medium);
    aspect-ratio: 9 / 16;
    display: block;
}