/* ===================================
   RESPONSIVE DESIGN - SILVENZA WEB
   Mobile-First Approach
   =================================== */

/* ===== UTILITIES ===== */
.hide-mobile { display: block; }
.show-mobile { display: none; }

/* ===== TABLET (max-width: 992px) ===== */
@media (max-width: 992px) {
    /* Grids to 2 columns */
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Contacto page */
    .contacto-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Services grid */
    #servicesWeb {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Hero sections */
    .hero-container {
        padding: 40px 3rem !important;
    }
    
    .hero-title {
        font-size: 3.5rem !important;
    }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media (max-width: 768px) {
    /* All grids to single column */
    [style*="grid-template-columns"],
    [style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Typography */
    h1, .hero-title {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.8rem !important;
    }
    
    h3 {
        font-size: 1.3rem !important;
    }
    
    /* Containers */
    .container {
        padding: 0 1.5rem !important;
    }
    
    /* Sections padding */
    section[style*="padding"] {
        padding: 40px 0 !important;
    }
    
    /* Hero */
    .hero-container {
        padding: 30px 2rem !important;
        text-align: center !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-description {
        font-size: 0.95rem !important;
    }
    
    .hero-cta-group {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .hero-cta-primary,
    .hero-cta-secondary {
        width: 100%;
        justify-content: center !important;
    }
    
    /* Contacto */
    .contacto-hero-title {
        font-size: 1.8rem !important;
    }
    
    .contacto-hero-desc {
        font-size: 0.9rem !important;
    }
    
    .form-grid-2col {
        grid-template-columns: 1fr !important;
    }
    
    .calendly-card {
        padding: 1.2rem !important;
    }
    
    .form-card {
        padding: 1.5rem !important;
    }
    
    /* Services */
    #servicesWeb {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .service-node[style*="transform"] {
        transform: none !important;
    }
    
    .service-node[style*="grid-column"] {
        grid-column: 1 !important;
    }
    
    /* Valor section */
    .valor-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Testimonials */
    .testimonios-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Navigation */
    .main-nav ul {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    /* Buttons */
    .btn, button[style*="padding"] {
        padding: 0.9rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Cards */
    [style*="border-radius: 24px"] {
        border-radius: 16px !important;
    }
    
    [style*="padding: 2.5rem"],
    [style*="padding: 3rem"] {
        padding: 1.5rem !important;
    }
    
    /* Hide desktop elements */
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
}

/* ===== SMALL MOBILE (max-width: 576px) ===== */
@media (max-width: 576px) {
    /* Typography */
    .hero-title,
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.4rem !important;
    }
    
    .contacto-hero-title {
        font-size: 1.5rem !important;
    }
    
    /* Containers */
    .container {
        padding: 0 1rem !important;
    }
    
    /* Sections */
    .contacto-section,
    section[style*="padding"] {
        padding: 30px 0 !important;
    }
    
    /* Cards */
    [style*="padding: 2rem"] {
        padding: 1.2rem !important;
    }
    
    /* Buttons */
    .btn,
    button {
        padding: 0.8rem 1.2rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Icons */
    [style*="font-size: 1.8rem"],
    [style*="font-size: 2rem"] {
        font-size: 1.3rem !important;
    }
    
    /* Gaps */
    [style*="gap: 2rem"],
    [style*="gap: 3rem"] {
        gap: 1rem !important;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto !important;
        padding: 30px 0 !important;
    }
    
    .hero-container {
        padding: 20px 2rem !important;
    }
}

/* ===== PRINT ===== */
@media print {
    .main-header,
    .main-nav,
    .back-to-top,
    .calendly-card,
    button[type="submit"] {
        display: none !important;
    }
    
    body {
        font-size: 12pt !important;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}