/* ========================================
   NutriKids — Landing Page de Infoproduto Infantil
   ======================================== */

/* --- RESET & GLOBALS --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Nunito', sans-serif;
    color: #3D3D3D;
    background: #fff;
    line-height: 1.7;
    overflow-x: hidden;
}

.wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3 {
    font-family: 'Baloo 2', cursive;
    line-height: 1.25;
}

img { max-width: 100%; height: auto; }

/* ========================================
   HERO
   ======================================== */
.hero {
    background: linear-gradient(135deg, #43E97B 0%, #38F9D7 50%, #4ECDC4 100%);
    text-align: center;
    padding: 60px 24px 120px;
    position: relative;
    overflow: hidden;
}

/* floating emoji shapes */
.hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.shape {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.3;
    animation: floatEmoji 6s ease-in-out infinite;
}
.shape-1 { top: 10%; left: 5%; animation-delay: 0s; }
.shape-2 { top: 20%; right: 8%; animation-delay: 1s; }
.shape-3 { bottom: 30%; left: 12%; animation-delay: 2s; }
.shape-4 { top: 50%; right: 15%; animation-delay: 0.5s; }
.shape-5 { bottom: 40%; right: 5%; animation-delay: 1.5s; }
.shape-6 { top: 8%; left: 50%; animation-delay: 3s; }

@keyframes floatEmoji {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

.hero-badge {
    display: inline-block;
    background: #fff;
    color: #e8553d;
    font-weight: 800;
    font-size: 1rem;
    padding: 10px 28px;
    border-radius: 50px;
    margin-bottom: 28px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 2.8rem;
    color: #fff;
    max-width: 800px;
    margin: 0 auto 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
}
.hero h1 em {
    color: #FFE66D;
    font-style: normal;
}

.hero-sub {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.92);
    max-width: 650px;
    margin: 0 auto 40px;
    position: relative;
    z-index: 1;
}

.hero-img {
    display: block;
    max-width: 500px;
    margin: 0 auto 40px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
}

/* CTA global */
.cta-btn {
    display: inline-block;
    background: #FF6B6B;
    color: #fff;
    font-family: 'Baloo 2', cursive;
    font-size: 1.35rem;
    font-weight: 800;
    padding: 20px 50px;
    border-radius: 60px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: pulse 2s infinite;
    position: relative;
    z-index: 1;
}
.cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(255, 107, 107, 0.55);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.hero-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

/* wave dividers */
.wave-bottom, .wave-top-green, .wave-bottom-green,
.wave-top-yellow, .wave-bottom-yellow {
    position: relative;
    width: 100%;
    line-height: 0;
}
.wave-bottom { margin-top: -1px; }
.wave-bottom svg,
.wave-top-green svg, .wave-bottom-green svg,
.wave-top-yellow svg, .wave-bottom-yellow svg {
    display: block;
    width: 100%;
    height: 80px;
}

/* ========================================
   DORES / PROBLEMA
   ======================================== */
.problems {
    padding: 80px 24px;
    text-align: center;
}
.pain-main-title {
    font-size: 2.4rem;
    color: #E53E3E;
    margin-bottom: 16px;
    font-weight: 900;
    line-height: 1.2;
}
.problem-subtitle {
    font-size: 1.15rem;
    color: #718096;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
}
.problem-list {
    max-width: 800px;
    margin: 0 auto 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.problem-item {
    background: #fff;
    border: 1px solid #FED7D7;
    border-left: 6px solid #E53E3E;
    padding: 24px 30px;
    border-radius: 0 16px 16px 0;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.05);
    transition: transform 0.3s;
}
.problem-item:hover {
    transform: translateX(10px);
}
.problem-emoji {
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.problem-text strong {
    display: block;
    font-size: 1.15rem;
    color: #2D3748;
    margin-bottom: 8px;
}
.problem-text p {
    font-size: 1.05rem;
    color: #4A5568;
    line-height: 1.6;
    margin: 0;
}
.agitation-box {
    background: linear-gradient(135deg, #FF6B6B 0%, #E53E3E 100%);
    color: #fff;
    padding: 40px;
    border-radius: 16px;
    margin: 40px auto;
    max-width: 800px;
    text-align: left;
    box-shadow: 0 15px 35px rgba(229, 62, 62, 0.3);
}
.agitation-box h3 {
    color: #FFF5F5;
    font-size: 1.5rem;
    margin-bottom: 20px;
}
.agitation-box p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 16px;
    color: #FFF0F0;
}
.agitation-box p:last-child {
    margin-bottom: 0;
    font-weight: bold;
    color: #fff;
}
.problem-cta-box {
    background: #F0FFF4;
    border: 2px dashed #68D391;
    padding: 30px;
    border-radius: 16px;
    max-width: 800px;
    margin: 0 auto;
}
.problem-cta {
    font-size: 1.25rem;
    color: #2F855A;
    margin: 0;
    line-height: 1.5;
}

/* ========================================
   AIDA: DESIRE
   ======================================== */
.desire {
    background: linear-gradient(135deg, #43E97B 0%, #38F9D7 100%);
    padding: 60px 24px;
    text-align: center;
    color: #fff;
    position: relative;
    border-radius: 40px;
    margin: 40px 20px;
    box-shadow: 0 20px 50px rgba(67, 233, 123, 0.25);
}
@media (max-width: 768px) {
    .desire {
        margin: 30px 16px;
        border-radius: 30px;
        padding: 50px 20px;
    }
}
.desire h2 {
    font-size: 2.2rem;
    margin-bottom: 24px;
}
.desire > .wrap > p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,0.92);
}
.desire-box {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 24px;
    padding: 40px;
    max-width: 700px;
    margin: 0 auto 30px;
    text-align: left;
}
.desire-box h3 {
    font-size: 1.5rem;
    margin-bottom: 16px;
}
.desire-box p {
    margin-bottom: 14px;
    font-size: 1.05rem;
}
.desire-cta {
    font-size: 1.3rem;
    font-weight: 800;
}

/* ========================================
   CARROSSEL DE RECEITAS
   ======================================== */
.recipes-carousel-section {
    padding: 80px 0;
    text-align: center;
    background: #FFF9EC;
    overflow: hidden;
}
.recipes-carousel-section h2 {
    font-size: 2.2rem;
    margin-bottom: 12px;
}
.recipes-sub {
    font-size: 1.1rem;
    color: #718096;
    margin-bottom: 40px;
}

.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}

.carousel-track-wrapper {
    overflow: hidden;
    width: 100%;
    border-radius: 20px;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: grab;
    gap: 20px;
}
.carousel-track.dragging {
    transition: none;
    cursor: grabbing;
}

.carousel-slide {
    flex: 0 0 calc(33.333% - 14px);
    min-width: calc(33.333% - 14px);
}
.carousel-slide img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.carousel-slide img:hover {
    transform: scale(1.03);
}
.slide-label {
    font-family: 'Baloo 2', cursive;
    font-size: 1.1rem;
    color: #3D3D3D;
    margin-top: 12px;
    font-weight: 700;
}

/* Arrows */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 3px solid #43E97B;
    color: #43E97B;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.carousel-arrow:hover {
    background: #43E97B;
    color: #fff;
}
.carousel-prev { left: 5px; }
.carousel-next { right: 5px; }

/* Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}
.carousel-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #E2E8F0;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.carousel-dot.active {
    background: #43E97B;
    transform: scale(1.3);
}

.recipes-more {
    font-size: 1.2rem;
    color: #3D3D3D;
    font-weight: 700;
}
    font-size: 1.2rem;
    color: #3D3D3D;
    font-weight: 700;
}

/* ========================================
   DEPOIMENTOS
   ======================================== */
.testimonials {
    background: #FFF9EC;
    padding: 80px 24px;
    text-align: center;
}
.testimonials h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
}
.testimonial-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}
.testimonial-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.06);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.t-stars { font-size: 1.1rem; }
.testimonial-card > p {
    font-size: 0.95rem;
    flex: 1;
    color: #4A5568;
}
.t-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.t-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
}
.t-author strong {
    display: block;
    font-size: 0.95rem;
}
.t-author span {
    font-size: 0.8rem;
    color: #718096;
}

/* ========================================
   BÔNUS
   ======================================== */
.bonuses {
    background: #FFE66D;
    padding: 80px 24px;
    text-align: center;
    position: relative;
}
.bonuses h2 {
    font-size: 2.4rem;
    color: #3D3D3D;
    margin-bottom: 12px;
}
.bonus-sub {
    font-size: 1.15rem;
    color: #5C4813;
    margin-bottom: 40px;
}
.bonus-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    max-width: 700px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transition: transform 0.2s;
}
.bonus-card:hover { transform: scale(1.02); }
/* 3D Ebook Cover Simulation */
.ebook-cover {
    width: 150px;
    height: 210px;
    border-radius: 4px 14px 14px 4px;
    position: relative;
    flex-shrink: 0;
    transform: perspective(800px) rotateY(-18deg);
    transition: transform 0.4s ease;
    box-shadow:
        12px 12px 30px rgba(0,0,0,0.2),
        inset -2px 0 6px rgba(0,0,0,0.1);
}
.bonus-card:hover .ebook-cover {
    transform: perspective(800px) rotateY(-6deg) scale(1.08);
}

/* Spine */
.ebook-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    background: rgba(0,0,0,0.15);
    border-radius: 4px 0 0 4px;
    border-right: 2px solid rgba(255,255,255,0.25);
    z-index: 2;
}

/* Inner content */
.ebook-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 12px 14px 22px;
    overflow: hidden;
    border-radius: 4px 14px 14px 4px;
}

/* Top accent bar */
.ebook-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: rgba(255,255,255,0.35);
    border-radius: 4px 14px 0 0;
}

/* Icon */
.ebook-icon {
    font-size: 2.8rem;
    margin-bottom: 6px;
    filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.2));
    z-index: 1;
}

/* Title */
.ebook-title {
    color: #fff;
    font-family: 'Baloo 2', cursive;
    font-size: 1.15rem;
    line-height: 1.15;
    text-align: center;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.3);
    margin: 0 0 4px;
    z-index: 1;
}

/* Subtitle */
.ebook-subtitle {
    color: rgba(255,255,255,0.85);
    font-family: 'Nunito', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    margin: 0 0 8px;
    z-index: 1;
}

/* Divider */
.ebook-divider {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    margin-bottom: 8px;
    z-index: 1;
}

/* Brand */
.ebook-brand {
    font-family: 'Baloo 2', cursive;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    z-index: 1;
}

/* Floating deco emojis */
.ebook-deco {
    position: absolute;
    font-size: 1.1rem;
    opacity: 0.35;
    z-index: 0;
}
.ebook-deco-1 { bottom: 12px; left: 20px; transform: rotate(-15deg); }
.ebook-deco-2 { top: 14px; right: 10px; transform: rotate(20deg); }

/* Cover gradients — each unique */
.cover-1 {
    background: linear-gradient(160deg, #FF6B6B 0%, #FF9A76 40%, #FFDDA1 100%);
}
.cover-2 {
    background: linear-gradient(160deg, #4ECDC4 0%, #44B09E 40%, #A8E6CF 100%);
}
.cover-3 {
    background: linear-gradient(160deg, #667eea 0%, #764ba2 40%, #C471ED 100%);
}
.cover-4 {
    background: linear-gradient(160deg, #f093fb 0%, #f5576c 40%, #FFB88C 100%);
}

.bonus-number {
    display: inline-block;
    background: #FF6B6B;
    color: #fff;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 14px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.bonus-content h3 {
    font-size: 1.25rem;
    color: #3D3D3D;
    margin-bottom: 6px;
}
.bonus-content p {
    font-size: 0.95rem;
    color: #4A5568;
    margin-bottom: 10px;
}
.bonus-price {
    display: flex;
    align-items: center;
    gap: 12px;
}
.old-price {
    text-decoration: line-through;
    color: #A0AEC0;
    font-size: 0.95rem;
}
.free {
    background: #43E97B;
    color: #fff;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.9rem;
}

.wave-top-yellow svg path { fill: #fff; }
.wave-bottom-yellow svg path { fill: #fff; }

/* ========================================
   OFERTA — DUAL PLANS
   ======================================== */
.offer {
    padding: 80px 24px;
    text-align: center;
    background: #F7FAFC;
}
.offer h2 {
    font-size: 2.3rem;
    margin-bottom: 10px;
}
.offer-subtitle {
    font-size: 1.1rem;
    color: #718096;
    margin-bottom: 50px;
}

.plans-row {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
    max-width: 950px;
    margin: 0 auto;
}

/* Card Base */
.plan-card {
    background: #fff;
    border-radius: 24px;
    flex: 1;
    max-width: 450px;
    text-align: left;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
    transition: transform 0.3s;
}
.plan-card:hover {
    transform: translateY(-4px);
}

/* Header */
.plan-header {
    padding: 32px 24px 24px;
    text-align: center;
    border-bottom: 1px solid #E2E8F0;
    border-radius: 24px 24px 0 0;
}
.plan-header h3 {
    font-size: 1.5rem;
    color: #3D3D3D;
}
.plan-header-highlight {
    background: linear-gradient(135deg, #43E97B 0%, #38F9D7 100%);
    border-bottom: none;
}
.plan-header-highlight h3 {
    color: #fff;
}

/* Badge */
@keyframes pulse-badge {
    0% { transform: translateX(-50%) scale(1); box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4); }
    50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 8px 25px rgba(255, 65, 108, 0.6); }
    100% { transform: translateX(-50%) scale(1); box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4); }
}
.plan-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 6px 20px;
    border-radius: 50px;
    letter-spacing: 1.5px;
    z-index: 5;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: pulse-badge 2s infinite ease-in-out;
}

/* Body */
.plan-body {
    padding: 30px;
}

/* List */
.plan-list {
    list-style: none;
    margin-bottom: 30px;
}
.plan-list li {
    padding: 8px 0;
    font-size: 0.95rem;
    border-bottom: 1px solid #F7FAFC;
}
.plan-yes {
    color: #2D3748;
}
.plan-no {
    color: #CBD5E0;
    text-decoration: line-through;
}

/* Price */
.plan-price-area {
    text-align: center;
    margin-bottom: 20px;
}
.plan-price {
    font-family: 'Baloo 2', cursive;
    font-size: 3.5rem;
    font-weight: 800;
    color: #3D3D3D;
    line-height: 1;
}
.plan-price span {
    font-size: 1.5rem;
}
.plan-price-green {
    color: #43E97B;
}
.plan-old-price {
    font-size: 0.95rem;
    color: #718096;
    margin-bottom: 4px;
}
.plan-old-price span {
    text-decoration: line-through;
    color: #FF6B6B;
    font-weight: 700;
}
.plan-installments {
    font-size: 0.9rem;
    color: #718096;
    margin-top: 4px;
}
.plan-savings {
    display: inline-block;
    background: #FFF5F5;
    color: #FF6B6B;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 6px 16px;
    border-radius: 50px;
    margin-top: 8px;
    border: 1px solid #FECACA;
}

/* Buttons */
.plan-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 1.15rem;
    padding: 16px;
    border-radius: 60px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.plan-btn-basic {
    background: #E2E8F0;
    color: #4A5568;
}
.plan-btn-basic:hover {
    background: #CBD5E0;
    transform: scale(1.03);
}
.plan-btn-complete {
    background: #FF6B6B;
    color: #fff;
    font-size: 1.3rem;
    padding: 18px;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
    animation: pulse 2s infinite;
}
.plan-btn-complete:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(255, 107, 107, 0.55);
}

/* Complete plan highlight */
.plan-complete {
    border: 3px solid #43E97B;
    box-shadow: 0 15px 40px rgba(67, 233, 123, 0.15);
    transform: scale(1.05);
}
.plan-complete:hover {
    transform: scale(1.07);
}

.offer-note {
    font-size: 0.9rem;
    color: #718096;
    text-align: center;
}

/* Trust Bar */
.trust-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 40px;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.trust-item {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #4A5568;
    display: flex;
    align-items: center;
    gap: 8px;
}
.trust-icon {
    font-size: 1.2rem;
}

/* Payment Methods (Bottom of Offer) */
.payment-methods {
    text-align: center;
    margin-top: 24px;
}
.payment-methods .offer-note {
    margin-bottom: 12px;
}
.real-payment-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.real-pay-img {
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    transition: transform 0.2s;
}
.real-pay-img:hover {
    transform: translateY(-2px) scale(1.05);
}

/* ========================================
   GARANTIA
   ======================================== */
.guarantee {
    padding: 60px 24px;
    text-align: center;
}
.guarantee-box {
    background: #F0FFF4;
    border: 2px solid #C6F6D5;
    border-radius: 24px;
    padding: 50px 40px;
    max-width: 700px;
    margin: 0 auto;
}
.guarantee-shield {
    font-size: 4rem;
    margin-bottom: 16px;
}
.guarantee-box h2 {
    font-size: 1.8rem;
    color: #3D3D3D;
    margin-bottom: 16px;
}
.guarantee-box p {
    font-size: 1.05rem;
    color: #4A5568;
    margin-bottom: 12px;
}

/* ========================================
   FAQ
   ======================================== */
.faq {
    padding: 80px 24px;
    text-align: center;
}
.faq h2 {
    font-size: 2.2rem;
    margin-bottom: 40px;
}
.faq-list {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    border: 2px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.faq-item.active {
    border-color: #43E97B;
}
.faq-question {
    width: 100%;
    background: #fff;
    border: none;
    padding: 20px 24px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: #3D3D3D;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-icon {
    font-size: 1.5rem;
    color: #43E97B;
    font-weight: 800;
    transition: transform 0.3s;
}
.faq-item.active .faq-icon {
    transform: rotate(45deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
}
.faq-answer p {
    padding: 0 24px 20px;
    font-size: 1rem;
    color: #718096;
    text-align: left;
}

/* ========================================
   CTA FINAL
   ======================================== */
.final-cta {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    padding: 80px 24px;
    text-align: center;
    color: #fff;
}
.final-cta h2 {
    font-size: 2.3rem;
    margin-bottom: 16px;
}
.final-cta p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,0.92);
}
.final-cta .cta-btn {
    background: #fff;
    color: #FF6B6B;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* ========================================
   FOOTER
   ======================================== */
footer {
    background: #2D3748;
    padding: 50px 24px;
    text-align: center;
    color: #A0AEC0;
}
.footer-brand {
    font-family: 'Baloo 2', cursive;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 12px;
}
.footer-disclaimer {
    font-size: 0.82rem;
    max-width: 600px;
    margin: 0 auto 20px;
}
.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
}
.footer-links a {
    color: #A0AEC0;
    text-decoration: none;
    font-size: 0.9rem;
}
.footer-links a:hover { color: #fff; }
.footer-copy {
    font-size: 0.8rem;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 992px) {
    .carousel-slide {
        flex: 0 0 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    /* Global mobile spacing */
    .wrap { padding: 0 16px; }
    section { overflow-x: hidden; }
    
    /* Hero */
    .hero { padding: 40px 16px 100px; }
    .hero h1 { font-size: 1.75rem; }
    .hero-sub { font-size: 1rem; }
    .hero-img { max-width: 95%; border-radius: 16px; }
    .hero-badge { font-size: 0.85rem; padding: 8px 20px; }
    .cta-btn { font-size: 1rem; padding: 16px 28px; width: 100%; max-width: 360px; }
    .hero-trust { flex-direction: column; gap: 8px; font-size: 0.82rem; }
    
    /* Shapes smaller on mobile */
    .shape { font-size: 1.8rem; }
    
    /* Problems */
    .problems { padding: 50px 16px; }
    .problem-item { padding: 16px 20px; gap: 12px; }
    .problem-emoji { font-size: 1.6rem; }
    .problem-item p { font-size: 0.95rem; }
    
    /* Desire */
    .desire { padding: 50px 16px; }
    .desire-box { padding: 24px 20px; }
    
    /* Testimonials */
    .testimonials { padding: 50px 16px; }
    .testimonial-row { grid-template-columns: 1fr; max-width: 100%; }
    .testimonial-card { padding: 22px; }
    
    /* Bonus */
    .bonuses { padding: 50px 16px; }
    .bonus-card {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 16px;
    }
    .ebook-cover {
        width: 120px;
        height: 170px;
        transform: perspective(800px) rotateY(0deg);
    }
    .bonus-card:hover .ebook-cover {
        transform: perspective(800px) rotateY(0deg) scale(1.05);
    }
    .ebook-icon { font-size: 2.2rem; }
    .ebook-title { font-size: 1rem; }
    
    /* Plans */
    .offer { padding: 50px 16px; }
    .plans-row {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .plan-card { max-width: 100%; }
    .plan-complete {
        transform: scale(1);
        order: -1;
    }
    .plan-complete:hover {
        transform: translateY(-4px);
    }
    .plan-body { padding: 24px 20px; }
    .plan-price { font-size: 3rem; }
    .plan-btn { font-size: 1.05rem; padding: 15px; }
    .plan-btn-complete { font-size: 1.15rem; padding: 16px; }
    
    /* Trust bar */
    .trust-bar {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px;
    }
    .trust-item { font-size: 0.85rem; }
    
    /* Carousel */
    .carousel-slide {
        flex: 0 0 100%;
        min-width: 100%;
    }
    .carousel-container { padding: 0 44px; }
    .carousel-arrow { width: 36px; height: 36px; font-size: 1rem; }
    .carousel-prev { left: 2px; }
    .carousel-next { right: 2px; }
    .slide-label { font-size: 0.95rem; }
    
    /* Guarantee */
    .guarantee { padding: 40px 16px; }
    .guarantee-box { padding: 30px 20px; }
    .guarantee-shield { font-size: 3rem; }
    .guarantee-box h2 { font-size: 1.5rem; }
    
    /* FAQ */
    .faq { padding: 50px 16px; }
    .faq-question { padding: 16px 18px; font-size: 0.95rem; }
    
    /* Final CTA */
    .final-cta { padding: 50px 16px; }
    .final-cta p { font-size: 1rem; }
    
    /* Footer */
    footer { padding: 30px 16px; }
    
    /* All headings */
    .problems h2, .desire h2, .recipes-carousel-section h2,
    .testimonials h2, .bonuses h2, .offer h2,
    .faq h2, .final-cta h2 {
        font-size: 1.6rem;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .hero h1 { font-size: 1.5rem; }
    .plan-price { font-size: 2.5rem; }
    .ebook-cover { width: 100px; height: 140px; }
    .ebook-icon { font-size: 1.8rem; }
    .ebook-title { font-size: 0.85rem; }
    .carousel-container { padding: 0 36px; }
    .carousel-arrow { width: 30px; height: 30px; font-size: 0.85rem; }
}