* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'League Spartan', sans-serif;
    position: relative;
    background: url('BackgroundFernanda.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #000; /* fallback */
    color: #fff;
    z-index: 0;
    overflow-x: hidden;
}

/* Camada escura por cima do body (igual a .hero::before) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
    pointer-events: none;
}

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


/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.logo-icon {
    font-size: 24px;
}

.edition {
    background: linear-gradient(45deg, #43b7c9, #6ad4e6); /* Cor da identidade visual */
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.event-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #b8b8b8;
    flex-shrink: 1;
    min-width: 0;
}

.calendar-icon {
    font-size: 16px;
}


/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 0 60px;
    position: relative;
}

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

.hero-text h1 {
    font-family: 'League Spartan', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    color: #fff; /* cor padrão do h1 */
    letter-spacing: -2px; /* <-- Esta é a linha que foi adicionada/modificada */
}

.hero-text p {
    font-size: 1.1rem;
    color: #b8b8b8;
    margin-bottom: 32px;
    line-height: 1.6;
}

.price-highlight {
    display: none; /* Remover o valor do workshop */
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(45deg, #43b7c9, #6ad4e6); /* Cor da identidade visual */
    color: white;
    border: none;
    padding: 18px 36px;
    border-radius: 25px;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(67, 183, 201, 0.3);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(67, 183, 201, 0.4);
}

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

.hero-image img {
    width: 280px; /* ou 240px se quiser menor */
    height: auto;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.profile-image {
  padding: 0;
  margin: 0 auto;
  background: none;
  border-radius: 8px;
  border: none;
  box-shadow: none;
}


.profile-image::before,
.profile-image::after {
  display: none !important; /* remove pseudo-elementos girando */
}

.profile-image img {
  width: 1260px;              /* 🔥 tamanho bom para destaque no desktop */
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  display: block;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .profile-image img {
    width: 240px;
  }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Urgency Banner */
.urgency-banner {
    background: linear-gradient(45deg, #43b7c9, #6ad4e6); /* Cor da identidade visual */
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    margin-top: 40px;
}

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

.urgency-icon {
    font-size: 24px;
}

.urgency-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
}

.urgency-reason {
    font-size: 1rem;
    color: #ffffff;
    opacity: 0.9;
}


/* Problem Section */
.problem-section {
    padding: 80px 0;
    background: rgba(67, 183, 201, 0.1); /* Cor da identidade visual */
}

.problem-content {
    text-align: center;
}

.problem-content h2 {
    font-family: 'League Spartan', sans-serif; /* Fonte do título */
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #43b7c9; /* Cor da identidade visual */
}

.problem-content p {
    font-size: 1.3rem;
    color: #b8b8b8;
    margin-bottom: 32px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.solution-highlight {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 15px;
    max-width: 900px;
    margin: 0 auto;
}

.highlight-icon {
    font-size: 2rem;
}


/* Content Sections */
.content-section {
    padding: 100px 0;
    background: rgba(255, 255, 255, 0.02);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-family: 'League Spartan', sans-serif; /* Fonte do título */
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #43b7c9; /* Cor da identidade visual */
}

.section-header p {
    font-size: 1.2rem;
    color: #b8b8b8;
}

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

.content-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}

.content-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border-color: rgba(67, 183, 201, 0.3); /* Cor da identidade visual */
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.content-card h3 {
    font-family: 'League Spartan', sans-serif; /* Fonte do título */
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #ffffff;
}

.content-card p {
    color: #b8b8b8;
    line-height: 1.6;
}

.content-card ul {
    list-style: none;
    text-align: left;
}

.content-card li {
    color: #b8b8b8;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.content-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #43b7c9; /* Cor da identidade visual */
    font-weight: bold;
}


/* Schedule Section */
.schedule-section {
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(67, 183, 201, 0.1) 0%, rgba(106, 212, 230, 0.1) 100%); /* Cor da identidade visual */
}

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

.timeline-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border-left: 4px solid #43b7c9; /* Cor da identidade visual */
}

.timeline-hour {
    font-size: 2rem;
    font-weight: 700;
    color: #43b7c9; /* Cor da identidade visual */
    text-align: center;
}

.timeline-content h3 {
    font-family: 'League Spartan', sans-serif; /* Fonte do título */
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #ffffff;
}

.timeline-content p {
    color: #b8b8b8;
    line-height: 1.6;
}

.recording-info {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.recording-icon {
    font-size: 1.5rem;
}


/* Target Section */
.target-section {
    padding: 100px 0;
    background: rgba(255, 255, 255, 0.02);
}

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

.target-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.target-item:hover {
    transform: translateY(-5px);
    border-color: rgba(67, 183, 201, 0.3); /* Cor da identidade visual */
}

.target-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.target-item p {
    color: #b8b8b8;
    line-height: 1.6;
}


/* About Section */
.about-section {
    padding: 100px 0;
    background: rgba(255, 255, 255, 0.02);
}

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

.about-image img {
    width: 100%;
    max-width: 400px; /* NOVO: limite no desktop */
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.about-text h2 {
    font-family: 'League Spartan', sans-serif; /* Fonte do título */
       font-size: 3.2rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: #43b7c9; /* Cor da identidade visual */
}

.about-text h3 {
      font-size: 1.2rem;
    font-weight: 400;
    opacity: 0.9;
    color: #43b7c9; /* Cor da identidade visual */
    margin-bottom: 24px;
}

.about-achievements {
    list-style: none;
}

.about-achievements li {
    color: #b8b8b8;
    margin-bottom: 16px;
    padding-left: 24px;
    position: relative;
    line-height: 1.6;
}

.about-achievements li::before {
    content: '⭐';
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}


/* Offer Section */
.offer-section {
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(67, 183, 201, 0.1) 0%, rgba(106, 212, 230, 0.1) 100%); /* Cor da identidade visual */
}

.offer-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.offer-header {
    margin-bottom: 40px;
}

.offer-header h2 {
    font-family: 'League Spartan', sans-serif; /* Fonte do título */
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #43b7c9; /* Cor da identidade visual */
}

.price-box {
    display: none; /* Remover o valor do workshop */
}

.offer-benefits {
    margin-bottom: 40px;
}

.benefit-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 1.1rem;
}

.benefit-icon {
    font-size: 1.2rem;
    color: #43b7c9; /* Cor da identidade visual */
}

.guarantee-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;
}

.guarantee-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 15px;
    text-align: left;
}

.guarantee-item h4 {
    color: #43b7c9; /* Cor da identidade visual */
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.guarantee-item p {
    color: #b8b8b8;
    line-height: 1.6;
}


/* Form Section */
.form-section {
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(67, 183, 201, 0.1) 0%, rgba(106, 212, 230, 0.1) 100%); /* Cor da identidade visual */
}

.form-content {
    max-width: 600px;
    margin: 0 auto;
}

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

.form-header h2 {
    font-family: 'League Spartan', sans-serif; /* Fonte do título */
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #43b7c9; /* Cor da identidade visual */
}

.form-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #b8b8b8;
}

.registration-form {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #ffffff;
}

.form-group input {
    width: 100%;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #43b7c9; /* Cor da identidade visual */
    box-shadow: 0 0 20px rgba(67, 183, 201, 0.3);
}

.form-group input::placeholder {
    color: #b8b8b8;
}

.checkout-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(45deg, #43b7c9, #6ad4e6); /* Cor da identidade visual */
    color: white;
    border: none;
    padding: 20px;
      border-radius: 10px;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(67, 183, 201, 0.3);
    margin-bottom: 24px;
}

.checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(67, 183, 201, 0.4);
}

.security-badges {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
}

.security-item {
    font-size: 14px;
    color: #b8b8b8;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* FAQ Section */
.faq-section {
    padding: 100px 0;
}

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

.faq-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.05);
}

.faq-icon {
    font-size: 24px;
    transition: transform 0.3s ease;
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-answer p {
    padding: 0 30px 25px;
    color: #b8b8b8;
    line-height: 1.6;
}


/* Final CTA Section */
.final-cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(67, 183, 201, 0.2) 0%, rgba(106, 212, 230, 0.2) 100%); /* Cor da identidade visual */
}

.final-cta-content {
    text-align: center;
}

.final-cta-content h2 {
    font-family: 'League Spartan', sans-serif; /* Fonte do título */
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #43b7c9; /* Cor da identidade visual */
}

.final-cta-content p {
    font-size: 1.2rem;
    color: #b8b8b8;
    margin-bottom: 32px;
}

.final-cta {
    background: linear-gradient(45deg, #43b7c9, #6ad4e6); /* Cor da identidade visual */
    box-shadow: 0 8px 32px rgba(67, 183, 201, 0.3);
}

.final-cta:hover {
    box-shadow: 0 12px 40px rgba(67, 183, 201, 0.4);
}

.final-urgency {
    margin-top: 24px;
    color: #b8b8b8;
    font-size: 1rem;
}



.footer-legal a {
    color: #b8b8b8;
    text-decoration: none;
    font-size: 14px;
}


/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease;
}

.fade-in-up.visible,
.fade-in-left.visible,
.fade-in-right.visible {
    opacity: 1;
    transform: translate(0);
}

.hero-flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}.highlight-blue {
    color: #43b7c9 !important;
    font-weight: 700;
}



/* MELHORIAS PARA MOBILE - CORREÇÕES ESPECÍFICAS */


/* Media queries mais abrangentes para diferentes tamanhos de tela */
@media (max-width: 480px) {

/* Header mobile - melhorias específicas */
    .header {
        padding: 10px 0;
    }
    
    .header-content {
        display: flex;
        flex-direction: column; /* Organiza os itens em coluna */
        align-items: center; /* Centraliza os itens */
        text-align: center;
        gap: 8px;
    }

    .logo {
        display: flex;
        flex-direction: column; /* Itens do logo em coluna */
        align-items: center; /* Centraliza os itens do logo */
        gap: 5px; /* Espaçamento entre os itens do logo */
        font-size: 16px;
        font-weight: 600;
    }
    
    .logo-icon {
        font-size: 20px;
    }
    
    .edition {
        font-size: 12px;
        padding: 3px 8px;
    }
    
    .event-info {
        font-size: 14px; /* Aumentei um pouco para melhor leitura */
        justify-content: center;
    }
    

/* H1 mobile - correções específicas */
    .hero-text h1 {
        font-size: 1.8rem !important;  /* aumentado no mobile */
        line-height: 1.3 !important;
        letter-spacing: -0.5px;
        margin-bottom: 16px;
        text-align: center;
    }
    

/* Hero section mobile */
    .hero {
        padding: 140px 0 40px; /* Aumentei o padding superior para não sobrepor o header */
        min-height: auto;
    }
    
    .hero-flex-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
    
    .hero-text {
        order: 1;
        width: 100%;
        padding: 0 10px;
    }


/* AJUSTE: Diminuir a fonte do subtítulo */
    .hero-text p {
        font-size: 1rem !important; /* Fonte diminuída */
        line-height: 1.5 !important;
        margin-bottom: 24px;
    }
    
    .hero-image {
        order: 2;
        margin-top: 0;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .profile-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
    }
    
    .cta-button {
        padding: 10px 17px;
        font-size: 12px;
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
    

/* Container mobile */
    .container {
        padding: 0 15px;
    }
    

/* Seções gerais mobile */
    .content-section,
    .schedule-section,
    .target-section,
    .about-section,
    .offer-section,
    .form-section,
    .faq-section,
    .final-cta-section {
        padding: 60px 0;
    }
    

/* Títulos h2 mobile */
    .section-header h2,
    .problem-content h2,
    .about-text h2,
    .offer-header h2,
    .form-header h2,
    .final-cta-content h2 {
        font-size: 1.8rem !important;
        line-height: 1.2;
        margin-bottom: 16px;
    }
    

/* Parágrafos mobile */
    .section-header p,
    .problem-content p,
    .final-cta-content p {
        font-size: 1rem;
        line-height: 1.4;
    }
    

/* Grids mobile */
    .content-grid,
    .target-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .content-card {
        padding: 24px 20px;
    }
    

/* Timeline mobile */
    .timeline-item {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 20px;
        gap: 16px;
    }
    
    .timeline-hour {
        font-size: 1.5rem;
    }
    

/* About section mobile */
    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }
    

/* Guarantee details mobile */
    .guarantee-details {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    

/* Form mobile */
    .registration-form {
        padding: 24px 20px;
    }
    
    .form-header h2 {
        font-size: 1.6rem !important;
    }
    
    .checkout-button {
        font-size: 18px;
        padding: 16px;
    }
    

/* Security badges mobile */
    .security-badges {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    

/* FAQ mobile */
    .faq-question {
        padding: 20px 16px;
        font-size: 0.95rem;
    }
    
    .faq-answer p {
        padding: 0 16px 20px;
        font-size: 0.9rem;
    }
    

/* Footer mobile */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 12px;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 8px;
    }
}


/* Media query para tablets */
@media (max-width: 768px) and (min-width: 481px) {
    .header-content {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    
    .hero-text h1 {
        font-size: 2.2rem;
        line-height: 1.3;
        text-align: center;
    }
    
    .hero-flex-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }
    
    .profile-image {
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }
    
    .content-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .timeline-item {
        grid-template-columns: 80px 1fr;
        gap: 20px;
    }
    
    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    
    .guarantee-details {
        grid-template-columns: 1fr;
    }
}


/* AJUSTE: Logo maior na seção "Problem" */
.highlight-image {
    width: 150px; /* Tamanho padrão para desktop */
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .solution-highlight {
        flex-direction: column;
        align-items: center; /* Centraliza os itens */
    }
    .highlight-image {
        width: 180px !important; /* Aumentando o logo no mobile */
        margin-right: 0;
        margin-bottom: 8px; /* Espaçamento abaixo do logo */
    }
}


/* Correções adicionais para overflow */
html, body {
    overflow-x: hidden;
    width: 100%;
}

* {
    box-sizing: border-box;
}


/* Garantir que imagens não quebrem o layout */
img {
    max-width: 100%;
    height: auto;
}


/* Melhorar legibilidade em telas pequenas */
@media (max-width: 480px) {

    .solution-highlight {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 20px 16px;
    }
    
    .recording-info {
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        font-size: 0.9rem;
    }
    
    .urgency-content {
        padding: 0 16px;
    }
    
    .urgency-text {
        font-size: 1.1rem;
    }
}

.highlight-blue {
    color: #43b7c9 !important;
    font-weight: 700 !important;
}




/* Mobile adjustments */
@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

   .about-image {
    width: 100%;
    max-width: 500px; /* tamanho maior no desktop */
    margin: 0 auto;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
    .header .logo {
        font-size: 16px;
    }

    .header .edition {
        font-size: 12px;
    }

    .header .event-info {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .header .logo {
        font-size: 14px;
    }

    .header .logo-icon {
        font-size: 20px;
    }

    .header .edition {
        font-size: 10px;
        padding: 3px 8px;
    }

    .header .event-info {
        font-size: 10px;
    }

    .about-image {
        width: 80%; /* Mantém a proporção */
        max-width: 280px; /* Exemplo: de 200px para 280px */
        margin: 0 auto; /* Garante a centralização */
    }
}

.highlight-blue {
    color: #43b7c9; /* Cor da identidade visual */
}




.highlight-image {
    width: 100px; /* Ajuste conforme necessário */
    height: auto;
    margin-right: 16px; /* Espaçamento à direita do texto */
    vertical-align: middle;
}

@media (max-width: 768px) {
    .solution-highlight {
        flex-direction: column;
    }
    .highlight-image {
        margin-right: 0;
        margin-bottom: 10px;
    }
}



.header-logo {
    height: 180px !important; /* Ajuste o tamanho conforme necessário */
    width: auto;
    margin-right: 5px;
}

@media (max-width: 768px) {
    .header-logo {
        height: 25px;
    }
}



.highlight-image {
    width: 150px; /* Aumentando o tamanho do logo */
    height: auto;
    margin-right: 16px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .highlight-image {
        width: 100px; /* Tamanho menor para mobile */
        margin-right: 0;
        margin-bottom: 10px;
    }
}


/* Novo agrupamento */
.logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Deixa a logo maior, mas fora do fluxo do header */
.header-logo {
    height: 200px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}


/* Empurra o texto da logo para a direita da imagem */
.logo-text {
    padding-left: 210px; /* um pouco maior que a logo para não sobrepor */
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Garante que a altura da barra azul fique natural */
.header {
    padding: 15px 0;
    overflow: visible; /* deixa a imagem ultrapassar */
}


/* AJUSTE FORÇADO PARA O SUBTÍTULO NO MOBILE */
@media (max-width: 480px) {
    .hero-text p {
        font-size: 0.7rem !important; /* Reduzindo ainda mais e forçando a aplicação */
        line-height: 1.4 !important;   /* Ajustando a altura da linha */
    }
}


/* Ajuste para tablets (opcional, mas recomendado) */
@media (max-width: 768px) and (min-width: 481px) {
    .hero-text p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }
}



/* AJUSTE FINO PARA A SEÇÃO 'PROBLEM' NO MOBILE */
@media (max-width: 768px) {
    .solution-highlight {
        flex-direction: column; /* Coloca o logo acima do texto */
        align-items: center;    /* Centraliza tudo */
        text-align: center;     /* Centraliza o texto */
        gap: 20px;              /* Aumenta o espaço entre o logo e o texto */
        padding: 24px 16px;     /* Adiciona um respiro interno */
    }

    .highlight-image {
        width: 160px;           /* Define um tamanho bom para o logo no mobile */
        margin-right: 0;        /* Remove a margem lateral que não é mais necessária */
        margin-bottom: 0;       /* Remove a margem inferior (o 'gap' já cuida disso) */
    }

    .solution-highlight span {
        font-size: 1rem;        /* Ajusta o tamanho da fonte do texto para mobile */
        line-height: 1.5;       /* Melhora a legibilidade */
    }
}



/* =============================================== */

/* CORREÇÃO FINAL PARA SEÇÃO 'PROBLEM' NO MOBILE   */
@media (max-width: 768px) {
    .problem-section .solution-highlight {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem; /* Espaçamento entre logo e texto */
    }

    .problem-section .highlight-image {
        width: 160px !important; /* Tamanho ajustado para o logo */
        height: auto;
        margin: 0; /* Remove todas as margens */
    }

    .problem-section .solution-highlight span {
        font-size: 1.1rem; /* Fonte do texto de explicação */
        line-height: 1.5;
        max-width: 90%; /* Evita que o texto encoste nas bordas */
    }
}

.urgency-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(45deg, #43b7c9, #6ad4e6); /* Cor da identidade visual */
  padding: 12px 24px;
  border-radius: 30px;
  margin: 40px auto; /* Centraliza horizontalmente */
  font-weight: 700;
  color: white;
  font-size: 1rem;
  box-shadow: 0 4px 20px rgba(67, 183, 201, 0.3);
  width: fit-content;
  max-width: 90%;
  text-align: center;
}

.urgency-mini .urgency-icon {
  font-size: 20px;
}


/* Mobile: Centralização e responsividade */
@media (max-width: 480px) {
  .urgency-mini {
    flex-direction: row;
    font-size: 0.95rem;
    padding: 10px 20px;
  }


}

@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;
  }
}

@media (max-width: 768px) {
  .solution-highlight {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 16px;
    text-align: center;
  }

  .solution-highlight .highlight-image {
    width: 120px !important;
    margin-bottom: 6px;
  }

  .solution-highlight span {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .header-logo {
    max-width: 120px;
    margin: 0 auto;
  }

  .logo span {
    font-size: 14px;
  }

  .edition {
    font-size: 12px;
    font-weight: 500;
  }
}

@media (max-width: 768px) {
    body {
        background: #000 !important; /* remove a imagem e deixa só o preto */
        background-image: none !important;
        background-attachment: initial !important;
    }

    body::after {
        background: none !important; /* remove o escurecimento */
    }
}

@media (max-width: 768px) {
    body {
        background: url('BackgroundFernanda.jpg') no-repeat center center;
        background-size: cover;
        background-attachment: scroll !important;
        position: relative;
    }

    body::after {
    content: '';
    position: fixed;
    inset: 0;
    backdrop-filter: blur(4px); /* efeito moderno */
    background: rgba(0, 0, 0, 0.3); /* camada escura leve */
    z-index: -1;
    pointer-events: none;
  }
}

@media (max-width: 480px) {
    .about-text h3 {
        font-size: 1.2rem !important;
        font-weight: 300 !important;
        opacity: 0.8 !important;
    }
}


@media (max-width: 768px) {
  .problem-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .problem-section .solution-highlight {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important; /* Reduzido de 0 para 8px para aproximar */
    padding: 12px 16px !important; /* Reduzido padding */
    margin: -16px 0 -12px 0 !important; /* Ajustado margens */
  }

  .problem-section .highlight-image {
    width: 240px !important;
    margin: 0 0 4px 0 !important; /* Pequena margem inferior */
    padding: 0 !important;
    display: block !important;
  }

  .problem-section .solution-highlight > span {
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 769px) {
  .problem-section .highlight-image {
    width: 260px !important;  /* ou 280px se quiser maior */
    margin-bottom: 12px !important;
  }
}

.problem-section .highlight-image {
  max-width: 220px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.solution-highlight {
  padding: 20px !important;
  height: 180px !important; /* Ajuste conforme necessário */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo com tamanho fixo */
.solution-highlight .highlight-image {
  max-width: 200px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 480px) {
  .solution-highlight {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 10px !important; /* Reduzido ainda mais */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px !important; /* Gap ainda menor para telas pequenas */
  }

  .solution-highlight .highlight-image {
    max-width: 180px;
    height: auto;
    margin: 0 auto 2px auto !important; /* Margem inferior mínima */
  }

  .solution-highlight span {
    margin: 0 !important;
    font-size: 0.95rem !important; /* Texto ligeiramente menor */
    text-align: center;
    line-height: 1.3 !important;
  }
}

@media (max-width: 480px) {
  .profile-image {
    margin-bottom: 44px;
  }
}

@media (max-width: 768px) {
  .problem-section .solution-highlight {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .problem-section .highlight-image {
    width: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  .problem-section .solution-highlight > span {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.93rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    display: block !important;
  }

  .problem-section .solution-highlight > span span {
    line-height: 1.1 !important;
    display: inline !important;
  }
}

@media (max-width: 768px) {
  .problem-section .container {
    padding: 0 12px !important;
  }

  .problem-content {
    margin-top: -12px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .solution-highlight {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .solution-highlight img.highlight-image {
    width: 220px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 8px auto !important;
  }

  .solution-highlight span {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    max-width: 90%;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  .problem-section .highlight-image {
    width: 100px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;     /* IMPORTANTE: remove espaçamento interno de linha */
  }

  .problem-section .solution-highlight {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .problem-section .solution-highlight > span {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: 1rem !important;
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .problem-section .solution-highlight img.highlight-image {
    width: 160px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(67, 183, 201, 0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(67, 183, 201, 0.8); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(67, 183, 201, 0.7); }
}

/* Piscar suave só no primeiro botão */
.hero .cta-button {
  animation: pulse 1.5s infinite ease-in-out;
}

/* Urgency mini banner */
.urgency-mini {
  animation: pulse 1.5s infinite ease-in-out;
}

/* Final CTA button */
.final-cta-section .final-cta {
  animation: pulse 1.5s infinite ease-in-out;
}

.target-item p {
  font-size: 1.2rem; /* padrão é menor, agora maior */
  font-weight: 500;  /* deixa mais encorpado */
  line-height: 1.5;  /* espaço entre linhas */
  text-align: center; /* centraliza (opcional) */
}

@media (min-width: 769px) {
  .target-item p {
    font-size: 1.2rem;
  }
}

.schedule-section .section-header h2 {
  margin-bottom: 10px; /* antes era 24px */
}

/* --- Hero: aumentar a foto no mobile --- */
@media (max-width: 768px) {
  /* libera o wrapper que estava travando em 150x150 */
  .profile-image {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
  }

  /* aumenta a imagem de fato (usa !important para vencer regras anteriores) */
  .hero .hero-image .profile-image img {
    width: 210px !important;   /* ajuste seu gosto: 240–280px */
    height: auto !important;
  }
}

/* Título do formulário: deixa tudo branco por padrão */
.form-header h2 {
  color: #ffffff !important;
}

/* E deixa só os trechos desejados em azul */
.form-header h2 .highlight-blue {
  color: #43b7c9 !important;
  font-weight: 700 !important;
}

/* Aumenta o subtítulo "Cada hora com resultado imediato" */
.schedule-section .section-header p {
  font-size: 1.2rem;   /* antes 1.2rem */
  font-weight: 500;    /* deixa mais encorpado */
}

/* Testimonials Section */
.testimonials-section {
  padding: 80px 0;
  background: rgba(255, 255, 255, 0.02);
}

.testimonials-grid {
  display: flex;
  justify-content: center;
}

.testimonial-card {
  max-width: 800px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.testimonial-text {
  font-size: 1.1rem;
  color: #b8b8b8;
  line-height: 1.6;
  margin-bottom: 15px;
  font-style: italic;
}

.testimonial-name {
  display: block;
  text-align: right;
  font-weight: 600;
  color: #43b7c9;
  font-size: 1rem;
}

/* ===== Depoimento com legenda alinhada ===== */
.testimonial-caption {
  display: flex;
  justify-content: center;   /* mantém ambos centralizados em linha */
  align-items: center;
  gap: 40px;                 /* 🔥 controla a distância entre os dois */
  width: 100%;
  max-width: 520px;
  margin: 8px auto 0;
  font-size: .95rem;
}

.testimonial-name {
  color: #43b7c9;
  font-weight: 700;
}

.testimonial-role {
  color: #b8b8b8;
  font-style: italic;
}

/* Mobile responsivo */
@media (max-width: 480px) {
  .testimonial-caption {
    font-size: .85rem;
    padding: 0 6px;
  }
}

/* Ajuste do tamanho do print */
.testimonial-image {
  display: block;
  width: 100%;
  max-width: 520px;   /* 🔥 Reduzido para ficar menor no PC */
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 28px rgba(67,183,201,.35);
  margin: 0 auto;
}

/* Mobile continua ocupando a largura quase toda */
@media (max-width: 768px) {
  .testimonial-image {
    max-width: 90vw;
  }
}

@media (max-width: 480px) {
  .testimonial-name {
    font-size: 0.85rem;   /* 🔥 menor no celular */
  }
}

/* Subtítulo principal - Desktop */
.subtitulo-principal {
  font-size: 1.4rem !important;   /* aumenta (padrão estava ~1.1rem) */
  font-weight: 500;
  line-height: 1.6;
  color: #e0e0e0;  /* mantém cinza claro */
  margin-bottom: 28px;
  text-align: center; /* opcional: centralizar */
}

/* FORÇA o tamanho do subtítulo no mobile, sobrescrevendo .hero-text p */
@media (max-width: 480px) {
  .hero .hero-text .subtitulo-principal {
    font-size: 1.08rem !important;  /* ajuste o valor que quiser */
    line-height: 1.4 !important;
  }
}

@media (max-width: 768px) and (min-width: 481px) {
  .hero .hero-text .subtitulo-principal {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
  }
}

/* Centralizar botão no desktop */
@media (min-width: 769px) {
  .hero .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;  /* centraliza tudo */
    text-align: center;   /* centraliza textos também */
  }

  .hero .hero-text .cta-button {
    margin: 20px auto 0 auto !important; /* garante centralização */
    display: inline-flex;
  }
}

.problem-section .problem-content h2 {
  color: #ffffff !important;            /* título branco */
}
.problem-section .problem-content h2 .highlight-blue {
  color: #43b7c9 !important;            /* apenas o span azul */
  font-weight: 700 !important;
}

@media (max-width: 480px) {
  .problem-section .problem-content h2 {
    font-size: 1.6rem !important; /* ajuste fino só no mobile */
    line-height: 1.3 !important;
  }
}

/* Problema: remove o check e o recuo da lista somente nessa seção */
.problem-section .content-card li {
  padding-left: 0 !important;
}
.problem-section .content-card li::before {
  content: none !important;
}

@media (max-width: 480px) {
  .problem-section .content-card li {
    font-size: 1rem !important;   /* ajuste fino; use 1.05rem se quiser mais */
    line-height: 1.5 !important;
  }
  .problem-section .content-card {
    padding: 24px 18px !important; /* dá um respiro melhor no celular */
  }
}

@media (min-width: 769px) {
  /* força apenas uma coluna e centraliza o card */
  .problem-section .content-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  .problem-section .content-card {
    max-width: 920px !important;   /* maior no desktop */
    width: 100%;
    margin: 0 auto !important;
    text-align: left;              /* mantém texto alinhado à esquerda */
  }
  .problem-section .content-card li {
    font-size: 1.1rem !important;  /* ligeiramente maior no desktop */
    line-height: 1.6 !important;
  }
}

@media (min-width: 769px) {
  .problem-section .content-card { text-align: center !important; }
}

@media (min-width: 769px) {
  /* centraliza o card e limita largura */
  .problem-section .content-grid {
    display: flex !important;
    justify-content: center !important;
  }
  .problem-section .content-card {
    max-width: 980px !important;
    width: 100%;
    margin: 0 auto !important;
    text-align: left;
  }

  /* fonte um pouco maior na lista */
  .problem-section .content-card li {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
  }
}

/* ativa bullets azuis */
.problem-section .content-card li {
  position: relative;
  padding-left: 22px !important;  /* espaço para a bolinha */
}
.problem-section .content-card li::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 0.85em;                    /* ajusta verticalmente */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #43b7c9;           /* azul da identidade */
  box-shadow: 0 0 8px rgba(67,183,201,.4);
}

/* tira o fundo/caixa e deixa só o texto centralizado */
.problem-section .solution-highlight {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 24px auto 0 !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.problem-section .solution-highlight span {
  font-size: 1.4rem;        /* ajuste fino aqui se quiser maior */
  line-height: 1.6;
}

@media (max-width: 480px) {
  .problem-section .content-card {
    padding: 22px 18px !important;
  }
  .problem-section .content-card li {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
  /* bullets um pouquinho menores no mobile (opcional) */
  .problem-section .content-card li::before {
    width: 7px;
    height: 7px;
    top: 0.9em;
  }
}

/* Corrige títulos com span azul */
.content-section .section-header h2 {
  color: #ffffff !important; /* título inteiro branco */
}

.content-section .section-header h2 .highlight-blue {
  color: #43b7c9 !important; /* só o span azul */
  font-weight: 700 !important;
}

.timeline-hour {
  color: #ffffff; /* texto padrão branco */
  font-size: 1.1rem;
  line-height: 1.5;
}

.timeline-hour .highlight-blue {
  color: #43b7c9 !important; /* só o span azul */
  font-weight: 700;
}

/* Ajuste da seção Formato da Mentoria no DESKTOP */
@media (min-width: 769px) {
  .schedule-timeline {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colunas */
    gap: 30px;
    max-width: 1100px; /* controla largura total */
    margin: 0 auto;
  }

  .timeline-item {
    grid-template-columns: 1fr !important; /* remove aquela coluna "100px 1fr" */
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.6;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .timeline-hour {
    font-size: 1.2rem;  /* menor e mais equilibrado */
    font-weight: 500;
    color: #fff;        /* texto branco padrão */
    text-align: left;
  }

  .timeline-hour .highlight-blue {
    color: #43b7c9 !important;
    font-weight: 700;
  }
}

/* Bolinhas nos itens de Bônus Exclusivos */
#bonus .offer-benefits .benefit-item {
  position: relative;
  padding-left: 22px; /* espaço para a bolinha */
  margin-bottom: 12px;
}

/* ===== BÔNUS EXCLUSIVOS: bullets alinhados ao texto ===== */
#bonus .offer-benefits {
  max-width: 760px;        /* bloco mais estreito e central */
  margin: 0 auto;
  text-align: left;        /* texto alinhado à esquerda */
}

#bonus .offer-benefits .benefit-item {
  position: relative;
  display: block !important;              /* quebra a centralização do flex antigo */
  justify-content: flex-start !important; /* caso algum flex herde */
  gap: 0 !important;
  padding-left: 22px;                     /* espaço para a bolinha */
  margin: 10px 0;
  line-height: 1.6;
  font-size: 1.05rem;                     /* ajuste fino */
}

#bonus .offer-benefits .benefit-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;                            /* centraliza verticalmente na linha */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #43b7c9;                    /* azul da identidade */
  box-shadow: 0 0 8px rgba(67,183,201,.4);
}

/* Mobile: um pouco menor e com respiração */
@media (max-width: 480px) {
  #bonus .offer-benefits .benefit-item {
    font-size: 1rem;
    padding-left: 20px;
    margin: 8px 0;
  }
  #bonus .offer-benefits .benefit-item::before {
    width: 7px; height: 7px; top: 0.8em;
  }
}

/* Remove o quadrado cinza da frase final (recording-info) */
.target-section .recording-info {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 12px !important;  /* distância pequena do bloco de cima */
  display: block;
  text-align: center;           /* centraliza o texto */
}

.target-section .recording-info .recording-icon {
  display: none; /* remove o ícone do balãozinho */
}

.target-section .recording-info span {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;   /* mantém branco */
}


/* título da seção de benefícios em branco */
.target-section .section-header h2 {
  color: #ffffff !important;
}

/* espaço extra entre a lista e o texto "sua clínica passa..." */
.target-section .recording-info {
  margin-top: 24px !important; /* aumenta distância */
}

.target-section .recording-info span {
  display: block;
  margin-top: 6px; /* respiro interno do texto */
}
.target-section .recording-info span {
  font-size: 1.1rem;
  font-weight: 500;
}


/* ========= Problem Section — Desktop polish ========= */
@media (min-width: 1024px) {
  .problem-section {
    padding: 100px 0 64px;
  }

  /* limita a largura total da seção */
  .problem-section .container {
    max-width: 1100px;
  }

  /* título mais equilibrado no PC */
  .problem-section .problem-content h2 {
    color: #ffffff !important;
    font-size: 3.2rem;          /* antes ~2.5rem */
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 28px;
    text-align: center;
  }
  .problem-section .problem-content h2 .highlight-blue {
    color: #43b7c9 !important;  /* mantém só o span azul */
  }

  /* card centralizado e mais “premium” */
  .problem-section .content-grid {
    display: flex !important;
    justify-content: center !important;
  }
  .problem-section .content-card {
    width: 100%;
    max-width: 1040px;          /* controla o comprimento do card */
    padding: 40px 48px;         /* mais respiro */
    border-radius: 20px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
      inset 0 20px 50px rgba(0,0,0,0.35),
      0 10px 40px rgba(0,0,0,0.25);
    text-align: left;
  }

  /* lista mais legível e bullets um pouco maiores */
  .problem-section .content-card li {
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 16px;
    padding-left: 26px;         /* espaço para a bolinha */
  }
  .problem-section .content-card li::before {
    width: 10px;
    height: 10px;
    top: 0.85em;
  }

  /* frase “A Mentoria Império Fritz…” mais próxima e legível */
  .problem-section .solution-highlight {
    margin-top: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }
  .problem-section .solution-highlight span {
    font-size: 1.1rem;
    line-height: 1.6;
  }
}

/* Centralizar o card da lista no DESKTOP */
@media (min-width: 1024px) {
  .problem-section .content-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;     /* centraliza o filho no grid */
    width: 100%;
  }

  .problem-section .content-card {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto !important;          /* garante centralização */
    justify-self: center !important;
    align-self: center !important;
    float: none !important;              /* caso alguma regra antiga flutue */
  }
}

@media (min-width: 1024px) {
  .problem-section .container { padding-left: 0; padding-right: 0; }
}


@media (min-width: 1024px) {
  .problem-section .content-grid {
    display: flex;
    justify-content: center;   /* centraliza horizontalmente */
  }

  .problem-section .content-card {
    max-width: 800px;          /* largura fixa e central */
    margin: 0 auto;            /* garante centro */
  }
}

/* ===== CENTRALIZAR O CARD "AGENDA CHEIA..." NO DESKTOP ===== */
@media (min-width: 1024px) {
  /* neutraliza qualquer layout anterior do grid */
  .problem-section .content-grid {
    display: block !important;          /* sai do flex/grid que estava esticando */
    width: 100% !important;
  }

  /* card com largura limitada e 100% centralizado */
  .problem-section .content-card {
    max-width: 860px !important;        /* ajuste aqui se quiser mais/menos largo */
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}

@media (min-width: 1024px) {
  .problem-section .container { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ===== Centralizar o card da seção "Agenda cheia..." (DESKTOP) ===== */
@media (min-width: 1024px) {
  /* tira qualquer layout anterior e usa o container como wrapper central */
  .problem-section .container {
    display: flex !important;
    flex-direction: column;
    align-items: center;                /* centraliza os filhos */
    padding-left: 0 !important;
    padding-right: 0 !important;        /* remove o deslocamento de 20px do .container */
  }

  .problem-section .content-grid {
    width: 100% !important;
    display: block !important;
  }

  .problem-section .content-card {
    max-width: 860px !important;        /* ajuste a largura a seu gosto */
    width: 100% !important;
    margin: 0 auto !important;          /* centro matemático */
    float: none !important;             /* evita qualquer flutuação antiga */
  }
}

/* ===== BÔNUS EXCLUSIVOS — CENTRALIZAR (DESKTOP) ===== */
@media (min-width: 1024px) {
  /* 1) centraliza tudo da seção via alinhamento de texto */
  #bonus .offer-content {
    text-align: center !important;
  }

  /* 2) faz a lista virar um bloco "encaixável" e centraliza */
  #bonus .offer-benefits {
    display: inline-block !important;   /* vira um bloco do tamanho do conteúdo */
    text-align: left !important;        /* bullets continuam alinhados à esquerda */
    margin: 0 auto !important;          /* fica exatamente no centro */
    max-width: 820px !important;        /* ajuste se quiser mais/menos largo */
    padding: 0 !important;
  }

  /* 3) garante que nenhum layout anterior “puxe” para o lado */
  #bonus .offer-benefits .benefit-item {
    display: block !important;
    margin-left: 0 !important;
  }
}

@media (min-width: 1024px) {
  #beneficios .content-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 1000px !important;   /* deixa mais largo */
    margin: 0 auto !important;      /* centralizado */
  }

  #beneficios .content-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #beneficios .content-card li {
    font-size: 1.3rem !important;   /* aumenta fonte */
    line-height: 1.8 !important;    /* mais espaçamento */
    margin-bottom: 18px;
  }
}

@media (min-width: 1024px) {
  #beneficios .content-card {
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;   /* centraliza os textos */
  }

  #beneficios .content-card li {
    font-size: 1.25rem !important;
    line-height: 1.8 !important;
    margin-bottom: 16px;
    list-style: none;
    position: relative;
  }

  #beneficios .content-card li::before {
    content: "✔";
    color: #43b7c9;
    margin-right: 8px;
  }
}

/* CTA antes do formulário */
.cta-pre-form {
  padding: 80px 0 40px;
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}

.cta-pre-text {
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ===== CTA antes do formulário (todos os tamanhos) ===== */
.cta-pre-form {
  position: relative;
  margin-top: 56px;                  /* espaço da seção anterior */
  padding: 56px 20px 40px;           /* padding interno */
  border-top: 1px solid rgba(255,255,255,.08); /* linha suave de divisão */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,0) 60%
  );                                 /* leve faixa de destaque */
  text-align: center;
}

.cta-pre-form .container { 
  max-width: 920px; 
  margin: 0 auto;
}

.cta-pre-text {
  font-size: 1.2rem;
  line-height: 1.7;
  margin: 0 auto 22px auto;
  max-width: 820px;                  /* evita linhas muito longas */
}

.cta-pre-form .cta-button {
  margin-top: 12px;
  padding: 16px 28px;
  box-shadow: 0 8px 24px rgba(67,183,201,.25);
}

/* ===== Seção "Problemas" — fonte maior no DESKTOP ===== */
@media (min-width: 1024px) {
  /* Itens da lista dentro do card */
  .problem-section .content-card li {
    font-size: 1.22rem !important;  /* antes ~1rem */
    line-height: 1.8 !important;
    margin-bottom: 16px;
  }
  .problem-section .content-card li::before {
    width: 10px;
    height: 10px;
    top: 0.9em;
  }

  /* Frase "A Mentoria Império Fritz..." logo abaixo */
  .problem-section .solution-highlight span {
    font-size: 1.15rem !important;   /* leve aumento */
    line-height: 1.7 !important;
    font-weight: 500;
  }
}
/* ===== Benefícios (MOBILE) — equilíbrio de espaçamentos e legibilidade ===== */
@media (max-width: 480px) {
  /* título: um pouco menor e com respiro padrão */
  .target-section .section-header h2 {
    font-size: 1.6rem !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    text-align: center;
  }

  /* card da lista: padding e distância do título */
  #beneficios .content-card {
    margin-top: 8px !important;     /* aproxima do título */
    padding: 18px 16px !important;  /* respiro interno consistente */
  }

  /* itens: tamanho e espaçamento uniformes */
  #beneficios .content-card li {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
    padding-left: 22px !important;  /* espaço para o ícone */
  }
  #beneficios .content-card li::before {
    width: 7px;
    height: 7px;
    top: 0.85em;
  }

  /* frase final: distância do card + leitura confortável */
  #beneficios .recording-info {
    margin-top: 16px !important;    /* nem colado nem longe */
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    text-align: center !important;
  }
  #beneficios .recording-info span {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    font-weight: 600;
  }
}
@media (max-width: 480px) {
  /* título mais colado no card */
  #beneficios .section-header h2 {
    margin-bottom: 8px !important;   /* antes estava maior */
  }

  #beneficios .content-card {
    margin-top: 6px !important;      /* cola o card no título */
  }
}
/* ==== PROBLEM (DESKTOP POLISH) ==== */
@media (min-width: 1024px){

  /* título mais contido e próximo do card */
  .problem-section .problem-content h2{
    max-width: 1100px;
    margin: 0 auto 22px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  /* card com acabamento (glass leve) e largura controlada */
  .problem-section .content-card{
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 28px 36px !important;
    background: rgba(12,16,22,.58) !important;
    border: 1px solid rgba(67,183,201,.22) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 20px rgba(67,183,201,.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 18px;
    text-align: left !important; /* evita centralização acidental */
  }

  /* lista em 2 colunas, com balanço e respiro */
  .problem-section .content-card ul{
    column-count: 2;
    column-gap: 36px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .problem-section .content-card li{
    break-inside: avoid;
    padding-left: 26px !important;     /* espaço pro marcador */
    margin: 6px 0 10px;
    font-size: 18px !important;
    line-height: 1.5 !important;
    color: #cfe8ec;
    position: relative;
  }

  /* marcador azul com glow */
  .problem-section .content-card li::before{
    content:"";
    position:absolute;
    left: 0; top: .55em;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: radial-gradient(55% 55% at 50% 50%, #43b7c9 0%, #147e8d 100%);
    box-shadow: 0 0 10px rgba(67,183,201,.8);
  }

  /* frase “Mentoria…” mais próxima e sem caixa */
  .problem-section .solution-highlight{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: 980px;
    margin: 16px auto 0 !important;
    padding: 0 !important;
  }

  .problem-section .solution-highlight span{
    font-size: 1.35rem;
    line-height: 1.5;
    text-align: center;
    display: block;
  }
}

/* micro-anim pra suavizar entrada (opcional) */
@keyframes pfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:1024px){
  .problem-section .content-card{animation:pfade .28s ease-out both}
}

/* Garante que o "A" e o "Mentoria Império Fritz" fiquem juntos */
.problem-section .solution-highlight span {
  white-space: nowrap; /* mantém tudo na mesma linha */
}

.problem-section .solution-highlight .highlight-blue::before {
  content: "A ";              /* insere o "A" colado */
  color: #ffffff;             /* mantém branco */
  font-weight: 400;           /* mesmo peso do texto normal */
}

/* FIX mobile: permitir quebra normal */
.problem-section .solution-highlight span{
  white-space: normal !important;
}

/* Insere "A " branco grudado no nome da mentoria (com NBSP) */
.problem-section .solution-highlight .highlight-blue::before{
  content: "A\00a0";  /* A + espaço não-quebrável */
  color: #fff;        /* fica branco */
  font-weight: 400;
}

/* Ajuste dos cards no mobile */
@media (max-width: 480px) {
  #solucao .content-card {
    padding: 36px 24px !important;  /* aumenta o respiro interno */
    font-size: 1.05rem !important; /* aumenta o texto */
  }

  #solucao .content-card p {
    font-size: 1.05rem !important; /* texto dentro maior */
    line-height: 1.5 !important;   /* melhora leitura */
  }
}

/* Animação de pulso */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Aplica o efeito a todos os botões principais */
.cta-button,
.checkout-button {
  animation: pulse 1.8s infinite;
}

.problem-section {
    background: #fff !important;
    color: #000 !important;
}
.problem-section h2,
.problem-section li,
.problem-section span {
    color: #000 !important; /* garante leitura */
}

.content-section {
    background: #000 !important;
    color: #fff !important;
}

.schedule-section {
    background: #fff !important;
    color: #000 !important;
}

.offer-section {
    background: #fff !important;   /* fundo branco */
    color: #000 !important;        /* texto preto */
}

.offer-section h2,
.offer-section .benefit-item,
.offer-section .benefit-item span {
    color: #000 !important;        /* garante leitura */
}

.offer-section .benefit-item::before {
    background: #43b7c9 !important; /* mantém a bolinha azul da identidade */
}

.form-section {
    background: #fff !important;
    color: #000 !important;
}

/* === Ajustes para seção PROBLEM (fundo branco) === */
.problem-section {
    background: #fff !important;   /* fundo branco */
    color: #000 !important;        /* textos padrão em preto */
}

/* Título principal */
.problem-section h2 {
    color: #000 !important;        /* força preto */
}

/* Mantém apenas os spans em azul */
.problem-section h2 .highlight-blue {
    color: #43b7c9 !important;
    font-weight: 700 !important;
}

/* Texto abaixo: "A Mentoria Império Fritz..." */
.problem-section .solution-highlight span {
    color: #000 !important;        /* frase preta */
}
.problem-section .solution-highlight span .highlight-blue {
    color: #43b7c9 !important;     /* só "Mentoria Império Fritz" em azul */
}


/* ===== FORCE: seção "problem-section" com título preto ===== */
section.problem-section h1,
section.problem-section h2,
section#dor h1,
section#dor h2,
.problem-section .problem-content h2 {
  color: #000 !important;                /* título preto */
  -webkit-text-fill-color: #000 !important; /* caso algum estilo aplique fill */
}

/* Mantém apenas os spans em azul dentro do título */
section.problem-section h1 .highlight-blue,
section.problem-section h2 .highlight-blue,
section#dor h1 .highlight-blue,
section#dor h2 .highlight-blue {
  color: #43b7c9 !important;
  font-weight: 700 !important;
}

/* Frase abaixo do card: "A Mentoria Império Fritz..." */
.problem-section .solution-highlight span {
  color: #000 !important;                /* deixa o "A" e o resto em preto */
}
.problem-section .solution-highlight span .highlight-blue {
  color: #43b7c9 !important;             /* apenas "Mentoria Império Fritz" azul */
}

/* ===== PROBLEM (fundo branco): título preto mas spans azuis ===== */
section.problem-section h2,
section#dor h2,
.problem-section .problem-content h2 {
  color: #000 !important;              /* título preto */
}

/* Apenas os trechos destacados em azul dentro do título */
section.problem-section h2 .highlight-blue,
section#dor h2 .highlight-blue,
.problem-section .problem-content h2 .highlight-blue {
  color: #43b7c9 !important;           /* azul da identidade */
  font-weight: 700 !important;
}

/* ===== Frase "A Mentoria Império Fritz foi criada..." ===== */
.problem-section .solution-highlight > span {
  color: #000 !important;              /* texto base preto */
}

/* Insere o "A " antes da frase */
.problem-section .solution-highlight > span::before {
  content: "A ";
  color: #000;                         /* o A fica preto */
  font-weight: 700;                    /* opcional: dá mais presença ao A */
}

/* Mantém só "Mentoria Império Fritz" em azul */
.problem-section .solution-highlight > span .highlight-blue {
  color: #43b7c9 !important;
  font-weight: 700 !important;
}

.problem-section h2 {
  color: #000 !important; /* título base preto */
}

.problem-section h2 .highlight-blue {
  color: #43b7c9 !important; /* spans azuis */
}

/* ===== PROBLEM (fundo branco): título preto mas spans azuis ===== */
.problem-section h1,
.problem-section h2 {
  color: #000 !important; /* base preta */
}

/* Só os trechos destacados ficam azuis */
.problem-section h1 .highlight-blue,
.problem-section h2 .highlight-blue {
  color: #43b7c9 !important;
  font-weight: 700 !important;
}

/* Frase "A Mentoria Império Fritz..." — texto preto, só o nome em azul */
.problem-section .solution-highlight > span { color: #000 !important; }
.problem-section .solution-highlight > span .highlight-blue {
  color: #43b7c9 !important; font-weight: 700 !important;
}

/* Se antes você usou ::before para inserir o "A", desligue aqui */
.problem-section .solution-highlight > span::before { content: none !important; }

/* === DOR (id="dor"): título preto com trechos AZUIS === */
#dor .problem-content h2 {
  color: #000 !important;                              /* base preta */
}
#dor .problem-content h2 .highlight-blue {
  color: #43b7c9 !important;                           /* trechos azuis */
  -webkit-text-fill-color: #43b7c9 !important;         /* previne fill herdado */
  display: inline !important;                          /* impede quebra de linha */
}

/* === “A Mentoria Império Fritz…” (tudo na mesma linha) === */
#dor .solution-highlight {
  height: auto !important;                             /* remove altura fixa */
  flex-wrap: nowrap !important;                        /* evita quebra forçada */
}
#dor .solution-highlight > span {
  display: inline-block !important;                    /* bloco único */
  white-space: normal !important;
  color: #000 !important;                              /* texto preto */
}
#dor .solution-highlight > span .highlight-blue {
  display: inline !important;                          /* mantém em linha */
  color: #43b7c9 !important;                           /* só o nome em azul */
  -webkit-text-fill-color: #43b7c9 !important;
}

/* (Opcional) garanta que nenhuma regra antiga deixe o título branco */
#dor .problem-content h2,
section.problem-section h2 {
  -webkit-text-fill-color: currentColor !important;
}

.problem-section .solution-highlight span::before {
  content: none !important;
}


/* ===== Ajustes para a seção "Formato da Mentoria" ===== */
.schedule-section {
  background: #fff !important;      /* fundo branco */
  color: #000 !important;           /* texto padrão em preto */
}

/* Título principal */
.schedule-section h2 {
  color: #43b7c9 !important;        /* azul da identidade */
  font-weight: 700;
}

/* Subtítulo abaixo do h2 */
.schedule-section p {
  color: #555 !important;           /* cinza escuro */
  font-weight: 400;
}

/* Textos dentro dos cards/timeline */
.schedule-section .timeline-hour {
  color: #000 !important;           /* texto preto */
}

/* Mantém apenas os spans de destaque em azul */
.schedule-section .timeline-hour .highlight-blue {
  color: #43b7c9 !important;
  font-weight: 600;
}

/* Estilo dos cards (timeline-item) */
.schedule-section .timeline-item {
  background: #f7f7f7;              /* cinza clarinho */
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* ===== Form Section (formulário final) ===== */
.form-section {
  background: #fff !important;     /* fundo branco */
  color: #000 !important;          /* textos padrão em preto */
}

/* Título do formulário */
.form-section h2 {
  color: #000 !important;          /* base preta */
  font-weight: 700;
}
.form-section h2 .highlight-blue {
  color: #43b7c9 !important;       /* azul da identidade */
}

/* Subtítulo abaixo do título */
.form-section .form-benefits {
  color: #555 !important;          /* cinza escuro */
}

/* Inputs */
.form-section .form-group label {
  color: #000 !important;          /* label preta */
}
.form-section .form-group input {
  color: #000 !important;          /* texto digitado preto */
  background: #fff;                /* fundo branco */
  border: 1px solid #ccc;
}

/* Botão de envio */
.form-section .checkout-button {
  background: #43b7c9 !important;  /* botão azul */
  color: #fff !important;          /* texto branco */
  font-weight: 600;
}

/* Selos de segurança */
.form-section .security-badges {
  color: #000 !important;
}

/* ===== Investment Section (dark) ===== */
.investment-section {
  background: #0b0f12;           /* preto elegante */
  color: #fff;
  padding: 80px 0;
  position: relative;
}

.investment-header {
  text-align: center;
  margin-bottom: 28px;
}
.investment-header h2 {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 2.6rem;
  letter-spacing: -0.5px;
  color: #fff;
}
.investment-header h2 .highlight-blue { color: #43b7c9; }
.investment-header p {
  margin-top: 10px;
  font-size: 1.25rem;
  color: rgba(255,255,255,.85);
}

/* Card com borda azul e leve glow */
.price-card {
  max-width: 980px;
  margin: 22px auto 12px;
  padding: 34px 28px 28px;
  background: rgba(8, 12, 16, .6);
  border: 2px solid #2fb6c7;              /* borda azul */
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 36px rgba(67,183,201,.35);        /* glow azul */
  text-align: center;
}

.price-caption {
  color: #43b7c9;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 6px;
}

/* Linha do preço grande */
.price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 2px 0 12px;
}
.installments {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: 2.4rem;
  color: #43b7c9;
}
.currency {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: #c8f6ff;
  text-shadow: 0 0 18px rgba(200,246,255,.35);
}
.amount {
  font-family: 'League Spartan', sans-serif;
  font-weight: 900;
  font-size: 4rem;
  line-height: .9;
  color: #ffffff;
  text-shadow:
    0 0 18px rgba(255,255,255,.28),
    0 0 26px rgba(67,183,201,.35);
}

.conditions {
  margin-top: 6px;
  font-size: 1.15rem;
  color: rgba(255,255,255,.85);
}

/* CTA */
.price-cta {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.btn-invest-cta {
  display: inline-block;
  padding: 18px 34px;
  border-radius: 999px;
  background: linear-gradient(45deg, #43b7c9, #6ad4e6);
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(67,183,201,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-invest-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(67,183,201,.45);
}

/* Responsivo */
@media (max-width: 768px) {
  .investment-section { padding: 60px 0; }
  .investment-header h2 { font-size: 2rem; }
  .investment-header p { font-size: 1.05rem; }
  .amount { font-size: 3rem; }
  .currency { font-size: 1.8rem; }
  .installments { font-size: 2rem; }
  .price-card { padding: 26px 18px; margin-top: 14px; }
}

/* ===== CTA pré-formulário em FUNDO BRANCO ===== */
section.cta-section,
section#cta,
section.pre-form-cta {
  background: #fff !important;
  color: #000 !important;
  padding: 48px 0 40px !important;   /* reduz altura */
  margin: 0 !important;              /* remove margens herdadas */
}

/* remove faixas/overlays que criam a “banda” escura */
section.cta-section::before,
section.cta-section::after,
section#cta::before,
section#cta::after,
section.pre-form-cta::before,
section.pre-form-cta::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* texto do CTA em preto, mantendo os destaques azuis */
section.cta-section p,
section#cta p,
section.pre-form-cta p {
  color: #000 !important;
  font-weight: 500;
}
section.cta-section p .highlight-blue,
section#cta p .highlight-blue,
section.pre-form-cta p .highlight-blue {
  color: #43b7c9 !important;
  font-weight: 700;
}

/* botão continua azul */
section.cta-section .cta-button,
section#cta .cta-button,
section.pre-form-cta .cta-button {
  background: #43b7c9 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(67,183,201,.35);
}

/* ===== elimina o “espaço estranho” entre seções ===== */
/* tira divisores/gradientes do fim da seção anterior e do início da próxima */
section.cta-section + section,
section#cta + section,
section.pre-form-cta + section {
  margin-top: 0 !important;
}
section.cta-section,
section#cta,
section.pre-form-cta {
  border: 0 !important;
}

/* alguns temas colocam um .section-divider entre seções */
.section-divider,
.section-separator {
  display: none !important;
}

/* ===== CTA pré-formulário: fundo branco + texto preto ===== */
section.cta-pre-form {
  background: #fff !important;
  color: #000 !important;
  padding: 48px 0 40px !important;
  margin: 0 !important;
  position: relative;
}

section.cta-pre-form p,
section.cta-pre-form .cta-pre-text {
  color: #000 !important;
  font-weight: 500;
}

/* mantém apenas os destaques em azul */
section.cta-pre-form .highlight-blue {
  color: #43b7c9 !important;
  font-weight: 700;
}

/* botão continua azul */
section.cta-pre-form .cta-button {
  background: #43b7c9 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(67,183,201,.35);
}

/* remove qualquer pseudo divisor/overlay nessa seção */
section.cta-pre-form::before,
section.cta-pre-form::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* ===== tira o “buraco” entre CTA branco e sessão seguinte ===== */
section.cta-pre-form + section {
  margin-top: 0 !important;
}

/* garante que a sessão escura de investimento não crie faixa de topo */
.investment-section {
  margin-top: 0 !important;
  border-top: 0 !important;
}
/* ===== Utilitários de overlay (aplique nas seções) ===== */
:root{
  --blue:#43b7c9;
  --dark:#0b0f12;
  --light:#ffffff;
}

/* Base para receber overlays */
.section-overlay{
  position: relative;
  isolation: isolate;            /* garante que os ::before/::after fiquem sobre a seção */
  overflow: hidden;
}

/* ========= OVERLAY GLOBAL POR SEÇÃO ========= */
/* Habilita uma “camada” por seção sem mexer no conteúdo */
.section-overlay{
  position: relative;
  isolation: isolate;    /* garante uma pilha própria p/ o ::before */
}
.section-overlay > *{ position: relative; z-index: 1; }

/* Engine do overlay (degradê + “partículas”) */
.section-overlay::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.28;                         /* intensidade padrão */
  background: none;                    /* será definido nas skins abaixo */
}

/* -------- SKINS (definem cor base + overlay) -------- */

/* ESCURO: preto translúcido + vinheta + partículas azuladas */
.section-dark{
  background: rgba(11,15,18,.94) !important; /* leve opacidade */
  color:#fff;
}
.section-dark::before{
  background:
    radial-gradient(1200px 600px at 80% -120px, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 520px at -15% 120%, rgba(67,183,201,.12), transparent 58%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
<g fill='%23aee9f2' opacity='0.10'>\
<circle cx='10' cy='12' r='2'/><circle cx='80' cy='36' r='2'/>\
<circle cx='140' cy='20' r='2'/><circle cx='56' cy='92' r='2'/>\
<circle cx='120' cy='120' r='2'/><circle cx='24' cy='140' r='2'/>\
<circle cx='100' cy='70' r='2'/>\
</g></svg>") repeat;
  background-size: 100% 100%, 100% 100%, 320px 320px;
  opacity:.36;                         /* um pouco mais forte no dark */
}

/* CLARO: branco translúcido + vinheta suave + partículas cinza */
.section-light{
  background: rgba(255,255,255,.94) !important; /* leve opacidade */
  color:#0b0f12;
}
.section-light::before{
  background:
    radial-gradient(1000px 520px at 12% 90%, rgba(67,183,201,.08), transparent 58%),
    radial-gradient(900px 520px at 88% 8%, rgba(0,0,0,.06), transparent 62%),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
<g fill='%23000000' opacity='0.07'>\
<circle cx='18' cy='20' r='2'/><circle cx='90' cy='32' r='2'/>\
<circle cx='142' cy='72' r='2'/><circle cx='60' cy='118' r='2'/>\
<circle cx='24' cy='80' r='2'/>\
</g></svg>") repeat;
  background-size: 100% 100%, 100% 100%, 320px 320px;
  opacity:.30;
}

/* Destaques azuis continuam iguais nas duas skins */
.section-dark  .highlight-blue,
.section-light .highlight-blue{ color:#43b7c9 !important; }

/* Ajustes finos de intensidade por seção (opcional) */
.problem-section.section-overlay::before    { opacity:.26; }
.schedule-section.section-overlay::before   { opacity:.24; }
.investment-section.section-overlay::before { opacity:.38; }
.form-section.section-overlay::before       { opacity:.22; }

/* =================================================================== */
/* ===== CORREÇÃO FORÇADA: EFEITO DE OVERLAY NAS SEÇÕES CLARAS ===== */
/* =================================================================== */

/* 1. Garante que a seção clara tenha um fundo branco opaco e texto preto */
.section-light {
  background: rgba(255, 255, 255, 0.96) !important; /* Fundo branco levemente translúcido */
  color: #0b0f12 !important;                       /* Texto escuro para contraste */
}

/* 2. Força a recriação do pseudo-elemento com as partículas e gradientes */
.section-light::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  
  /* Gradientes e partículas */
  background:
    radial-gradient(1000px 520px at 12% 90%, rgba(67, 183, 201, 0.08), transparent 58%),
    radial-gradient(900px 520px at 88% 8%, rgba(0, 0, 0, 0.06), transparent 62%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='%23000000' opacity='0.07'><circle cx='18' cy='20' r='2'/><circle cx='90' cy='32' r='2'/><circle cx='142' cy='72' r='2'/><circle cx='60' cy='118' r='2'/><circle cx='24' cy='80' r='2'/></g></svg>" ) repeat !important;
  
  background-size: 100% 100%, 100% 100%, 320px 320px !important;
  opacity: 0.30 !important; /* Intensidade do efeito */
}

/* 3. Garante que o conteúdo da seção fique por cima do efeito */
.section-overlay > * {
  position: relative;
  z-index: 1;
}

/* 4. Garante que a base para o overlay esteja correta */
.section-overlay {
  position: relative;
  isolation: isolate;
}

/* 5. Garante que os textos de destaque permaneçam azuis */
.section-light .highlight-blue {
  color: #43b7c9 !important;
}

/* 6. Garante que os textos dos títulos e parágrafos fiquem pretos */
.section-light h1,
.section-light h2,
.section-light h3,
.section-light p,
.section-light span,
.section-light li,
.section-light div {
    color: #0b0f12; /* Cor base escura */
}

/* ...mas os spans de destaque continuam azuis */
.section-light .highlight-blue {
    color: #43b7c9 !important;
}


/* Partículas de fundo usando CSS puro */
.section-with-particles {
    position: relative;
    overflow: hidden;
}

.section-with-particles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo opaco */
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #fff, transparent),
        radial-gradient(1px 1px at 200px 90px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 240px 50px, #fff, transparent),
        radial-gradient(1px 1px at 280px 10px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 320px 70px, #fff, transparent),
        radial-gradient(2px 2px at 360px 40px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 400px 20px, #fff, transparent),
        radial-gradient(2px 2px at 440px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 480px 60px, #fff, transparent),
        radial-gradient(2px 2px at 520px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 560px 90px, #fff, transparent),
        radial-gradient(2px 2px at 600px 50px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 640px 20px, #fff, transparent),
        radial-gradient(2px 2px at 680px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 720px 40px, #fff, transparent),
        radial-gradient(2px 2px at 760px 10px, rgba(255,255,255,0.6), transparent);
    background-repeat: repeat;
    background-size: 800px 100px;
    animation: particles-move 20s linear infinite;
    z-index: -1;
}

@keyframes particles-move {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-100px);
    }
}

.section-with-particles .container {
    position: relative;
    z-index: 1;
}


/* Ajuste para seções #solucao e #programa (ficarem com vidro escuro e partículas visíveis) */
#solucao,
#programa {
  background: rgba(0, 0, 0, 0.45) !important;   /* preto translúcido */
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  padding: 80px 0; /* mantém o espaçamento */
}

/* Textos brancos e azuis para contraste */
#solucao h2, 
#programa h2,
#solucao p, 
#programa p {
  color: #ffffff !important;
}
#solucao .highlight-blue, 
#programa .highlight-blue {
  color: #43b7c9 !important;
  font-weight: 700;
}

/* Cards dentro do Programa */
#programa .content-card,
#solucao .content-card {
  background: rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  border-radius: 14px;
}
#programa .content-card h3,
#solucao .content-card h3 {
  color: #43b7c9 !important;
}
#programa .content-card p,
#solucao .content-card p {
  color: #e5e5e5 !important;
}

/* Zera QUALQUER fundo da própria seção (como na hero) */
#solucao,
#programa {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 100px 0; /* mantém o respiro da seção */
}

/* “Vidro escuro” SOMENTE nos cards internos */
#solucao .content-card,
#programa .content-card {
  background: rgba(0, 0, 0, 0.28) !important;   /* mais leve p/ deixar as partículas aparecerem */
  -webkit-backdrop-filter: none !important;     /* sem blur p/ não borrar as partículas */
  backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 36px rgba(0,0,0,0.35);
  border-radius: 16px;
}

/* Tipografia nesses cards */
#solucao .content-card h3,
#programa .content-card h3 { color: #43b7c9 !important; }
#solucao .content-card p,
#programa .content-card p { color: #e9eef2 !important; }

/* Título das seções continua branco/azul, como na hero */
#solucao .section-header h2,
#programa .section-header h2 { color: #ffffff !important; }
#solucao .section-header .highlight-blue,
#programa .section-header .highlight-blue { color: #43b7c9 !important; }

/* ==== MOBILE: partículas suaves, sem "mancha" ==== */
@media (max-width: 768px) {
  /* 1) Fundo menos "aproximado" e melhor posicionado */
  body {
    background-image: url('BackgroundFernanda.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center 12% !important;   /* sobe um pouco a área mais limpa */
    background-size: 95% auto !important;         /* des-zoom sutil (menores pontinhos) */
    background-attachment: scroll !important;
  }

  /* 2) Overlay escuro MUITO leve + micro-efeitos para amaciar */
  body::after {
    background: rgba(0,0,0,0.12) !important;      /* mais claro que antes */
    backdrop-filter: blur(0.8px) contrast(0.90) saturate(0.92) !important;
    -webkit-backdrop-filter: blur(0.8px) contrast(0.90) saturate(0.92) !important;
    z-index: -2 !important;
  }

  /* 3) Wash radial suave no centro para reduzir o contraste dos pontos onde há texto */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
      radial-gradient(60% 40% at 50% 22%,
        rgba(255,255,255,0.07) 0%,
        rgba(255,255,255,0.03) 55%,
        rgba(255,255,255,0.00) 100%);
  }

  /* 4) Seções #solucao/#programa continuam transparentes (partículas passam atrás) */
  #solucao, #programa {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 5) Cards com vidro MUITO leve (sem blur, sombra discreta) */
  #solucao .content-card, #programa .content-card {
    background: rgba(0,0,0,0.16) !important;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }

  /* 6) Seções claras menos opacas para não “tampar” o fundo no mobile */
  .section-light { background: rgba(255,255,255,0.48) !important; }
  .section-light .content-card,
  .section-light .registration-form { background: rgba(255,255,255,0.40) !important; }
}

/* ===== MOBILE: seções claras ficam realmente brancas ===== */
@media (max-width: 768px) {
  .section-light {
    background: #ffffff !important;     /* branco chapado */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Cards/formulários dentro das seções brancas */
  .section-light .content-card,
  .section-light .registration-form,
  .section-light .price-card {
    background: #ffffff !important;     /* branco sólido também */
    border: 1px solid rgba(0,0,0,0.08); /* borda leve pra separar do fundo */
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }

  /* Texto dentro continua escuro pra contraste */
  .section-light h1,
  .section-light h2,
  .section-light h3,
  .section-light p,
  .section-light li {
    color: #141414 !important;
  }

  /* Azul da identidade continua */
  .section-light .highlight-blue {
    color: #43b7c9 !important;
  }
}

/* ===== MOBILE: seções brancas iguais ao desktop ===== */
@media (max-width: 768px) {
  .section-light {
    background: #ffffff !important; /* mantém branco sólido */
  }

  .section-light .content-card,
  .section-light .registration-form,
  .section-light .price-card {
    background: rgba(0,0,0,0.72) !important; /* mantém os cards escuros */
    color: #f5f5f5 !important;
  }
}

/* ===== MOBILE: seções brancas iguais ao desktop, mas cards mais clarinhos ===== */
@media (max-width: 768px) {
  .section-light {
    background: #ffffff !important; /* fundo branco chapado */
  }

  .section-light .content-card,
  .section-light .registration-form,
  .section-light .price-card {
    background: rgba(245, 245, 245, 0.85) !important; /* cinza bem clarinho */
    color: #222 !important; /* texto escuro para contraste */
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
}

/* Clarear ainda mais os cards da seção "Se você é esteticista..." */
#problema .content-card {
  background: rgba(255, 255, 255, 0.95) !important; /* quase branco */
  color: #1a1a1a !important;                        /* texto bem legível */
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Deixar o card da seção "Se você é esteticista..." bem clarinho */
.problem-section.section-light#dor .content-card,
#dor .content-card {
  background: rgba(255, 255, 255, 0.95) !important; /* quase branco */
  color: #1a1a1a !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.10) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-image: none !important;
}

/* ========= Interactive cards: hover (desktop) + tap (mobile) ========= */
.interactive-card {
  position: relative;
  border-radius: inherit;
  isolation: isolate;                 /* garante que o shine e ripple fiquem dentro */
  transition:
    transform .22s cubic-bezier(.2,.7,.2,1),
    box-shadow .22s cubic-bezier(.2,.7,.2,1),
    border-color .22s, background-color .22s, color .22s;
  will-change: transform, box-shadow;
}

/* Borda/brilho de marca beeem sutil por padrão */
.interactive-card {
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* Efeito "elevate + glow" no hover (só em dispositivos com hover) */
@media (hover:hover) and (pointer:fine) {
  .interactive-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(0,0,0,.22), 0 0 0 1px rgba(67,183,201,.16);
  }
  .interactive-card:hover::after {
    opacity: .55;
    transform: translateX(120%) skewX(-12deg);
  }
}

/* "Shine" passando na diagonal */
.interactive-card::after {
  content: "";
  position: absolute;
  inset: -2px;                        /* cobre tudo */
  background: linear-gradient(100deg,
    transparent 10%,
    rgba(255,255,255,.18) 45%,
    rgba(67,183,201,.12) 55%,
    transparent 90%);
  transform: translateX(-120%) skewX(-12deg);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .3s;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  z-index: 1;
}

/* Estado focado (teclado/acessibilidade) */
.interactive-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67,183,201,.45);
}

/* Tap no mobile: micro elevação */
@media (hover:none) {
  .interactive-card:active,
  .interactive-card.is-tapped {
    transform: translateY(-2px) scale(.998);
    box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(67,183,201,.14);
  }
}

/* Ripple (criado via JS) */
.interactive-card .ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle, rgba(67,183,201,.28) 0%, rgba(67,183,201,0) 60%);
  width: 10px; height: 10px;
  opacity: .0;
  animation: ripple-burst .6s ease-out forwards;
  z-index: 0; /* abaixo do shine */
}
@keyframes ripple-burst {
  0%   { opacity: .24; transform: translate(-50%, -50%) scale(.6); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(16); }
}

/* Opcional: leves variações para cards em fundo claro vs escuro */
body .section-light .interactive-card {
  /* em fundo branco, sombra mais suave */
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* --- Cards interativos (content-card e timeline-item) --- */
.content-card,
.timeline-item {
  position: relative;            /* necessário p/ pseudo e ripple */
  overflow: hidden;              /* esconde o brilho/ripple */
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

/* brilho direcional segue o mouse */
.content-card::after,
.timeline-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  background:
    radial-gradient(120% 120% at var(--mx,50%) var(--my,50%),
                    rgba(67,183,201,.15), transparent 60%);
}

/* Desktop: hover com “lift” e brilho */
@media (hover:hover) {
  .content-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    background-color: rgba(255,255,255,.08); /* sutil no fundo escuro */
  }
  .timeline-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,212,170,.2);
  }
  .content-card:hover::after,
  .timeline-item:hover::after {
    opacity: 1;
  }
}

/* Mobile: feedback de “press” */
@media (hover:none) {
  .content-card:active,
  .timeline-item:active {
    transform: scale(.98);
    box-shadow: 0 8px 16px rgba(0,0,0,.25);
  }
}

/* Ripple (aparece no toque/click) */
.content-card .ripple,
.timeline-item .ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(67,183,201,.35);
  transform: translate(-50%,-50%) scale(1);
  pointer-events: none;
  animation: ripple .6s ease-out forwards;
}

@keyframes ripple {
  to {
    transform: translate(-50%,-50%) scale(18);
    opacity: 0;
  }
}


/* Neon border mais leve nos cards escuros (solucao e programa) */
#solucao .content-card,
#programa .content-card {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(67,183,201,0.4); /* borda mais suave */
  box-shadow: 0 0 6px rgba(67,183,201,0.18),
              0 0 12px rgba(67,183,201,0.12);
  transition: transform 0.25s ease,
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}

/* Hover / toque */
#solucao .content-card:hover,
#programa .content-card:hover,
#solucao .content-card:active,
#programa .content-card:active {
  transform: translateY(-3px);
  border-color: rgba(67,183,201,0.65);
  box-shadow: 0 0 10px rgba(67,183,201,0.3),
              0 0 18px rgba(67,183,201,0.22);
}

/* Mobile: reduzir espaço entre o título e o card da seção problema */
@media (max-width: 768px) {
  #dor .content-grid {
    margin-top: 8px !important; /* estava 24px */
  }
}
/* ===== MOBILE: reduzir espaço do título x cards ===== */
@media (max-width: 480px) {
  /* 1) Sessão "Se você é esteticista..." (id="dor") */
  #dor .problem-content h2 {
    margin-bottom: 10px !important;      /* era ~24px */
    line-height: 1.25;                    /* segura quebra de linha */
  }
  /* o grid onde está o card cinza */
  #dor .content-grid {
    margin-top: 8px !important;           /* estava com style="margin-top:24px" */
  }

  /* 2) Sessão "Formato da Mentoria" */
  #formato .section-header {
    margin-bottom: 18px !important;       /* aproxima o título dos cards */
  }
  /* se houver descrição (subtítulo) sob o h2 */
  #formato .section-header p {
    margin-top: 6px !important;
    margin-bottom: 8px !important;
  }

  /* 3) Regra geral: títulos de seções em mobile mais “colados” no conteúdo */
  .content-section .section-header {
    margin-bottom: 22px !important;       /* padrão global mais compacto */
  }
}

/* Centralizar todos os botões CTA dentro das seções */
section .cta-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;  /* garante centralização */
  text-align: center;
}

/* no final do styles-updated.css */
#investimento { scroll-margin-top: 140px; } /* ajuste se quiser */

/* ❗ Deixa <a> com cara de botão */
a.cta-button,
a.checkout-button {
  text-decoration: none !important;
  color: #fff !important;
}

a.cta-button:visited,
a.checkout-button:visited {
  color: #fff !important;       /* evita roxo de link visitado */
}

a.cta-button:hover,
a.checkout-button:hover,
a.cta-button:active,
a.checkout-button:active {
  text-decoration: none !important;
}

/* (opcional) garante altura e centralização iguais ao <button> */
.cta-button,
.checkout-button {
  line-height: 1;                /* deixa padding mandar na altura */
  box-sizing: border-box;
}

/* em styles-updated.css */
.registration-form .checkout-button { width: 100%; }
.checkout-button { width: auto; } /* fallback fora do form */

a.cta-button, a.checkout-button { text-decoration: none !important; color: #fff !important; }
a.cta-button:hover, a.checkout-button:hover { text-decoration: none !important; }

/* === Normaliza TODOS os CTAs como o da Hero === */
a.cta-button, a.checkout-button { text-decoration: none !important; color: #fff !important; }
a.cta-button:hover, a.checkout-button:hover { text-decoration: none !important; }

.cta-button {
  display: flex !important;                 /* garante caixa de botão */
  align-items: center;
  justify-content: center;
  width: fit-content !important;            /* nunca estica 100% */
  max-width: 100%;
  margin: 20px auto 0 !important;           /* centraliza em todas as seções */
  line-height: 1;
}

/* checkout só fica 100% dentro do formulário */
.checkout-button { 
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content !important;            /* padrão fora do form */
  max-width: 100%;
  margin: 20px auto 0 !important;
}

.registration-form .checkout-button {
  width: 100% !important;                   /* 100% apenas no form */
}