/* CSS Responsivo para Frontend Principal */

/* Mobile First Approach */
@media (max-width: 768px) {
    /* Container */
    .container {
        padding: 0 15px;
    }
    
    /* Hero Section */
    .hero {
        padding: 40px 0;
        min-height: 80vh;
    }
    
    .hero-badge {
        font-size: 12px;
        padding: 8px 16px;
        margin-bottom: 20px;
    }
    
    .hero-title {
        font-size: clamp(2rem, 6vw, 3rem);
        line-height: 1.2;
        margin-bottom: 20px;
    }
    
    .hero-subtitle {
        font-size: clamp(1rem, 2vw, 1.2rem);
        margin-bottom: 30px;
        padding: 0 10px;
    }
    
    /* Problems Section */
    .problems-section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-bottom: 30px;
        padding: 0 15px;
    }
    
    .problems-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
        padding: 0 15px;
        max-width: 400px !important;
    }
    
    .problem-item:nth-child(4),
    .problem-item:nth-child(5) {
        grid-column: 1 !important;
        max-width: 100% !important;
    }
    
    .problem-item {
        padding: 20px;
        text-align: center;
    }
    
    .problem-item i {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    /* Solution Section - CORREÇÃO ESPECÍFICA */
    .solution-section {
        padding: 40px 0;
    }
    
    .solution-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .solution-text {
        padding: 0 15px;
    }
    
    .benefits-list {
        gap: 20px;
        flex-direction: column;
    }
    
    .benefit-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        width: 100%;
        margin-bottom: 20px;
    }
    
    /* CORREÇÃO ESPECÍFICA para os cards da solução */
    .benefit-item .card,
    .benefit-item > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
        display: block !important;
        float: none !important;
    }
    
    .solution-mockup {
        padding: 0 15px;
    }
    
    .app-preview {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Method Section */
    .method-section {
        padding: 40px 0;
    }
    
    .method-steps {
        grid-template-columns: 1fr !important;
        gap: 30px;
        max-width: 400px !important;
        margin: 40px auto 0 !important;
    }
    
    .step-item {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    /* Results Paths Section */
    .results-paths-section {
        padding: 40px 0;
    }
    
    .paths-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .path-item {
        padding: 25px;
    }
    
    /* System Section */
    .system-section {
        padding: 40px 0;
    }
    
    .system-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .system-card {
        padding: 25px;
        text-align: center;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 350px !important;
    }
    
    .system-card .card-number {
        margin: 0 auto 15px !important;
    }
    
    .system-card h3 {
        margin: 15px 0 !important;
    }
    
    .system-card p {
        margin: 0 !important;
        flex-grow: 0 !important;
    }
    
    /* Results Section */
    .results-section {
        padding: 40px 0;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .result-item {
        padding: 25px;
        text-align: center;
    }
    
    /* Offer Section */
    .offer-section {
        padding: 40px 0;
    }
    
    .offer-title {
        font-size: clamp(2rem, 5vw, 3rem);
        margin-bottom: 25px;
    }
    
    .price-section-centered {
        margin: 30px 0;
    }
    
    .current-price {
        font-size: clamp(2rem, 5vw, 3rem);
    }
    
    .offer-content {
        flex-direction: column;
        gap: 30px;
    }
    
    .offer-left,
    .offer-right {
        width: 100%;
    }
    
    .module-item {
        padding: 15px;
        margin-bottom: 10px;
        font-size: 0.9rem;
    }
    
    /* Bonus Section */
    .bonus-section {
        padding: 40px 0;
    }
    
    .bonus-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
        max-width: 400px !important;
        margin: 40px auto 0 !important;
    }
    
    .bonus-item:nth-child(4),
    .bonus-item:nth-child(5) {
        grid-column: 1 !important;
        max-width: 100% !important;
    }
    
    .bonus-item {
        padding: 25px;
    }
    
    /* Offer Recap Section */
    .offer-recap-section {
        padding: 40px 0;
    }
    
    .recap-table {
        gap: 15px;
    }
    
    .recap-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 20px;
    }
    
    /* FAQ Section */
    .faq-section {
        padding: 40px 0;
    }
    
    .faq-list {
        gap: 20px;
    }
    
    .faq-question {
        padding: 20px;
        font-size: 1rem;
    }
    
    .faq-answer {
        padding: 0 20px 20px;
    }
    
    /* Risk Zero Section */
    .risk-zero-section {
        padding: 60px 0;
        margin: 40px 0;
    }
    
    .risk-zero-content {
        padding: 30px 20px;
        margin: 20px 15px;
        text-align: center;
    }
    
    /* Success Stories Section */
    .success-stories-section {
        padding: 40px 0;
    }
    
    .stories-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .story-card {
        padding: 25px;
    }
    
    .success-stats {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px 0;
    }
    
    .stat-item {
        text-align: center;
        padding: 20px;
    }
    
    /* Chat Widget - CORREÇÃO ESPECÍFICA para mobile */
    .chat-widget {
        right: 15px;
        bottom: 15px;
        z-index: 9999;
        position: fixed;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .chat-toggle {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .chat-container {
        width: 90vw;
        height: 80vh;
        right: 5vw;
        bottom: 80px;
        display: none;
        position: fixed;
        z-index: 10000;
    }
    
    .chat-container.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .chat-header {
        padding: 15px;
    }
    
    .chat-messages {
        padding: 15px;
    }
    
    .message {
        margin-bottom: 15px;
        padding: 12px;
    }
    
    .chat-input-container {
        padding: 15px;
    }
    
    /* Buttons */
    .cta-button {
        padding: 15px 25px;
        font-size: 1rem;
        width: 100%;
        max-width: 300px;
        margin: 20px 10px;
    }
    
    /* Guarantee section spacing */
    .guarantee {
        margin: 30px 0;
    }
    
    .cta-button.large {
        padding: 18px 30px;
        font-size: 1.1rem;
    }
    
    .cta-button.mega {
        padding: 20px 35px;
        font-size: 1.2rem;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
    }
    
    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1rem;
    }
    
    /* Modals */
    .custom-modal {
        padding: 20px;
    }
    
    .modal-content {
        width: 95%;
        max-width: 400px;
        margin: 20px auto;
    }
    
    .modal-header {
        padding: 15px 20px;
    }
    
    .modal-body {
        padding: 20px;
    }
    
    .modal-footer {
        padding: 15px 20px;
    }
    
    .modal-btn {
        padding: 10px 20px;
        font-size: 1rem;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }
    
    .hero-title {
        font-size: clamp(3rem, 7vw, 4rem);
    }
    
    .problems-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .paths-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .system-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bonus-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .success-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Chat Widget para tablet */
    .chat-widget {
        right: 20px;
        bottom: 20px;
        z-index: 9999;
    }
    
    .chat-container {
        width: 400px;
        height: 600px;
        right: 20px;
        bottom: 100px;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .container {
        padding: 0 40px;
    }
    
    .hero-title {
        font-size: clamp(4rem, 8vw, 6rem);
    }
    
    .problems-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .paths-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .system-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .results-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bonus-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .success-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Chat Widget para desktop */
    .chat-widget {
        right: 30px;
        bottom: 30px;
        z-index: 9999;
    }
    
    .chat-container {
        width: 350px;
        height: 500px;
        right: 30px;
        bottom: 100px;
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

/* Smooth transitions */
* {
    transition: all 0.3s ease;
}

/* Focus states for accessibility */
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid #4ecdc4;
    outline-offset: 2px;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Print styles */
@media print {
    .chat-widget,
    .cta-button,
    .modal {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* CORREÇÕES ESPECÍFICAS para seção "A SOLUÇÃO" */
@media (max-width: 768px) {
    /* Forçar layout em coluna para os cards da solução */
    .solution-content .benefits-list,
    .solution-content .benefit-item,
    .solution-content .card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 auto 20px !important;
    }
    
    /* Garantir que não haja layout horizontal */
    .solution-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Ajustar espaçamento dos cards */
    .benefit-item {
        margin-bottom: 30px !important;
        padding: 20px !important;
    }
    
    /* Garantir que o chat seja sempre visível */
    .chat-widget,
    .chat-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 99999 !important;
    }
}