/*#################################################*/
/*################## Menu y logo ##################*/
/*#################################################*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    background-color: #ececec;
    position: sticky; /* Hace que el header se quede fijo */
    top: 0; /* Fija el header en la parte superior de la página */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Añade una sombra para resaltar el header */

}

.logo {
    max-width: 15rem;
}

.nav-list {
    list-style-type: none;
    display: flex;
    gap: 1rem;
}

.nav-list li a {
    text-decoration: none;
    color: #1c1c1c;
}

.abrir-boton,
.cerrar-boton {
    display: none;
}

.nav.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* Mueve el menú a su posición original */
}
/*#####################################################*/
ul.nav-list {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Enlaces */
ul.nav-list li a {
    text-decoration: none;
    font-size: 20px;
    color: #1f5d98;
    font-family: 'Consolas';
    text-transform: uppercase;
    padding: 0;
    transition: color 0.3s ease, transform 0.3s ease;
}

ul.nav-list li.current a {
    color: #f69449;
    font-weight: bold;
}


/* Estilo de hover */
.nav-list a:hover {
    color: #f69449; /* Cambia el color del texto */
    background-color: rgba(246, 148, 73, 0.1); /* Fondo ligeramente anaranjado */
    border-radius: 5px; /* Bordes redondeados */
    transform: scale(1.05); /* Amplía ligeramente el tamaño */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Añade una sombra ligera */
}

/*#####################################################*/
/*################## Fin menu y logo ##################*/
/*#####################################################*/




/*#####################################################*/
/*################## Nosotros y Fase ##################*/
/*#####################################################*/
/* Estilo general para que el contenido esté lado a lado */
.Acerca_RedItCom {
    display: flex; /* Cambiamos a Flexbox para asegurar que estén uno al lado del otro */
    justify-content: space-between; /* Añade espacio entre grid_uno y grid_dos */
    gap: 30px; /* Espacio entre las columnas */
    padding: 20px;
    font-family: 'Consolas';
    color: #000000;
    background-color: #f3f2f2;
    margin-bottom: 40px;
    margin-top: -20px; /* Elimina cualquier margen superior */
    z-index: 500;
}

/* Estilo de la columna de texto (grid_uno) */
.grid_uno {
    width: 50%; /* Aseguramos que ocupe la mitad del ancho disponible */
    padding: 20px;
    font-family: 'Consolas';
    color: #000000;
    line-height: 1.6;
    font-size: 14px
}

/* Estilo de la columna de la imagen y fases (grid_dos) */
.grid_dos {
    width: 50%; /* Aseguramos que ocupe la mitad del ancho disponible */
    display: grid;
    grid-template-areas:
        "fase-consultoria central-img fase-diseno"
        "fase-soporte central-img fase-desarrollo";
    grid-gap: 20px;
    justify-items: center;
    align-items: center;
}

/* Imagen central */
.central-img {
    grid-area: central-img;
    max-width: 200px;
    max-height: 200px;
    justify-self: center;
}

.grid_dos {
    display: grid;
    grid-template-areas:
        "fase-consultoria central-img fase-diseno"
        "fase-soporte central-img fase-desarrollo";
    grid-gap: 20px;
    justify-items: center;
    align-items: center;
    position: relative;
    /* order: 1; Mueve el grid_dos a la izquierda */
}

/* Imagen central */
.central-img {
    grid-area: central-img;
    max-width: 200px;
    max-height: 200px;
    justify-self: center;
}

/* Estilo de las fases */
.fase {
    font-size: 14px;
    padding: 10px;
    background-color: #f69449;
    color: #000000;
    border-radius: 5px;
    text-align: center;
    margin: 10px 0;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    font-family: 'Consolas';
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Viñeta a la izquierda del texto de la fase */
.fase::before {
    content: '⤵︎'; /* Viñeta inicial */
    color: #1f5d98;
    font-size: 40px;
    margin-right: 20px;
    transition: transform 0.3s ease; /* Transición suave al cambiar de posición */
}

/* Flecha hacia abajo cuando el cursor está encima de la fase */
.fase:hover::before {
    content: '↓';
    font-size: 40px;
    transform: translateY(4px); /* Mueve la flecha ligeramente hacia abajo */
}

/* Submenú oculto inicialmente */
.submenu {
    display: none;
    position: absolute;
    top: 100%; /* Coloca el submenú justo debajo de la fase */
    left: -25px;
    background-color: #65b1f8;
    color: #000000;
    font-family: 'Consolas';
    font-size: 12px;
    list-style: none;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 115%;
    z-index: 1000; /* Asegura que el submenú esté por encima de otros elementos */
}
.negrita {
    font-weight: bold;
}

/* Submenú visible solo cuando la clase active está en el contenedor fase */
.fase.active .submenu,
.fase:hover .submenu { /* Mostrar también al pasar el cursor */
    display: block;
}

.submenu li {
    list-style: none;
    padding: 5px 0;
}

/* Colocar las fases en sus áreas correspondientes si usas CSS Grid */
.fase-soporte {
    grid-area: fase-soporte;

}

.fase-consultoria {
    grid-area: fase-consultoria;
}

.fase-desarrollo {
    grid-area: fase-desarrollo;
}

.fase-diseno {
    grid-area: fase-diseno;
}
/*##############################################*/
/*########## FIN Acerca de (Nosotros) ##########*/
/*##############################################*/




/*##############################################*/
/*############ Nuestras Soluciones #############*/
/*##############################################*/
#Nuestras_Soluciones h1 {
    text-align: center; /* Centra el texto horizontalmente */
	font-family: 'Consolas';
    color: #000000;
    font-size: 50px; /* Tamaño del texto del título */
    font-weight: 100; /* Peso del título */
    margin: 80 20px 0px 0px; /* Margen inferior para el espacio entre el título y el contenido */
    
}

#Nuestras_Soluciones h1 i {
    display: block; /* Asegura que el subtítulo esté en una línea separada */
	font-family: 'Consolas';
    font-size: 25px; /* Tamaño del texto del subtítulo */
    color: #000000; /* Color del subtítulo */
    font-style: normal; /* Quitar el estilo cursiva si no es necesario */
    padding-top: 20px; /* Espaciado entre el título y subtítulo */
    line-height: 22px; /* Altura de línea para el subtítulo */
}

/* Cuadricula de soluciones*/
.contenedor_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Crea 4 columnas de igual tamaño */
    /* grid-template-rows: repeat(4, 1fr); Crea 4 filas de altura fija de 100px */
    gap: 100px; /* Espacio entre las celdas */
    margin-bottom: 20px; /* Agrega espacio debajo del contenedor */
    padding: 0;
	margin: 40px   60px   0px;
    
}
/* Ajustes para cada celda */
.contenedor_grid div {
    text-align: center; /* Centra el contenido en cada celda */
}
/* Ajustes para las imágenes */
.contenedor_grid img {
    width: 56px; /* Tamaño de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-bottom: 10px; /* Espacio entre la imagen y el texto */
}

/* Ajustes para el texto */
.contenedor_grid p {
    font-family: 'Consolas';
    font-size: 20px;
    color: #000000; /* Color del texto */
    line-height: 1.5; /* Espaciado entre líneas */
    margin: 0; /* Elimina el margen por defecto del párrafo */
}
/*########################################*/
/*########## FIN Mis soluciones ##########*/
/*########################################*/




/*##########################################*/
/*########## Servicio y PostVenta ##########*/
/*##########################################*/
/* Contenedor principal que contiene todos los slides */
.slider-container {
    overflow: hidden; /* Oculta el contenido que desborda del contenedor */
    position: relative;
    width: 100%;
}

/* Controles de navegación en el slider FLECHAS PARA MOVER */
.slider-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none; /* Permite que el área de control no bloquee el contenido debajo */
    z-index: 10; /* Asegura que el contenedor de controles esté encima del contenido */
}

/* Track o contenedor de los slides, con una transición para el movimiento */
.slider-track {
    display: flex;
    transition: transform 0.5s ease; /* Suaviza el desplazamiento */
    width: 100%;
}

/* Cada slide individual */
.slider {
    min-width: 100%; /* Cada slide ocupa el 100% del ancho del contenedor */
    box-sizing: border-box; /* Asegura que padding no expanda el ancho del slide */
    padding: 20px; /* Agrega espacio alrededor del contenido de cada slide */
    flex-shrink: 0; /* Evita que los slides se reduzcan */
}

.slider p, .slider li {
    font-size: 16px; /* Ajusta según el espacio disponible */
    line-height: 1.5; /* Mejora la legibilidad */
    margin: 10px 0; /* Espacio entre líneas */
}

.servicios_postventa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px 15px;
    padding: 50px;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), 
        url(../imagenes/project-management.jpg);
    background-size: cover;
    background-position: 100% 100%; /* Ajusta la posición de la imagen de fondo */
    background-repeat: no-repeat;
    border-radius: 10px;
    width: 90%;
    margin: auto auto; /* Centra el contenedor en la página */
    /*border: 2px solid blue; /* Esto es para poder visualizar el contenedor completo */
}

/* Estilos comunes para los contenedores */
.grid_servicios, .grid_postventa {
    width: 100%;
    height: 100%;
    display: block; /* Cambiado a block */
    overflow-y: auto;
    opacity: 0.86; /* Esto hace que los contenedores sean más transparente */
    background-color: #f3f2f2; /* Fondo sin transparencia */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    color: #000000;
    font-family: 'Consolas';
    margin: 0 auto; /* Centra cada columna*/
    padding: 10px; /* Espacio interno alrededor del contenido */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
}

/* Estilo para los títulos */
.grid_servicios h1, .grid_postventa h1 {
    font-size: 24px;
    color: #1f5d98; /* Añadido punto y coma */
    margin-bottom: 15px;
    text-align: center; /* Centrar los títulos */
}

/* Estilo para los párrafos */
.grid_servicios p, .grid_postventa p {
    color: #000000;
    font-size: 16px;
    margin: 10px 0;
    line-height: 1.5;
    text-align: justify; /* Ajusta la alineación del texto */
}

/* Estilos para las listas */
.grid_servicios ul, .grid_postventa ul {
    padding-left: 20px;
    list-style-type: none;
    margin: 10px 0;
}

.grid_servicios li, .grid_postventa li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    word-wrap: break-word;
    color: #000000;
    font-size: 16px;
}

.grid_servicios li::before, .grid_postventa li::before {
    content: '•';
    color: #000000;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
}

/* Estilo para las flechas */
.control {
    pointer-events: auto;
    width: 20px; /* Tamaño de las flechas */
    height: 30px;
    cursor: pointer;
    position: relative; /* para ubicar las flechas */
    top: 40%; /* Centra verticalmente en el contenedor */
    transform: translateY(-50%); /* Centra la flecha verticalmente */
    z-index: 20;
}

.control.left {
    left: 10px; /* Ajustado para que esté dentro del contenedor */
}

.control.right {
    right: 10px; /* Ajustado para que esté dentro del contenedor */
}

/*#################################################*/
/*########## Fin de Servicio y PostVenta ##########*/
/*#################################################*/




/*#################################*/
/*########## FORMUILARIO ##########*/
/*#################################*/
/* Estilo general para el contenedor del formulario */
#formulario_contacto {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    background-color: #ffffff;
    background-image: url(../imagenes/networkin_admin.jpg);
    background-size: cover; /* Ajusta el tamaño de la imagen */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
   
}

/* Estilo para el contenedor de texto y formulario */
.grid_formulario_01 {
    max-width: 500px; /* Limita el ancho del formulario */
    margin: 0 auto; /* Centra el formulario en la página */
    margin-bottom: 100px; /* Mueve el formulario hacia arriba */
    background-color: #f4f4f4; /* Color de fondo del formulario */
    padding: 40px; /* Espaciado interno */
    border-radius: 20px; /* Bordes redondeados */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-family: 'Consolas';
    color: #000000;
    width: 100%;
}

/* Título del formulario */
.grid_formulario_01 h1 {
    font-size: 24px;
    color: #1f5d98;
    margin-bottom: 10px;
    font-family: 'Consolas';
}

/* Subtítulo en cursiva */
.grid_formulario_01 h1 i {
    font-size: 16px;
    color: #888;
    font-family: 'Consolas';
}

/* Estilo de los campos de entrada */
.grid_formulario_02 input[type="text"],
.grid_formulario_02 input[type="email"],
.grid_formulario_02 input[type="tel"],
.grid_formulario_02 textarea {
    width: 100%; /* Hace que los inputs ocupen todo el ancho */
    padding: 5px; /* Espaciado interno de los inputs */
    margin-bottom: 5px; /* Espacio entre cada campo */
    border: none; /* Borde de los inputs */
    border-radius: 4px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de la fuente */
    color: #000000;
    font-family: 'Consolas';
    box-sizing: border-box; /* Asegura que el padding no desborde los inputs */
}

/* Cambiar el color del borde al enfocar */
.grid_formulario_02 input[type="text"]:focus,
.grid_formulario_02 input[type="email"]:focus,
.grid_formulario_02 input[type="tel"]:focus,
.grid_formulario_02 textarea:focus {
    border-color: #1f5d98;
    outline: none;
}

/* Estilo del botón de envío */
.grid_formulario_02 input[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #1f5d98;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Cambio de color del botón al pasar el cursor */
.grid_formulario_02 input[type="submit"]:hover {
    background-color: #f69449;
}


/* Estilo para los mensajes de validación del campo teléfono */
.grid_formulario_02[type="tel"]:invalid {
    border-color: red; /* Color de borde rojo si la validación falla */
}

.grid_formulario_02 input[type="tel"]:valid {
    border-color: green; /* Color de borde verde si la validación es correcta */
}
/*#####################################*/
/*########## FIN FORMUILARIO ##########*/
/*#####################################*/




/*######################################################*/
/*########## Direccion, numero, correo y mapa ##########*/
/*######################################################*/
/* Estilo general para el contenedor de contacto */
.contact_info {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background-color: #f9f9f9;
}

/* Contenedor principal */
.grid_dinucoma_01 {
    max-width: 1600px;
    width: 100%;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Consolas';
    color: #333;
    /*border: 2px solid blue; /* Esto es para poder visualizar el contenedor completo */
}

/* Estilo para el encabezado y subtítulos */
.grid_dinucoma_01 h1 {
    font-size: 22px;
    font-family: 'Consolas';
    color: #1f5d98;
    line-height: 1.5;
    margin-bottom: 20px;
}

.grid_dinucoma_01 h1 i {
    font-size: 16px;
    font-family: 'Consolas';
    color: #555;
    display: block;
    margin-top: 10px;
}

/* Enlace de mensaje */
.grid_dinucoma_01 a {
    color: #1f5d98;
    font-family: 'Consolas';
    text-decoration: underline;
    font-weight: bold;
}

/* Estilo de lista para dirección, correo y número */
.direccion_01 {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.direccion_01 li {
    margin: 10px 0;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.direccion_01 li img {
    margin-right: 10px;
}

/* Estilo para el contenedor del mapa */
.mapa {
    margin-top: 20px;
    font-family: 'Consolas';
    border-radius: 8px;
    overflow: hidden;
}

.mapa iframe {
    width: 100%;
    height: 300px;
    border: 0;
}
/*##########################################################*/
/*########## FIN Direccion, numero, correo y mapa ##########*/
/*##########################################################*/




/*################################*/
/*########## copyrights ##########*/
/*################################*/
/* copyrights */
.copyright_info {
	float: left;
	padding: 22px 0px 22px 0px;
	margin: 0px 0px 0px 0px;
	width: 100%;
	color: #999;
	text-align: center;
	background-color: #f3f3f3;
	font-size: 12px;
	color: #999;
}
.copyright_info a {
	margin-top: 10px;
	font-size: 12px;
	color: #999;
}
.copyright_info a:hover {
	color: #3d3d48;
}

.social_links {
    margin-top: 10px;
}

.social_icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

.social_links a:hover .social_icon {
    opacity: 0.7; /* Efecto al pasar el cursor */
}

/* scroll up */
.scrollup{
    width:40px;
    height:40px;
    opacity:1;
    position:fixed;
    bottom:72px;
    right:27px;
    display:none;
    text-indent:-9999px;
    background: url(../imagenes/scroll-top-arrow.png) no-repeat left top;
	z-index: 999;
}

input{
margin-bottom:15px;	
}





/*######################################*/
/*########## Aviso de cookies ##########*/
/*######################################*/
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.cookie-banner a {
    color: #1e90ff;
    text-decoration: underline;
}

.cookie-banner button {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #1e90ff;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.cookie-banner.hidden {
    display: none;
}





/* ===== WhatsApp flotante ===== */
.whatsapp-float {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  bottom: 90px; /* o el valor que te funcionó mejor */
  width: 58px;
  height: 58px;
  border-radius: 50%;
  /*background: #25D366; para fondo verde*/ 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*box-shadow: 0 6px 18px rgba(0,0,0,.2); para fondo verde*/
  z-index: 1100;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.whatsapp-float:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.whatsapp-float:active { transform: translateY(0); }

/* Imagen del ícono */
.whatsapp-icon-img {
  width: 48px;  /* ajusta según tu imagen */
  height: 48px;
  object-fit: contain;
}