/* =====================================================
   DEVELOPERS - Responsive Design
   Media Queries para todos los dispositivos
   ===================================================== */

/* ===== TABLET (hasta 1024px) ===== */
@media (max-width: 1024px) {
    .section-title {
        font-size: 36px;
    }
    
    .hero-title {
        font-size: 48px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
    
    .navbar-menu {
        gap: 25px;
    }
}

/* ===== TABLET PEQUEÑO (hasta 768px) ===== */
@media (max-width: 768px) {
    /* Navbar Mobile */
    .navbar-toggle {
        display: block;
    }
    
    .navbar-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--white);
        flex-direction: column;
        padding: 40px 20px;
        gap: 0;
        box-shadow: var(--shadow-lg);
        transition: var(--transition-normal);
        overflow-y: auto;
    }
    
    .navbar-menu.active {
        left: 0;
    }
    
    .navbar-link {
        width: 100%;
        padding: 20px 15px;
        font-size: 18px;
        border-bottom: 1px solid var(--gray-lighter);
    }
    
    .navbar-link::after {
        display: none;
    }
    
    /* Hero Section */
    .hero {
        padding: 120px 0 80px;
    }
    
    .hero-title {
        font-size: 38px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .hero-description {
        font-size: 16px;
    }
    
    .hero-logo {
        max-width: 220px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Sections */
    .section {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 32px;
    }
    
    .section-subtitle {
        font-size: 18px;
        margin-bottom: 40px;
    }
    
    /* Productos Grid */
    .productos-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .producto-card {
        padding: 35px 25px;
    }
    
    .producto-logo {
        width: 140px;
        height: 140px;
    }
    
    .producto-nombre {
        font-size: 26px;
    }
    
    /* Features Grid */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    
    .footer {
        padding: 50px 0 25px;
    }
}

/* ===== MÓVIL (hasta 576px) ===== */
@media (max-width: 576px) {
    /* Typography */
    html {
        font-size: 14px;
    }
    
    /* Navbar */
    .navbar-logo img {
        height: 40px;
    }
    
    .navbar-logo-text {
        font-size: 22px;
    }
    
    .navbar-container {
        padding: 12px 15px;
    }
    
    /* Hero */
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero-title {
        font-size: 32px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .hero-description {
        font-size: 15px;
    }
    
    .hero-logo {
        max-width: 180px;
    }
    
    /* Sections */
    .section {
        padding: 50px 0;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-subtitle {
        font-size: 16px;
    }
    
    /* Container */
    .container,
    .container-wide {
        padding: 0 15px;
    }
    
    /* Productos */
    .producto-card {
        padding: 30px 20px;
    }
    
    .producto-logo {
        width: 120px;
        height: 120px;
        margin-bottom: 25px;
    }
    
    .producto-nombre {
        font-size: 24px;
    }
    
    .producto-descripcion {
        font-size: 15px;
    }
    
    /* Buttons */
    .btn {
        padding: 12px 28px;
        font-size: 15px;
    }
    
    /* Features */
    .feature-card {
        padding: 30px 20px;
    }
    
    .feature-icon {
        font-size: 40px;
    }
    
    .feature-title {
        font-size: 18px;
    }
    
    /* Footer */
    .footer {
        padding: 40px 0 20px;
    }
    
    .footer-section h3 {
        font-size: 18px;
    }
    
    .footer-section p,
    .footer-section a {
        font-size: 14px;
    }
    
    .footer-logo {
        max-width: 150px;
    }
}

/* ===== MÓVIL PEQUEÑO (hasta 400px) ===== */
@media (max-width: 400px) {
    .hero-title {
        font-size: 28px;
    }
    
    .section-title {
        font-size: 24px;
    }
    
    .producto-nombre {
        font-size: 22px;
    }
    
    .navbar-logo-text {
        display: none;
    }
}

/* ===== LANDSCAPE MÓVIL ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 100px 0 50px;
    }
    
    .navbar-menu {
        height: calc(100vh - 70px);
        padding: 20px;
    }
}

/* ===== PRINT ===== */
@media print {
    .navbar,
    .footer,
    .btn {
        display: none;
    }
    
    .hero {
        padding: 40px 0;
    }
    
    .section {
        padding: 30px 0;
        page-break-inside: avoid;
    }
}