/* ======================
   RESPONSIVE DESIGN
   ====================== */
   
/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .container-nosotros {
        padding: 100px 0 !important;
    }
}

/* Desktop (992px - 1199px) */
@media (max-width: 1199px) {
    .container-nosotros {
        padding: 80px 0 !important;
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .container-nosotros {
        padding: 60px 0 !important;
    }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) {
    .container-nosotros {
        padding: 50px 0 !important;
    }
}

/* Mobile Portrait (< 576px) */
@media (max-width: 575px) {
    .container-nosotros {
        padding: 40px 0 !important;
    }
}

/* Very Small Devices (< 400px) */
@media (max-width: 399px) {
    .container-nosotros {
        padding: 30px 0 !important;
    }
}


/* Tablets y pantallas medianas */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-stats {
        gap: 2rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .about-badge {
        right: 0;
        bottom: -10px;
        padding: 1.5rem;
    }

    .about-badge h3 {
        font-size: 2rem;
    }

    .plan-card.featured {
        transform: scale(1);
    }

    .floating-card.card-2 {
        left: 5%;
    }

    .tech-card-1,
    .tech-card-2 {
        position: static;
        margin: 1rem 0;
    }

    .footer-bottom-links {
        justify-content: center;
        margin-top: 1rem;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .navbar-brand .logo {
        height: 35px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-features {
        gap: 1rem;
    }

    .feature-item {
        width: 100%;
    }

    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .hero-stats {
        gap: 1.5rem;
        justify-content: space-around;
    }

    .stat-number {
        font-size: 1.75rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    .floating-card {
        padding: 0.75rem 1rem;
    }

    .floating-card span {
        font-size: 0.85rem;
    }

    .floating-card.card-1 {
        top: 5%;
        right: 5%;
    }

    .floating-card.card-3 {
        bottom: 5%;
        right: 5%;
    }

    section {
        padding: 4rem 0;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .about-badge {
        position: static;
        margin-top: 1rem;
        display: inline-block;
    }

    .service-card {
        padding: 2rem;
    }

    .speed-number {
        font-size: 3rem;
    }

    .speed-unit {
        font-size: 1.25rem;
    }

    .popular-badge {
        top: -10px;
        right: 10px;
        padding: 0.4rem 1rem;
        font-size: 0.75rem;
    }

    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .scroll-to-top {
        bottom: 80px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }

    .contact-form-card,
    .contact-info-card {
        padding: 2rem;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Móviles pequeños */
@media (max-width: 576px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .badge-tech {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .hero-features {
        flex-direction: column;
    }

    .hero-stats {
        flex-direction: column;
        gap: 2rem;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
    }

    .btn {
        padding: 0.65rem 1.5rem;
        font-size: 0.9rem;
    }

    .plan-card,
    .service-card,
    .contact-form-card,
    .contact-info-card {
        padding: 1.5rem;
    }
}

/* Landscape móviles */
@media (max-width: 992px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 4rem 0;
    }

    .scroll-indicator {
        display: none;
    }
}