/**
 * Responsive Fixes - Mobile First
 * Corrige problemas críticos de responsividade
 */

/* ============================================ */
/* HERO SECTION - MOBILE */
/* ============================================ */

@media (max-width: 768px) {
    /* Hero Trust Cards - 1 coluna em mobile */
    .hero-trust,
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Remove scale do card central em mobile */
    .hero-trust .trust-item {
        transform: none !important;
    }

    /* Hero CTAs - Full width */
    .hero-ctas button {
        width: 100% !important;
        padding: 20px 32px !important;
    }

    /* Citação - Padding menor */
    [style*="padding: 24px 32px"] {
        padding: 20px 24px !important;
    }
}

@media (max-width: 640px) {
    /* Garantias - Ícones menores */
    .hero-trust [style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
    }

    /* Texto menor em mobile */
    .hero-trust [style*="font-size: 1.375rem"] {
        font-size: 1.125rem !important;
    }
}

/* ============================================ */
/* SEÇÃO OFERTA - MOBILE */
/* ============================================ */

@media (max-width: 968px) {
    /* Grid 2 colunas → 1 coluna */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1fr auto 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Seta de comparação - ocultar */
    [style*="font-size: 3rem; color: #9ca3af"] {
        display: none !important;
    }

    /* Cards de preço - Full width */
    .offer-card {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Preço gigante - menor em mobile */
    [style*="font-size: 7rem"] {
        font-size: 4.5rem !important;
    }

    [style*="font-size: 4.5rem"][data-price-monthly] {
        font-size: 3rem !important;
    }
}

@media (max-width: 640px) {
    /* Badge rotacionado - remover rotação */
    [style*="transform: rotate(5deg)"] {
        transform: rotate(0deg) !important;
        position: static !important;
        margin-bottom: 20px !important;
    }

    /* Ícones circulares menores */
    [style*="width: 80px; height: 80px"] {
        width: 60px !important;
        height: 60px !important;
        font-size: 2.5rem !important;
    }

    [style*="width: 120px; height: 120px"] {
        width: 90px !important;
        height: 90px !important;
        font-size: 3rem !important;
    }
}

/* ============================================ */
/* SEÇÃO DOAÇÕES - MOBILE */
/* ============================================ */

@media (max-width: 768px) {
    /* Instituições - Grid auto-fit → 1 coluna */
    [style*="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }

    /* Comparação mensalidade → 10% */
    [style*="grid-template-columns: 1fr auto 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Ocultar seta em mobile */
    [style*="font-size: 3rem"][style*="color: #9ca3af"] {
        display: none !important;
    }
}

/* ============================================ */
/* SEÇÃO INDICAÇÕES - MOBILE */
/* ============================================ */

@media (max-width: 768px) {
    /* Cards 3 colunas → 1 coluna */
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Badge "Melhor" - reposicionar */
    [style*="position: absolute; top: -12px; right: -12px"] {
        position: static !important;
        margin-bottom: 12px !important;
        display: inline-block !important;
    }

    /* Números grandes - menor em mobile */
    [style*="font-size: 3.5rem"] {
        font-size: 2.5rem !important;
    }
}

/* ============================================ */
/* ROADMAP - MOBILE */
/* ============================================ */

@media (max-width: 768px) {
    /* Timeline vertical → sem alternância */
    .roadmap-item {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 40px !important;
    }

    /* Linha vertical à esquerda */
    .roadmap-timeline::before {
        left: 20px !important;
        transform: none !important;
    }

    /* Dots sempre à esquerda */
    .roadmap-dot {
        left: 6px !important;
        right: auto !important;
    }
}

/* ============================================ */
/* FORMULÁRIOS - MOBILE */
/* ============================================ */

@media (max-width: 640px) {
    /* Inputs - padding menor */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select {
        padding: 12px 14px !important;
        font-size: 16px !important; /* Evita zoom no iOS */
    }

    /* Botões - Full width */
    button[type="submit"],
    .btn {
        width: 100% !important;
        padding: 16px 24px !important;
    }
}

/* ============================================ */
/* STATS SECTION - MOBILE */
/* ============================================ */

@media (max-width: 768px) {
    /* Stats grid - 1 coluna */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Números gigantes - menor */
    .stat-number {
        font-size: 3.5rem !important;
    }
}

/* ============================================ */
/* NAVEGAÇÃO - MOBILE */
/* ============================================ */

@media (max-width: 640px) {
    /* Nav logo - menor */
    .nav-logo {
        font-size: 18px !important;
    }

    /* Nav CTA - texto menor */
    .nav-cta {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }
}

/* ============================================ */
/* UTILITY CLASSES */
/* ============================================ */

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

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }
}

/* Hide em mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show apenas em mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* Stack em mobile */
@media (max-width: 640px) {
    .stack-mobile {
        flex-direction: column !important;
    }
}