/**********
  header home
  */

	/* general 1 */


	.banner__principal {
		font-size: 16px;
		/*min-height: 100vh;*/
		color: #fff;
		margin-bottom: 3.12em;
		display: flex;
		align-items: center;
		max-width: 1200px;
		margin: 0 auto;
		flex-direction: row;
		width: 100%;
		padding: 160px 0 60px 0;
	}

	.banner__principal .contenedorhead {
		width: 50%;
		padding: 0 15px;
	}

	.banner__principal .titulo {
		font-weight: 600;
		line-height: 40px;
  		font-size: 35px;	
  		margin-bottom: 24px;
		color:#fff;
	}

	.banner__principal .descripcion {
		font-weight: normal;
		margin-bottom: 1.25em;
		color:#fff;
		font-size: 20px;
		line-height: 23px;
	}
	.banner__principal .descripcion a{
		color: #fff;
		text-decoration: underline;
	}
		

	@media (max-width: 767px) {
		.banner__principal {
			flex-direction: column;	
			padding: 100px 0 60px 0;
		}

		.banner__principal .contenedorhead {
			margin: 0 30px;
			width: 100%;
			/*min-height: 50vh;*/
		}
		
		.banner__principal .titulo {
			font-size: 28px;
			margin-bottom: 0.4em;
  			line-height: 35px;
  			text-align: center;
		}
		
		.banner__principal .descripcion {
			font-weight: normal;
			font-size: 14px;
			line-height: 1.75em;
			text-align: center;		
			margin: 0 auto 15px auto;
		}
    }




  	/*******
	Home : como funciona
	*/

	h2.homeh2 {
		margin-bottom: 25px;
	  text-align: center;
		font-size: 35px;
		font-weight: 600;
	}

  	h4.homeh4 {
		color: #444;
		font-size: 24px;
		font-weight: 500;
		font-size: 20px;
		line-height: 22px;
  	}

  	h4.homeh4:hover {
	  	color: #ff5900;
  	}

  	p {
		color: #333;
		font-size: 14px;
	  	margin: 0 0 15px;
		color: #444;
  	}
  	.opcionescomo_funciona {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		justify-content: center;
		gap:20px;
   	}

/* Estilos para pantallas más pequeñas (3 cajas por fila) */
@media (max-width: 900px) {
	.opcionescomo_funciona {
	  grid-template-columns: repeat(3, 1fr);
	}
  }
  
  /* Estilos para pantallas aún más pequeñas (2 cajas por fila) */
  @media (max-width: 700px) {
	.opcionescomo_funciona {
	  grid-template-columns: repeat(2, 1fr);
	}
  }
  
  /* Estilos para pantallas muy pequeñas (1 caja por fila) */
  @media (max-width: 548px) {
	.opcionescomo_funciona {
	  grid-template-columns: 1fr;
	}
  }
  




  .opcion__como_funciona{
	  	display: flex;
		flex-direction: column;
		/*justify-content: center;*/
	  	max-width: 300px;
	  	align-items: start;
		/*  height: 250px;*/
	  	padding: 20px;
  	}