/* Override de cores para página /comoler.html */
/* Sem Discord, a intercalação muda */

/* Offer: era cream, agora navy */
.offer-section {
    background: var(--navy) !important;
}

.offer-intro {
    color: var(--white) !important;
}

.offer-section .section-eyebrow {
    color: var(--gold) !important;
}

.offer-section .section-heading {
    color: var(--white) !important;
}

.offer-card {
    background: var(--white);
    box-shadow: 0 24px 72px rgba(26,42,63,0.12), 0 0 0 1px rgba(195,160,84,0.2);
}

/* FAQ: era navy, agora cream */
.faq-section {
    background: var(--cream) !important;
}

.faq-section .section-eyebrow {
    color: var(--gold) !important;
}

.faq-section .section-heading {
    color: var(--navy) !important;
}

.faq-item {
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.faq-item:hover {
    border-color: rgba(195,160,84,0.35);
}

.faq-q {
    color: rgba(0,0,0,0.88);
}

.faq-q:hover {
    color: var(--gold);
}

.faq-icon {
    color: var(--gold);
}

.faq-a,
.faq-a p {
    color: rgba(0,0,0,0.75) !important;
}

/* Final: era cream, agora navy */
.final-section {
    background: var(--navy) !important;
}

.final-title {
    color: var(--white) !important;
}

.final-sub {
    color: rgba(255,255,255,0.8) !important;
}

.final-micro {
    color: rgba(255,255,255,0.65) !important;
}

/* ================================================================
   OTIMIZAÇÕES RESPONSIVAS MOBILE PARA METODOTALMID
   ================================================================ */
@media (max-width: 768px) {
    /* Melhorias no Hero */
    .hero { padding: 110px 0 20px; }
    .hero-title { font-size: 1.7rem; line-height: 1.25; padding: 0 10px; }
    .hero-sub { font-size: 1rem; padding: 0 15px; margin-bottom: 1.8rem; }
    .hero-img-mobile img { width: 70%; max-width: 250px; margin-top: -5px; margin-bottom: 15px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    .hero-badge { margin-bottom: 1rem; }

    /* Ajustes nos Cards de Problema e Lista (For Whom) */
    .problem-card { padding: 1.5rem; }
    .problem-card p { font-size: 0.95rem; }
    .whom-item { padding: 1.3rem 0; }
    .whom-item p { font-size: 0.95rem; }

    /* Ajustes na Oferta */
    .offer-card-left { padding: 2rem 1.5rem; }
    .offer-amount { font-size: 2.8rem; }
    .offer-annual-note { font-size: 0.85rem; margin-bottom: 1.5rem; }
    .btn-offer { padding: 1.1rem; font-size: 1rem; border-radius: 12px; }
    .offer-guarantee { font-size: 0.8rem; margin-top: 1rem; }
    
    /* Espaçamentos gerais de seção */
    .section-heading { font-size: 1.6rem; padding: 0 10px; }
}

@media (max-width: 420px) {
    .hero-title { font-size: 1.45rem; }
    .offer-amount { font-size: 2.5rem; }
}