*{  /* Selecciona todos los elementos */
	margin: 0;  /* Establece el margen en 0 */
	padding: 0;  /* Establece el padding en 0 */
    box-sizing: border-box;
}
/*  * ========================================= */
/*  * =============CABECERA==================== */
/*  * ========================================= */
.cabecera {  /* Selecciona la clase 'cabecera' */
    margin-left: auto; /* Centra el elemento horizontalmente */
    background: linear-gradient(to left, darkgreen, lightgreen); /* fondo fondo degradado a la izquierda de la cabecera de color verde */
    border-radius: 15px;  /* Establece el radio del borde */
}
/*  * ========================================= */
/*  * ==============CUERPO===================== */
/*  * ========================================= */
body{  /* Selecciona el elemento 'body' */
	background:#132333;  /* Establece el color de fondo */
	font-family: verdana;  /* Establece la fuente */
}

.menu {
    border-radius: 5px;  /* Establece el radio del borde */
}
.contenedor, .baner{  /* Selecciona las clases 'contenedor' y 'baner' */
	width: 90%;  /* Establece el ancho */
	margin: 8px auto;  /* Centra el elemento horizontalmente y establece el margen vertical en 8px */
	border-radius:20px;  /* Establece el radio del borde */
    background: linear-gradient(to left, rgb(1, 55, 1), lightgreen); /* fondo degradado a la izquierda de color verde */
}
.baner {
    display: flex;  /* Establece el tipo de visualización del contenedor a flex */
    justify-content: space-between;  /* Distribuye las imágenes a lo largo del eje principal con un espacio igual entre ellas */
}

img {
    border-radius: 15px;  /* Establece el radio del borde */
}

.frase{
	margin: 0 120px;  /* Establece los márgenes alrededor del texto */
	text-align: center;  /* Centra el texto */
	font-style: italic;  /* Establece el estilo de fuente a cursiva */
	color:#329700;  /* Establece el color del texto a un verde oscuro */
}
/*  * ========================================= */
/* INICIO CAJA CONTENEDORA DE IMAGENES DE CURSOS */
/*  * ========================================= */
.servicios{
	width: 312px;  /* Establece el ancho del elemento a 312px */
}

.cajas {
    width: 90%;  /* Establece el ancho del elemento al 90% del contenedor padre */
    display: flex;  /* Establece el tipo de visualización del elemento a flex */
    justify-content: space-around;  /* Distribuye los elementos hijos a lo largo del eje principal con un espacio igual entre ellos */
    margin: 15px 0 0 60px;  /* Establece los márgenes alrededor del elemento */
    padding-left: 20px;  /* Establece el relleno a la izquierda del elemento a 20px */
    border-radius: 15px;  /* Hace que las esquinas del elemento sean redondas */
    overflow: hidden;  /* Oculta el contenido que se desborda del elemento */
    height: 350px;  /* Establece la altura del elemento a 350px */
    color: white;  /* Establece el color del texto a blanco */
    background: linear-gradient(to left, rgb(1, 55, 1), lightgreen); /* fondo degradado a la izquierda de color verde */
}

.izquierda,
.centro,
.derecha {
    flex: 1;  /* Distribuye el espacio de manera equitativa entre los elementos */
    padding-top: 30px;  /* Establece el relleno superior del elemento a 30px */
    margin: 20px;  /* Establece los márgenes alrededor del elemento */
    z-index: 1;  /* Establece el nivel de apilamiento del elemento */
}

/* Ejemplo de media query para pantallas más pequeñas */
@media screen and (max-width: 625px) { /* esto se reacomoda hasta llegar a 625px */
    .cajas {
        flex-direction: column; /* Cambia a una disposición vertical */
        height: auto; /* Ajusta la altura según el contenido */
    }
}

/* La clase .medio añade relleno vertical. */
.medio{
	padding: 14px 0;
}

/* FIN CAJA CONTENEDORA DE IMAGENES DE CURSOS  */
/*  * ========================================= */
/*  *==========INICIO DE OPCIONES============== */
/*  * ========================================= */

.opciones{
	overflow: hidden;  /* Oculta el contenido que se desborda del elemento */
	background: #DAA520; /* fondo  anaranjado */
}
.opciones li{
	float: left; /* distribuye hacia la izquierda  */
	list-style: none;  /* Elimina el estilo de lista predeterminado (como los puntos en las listas desordenadas) */
}
.opciones li a{
	text-decoration: none; /* quita las viñetas de la lista */
	padding: 10px 13px; /* rellena 10px arriba, 13px a la derecha */
	display: block; /* despliega los objetos internos en bloque */
	color: #fff; /* color de texto blanco */
	
}
.opciones li a:hover{
	background: #DAA520; /* fondo de la barra de navegación de anaranjado */
}
/* FIN DE OPCIONES */

.titulo {
	text-align: center;  /* alinea el texto al centro */
	padding: 10px 0; /* rellena 10 pixeles arriba */
	color: #329700; /* color del texto verde */
}
.tit_tem {
    text-align: center;  /* alinea el texto al centro */
    background: -webkit-linear-gradient(left, #163f01, #ffdb7f); /* degradado de verde oscuro a verde claro */
    -webkit-background-clip: text; /* aplica el fondo solo al texto (para navegadores basados en WebKit como Chrome y Safari) */
    -webkit-text-fill-color: transparent; /* hace que el texto sea transparente para que se pueda ver el fondo */
}

/*  * ========================================= */
/*  * =1==========INICIO PAGINA EXCEL========== */
/*  * ========================================= */

.temario {
    max-width: 1250px; /* Ancho máximo para la responsividad */
    height: 700px; /* define la altura del temario */
    margin: 0 auto; /* Centra horizontalmente */
    border: 5px dashed #DAA520; /* color del borde punteado */
    display: flex; /*  */
  }
  
  ol, li {
    color: #73f433; /* color del texto */
  }
  
  .tit, a {
    color: #329700; /* color del texto */
  }
  
  .tem1, .tem2  {  /*cajas que contienen el temario */
    max-width: 550px; /* Ancho máximo para la responsividad */
    width: 100%; /* Ajusta el ancho al 100% del contenedor */
    height: 650px; /*Alto de las cajas que contienen el temario */
    padding: 15px 15px 5px 15px; /* *Relleno de cada caja en el temario top, right, buttom, left*/
    display: flex;
    justify-content: center;
    overflow: hidden;
    background-color: #302e2e;
    background-image: linear-gradient(50deg, transparent 90%,
                      rgb(151, 179, 207) 100% 85%, transparent 95%);
    margin: auto;
  }
/*  * ========================================= */
/*  * ============FIN PAGINA EXCEL============= */
/*  * ========================================= */

/*  * ========================================= */
/*  * =2==========INICIO PAGINA WORD=========== */
/*  * ========================================= */


.cabecera-W {  /* Selecciona la clase 'cabecera' */
    margin-left: auto; /* Centra el elemento horizontalmente */
    background: linear-gradient(to left, rgb(90, 90, 248), #3695D9); /* fondo fondo degradado a la izquierda de la cabecera de color verde */
    border-radius: 15px;  /* Establece el radio del borde */
}
/* La clase .medio añade relleno vertical. */
.medio-W{
	padding: 14px 0;
}
.contenedor-W, .baner-W{  /* Selecciona las clases 'contenedor' y 'baner' */
	/* width: 90%; */  /* Establece el ancho */
	margin: 8px auto;  /* Centra el elemento horizontalmente y establece el margen vertical en 8px */
	border-radius:20px;  /* Establece el radio del borde */
    /* background: linear-gradient(to left, rgb(1, 55, 1), lightgreen);  *//* fondo degradado a la izquierda de color verde */
}
.baner-W {
    display: flex;  /* Establece el tipo de visualización del contenedor a flex */
    justify-content: space-between;  /* Distribuye las imágenes a lo largo del eje principal con un espacio igual entre ellas */
}
.baner-W {
    width: 90%;  /* Establece el ancho */
	margin: 8px auto;  /* Centra el elemento horizontalmente y establece el margen vertical en 8px */
	border-radius:20px;  /* Establece el radio del borde */
    display: flex;  /* Establece el tipo de visualización del contenedor a flex */
    justify-content: space-between;  /* Distribuye las imágenes a lo largo del eje principal con un espacio igual entre ellas */
    background: linear-gradient(to left, rgb(90, 90, 248), #3695D9); /* fondo degradado a la izquierda de color verde */
}

/* La clase .titulo centra el texto y añade relleno vertical y color verde al texto. */
.titulo-W {
	text-align: center;
	padding: 10px 0;
	color: #fff;
} 
.tit_tem-W {
    text-align: center;  /* alinea el texto al centro */
    background: -webkit-linear-gradient(left, #00BFFF, #7B68EE); /* degradado de verde oscuro a verde claro */
    -webkit-background-clip: text; /* aplica el fondo solo al texto (para navegadores basados en WebKit como Chrome y Safari) */
    -webkit-text-fill-color: transparent; /* hace que el texto sea transparente para que se pueda ver el fondo */
}
/* La clase .frase centra el texto, lo pone en cursiva, y lo colorea de verde. También añade márgenes horizontales. */
.frase-W{
	margin: 0 120px;
	text-align: center;
	font-style: italic;
	color:#fff;
}

.temario-W {
    max-width: 1250px; /* Ancho máximo para la responsividad */
    height: 700px;
    margin: 0 auto; /* Centra horizontalmente */
    border: 4px dashed white;
    display: flex;
    background: #3695D9;
  }

.tit-W, a {
    color: #fff;
    /* color: #fff; */
  }
  /* Estos son los Div*/
  .tem1-W, .tem2-W, .tem3-W {
    max-width: 400px; /* Ancho máximo para la responsividad */
    height: 650px;
    padding: 5px 15px 5px 5px;
    display: flex;
    justify-content: center;
    border: 2px solid green;
    overflow: hidden;
    background-color: #285598;
    background-image: linear-gradient(50deg, transparent 90%,
                      rgb(151, 179, 207) 100% 85%, transparent 95%);
    margin: auto;
  }
  
  .tem1-W {
    margin: 15px 15px 15px 30px; /* Espacio entre los divs */
    width: 80%;
  }
  .tem2-W {
    margin: 15px 15px 15px 15px; /* Espacio entre los divs */
    width: 95%;
  }
  .tem3-W {
    margin: 15px 15px 15px 20px; /* Espacio entre los divs */
    width: 80%;
  }
  @media (max-width: 768px) {
    .tem1-W, .tem2-W, .tem3-W {
      max-width: 100%; /* Ajusta el ancho al 100% para pantallas más pequeñas */
      height: auto; /* Altura automática para adaptarse al contenido */
      padding: 5px; /* Ajuste de padding para pantallas más pequeñas */
    }
  }


/*  * ========================================= */
/*  * ============FIN PAGINA WORD============== */
/*  * ========================================= */


/*  * ========================================= */
/*  * =3==========INICIO PAGINA ACCESS========= */
/*  * ========================================= */

.cabecera-A {  /* Selecciona la clase 'cabecera' */
    margin-left: auto; /* Centra el elemento horizontalmente */
    background: linear-gradient(to left, #941403, #d37280); /* fondo fondo degradado a la izquierda de la cabecera de color verde */
    border-radius: 15px;  /* Establece el radio del borde */
}
/* La clase .medio añade relleno vertical. */
.medio-A{
	padding: 14px 0;
}
.contenedor-A, .baner-A{  /* Selecciona las clases 'contenedor' y 'baner' */
	/* width: 90%; */  /* Establece el ancho */
	margin: 8px auto;  /* Centra el elemento horizontalmente y establece el margen vertical en 8px */
	border-radius:20px;  /* Establece el radio del borde */
    /* background: linear-gradient(to left, rgb(1, 55, 1), lightgreen);  *//* fondo degradado a la izquierda de color verde */
}
.baner-A {
    display: flex;  /* Establece el tipo de visualización del contenedor a flex */
    justify-content: space-between;  /* Distribuye las imágenes a lo largo del eje principal con un espacio igual entre ellas */
}
.baner-A {
    width: 90%;  /* Establece el ancho */
	margin: 8px auto;  /* Centra el elemento horizontalmente y establece el margen vertical en 8px */
	border-radius:20px;  /* Establece el radio del borde */
    display: flex;  /* Establece el tipo de visualización del contenedor a flex */
    justify-content: space-between;  /* Distribuye las imágenes a lo largo del eje principal con un espacio igual entre ellas */
    background: linear-gradient(to left, #941403, #d37280); /* fondo degradado a la izquierda de color verde */
}

/* La clase .titulo centra el texto y añade relleno vertical y color verde al texto. */
.titulo-A {
	text-align: center;
	padding: 10px 0;
	color: #fff;
} 
.tit_tem-A {
    text-align: center;  /* alinea el texto al centro */
    background: -webkit-linear-gradient(left, #941403, #654dee); /* degradado de verde oscuro a verde claro */
    -webkit-background-clip: text; /* aplica el fondo solo al texto (para navegadores basados en WebKit como Chrome y Safari) */
    -webkit-text-fill-color: transparent; /* hace que el texto sea transparente para que se pueda ver el fondo */
}
/* La clase .frase centra el texto, lo pone en cursiva, y lo colorea de verde. También añade márgenes horizontales. */
.frase-A{
	margin: 0 120px;
	text-align: center;
	font-style: italic;
	color:#fff;
}

.temario-A {
    max-width: 1250px; /* Ancho máximo para la responsividad */
    height: 700px;
    margin: 0 auto; /* Centra horizontalmente */
    border: 5px dashed white;
    display: flex;
    background: #941403;
  }

.tit-A, a {
    color: #fff;
    /* color: #fff; */
  }
  /* Estos son los Div*/
  .tem1-A, .tem2-A {
    max-width: 550px; /* Ancho máximo para la responsividad */
    height: 650px;
    padding: 5px 15px 5px 5px;
    display: flex;
    justify-content: center;
    border: 2px solid green;
    overflow: hidden;
    background-color: #941403;
    background-image: linear-gradient(50deg, transparent 90%,
                      rgb(151, 179, 207) 100% 85%, transparent 95%);
    margin: auto;
  }
  
  .tem1-A{
    margin: 15px 15px 15px 30px; /* Espacio entre los divs */
    width: 80%;
  }
  .tem2-A {
    margin: 15px 15px 15px 15px; /* Espacio entre los divs */
    width: 95%;
  }
  
  @media (max-width: 768px) {
    .tem1-A, .tem2-A {
      max-width: 100%; /* Ajusta el ancho al 100% para pantallas más pequeñas */
      height: auto; /* Altura automática para adaptarse al contenido */
      padding: 5px; /* Ajuste de padding para pantallas más pequeñas */
    }
  }

/*  * ========================================= */
/*  * ============FIN PAGINA ACCESS============ */
/*  * ========================================= */


/*  * ========================================= */
/*  * =4==========INICIO PAGINA PROJECT======== */
/*  * ========================================= */

.temario-P {
    max-width: 1250px; /* Ancho máximo para la responsividad */
    height: 700px; /* define la altura del temario */
    margin: 0 auto; /* Centra horizontalmente */
    border: 5px dashed #DAA520; /* color del borde punteado */
    display: flex; /*  */
    background: #0E713A;
  }
.cabecera-P {  /* Selecciona la clase 'cabecera' */
    margin-left: auto; /* Centra el elemento horizontalmente */
    background: linear-gradient(to left, rgb(90, 90, 248), #0E713A); /* fondo fondo degradado a la izquierda de la cabecera de color verde */
    border-radius: 15px;  /* Establece el radio del borde */
}
/* La clase .medio añade relleno vertical. */
.medio-P{
	padding: 14px 0;
}
.contenedor-P, .baner-P{  /* Selecciona las clases 'contenedor' y 'baner' */
	/* width: 90%; */  /* Establece el ancho */
	margin: 8px auto;  /* Centra el elemento horizontalmente y establece el margen vertical en 8px */
	border-radius:20px;  /* Establece el radio del borde */
    /* background: linear-gradient(to left, rgb(1, 55, 1), lightgreen);  *//* fondo degradado a la izquierda de color verde */
}
.baner-P {
    display: flex;  /* Establece el tipo de visualización del contenedor a flex */
    justify-content: space-between;  /* Distribuye las imágenes a lo largo del eje principal con un espacio igual entre ellas */
}
.baner-P {
    width: 90%;  /* Establece el ancho */
	margin: 8px auto;  /* Centra el elemento horizontalmente y establece el margen vertical en 8px */
	border-radius:20px;  /* Establece el radio del borde */
    display: flex;  /* Establece el tipo de visualización del contenedor a flex */
    justify-content: space-between;  /* Distribuye las imágenes a lo largo del eje principal con un espacio igual entre ellas */
    background: linear-gradient(to left, rgb(90, 248, 101), #0E713A); /* fondo degradado a la izquierda de color verde */
}
.baner img  {
    /* height: 50%; */
}

/* La clase .titulo centra el texto y añade relleno vertical y color verde al texto. */
.titulo-P{
	text-align: center;
	padding: 10px 0;
	color: #fff;
} 
.tit_tem-P{
    text-align: center;  /* alinea el texto al centro */
    background: -webkit-linear-gradient(left, #32C581, #0E713A); /* degradado de verde oscuro a verde claro */
    -webkit-background-clip: text; /* aplica el fondo solo al texto (para navegadores basados en WebKit como Chrome y Safari) */
    -webkit-text-fill-color: transparent; /* hace que el texto sea transparente para que se pueda ver el fondo */
}
/* La clase .frase centra el texto, lo pone en cursiva, y lo colorea de verde. También añade márgenes horizontales. */
.frase-P{
	margin: 0 120px;
	text-align: center;
	font-style: italic;
	color:#fff;
}

.temario-P {
    max-width: 1250px; /* Ancho máximo para la responsividad */
    height: 700px;
    margin: 0 auto; /* Centra horizontalmente */
    border: 4px dashed white;
    display: flex;
    background: #0E713A;
  }

.tit-P, a {
    color: #fff;
    /* color: #fff; */
  }
  /* Estos son los Div*/
  .tem1-P, .tem2-P {
    max-width: 550px; /* Ancho máximo para la responsividad */
    height: 670px;
    padding: 5px 15px 5px 5px;
    display: flex;
    justify-content: center;
    border: 3px solid green;
    overflow: hidden;
    background-color: #0E713A;
    background-image: linear-gradient(50deg, transparent 90%,
                      rgb(151, 179, 207) 100% 85%, transparent 95%);
    margin: auto;
  }
  
  .tem1-P {
    margin: 15px 15px 15px 30px; /* Espacio entre los divs */
    width: 80%;
  }
  .tem2-P {
    margin: 15px 15px 15px 15px; /* Espacio entre los divs */
    width: 95%;
  }
  
  @media (max-width: 768px) {
    .tem1-P, .tem2-P {
      max-width: 100%; /* Ajusta el ancho al 100% para pantallas más pequeñas */
      height: auto; /* Altura automática para adaptarse al contenido */
      padding: 5px; /* Ajuste de padding para pantallas más pequeñas */
    }
  }
  

/*  * ========================================= */
/*  * ============FIN PAGINA PROJECT=========== */
/*  * ========================================= */


/*  * ========================================= */
/*  * =5==========INICIO PAGINA AUTOCAD======== */
/*  * ========================================= */



/*  * ========================================= */
/*  * ============FIN PAGINA AUTOCAD=========== */
/*  * ========================================= */


/*  * ========================================= */
/*  * =6==========INICIO PAGINA PROTEUS======== */
/*  * ========================================= */


.cabecera-Pr {  /* Selecciona la clase 'cabecera' */
    margin-left: auto; /* Centra el elemento horizontalmente */
    background: linear-gradient(to left, rgb(68, 8, 75), #35034a); /* fondo fondo degradado a la izquierda de la cabecera de color verde */
    border-radius: 15px;  /* Establece el radio del borde */
}
/* La clase .medio añade relleno vertical. */
.medio-Pr {
	padding: 14px 0;
}
.contenedor-Pr, .baner-Pr{  /* Selecciona las clases 'contenedor' y 'baner' */
	/* width: 90%; */  /* Establece el ancho */
	margin: 8px auto;  /* Centra el elemento horizontalmente y establece el margen vertical en 8px */
	border-radius:20px;  /* Establece el radio del borde */
    /* background: linear-gradient(to left, rgb(1, 55, 1), lightgreen);  *//* fondo degradado a la izquierda de color verde */
}
.baner-Pr {
    display: flex;  /* Establece el tipo de visualización del contenedor a flex */
    justify-content: space-between;  /* Distribuye las imágenes a lo largo del eje principal con un espacio igual entre ellas */
}
.baner-Pr {
    width: 90%;  /* Establece el ancho */
	margin: 8px auto;  /* Centra el elemento horizontalmente y establece el margen vertical en 8px */
	border-radius:20px;  /* Establece el radio del borde */
    display: flex;  /* Establece el tipo de visualización del contenedor a flex */
    justify-content: space-between;  /* Distribuye las imágenes a lo largo del eje principal con un espacio igual entre ellas */
    background: linear-gradient(to left, rgb(68, 8, 75), #35034a); /* fondo degradado a la izquierda de color verde */
}
.baner img  {
    /* height: 50%; */
}

/* La clase .titulo centra el texto y añade relleno vertical y color verde al texto. */
.titulo-Pr {
	text-align: center;
	padding: 10px 0;
	color: #fff;
} 
.tit_tem-Pr {
    text-align: center;  /* alinea el texto al centro */
    background: -webkit-linear-gradient(left, #d7d7d7, #35034a); /* degradado de verde oscuro a verde claro */
    -webkit-background-clip: text; /* aplica el fondo solo al texto (para navegadores basados en WebKit como Chrome y Safari) */
    -webkit-text-fill-color: transparent; /* hace que el texto sea transparente para que se pueda ver el fondo */
}
/* La clase .frase centra el texto, lo pone en cursiva, y lo colorea de verde. También añade márgenes horizontales. */
.frase-Pr {
	margin: 0 120px;
	text-align: center;
	font-style: italic;
	color:#fff;
}

.temario-Pr {
    max-width: 1250px; /* Ancho máximo para la responsividad */
    height: 700px;
    margin: 0 auto; /* Centra horizontalmente */
    border: 4px dashed white;
    display: flex; /* coloca los div en fila */
    background: #35034a; /* color de fondo del temario */
  }

.tit-Pr, a {
    color: #fff;
    /* color: #fff; */
  }
  /* Estos son los Div*/
  .tem1-Pr, .tem2-Pr{
    max-width: 550px; /* Ancho máximo para la responsividad */
    height: 670px;
    padding: 5px 15px 5px 5px;
    display: flex;
    justify-content: center;
    border: 2px solid white;
    overflow: hidden; /*  */
    background-color: #35034a;
    background-image: linear-gradient(50deg, transparent 90%,
                      rgb(151, 179, 207) 100% 85%, transparent 95%);
    margin: auto;
  }
  
  .tem1-Pr {
    margin: 15px 15px 15px 30px; /* Espacio entre los divs */
    width: 80%;
  }
  .tem2-Pr {
    margin: 15px 15px 15px 15px; /* Espacio entre los divs */
    width: 95%;
  }
  
  @media (max-width: 768px) {
    .tem1-Pr, .tem2-Pr {
      max-width: 100%; /* Ajusta el ancho al 100% para pantallas más pequeñas */
      height: auto; /* Altura automática para adaptarse al contenido */
      padding: 5px; /* Ajuste de padding para pantallas más pequeñas */
    }
  }

/*  * ========================================= */
/*  * ============FIN PAGINA PROTEUS=========== */
/*  * ========================================= */


/*  * ========================================= */
/*  * =7==========INICIO PAGINA CONTACTO======= */
/*  * ========================================= */



/*  * ========================================= */
/*  * ============FIN PAGINA CONTACTO========== */
/*  * ========================================= */



/*  * ========================================= */
/*  * ============PIE DE PAGINA================ */
/*  * ========================================= */
.pie{
    width: 90%;  /* Establece el ancho del elemento al 90% del contenedor padre */
	/* background: #788596; */  /* Establece el color de fondo del elemento a un gris azulado */
    background: linear-gradient(to left, rgb(1, 55, 1), #788596);
    border-radius: 15px;  /* Hace que las esquinas del elemento sean redondas */
    margin: 15px 0 15px 55px;  /* Establece los márgenes alrededor del elemento */
    display: flex;  /* Establece el tipo de visualización del elemento a flex */
    justify-content: space-between;  /* Distribuye los elementos hijos a lo largo del eje principal con un espacio igual entre ellos */
}
.derechos{
	color: #fff;  /* Establece el color del texto a blanco */
	padding: 30px 30px;  /* Establece el relleno alrededor del texto */
}
.pie-social-icons a {
    border-radius: 50%;  /* Hace que las esquinas del enlace sean redondas, creando un efecto de círculo */
    margin-left: 25px;  /* Establece un margen a la izquierda del enlace */
    color: inherit;  /* Hereda el color del elemento padre */
    display: flex;  /* Establece el tipo de visualización del enlace a flex */
    height: 1em;  /* Establece la altura del enlace a 1em (el tamaño actual de la fuente) */
    line-height: 2em;  /* Establece la altura de línea del enlace a 2em (dos veces el tamaño actual de la fuente) */
    text-align: center;  /* Centra el texto dentro del enlace */
    transition: background-color .15s ease;  /* Añade una transición al color de fondo del enlace que dura .15 segundos */
    width: 2em;  /* Establece el ancho del enlace a 2em (dos veces el tamaño actual de la fuente) */
}
.pie-social-icons li {
    display: inline;  /* Hace que los elementos de la lista se muestren en línea */
}
.col-sm-3 {
    min-height: 1px;  /* Establece la altura mínima del elemento a 1px */
    padding-top: 15px;  /* Establece el relleno superior del elemento a 15px */
    padding-right: 10px;  /* Establece el relleno derecho del elemento a 10px */
    position: relative;  /* Establece la posición del elemento a relativa */
    float:right;  /* Hace que el elemento flote a la derecha */
    width: 15%  /* Establece el ancho del elemento al 15% del contenedor padre */
}
.servicios:hover  {  /* Selecciona la clase 'servicios' cuando se pasa el cursor sobre ella */
	transform:rotate(360deg);  /* Rota el elemento 360 grados */
    transition:all 1s;  /* Establece la duración de la transición en 1 segundo */
    
}
.subtitulo:hover {
    color: #ff0000;  /* Cambia el color del texto a rojo */
    transition: all 1s;  /* Establece la duración de la transición en 1 segundo */
}

.img-pie {
    border: 1px solid white;  /* Establece el borde del elemento a 1px y de color blanco */
    display: flex;  /* Establece el tipo de visualización del elemento a flex */
    justify-content: space-evenly;  /* Distribuye los elementos hijos a lo largo del eje principal con un espacio igual entre ellos */
    height: 170px;  /* Establece la altura del elemento a 170px */
}