/* importacion de fuentes */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins','sans-serif';
}
html{
	scroll-behavior: smooth;
}

/* SECCION DE INICIO MENU */
.inicio .contenido {
	max-width: 1200px;
	margin: auto;
	color: #fff;
}

.inicio header {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 5%;
	align-items: center;
	z-index: 100;
	background: linear-gradient(to right, #0e9ddf, #0364e4, #0c3f8b);
}

.inicio .logo {
	display: flex;
	align-items: center;
	color: #00deef;
	font-size: 50px;
}

.inicio .logo img{
	height: 40px;
}

.inicio nav ul{
	list-style: none;
}

.inicio nav ul li {
	float: left;
	position: relative;
}

#inicio nav ul li a{
	font-size: 15px;
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 5px 10px;
	border: 2px solid transparent;
	border-radius: 15px;
}

#inicio header nav ul li ul {
	position: absolute;
	right: 0;
	width: 300px;
	background: linear-gradient(to right, rgba(11, 130, 241, 0.5), rgba(17, 94, 238, 0.5), rgba(0, 50, 212, 0.5));
	display: none;
	border-radius: 10px;
}

#inicio header nav ul li ul li a{
	font-size: 15px;
	text-transform: capitalize;
}

#inicio header nav ul li ul li {
	width: 100%;
}

#inicio header nav ul li:hover > ul {
	display: initial;
}

#inicio header nav a:hover {
	transition: .3s;
	border-radius: 15px;
 	background-color: #fff;
 	color: #3345e9;
}

.navegacion a:active {
	background-color: #87dbd0;
   }

.inicio .redes a{
	text-decoration: none;
	color: #fff;
	display: inline-block;
	margin: 0 10px;
}

.inicio .redes a:hover {
	color: #3345e9;
}


  /* redes */
  .social-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #f2f2f2; */
    /* box-shadow: 0px 0px 15px #00000027; */
    padding: 8px 6px;
    border-radius: 5em;
  }
  
  .social-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px; /* Reducido el ancho */
    height: 30px; /* Reducido el alto */
    border-radius: 50%;
    margin: 0 6px; /* Reducido el margen */
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.27); /* Simplificado el box-shadow */
    transition: 0.3s;
  }
  
  .social-button:hover {
    background-color: #f2f2f2;
    box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.27); /* Simplificado el box-shadow */
  }
  
  .social-buttons svg {
    transition: 0.3s;
    height: 14px; /* Reducido el tamaño del icono */
    width: auto; /* Ajustado para mantener la relación de aspecto */
  }
  
  .facebook {
    background-color: #2549e7;
  }
  
  .facebook svg {
    fill: #f2f2f2;
  }
  
  .facebook:hover svg {
    fill: #4267B2;
  }

  .instagram {
    background-color: #c13584;
  }
  
  .instagram svg {
    fill: #f2f2f2;
  }
  
  .instagram:hover svg {
    --instagram-white: #fff;
    --instagram-blue: #3051f1;
    --instagram-purple: #c92bb7;
    --instagram-red: #f73344;
    --instagram-orange: #fa8e37;
    --instagram-yellow: #fcdf8f;
    --instagram-yellow_to: #fbd377;
  
    background: radial-gradient(
        circle farthest-corner at 28% 120%,
        var(--instagram-yellow) -16%,
        var(--instagram-yellow_to) 16%,
        var(--instagram-orange) 32%,
        var(--instagram-red) 48%,
        transparent 64%
      ),
      linear-gradient(0deg, var(--instagram-red) 16%, transparent 72%),
      linear-gradient(
        145deg,
        var(--instagram-blue) -48%,
        var(--instagram-purple) 24%
      );
  }
  
  
  

#toggle,
#inicio label {
	display: none;
	cursor: pointer;
}

#inicio .menu {
	width: 45px;
	height: 25px;
	color: #fff;
}

@media(max-width:950px) {
	#inicio label {
		display: initial;
	}

	#inicio {
		padding: 20px 10%;
	}

	label[for="toggle"] .menu {
		filter: invert(50%) sepia(100%) saturate(200%) hue-rotate(180deg);
	  }
	  

	#inicio nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: linear-gradient(90deg, rgb(13, 13, 165) 28%, rgb(0, 44, 187) 100%);
		display: none;
	}

    .inicio .logo img {
        height: 35px;
    }

	#inicio nav ul li {
		width: 100%;
	}

	#inicio nav ul li a {
		padding: 6px 10px 6px 10%;
	}

	#inicio nav ul li ul {
		position: fixed;
        top: 100%;
        left: 40%;
		padding: 10px 15px;
        transform: translateX(-50%);
		transform: translateY(-20%);
        max-height: 450px;
        overflow-y: auto;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
        visibility: hidden;
		z-index: 999; /* Aumenta el z-index para asegurar que se muestren sobre el menú principal */
	}

	#inicio nav ul li ul li {
		width: 100%;
		cursor: pointer;
	}

	#inicio nav ul li ul li a {
		font-size: 7px;
		padding: 6px 10px;
		
	}

    #toggle:checked~nav ul li ul {
        max-height: 500px;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 1;
        visibility: visible;
    }

    /* Estilos para mejorar la legibilidad */
    #inicio nav ul li ul {
        box-shadow: 0 2px 5px rgba(12, 15, 202, 0.2);
        border-radius: 4px;
		width: 240px;
    }

	#toggle:checked~nav {
		display: block;
	}

}

/* --------------------------------------------------------------------- */
/* BIENVENIDA */
/* ---------------------------------------------------------------------- */

.image-container {
    position: relative;
    width: 100%; /* contenedor ocupe todo el ancho disponible */
    min-height: 600px; /* Define una altura específica para un diseño más flexible */
    overflow: hidden; /* contenido no se desborde */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white; /* Color del texto */
}

.overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: -1; /* Overlay esté detrás del contenido */
}

.overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* imagen cubra todo el espacio disponible */
    position: absolute;
    z-index: -2; /* imagen esté detrás del overlay */
}

.overlay h1 {
    z-index: 1; /* texto esté delante del overlay */
    margin-top: 0; /* Ajusta el margen superior según sea necesario */
    font-family: "Satisfy", cursive;
    font-weight: 400;
    font-size: 70px;
    text-align: center;
}

/* responsive adaptar el diseño a diferentes tamaños de pantalla */
@media (max-width: 768px) {
    .image-container {
        height: 300px; /* Ajusta la altura para pantallas más pequeñas */
    }

    .overlay h1 {
        font-size: 24px; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    .image-container {
        height: 200px; /* Ajusta aún más la altura para pantallas muy pequeñas */
    }

    .overlay h1 {
        font-size: 18px; /* Reduce el tamaño de la fuente para pantallas muy pequeñas */
    }
}


/* -------------------------------------------------------------------- */
/* PARTE 2 */
/* --------------------------------------------------------------------- */

.contenedor2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Ajusta la altura al 100% de la ventana del navegador */
    padding: 20px; /* Espacio alrededor del contenido */
   }
   
   .titulo2, .parrafo2 {
    max-width: 800px;
    line-height: 30px;
    text-align: center; /* Centra el texto dentro del título y párrafo */
   }
   
   /* Media query para pantallas pequeñas */
   @media (max-width: 600px) {
    .contenedor2 {
       padding: 10px; /* Reduce el padding en pantallas pequeñas */
    }
   }
   
/* -------------------------------------------------------------------------- */
/* PARTE 3 */
/* --------------------------------------------------------------------------- */

.contenedor3 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card3 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  padding: 2px;
  border-radius: 24px;
  overflow: hidden;
  line-height: 1.6;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 34px;
  border-radius: 22px;
  color: #ffffff;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.content3 .heading3 {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.3;
  z-index: 1;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
  text-align: center;
}

.content3 .para3 {
  z-index: 1;
  opacity: 0.8;
  font-size: 15px;
  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.card3::before {
  content: "";
  position: absolute;
  height: 160%;
  width: 160%;
  border-radius: inherit;
  background: #0a3cff;
  background: linear-gradient(to right, #0a3cff, #0a3cff);
  transform-origin: center;
  animation: moving 4.8s linear infinite paused;
  transition: all 0.88s cubic-bezier(0.23, 1, 0.32, 1);
}

.card3:hover::before {
  animation-play-state: running;
  z-index: -1;
  width: 20%;
}

.card3:hover .content3 .heading3,
.card3:hover .content3 .para3 {
  color: #000000;
}

.card3:hover {
  box-shadow: 0rem 6px 13px rgba(10, 60, 255, 0.1),
    0rem 24px 24px rgba(10, 60, 255, 0.09),
    0rem 55px 33px rgba(10, 60, 255, 0.05),
    0rem 97px 39px rgba(10, 60, 255, 0.01), 0rem 152px 43px rgba(10, 60, 255, 0);
  scale: 1.05;
  color: #000000;
}

@keyframes moving {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* boton de incripcion */

.content3 .btn-formu {
  color: #e8e8e8;
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
  border-radius: 5px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.5s ease;
}

@media (max-width: 768px) {
  .contenedor3 {
    gap: 25px;
    justify-content: center;
  }
}


/* ------------------------------------------------------------------------- */
/* seccion del footer */
/* ------------------------------------------------------------------------ */

.footer {
  background-color: #333;
  color: #fff;
  padding: 2rem 0;
}

.container-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.row-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.col-footer {
  flex-basis: calc(33.333% - 20px);
  text-align: center;
  justify-content: center;
  align-items: center;
}

.col-footer h3 {
  font-size: 25px;
  margin-bottom: 1rem;
}

.btn-wspinfo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.btn-wspinfo a{
  text-decoration: none;
}

.contact-btn {
  background-color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 15px;
  padding: 10px 15px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.contact-btn:hover {
  background-color: rgba(22, 241, 114, 0.849);
  color: #fff;
}

.contact-btn i {
  margin-right: 5px;
  font-size: 18px;
}


.social-links {
  list-style-type: none;
  padding-left: 0;
}

.social-links li {
  display: inline-block;
  margin-right: 15px;
}

.social-links i {
  font-size: 24px;
  color: #fff;
}


@media (max-width: 768px) {
  .row-footer {
    flex-direction: column;
    text-align: center;
  }
  
  .col-footer {
    flex-basis: 100%;
    margin-bottom: 20px;
  }
}