/* 1. Definición de fuentes locales */
@font-face { font-family: 'Roboto'; src: url('fonts/roboto-v51-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('fonts/roboto-v51-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('fonts/roboto-v51-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('fonts/roboto-v51-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; }

/* 2. Variables */
:root {
    --bg-color: #F3F8FB;
    --accent-color: #075AAE;
    --text-color: #333333;
    --font-main: 'Roboto', sans-serif;
}



/* 3. Estilos base */
body { background-color: #ffffff; font-family: var(--font-main); font-size: 28px; color: var(--text-color); margin: 0; }
.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 4. Estilos de Header */
.header { background-color: #ffffff; padding: 20px 0; position: relative; }
.header-wrapper { display: flex; justify-content: space-between; align-items: center; }
.menu-toggle { display: block; background: none; border: none; font-size: 30px; cursor: pointer; color: var(--accent-color); }
.nav-menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; z-index: 1000; flex-direction: column; justify-content: center; align-items: center; }
.menu-close { background: none; border: none; font-size: 40px; position: absolute; top: 20px; right: 20px; cursor: pointer; }
.nav-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 30px; text-align: center; }
.nav-links a { text-decoration: none; color: #333333; font-weight: 500; font-size: 1rem; }

.logo {
    max-width: 200px; /* Tamaño ideal para escritorio */
    height: auto;
    display: block;
}

/* Ajuste para móviles */
@media (max-width: 767px) {
    .logo {
        max-width: 120px; /* Un poco más compacto en móvil */
    }
}





/* 5. Secciones index */
.hero {
    background-image: linear-gradient(rgba(7, 90, 174, 0.7), rgba(7, 90, 174, 0.7)), 
                      url('assets/banners/index/desarrollar-e-innovar-servicios-de-tecnologia-en-america.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 160px 20px;
    color: #ffffff;
}

.hero .contenedor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

h1 { 
    font-size: 4rem; 
    color: #ffffff; 
    margin: 0; 
    text-align: left; 
    font-weight: 400; 
    letter-spacing: 1px; 
    line-height: 1.1; 
}

.subtitulo { 
    font-size: 1.875rem; 
    margin-top: 1rem; 
    color: #ffffff; 
    text-align: left; 
    font-weight: 300; 
    letter-spacing: 0.5px; 
}


/* Hero para la página de Servicios */
.hero-servicios {
    background-image: linear-gradient(rgba(7, 90, 174, 0.7), rgba(7, 90, 174, 0.7)), 
                      url('assets/banners/servicios/servicio-1536x400.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 160px 20px;
    color: #ffffff;
}

/* Hero para la página de Nosotros */
.hero-nosotros {
    background-image: linear-gradient(rgba(7, 90, 174, 0.7), rgba(7, 90, 174, 0.7)), 
                      url('assets/banners/nosotros/nosotros-1536x400.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 160px 20px;
    color: #ffffff;
}


/* ==================================================
    PÁGINA: INICIO
   ================================================== */

/* Estilos para la sección de países index */
.seccion-paises {
    padding: 60px 20px;
    background-color: #ffffff;
    text-align: center;
}

.seccion-paises h2 {
    font-size: 2rem;
    color: #333333;
    margin-bottom: 40px;
    font-weight: 400;
}

.grid-paises {
    display: grid;
    /* Esto crea columnas automáticas que se ajustan al espacio */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 25px;
    max-width: 1000px; /* Centra el contenido y evita que se estire demasiado */
    margin: 0 auto;
}

.pais-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pais-item img {
    width: 65px; /* Tamaño visualmente equilibrado */
    height: 65px;
    object-fit: cover;
    border-radius: 50%; /* Círculo para un toque moderno */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra muy sutil, como en WordPress */
}

.pais-item p {
    font-size: 0.85rem;
    color: #555;
    margin: 0;
}

/* Estilos Sección Metodología index */
.seccion-metodologia { padding: 80px 20px 160px 20px; background-color: #f9f9f9; }

.seccion-metodologia h2 { text-align: center; font-weight: 300; font-size: 2.5rem; color: #333; margin-bottom: 50px; }

.grid-metodologia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.tarjeta-metodologia {
    background-color: #075AAE !important; /* Tu azul corporativo */ 
    color: #ffffff;
    padding: 80px 20px 40px 20px;
    text-align: center;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
}

.tarjeta-metodologia h3 { color: #ffffff; font-size: 1.7rem; font-weight: 300; margin-bottom: 20px; line-height: 1.2; }

.btn-metodologia {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    align-self: center;
}

 /* estilos Servicios index*/

 /* Añadimos aire entre Metodología y Servicios */
.seccion-servicios { 
     /* Esto empuja la sección de abajo hacia abajo */
    padding: 80px 20px; 
    background-color: #f4f8fb; 
}

 .grid-tres-columnas {
    display: grid;
    grid-template-columns: 1.2fr 0.6fr 1.8fr; /* Tres columnas iguales */
    gap: 20px;
    align-items: start; /* Alinea los bloques arriba */
}

/* Títulos */
.col-servicios h2 { font-size: 2.5rem; font-weight: 300; margin-bottom: 20px; }
.col-exito h3 { font-size: 1.5rem; font-weight: 400; margin-bottom: 20px; }

/* Imagen engranes */
.col-imagen img { width: 100%; max-width: 120px; margin: 20px auto; display: block; opacity: 0.2; }

/* Lista */
.lista-exito { list-style: none; padding: 0; }
.lista-exito li { margin-bottom: 15px; padding-left: 20px; position: relative; font-size: 1.2rem; }
.lista-exito li::before { content: "✓"; position: absolute; left: 0; color: #075AAE; }

/* Botones */
.btn-azul { background: #075AAE; color: white; border: none; padding: 10px 25px; cursor: pointer; }

.btn-azul-enlace {
    display: inline-block;
    background-color: #075aae; /* Tu azul corporativo */
    color: #ffffff;
    padding: 5px 10px;
    font-size: 1rem;
    font-weight: 300;
    border: none;
    text-decoration: none; /* Quita el subrayado */
    border-radius: 4px;
    text-align: center;
    transition: 0.3s;
}

.btn-azul-enlace:hover {
    background-color: #05488c; /* Un tono un poco más oscuro al pasar el mouse */
    color: #ffffff;
}

/* seccion testimonios */

.seccion-testimonios {
    padding: 100px 20px;
    /* Degradado corregido: de transparente (izquierda) a azul sólido (derecha) */
    background-image: linear-gradient(to right, rgba(7, 90, 174, 0) 0%, rgba(7, 90, 174, 0.9) 80%), url('assets/content/testimonials-free-img.jpg');
    background-size: 140%;
    background-position: 20% center;
    background-repeat: no-repeat; /* ESTO EVITA LA DUPLICACIÓN */
    color: white;
}

/* 2. Contenedor flex para alinear a la derecha */
.grid-testimonios {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 400px;
}

/* 3. Contenedor del texto */
.contenido-testimonio {
    width: 50%;
    padding-left: 20px;
}

/* 4. Estilos de texto (Título y Cuerpo) */
.contenido-testimonio h2 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.contenido-testimonio p {
    font-size: 1.2rem;
    line-height: 1.7;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

/* seccion clientes */

.seccion-clientes { padding: 80px 20px; background-color: #ffffff; text-align: center; }

.seccion-clientes h2 { 
    font-size: 2.2rem; 
    font-weight: 300; 
    margin-bottom: 50px; 
    color: #333; 
}

.grid-logos {
    display: flex;
    flex-wrap: wrap;       /* Permite que los logos bajen de renglón */
    justify-content: center; /* Centra el conjunto de logos */
    align-items: center;
    gap: 40px;             /* Espacio uniforme entre logos */
}

.grid-logos img {
    max-width: 140px;      /* Tamaño controlado para que no se vean gigantes */
    height: auto;
    filter: grayscale(100%); /* Opcional: para que se vean más sobrios */
    opacity: 0.6;          /* Sutiles por defecto */
    transition: 0.3s;
}

/* Efecto al pasar el mouse (hover) */
.grid-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}


/* seccion proyectos index */

.seccion-proyectos { padding: 100px 20px; background-color: #ffffff; }

.grid-proyectos {
    display: grid;
    grid-template-columns: 1fr 1fr; /* División equitativa */
    gap: 60px; /* Aire generoso entre el texto y la imagen */
    align-items: center;
}

.contenido-proyectos h2 { font-size: 2.5rem; font-weight: 300; margin-bottom: 20px; line-height: 1.2; }
.contenido-proyectos h3 { font-size: 1.5rem; font-weight: 400; margin-bottom: 20px; color: #333333; }
.contenido-proyectos p { font-size: 1.1rem; line-height: 1.6; color: #555; margin-bottom: 30px; }

.imagen-proyectos {
    display: flex;
    justify-content: center; /* Centra la imagen horizontalmente en su columna */
    align-items: center;
}
.imagen-proyectos img {
    width: 60%;
    border-radius: 8px; /* Un toque suave en las esquinas para modernizar */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Sombra elegante para dar profundidad */
}

.btn-azul {
    padding: 10px 25px;       /* Ajusta si quieres que el botón sea más pequeño */
    font-size: 0.9rem;        /* Cambia este valor a 0.8rem o 0.9rem para que se vea más chico */
    text-transform: uppercase; /* Opcional: si quieres que sea en mayúsculas */
    display: inline-block;
    background-color: #075aae;
    color: white;
    text-decoration: none;
    border-radius: 4px;
}

/* footer index */
/* Bloque azul de impacto */
.footer-cta {
    background-color: #075aae; /* Tu azul corporativo */
    color: white;
    padding: 80px 20px;
    text-align: center;
}

.linea-separadora {
    width: 50px;
    height: 2px;
    background-color: white;
    margin: 0 auto 20px auto;
}

.footer-cta h2 {
    font-size: 2rem;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
}

/* Franja final */
.footer-bottom {
    background-color: #f9f9f9;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #666;
}



/* ==================================================
    PÁGINA: SERVICIOS
   ================================================== */


.banner-servicios {
    height: 400px; /* Ajusta la altura según la proporción que desees */
    background-image: linear-gradient(to right, rgba(7, 90, 174, 0.9), rgba(7, 90, 174, 0.4)), url('assets/banners/servicios/hero-small-free-img-1024x267.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: white;
}

.banner-servicios h1 {
    font-size: 3.5rem;
    font-weight: 300;
    margin-left: 10%; /* Para alinear con el estilo de tus otras secciones */
}

/* Responsivo para móviles */
@media (max-width: 767px) {
    .banner-servicios { height: 250px; justify-content: center; }
    .banner-servicios h1 { font-size: 2.5rem; margin-left: 0; text-align: center; }
}

/* 1er sccion */

/* Estilos Globales */
.seccion-servicios-infra {
    padding: 80px 20px;
    background-color: #f0f4f8; /* Azul muy claro para las columnas */
}

.titulo-seccion {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #333;
}

/* Grid de 3 columnas para escritorio */
.grid-tres-columnas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.lista-servicios {
    list-style: none; /* Quitamos los puntos de la lista */
    padding: 0;
}

.lista-servicios li {
    padding-left: 25px;
    margin-bottom: 15px;
    position: relative;
    font-size: 1rem;
    line-height: 1.4;
    color: #444;
}

/* Agregamos el "check" personalizado */
.lista-servicios li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #075aae; /* Tu azul corporativo */
    font-weight: bold;
}

/* segunda seccion SERVICIOS */

.seccion-servicios-consultoria {
    padding: 100px 20px; /* Amplitud arriba y abajo */
    background-color: #ffffff; /* Fondo blanco */
}

.titulo-seccion-consultoria {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px; /* Espacio generoso debajo del título */
    color: #333;
    font-weight: 300;
}

.lista-consultoria {
    list-style: none;
    padding: 0;
    max-width: 800px; /* Limitamos el ancho para que el texto sea legible */
    margin: 0 auto;   /* Centramos la lista */
}

.lista-consultoria li {
    padding-left: 30px;
    margin-bottom: 20px; /* Espacio entre cada ítem para mayor amplitud */
    position: relative;
    font-size: 1.1rem;
    color: #444;
}

/* El check corporativo */
.lista-consultoria li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #075aae;
    font-weight: bold;
}

/* tercera seccion servicios */

.seccion-mesas-ayuda {
    padding: 80px 20px;
    background-color: #f0f4f8; /* Fondo azul */
}

.titulo-mesas-ayuda {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 50px;
    color: #333;
    font-weight: 300;
}

.lista-mesas-ayuda {
    list-style: none;
    padding: 0;
    max-width: 800px; /* Un poco más angosta para centrar la atención */
    margin: 0 auto;
}

.lista-mesas-ayuda li {
    padding-left: 30px;
    margin-bottom: 15px;
    position: relative;
    font-size: 1rem;
    color: #444;
}

/* El check corporativo */
.lista-mesas-ayuda li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #075aae; /* Tu azul corporativo */
    font-weight: bold;
}

/* cuarta seccion servicios */

.seccion-contratacion {
    padding: 100px 20px; /* Amplitud generosa arriba y abajo */
    background-color: #ffffff; /* Fondo blanco */
}

.titulo-seccion {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 60px;
    color: #333;
    font-weight: 300;
}

/* Grid de 3 columnas para escritorio */
.grid-tres-columnas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.lista-servicios {
    list-style: none;
    padding: 0;
}

.lista-servicios li {
    padding-left: 30px;
    margin-bottom: 15px;
    position: relative;
    font-size: 1rem;
    color: #444;
}

.lista-servicios li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #075aae; /* Azul corporativo */
    font-weight: bold;
}



/* quinta y 6ta seccion SERVICIOS * /

/* Sección de Impresión (Fondo Azul) */
.seccion-impresion {
    padding: 100px 20px;
    background-color: #f0f4f8; /* Mismo azul claro que usamos anteriormente */
}

/* Sección Admin Delegada (Fondo Blanco) */
.seccion-admin-delegada {
    padding: 100px 20px;
    background-color: #ffffff;
}

/* Ajustes de Grid para las nuevas secciones */
.grid-dos-columnas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}


/* seccion 7 de SERVICIOS */

.seccion-modelo-sap {
    padding: 100px 20px;
    background-color: #ffffff; /* Fondo blanco */
}

.contenedor-imagen {
    text-align: center;
    margin-top: 40px;
}

.img-modelo-sap {
    max-width: 90%;    /* La imagen ocupará hasta el 90% del ancho disponible */
    height: auto;      /* Mantiene la proporción original */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave para darle relieve */
}



/* seccion 8 SERVICIOS */


.seccion-fabrica-software {
    padding: 80px 20px;
    background-color: #ffffff; /* Fondo blanco */
}

.lista-fabrica {
    list-style: none;
    padding: 0;
    max-width: 400px; /* Lista centrada y compacta */
    margin: 0 auto 40px auto;
}

.lista-fabrica li {
    padding-left: 30px;
    margin-bottom: 10px;
    position: relative;
    font-size: 1.1rem;
    color: #444;
}

.lista-fabrica li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #075aae;
    font-weight: bold;
}

.img-fabrica {
    max-width: 100%; /* La imagen se ajustará al contenedor */
    height: auto;
    display: block;
    margin: 0 auto;
}



/* seccion 9 SERVICIOS */


.seccion-proyectos {
    padding: 100px 20px;
    background-color: #f0f4f8; /* Fondo azul claro corporativo */
}

/* El grid de tres columnas se mantiene igual que en secciones anteriores */
.grid-tres-columnas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}


/* seccion 10 SERVICIOS */

.seccion-microsoft {
    padding: 100px 20px;
    background-color: #ffffff; /* Fondo blanco */
}

/* Reutilizamos la clase grid-dos-columnas definida anteriormente */
.grid-dos-columnas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}



/* seccion 11 y 12 SERVICIOS */

/* Sección Linux (Azul) */
.seccion-linux {
    padding: 80px 20px;
    background-color: #f0f4f8;
}

/* Sección Plantas (Blanco) */
.seccion-plantas {
    padding: 80px 20px;
    background-color: #ffffff;
}

/* Estilo para listas pequeñas centradas */
.lista-centrada {
    max-width: 400px;
    margin: 0 auto;
    text-align: left; /* Mantenemos consistencia con el alineado a la izquierda */
}

/* seccion 13 SERVICIOS */

.seccion-hpe {
    padding: 100px 20px;
    background-color: #f0f4f8; /* Fondo azul claro corporativo */
}

/* seccion 14 SERVICIOS */

.seccion-cctv {
    padding: 80px 20px;
    background-color: #ffffff; /* Fondo blanco */
}

.galeria-imagenes {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Esto permite que se acomoden en varias filas si es necesario */
    margin-top: 40px;
}

.galeria-imagenes img {
    border-radius: 4px;
    object-fit: cover;
}





/* ==================================================
    PÁGINA: NOSOTROS
   ================================================== */

.seccion-mision {
    padding: 100px 20px;
    background-color: #ffffff; /* Fondo blanco */
}

.bloque-mision {
    max-width: 800px;
    margin: 0 auto 60px auto; /* Espacio generoso entre los dos bloques de misión */
}

.titulo-seccion {
    text-align: center;
    font-size: 2.5rem; /* Tamaño homogéneo de títulos */
    margin-bottom: 20px;
    color: #333;
    font-weight: 300;
}

.texto-mision {
    text-align: center;
    font-size: 1.1rem; /* Tamaño homogéneo de párrafos */
    line-height: 1.6;
    color: #444;
}


/* 2 seccion nosotros */

.seccion-casos-exito {
    padding: 100px 20px;
    background-color: #f0f4f8; /* Azul claro para contrastar con las tarjetas blancas */
}

.grid-tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 50px auto 0 auto;
}

.tarjeta {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.icono-comillas {
    font-size: 3rem;
    color: #075aae; /* Azul corporativo */
    display: block;
    margin-bottom: 20px;
}

.tarjeta p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.tarjeta h3 {
    font-size: 1.4rem;
    color: #333;
}

.tarjeta p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #333 !important; /* Forzamos el color gris oscuro */
    display: block !important; /* Aseguramos que sea visible */
    visibility: visible !important; /* Aseguramos que sea visible */
}

/* 3 seccion nosotros */

.seccion-contacto-innovacion {
    padding: 100px 20px;
    background-color: #ffffff;
}

.titulo-principal {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 80px;
    color: #333;
    font-weight: 300;
}

.grid-dos-partes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

/* Columna Azul */
.col-azul {
    background-color: #075aae; /* Tu azul corporativo */
    color: #ffffff;
    padding: 60px;
    border-radius: 4px;
}

.col-azul h3 {
    font-size: 2rem;
    margin: 20px 0;
    font-weight: 300;
}

/* Botón */
.boton-escribenos {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.9rem;  /* Añadido para que el texto sea un poco más pequeño también */
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
}

.boton-escribenos:hover {
    background-color: #ffffff;
    color: #075aae;
}

/* Líneas decorativas */
.linea-decorativa { width: 50px; border: 1px solid #ccc; margin-bottom: 20px; }
.linea-decorativa-blanca { width: 50px; border: 1px solid #ffffff; margin-bottom: 20px; }



/* ==================================================
    6. Media Query Escritorio Index
   ================================================== */

/* 6. Media Query Escritorio */

@media (min-width: 768px) {
    .menu-toggle, .menu-close { display: none; }
    .nav-menu { display: block !important; position: static; height: auto; width: auto; background: none; }
    .nav-links { flex-direction: row; gap: 20px; }
}

/* Ajuste para dispositivos móviles  servicios */
@media (max-width: 767px) {
    .grid-tres-columnas {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 40px; /* Más espacio entre bloques para que no se peguen */
        text-align: center; /* Centramos el texto para mejor lectura en vertical */
    }

    /* Ocultamos la imagen de engranes en móvil si quieres minimalismo total,
       o la hacemos más pequeña y centrada */
    .col-imagen img {
        max-width: 80px; 
        margin: 20px auto;
    }

    /* Ajuste de botones para que ocupen buen espacio en móvil */
    .btn-azul {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    /* Alinear la lista a la izquierda para que se vea ordenada */
    .lista-exito {
        text-align: left;
    }
}

/* seccion testimonios */

@media (max-width: 767px) {
    .seccion-testimonios {
        /* Altura mínima para que la imagen no se comprima */
        min-height: 600px; 
        
        /* Ajustamos la posición para que la silla (a la izq en la original) 
           quede visible en el centro al encuadrar */
        background-position: center top; 
        background-size: cover;
        
        /* Degradado más Aclarado para móvil (0.5 en lugar de 0.7) 
           para que la imagen se vea detrás del texto blanco */
        background-image: linear-gradient(to bottom, rgba(7, 90, 174, 1), rgba(7, 90, 174, 0.8)), url('assets/content/testimonials-free-img.jpg');
    }

    .grid-testimonios {
        display: flex;
        justify-content: center; 
        align-items: center;
        text-align: center;
        /* Aseguramos que el contenedor flex ocupe toda la altura */
        min-height: 600px; 
    }

    .contenido-testimonio {
        width: 100%; 
        padding: 0 20px;
    }
}

/* proyectos index */

/* Responsivo para móviles */
@media (max-width: 767px) {
    .grid-proyectos { 
        grid-template-columns: 1fr; 
        text-align: center; 
        padding-left: 15px; 
        padding-right: 15px; 
    }
    
    .contenido-proyectos { order: 1; } 
    .imagen-proyectos { order: 2; }    

    /* --- ¡AQUÍ ES DONDE DEBE ESTAR! --- */
    .contenido-proyectos h2 { 
        font-size: 1.8rem !important; 
        line-height: 1.1; 
    }

    .imagen-proyectos img {
        width: 90%;
    }
}

/* ==================================================
    6. Media Query Escritorio Servicios
   ================================================== */

/* Responsivo para móvil */
@media (max-width: 767px) {
    .grid-tres-columnas {
        grid-template-columns: 1fr; /* Cambia a una sola columna */
    }
    .titulo-seccion { font-size: 1.8rem; }
}

/* Responsivo SERVICIOS SEGUNDA SECCION */
@media (max-width: 767px) {
    .seccion-servicios-consultoria { padding: 60px 20px; }
    .titulo-seccion-consultoria { font-size: 1.8rem; margin-bottom: 30px; }
    .lista-consultoria li { font-size: 1rem; }
}


/* Responsivo  SERVICIOS  tercera seccion */
@media (max-width: 767px) {
    .seccion-mesas-ayuda { padding: 50px 20px; }
    .titulo-mesas-ayuda { font-size: 1.6rem; margin-bottom: 30px; }
}


/* Responsivo para móvil SERVICIOS  cuarta seccion */
@media (max-width: 767px) {
    .grid-tres-columnas {
        grid-template-columns: 1fr; /* Columna única en móvil */
        gap: 20px;
    }
    .seccion-contratacion { padding: 50px 20px; }
    .titulo-seccion { font-size: 1.6rem; margin-bottom: 30px; }
}


@media (max-width: 767px) {
    /* Esto aplica a todas las listas de servicios que hemos creado */
    .lista-servicios li, 
    .lista-consultoria li, 
    .lista-mesas-ayuda li {
        text-align: left;        /* Alinea el texto a la izquierda */
        padding-left: 35px;      /* Espacio suficiente para que el check no toque el texto */
        margin-left: 20px;       /* Un poco de margen para que no esté pegado al borde */
    }

    /* Ajustamos la posición del check para que se mantenga a la izquierda */
    .lista-servicios li::before,
    .lista-consultoria li::before,
    .lista-mesas-ayuda li::before {
        left: 0;                 /* Asegura que el check esté al inicio */
    }
}


/* Responsivo para móvil (Justificado a la izquierda) */
@media (max-width: 767px) {
    .grid-dos-columnas, 
    .grid-tres-columnas {
        grid-template-columns: 1fr;
    }
    
    .lista-servicios li {
        text-align: left;
        padding-left: 35px;
        margin-left: 0;
    }
    
    .seccion-impresion, .seccion-admin-delegada {
        padding: 50px 20px;
    }
}


/* Responsivo  SECCION 7 */
@media (max-width: 767px) {
    .seccion-modelo-sap { padding: 50px 20px; }
    .img-modelo-sap { max-width: 100%; } /* En móvil que aproveche todo el ancho */
}


/* Responsivo para móvil SECCION 8 */
@media (max-width: 767px) {
    .seccion-fabrica-software { padding: 50px 20px; }
    .lista-fabrica { text-align: left; } /* Alineado a la izquierda en móvil */
}


/* Responsivo para móvil seccion 9 SERVICIOS (Justificación a la izquierda) */
@media (max-width: 767px) {
    .grid-tres-columnas {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
    }
    
    .lista-servicios li {
        text-align: left; /* Justificado a la izquierda */
        padding-left: 35px;
        margin-bottom: 15px;
    }
    
    .seccion-proyectos { padding: 50px 20px; }
}

/* Responsivo para móvil SECCION 10 */

/* Ajuste móvil para asegurar alineación izquierda */
@media (max-width: 767px) {
    .grid-dos-columnas {
        grid-template-columns: 1fr; /* Columna única */
    }
    
    .lista-servicios li {
        text-align: left; /* Justificado a la izquierda */
        padding-left: 35px;
        margin-bottom: 15px;
    }
    
    .seccion-microsoft {
        padding: 50px 20px;
    }
}


/* Seccion 11 y 12  para móvil */
@media (max-width: 767px) {
    .lista-centrada {
        text-align: left;
        padding-left: 35px;
    }
    
    .seccion-linux, .seccion-plantas {
        padding: 40px 20px;
    }
}

/* Seccion 13  para móvil */


/* Responsivo y alineación para móvil */
@media (max-width: 767px) {
    .grid-tres-columnas {
        grid-template-columns: 1fr; /* Columna única en móvil */
        gap: 20px;
    }
    
    .lista-servicios li {
        text-align: left; /* Alineación justificada a la izquierda para homogeneidad */
        padding-left: 35px;
    }
    
    .seccion-hpe {
        padding: 50px 20px;
    }
}

/* Seccion 14  para móvil */

/* Responsivo para móvil */
@media (max-width: 767px) {
    .galeria-imagenes {
        gap: 15px;
    }
    
    /* Si quieres que en móviles se vean un poco más grandes o ajustar el layout: */
    .galeria-imagenes img {
        width: 100px; /* Ajustamos ligeramente para pantallas pequeñas */
        height: 100px;
    }
}

   /* ==================================================
    6. Media Query Escritorio Nosotros
   ================================================== */



/* Responsivo 1seccion nosotros */
@media (max-width: 767px) {
    .seccion-mision { padding: 50px 20px; }
    .titulo-seccion { font-size: 1.8rem; }
    .texto-mision { font-size: 1rem; text-align: left; } /* Texto a la izquierda en móvil para mejor lectura */
}


/* Responsivo 2 seccion nosotros*/
@media (max-width: 767px) {
    .grid-tarjetas {
        grid-template-columns: 1fr; /* Una columna en móvil */
    }
}

/* 3 seccion nosotros */

/* Responsivo */
@media (max-width: 767px) {
    .grid-dos-partes { grid-template-columns: 1fr; }
    .col-azul { padding: 40px; }
}

   /* Corregir scroll lateral en móviles */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}