* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #1a1a1a; /* Color sólido de fondo */
  margin: 0;
}

.formulario-demo {
  background: rgba(0, 0, 0, 0.6);
  padding: 30px;
  border-radius: 12px;
  max-width: 450px;
  margin: 0 auto;
  box-shadow: 0 0 25px #00f7ff40;
  border: 2px solid #00c2c7;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box; /* ✅ Asegura que padding no desborde */
  width: 100%;
  margin-top: 90px; /* ← Aquí se genera ese espacio */

}

/* Cambia el ícono del calendario en campos de fecha */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* Invierte colores: blanco sobre fondo oscuro */
  cursor: pointer;
}


.formulario-demo .form-group {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.formulario-demo label {
  margin-bottom: 5px;
  color: #00f7ff;
  font-size: 1.1rem;
  text-align: center;
}

.formulario-demo input[type="text"],
.formulario-demo input[type="email"],
.formulario-demo input[type="date"] {
  padding: 12px;
  border: 2px solid #00c2c7;
  border-radius: 6px;
  background-color: transparent;
  color: #00f7ff;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

.formulario-demo input:focus {
  border-color: #0ff;
  outline: none;
  box-shadow: 0 0 10px #00f7ff60;
}

.btn-demo {
  background-color: transparent;
  color: cyan;
  border: 2px solid cyan;
  border-radius: 5px;
  padding: 12px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
  box-sizing: border-box;
}

.btn-demo:hover {
  background-color: cyan;
  color: black;
  box-shadow: 0 0 15px cyan;
}

.social-icons {

  gap: 65px;
  margin-top: 20px;
}

.social-icons span {
  color: white;
  margin-right: 10px;
}

.social-icons img {
  width: 45px;
  height: auto;
  transition: transform 0.3s ease;
}

.social-icons img:hover {
  transform: scale(1.1);
}


---------------------------------- BACKGROUND --------------------------------------------------*/

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

body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 30% 30%, rgba(0, 194, 199, 0.1), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(255, 0, 80, 0.08), transparent 70%);
  z-index: -1;
  pointer-events: none;
  animation: backgroundFade 12s ease-in-out infinite alternate;
}

#bg-video {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -10;
  opacity: 0.15;
}


@keyframes backgroundFade {
  0% { background-position: 30% 30%, 70% 60%; }
  100% { background-position: 33% 33%, 68% 62%; }
}

.imgLogo {
  animation: pulseGlow 3s infinite ease-in-out;
}

@keyframes pulseGlow {
  0% { filter: drop-shadow(0 0 5px #00f7ff) drop-shadow(0 0 15px #00f7ff); }
  50% { filter: drop-shadow(0 0 10px #00f7ff) drop-shadow(0 0 30px #00f7ff); }
  100% { filter: drop-shadow(0 0 5px #00f7ff) drop-shadow(0 0 15px #00f7ff); }
}


.background {
  position: relative;
  min-height: 100vh;  /* Asegura que la altura mínima cubra toda la pantalla */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;  /* Asegura que cubra todo el ancho */
}

/* Overlay encima del fondo */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  /* Asegura que cubra todo el ancho */
  height: 100%; /* Asegura que cubra toda la altura */
  background-image: url('img/bordes.png'); /* Segundo fondo encima */
  background-size: cover;  /* Fondo cubrirá el 100% del ancho y alto */
background-repeat: no-repeat;  /* Evita que el overlay se repita */
background-position: center;  /* Centra la imagen del overlay */
  z-index: 0; /* Asegura que el fondo esté debajo del contenido */
}

/* Contenido dentro de la capa de fondo */
.background > * {
  position: relative;
  z-index: 1; /* Asegura que el contenido esté por encima del overlay */
}

/* Ajustes del contenido */
.hero, header {
  position: relative;
  z-index: 2;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  margin-bottom: 20px;
}

header nav a {
  margin: 0 15px;
  text-decoration: none;
  color: #9db4c0;
}

.logo {
  text-align: center;
}
.logo img {
  display: block; /* Asegura que la imagen se muestre como un bloque, ocupando el ancho completo disponible */
  margin: 0 auto; /* Centra la imagen horizontalmente */
  width: 90px;

}
.logo h1 {
  font-size: 24px;
  color: #00c2c7;
}

.logo p {
  font-size: 12px;
  color: #9db4c0;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1px 10px;
  background-size: cover;
}

.content h2 {
  font-size: 52px;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
  margin-bottom: 50px; /* Espaciado entre el título y el párrafo */
  text-align: center;
  margin-left: 158px;
  margin-top: 90px;
}

.content h2 span {
  color: #00c2c7;
}

/* Aplica margen derecho a todas las listas */
ul.text, ol.text {
list-style-type: circle;
margin-left: 30%; /* Ajusta este valor según el espacio que desees */
}

.text{
  max-width: 100vh;
  margin-left: 180px;
  margin-bottom: 0;
  color: #fff;
  font-size: 1.4rem; /* Tamaño de fuente adaptable */
  text-align: left;
  line-height: 1.6; /* Espaciado entre líneas para mejor legibilidad */
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* Agrega sombra para mejorar el contraste */
}

.inscripcion{
  display: flex;
  position: relative;
  outline: none;
  width: 125%;
  max-width: 200vh;
  margin-right: 10%;
  margin: 10px 10px; /* Similar margen para alinear visualmente con el formulario */
  max-width: 130%;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0; /* Elimina cualquier margen inferior del div */
  padding-bottom: 0; /* Elimina cualquier padding inferior del div */
}
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 300px;

}

form input[type="text"],
form input[type="email"]{
  padding: 15px;
  border: 3px solid #00c2c7;
  border-radius: 5px;
  background-color: transparent;
  color: #00c2c7;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  outline: none;
  width: 110%;
  margin-top: 0; /* Elimina cualquier margen inferior del div */
  padding-top: 0; /* Elimina cualquier padding inferior del div */
}

form input[type="date"] {
  padding: 15px;
  border: 3px solid #00c2c7;
  border-radius: 5px;
  background-color: transparent;
  color: #00c2c7;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  text-align: center;
  outline: none;
  width: 50%;
  margin-top: 0; /* Elimina cualquier margen inferior del div */
  padding-top: 10px; /* Elimina cualquier padding inferior del div */
}
form input::placeholder {
  color: #00c2c7;
  opacity: 0.8;
}

form button {
  padding: 10px;
  border: 3px solid #00c2c7;
  border-radius: 5px;
  background-color: transparent;
  color: #00c2c7;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin-top: 20px ;
}

form button:hover {
  background-color: #00c2c7;
  color: #ffffff;
}

b{
  color: cyan;
}

.textForm{
  text-align: justify;
  color: #fff;
  font-size: 1.4rem; /* Tamaño de fuente adaptable */
  line-height: 1.6; /* Espaciado entre líneas para mejor legibilidad */
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* Agrega sombra para mejorar el contraste */
}

.social-icons {
  display: flex;
  gap: 15px;
  width: 16px;
}

.social-icons a {
  color: #9db4c0;
  text-decoration: none;
}

.social-icons a img{
  display: flex;
  gap: 15px;
  width: 70px;
}

img{
  display: flex;
  gap: 5px;
  width: 70px;
}
.logo-area {
  display: flex;
  position: fixed;
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  top: 265px;
  left: 65%; /* Centrado respecto al viewport */
  transform: translateX(-50%); /* Ajuste fino para centrar */
  margin-top: 260px;
  z-index: 10;
  width: 100%; /* Ocupa todo el ancho disponible */
}

/* Contenedor de las imágenes */
.logo-placeholder {
  position: relative; /* Necesario para posicionar las imágenes de manera absoluta dentro de este contenedor */
  display: flex;
  align-items: center; /* Alinear verticalmente */
}

/* Estilos para ambas imágenes */
.imgRobot,
.imgLogo {
  width: 600px; /* Mismo ancho para ambas */
  height: auto; /* Mantener proporción */
  z-index: 0; /* Asegura que no cubran otros elementos */
  position: absolute; /* Permite superponer las imágenes */
  margin: 0; /* Elimina márgenes por defecto */
}

/* Ajustes específicos para la imagen del robot */
.imgRobot {
  top: 0; /* Posición inicial */
  left: 0; /* Posición inicial */
  filter: drop-shadow(0 0 5px #00f7ff) drop-shadow(0 0 15px #00f7ff); /* halo suave + intenso */
  transition: transform 0.3s ease-in-out;

}

/* Ajustes específicos para la imagen del logo */
.imgLogo {
  width: 500px; /* Tamaño diferente si es necesario */
  top: 50%; /* Ajusta la posición vertical */
  left: 50%; /* Ajusta la posición horizontal */
  transform: translate(-50%, -50%); /* Centra la imagen */
  z-index: 0; /* Asegura que el logo esté encima del robot */
}
/* Estilos generales para el footer */
.footer {
text-align: left; /* Centra el contenido dentro del footer */
margin-top: 20px; /* Espacio superior para separar del contenido previo */
padding: 20px 0; /* Espacio en los lados y parte inferior */
}


.footer img {
width: 50%; /* La imagen ocupará el 50% del ancho del contenedor */
max-width: 500px; /* No será mayor a 500px */
height: auto; /* Mantiene la proporción de la imagen */
}
/*------------------------------------------------------------------------------------------------------*/

/* Media query para pantallas más grandes (min-width: 768px) */
@media (min-width: 768px) {
form {
  max-width: 500px; /* Aumenta el tamaño máximo del formulario */
  margin: 190px auto; /* Centra el formulario */
}

form input[type="text"],
form input[type="email"] {
  font-size: 16px; /* Aumenta el tamaño de la fuente en pantallas grandes */
  padding: 14px; /* Aumenta el padding en pantallas grandes */
}

form button {
  font-size: 16px; /* Aumenta el tamaño del botón en pantallas grandes */
  padding: 12px; /* Aumenta el padding del botón */
}
}


/*---------------------------------------MOVIL---------------------------------------------------------------*/


/* Media query para pantallas pequeñas (max-width: 767px) */
@media (max-width: 768px) {
  /* Contenedor general */
  body, html {
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
form {
  max-width: 72%; /* El formulario ocupa todo el ancho disponible */
  margin: 100px 10px; /* Ajusta el margen para dispositivos móviles */
}

form input[type="text"],
form input[type="email"] {
  font-size: 16px; /* Aumenta el tamaño de la fuente en pantallas pequeñas */
  padding: 14px; /* Aumenta el padding para hacer los inputs más grandes */
}

form button {
  font-size: 16px; /* Aumenta el tamaño del botón */
  padding: 12px; /* Aumenta el padding del botón */
  margin-top: 20px;
}

.hero .content p {
  max-width: 100%; /* Hace que el texto ocupe todo el ancho disponible */
  margin-left: 15px; /* Elimina el margen izquierdo en pantallas pequeñas */
  margin-right: 15px; /* Añade un margen derecho para evitar que el texto llegue al borde */
  font-size: 20px; /* Reduce el tamaño de la fuente en pantallas pequeñas */
  text-align: justify;
}


.content h2 {
  font-size: 30px;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
  margin-bottom: 22px; /* Espaciado entre el título y el párrafo */
  margin-top: 30px;
  margin-left: 0;
}

.content h2 span {
  color: #00c2c7;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  /* Asegura que cubra todo el ancho */
  height: 50%; /* Asegura que cubra toda la altura */
  background-image: url('img/bordes.png'); /* Segundo fondo encima */
  background-size: 100% 100%;    
  z-index: 0; /* Asegura que el fondo esté debajo del contenido */    
}

/* Ajusta el tamaño de las imágenes para pantallas pequeñas */
.imgRobot {
  width: 250px; /* Ajusta el tamaño del robot */
  bottom: 0; /* Coloca las imágenes en la parte inferior */
  transform: translatex(-5%); 
  margin-right: 50%;

}

.imgLogo {
  width: 150px; /* Ajusta el tamaño del logo */
  bottom: 0; /* Coloca las imágenes en la parte inferior */
  left: 5%; /* Centra las imágenes horizontalmente */
  transform: translateY(-2%); 
  position: relative; /* Deja que la imagen se mueva de acuerdo al contenedor */
  transform: translatex(40%); 
  margin-right: -1px;
}

.logo-area {
  position: relative; /* Cambia a 'relative' para que no sea fijo en pantallas pequeñas */
  margin-top: 20px; /* Ajusta el margen superior si es necesario */
  right: 50px; /* Mantén el contenedor en la parte derecha */
  padding: 10px; /* Espaciado alrededor del contenedor */
}

.logo-placeholder {
  flex-direction: row; /* Cambia la dirección a fila si prefieres que las imágenes estén en fila */
  justify-content: center; /* Centra las imágenes dentro del contenedor */
  align-items: flex-start; /* Ajusta las imágenes a la parte superior */
}

/* Aplica margen derecho a todas las listas */
ul.text, ol.text {
list-style-type: circle;
margin-left: 10%; /* Ajusta este valor según el espacio que desees */
margin-right: 5%;
}

.textForm{
max-width: 100%; /* Hace que el texto ocupe todo el ancho disponible */
margin-left: 2px; /* Elimina el margen izquierdo en pantallas pequeñas */
margin-right: 20px; /* Añade un margen derecho para evitar que el texto llegue al borde */
font-size: 25px; /* Reduce el tamaño de la fuente en pantallas pequeñas */
text-align: justify;
}

.inscripcion{
display: flex;
position: relative;
outline: none;
width: 125%;
max-width: 200vh;
margin-right: 10%;
margin: 5px 5px; /* Similar margen para alinear visualmente con el formulario */
max-width: 130%;
margin-top: 0;
padding-top: 0;
margin-bottom: 5px; /* Elimina cualquier margen inferior del div */
padding-bottom: 0; /* Elimina cualquier padding inferior del div */

}

.social-icons a img{
display: flex;
gap: 15px;
width: 40px;
}

img{
display: flex;
gap: 5px;
width: 40px;
}

.logo img {
display: block; /* Asegura que la imagen se muestre como un bloque, ocupando el ancho completo disponible */
margin: 0 auto; /* Centra la imagen horizontalmente */
width: 80px;
}
}

@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    justify-content: space-between;
  }

  .content, .logo-area {
    width: 45%;
  }
}
/*--------------------------------- TABLET ----------------------------------------------------*/

/* Media query para tabletas (entre 768px y 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
form {
  max-width: 85%; /* Ajusta el ancho del formulario para tabletas */
  margin: 80px auto; /* Centra el formulario horizontalmente */
}

form input[type="text"],
form input[type="email"] {
  font-size: 18px; /* Aumenta ligeramente el tamaño de fuente en tabletas */
  padding: 12px; /* Ajusta el padding para que los inputs sean cómodos */
}

form button {
  font-size: 18px;
  padding: 14px; /* Aumenta el padding del botón */
  margin-top: 25px;
}

.hero .content p {
  max-width: 90%; /* Limita el ancho del texto en tabletas */
  margin: 20px auto; /* Centra el texto horizontalmente */
  font-size: 22px;
  text-align: justify;
}

.content h2 {
  font-size: 30px; /* Ajusta el tamaño del título para tablets */
  margin-bottom: 20px;
  margin-top: 30px;
}

.content h2 span {
  color: #00c2c7;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%; /* Ajusta la altura del fondo para tablets */
  background-image: url('img/bordes.png');
  background-size: cover;
  z-index: 0;
}

/* Ajusta el tamaño de las imágenes para tablets */
.imgRobot {
  width: 270px;
  bottom: 10px; /* Ubica la imagen cerca del pie de página */
  left: auto;
}

.imgLogo {
  width: 270px;
  bottom: 10px;
  left: 5%;
  transform: translateY(-2%); 
  position: relative; /* Deja que la imagen se mueva de acuerdo al contenedor */
  transform: translatex(50%); 
}

.logo-area {
  position: relative; /* No estática en tablets */
  margin-top: 20px;
  padding: 50px;
  right: auto;
  justify-content: center; /* Centra el contenido en tablets */
}

.logo-placeholder {
  flex-direction: row; /* Mantiene las imágenes en una fila */
  justify-content: center;
  align-items: flex-start;
}
}

/*-------------------------------- LAPTOP ----------------------------------------------*/
/* Media query para pantallas de laptop (entre 1024px y 1440px) */
@media (min-width: 1024px) and (max-width: 1440px) {
form {
  max-width: 80%; /* Ajusta el ancho del formulario para laptops */
  margin: 50px auto; /* Centra el formulario horizontalmente */
}

form input[type="text"],
form input[type="email"] {
  font-size: 18px; /* Ajusta el tamaño de la fuente en laptops */
  padding: 12px; /* Ajusta el padding para un tamaño de input cómodo */
}

form button {
  font-size: 18px; /* Ajusta el tamaño del botón */
  padding: 14px; /* Ajusta el padding del botón */
  margin-top: 25px;
}

.hero .content p {
  max-width: 85%; /* Limita el ancho del texto en laptops */
  margin-left: auto; /* Centra el margen a la izquierda */
  margin-right: auto; /* Centra el margen a la derecha */
  font-size: 20px; /* Ajusta el tamaño de fuente */
  text-align: justify;
}

.content h2 {
  font-size: 32px; /* Ajusta el tamaño del título en laptops */
  margin-bottom: 30px;
  margin-top: 40px;
  margin-left: 0;
}

.content h2 span {
  color: #00c2c7;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Ajusta la altura del fondo en laptops */
  background-image: url('img/bordes.png'); /* Fondo encima */
  background-size: cover; /* Asegura que la imagen cubra el fondo */
  z-index: 0;
}

/* Ajuste del tamaño de las imágenes para laptops */
.imgRobot {
  width: 300px; /* Ajusta el tamaño del robot */
  bottom: 0;
  left: 100%;
}

.imgLogo {
  width: 200px; /* Ajusta el tamaño del logo */
  bottom: 0;
  left: 5%;
  transform: translateY(-10%);
}

.logo-area {
  position: relative;
  margin-top: 20px;
  padding: 10px;
  right: auto; /* Elimina la alineación fija en laptops */
}

.logo-placeholder {
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
}