/* Estilos adicionales para mejorar la responsividad móvil */

/* Ajustes generales para dispositivos móviles */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    .section {
        padding: 3rem 1rem !important;
    }
    
    .section-title h2 {
        font-size: 1.8rem !important;
    }
    
    .card {
        padding: 1.25rem !important;
    }
    
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .footer-about, .footer-links-container, .footer-contact {
        width: 100% !important;
    }
    
    .contact-container {
        grid-template-columns: 1fr !important;
    }
    
    .portfolio-filter {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .portfolio-filter button {
        margin-bottom: 0.5rem;
    }
    
    .services-grid, .portfolio-grid {
        grid-template-columns: 1fr !important;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-buttons .btn-primary {
        width: 100%;
        margin-left: 0 !important;
    }
}

/* Ajustes para dispositivos muy pequeños */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .btn-primary {
        padding: 0.6rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
    
    .section-title h2 {
        font-size: 1.5rem !important;
    }
    
    .testimonial-author {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .testimonial-avatar {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .implementation-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .step-circle {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .contact-icon {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

/* Ajustes para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-title {
        font-size: 2.8rem !important;
    }
    
    .services-grid, .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Ajustes específicos para los menús - Responsividad mejorada */
/* Menú de escritorio - Solo visible en pantallas grandes */
@media (min-width: 769px) {
    .nav-links {
        display: flex !important;
    }
    
    .mobile-menu-btn {
        display: none !important;
    }
    
    .mobile-menu {
        display: none !important;
    }
}

/* Menú móvil - Solo visible en pantallas pequeñas */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block !important;
    }
    
    .nav-links {
        display: none !important;
    }
    
    .mobile-menu {
        display: none; /* Oculto por defecto, se muestra con JS */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(18, 18, 18, 0.98);
        z-index: 1001;
        flex-direction: column;
        overflow-y: auto;
    }
    
    .mobile-menu.active {
        display: flex !important;
    }
    
    /* Estilos para el nuevo menú móvil */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    }
    
    .mobile-logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .mobile-menu-close {
        background: none;
        border: none;
        color: var(--text-white);
        font-size: 1.5rem;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-close:hover {
        background: rgba(212, 175, 55, 0.1);
    }
    
    .mobile-menu-content {
        padding: 1.5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        overflow-y: auto; /* Permite desplazamiento si el contenido es demasiado largo */
    }
    
    .mobile-menu-section {
        margin-bottom: 1.5rem;
    }
    
    .mobile-menu-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--primary-gold);
        margin-bottom: 1rem;
        position: relative;
        padding-bottom: 0.5rem;
    }
    
    .mobile-menu-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 2px;
        background: var(--primary-gold);
    }
    
    /* Modificación del grid para mejorar la visualización en móviles */
    .mobile-nav-grid {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-decoration: none;
        color: var(--text-white);
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
    }
    
    .mobile-nav-item:hover, .mobile-nav-item.active {
        background: rgba(212, 175, 55, 0.1);
        color: var(--primary-gold);
        transform: translateX(5px);
    }
    
    .mobile-nav-icon {
        font-size: 1.25rem;
        margin-right: 1rem;
        color: var(--primary-gold);
        min-width: 24px;
        text-align: center;
    }
    
    .mobile-contact-info {
        margin-bottom: 1.5rem;
    }
    
    .mobile-contact-item {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        color: var(--text-gray);
    }
    
    .mobile-contact-item i {
        color: var(--primary-gold);
        margin-right: 0.75rem;
        font-size: 1.2rem;
        min-width: 24px;
        text-align: center;
    }
    
    .mobile-social-links {
        display: flex;
        gap: 1rem;
    }
    
    .mobile-social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: var(--text-white);
        transition: all 0.3s ease;
    }
    
    .mobile-social-link:hover {
        background: var(--primary-gold);
        color: var(--dark-bg);
        transform: translateY(-3px);
    }
}

/* Ajustes específicos para pantallas muy pequeñas */
@media (max-width: 360px) {
    .mobile-menu-content {
        padding: 1rem;
    }
    
    .mobile-nav-item {
        padding: 0.6rem 0.8rem;
    }
    
    .mobile-nav-icon {
        font-size: 1.1rem;
        margin-right: 0.75rem;
    }
    
    .mobile-menu-title {
        font-size: 1.1rem;
    }
}

/* Ajustes para el formulario de contacto en móvil */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        padding: 0.6rem !important;
        font-size: 0.9rem !important;
    }
}

/* Ajustes para las tarjetas de equipo en móvil */
@media (max-width: 768px) {
    .team-member-card {
        margin-bottom: 2rem !important;
    }
    
    .team-member-card img {
        height: 200px !important;
    }
}

/* Ajustes para las estadísticas en móvil */
@media (max-width: 768px) {
    .stats-section .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .stats-section .text-4xl {
        font-size: 1.8rem !important;
    }
}

/* Ajustes para el proceso en móvil */
@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Ajustes para el portafolio en móvil */
@media (max-width: 768px) {
    .portfolio-item {
        height: auto !important;
    }
    
    .portfolio-image {
        height: 200px !important;
    }
}

/* Ajustes para el preloader en móvil */
@media (max-width: 768px) {
    .preloader .loader i {
        font-size: 3rem !important;
    }
}

/* Ajustes para el scroll to top button en móvil */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* Mejoras de accesibilidad para dispositivos táctiles */
@media (max-width: 1024px) {
    .btn-primary, 
    .nav-links a, 
    .portfolio-filter button,
    .social-link,
    .footer-links a {
        padding: 0.75rem !important;
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    input, 
    textarea, 
    select, 
    button {
        font-size: 16px !important; /* Evita zoom en iOS */
    }
}

/* Ajustes para orientación horizontal en móviles */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        height: auto !important;
        min-height: 100vh !important;
        padding: 6rem 2rem !important;
    }
    
    .mobile-menu {
        overflow-y: auto !important;
    }
    
    .mobile-nav-grid {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }
    
    .mobile-nav-item {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

/* Ajustes para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .pattern {
        background-size: 15px 15px, 45px 45px !important;
    }
}

/* Ajustes para pantallas grandes */
@media (min-width: 1440px) {
    .container, .navbar, .content {
        max-width: 1400px !important;
    }
    
    .hero-title {
        font-size: 4rem !important;
    }
    
    .section {
        padding: 8rem 2rem !important;
    }
}

/* Ajustes para modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
    .card {
        background: rgba(0, 0, 0, 0.6) !important;
    }
}

/* Ajustes para preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}



/* Estilos para el contenedor del logo y botón móvil */
@media (max-width: 768px) {
    .navbar {
        /* Ajustar alineación si es necesario */
        align-items: flex-start; /* Alinear items al inicio verticalmente */
        padding-top: 0.5rem; /* Añadir un poco de espacio superior */
        padding-bottom: 0.5rem; /* Añadir un poco de espacio inferior */
    }

    .navbar-left {
        display: flex;
        flex-direction: column; /* Apilar logo y botón */
        align-items: flex-start; /* Alinear a la izquierda */
    }

    .logo {
        margin-bottom: 0.5rem; /* Espacio entre logo y botón */
    }

    .mobile-menu-btn {
        display: block !important; /* Asegurar visibilidad en móvil */
        margin-left: 0; /* Resetear margen si existe */
        /* El botón ya está dentro del flujo normal, no necesita position: static explícito */
        /* Ajustar tamaño o padding si es necesario */
        padding: 0.25rem 0; /* Ajustar padding vertical */
        font-size: 1.4rem; /* Ajustar tamaño del icono si es necesario */
    }

    .nav-links {
        display: none !important; /* Ocultar links de escritorio */
        margin-top: 0.5rem; /* Ajustar margen superior si es necesario para alinear con el botón */
    }
}

/* Asegurar que en escritorio el layout no se rompa */
@media (min-width: 769px) {
    .navbar-left {
        /* Por defecto, debería funcionar con el flex del navbar, pero podemos asegurarlo */
        display: flex;
        flex-direction: row; /* Dirección horizontal en escritorio */
        align-items: center; /* Alinear verticalmente al centro */
    }

    .mobile-menu-btn {
        display: none !important; /* Ocultar botón en escritorio */
    }

    .nav-links {
        display: flex !important; /* Mostrar links en escritorio */
    }
}



/* Solución para desbordamiento en footer en móvil */
@media (max-width: 768px) {
    .footer {
        overflow-x: hidden; /* Evita que el contenido interno desborde horizontalmente */
    }
}



/* Additional style for mobile menu button scroll behavior */
@media (max-width: 768px) {
    .header .navbar .navbar-left .mobile-menu-btn.hidden-on-scroll {
        display: none !important;
    }
}