html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Corta de raíz cualquier cálculo extra de la barra de scroll */
    margin: 0;
    padding: 0;
}

body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	width: 100%;
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	font-weight: 400;         /* Peso regular estándar */
  	line-height: 1.5;        /* Da suficiente aire entre líneas para que se vea más clara */
  	letter-spacing: -0.010em; 
	color: #1a1a1a;
	

}
.p1 {
	position: absolute;
  top: 0;
  opacity: 0;
  color: lightgrey;
  font-size: 18px;
  font-weight: bold;
  width: auto;
  left: 20px;
  right: 30px;
  margin-top: 0px;
  white-space: normal;      /* Mantenemos solo este para que quiebre el texto */
  word-wrap: break-word;
  overflow-wrap: break-word;
  animation: slideText 12s infinite ease-in-out;
}	

.p1:nth-child(1) { animation-delay: 0s; }
.p1:nth-child(2) { animation-delay: 6s; }


@keyframes slideText {
  0% {
    opacity: 0;
    transform: translateY(20px); /* Entra desde abajo */
  }
  5% {
    opacity: 1;
    transform: translateY(0);    /* Se queda en el centro */
  }
  45% {
    opacity: 1;
    transform: translateY(0);    /* Se mantiene visible durante su ciclo */
  }
  50% {
    opacity: 0;
    transform: translateY(-20px); /* Desaparece hacia arriba */
  }
  100% {
    opacity: 0;
  }
}	

img {
	flex-shrink: 0;
	max-width: 100%;
	height: auto;

}

h3 {
	font-size: 20px;
	opacity: 0.85;
	
}

hr {
  border: none;               /* 1. Elimina el borde gris por defecto */
  height: 1px;                /* 2. Define el grosor de la línea */
  background-color: rgba(0, 0, 0, 0.5);  /* 3. Define el color de la línea */
  width: calc(100% - 20px);                 /* 4. Define el ancho total */
  margin: 15px 10px;
  
}

.logo {
	margin-right: 30px;
	margin-top: 30px;
	width: 150px;
	background: url(Imagenes/logo_web_verde.png) no-repeat center;
	background-size: contain ;
	visibility: visible;
	height: 100px;
	background-color: rgba(255, 255, 255, 0);
}

.logo2 {
	
	margin-left: 20px;
	width: 200px;
	background: url(Imagenes/logo_texto_web_blanco.png) no-repeat center;
	background-size: contain ;
	visibility: visible;
	height: 50px;
	background-color: rgba(255, 255, 255, 0);
	margin-bottom: 15px;
	flex-shrink: 0;
}

.contenedor-animacion {
    position: relative;
    width: 100%;
    /* Le damos una altura estimada para que reserve el espacio del texto */
    /* 50px suele bastar para 2 líneas de texto a 18px. Puedes ajustarlo si el texto es más largo. */
    height: 50px; 
}


/*----------------------------------------------*/
/*CSS PARA LOS CONTENEDORES*/
/*----------------------------------------------*/
.box-titulo {
    display: flex;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
    justify-content: center;
    align-items: center;
    flex: 0 0 100%;    /* Fuerza a ocupar el 100% del ancho */
    height: 50px;      /* Altura fija exacta de 50px */
}



.fondo-fijo {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	
	background-image:url(Imagenes/fondoweb.png);
	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	
	z-index: 1;
	pointer-events: none;

	transform: translate(0,0,0);
	will-change: transform;
}	


#contenedor_fullpage {
	display: flex;
 	flex-direction: column; 
	flex-wrap: nowrap;
  	width: 100%;
	max-width: 100vw;
  	min-height: 100%;
	position: relative;
  	z-index: 2;
	
	
    
}

#halfpage_H {
 
    top: 0;
    left: 0;
    width: 100%;
    height: auto; /* Mantenemos lvh arriba para evitar saltos en móvil */
	position: relative;
  	display: flex;
  	justify-content: center; 
  	align-items: center;     
  	flex-direction: column;
  	padding: 0;        /* Protege los bordes izquierdo y derecho */
  	box-sizing: border-box; /* Mantiene el tamaño perfecto del bloque */
  	text-align: center;
  	flex: 2 1 0; /* ← Crece el doble, se encoge, y su tamaño base sugerido son 400px */
  	min-height: 80dvh; /* Asegura pantalla completa si salta abajo */
}

.caja-superior, .caja-medio, .caja-inferior {
  display: flex;
  flex-direction: column;   /* Mantiene el flujo vertical interno si hay varios textos */
  
  /* 
     1. ALINEACIÓN FLEXBOX:
     Empuja todos los elementos hijos (textos, imágenes, etc.) 
     hacia el inicio horizontal (la izquierda).
  */
  align-items: flex-start;  
  
  /* 
     2. ALINEACIÓN DE TEXTO TRADICIONAL:
     Garantiza que si el texto es largo y hace un salto de línea, 
     la segunda línea también comience alineada a la izquierda.
  */
  text-align: left;

  /* 
     3. EL ESPACIADO REQUERIDO:
     Agrega los 50px de colchón al borde izquierdo.
  */
    
  /* CLAVE: Evita que los 50px de padding deformen o ensanchen la caja */
  box-sizing: border-box; 
}


.caja-superior {
  height: 50%;
  width: 100%;          /* Le das el tamaño específico que quieras */
  flex-shrink: 0;        /* Obligatorio: evita que Flexbox la aplaste */
  justify-content: flex-start;
  align-items: flex-end;
  
}

.caja-medio {
  /* 
     CLAVE DEL ÉXITO: 
     flex: 1 es el resumen de flex-grow: 1. 
     Le ordena a esta caja devorarse TODO el espacio vertical que sobre 
     en el padre, y achicarse libremente si el padre se reduce.
  */
  flex: 1; 
  width: 100%;
  justify-content: flex-end;  
  position: relative;
}

.caja-inferior {
  height: 150px; 
  width: 100%;         /* Le das el otro tamaño específico que quieras */
  flex-shrink: 0;        /* Obligatorio: evita que Flexbox la aplaste */
  justify-content: flex-start;  
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#halfpage_black_H {
  	background-color: rgba(0,0,0,0.5);
  	margin: 0;
  	display: flex;
  	justify-content: flex-start; 
  	align-items: flex-end;     
  	flex-direction: column;
  	height: auto;
	width: 100%;
  	flex: 1 1 auto;  
	overflow: hidden;
	
  	
}

/* 1. Contenedor de la cuadrícula al 100% y sin espacios */
.grid-imagenes {
  	display: flex;
  	flex-wrap: wrap;       
  	width: 100%;
	height: 100%;
	min-height: min-content;
	flex-shrink: 0;
  	       
}
/* 2. Contenedor individual para cada imagen (Garantiza el centrado) */
.box-imagen {
  	display: flex;
	justify-content: center;
  	align-items: center;
  	overflow: hidden;      /* Recorta los excesos de la imagen si crece mucho */
   	flex: 0 0 50%;
  	width: 50%;
  	min-width: 100px;
	aspect-ratio: 1/1;
	
	box-sizing: border-box;
	

	
}  
/* 3. Ajuste de la imagen dentro de su contenedor */
.box-imagen img {
  	max-width: 75%;
  	max-height: 75%;
  	object-fit: contain;     /* Centra, llena el espacio y mantiene la proporción */
	
}

#nosotros {
	height: 100%;
	width: 100%;
	background-color: #fcfcfc;
	color: #1a1a1a;
	padding: 0px;
	
	

}

#destacados {
	height: 100%;
	width: 100%;
	background-color: #fcfcfc;
	color: #1a1a1a;
	padding: 0px;
	margin: 0px;

}

#clientes {
	height: 100%;
	width: 100%;
	background:rgba(240, 240, 240, 1);
	color: #1a1a1a;
	padding-top: 40px;

}

#footer {
	height: 400px;
	width: 100%;
	background: black;
	color: black;
	padding: 0px;

}

.black {
	color: black;
}

#grid, #grid3 {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	gap: 0px;
	padding: 0 10px;
	box-sizing: border-box;
	background: rgba(0, 83, 226,0);
	

}

#grid_news {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 5px;
	box-sizing: border-box;
	
	
}

#grid_destacados {
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	margin-left: 0px;
	
	
		
	
}


.bloque2 {
	
	width: calc(50% - 10px);
	flex: 1 0 calc(50% - 10px);
	height: auto;
	min-height: 100px;
	box-sizing: border-box;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: #1a1a1a 0px solid;
	
	



}

.bloque3 {
	
	width: 100%;
	flex: 1 0 100%;
	aspect-ratio: 2.5 / 1;
	min-height: 150px;
	box-sizing: border-box;
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border: #1a1a1a 0px solid;
	color: white;
	padding: 0px;
	
}

.shadow1 {
	background: rgba(0, 0, 0, 0.85);
	padding: 10px;
	width: calc(100% - 20px);
	margin: 0;
	overflow: hidden;
}


.color1 {
	background: rgba(125,178,56,.75);
}

.color2 {
	background: rgba(0, 83, 226,.75);
}

.color3 {
	background: rgba(252,192,33,.75);
}

.color4 {
	background: rgba(0, 0, 0, 0.5);
}

.bloque1 {
	
	width: calc(50% - 0px);
	flex: 0 0 calc(50% - 0px);
	height: auto;
	min-height: 150px;
	padding: 0 10px 0 0;
	border: #1a1a1a 0px solid;
	box-sizing: border-box;
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	



}

.destacado1 {
	background:  url(Imagenes/Destacado1_microtec.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.destacado2 {
	background:  url(Imagenes/Destacado2_Jartek.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.destacado3 {
	background:  url(Imagenes/Destacado3_nordautomation.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.destacado4 {
	background:  url(Imagenes/Destacado4_gocator.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.center {
	text-align: center;
	align-items: center;
}

.right {
	text-align: right;
	align-items: flex-end;
}


/*----------------------------------------------*/
/*CONTROL DE LOS EFECTOS DE HOVER*/
/*----------------------------------------------*/
.microtec {
	background-color: rgba(66,202,194,0);
	transition: background-color 1s ease;
}

.microtec:hover {
	background-color: rgba(66,202,194,.75);

}

.jartek {
	background-color: rgba(0, 83, 226,0);
	transition: background-color 1s ease;
}

.jartek:hover {
	background-color: rgba(0, 83, 226,.75);

}

.nordautomation {
	background-color: rgba(125,178,56,0);
	transition: background-color 1s ease;
}

.nordautomation:hover {
	background-color: rgba(125,178,56,.75);

}

.gocator {
	background-color: rgba(252,192,33,0);
	transition: background-color 1s ease;
}

.gocator:hover {
	background-color: rgba(252,192,33,.75);

}

/* FIN DE LOS EFECTOS DE HOVER */

#nosotros_bg {
	background: url(Imagenes/Consultorias.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	aspect-ratio: 2 / 1;
	position: relative;
	z-index: 20;

}

.contenido , .contenido_2{
	width: 100%;
	height: auto;
	margin: 0 auto;
	font-size: 15px;
	color: black;
	font-family: 'Inter', sans-serif;
	text-align: left;
	box-sizing: border-box;
	padding: 20px;

	
	
}

.contenido p {
	margin: 0 0 16px 0;
	opacity: 0.85;
	font-weight: 400;
	line-height: 1.2;
}

.contenido h3 {
	margin: 0 0 20px 0;
	opacity: 0.85;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.2;

}



/*----------------------------------------------*/
/*CONTROL DE LOS MOVIMIENTOS DEL DEGRADADO*/
/*----------------------------------------------*/
@keyframes gradient-doble {
    0% { background-position: 0% 0%, 100% 0%; }
    25% { background-position: 0% 100%, 50% 50%; }
    50% { background-position: 100% 100%, 0% 100%; }
	75% { background-position: 100% 0%, 50% 50%; }
	100% { background-position: 0% 0%, 100% 0%; }
}





/*----------------------------------------------*/
/*MEDIA QUERY PARA AJUSTE DE PANTALLAS*/
/*----------------------------------------------*/
@media (min-width: 700px) {
.logo {
	margin-left: 20px;
	margin-top: 30px;
	
}
.caja-superior {
 
  align-items: flex-start;
  
}
}

@media (min-width: 600px) {
	

  .box-imagen {
    flex: 0 0 50%; /* Cambia a 2 columnas (50% de ancho cada una) */
	width: 50%;
    aspect-ratio: 2 / 1;
    box-sizing: border-box;
	background: rgba(0,0,0,0);
	overflow: hidden;
       
  }

  .box-imagen img {
  	width: 60%;
  	height: 60%;
  	object-fit: contain;     /* Centra, llena el espacio y mantiene la proporción */
}

#grid_destacados {
	
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	box-sizing: border-box;
	margin-left: 0px;
	height: auto;
	flex-wrap: wrap;
	width: 100%;
			
}

.bloque3 {
	
	flex: 0 0 50%;
	width: 50%;
	aspect-ratio: 2 / 1;
	min-height: 100px;
	box-sizing: border-box;
	
	display: flex;
	flex-direction: column;
	
	border: #1a1a1a 0px solid;
	flex-wrap: wrap;
	
}

#destacados {
	height: auto;
	width: 100%;
	background-color: #fcfcfc;
	color: #1a1a1a;
	padding: 0px;
	margin: 0px;

}
  .bloque2 {
	
	width: calc(30% - 10px);
	flex: 1 0 calc(30% - 10px);
	height: auto;
	min-height: 150px;
	padding: 0;
	border: #1a1a1a 0px solid;
	box-sizing: border-box;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 10px;
	



}


}

@media (min-width: 1025px) {

	  
	#halfpage_H {
 
    height: calc(75dvh - 150px); /* Mantenemos lvh arriba para evitar saltos en móvil */
	min-height: calc(75dvh - 150px); /* Asegura pantalla completa si salta abajo */
	max-height: 700px;
	width: 100%;
	flex: 0 0 0;
	align-items: center;
	align-content: center;
	
}
	
	
	
	#contenedor_fullpage {
	display: flex;
 	flex-direction: column; /* uno al lado del otro */
	flex-wrap: nowrap;
  	width: 100%;
	max-width: 100%;
  	min-height: 100dvh;
	position: relative;
  	z-index: 2;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	align-content: center;
	
    
}


	#halfpage_black_H {
  	background-color: rgba(0,0,0,0.5);
  	margin: 0;
  	display: flex;
  	justify-content: center; 
  	align-items: center;     
  	flex-direction: column;
  	position: relative;
   	flex: 0 0 auto;  
  	height: auto;
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	
}
	.grid-imagenes {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    flex-direction: row;	
    overflow: hidden;
	width: 100%;
	max-width: 1200px;
	
  }

  .box-imagen {
    flex: 0 0 25%; /* Cambia a 2 columnas (50% de ancho cada una) */
	height: 100px;
    aspect-ratio: 1.5 / 1;
    box-sizing: border-box;
	background: rgba(0,0,0,0);
	overflow: hidden;
	
       
  }

  .box-imagen img {
  	width: 75%;
  	height: 75%;
  	object-fit: contain;     /* Centra, llena el espacio y mantiene la proporción */
}

.caja-superior {
	height: 300px;
	width: 100%;
	max-width: 1200px;
	background: rgba(0, 83, 226,0);
	align-self: center;
}

.caja-inferior {
	height: 100px;
	width: 100%;
	max-width: 1200px;
	border: none;
}

.caja-medio {
	justify-content: center;
	width: 100%;
	max-width: 1200px;
}

 #nosotros, #noticias, #clientes, #footer {
    width: 100%;
    box-sizing: border-box;
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	
  }

  .bloque2 {
	
	width: calc(20% - 10px);
	flex: 0 0 calc(20% - 10px);
	height: auto;
	min-height: 150px;
	padding: 0;
	border: #1a1a1a 0px solid;
	box-sizing: border-box;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 10px;
	



}

.bloque3 {
	
	flex: 0 0 25%;
	width: 25%;
	aspect-ratio: 1.5 / 1;
	min-height: 100px;
	box-sizing: border-box;
	max-height: 300px;
	display: flex;
	flex-direction: column;

	border: #1a1a1a 0px solid;
	flex-wrap: wrap;
	
}

.contenido {
	width: 100%;
	max-width: 1200px;
	
}

.contenido_2{
	width: calc(100% - 540px);
	flex: 1 1 calc(100% - 540px);
	
	padding: 0px 20px;
}

.contenido_2 h3 {
	margin-top: 0px;
}

#nosotros_bg {
	width: 500px;
	max-width: 500px;
	
	flex: 0 0 600px;
	
	
}

#grid {
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
	gap: 0px;
	padding: 0 10px;
	box-sizing: border-box;
	
	max-width: 1200px;

}

#nosotros {
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

	
	
}

#variable1 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	max-width: 1200px;
	width: 100%;
	margin: 20px;
	justify-content: stretch;
	align-content: stretch;
	margin: 50px 0 50px 0;
	padding-bottom: 50px;
	padding-left: 20px;
	
}
}