/* Reseteo básico */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Asegura que el contenido no se quede detrás del navbar */
body {
  overflow-x: hidden;
}

/* Elimina márgenes en el contenedor */
main {
  margin-top: 0; /* Evita márgenes innecesarios en la parte superior */
  padding-top: 0; /* Evita relleno innecesario */
}



.header {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Establece una altura mínima */
  overflow: hidden;
  display: block;
  z-index: 1; /* Asegúrate de que el header esté por encima de los otros elementos */
}

.header.video-section {
  min-height: 80vh; /* Solo en la sección con video */
}


/* Asegura que el video ocupe todo el fondo del navbar */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Hace que el video ocupe toda la altura del header */
  object-fit: cover; /* Asegura que el video cubra toda el área sin distorsión */
  z-index: -1; /* Coloca el video detrás del contenido */
}

/* Ajuste de video para mostrar solo la parte superior */
.video-background-content {
  width: 100%;
  height: 100%; /* Hace que el video ocupe toda la altura de la ventana */
  object-fit: cover; /* El video cubrirá todo el contenedor sin deformarse */
  position: absolute; /* Para que se posicione en el fondo */
  top: 0; /* Asegura que el video comience desde la parte superior */
  left: 0; /* Asegura que el video se alinee a la izquierda */
  z-index: -1; /* Asegura que el video esté detrás del contenido */
}


/* Contenedor del texto que cambiará sobre el video */
.video-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  font-size: 3em;
  font-weight: bold;
  z-index: 2; /* Asegura que el texto esté encima del video */
}

/* Estilo de los títulos */
.video-text {
  color: rgb(255, 255, 255); /* Cambié el color a rojo */
  display: none; /* Inicialmente ocultos */
}

/* Clase para mostrar el texto activo */
.video-text.active {
  display: block;
}
/* ---------------------------------------------------*/
/* --------------- SEGUNDO VIDEO ---------------------*/
/* ---------------------------------------------------*/
/* Asegura que el video ocupe todo el fondo del navbar */
.video-background2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Hace que el video ocupe toda la altura del header */
  object-fit: cover; /* Asegura que el video cubra toda el área sin distorsión */
  z-index: -1; /* Coloca el video detrás del contenido */
}

/* Ajuste de video para mostrar solo la parte superior */
.video-background2-content {
  width: 100%;
  height: 100%; /* Hace que el video ocupe toda la altura de la ventana */
  object-fit: cover; /* El video cubrirá todo el contenedor sin deformarse */
  position: absolute; /* Para que se posicione en el fondo */
  top: 0; /* Asegura que el video comience desde la parte superior */
  left: 0; /* Asegura que el video se alinee a la izquierda */
  z-index: -1; /* Asegura que el video esté detrás del contenido */
}


/* Contenedor del texto que cambiará sobre el video */
.video2-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  font-size: 3em;
  font-weight: bold;
  z-index: 2; /* Asegura que el texto esté encima del video */
}

/* Estilo de los títulos */
.video2-text-container .video-text {
  color: rgb(255, 255, 255); /* Cambié el color a rojo */
  display: none; /* Inicialmente ocultos */
}

/* Clase para mostrar el texto activo */
.video2-text-container .video-text.active {
  display: block;
}



/* ------------------ Navbar --------------------*/
.navbar {
  position: fixed; /* Asegura que el contenido del navbar se coloque por encima del video */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* El navbar debe estar por encima del contenido */
  background: transparent; /* Hace que el fondo del navbar sea transparente */
  z-index: 1; /* Asegura que el navbar esté por encima del video */
}
/* Ajuste de los enlaces del navbar */
.navbar-nav .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.945); /* Texto blanco */
  padding: 10px 15px;
  font-weight: bold;
  text-decoration: none;
}

/* Asegura que el enlace activo sea blanco */
.navbar-nav .nav-item .nav-link.active {
  color: rgba(255, 255, 255, 0.945); /* El color activo también en blanco */
}

/* Efecto hover en los enlaces */
.navbar-nav .nav-item .nav-link:hover {
  color: rgba(206, 117, 228, 0.819); /* Color al pasar el mouse */
  transform: translateY(-3px);
}

/* Estilo para el logo */
.navbar .navbar-brand {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}


.navbar-nav .nav-link.active {
  font-weight: bold;
  color: rgba(224, 135, 247, 0.819) !important; /* Color para resaltar la opción activa */
}




/* Navbar para pantallas pequeñas (mobile) */
nav .container-fluid {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav .logo {
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.navbar .logo img {
  max-width: 120px;
  height: auto;
}

.nav .navbar-nav {
  text-align: center;
  width: 100%;
  justify-content: center;
}

nav .navbar-toggler-icon {
  filter: invert(100%);
}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  box-shadow: none;
}

/* Estilo para el logo */
.navbar .logo {
  max-height: 120px;
  width: auto;
}

.navbar .logo img {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

/* Estilo para pantallas más pequeñas */

@media (max-width: 992px) {
  .video-background2-content {
    height: 100%; /* Ocupa toda la altura del header */
  }
  .video-text-container h2 {
    display: none; /* Oculta los títulos en pantallas pequeñas */
  }

  .logo {
    max-height: 150px; /* Ajusta la altura máxima del logo para pantallas grandes */
    width: auto; /* Ajusta el ancho automáticamente para mantener la proporción */
  }

  nav ul {
    display: block; /* Cambiar a bloque para que los elementos estén uno debajo del otro */
    text-align: center; /* Centrar el contenido de la lista */
  }

  nav ul li {
    display: block; /* Cambiar a bloque para que los elementos estén uno debajo del otro */
    margin-bottom: 10px; /* Agregar espacio entre elementos apilados */
  }

  /* Evitar que el navbar o cualquier otro contenido se superponga o recorte */
  .navbar {
    padding-top: 20px; /* Añade un padding superior para que no quede recortado */
    position: relative; /* Para que el z-index funcione correctamente */
    z-index: 1; /* Z-index más bajo que el icono de la hamburguesa */
  }

  .header.video-section {
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro con opacidad */
  }
  .header {
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro con opacidad */
  }

  /* Asegurar que el navbar no se desplace hacia abajo */
  .navbar-collapse {
    position: relative; /* Necesario para que el z-index de .navbar-toggler funcione */
  }

  /* Asegurar que el navbar no se recorte en pantallas pequeñas */
  .navbar-collapse {
    padding-top: 50px; /* Ajuste el padding superior si es necesario */
  }
  /* Ajuste para el navbar-toggler */
  .navbar-toggler {
    position: absolute; /* Coloca el botón de manera absoluta */
    top: 15px; /* Ajusta la distancia desde la parte superior */
    right: 15px; /* Ajusta la distancia desde la derecha */
    z-index: 1050; /* Asegura que el icono esté por encima del navbar y otros elementos */
  }
}

p {
  font-size: 1.2em;
}



.titulo-contenedor {
  margin-top: 3%;
  text-align: center;
  width: 100%;
  color: rgba(61, 6, 75, 0.977);
  text-shadow: 2px 2px 5px white; /* Sombra blanca */
}

.tituloContenedorL {
  text-align: center;
  font-size: 27px; /* Ajusta el tamaño según necesites */
  color: rgba(61, 6, 75, 0.977);
  text-shadow: 2px 2px 5px white; /* Sombra blanca */
}

.titulo-card{
  text-align: center;
  font-size: 27px; /* Ajusta el tamaño según necesites */
  color: rgb(154, 5, 191)  !important;;
  text-shadow: 2px 2px 5px white; /* Sombra blanca */
}

.subrayado-animado {
  display: inline-block;
  position: relative;
  font-size: 20px;
  color: black;
}

.subrayado-animado::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #7927a3;
  transform: scaleX(0);
  transform-origin: left;
  animation: subrayado 0.5s ease-in-out forwards;
}

@keyframes subrayado {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}


::root{
    --bg-color: black;
    --border-color: yellow;
}
.contenedor-equipo {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se ajusten a varias filas */
    justify-content: center;
    gap: 1rem; /* Espaciado entre las tarjetas */
    padding: 1rem;
}

/* Borde alrededor de la tarjeta */
.card {
  position: relative;
  overflow: hidden; /* Asegura que el contenido no se salga de la tarjeta */
  border: 2px solid #7927a3; /* Borde morado */
  border-radius: 10px; /* Opcional: redondea las esquinas */
}
.cardImg {
    width: 25rem;
    height: 25rem;
    border-radius: 1.25rem;
    border: 0.5rem solid var(--border-color);
    overflow: hidden;
    position: relative;
    transition: border 0.3s ease; /* Añadir transición suave para el borde */
  }
  

  .cardImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .personaNombre {
    position: absolute;
    margin-top: 3%;
    left: 10%; /* Asegúrate de que se alinee correctamente con el borde izquierdo */
    right: 10%; /* Esto hace que el contenedor se ajuste a todo el ancho disponible */
    font-size: 1rem;
    font-weight: bold;
    color: white;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.315); /* Fondo transparente con opacidad */
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 0% !important; /* Asegura que no haya padding inferior */
    border-radius: 0.5rem;
}



.tag {
  width: 12.5rem;
  height: 3.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  border-top: 0.5rem solid var(--border-color);
  border-left: 0.5rem solid var(--border-color);
  border-radius: 1.25rem 0 0 0;
  padding: 0.3125rem;
}



.tag::after {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  content: "";
  background-color: transparent;
  top: -1.25rem;
  right: 0;
  border-bottom-right-radius: 0.625rem;
  box-shadow: 0.375rem 0.375rem var(--border-color);
}

.tag::before {
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  content: "";
  background-color: transparent;
  top: -1.75rem;
  right: 0.5rem;
  border-bottom-right-radius: 0.625rem;
  box-shadow: 0.375rem 0.375rem var(--border-color);
}


.tag > p {
    background-color: #7927a3; /* Fondo sólido */
    color: white;
    font-size: 0.875rem;
    padding: 0.5rem 0.625rem;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3125;
    border-radius: 0.3125rem;
    transition: background-color 0.3s ease; /* Transición en el color de fondo */
  }

  

  .card:hover .cardImg {
    border: 0.2rem dotted  #7927a3; /* Cambiar el borde a violeta cuando se pasa el ratón */
  }
  
  .card:hover .tag > p {
    background-color: rgba(122, 39, 163, 0.747); /* Fondo semi-transparente */
  }
  
  .card:hover .personaNombre {
    background-color: rgba(122, 39, 163, 0.467); /* Fondo de la persona con un leve cambio */
  }

.tag > p > span {
  font-weight: 600;
}


/* Footer */
footer {
  position: relative;
  margin-top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(25, 25, 25, 0.955);
  text-align: center;
  padding-top: 2%;
  padding-bottom: 2%;
}

.footer p {
  color: rgb(213, 212, 212);
}

.acceder-btn {
  display: inline-block;  /* Asegura que no ocupe todo el ancho */
  width: auto;  /* Ajusta al contenido */
  text-align: center;  /* Centra el texto dentro del botón */
  padding: 10px 20px;  /* Agrega algo de espacio alrededor del texto */
}



/* Estilos para la tarjeta principal */
.card-principal {
  position: relative;
  overflow: hidden; /* Asegura que el contenido no se salga de la tarjeta */
  border-radius: 10px; /* Redondea las esquinas */
  border: 1px solid #0d0014; /* Borde morado */
 
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.645); /* Sombra externa */
}


/* Estilos para la tarjeta principal */
.card-principal:hover {
  outline: 2px dashed #7a27a343; /* Outline discontinuo */
}


/* Capa de color sobre la imagen dentro de la tarjeta principal */
.card-principal .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.589); /* Oscurece la imagen */
  z-index: 1;
}

/* Capa de color sobre la imagen dentro de la tarjeta principal */
.card-principal:hover .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(55, 45, 55, 0.618); /* Oscurece la imagen */
  z-index: 1;
}


/* Título fijo en la parte superior */
.card-principal .card-titulo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.945); /* Fondo semitransparente */
  color: rgba(107, 1, 100, 0.8); /* Color de texto */
  text-align: center;
  padding: 10px;
  z-index: 2;
}

/* Contenido centrado (descripción) */
.card-principal .card-descrip {
  position: absolute;
  top: 60px;        /* Espacio reservado para el título */
  bottom: 60px;     /* Espacio reservado para el footer (o elementos inferiores) */
  left: 0;
  right: 0;
  padding: 20px;
  overflow-y: auto; /* Para que, si hay mucho contenido, se pueda hacer scroll */
  z-index: 3;       /* Se muestra sobre la capa overlay */
  color: white;     /* O el color que prefieras para el texto */
  font-size: 1.2rem;
  text-align: center;
}


/* Nuevo elemento antes del footer */
.card-principal .card-central {
  position: absolute;
  bottom: 43px; /* Separa este elemento del footer */
  left: 0;
  width: 100%;
  background: rgba(58, 0, 58, 0.8); /* Fondo verde semitransparente */
  color: white;
  text-align: center;
  padding: 10px;
  z-index: 2;
}

/* Footer fijo en la parte inferior */
.card-principal .card-final {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.8); /* Fondo blanco semitransparente */
  color: rgba(31, 0, 29, 0.8); /* Color de texto */
  text-align: center;
  padding: 10px;
  z-index: 2;
}


/* ---------------------------------------------------------*/
/* -------------------- Card de CURSOS ---------------------*/
/* ---------------------------------------------------------*/



.renglon-cursos {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Hace que todas las tarjetas tengan la misma altura */
  justify-content: center; /* Asegura que las tarjetas estén bien distribuidas */


}


.blog_post {
  background: #fff;
  max-width: 500px;
  min-width: 320px; /* Asegura que no sea más pequeña que esto */
  width: 90%; /* Para que se adapte sin ser demasiado pequeña */
  border-radius: 10px;
  box-shadow: 1px 1px 2rem rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden; /* Evita que se desborde el contenido */
  margin: 5%;
}



.container_copy {
  padding: 6rem 4rem 5rem 4rem;
}


.img_pod {
  height: 120px; /* Ajusta el tamaño según lo necesites */
  width: 120px;
  position: absolute;
  top: -30px; /* Hace que sobresalga en la parte superior */
  left: -30px; /* Hace que sobresalga en la izquierda */
  background: linear-gradient(90deg, #c38dce, #9a0f91);
  z-index: 10;
  box-shadow: 1px 1px 2rem rgba(0, 0, 0, 0.3);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img_pod img {
  height: 90px; /* Ajusta el tamaño según lo necesites */
  width: 90px;
  border-radius: 100%;
  box-shadow: 1px 1px 2rem rgba(0, 0, 0, 0.3);
  z-index: 1;
}


.container_copy h3 {
  margin: 0 0 0.5rem 0;
  color: #999;
  font-size: 1.25rem;
}

.container_copy h1 {
  margin: 0 0 1rem 0;
  font-size: 2.5rem;
  letter-spacing: 0.5px;
  color: #333;
}

.container_copy p {
  margin: 0 0 4.5rem 0;
  font-size: 1.5rem;
  line-height: 1.45;
  color: #333;
}


@media (max-width: 968px) {
  .img_pod {
    height: 80px;
    width: 80px;
    left: -5%; /* Ajustar la posición */
    top: -10%;
  }

  .img_pod img {
    height: 6rem;
    width: 6rem;
  }

  .container_copy {
    padding: 4rem 2rem 3rem 2rem;
  }

  .container_copy h1 {
    font-size: 2rem;
  }

  .container_copy p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }
}



.boton-add {
  border: none;
  outline: none;
  background: linear-gradient(90deg, #c38dce, #9a0f91);
  padding: 1.5rem 2rem;
  border-radius: 50px;
  color: white;
  font-size: 1.2rem;
  box-shadow: 1px 10px 2rem rgba(228, 122, 233, 0.5);
  transition: all 0.2s ease-in;
  text-decoration: none;
  
}

.boton-add:hover {
  box-shadow: 0px 5px 1rem rgba(159, 1, 191, 0.5);
}



.texto-duracion {
  text-align: center;
  color: rgba(156, 85, 174, 0.977) !important;
  text-shadow: 2px 2px 5px rgba(48, 5, 41, 0.363); /* Sombra blanca */
}

/* ----------------------------- */


.custom-btn {
  background: rgba(132, 5, 132, 0.8) !important;
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 50px;
  box-shadow: 1px 10px 2rem rgba(228, 122, 233, 0.5);
  transition: all 0.3s ease-in-out;
}

.custom-btn:hover {
  background: rgba(110, 1, 110, 0.859) !important;
  box-shadow: 0px 5px 1rem rgba(162, 3, 198, 0.5);
}
/* ---------------- C O N T A C T O -----------------*/


.contacto-form {
  border: 2px dashed #731d77ac; /* Borde discontinuo de 2px y color negro */
  margin: 10%;
  width: 70%;
  border-radius: 20px; /* Aumenta el valor para bordes más redondeados */
}
.contacto-form .form-control{
  border-radius:1rem;
}
.contacto-image{
  text-align: center;
}
.contacto-image img{

  width: 20%;
  margin-top: -3%;
}
.contacto-form form{
  padding: 10%;
}
.contacto-form form .row{
  margin-bottom: -7%;
}
.contacto-form h3{
  margin-bottom: 8%;
  margin-top: -10%;
  text-align: center;
  color: rgba(110, 1, 110, 0.859);
}

.btnContacto
{
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  color: #fff;
  background-color: rgba(110, 1, 110, 0.859);
  border: none;
  cursor: pointer;
}

.btnContacto:hover {
  background: rgba(164, 5, 164, 0.859) !important;
  box-shadow: 0px 5px 1rem rgba(233, 190, 243, 0.5);
}