@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900,100);
@import url(https://fonts.googleapis.com/css?family=Rowdies:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);

	/* Estilos generales */
	 body {
		font-family: 'Roboto', sans-serif;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
		width: 100%;
		height: 100%;
		color: whitesmoke;
	}
		
	h2 {
		text-align: center;
		font-family: "Rowdies";
		font-size: xxx-large;
		color: cornsilk;
	}
	
	/* Estilos del formulario */
	.form-group {
		margin-bottom: 20px;
	}
	
	label {
		display: block;
		font-weight: normal;
	}
	
	input[type="text"],
	input[type="file"],
	input[type="tel"],
	input[type="number"],
	textarea {
		font-family: 'Roboto', sans-serif;
		width: 95%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 16px;
		background-color: lightgreen;
	}
	
	select {
		width: 95%;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 16px;
		background-color: #bfc;
		margin-bottom: 10px;
		font-family: "Roboto";
	}
	
	button[type="button"],
	input[type="file"],
	input[type="submit"] {
		font-family: 'Paytone One', sans-serif;
		background-color: #4dbd33;
		color: #fff;
		border: none;
		padding: 10px;
		font-size: 16px;
		cursor: pointer;
		border-radius: 5px;
		width: 95%;
		text-transform: uppercase;
	}
	button[type="file"]:hover,
	button[type="button"]:hover,
	input[type="submit"]:hover {
		font-family: 'Paytone One', sans-serif;
		background-color: #38eb49;
		width: 95%;
	}
	
	/* Estilos de la vista previa */
	.vista-previa {
		background-color: #f0f0f0;
		padding: 20px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin: auto;
		width: 500px;
		margin-bottom: 200px;
		margin-top: 100px;
	}
	
	.vista-previa h2 {
		text-align: center;
		margin-bottom: 20px;
		color: #6b7280;
		margin-top: -10px;
		font-size: larger;
		

	}
	
	.productos-previa {
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
	}
	
	.producto-previa {
		padding: 10px;
		margin: 10px 0;
		border: 1px solid #ddd;
		border-radius: 5px;
		font-weight: normal;
		font-size: small;
	}
	
	.producto-previa .nombre-previa {
		margin-bottom: 5px;
		font-size: 1.17em;
		font-weight: bold;
		font-family: "Roboto";

	}
	
	.producto-previa .descripcion-previa {
		margin-top: -5px;
		font-family: 'Roboto';
	}
	
	/* Estilos de la paleta de colores */
	.paleta-color {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	
	.paleta-color label {
		display: inline-block;
		width: 20%;
		text-align: center;
	}
	
	.paleta-color input[type="radio"] {
		display: none;
	}
	
	.paleta-color .color-box {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		border: 2px solid #fff;
		cursor: pointer;
	}
	
	.paleta-color .color-box:hover {
		border: 2px solid #38eb49;
	}
	
	/* Estilos de los mensajes de éxito o error */
	.mensaje {
		padding: 10px;
		margin-top: 20px;
		text-align: center;
		border-radius: 5px;
	}
	
	.mensaje.success {
		background-color: #d4edda;
		border: 1px solid #c3e6cb;
		color: #155724;
	}
	
	.mensaje.error {
		background-color: #f8d7da;
		border: 1px solid #f5c6cb;
		color: #721c24;
	}
	.formulario { 
		width: 80%; 
		margin: auto;
	}
	.boton {
	cursor: pointer;
	user-select: none;
	padding: 5px 10px;
	background-color: #eee;
	border: 1px solid #ddd;
	}
	
	.boton:hover {
	background-color: #ddd;
	}
	
	.boton-moderno {
	background-color: #4CAF50;
	color: white;
	padding: 12px 24px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: bold;
	transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
	margin: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	display: block; /* Hace que el botón ocupe el ancho completo de su contenedor */
	width: 100%; /* Asegúrate de que el botón se expanda a todo el ancho */
	margin: 20px 0 15px auto; /* Espacio entre el total y el botón */
	
	}
	
	.boton-moderno:hover {
	background-color: #45a049;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
	}
	
	.boton-moderno:active {
	background-color: #3e8e41;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transform: translateY(1px);
	}
	
	.cantidad {
		display: flex;
		align-items: center;
		justify-content: flex-start; /* O 'center' si prefieres centrar los botones */
	}
	
	.cantidad .boton {
		padding: 2px 5px; /* Reduce el relleno para hacer el botón más pequeño */
		font-size: 12px; /* Reduce el tamaño de la fuente */
		margin-right: 5px; /* Espacio entre los botones */
		color: black;
	}
	
	.cantidad input.cantidad-input {
		width: 40px; /* Reduce el ancho del campo de entrada */
		margin: 0 5px; /* Espaciado alrededor del campo de entrada */
		text-align: center; /* Asegura que el texto esté centrado dentro del input */
		padding: 2px;
		margin-right: 10px;
	}

	/* Estilos para el header */
	.header {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 100%;
		backdrop-filter: blur(10px); /* Aplica el efecto de desenfoque */
		z-index: 1000; /* Asegura que esté en la parte superior */
		height: 50px;
		border-bottom: 1px solid rgba(244, 244, 244, 0.5);
		background-color: rgba(255, 255, 255, 0.5);
		flex-direction: 
	}
	
	/* Aplicar el desenfoque */
	.header::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

	}
	
	/* Estilos para el contenedor del logotipo y textos */
	.logo-container {
		display: flex;
		align-items: center;
	}
	
	/* Estilos para el logotipo */
	.logo img {
	max-width: 90px;
	height: auto;
	display: block;
	margin-top: 33px;
	}
	
	/* Estilos para los textos a la izquierda y derecha del logotipo */
	.text-left,
	.text-right {
		color: white;
		flex: 1;
		text-align: center;
		padding: 10px;
		box-sizing: border-box;
	}
	


	.texto-con-fondo {
	  background-color: rgb(34 195 34 / 70%); 
	  color: white; /* Texto en blanco para que sea legible en el fondo negro */
	  padding: 20px; /* Espacio de 4px alrededor del texto */
	  font-family: "Rowdies";
	  font-weight: 700;
	  font-size: 55px; /* Ajusta el tamaño de fuente según tus necesidades */
	  max-width: 65%;
	  margin-left: -10px;
	  padding-right: 150px;
	  border-radius: 8px;

	}
	/* Estilos para el contenedor del formulario */
	.formulario-container {
		border: 1px solid white; /* Borde blanco sólido */
		border-radius: 10px; /* Bordes redondeados */
		box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); /* Sombra interna */
		padding: 20px; /* Espacio interior */
		margin: 20px auto; /* Margen exterior */
		max-width: 80%; /* Ancho máximo del contenedor */
		background-color: rgba(0, 0, 0, 0.2); /* Fondo con transparencia */
	}
	.carrusel {
	  width: 100%;
	  max-width: 600px; /* Ajusta al tamaño deseado */
	  margin: auto;
	  overflow: hidden;
	}
	
	.foto {
	  position: absolute;
	  width: 100%;
	  opacity: 0;
	  transition: opacity 1s ease-in-out;
	  top: 50%;
	  right: -20%; /* Ajusta el valor según sea necesario */
	  transform: translateY(-50%);
	  width: 45%;
	  height: auto;
	  z-index: 1;
	}
	
	.foto.activa {
	  opacity: 1;
	}
	.contenedor-planes {
		display: flex;
		justify-content: center;
		align-items: stretch;
		gap: 20px;
		padding: 20px;
		margin: auto;
		width: 80%;
	}
	
	.plan {
		flex-grow: 1;
		padding: 20px;
		border-radius: 10px;
		color: white;
		text-align: center;
	}
	
	.plan-verde {
		background-color: #388e3c;
		width: 200px;
		font-size: small;
	}
	
	.plan-verde-oscuro {
		background-color: #285c2c;
		width: 200px;
		font-size: small;
	}
	
	.precio {
		font-size: 2em;
		margin-bottom: 15px;
	}
	
	ul {
		list-style: none;
		padding: 0;
	}
	
	li {
		margin-bottom: 10px;
	}
	
	.boton-whatsapp {
		background-color: #25D366;
		color: white;
		padding: 10px 20px;
		text-decoration: none;
		border-radius: 5px;
		margin-top: 15px;
		display: inline-block;
	}
	
	.header-text {
		text-align: center;
		margin-bottom: 20px;
		font-size: 24px;
	}
	

	.header-text {
		text-align: center;
		margin-bottom: 20px;
		font-size: 24px;
		font-weight: bold;
	}
	

	
	.plan {
		border: 2px solid #39752b;
		border-radius: 5px;
		padding: 15px;
		width: 250px;
	}
	
	.plan h2, .plan .precio {
		color: white;
		text-align: center;
		padding: 10px;
		margin: 0;
	}
	
	.plan.gratis {
		background-color: #4CAF50;
	}
	
	.plan.pagado {
		background-color: #388E3C;
	}
	
	.plan.tailor {
		background-color: #4CAF50;
	}
	
	.plan ul {
		list-style: none;
		padding: 0;
	}
	
	.plan li {
		margin-bottom: 10px;
	}
	
	.plan button {
		background-color: #4CAF50;
		color: white;
		border: none;
		padding: 10px;
		text-align: center;
		display: block;
		width: 100%;
		cursor: pointer;
	}
	
	.plan button:hover {
		background-color: #388E3C;
	}
	
	.pricing {
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	}
	.pricing .plan {
	  background-color: #39752b;
	  pdding: 2.5rem;
	  margin: 12px;
	  border-radius: 5px;
	  text-align: center;
	  transition: 0.3s;
	  cursor: pointer;
	}
	.pricing .plan h2 {
	  font-size: 32px;
	  margin-bottom: 12px;
	}
	.pricing .plan .price {
	  margin-bottom: 1rem;
	  font-size: 30px;
	}
	.pricing .plan ul.features {
	  list-style-type: none;
	  text-align: left;
	}
	.pricing .plan ul.features li {
	  margin: 8px;
	}
	.pricing .plan ul.features li .fas {
	  margin-right: 4px;
	}
	.pricing .plan ul.features li .fa-check-circle {
	  color: #6ab04c;
	}
	.pricing .plan ul.features li .fa-times-circle {
	  color: #eb4d4b;
	}
	.pricing .plan button {
	  border: none;
	  width: 100%;
	  padding: 12px 35px;
	  margin-top: 1rem;
	  background-color: #6ab04c;
	  color: #fff;
	  border-radius: 5px;
	  cursor: pointer;
	  font-size: 16px;
	}
	.pricing .plan.popular {
	  border: 2px solid #6ab04c;
	  position: relative;
	}
	.pricing .plan.popular span {
	  position: absolute;
	  top: -20px;
	  left: 50%;
	  transform: translateX(-50%);
	  background-color: #6ab04c;
	  color: #fff;
	  padding: 4px 20px;
	  font-size: 18px;
	  border-radius: 5px;
	}
	.pricing .plan:hover {
	  box-shadow: 5px 7px 67px -28px rgba(0, 0, 0, 0.37);
	}
	.boton-whatsapp {
		background-color: #25D366;
		color: white;
		padding: 10px 20px;
		text-decoration: none;
		border-radius: 5px;
		margin-top: 15px;
		display: inline-block;
	}
	
	.image-section {
		flex: 1;
		min-width: 280px;
		max-width: 600px;
		padding: 20px;
	  }
	  .image-section img {
		width: 100%;
		max-width: 400px;
		height: auto;
		border-radius: 8px;
	  }
	  
	  .container2 {
		  display: flex;
		  flex-wrap: wrap;
		  align-items: center;
		  justify-content: center;
		  padding: 20px;
		}
	  .boton-no-validado {
		  background-color: red!important;
		  color: white;
	  }
	  
	/* Estilos responsivos */
	@media (max-width: 980px) {
		.container {
			flex-direction: column;
			align-items: center;
		}
		
		.paleta-color label {
			width: 20%;
			margin-top: 5%;
			margin-bottom: 35%;
		}
		
		.hero--image {
			left: 47%;
			width: 60%;
		}
		.hero--text2 {

			width: 185px;
			margin-left: -5px;
			font-weight: 500;
			font-size: 12px;
			line-height: 12px;
		}

		.logo {
			margin: auto;
		}
		.logo img {
			max-width: 90px; /* Asegura que el logo no supere el ancho del contenedor */
			margin-top: 0px;
		}
		.hero {
			background-size: cover;
			background-attachment: scroll; /* Otras opciones como 'scroll', 'fixed', etc. */
		}
		.vista-previa {
			width: 85%;
			margin-bottom: 40px;
			margin-top: 50px;
		}
		.texto-con-fondo {
		  background-color: rgb(34 195 34 / 70%);
		  padding: 10px; /* Espacio de 4px alrededor del texto */
		  display: table-caption; /* Hace que el fondo se ajuste al texto */
		  margin-left: -5px;
		  width: 200px;
		  font-size: 26px;
		  border-radius: 8px;
		  padding-right: 150px;
		}
		.hero--content {
		  left: 50%; 
		  }
		
		.pricing .plan {
			width: 300px;
			margin-bottom: 20px;
		
		}
		.pricing .plan.popular {
		}