/* Melhorias de responsividade para dispositivos móveis */

/* Estilos gerais responsivos */
@media (max-width: 767px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    h1, h2 {
        font-size: 1.8rem !important;
    }
    
    h3 {
        font-size: 1.4rem !important;
    }
    
    p {
        font-size: 0.95rem !important;
    }
    
    .btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* Cabeçalho responsivo */
@media (max-width: 767px) {
    .header {
        padding: 10px 0;
    }
    
    .logo {
        height: 30px !important;
    }
    
    .site-title {
        font-size: 1rem !important;
        margin-left: 10px !important;
    }
    
    .header-cta .btn {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
}

/* Hero section responsiva */
@media (max-width: 767px) {
    .hero-section {
        padding: 40px 0 30px;
    }
    
    .hero-title {
        font-size: 1.8rem !important;
        margin-bottom: 1rem;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 1.5rem;
    }
    
    .hero-features {
        gap: 10px;
    }
    
    .feature-item {
        padding: 10px 15px;
        width: 100%;
    }
    
    .hero-cta {
        margin-top: 1.5rem;
    }
    
    .trust-badges {
        margin-top: 2rem;
        gap: 10px;
    }
}

/* Seção de texto informativo responsiva */
@media (max-width: 767px) {
    .info-text-section {
        padding: 40px 0;
    }
    
    .info-text-title {
        font-size: 1.6rem !important;
        margin-bottom: 15px;
    }
    
    .info-text-content p {
        font-size: 0.9rem !important;
        line-height: 1.6;
        margin-bottom: 10px;
    }
    
    .info-text-features {
        gap: 15px;
    }
    
    .info-feature {
        padding: 15px;
        width: 100%;
    }
    
    .info-feature-title {
        font-size: 1.1rem !important;
    }
    
    .info-feature-text {
        font-size: 0.85rem !important;
    }
}

/* Showcase de cartões responsivo */
@media (max-width: 767px) {
    .card-showcase-section {
        padding: 40px 0;
    }
    
    .card-showcase-title {
        font-size: 1.6rem !important;
        margin-bottom: 10px;
    }
    
    .card-showcase-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 20px;
    }
    
    .card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .card-item {
        padding: 15px;
    }
    
    .card-title {
        font-size: 1.3rem !important;
    }
    
    .card-image-container {
        height: 150px;
    }
    
    .card-image {
        max-height: 130px;
    }
}

/* Formulário responsivo */
@media (max-width: 767px) {
    .questionnaire-section {
        padding: 30px 0;
    }
    
    .questionnaire-header h2 {
        font-size: 1.6rem !important;
        margin-bottom: 10px;
    }
    
    .questionnaire-header p {
        font-size: 0.9rem !important;
        margin-bottom: 20px;
    }
    
    .progress-container {
        margin: 20px 0;
    }
    
    .question-step {
        padding: 15px;
    }
    
    .question-step h3 {
        font-size: 1.4rem !important;
        margin-bottom: 15px;
    }
    
    .form-label {
        font-size: 0.9rem !important;
    }
    
    .form-select, .form-control {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    .btn-group {
        margin-top: 20px;
    }
    
    .btn-prev, .btn-next, .btn-submit {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}

/* Resultados responsivos */
@media (max-width: 767px) {
    .results-section {
        padding: 40px 0;
    }
    
    .results-header h2 {
        font-size: 1.6rem !important;
        margin-bottom: 10px;
    }
    
    .results-header p {
        font-size: 0.9rem !important;
    }
    
    .cartao-resultado {
        padding: 15px;
    }
    
    .cartao-header h3 {
        font-size: 1.3rem !important;
    }
    
    .cartao-imagem img {
        max-height: 150px;
    }
    
    .cartao-detalhes {
        font-size: 0.85rem !important;
    }
    
    .cartao-beneficios ul {
        padding-left: 15px;
    }
}

/* Footer responsivo */
@media (max-width: 767px) {
    .footer {
        padding: 20px 0 !important;
        text-align: center;
    }
    
    .footer p {
        font-size: 0.8rem !important;
        margin-bottom: 5px;
    }
    
    .text-md-end {
        text-align: center !important;
    }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 375px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .logo {
        height: 25px !important;
    }
    
    .site-title {
        font-size: 0.9rem !important;
    }
    
    .header-cta .btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    .hero-title {
        font-size: 1.6rem !important;
    }
    
    .btn-lg {
        padding: 8px 20px;
        font-size: 0.85rem;
    }
}
