/* =========================================
   RESPONSIVE.CSS - MCM Mohalott Code & Marketing
   ========================================= */

/* -----------------------------------------
   TABLETS Y PANTALLAS MEDIANAS (Hasta 992px)
   ----------------------------------------- */
@media (max-width: 992px) {
    /* Secciones principales de 2 columnas pasan a 1 columna centrado */
    .grid-hero, 
    .grid-products, 
    .grid-products-reverse,
    .grid-about,
    .grid-mv,
    .grid-contact,
    .grid-service-detail
    .grid-contact {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    
    /* Reordenar texto e imagen para mantener jerarquía visual (imagen abajo del texto o viceversa) */
    .grid-products-reverse .product-text,
    .grid-service-detail .text-content { 
        grid-column: 1; 
        grid-row: 1; 
    }
    .grid-products-reverse .product-graphic,
    .grid-service-detail .img-content { 
        grid-column: 1; 
        grid-row: 2; 
    }

    /* Grillas de 4 columnas pasan a 2 columnas */
    .grid-stats, 
    .grid-services,
    .grid-footer,
    .grid-values {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Secciones de 3 columnas pasan a 1 columna (ej. Por qué elegirnos) */
    .grid-features,
    .grid-testimonials {
        grid-template-columns: 1fr;
    }

    /* Ajustes tipográficos y de espaciado generales para Tablet */
    .hero { padding: 120px 0 60px; }
    .hero-text h1 { font-size: 3.2rem; }
    .hero-text p { margin: 0 auto 2rem; max-width: 100%; }
    .hero-btns { justify-content: center; }

    .grid-logos {
            gap: 30px;
        }

    .contact-info-block {
        text-align: center;
        margin-bottom: 20px;
    }

    /* Para que los iconos de contacto no queden raros al centrar */
    .info-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .social-links div {
        justify-content: center;
    }

    .grid-products .product-text,
    .grid-products-reverse .product-text { 
        grid-column: 1; 
        grid-row: 1; 
    }
    
    .grid-products .product-graphic,
    .grid-products-reverse .product-graphic { 
        grid-column: 1; 
        grid-row: 2; 
    }

    /* Alinear las listas de características para que no se vean desordenadas al centrar la pantalla */
    .feature-list {
        display: inline-block;
        text-align: left; /* Mantiene los "checks" alineados a la izquierda entre sí */
        margin: 0 auto 30px;
    }

    /* Pasan a 1 columna y se centran */
    .grid-about,
    .grid-mv {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    /* Los 4 valores pasan a ser una cuadrícula de 2x2 */
    .grid-values {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Centramos los items de "+ Proyectos" e "Innovación" */
    .about-highlights {
        justify-content: center;
    }
    .grid-footer {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* -----------------------------------------
   MÓVILES Y PANTALLAS PEQUEÑAS (Hasta 768px)
   ----------------------------------------- */
@media (max-width: 768px) {
    
    body, html {
        overflow-x: hidden;
    }

    /* --- MENU HAMBURGUESA Y NAVBAR --- */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 1001; /* Siempre por encima del menú desplegado */
    }

    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: var(--text-white);
        transition: var(--transition-suave);
        border-radius: 3px;
    }

    /* Ocultar menú normal y prepararlo para desplegarse tipo cortina */
    .nav-links {
        flex-direction: column;
        position: absolute;
        top: -500px; /* Escondido arriba fuera de pantalla */
        left: 0;
        width: 100%;
        background-color: rgba(0, 8, 26, 0.98); /* Fondo azul oscuro corporativo */
        padding: 30px 20px 40px;
        text-align: center;
        transition: top 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 15px 30px rgba(0,0,0,0.8);
        gap: 1.5rem;
    }

    /* Clase activa que se añadirá desde JS (layout.js) para mostrar el menú */
    .nav-links.active {
        top: 100%; /* Se despliega justo debajo de la barra del header */
    }

    .nav-links a {
        font-size: 1.1rem;
        display: block;
        padding: 10px 0;
        width: 100%;
    }

    .btn-outline {
        display: inline-block;
        margin-top: 15px;
    }

    /* --- AJUSTES DE GRID A 1 SOLA COLUMNA PARA TODO --- */
    .grid-stats, 
    .grid-services,
    .grid-footer,
    .grid-values {
        grid-template-columns: 1fr;
    }

    /* --- TIPOGRAFÍA Y ESPACIADOS PARA MÓVIL --- */
    .section-header h2, h2 { font-size: 2.2rem; }
    .hero-text h1 { 
        font-size: 2.2rem !important; /* Un poco más pequeño para celular */
        line-height: 1.1 !important; /* Renglones más juntitos */
        word-wrap: break-word; /* LA MAGIA: Rompe la palabra si es muy larga */
        overflow-wrap: break-word;
    }

    .hero-text p {
        padding: 0 15px; /* Evita que el párrafo toque el marco del celular */
    }
    
    /* Reducir el padding gigante de escritorio a algo más amigable en celular */
    .hero { padding: 130px 0 50px; }
    .about-stats, .services, .products-featured, .why-us, .main-footer,
    .clients-logos, .testimonials, .cta-section .product-detail .service-detail { 
        padding: 60px 0; 
    }
    
    /* Botones apilados en móvil */
    .hero-btns {
        flex-direction: column;
        gap: 1rem;
    }
    .btn-primary, .btn-secondary {
        width: 100%;
        text-align: center;
    }

    .btn-large {
        width: 100%; /* Que ocupe todo el ancho disponible */
        padding: 1rem; /* Reducimos el padding lateral para que no se asfixie */
        font-size: 1rem; /* Reducimos un poquito la fuente */
        box-sizing: border-box; /* Evita que el padding sume ancho extra */
    }

    /* Ajuste visual para las tarjetas de "Por qué elegirnos" */
    .feature-card {
        border-left: none;
        border-top: 3px solid var(--blue-bright);
        border-radius: 0 0 10px 10px;
        text-align: center;
        padding: 25px 20px;
    }
    
    /* Centrar contenido del Footer */
    .footer-info, .footer-links, .footer-tech, .footer-contact {
        text-align: center;
    }
    
    .tech-tags {
        justify-content: center;
    }
    
    .footer-info p {
        margin: 0 auto;
    }

    .cta-section h2 {
        font-size: 2.2rem !important;
    }
        
    .grid-logos {
        gap: 20px;
        flex-direction: column; /* Apila los logos uno sobre otro en móviles muy pequeños */
        }

    .contact-form-block {
        padding: 30px 20px;
    }

    /* Pequeño ajuste para que los badges no queden pegados si saltan de línea */
    .product-text .badge {
        margin-bottom: 10px;
    }

    /* Reducción estricta de espacios gigantes en móvil */
    .about-story, 
    .mission-vision, 
    .core-values {
        padding: 60px 0 !important; 
    }

    /* Ajuste para el Header de las páginas internas */
    .page-header {
        padding: 120px 0 60px !important;
    }

    /* Los valores pasan a ser de 1 sola columna */
    .grid-values {
        grid-template-columns: 1fr;
    }

    /* Apilamos los datos destacados de la historia uno sobre otro */
    .about-highlights {
        flex-direction: column;
        gap: 20px;
    }

    .grid-service-detail {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 40px;
    }

    /* El footer pasa a 1 sola columna */
    .grid-footer {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Centramos todo el contenido de las 4 secciones */
    .footer-info, 
    .footer-links, 
    .footer-tech, 
    .footer-contact {
        text-align: center;
    }

    /* Aseguramos que el logo se centre correctamente */
    .footer-logo {
        margin: 0 auto 20px auto;
        display: block;
    }

    /* Centramos los botones de las tecnologías (C#, .NET, Blazor...) */
    .tech-tags {
        justify-content: center;
    }

    /* 1. Mostramos la hamburguesa */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 1001; /* Para que siempre quede por encima */
    }

    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: var(--text-white);
        transition: var(--transition-suave);
        border-radius: 3px;
    }

    /* 2. Ocultamos el menú principal y lo preparamos para bajar */
    .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: -500px; /* Escondido arriba */
        left: 0;
        width: 100%;
        background-color: rgba(0, 8, 26, 0.98); /* Fondo azul oscuro de MCM */
        padding: 30px 20px 40px;
        text-align: center;
        transition: top 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        box-shadow: 0 15px 30px rgba(0,0,0,0.8);
        gap: 1.5rem;
    }

    /* 3. Clase que JS añade para desplegar el menú */
    .nav-links.active {
        top: 100%; /* Baja justo debajo de la barra */
    }

    /* 4. Hacemos que los enlaces se vean grandes y tocables */
    .nav-links a {
        font-size: 1.1rem;
        display: block;
        padding: 10px 0;
        width: 100%;
    }

    .testimonial-card {
        flex: 0 0 100%; /* Ocupa todo el ancho en el celular */
    }
    .carousel-controls {
        justify-content: center; /* Centra los botoncitos */
    }

    .whatsapp-float {
        width: 55px;       /* Un poco más pequeño para no estorbar en la pantallita */
        height: 55px;
        bottom: 25px;      /* Más pegado a la esquina inferior */
        right: 25px;
           /* En celular quitamos el latido para ahorrar batería y recursos visuales */
    }
    
    .whatsapp-icon {
        width: 32px;
        height: 32px;
    }
}

/* -----------------------------------------
    ESCRITORIO (A partir de 769px)
   ----------------------------------------- */
/* En pantallas grandes, nos aseguramos de que el botón hamburguesa esté oculto */
@media (min-width: 769px) {
    .menu-toggle { display: none; }
}