:root {
    --primary-color: #F0E5CB;
    --secondary-color: #FFFFFF;
    --accent-color: #27AE60;
    --bg-dark: #0D1611;
    --overlay-color: rgba(13, 22, 17, 0.4);

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Raleway', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-dark);
    color: var(--secondary-color);
    font-family: var(--font-body);
    line-height: 1.5;
    overflow-x: hidden;
}

/* Header / Top Bar */
.top-announcement {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px 0;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.top-announcement.header-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 0 40px;
}

.top-announcement p {
    font-size: 15px;
    opacity: 0.8;
}

.btn-conhecer {
    background: #0d1611;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-conhecer:hover {
    background: #1a2a1f;
    border-color: var(--accent-color);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020704;
    padding: 160px 40px 100px;
    /* Significantly increased top padding to clear header */
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/banner_hero.png') no-repeat center center;
    background-size: cover;
    opacity: 0.85;
    z-index: 1;
}

.hero-container {
    width: 100%;
    max-width: 1400px;
    height: auto;
    min-height: 70vh;
    background: transparent;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Reverting to left alignment since logo is gone */
    padding: 0 40px 150px 140px;
    /* Added more bottom padding to make room for transition overlap */
}

.hero-content {
    max-width: 800px;
    margin-top: 40px;
    /* Pushing content down further explicitly */
    animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-mobile-logo {
    display: none;
    /* Oculta no desktop */
}

.badge {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 6px 20px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 25px;
    /* Reduced margin */
    opacity: 0.8;
    background: rgba(240, 229, 203, 0.05);
    transition: all 0.3s ease;
    cursor: default;
}

.badge:hover {
    background: rgba(240, 229, 203, 0.15);
    opacity: 1;
    letter-spacing: 3px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 46px;
    line-height: 1.1;
    color: var(--primary-color);
    margin-bottom: 25px;
    /* Reduced margin */
    font-weight: 700;
}

.hero-description {
    margin-bottom: 40px;
    /* Reduced margin */
}

.hero-description p.highlight {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--secondary-color);
}

.hero-description p:not(.highlight) {
    font-size: 21.63px;
    line-height: 1.2;
    color: var(--secondary-color);
    opacity: 0.9;
    font-weight: 400;
}

.btn-primary {
    background-color: var(--accent-color);
    color: white;
    padding: 18px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 10px 25px rgba(39, 174, 96, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    background-color: #2ecc71;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(39, 174, 96, 0.4);
}

/* Mouse Scroll Icon */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 48%;
    /* Slightly adjusted to match design */
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    opacity: 0.5;
}

.scroll-indicator::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: white;
    border-radius: 2px;
    animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 15px);
        opacity: 0;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Transition Section */
.transition-section {
    background-color: #FFFFFF;
    padding: 0 0 60px;
    /* added bottom padding since the top relies on overlap */
    position: relative;
    z-index: 50;
}

.transition-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #333D35;
    border-radius: 40px;
    /* Fully rounded top corners */
    position: relative;
    transform: translateY(-80px);
    /* Overlap hero by 80px */
    margin-bottom: -80px;
    /* offset the layout shift from translate */
    padding: 80px 100px;
    color: var(--secondary-color);
}

.transition-arrow-wrapper {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 100%;
    /* Top of wrapper aligns to bottom of parent */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.hump-curve {
    width: 220px;
    height: 38px;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
}

.shadow-premium {
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

.transition-title {
    font-family: var(--font-heading);
    font-size: 56px;
    line-height: 1.15;
    font-weight: 700;
}

.transition-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 38px;
    line-height: 1.1;
    font-weight: 700;
}

.transition-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.transition-card {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 20px 25px;
    border-radius: 8px;
    /* Tighter corners */
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
}

.transition-card:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.icon-box {
    background-color: rgba(240, 229, 203, 0.6);
    /* Gold/Sand color */
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arrow-icon {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.transition-card p {
    font-size: 16px;
    /* Matched 16px */
    line-height: 1.4;
    font-weight: 400;
    /* Matched weighting */
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

/* Problem Section */
.problem-section {
    background-color: #FFFFFF;
    color: var(--bg-dark);
    padding: 100px 0 120px;
}

.problem-content ul,
.problem-content li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

.problem-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.problem-title-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.problem-large-o {
    font-family: var(--font-heading);
    font-size: 110px;
    /* Adjusted to sit naturally */
    line-height: 0.85;
    font-weight: 700;
    color: #1a1a1a;
    display: inline-block;
    margin-top: 5px;
}

.problem-title {
    font-family: var(--font-body);
    font-size: 72px; /* Adjusted for Raleway scale */
    line-height: 1; /* Eliminates internal margins inside the gray box */
    font-weight: 800;
    color: #1a1a1a;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch; /* Forces all backgrounds to perfectly match the widest element's width */
    text-transform: uppercase;
    gap: 15px; /* Spaces out the gray boxes neatly */
}

.highlight-wide-box {
    background: #EAEAEA;
    padding: 0px 80px 10px 15px; /* Padding pushes right edge far gracefully */
    display: block;
    box-sizing: border-box;
}

.bold-caps {
    font-weight: 800 !important;
    text-transform: uppercase;
}

/* Method Intro Section */
.method-intro-section {
    background-color: #333D35;
    color: white;
    padding: 80px 0;
    position: relative;
}

.method-split-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
    padding: 0 40px;
}

.method-image-column {
    position: relative;
    z-index: 5;
    margin-top: -120px;
    /* Pulls the image up to overlap the previous white section */
}

.method-vertical-img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    /* Sharper corners like the figma file */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.method-text-column {
    padding-top: 20px;
}

.method-heading {
    font-family: var(--font-body);
    /* Looks like a sans-serif font in photo */
    font-size: 38px;
    line-height: 1.3;
    margin-bottom: 40px;
    font-weight: 500;
}

.method-heading .subtle-heading {
    color: rgba(255, 255, 255, 0.35);
    font-size: 26px;
    /* Smaller than the second line */
}

.method-heading .white-heading {
    color: #FFFFFF;
    font-weight: 700;
}

.method-body {
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Uniform spacing between paragraphs */
}

.method-p {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.highlight-text {
    background: #EEEEEE;
    /* Slightly darker/more neutral gray */
    padding: 2px 10px;
    display: inline-block;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}

/* CME Platform Section */
.cme-platform-section {
    background-color: #273029;
    /* Deep dark green */
    padding: 60px 0 100px;
}

.cme-platform-card {
    background: rgba(255, 255, 255, 0.05);
    /* Same tint as screenshot */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 25px;
    width: 96%;
    /* Huge width */
    max-width: 1720px;
    /* Huge horizontal spread on 1920 screens */
    margin: 0 auto;
    position: relative;
    padding: 30px 100px;
    /* Tight vertical padding for 'menos alto' layout */
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
}

.platform-arrow-wrapper {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 20px;
}

.platform-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.6fr;
    /* Let the mockup.png breathe and naturally enlarge */
    gap: 60px;
    align-items: center;
}

.platform-text-column {
    padding-right: 0px;
}

.platform-heading {
    font-family: var(--font-body);
    font-size: 48px;
    /* As per Figma spec */
    white-space: nowrap;
    /* Keep on one line */
    color: #A3B1A4;
    /* Very subtle sage/grey tint as seen on the large print */
    margin-bottom: 25px;
    /* Tighter margin */
    font-weight: 700;
    /* Bold as per Figma spec */
    line-height: 49px;
    /* As per Figma spec */
    letter-spacing: 0;
}

.platform-body {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.platform-body p {
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.platform-image-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mockup-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.platform-mockup-img {
    width: 100%;
    max-width: 850px;
    /* Cap size so it doesn't cause vertical blowout */
    height: auto;
    display: block;
}

.mockup-caption {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1px;
    margin-top: 25px;
    /* Spaced out evenly */
    text-transform: uppercase;
}

.problem-content {
    padding-left: 20px;
}

/* -------------------------------------------------------------------------- */
/* PILLARS SECTION (Três Áreas) */
/* -------------------------------------------------------------------------- */
.cme-pillars-section {
    background-color: #273029;
    /* Base dark vector color */
    background-image: url('img/bg_2.png');
    background-size: cover;
    /* Background fluidly spans the whole block */
    background-position: center 15%;
    /* Lowers the background image */
    background-repeat: no-repeat;
    padding: 60px 0 200px;
    /* Large bottom padding for the next floating block */
    position: relative;
    color: white;
}

.pillars-header {
    margin-bottom: 80px;
}

.pillars-subtitle {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    display: block;
    margin-bottom: 28px;
}

.pillars-subtitle strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    letter-spacing: 1.5px;
}

.pillars-subtitle span {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.pillars-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 48px;
    line-height: 1.15;
    color: white;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.pillars-title strong {
    font-weight: 700;
    font-style: normal;
    font-family: 'Playfair Display', Georgia, serif;
}

.pillars-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    z-index: 2;
    /* Sit on top of bg image */
}

.pillar-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 450px;
    cursor: pointer;
}

.pillar-indicator {
    display: flex;
    align-items: center;
    position: relative;
}

.pillar-pill {
    background-color: #2A362D;
    /* Lighter dark green */
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 0 40px 0 0;
    /* Clear right padding for the dot */
    position: relative;
    z-index: 2;
    overflow: visible;
    /* Dot needs to overlay edge */
}

.pillar-number-circle {
    background-color: #1A211D;
    /* Very dark inner circle */
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: white;
    margin-right: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.pillar-number {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin-right: 25px;
}

.pillar-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
}

.pillar-label strong {
    font-family: var(--font-heading);
    /* Serif font like Playfair */
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: white;
    text-transform: none;
    /* In the mockup it was just caps, not forced */
}

.pillar-label span {
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
}

.pillar-dot {
    width: 14px;
    height: 14px;
    background-color: #CEB679;
    /* Soft gold accent */
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(206, 182, 121, 0.6);
    position: absolute;
    right: -7px;
    /* Sits precisely on the right border split between pill and background */
    z-index: 3;
}

.pillar-plus {
    font-family: var(--font-body);
    font-size: 24px;
    color: #CEB679;
    font-weight: 300;
    margin-left: auto;
    padding-left: 20px;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    line-height: 1;
    display: flex;
    align-items: center;
}

.pillar-item.active .pillar-plus {
    transform: rotate(45deg);
}

.pillar-line {
    position: absolute;
    left: 100%;
    /* Start from edge of pill */
    top: 50%;
    width: 200px;
    border-bottom: 2px dotted rgba(255, 255, 255, 0.15);
    /* Slightly more visible */
    z-index: 1;
}

.pillar-static-desc {
    font-family: var(--font-body);
    font-size: 17px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
    padding-left: 90px;
    margin: 0;
    display: block;
}

.pillar-desc {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    padding-left: 90px;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease;
    opacity: 0;
}

.pillar-desc ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.pillar-desc li {
    margin-bottom: 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
}

.pillar-desc li strong {
    color: #CEB679;
    margin-right: 10px;
    font-size: 12px;
}

.pillar-item.active .pillar-desc {
    max-height: 400px;
    opacity: 1;
    margin-top: 10px;
}

/* -------------------------------------------------------------------------- */
/* HOW IT WORKS SECTION (Floating Overlap Block) */
/* -------------------------------------------------------------------------- */
.how-it-works-section {
    background-color: var(--secondary-color);
    /* White section below it */
    padding: 0 0 120px;
}

.how-it-works-card {
    background-color: #333D35;
    /* Same slightly lighter dark green as method intro */
    border-radius: 30px;
    max-width: 1150px;
    /* Slighly wider if needed */
    margin: 0 auto;
    position: relative;
    padding: 120px 80px;
    /* Increased vertical padding to make string taller */
    min-height: 480px;
    /* Guarantee a tall appearance */
    margin-top: -140px;
    /* Saltado puxando pra cima */
    z-index: 10;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
}

.how-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.how-title-column {
    background-color: #273029;
    /* Darker inner inset */
    border-radius: 20px;
    padding: 60px 50px;
    display: flex;
    align-items: center;
}

.how-title-column h2 {
    font-family: var(--font-body);
    color: white;
    font-size: 54px;
    line-height: 1.1;
    font-weight: 700;
}

.how-text-column {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.how-strong {
    font-family: var(--font-body);
    font-weight: 700;
    color: white;
    font-size: 22px;
    line-height: 1.5;
    margin: 0;
}

.how-light {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

/* -------------------------------------------------------------------------- */
/* 21 DAYS PROCESS SECTION */
/* -------------------------------------------------------------------------- */
.cme-process-section {
    background-color: var(--secondary-color);
    padding: 0 0 120px;
    position: relative;
    z-index: 5;
}

.process-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 80px;
}

.process-title {
    font-family: var(--font-body);
    color: #4A514B;
    font-size: 48px;
    line-height: 1.1;
    font-weight: 800;
}

.process-subtitle {
    font-family: var(--font-body);
    font-weight: 700;
    color: #556B5A;
    display: block;
    margin-bottom: 15px;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.process-step-box {
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 15px 20px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
}

.icon-arrow {
    background-color: #333D35;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: normal;
}

/* Base card outline style */
.process-outline-card {
    border: 1px solid #EAEAEA;
    border-radius: 20px;
    padding: 60px;
    background-color: white;
    text-align: center;
    margin-bottom: 120px;
    position: relative;
}

.outline-title {
    font-family: var(--font-body);
    font-size: 32px;
    color: #5A695D;
    margin-bottom: 40px;
    font-weight: 700;
}

.outline-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 60px;
}

.flow-box {
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    padding: 20px;
    width: 180px;
    text-align: left;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: #444;
    position: relative;
}

.icon-arrow-dark {
    background-color: #556B5A;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin-bottom: 15px;
}

.flow-arrow {
    color: #999;
}

.outline-conclusion strong {
    font-family: var(--font-body);
    color: #333;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

.outline-conclusion p {
    font-family: var(--font-body);
    color: #666;
    font-size: 18px;
    line-height: 1.5;
}

/* Whole life layout */
.whole-life-section {
    text-align: center;
}

.whole-life-title {
    font-family: var(--font-body);
    color: #444;
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 40px;
    font-weight: 700;
}

.accent-italic {
    color: #6E8A74;
    /* Soft sage */
    font-style: italic;
}

.whole-life-desc {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.whole-life-desc p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

.areas-title {
    font-family: var(--font-body);
    color: #333;
    margin-bottom: 30px;
}

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

.area-box {
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    padding: 15px 20px;
    width: 320px;
    /* Constrict width to group items centrally */
    display: flex;
    align-items: center;
    gap: 15px;
    background: white;
    font-weight: 700;
    color: #444;
}

/* -------------------------------------------------------------------------- */
/* CONTEXT COMPONENT (Talvez você tentou sozinha) */
/* -------------------------------------------------------------------------- */
.cme-context-section {
    background-color: var(--secondary-color);
    padding: 0 0 120px;
}

.context-dark-card {
    background-color: #333D35;
    border-radius: 20px;
    padding: 60px 80px;
    color: white;
    text-align: center;
    margin-bottom: 100px;
}

.context-card-title {
    font-family: var(--font-body);
    font-size: 32px;
    color: #8C998B;
    margin-bottom: 30px;
    font-weight: 700;
}

.context-dark-card p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: #EAEAEA;
    margin-bottom: 20px;
}

.context-dark-card p:last-child {
    margin-bottom: 0;
}

.not-more-content {
    text-align: center;
    margin-bottom: 100px;
}

.not-more-title {
    font-family: var(--font-body);
    font-size: 36px;
    color: #333;
    line-height: 1.2;
    margin-bottom: 30px;
    font-weight: 700;
}

.not-more-text {
    color: #777;
    margin-bottom: 40px;
    line-height: 1.6;
}

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

.access-subtext {
    font-size: 12px;
    color: #999;
    letter-spacing: 1px;
    text-transform: lowercase;
    display: block;
    margin-bottom: 30px;
}

.benefits-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.benefit-box {
    border: 1px solid #EDDCB5;
    /* Gold edge */
    border-radius: 8px;
    padding: 20px 30px;
    width: 500px;
    /* Slightly wider to match photo's long horizontal string */
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    background: white;
    color: #333;
    font-weight: 600;
}

.benefit-box p {
    margin: 0;
    flex-grow: 1;
    font-size: 14px;
    line-height: 1.4;
}

.star-icon {
    color: #FACC15;
    /* Yellow gold tint */
    font-size: 24px;
}

.one-year-access {
    font-size: 14px;
    color: #38644A;
    /* Emerald accent */
    margin-bottom: 80px;
}

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

.search-title {
    font-family: var(--font-body);
    font-size: 32px;
    color: #333;
    margin-bottom: 25px;
    font-weight: 700;
}

.search-text p {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.problem-content .unified-text {
    font-size: 24px;
    /* Reduced from 30px to match overall typography */
    line-height: 2;
    /* Increased spacing to mimic photo */
    font-weight: 400;
    color: #6B615F;
    letter-spacing: 0.5px;
}

.problem-content .emphasized {
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: underline;
    display: inline-block;
}

.problem-content .subtle {
    opacity: 0.6;
}

/* Sustainability Section */
.sustainability-section {
    background-color: var(--secondary-color);
    padding: 40px 0 120px;
}

.sustainability-card {
    background: white;
    border: 1px solid #EAEAEA;
    border-radius: 24px;
    /* Smoother corner like photo */
    /* Removed overflow: hidden to allow the separator hump to breathe */
    max-width: 900px;
    /* Reduced width */
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    /* Added back to ensure rounded corners affect bottom grey block */
}

/* Override overflow to make the curve visible */
.sustainability-card {
    overflow: visible;
}

.card-conclusion {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.card-main {
    padding: 60px 80px 40px;
    /* Adjusted padding */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 48px;
    /* Reduced to match photo */
    line-height: 1.1;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.card-subtitle {
    font-size: 20px;
    line-height: 1.4;
    color: #4a4a4a;
}

.card-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Tighter gap */
}

.step-item {
    border: 1px solid #DEDEDE;
    padding: 14px 20px;
    /* Tighter padding */
    border-radius: 4px;
    /* Flatter corners like photo */
    font-weight: 700;
    font-size: 15px;
    /* Smaller font */
    text-align: center;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.step-item:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(39, 174, 96, 0.02);
}

.card-conclusion {
    background-color: #F5F5F5;
    border-radius: 12px;
    margin: 40px;
    padding: 30px 40px;
    text-align: center;
}

.card-conclusion p {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.6;
    margin-bottom: 8px;
    /* Tighter line height */
}

.card-conclusion .impact {
    margin: 15px 0;
}

.strong-caps {
    font-weight: 800;
    font-size: 14px;
    /* Matched photo */
    color: #1a1a1a;
    letter-spacing: 0.5px;
}

.card-arrow-wrapper {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 100%;
    /* Top of wrapper aligns to bottom of parent */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.curved-arrow {
    width: 180px;
    height: 35px;
    filter: drop-shadow(0 -2px 5px rgba(0, 0, 0, 0.05));
}

/* ── PRICING SECTION ──────────────────────── */
.cme-pricing {
    width: 100%;
    position: relative;
    padding-top: 60px;
    background-color: white;
    /* Corrigido: Fundo geral branco! */
    color: var(--bg-dark);
}

.pricing-intro {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0 20px;
    text-align: center;
    position: relative;
}

.pricing-arrow-wrapper {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 20px;
}

.pricing-cost-card {
    border: 1px solid #EAEAEA;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 1.5;
    color: #4A4A4A;
}

.pricing-cost-card p {
    margin-bottom: 20px;
}

.pricing-cost-card p:last-child {
    margin-bottom: 0;
}

.pricing-high-value {
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.pricing-real-deal {
    color: #D3BFA0;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
}

.pricing-main-wrapper {
    background-color: #EFEFEF;
    border-radius: 40px 40px 0 0;
    padding: 100px 20px 80px;
    position: relative;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-main-arrow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 20px;
}

.pricing-card {
    background-color: #333D35;
    border-radius: 16px;
    max-width: 600px;
    margin: 0 auto;
    padding: 60px;
    position: relative;
    color: white;
}

.guarantee-badge {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    background-color: #D3BFA0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 4px solid rgba(255, 255, 255, 0.2);
    overflow: visible; /* Garante que as pontas da estrela apareçam */
}

.badge-star-border {
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    background-color: #D3BFA0;
    z-index: -1;
    opacity: 0.6;
    /* Estrela de 24 pontas estilo carimbo premium */
    clip-path: polygon(50% 0%, 54% 5%, 60% 1%, 63% 7%, 70% 5%, 72% 12%, 79% 11%, 80% 18%, 87% 20%, 86% 27%, 93% 31%, 90% 38%, 97% 43%, 93% 50%, 97% 57%, 90% 62%, 93% 69%, 86% 73%, 87% 80%, 80% 82%, 79% 89%, 72% 88%, 70% 95%, 63% 93%, 60% 99%, 54% 95%, 50% 100%, 46% 95%, 40% 99%, 37% 93%, 30% 95%, 28% 88%, 21% 89%, 20% 82%, 13% 80%, 14% 73%, 7% 69%, 10% 62%, 3% 57%, 7% 50%, 3% 43%, 10% 38%, 7% 31%, 14% 27%, 13% 20%, 20% 18%, 21% 11%, 28% 12%, 30% 5%, 37% 7%, 40% 1%, 46% 5%);
    animation: rotate-star 20s linear infinite;
}

@keyframes rotate-star {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.guarantee-badge::after {
    /* pseudo element to create jagged look if needed */
    content: '';
}

.badge-number {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.badge-text {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
}

.pricing-card-title {
    font-size: 28px;
    font-family: var(--font-body);
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
}

.pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}

.pricing-list li {
    font-size: 15px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pricing-list li .check-icon {
    color: #D3BFA0;
}

.pricing-value-box {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 0;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.pricing-old {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 10px;
    width: 100%;
}

.pricing-new {
    font-family: 'Poppins', sans-serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 10px 0;
    text-align: center;
    width: 100%;
    display: block;
    white-space: nowrap;
}

.pricing-cash {
    font-size: 14px;
    opacity: 0.8;
}

.btn-pricing {
    width: 100%;
    justify-content: center;
    margin-bottom: 30px;
}

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

.payment-icons {
    max-width: 100%;
    height: auto;
    opacity: 0.8;
}

/* ── MENTOR SECTION ─────────────────────── */
.cme-mentor {
    background-color: white;
    padding: 100px 0;
}

.mentor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.mentor-image img {
    width: 100%;
    border-radius: 20px;
    height: auto;
}

.mentor-title {
    font-family: var(--font-body);
    font-size: 44px;
    color: #333D35;
    /* Cor verde muito escuro igual layout original */
    margin-bottom: 30px;
    font-weight: 700;
}

.mentor-content p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #555555;
}

.mentor-content strong {
    font-weight: 700;
}

/* ── FINAL CTA SECTION ──────────────────── */
.cme-final-cta {
    background-color: white;
    padding: 0 0 100px;
    position: relative;
}

.final-cta-container-box {
    background-color: #333D35;
    padding: 100px 20px;
    position: relative;
    border-radius: 40px;
    /* overflow: hidden removido para n cortar a seta dourada superior */
    margin: 0 auto;
    max-width: 1200px;
}

.cta-arrow-wrapper {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 20px;
}

.final-cta-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: white;
}

.final-cta-content p {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 40px;
}

.final-cta-content strong {
    font-size: 24px;
    font-weight: 700;
}

.btn-final {
    padding: 18px 50px;
    display: inline-block;
}

/* ── SEÇÃO CAPTURA DE LEADS (BOTTOM) ────────────────── */
.cme-lead-capture {
    background-color: #333D35;
    padding: 100px 20px;
}

.lead-capture-card {
    max-width: 600px;
    margin: 0 auto;
    background: #1A211D;
    padding: 60px 40px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Centraliza o form apenas no card de captura de baixo */
.cme-lead-capture .leadForm {
    margin: 30px auto 0;
}

/* ── FORMULÁRIO DE LEADS ────────────────── */
.leadForm {
    max-width: 450px;
    margin: 30px 0 0; 
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.leadForm input,
.leadForm select {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
    transition: border-color 0.3s ease;
    width: 100%;
}

.leadForm input:focus,
.leadForm select:focus {
    outline: none;
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.08);
}

.leadForm select option {
    background: #333D35;
    color: #fff;
}

.leadForm button[type="submit"] {
    margin-top: 8px;
    width: 100%;
    cursor: pointer;
    border: none;
}

/* Ajustes para o intl-tel-input */
.iti { width: 100%; }
.iti__country-list { 
    background-color: #1A211D !important; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
}

.iti__country-name, 
.iti__dial-code {
    color: #FFFFFF !important;
}

/* ── PÁGINA DE OBRIGADO ────────────────── */
.thanks-container {
    text-align: center;
    max-width: 700px;
    width: 100%;
}

.thanks-title {
    font-family: var(--font-heading);
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.thanks-copy {
    font-size: 20px;
    opacity: 0.9;
    margin-bottom: 40px;
    line-height: 1.6;
}

.progress-container {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    margin-bottom: 15px;
    overflow: hidden;
}

.progress-bar {
    width: 90%;
    height: 100%;
    background: var(--accent-color);
    border-radius: 100px;
    animation: progressLoad 2s ease-out forwards;
}

.progress-text {
    font-size: 14px;
    color: var(--accent-color);
    font-weight: 700;
}

/* Reveal Animation */
.reveal {
    animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ============================================================ */
/* TABLET (max 1024px)                                          */
/* ============================================================ */
@media (max-width: 1024px) {
    .hero-container {
        padding: 40px 20px;
        height: auto;
        min-height: 80vh;
        justify-content: center;
        align-items: center;
    }

    .hero-content {
        width: 100%;
        margin-top: 80px;
        /* 4 dedos de espaço */
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    /* Centraliza o form em tablets e celulares */
    .leadForm {
        margin: 30px auto 0 !important;
    }
    
    .leadForm {
        margin: 30px auto 0; /* Centraliza no mobile */
    }

    .hero-mobile-logo {
        display: block;
        width: 140px;
        height: auto;
        margin-bottom: 24px;
    }

    .hero-title {
        font-size: 42px;
    }

    .transition-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

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

    .problem-layout,
    .card-main {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .problem-title-wrapper {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .problem-large-o {
        font-size: 80px;
        line-height: 1;
        display: block;
        text-align: center;
    }

    .problem-title {
        font-size: 64px;
        text-align: center;
    }

    .problem-content {
        text-align: center;
        padding-left: 0;
    }

    .highlight-wide-box {
        text-align: left;
        padding-right: 40px; /* Reduced right padding for tablet to fit gracefully */
    }

    .card-title {
        font-size: 48px;
        text-align: center;
    }

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

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

    .method-split-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .method-image-column {
        margin-top: 0;
    }

    .method-text-column,
    .method-heading,
    .method-p {
        text-align: center;
    }

    .platform-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .platform-text-column,
    .platform-heading,
    .platform-body p {
        text-align: center;
    }

    .how-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .how-title-column {
        text-align: center;
    }

    .how-title-column h2,
    .how-strong,
    .how-light {
        text-align: center;
    }

    .process-header-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .process-title,
    .process-subtitle {
        text-align: center;
    }

    .pillar-item {
        align-items: center;
        text-align: center;
    }

    .pillar-desc {
        padding-left: 0;
        text-align: center;
    }

    .outline-flow {
        flex-direction: column;
        align-items: center;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }

    .flow-box {
        width: 100%;
        max-width: 100%;
        font-size: 18px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .flow-box br {
        display: none;
    }

    .icon-arrow-dark {
        margin-left: auto;
        margin-right: auto;
    }

    .outline-title,
    .outline-conclusion strong,
    .outline-conclusion p {
        text-align: center;
    }

    .whole-life-section,
    .whole-life-title,
    .whole-life-desc p,
    .areas-title {
        text-align: center;
    }

    .areas-list {
        align-items: center;
    }

    .not-more-content,
    .not-more-title,
    .not-more-text p,
    .access-subtext {
        text-align: center;
    }

    .benefits-grid {
        align-items: center;
    }

    .benefit-box {
        text-align: center;
        max-width: 500px;
    }

    .context-dark-card,
    .context-card-title,
    .context-dark-card p {
        text-align: center;
    }

    .search-separately,
    .search-title,
    .search-text p {
        text-align: center;
    }

    /* ── PRICING RESPONSIVE (TABLET) ───────── */
    .pricing-card {
        padding: 40px;
    }

    /* ── MENTOR RESPONSIVE (TABLET) ────────── */
    .mentor-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .mentor-image img {
        max-width: 500px;
        margin: 0 auto;
    }

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

    .final-cta-content {
        padding: 0 20px;
    }
}

/* ============================================================ */
/* MOBILE (max 768px) — matches the provided mockup exactly     */
/* ============================================================ */
@media (max-width: 768px) {

    /* Regra mobile: impede que uma única palavra fique sozinha em uma linha */
    h1, h2, h3, h4, .hero-title, .problem-title, .pillars-title {
        text-wrap: wrap; /* Alterado de balance para wrap para evitar bugs de compressão */
        letter-spacing: 0.02em;
        word-spacing: 0.1em;
        word-break: normal;
        overflow-wrap: break-word;
    }

    p, li, .method-p, .platform-body p, .how-strong, .how-light {
        text-wrap: pretty;
        word-spacing: 0.05em;
    }

    /* ── HEADER ─────────────────────────────── */
    .top-announcement {
        display: none !important;
    }

    .header-container {
        flex-direction: column;
        gap: 10px;
        padding: 0 20px;
    }

    .top-announcement p {
        font-size: 12px;
        line-height: 1.4;
    }

    .btn-conhecer {
        font-size: 12px;
        padding: 7px 18px;
    }

    /* ── HERO ────────────────────────────────── */
    .hero {
        padding: 0;
        min-height: 100svh;
        display: flex;
        align-items: flex-end;
    }

    .hero::before {
        background-image: url('img/bg_banner_mobile.png');
        background-position: top center;
        background-size: cover;
        opacity: 0.9;
    }

    .hero-container {
        width: 100%;
        padding: 120px 24px 160px;
        /* extra bottom padding so transition block doesn't cover button */
        min-height: unset;
        justify-content: center;
        align-items: flex-end;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        margin-top: 110px; /* +1 dedinho (total ~110px) */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .badge {
        font-size: 10px;
        letter-spacing: 1.5px;
        padding: 5px 14px;
        margin-bottom: 16px;
    }

    .hero-title {
        font-size: 30px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .hero-description {
        margin-bottom: 28px;
    }

    .hero-description p.highlight {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .hero-description p:not(.highlight) {
        font-size: 15px;
        line-height: 1.4;
    }

    .btn-primary {
        width: 100%;
        justify-content: center;
        padding: 15px 20px;
        font-size: 15px;
        border-radius: 8px;
    }

    .scroll-indicator {
        display: none;
    }

    /* ── TRANSITION SECTION ─────────────────── */
    .transition-section {
        padding: 0 0 40px;
    }

    .transition-container {
        border-radius: 24px;
        transform: translateY(-30px);
        /* reduced overlap so it clears the button */
        margin-bottom: -30px;
        padding: 40px 24px 50px;
        margin-left: 16px;
        margin-right: 16px;
        max-width: calc(100% - 32px);
    }

    .transition-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .transition-title {
        font-size: 34px;
        line-height: 1.4;
    }

    .transition-items {
        gap: 12px;
    }

    .transition-card {
        padding: 14px 18px;
        gap: 14px;
    }

    .transition-card p {
        font-size: 14px;
    }

    .hump-curve {
        width: 160px;
        height: 30px;
    }

    /* ── PROBLEM SECTION ────────────────────── */
    .problem-section {
        padding: 60px 0 70px;
    }

    .container {
        padding: 0 20px;
    }

    .problem-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

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

    .problem-title-wrapper {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .problem-large-o {
        font-size: 60px;
        line-height: 1;
        display: block;
        text-align: center;
    }

    .problem-title {
        font-size: 50px;
        line-height: 1.4;
        text-align: center;
    }

    .highlight-wide-box {
        text-align: left;
        padding-right: 30px; /* Reduced right padding for mobile tightly */
        padding-left: 10px;
    }

    .problem-content {
        padding-left: 0;
        text-align: center;
    }

    .problem-content .unified-text {
        font-size: 17px;
        line-height: 1.9;
    }

    /* ── SUSTAINABILITY SECTION ─────────────── */
    .sustainability-section {
        padding: 30px 0 80px;
    }

    .sustainability-card {
        border-radius: 20px;
        margin: 0 16px;
        max-width: calc(100% - 32px);
    }

    .card-main {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 36px 24px 24px;
    }

    .card-title {
        font-size: 36px;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .card-subtitle {
        font-size: 16px;
    }

    .card-steps {
        gap: 10px;
    }

    .step-item {
        font-size: 13px;
        padding: 12px 16px;
    }

    .card-conclusion {
        margin: 24px;
        padding: 24px 20px;
        border-radius: 12px;
        text-align: center;
    }

    .card-conclusion p {
        font-size: 13px;
    }

    .strong-caps {
        font-size: 13px;
    }

    /* ── METHOD INTRO SECTION ───────────────── */
    .method-intro-section {
        padding: 50px 0;
    }

    .method-split-container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    .method-image-column {
        margin-top: 0;
        padding: 0 20px;
    }

    .method-vertical-img {
        width: 100%;
        border-radius: 16px;
        max-height: 380px;
        object-fit: cover;
        object-position: top;
    }

    .method-text-column {
        padding: 32px 24px 0;
    }

    .method-heading {
        font-size: 22px;
        line-height: 1.35;
        margin-bottom: 28px;
    }

    .method-heading .subtle-heading {
        font-size: 18px;
    }

    .method-body {
        gap: 18px;
    }

    .method-p {
        font-size: 15px;
        line-height: 1.6;
    }

    /* ── CME PLATFORM SECTION ───────────────── */
    .cme-platform-section {
        padding: 40px 0 60px;
    }

    .cme-platform-card {
        width: calc(100% - 32px);
        border-radius: 20px;
        padding: 50px 24px 32px;
    }

    .platform-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .platform-heading {
        font-size: 30px;
        white-space: normal;
        line-height: 1.4;
        margin-bottom: 18px;
    }

    .platform-body {
        gap: 18px;
    }

    .platform-body p {
        font-size: 15px;
    }

    .platform-mockup-img {
        max-width: 100%;
    }

    /* ── PILLARS SECTION ────────────────────── */
    .cme-pillars-section {
        padding: 50px 0 120px;
    }

    .pillars-header {
        margin-bottom: 40px;
        text-align: center;
    }

    .pillars-subtitle {
        font-size: 11px;
        letter-spacing: 0.5px;
        margin-bottom: 14px;
    }

    .pillars-title {
        font-size: 28px;
        line-height: 1.3;
        letter-spacing: -0.2px;
    }

    .pillars-subtitle {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 14px;
    }

    .pillars-list {
        gap: 30px;
    }

    .pillar-item {
        max-width: 100%;
        gap: 10px;
        align-items: center;
        text-align: center;
    }

    .pillar-number-circle {
        width: 56px;
        height: 56px;
        font-size: 20px;
        margin-right: 14px;
    }

    .pillar-label strong {
        font-size: 20px;
        line-height: 1.3;
    }

    .pillar-label span {
        font-size: 10px;
    }

    .pillar-line {
        width: 80px;
    }

    .pillar-desc {
        font-size: 14px;
        padding-left: 0;
        text-align: center;
    }

    /* ── HOW IT WORKS SECTION ───────────────── */
    .how-it-works-section {
        padding: 0 0 60px;
    }

    .how-it-works-card {
        border-radius: 20px;
        margin: 0 16px;
        margin-top: -100px;
        padding: 40px 24px;
        min-height: unset;
    }

    .how-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .how-title-column {
        border-radius: 16px;
        padding: 40px 24px;
        text-align: center;
        display: flex; /* Ensure flex is active */
        justify-content: center; /* Center horizontally in flex */
        align-items: center;
    }

    .how-title-column h2 {
        font-size: 34px;
        line-height: 1.3;
        text-align: center;
        width: 100%; /* Force full width to ensure text-align: center works */
    }

    .how-text-column {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center; /* Center children blocks */
        gap: 24px;
    }

    .how-strong {
        font-size: 16px;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    .how-light {
        font-size: 14px;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    /* ── PROCESS SECTION (21 dias) ──────────── */
    .cme-process-section {
        padding: 0 0 60px;
    }

    .process-container {
        padding: 0 20px;
    }

    .process-header-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
        text-align: center;
    }

    .process-title {
        font-size: 30px;
        line-height: 1.4;
        text-align: center;
    }

    .process-subtitle {
        font-size: 13px;
        text-align: center;
    }

    .process-step-box {
        font-size: 13px;
        padding: 12px 16px;
    }

    .process-outline-card {
        padding: 36px 24px;
        border-radius: 16px;
        margin-bottom: 60px;
        text-align: center;
    }

    .outline-title {
        font-size: 22px;
        margin-bottom: 28px;
    }

    .outline-flow {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-bottom: 36px;
    }

    .flow-arrow {
        transform: rotate(90deg);
        font-size: 20px;
    }

    .flow-box {
        width: 100%;
        max-width: 100%;
        font-size: 18px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .flow-box br {
        display: none;
    }

    .icon-arrow-dark {
        margin-left: auto;
        margin-right: auto;
    }

    .outline-conclusion strong {
        font-size: 14px;
    }

    .outline-conclusion p {
        font-size: 14px;
    }

    .whole-life-section {
        text-align: center;
    }

    .whole-life-title {
        font-size: 26px;
        line-height: 1.4;
        margin-bottom: 28px;
    }

    .whole-life-desc p {
        font-size: 14px;
    }

    .areas-list {
        gap: 12px;
        align-items: center;
    }

    .area-box {
        width: 100%;
        max-width: 300px;
        font-size: 13px;
        padding: 12px 16px;
    }

    /* ── CONTEXT SECTION ────────────────────── */
    .cme-context-section {
        padding: 0 0 60px;
    }

    .context-dark-card {
        border-radius: 16px;
        padding: 40px 24px;
        margin-bottom: 50px;
        text-align: center;
    }

    .context-dark-card p {
        text-align: center;
    }

    .context-card-title {
        font-size: 22px;
        margin-bottom: 20px;
        text-align: center;
    }

    .context-dark-card p {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 16px;
    }

    .not-more-content {
        text-align: center;
        margin-bottom: 50px;
    }

    .not-more-title {
        font-size: 24px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .not-more-text p {
        font-size: 14px;
        margin-bottom: 14px;
    }

    .benefits-grid {
        gap: 12px;
        align-items: center;
    }

    .benefit-box {
        width: 100%;
        max-width: 100%;
        padding: 16px 20px;
        gap: 14px;
        text-align: center;
    }

    .benefit-box p {
        font-size: 13px;
    }

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

    .one-year-access {
        font-size: 13px;
        margin-bottom: 50px;
    }

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

    .search-title {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .search-text p {
        font-size: 14px;
    }

    /* ── PRICING RESPONSIVE (MOBILE) ──────── */
    .pricing-intro {
        padding: 0;
    }

    .pricing-cost-card {
        padding: 24px;
        border-radius: 8px;
    }

    .pricing-main-wrapper {
        border-radius: 24px 24px 0 0;
        padding: 80px 10px 40px;
    }

    .pricing-card {
        padding: 40px 20px 30px;
    }

    .guarantee-badge {
        width: 100px;
        height: 100px;
        top: -60px; /* Ajustado para compensar as pontas da estrela */
        left: 50%; /* Centered horizontally */
        transform: translateX(-50%); /* Center alignment trick */
    }

    .badge-number {
        font-size: 32px;
    }

    .pricing-card-title {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 30px;
        margin-top: 65px; /* Pushed significantly down as requested */
    }

    .pricing-new {
        font-size: 32px;
        white-space: nowrap;
    }

    /* ── MENTOR RESPONSIVE (MOBILE) ───────── */
    .cme-mentor {
        padding: 60px 20px;
    }

    .mentor-title {
        font-size: 32px;
    }

    .mentor-image img {
        border-radius: 12px;
        max-width: 100%;
    }

    /* ── FINAL CTA RESPONSIVE (MOBILE) ────── */
    .cme-final-cta {
        padding: 80px 20px 60px;
        border-radius: 24px 24px 0 0;
    }

    .final-cta-content p {
        font-size: 16px;
    }

    .final-cta-content strong {
        font-size: 20px;
    }

    .btn-final {
        width: 100%;
        padding: 15px;
        justify-content: center;
    }
}

/* ── Extra small screens (max 390px) ─────── */
@media (max-width: 390px) {
    .hero-title {
        font-size: 26px;
    }

    .hero-container {
        padding: 100px 20px 44px;
    }

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

    .problem-large-o {
        font-size: 56px;
    }

    .problem-title {
        font-size: 38px; /* Reduzido para garantir que palavras longas não colem nas bordas */
    }

    .highlight-wide-box {
        padding-right: 15px; /* Reduzido o padding interno para sobrar mais espaço para o texto */
    }

    .how-title-column h2 {
        font-size: 28px;
    }

    .pillars-title {
        font-size: 26px;
    }
}

@keyframes progressLoad {
    from { width: 0%; }
    to { width: 90%; }
}

/* ── BIO PAGE (LINKTREE STYLE) ──────────────── */
.bio-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 140px !important;
    text-align: left;
}

.bio-container {
    z-index: 10;
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bio-logo {
    width: 100px;
    margin-bottom: 20px;
    align-self: flex-start;
}

.bio-link-card {
    background: #FFFFFF;
    border-radius: 12px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.bio-link-card:hover {
    transform: scale(1.05) translateY(-5px);
    background: var(--primary-color);
}

/* Ajuste Mobile para Bio (Centralizado) */
@media (max-width: 768px) {
    .bio-page {
        align-items: center;
        padding: 60px 20px !important;
        text-align: center;
    }
    .bio-logo {
        align-self: center;
    }
}