/* Responsive Design */

/* Responsive Design for Time Slots */
@media (max-width: 768px) {
    .time-slots {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .time-slot {
        padding: 25px 20px;
    }
    
    .time-slot-hours {
        font-size: 1.4rem;
    }
    
    .time-highlight {
        min-width: auto;
        width: 100%;
        font-size: 1.1rem;
        padding: 20px;
    }
}

/* Responsive Design for App Showcase */
@media (max-width: 1024px) {
    .showcase-item {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .showcase-item.reverse .showcase-content,
    .showcase-item.reverse .showcase-image {
        order: initial;
    }
    
    .showcase-content {
        padding: 30px 20px;
    }
    
    .app-screenshot {
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    
    .hero {
        padding: 120px 0 80px;
        min-height: 90vh;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .steps {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .steps::before {
        display: none;
    }
    
    .advantages-grid {
        grid-template-columns: 1fr;
    }
    
    .advantage {
        flex-direction: column;
        text-align: center;
    }
    
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .app-showcase {
        padding: 60px 0;
    }
    
    .showcase-grid {
        margin-top: 40px;
    }
    
    .showcase-item {
        margin-bottom: 50px;
        gap: 30px;
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    .showcase-item.reverse .showcase-content {
        order: 1;
    }
    
    .showcase-item.reverse .showcase-image {
        order: 2;
    }
    
    .showcase-content {
        padding: 20px 10px;
    }
    
    .showcase-content h3 {
        font-size: 1.6rem;
        margin-bottom: 15px;
        line-height: 1.3;
    }
    
    .showcase-content p {
        font-size: 1rem;
        margin-bottom: 20px;
        line-height: 1.6;
    }
    
    .feature-list {
        margin-bottom: 25px;
        text-align: left;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .feature-list li {
        padding: 6px 0;
        font-size: 0.9rem;
    }
    
    .feature-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
    
    .app-screenshot {
        max-width: 480px;
        margin: 0 auto;
    }
    
    .screenshot-placeholder {
        font-size: 1.1rem;
        padding: 35px 20px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    
    .hero {
        padding: 120px 0 80px;
        min-height: 90vh;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero p {
        font-size: 1.1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .steps {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .steps::before {
        display: none;
    }
    
    .advantages-grid {
        grid-template-columns: 1fr;
    }
    
    .advantage {
        flex-direction: column;
        text-align: center;
    }
    
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .app-showcase {
        padding: 60px 0;
    }
    
    .showcase-grid {
        margin-top: 40px;
    }
    
    .showcase-item {
        margin-bottom: 50px;
        gap: 30px;
    }
    
    .showcase-content {
        padding: 20px 10px;
    }
    
    .showcase-content h3 {
        font-size: 1.6rem;
        margin-bottom: 15px;
        line-height: 1.3;
    }
    
    .showcase-content p {
        font-size: 1rem;
        margin-bottom: 20px;
        line-height: 1.6;
    }
    
    .feature-list {
        margin-bottom: 25px;
        text-align: left;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .feature-list li {
        padding: 6px 0;
        font-size: 0.9rem;
    }
    
    .feature-btn {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
    
    .phone-mockup {
        width: 220px;
        height: 440px;
        padding: 12px 10px;
    }
    
    .mockup-content {
        padding: 12px;
    }
    
    .mockup-header {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    
    .mockup-title {
        font-size: 1rem;
    }
    
    .mockup-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
    
    /* Form mockup mobile adjustments */
    .mockup-form {
        gap: 15px;
    }
    
    .form-field label {
        font-size: 0.8rem;
    }
    
    .input-mockup {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    
    .mockup-button {
        padding: 12px 16px;
        font-size: 0.85rem;
    }
    
    /* Tracking mockup mobile adjustments */
    .tracking-map {
        height: 140px;
        margin-bottom: 15px;
    }
    
    .map-placeholder {
        font-size: 2.5rem;
    }
    
    .tracking-pin {
        font-size: 1.2rem;
        top: 30%;
        right: 35%;
    }
    
    .tracking-status {
        gap: 10px;
    }
    
    .status-item {
        padding: 8px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .status-dot {
        width: 10px;
        height: 10px;
        flex-shrink: 0;
    }
    
    .status-item.active .status-dot::after {
        width: 18px;
        height: 18px;
        top: -4px;
        left: -4px;
        border-width: 2px;
    }
    
    .status-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    
    .status-title {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 2px;
        line-height: 1.2;
    }
    
    .status-time {
        font-size: 0.7rem;
        line-height: 1;
        opacity: 0.8;
    }
    
    /* Dashboard mockup mobile adjustments */
    .dashboard-stats {
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .stat-card {
        padding: 15px;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    
    .recent-shipments {
        gap: 8px;
    }
    
    .shipment-item {
        padding: 10px;
    }
    
    .shipment-status {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
    }
    
    .shipment-id {
        font-size: 0.8rem;
    }
    
    .shipment-dest {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 100px 0 60px;
        min-height: 85vh;
    }
    
    .how-it-works, .advantages, .cta-section {
        padding: 80px 0;
    }
    
    .schedule {
        padding: 80px 0;
    }
    
    .app-showcase {
        padding: 50px 0;
    }
    
    .showcase-grid {
        margin-top: 30px;
    }
    
    .showcase-item {
        margin-bottom: 40px;
        gap: 25px;
        grid-template-columns: 1fr !important;
    }
    
    .showcase-item.reverse .showcase-content {
        order: 1;
    }
    
    .showcase-item.reverse .showcase-image {
        order: 2;
    }
    
    .showcase-content {
        padding: 15px 5px;
    }
    
    .feature-badge {
        font-size: 0.8rem;
        padding: 6px 12px;
        margin-bottom: 15px;
    }
    
    .showcase-content h3 {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }
    
    .showcase-content p {
        font-size: 0.95rem;
        margin-bottom: 18px;
    }
    
    .feature-list {
        margin-bottom: 20px;
        max-width: 100%;
    }
    
    .feature-list li {
        padding: 5px 0;
        font-size: 0.85rem;
    }
    
    .feature-btn {
        padding: 10px 20px;
        font-size: 0.85rem;
        width: 100%;
        max-width: 250px;
    }
    
    .app-screenshot {
        max-width: 580px;
        margin: 0 auto;
    }
    
    .screenshot-placeholder {
        font-size: 1rem;
        padding: 30px 15px;
    }
    
    .screenshot-placeholder small {
        font-size: 0.8rem;
    }
}

@media (max-width: 320px) {
    .app-screenshot {
        max-width: 580px;
    }
    
    .showcase-content h3 {
        font-size: 1.2rem;
    }
    
    .showcase-content p {
        font-size: 0.9rem;
    }
    
    .feature-list li {
        font-size: 0.8rem;
    }
    
    .screenshot-placeholder {
        font-size: 0.9rem;
        padding: 25px 12px;
    }
};
    }
}

@media (max-width: 320px) {
    .phone-mockup {
        width: 180px;
        height: 360px;
        padding: 8px 6px;
    }
    
    .mockup-content {
        padding: 8px;
    }
    
    .showcase-content h3 {
        font-size: 1.2rem;
    }
    
    .showcase-content p {
        font-size: 0.9rem;
    }
    
    .feature-list li {
        font-size: 0.8rem;
    }
}