/* Variables globales para fácil mantenimiento */
        :root {
            --color-principal: rgba(41, 3, 86, 1.00);
            --color-principal-rgb: 41, 3, 86;
            --sombra-suave: 0 20px 30px -10px rgba(121, 121, 121, 0.7);
            --sombra-fuerte: 0 20px 30px 7px rgba(121, 121, 121, 0.8);
            --border-radius: 10px;
            --fuente-titulos: 'Athene Voyage', serif;
            --fuente-texto: 'Atlan', sans-serif;
        }

        /* Reset y estilos base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            overflow-x: hidden; /* Evita scroll horizontal */
			background-color:rgba(245,245,235,1.00);
			 font-family: 'Atlan';
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

/*contenedor*/
    .contenedor {
      width: 100%;
      min-height: 100vh; /* ocupa toda la pantalla como en la imagen (sensación hero) */
      display: flex;
      flex-direction: column;
    }


 /* ===== CONTENEDOR 1  ===== */
.cont_1{
	margin-top: 80px;
	display: flex;
	padding: 2%;
	align-content: center;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.cont_1 .img{
	width: 600px;
}

.cont_1 .text {
	width: 300px;
	margin: 3%;
}

.cont_1 .text h1 {
	 font-family: 'Athene Voyage';
	color:rgba(40,3,84,1.00);
	font-size:35px;
	margin-bottom: 2%;
	text-align: right;
}

.cont_1 .text p{
	 font-family: 'Atlan';
	font-zize: 18px;
	text-align: right;
	color:rgba(40,3,84,1.00);
}

@media (min-width: 576px) and (max-width: 767px) {
	.cont_1 .img{
	width: 400px;
    }

	.cont_1 .text h1 {
		font-size: 20px;
	}
	
	.cont_1 .text p{
		font-size: 14px;
	}
}

@media (max-width: 575px){
	
	.cont_1 .img{
	width: 330px;
    }
	
	.cont_1 .text h1 {
		font-size: 18px;
	}
	
	.cont_1 .text p{
		font-size: 12px;
	}
}

 /* ===== CONTENEDOR 2  ===== */
 .cont_2{
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	justify-content: center;
	padding: 4% 0px;
   background:rgba(240,216,144,1.00);
}

.cont_2 h2 {
	margin: 0px 3%;
	 font-family: 'Athene Voyage';
	color:rgba(40,3,84,1.00);	
	font-size:30px;
	letter-spacing: 0.7px;
	
}

.cont_2 .social-handles {
	display: flex;
	flex-direction: row;
	justify-content: center;
    gap: 20px;
}

.cont_2 .social-handles .handle-item {
    display: flex;
  align-items: center;
  gap: 12px;
  background:rgba(42,3,90,1.00);
  padding: 3px 18px;
  margin: 0px 10px;
  border-radius: 60px;
  box-shadow: 0 10px 25px -5px rgba(42, 3, 89, 0.15);
  transition: all 0.3s ease;
  border: 1px solid rgba(107, 63, 160, 0.1);
  position: relative;
  overflow: hidden;
}

.cont_2 .handle-item .fab {
  font-size: 18px;
  color: rgba(239,229,214,1.00);
  transition: all 0.3s ease;
  text-decoration: none;
}

.cont_2 .social-handles .handle-item .socialmedia {
      font-family: 'Atlan', sans-serif;
  font-size: 15px;
  margin: 2%;
  font-weight: 500;
color: rgba(236,226,212,1.00);
	text-decoration: none;
	padding: 2%;
	font-weight: 600;
}

.handle-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 30px -8px rgba(42, 3, 89, 0.6); 
}

.handle-item:hover .fa-instagram {
  color: #e4405f;
}

.handle-item:hover .fa-facebook {
  color: #1877f2;
}

.handle-item:hover .fa-tiktok {
  color: #000000;
}

.handle-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(41,3,86,1.00), transparent);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.handle-item:hover::after {
  transform: translateX(100%);
}

.handle-item:hover .fab {
  animation: bounce 0.5s ease;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

/* ===== MEJORAS PARA SOCIAL HANDLES ===== */
.handle-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
  z-index: 0;
}

.handle-item:hover::before {
  left: 100%;
}

.handle-item .fab {
  position: relative;
  z-index: 1;
}

.handle-item .socialmedia {
  position: relative;
  z-index: 1;
}

.handle-item:hover .socialmedia {
  color: #6B3FA0;
}


@media (min-width: 576px) and (max-width: 767px){
	.cont_2 {
		display: flex;
		flex-direction: column;
	}
	
	.cont_2 h2{
		font-size: 20px;
	}
	.cont_2 .social-handles {
	flex-direction: column;
	 margin-top: 2%;
    }
	
		.cont_2 .social-handles .handle-item {
		margin: 5px 0px;
	}
	
    .cont_2 .social-handles .handle-item .fab {
      font-size:14px;
     }

     .cont_2 .social-handles .handle-item .socialmedia {
       font-size:14px;
     }

	
}

@media (max-width: 575px){
	.cont_2 {
		display: flex;
		flex-direction: column;
	}
	
	.cont_2 h2{
		font-size: 18px;
	}
	
	.cont_2 .social-handles {
	display: flex;
	flex-direction: column;
	margin: 2%;
}
	.cont_2 .social-handles .handle-item {
		margin: 3% 0px;
		font-size: 12px;
		padding: 2px 16px;
	}
	    .cont_2 .social-handles .handle-item .fab {
      font-size:12px;
     }
		.cont_2 .social-handles .handle-item .socialmedia{
		font-size: 12px;
	}
}


/*cont_3*/
.cont_3 {
	display: flex;
	padding: 3%;
	background: rgba(41,3,86,1.00);
	justify-content: center;
	align-content: center;
	align-items: center; 
}

.cont_3 .img {
	width: 400px;
	object-fit: cover; 
	height: auto;
}

.cont_3 .text{
	margin:3%;
	width: 400px;
	padding: 2px;
}

.cont_3 .text h1{
	font-family: 'Athene Voyage';
	color:rgba(245,245,235,1.00);	
	font-size:35px;
	
}

.cont_3 .text p{
	margin: 4% 0px;
	color:rgba(245,245,235,1.00);
	font-size: 15px;
}

.cont_3 .text a{
	text-decoration: none;
	padding: 3px 15px;
	font-weight: 600;
	margin-top: 5%;
	font-size: 14px;
	transition: all 0.3s ease;
	background: rgba(235,225,214,1);
    border-radius: 30px;
	font-weight: 600;
}

.cont_3 .text a:hover {
    transform: scale(1.05);
	background:rgba(222,222,222,1.00);
}

@media (max-width: 767px) {
	.cont_3 .text h1{
		font-size: 20px;
	}
	
	.cont_3 .text p{
		font-size: 12px;
	}
	
	.cont_3 .text a{
		font-size: 12px;
		padding:2px 10px;
	}
	
}

/*cont_4*/
.cont_4{
	display: flex;
	padding: 5% 3%;
	justify-content: center;
	align-content: center;
	align-items: center; 
}

.cont_4 .img {
	width: 400px;
	object-fit: cover; 
	height: auto;
}

.cont_4 .text{
	margin:3%;
	width: 400px;
	padding: 2px;
}

.cont_4 .text h1{
	font-family: 'Athene Voyage';
	color:rgba(41,3,86,1.00);	
	font-size:30px;
	
}

.cont_4 .text p{
	margin: 4% 0px;
	color:rgba(41,3,86,1.00);	
	font-size: 15px;
}



/* Botón */
.cont_4 .text a {
  display: inline-block;
  text-decoration: none;
  background: linear-gradient(0deg, rgb(40, 4, 84), rgb(66, 3, 142));
  border-radius: 30px;
  padding: 4px 20px;
  color: rgba(245, 245, 235, 1);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  clear: both;
}

.cont_4 .text a:hover {
  transform: scale(1.05);
  background: linear-gradient(0deg, rgb(50, 6, 100), rgb(76, 5, 160));
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}