/* ============================================
   RESPONSIVE MOBILE - evaclean.com.br
   Extraído do index.php <style> inline
   ============================================ */

/* ── Tablet (max 1024px) ── */
@media (max-width: 1024px) {
    /* Timeline vertical */
    .how-it-works [style*="max-width: 800px"] {
        max-width: 100% !important;
    }
    /* Cards garantia: 2 colunas */
    .how-it-works [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* 3 cards destaque: 2+1 */
    .features [style*="grid-template-columns: repeat(3, 1fr)"][style*="margin-bottom: 48px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
    /* ─ Container ─ */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ─ Header mobile: Opção C — [burger] [logo] ... [Cotar] [Entrar] ─ */
    .navbar {
        gap: 8px !important;
    }
    .mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: #f1f5f9 !important;
        border: none !important;
        color: #334155 !important;
        font-size: 1.05rem !important;
        cursor: pointer;
        flex-shrink: 0;
        order: -1 !important;
    }
    .logo {
        font-size: 1.2rem !important;
        flex-shrink: 0;
    }

    /* Botoes Cotar + Entrar compactos a direita */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin-left: auto !important;
    }
    .header-actions .btn {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        white-space: nowrap !important;
    }
    .header-actions .btn i {
        display: none !important;
    }
    .header-actions .btn-outline {
        display: inline-flex !important;
    }

    /* ─ Hero ─ */
    .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
    }
    .hero-description {
        font-size: 0.95rem !important;
    }
    .hero-stats {
        gap: 12px !important;
    }
    .hero-stats .stat-item {
        min-width: 0 !important;
    }
    .stat-number {
        font-size: 1.5rem !important;
    }

    /* ─ Timeline "Como funciona" ─ */
    .how-it-works [style*="position: absolute; left: 50%"] {
        display: none !important;
    }
    .how-it-works [style*="display: flex; align-items: center; margin-bottom: 48px"],
    .how-it-works [style*="display: flex; align-items: center;"] {
        flex-direction: column !important;
        text-align: center !important;
        margin-bottom: 32px !important;
    }
    .how-it-works [style*="flex: 1; text-align: right; padding-right: 40px"],
    .how-it-works [style*="flex: 1; text-align: left; padding-left: 40px"] {
        text-align: center !important;
        padding: 0 !important;
        order: 2 !important;
    }
    .how-it-works [style*="flex: 1; padding-left: 40px"]:empty,
    .how-it-works [style*="flex: 1; padding-right: 40px"]:empty {
        display: none !important;
    }
    .how-it-works [style*="width: 60px; height: 60px; background: white; border: 4px"] {
        margin-bottom: 16px !important;
        order: 1 !important;
    }
    .how-it-works [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-top: 40px !important;
    }
    .how-it-works [style*="grid-template-columns: repeat(4"] > div {
        padding: 16px !important;
    }

    /* ─ Features: 3 Cards Destaque ─ */
    .features [style*="grid-template-columns: repeat(3, 1fr)"][style*="margin-bottom: 48px"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .features [style*="grid-template-columns: repeat(3, 1fr)"][style*="margin-bottom: 48px"] > div {
        padding: 24px !important;
    }

    /* ─ E tem mais: container ─ */
    .features [style*="background: #f8fafc; border-radius: 24px; padding: 40px"] {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    /* ─ E tem mais: linhas 2 colunas → 1 coluna ─ */
    .features [style*="grid-template-columns: repeat(2, 1fr); gap: 20px"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ─ E tem mais: grid 3 colunas → 1 coluna ─ */
    .features [style*="grid-template-columns: repeat(3, 1fr); gap: 20px"]:not([style*="margin-bottom: 48px"]) {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* ─ Comparison table scroll ─ */
    .comparison-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ─ Services grid ─ */
    .services-grid {
        grid-template-columns: 1fr !important;
    }

    /* ─ Testimonials ─ */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    /* ─ Pricing grid ─ */
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }
    .pricing-card {
        max-width: 100% !important;
    }

    /* ─ FAQ ─ */
    .faq-question span {
        font-size: 0.95rem !important;
    }

    /* ─ CTA ─ */
    .cta-title {
        font-size: 1.6rem !important;
    }
    .cta-features {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* ─ Footer ─ */
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* ─ Section headers ─ */
    .section-title {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
    }
    .section-description {
        font-size: 0.9rem !important;
    }

    /* ─ Buttons ─ */
    .btn-large {
        padding: 14px 28px !important;
        font-size: 1rem !important;
    }

    /* ─ Qualidade section responsivo ─ */
    .qualidade-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
    .header-actions {
        gap: 4px !important;
    }
    .header-actions .btn {
        padding: 5px 8px !important;
        font-size: 0.68rem !important;
    }
    .mobile-toggle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
    }
    .logo {
        font-size: 1.1rem !important;
    }
    .hero-title {
        font-size: 1.5rem !important;
    }
    .hero-badge {
        font-size: 0.8rem !important;
    }
    .section-title {
        font-size: 1.4rem !important;
    }
    .hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .stat-number {
        font-size: 1.3rem !important;
    }
    .stat-label {
        font-size: 0.75rem !important;
    }

    /* Cards garantia: 1 coluna em telas muito pequenas */
    .how-it-works [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    /* Dropdown logradouro cotador */
    .logradouro-item-cot.ativo {
        background: #f8fafc !important;
    }

    /* E tem mais: cards destaque menor padding */
    .features [style*="border-radius: 16px; padding: 24px; display: flex"] {
        padding: 16px !important;
        gap: 12px !important;
    }
    .features [style*="border-radius: 16px; padding: 24px; display: flex"] h4 {
        font-size: 0.9rem !important;
    }
    .features [style*="border-radius: 16px; padding: 24px; display: flex"] p {
        font-size: 0.82rem !important;
    }

    /* Pricing */
    .price-value {
        font-size: 1.3rem !important;
    }
}

/* ── Hero: texto primeiro, cards abaixo no tablet ── */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .hero-image {
        order: 1 !important;
    }
    .hero-text {
        order: 0 !important;
    }
    .hero-image > div[style*="min-height"] {
        min-height: auto !important;
        position: static !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        justify-content: center !important;
    }
    .hero-float-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        max-width: 280px !important;
        width: 100% !important;
        animation: none !important;
    }
}

/* ── Mobile: esconder floating cards + anti-overflow ── */
@media (max-width: 768px) {
    .hero {
        overflow: hidden !important;
    }
    .hero-shape {
        display: none !important;
    }
    .hero-image {
        display: none !important;
    }
    [data-aos="fade-right"],
    [data-aos="fade-left"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── Banner Indicação ── */
.referral-banner {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    padding: 12px 20px;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 500;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    box-shadow: 0 2px 12px rgba(34,197,94,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    animation: refBannerSlide 0.5s ease-out;
}
@keyframes refBannerSlide {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.referral-banner .ref-icon {
    font-size: 1.3rem;
}
.referral-banner strong {
    font-weight: 700;
}
.referral-banner .ref-valor {
    background: rgba(255,255,255,0.25);
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}
.referral-banner .ref-btn {
    background: #fff;
    color: #16a34a;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}
.referral-banner .ref-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.referral-banner .ref-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
}
.referral-banner .ref-close:hover { color: #fff; }
@media (max-width: 480px) {
    .referral-banner { font-size: 0.82rem; padding: 10px 36px 10px 14px; gap: 6px; }
    .referral-banner .ref-btn { padding: 5px 12px; font-size: 0.78rem; }
}

/* ── Badge cashback no cotador ── */
.cotador-ref-badge {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 1px solid #22c55e;
    border-radius: 12px;
    padding: 10px 14px;
    margin-top: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #14532d;
    animation: refBadgePulse 2s ease-in-out;
}
@keyframes refBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
    50% { box-shadow: 0 0 0 6px rgba(34,197,94,0.15); }
}
.cotador-ref-badge i { color: #22c55e; font-size: 1.1rem; flex-shrink: 0; }
.cotador-ref-badge strong { color: #15803d; }

/* ── Seção Qualidade (substitui depoimentos) ── */
.qualidade-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.qualidade-card {
    background: white;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    transition: all 0.3s;
}
.qualidade-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    border-color: #c7d2fe;
}
.qualidade-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.qualidade-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}
.qualidade-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
.qualidade-extras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 32px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.qualidade-extra-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}
.qualidade-extra-item:hover {
    background: white;
    border-color: #c7d2fe;
    box-shadow: 0 4px 16px rgba(99,102,241,0.08);
}
.qualidade-extra-item i {
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.qualidade-extra-item h4 {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 3px;
}
.qualidade-extra-item p {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 768px) {
    .qualidade-extras {
        grid-template-columns: 1fr !important;
    }
}