/**
 * Why Us - Responsive CSS
 * Mobile/Tablet media queries
 */

/* Tablet */
@media (max-width: 1024px) {
    .sslp-why-us {
        padding: 60px 0;
    }

    .sslp-why-us__content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sslp-why-us__image-col {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }

    .sslp-why-us__grid,
    .sslp-why-us__grid--full {
        grid-template-columns: repeat(2, 1fr);
    }

    .sslp-why-us__social-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sslp-why-us__comparison-header,
    .sslp-why-us__comparison-row {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .sslp-why-us__comparison-col {
        padding: 12px 15px;
        font-size: 0.9rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .sslp-why-us {
        padding: 50px 0;
    }

    .sslp-why-us__header {
        margin-bottom: 35px;
    }

    .sslp-why-us__title {
        font-size: 1.8rem;
    }

    .sslp-why-us__title--large {
        font-size: 2.2rem;
    }

    .sslp-why-us__subtitle {
        font-size: 1rem;
    }

    .sslp-why-us__badge {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    .sslp-why-us__grid,
    .sslp-why-us__grid--full,
    .sslp-why-us__social-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .sslp-why-us__card {
        padding: 25px;
    }

    .sslp-why-us__icon {
        width: 45px;
        height: 45px;
        font-size: 1.5rem;
    }

    .sslp-why-us__card-title {
        font-size: 1.1rem;
    }

    .sslp-why-us__card-desc {
        font-size: 0.9rem;
    }

    /* Timeline mobile */
    .sslp-why-us__timeline {
        padding-left: 30px;
    }

    .sslp-why-us__timeline::before {
        left: 10px;
    }

    .sslp-why-us__timeline-marker {
        left: -20px;
        width: 28px;
        height: 28px;
    }

    .sslp-why-us__timeline-number {
        font-size: 0.75rem;
    }

    .sslp-why-us__timeline-item {
        padding: 15px 0 15px 20px;
    }

    .sslp-why-us__timeline-content {
        padding: 15px;
    }

    /* Comparison mobile */
    .sslp-why-us__comparison {
        overflow-x: auto;
    }

    .sslp-why-us__comparison-header,
    .sslp-why-us__comparison-row {
        min-width: 500px;
    }

    .sslp-why-us__comparison-col {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .sslp-why-us__check {
        font-size: 1rem;
    }

    /* List mobile */
    .sslp-why-us__list-item {
        padding: 18px 20px;
        gap: 15px;
    }

    /* Trust badges mobile */
    .sslp-why-us__trust-badges {
        gap: 8px;
    }

    .sslp-why-us__trust-badge {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    /* Urgent badge mobile */
    .sslp-why-us__urgent-badge {
        font-size: 0.85rem;
        padding: 10px 18px;
    }

    .sslp-why-us__scarcity {
        font-size: 0.85rem;
    }

    /* Buttons mobile */
    .sslp-why-us .sslp-btn {
        padding: 14px 28px;
        font-size: 0.95rem;
        width: 100%;
        max-width: 320px;
    }

    .sslp-why-us .sslp-btn--urgent {
        padding: 18px 35px;
        font-size: 1.1rem;
    }

    .sslp-why-us__footer {
        margin-top: 35px;
    }

    /* Fun variant mobile */
    .sslp-why-us--variant-f .sslp-why-us__card--fun {
        padding: 25px 20px;
    }

    .sslp-why-us--variant-f .sslp-why-us__icon--bounce {
        width: 50px;
        height: 50px;
        font-size: 1.7rem;
    }

    .sslp-why-us--variant-f .sslp-why-us__card-number {
        font-size: 2.5rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .sslp-why-us {
        padding: 40px 0;
    }

    .sslp-why-us .sslp-container {
        padding: 0 15px;
    }

    .sslp-why-us__title {
        font-size: 1.5rem;
    }

    .sslp-why-us__title--large {
        font-size: 1.8rem;
    }

    .sslp-why-us__card {
        padding: 20px;
    }

    .sslp-why-us__list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .sslp-why-us__timeline {
        padding-left: 25px;
    }

    .sslp-why-us__timeline::before {
        left: 8px;
    }

    .sslp-why-us__timeline-marker {
        left: -17px;
        width: 24px;
        height: 24px;
    }

    .sslp-why-us__trust-badges {
        flex-direction: column;
        align-items: center;
    }

    .sslp-why-us .sslp-btn {
        max-width: 100%;
    }
}

/* Fix mobile - forçar 1 coluna */
@media (max-width: 768px) {
    .sslp-why-us__grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .sslp-why-us__card {
        width: 100%;
    }
}