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;

}
.p1 {
	position: absolute;
  top: 0;
  opacity: 0;
  color: lightgrey;
  font-size: 18px;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  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-family: Verdana, Geneva, Tahoma, sans-serif;
	color: white;
	font-size: 20px;
	margin: 0 20px 20px 0;
	align-self: flex-start;
	max-width: calc(100%-20px);
}

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

.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: 100dvh; /* 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: center; 
  	align-items: flex-end;     
  	flex-direction: column;
  	position: relative;
	width: 100%;
  	flex: 1 1 400px;  
	overflow: hidden;
	height: auto;
  	
}

/* 1. Contenedor de la cuadrícula al 100% y sin espacios */
.grid-imagenes {
  	display: flex;
  	flex-wrap: wrap;       
  	width: 100%;
	height: auto;
  	       
}
/* 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;
	height: auto;
	aspect-ratio: 1/1;

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

#nosotros {
	height: 100%;
	width: 100%;
	background: white;
	color: black;
	padding: 0px;
	

}

#noticias {
	height: 100%;
	width: 100%;
	background: orange;
	color: black;
	padding: 0px;

}

#clientes {
	height: 50%;
	width: 100%;
	background: lime;
	color: black;
	padding: 0px;

}

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

}

.black {
	color: black;
}


/*----------------------------------------------*/
/*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 */





/*----------------------------------------------*/
/*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: 768px) {
	

  .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.5);
	overflow: hidden;
       
  }

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

@media (min-width: 1025px) {
  
	#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;
	
    
}


	#halfpage_black_H {
  	background-color: rgba(0,0,0,0);
  	margin: 0;
  	display: flex;
  	justify-content: flex-end; 
  	align-items: flex-end;     
  	flex-direction: column;
  	position: relative;
   	flex: 0 0 auto;  
  	height: auto;
	width: 100%;
}
	.grid-imagenes {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; /* Alinea las filas internas a la derecha */
    width: 100%; /* Ocupa el ancho disponible para poder alinearse */
	flex-direction: row;	
    overflow: hidden;
	
  }

  .box-imagen {
    flex: 0 0 25%; /* Cambia a 2 columnas (50% de ancho cada una) */
	
    aspect-ratio: 1.25 / 1;
    box-sizing: border-box;
	background: rgba(0,0,0,0.5);
	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;
}

.caja-inferior {
	height: 100px;
}

.caja-medio {
	justify-content: center;
}

 #nosotros, #noticias, #clientes, #footer {
    width: 100%;
    box-sizing: border-box;
  }



}