/* Estilos base */ 

* { 

    margin: 0; 

    padding: 0; 

    box-sizing: border-box; 

} 

  

body {
    background-image: url(../imagenes/jumascreenregistrate.png);
    background-size: cover;
    background-position: center 20%; /* Mueve la imagen hacia abajo */
    background-attachment: fixed;
}


  

/* Contenedor general para centrar contenido */ 

.contenedor {max-width: 483px;width: 99%;margin: auto;} 

  

/* Título principal de las secciones */ 

.titulo { 

    font-weight: 700; 

    color: #fbffca; 

    text-align: center; 

    text-shadow: 2px 2px 10px #000, -6px -6px 10px #ffffffa6, -8px 8px 15px #ffffff, 0 0 20px #000000b8; 

    letter-spacing: 0.1em; 

    font-size: clamp(1.5rem, 5vw, 3rem); /* Ajuste responsivo */ 

} 

  

/* Media Queries para tamaños de pantalla específicos */ 

@media only screen and (max-width: 480px) { 

    .titulo { 

        font-size: 1.5rem; /* Tamaño más pequeño para dispositivos móviles */ 

    } 

} 

  

@media only screen and (min-width: 481px) and (max-width: 767px) { 

    /* Ajustes para tabletas en orientación vertical */ 

} 

  

@media only screen and (min-width: 768px) { 

    /* Ajustes para pantallas más grandes, como tabletas en orientación horizontal y desktops */ 

    .titulo { 

        font-size: 3rem; 

    } 

} 

  

/* Continuar con los ajustes de .titulo para otros tamaños de pantalla si es necesario */ 

/* Estilos para el formulario y sus elementos */ 

.formulario { 

    position: relative; 

    padding: 12px; 

    margin: 50px auto; /* Centrar el formulario con un margen adecuado */ 

    max-width: 364px; 

    border-radius: 20px; 

    background-repeat: no-repeat; 

    background-position: center; 

    z-index: 1; 

} 

  

.formulario .form-group { 

    position: relative; 

    margin: 10px 0; /* Espaciado uniforme para cada grupo de formularios */ 

} 

  
.formulario input[type="text"],
.formulario input[type="password"],
.formulario input[type="email"] {
    width: 100%;
    padding: 10px 10px 10px 35px; /* Espaciado adicional para los íconos */
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0.57);
    border: 1px solid white; /* Añade un borde blanco */
    border-radius: 4px;
    color: #00BFFF;
    caret-color: #00BFFF;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8); /* Añade un contorno luminoso */
}

.formulario input[type="text"]:focus,
.formulario input[type="password"]:focus,
.formulario input[type="email"]:focus {
    box-shadow: 0 0 15px 4px rgba(255, 255, 255, 1); /* Aumenta el brillo al hacer foco */
    outline: none; /* Elimina el borde azul predeterminado al hacer foco */
}


  

.formulario .submit-btn { 

    display: block; /* Ocupar su propia línea */ 

    width: 100%; 

    padding: 10px; 

    font-size: 1rem; 

    color: #fff; 

    background: #769766; 

    cursor: pointer; 

    border: none; 

    border-radius: 4px; 

    margin-top: 15px; /* Espaciado antes del botón */ 

} 

  

/* Texto para el registro e información adicional */ 

.texto-registrate, 



/* Botones y enlaces */ 

a, 

.submit-btn {transition: background-color 0.3s, color 0.3s;} 
.custom-submit-btn {
    display: inline-block;
    width: 100%;
    padding: 4px;
    font-size: 1rem;
    color: #fff;
    background-color: #769766;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    margin-top: 15px;
    text-align: center; /* Asegura que el icono esté centrado */
}

.custom-submit-btn i {
    color: white; /* Cambia a cualquier color que prefieras */
    font-size: 24px; /* Ajusta el tamaño del icono */
}

.custom-submit-btn:hover {
    background-color: #5d774d;
}

  

a:hover, 

.submit-btn:hover { 

    background-color: #b4e9ff; 

    color: #00b4ffa6; 

} 

  

/* Media Queries para ajustes de formulario en diferentes dispositivos */ 

@media only screen and (max-width: 480px) { 

    .formulario { 

        margin: 20px; 

        padding: 10px; 

    } 

  

    .formulario input[type="text"], 

    .formulario input[type="password"], 

    .formulario input[type="email"] { 

        font-size: 0.9rem; /* Ligeramente más pequeño para dispositivos móviles */ 

    } 

} 

  

/* Continuar con los ajustes de media queries para otros tamaños de pantalla */ 

/* Estilos para títulos y secciones de texto */ 

.titulologin, 

.tituloregistrate, 











 .titulologin {
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF, 0 0 20px #00FFFF, 0 0 25px #00FFFF;
    margin-top: 20px;
}

.login-container {
    top: 12em;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Si quieres posicionar la flecha respecto a este contenedor */
}

.login-line {
    position: absolute;
    width: 101%; /* O el ancho que prefieras */
    border: none;
    border-top: 16px solid #000; /* Aumenta el grosor de la línea aquí */
    margin-top: -4em; /* Aumenta el espacio por encima de la línea */
}





/* Estilos de la flecha */
.arrow-container {
    top: -3.9em;
    position: relative;
    width: 102px; /* El ancho de la flecha */
    height: 242px; /* La altura total de la flecha, incluyendo la punta */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: auto; /* Alineación horizontal en el centro */
}

.arrow {
    top: 0em;
    position: absolute;
    width: 26%; /* Ocupará todo el ancho del contenedor */
    height: 6%; /* Altura de la parte rectangular de la flecha */
    background-color: orange; /* Color de fondo de tu flecha */
    border-radius: 0px; /* Bordes redondeados */
}

.arrow::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* La mitad del ancho de la base */
    border-right: 50px solid transparent; /* La mitad del ancho de la base */
    border-top: 50px solid orange; /* La altura de la punta de la flecha */
}

.arrow:before {
  right: -35px;
  content: '';
  position: absolute;
  bottom: 0;
  border-left: 50px solid transparent; /* Ajusta al tamaño deseado */
  border-right: 50px solid transparent; /* Ajusta al tamaño deseado */
  border-top: 100px solid black; /* Ajusta al tamaño deseado */
}

/* Ajustar la posición para que se alinee con la parte inferior de la flecha */
.arrow:before {
  bottom: -97px; /* Ajusta al tamaño deseado */
}

.bulbs {
    position: absolute;
    top: -10px; /* Ajustar según sea necesario */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}


/* Para simular bombillas, usarías pseudo-elementos o un contenedor adicional con elementos absolutamente posicionados */
/* Estilo para las bombillas */
.bulb {
  position: absolute;
  width: 20px; /* Tamaño de las bombillas */
  height: 20px;
  border-radius: 50%;
  background-color: #ac0000; /* Color de las bombillas */
  box-shadow: 0 0 10px #ffeb3b; /* Brillo de las bombillas */
  /* La animación hace que las bombillas parpadeen */
  animation: blink 1s infinite alternate;
}


/* Posiciona las bombillas alrededor del borde de la flecha */
/* Necesitarás hacer esto para cada bombilla individualmente, ajustando el top y left para colocarlas correctamente */

/* Posicionar las bombillas */
/* Ajustar estas posiciones según sea necesario para alinear con tu diseño */

/* Posicionamiento de las bombillas */
.bulb:nth-of-type(1) { top: 10%; left: 50%; transform: translateX(-50%); }
.bulb:nth-of-type(2) {margin: -9px 0px;top: 20%;left: 50%;transform: translateX(150%);}
.bulb:nth-of-type(3) { top: 30%; left: 50%; transform: translateX(100%); }
/* Continúa con el resto de las bombillas según sea necesario */
/* Añade más según sea necesario... */
/* Repetir con .bulb:nth-child(2), .bulb:nth-child(3), etc... */







/* Define la animación para simular el brillo intermitente */
@keyframes pulsate {
  0%, 100% {
    box-shadow: 0 0 10px #ffeb3b, 0 0 20px #ffeb3b, 0 0 30px #ffeb3b;
  }
  50% {
    box-shadow: 0 0 5px #ffeb3b, 0 0 10px #ffeb3b, 0 0 15px #ffeb3b;
  }
}

/* Aplica la animación a cada bombilla */
.bulb {
  animation: pulsate 1s infinite alternate ease-in-out;
}









  

.tituloregistrate { 

    margin-top: 1rem; 

    font-size: 1.2rem; /* Unificado para dispositivos móviles */ 

    padding: 1rem; 

} 

  



/* Estilos para las secciones del formulario */ 

.registro-contenedor {max-width: 400px; /* Ajuste de ancho para contenedores de registro */margin: 1.5rem auto; /* Centrar el contenedor */padding: 0.6rem;background: rgb(20 98 0 / 50%);border-radius: 115px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);} 



.vip {
    right: 2em;
    position: relative;
    top: 7em;
    font-family: 'TuFuenteDeseada', sans-serif;
    font-size: 24px;
    margin: 3px 0px 0px 0px;
    color: #ffffff;
    border-radius: 176px;
    padding: 1px 37px;
    transition: color 0.3s, border-color 0.3s, padding 0.3s;
    text-shadow: 0 0 4px #ffe200, 0 0 10px #ffffff, 0 0 15px #ffffff, 0 0 20px #ffffff, 0 0 25px #000000;
}
  

/* Media Queries para ajustes responsivos */ 

@media only screen and (max-width: 480px) { 

    .titulologin, 

    .tituloregistrate, 

    .registro-contenedor {right: 0em;position: relative;top: 20em; /* Menos margen en dispositivos pequeños */ /* Menos padding para maximizar espacio */} 

} 

  

@media only screen and (min-width: 481px) and (max-width: 768px) { 

    .titulologin, 

    .tituloregistrate { 

        font-size: 1.2rem; /* Tamaño intermedio para tablets */ 

    } 

} 

/* Estilos para títulos y secciones de texto */ 

.titulologin, 

.tituloregistrate, 

.texto-pregunta { 

    font-weight: 700; 

    color: #fbffca; 

    text-align: center; 

    text-shadow: 2px 2px 10px #000, -6px -6px 10px #ffffffa6, -8px 8px 15px #ffffff, 0 0 20px #000000b8; 

    letter-spacing: 0.1em; 

    font-size: clamp(1.5rem, 5vw, 3rem); /* Ajuste responsivo */ 
} 


  

.texto-pregunta a {
    font-weight: 700;
    color: #fbffca;
    background-color: #000; /* Fondo oscuro para contraste */
    border: 2px solid #fbffca; /* Borde del mismo color que el texto */
    border-radius: 25px; /* Bordes redondeados para un aspecto de botón */
    text-align: center;
    text-shadow: 2px 2px 10px #000, -6px -6px 10px #ffffffa6, -8px 8px 15px #ffffff, 0 0 20px #000000b8;
    letter-spacing: 0.1em;
    text-decoration: none;
    display: inline-block;
    padding: 0.5em 1em;
    transition: background-color 0.3s, color 0.3s, text-shadow 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Sombra para dar efecto de elevación */
}

/* Efecto hover para el enlace */
.texto-pregunta a:hover {
    color: #000; /* Cambio de color del texto al pasar el ratón por encima */
    background-color: #fbffca; /* Cambio de color de fondo al pasar el ratón por encima */
    text-shadow: none; /* Elimina el sombreado del texto al pasar el ratón por encima */
    border-color: #000; /* Cambio del color del borde */
}


  

/* Añadir otros breakpoints de media query si es necesario */ 

/* Ajustes para elementos del formulario */ 



/* Define la animacion */
@keyframes intercalarFondo {
    0%, 100% {
        background-position: 47% 103%;
    }
    50% {
        background-position: 47% -6%;
    }
}




.formulario {
 top: 2em;
 position: relative;
 background: #000000c4;
 padding: 4em;
 margin: auto; /* Agregar margen y centrar el formulario horizontalmente */
 max-width: 502px; /* Limitar el ancho maximo del formulario */
 max-height: 522px;
 border-radius: 197px;/* Agregar bordes redondeados */
 background-size: 487px 526px;
 background-repeat: no-repeat;
 background-position: 50% -90px;
 animation: intercalarFondo 60s infinite; /* 5s Puedes ajustar este valor segÃƒÆ la rapidez con la que quieras que se complete la
    
   border: 2px solid white; /* Añade un borde blanco */
 box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8); /* Añade un contorno luminoso *
} 




  

  


  

/* Estilos para texto adicional y enlaces */ 







/* Estilos base para .border y .video-fondo */
.border {
 position: relative;
 display: block;
 width: 100%;
 overflow: hidden;
 background: rgb(0 0 0 / 35%);
 z-index: 2;
 border-radius: 20px;
    /* padding-top proporciona una relación de aspecto basada en el ancho */
 padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

/* Estilos base para .video-fondo */
.video-fondo {
 position: absolute;
 top: -15.4em;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 border-radius: 20px;
 object-fit: cover;
 z-index: -1;
}

/* Media Queries para ajustes responsivos del .video-fondo */
/* Estilo para teléfonos muy pequeños (por ejemplo, menos de 320px de ancho) */
 @media only screen and (max-width: 320px) {
    .video-fondo {
        top: -10em; /* Ajustar según sea necesario */
 object-fit: contain;
    }
}

/* Estilo para teléfonos móviles */
 @media only screen and (min-width: 321px) and (max-width: 480px) {
    .video-fondo {
        top: -12em; /* Ajustar según sea necesario */
 object-fit: contain;
    }
}

/* Estilo para dispositivos que van desde 481px hasta tabletas pequeñas (768px) */
 @media only screen and (min-width: 481px) and (max-width: 768px) {
    .video-fondo {
        top: 0em; /* Ajustar según sea necesario */
 object-fit: cover;
    }
}

/* Estilo para tabletas medianas y dispositivos de pantalla ancha */
 @media only screen and (min-width: 769px) and (max-width: 1024px) {
    .video-fondo {
        top: 0em; /* Ajustar según sea necesario */
 object-fit: cover;
    }
}

/* Estilo para pantallas grandes (por ejemplo, monitores pequeños de escritorio) */
 @media only screen and (min-width: 1025px) and (max-width: 1280px) {
    .video-fondo {
        top: -3em; /* Ajustar según sea necesario */
 object-fit: cover;
    }
}

/* Estilo para pantallas muy grandes (por ejemplo, monitores de escritorio grandes) */
 @media only screen and (min-width: 1281px) {
    .video-fondo {
        top: -1.4em; /* Este es el valor original */
 object-fit: cover;
    }
}


/* Media Queries para ajustes responsivos */
 @media only screen and (max-width: 480px) {
    .border {
        padding-top: 75%; /* Proporción para cambiar el aspecto a algo más cuadrado */
 margin: 16px 0; /* Menor margen */
    }

    .video-fondo {
 top: -19em;
 object-fit: contain; /* Asegura que el video se muestre completamente */
        /* Ajustes para el tamaño y posición si es necesario */
    }
}
 @media only screen and (max-width: 600px) {
    .border {
        padding-top: 81.66%; /* Cambia la relación de aspecto para un mejor ajuste */
    }

    /* Puedes añadir aquí más ajustes específicos para esta ventana de visualización */
}












.olvido {
 color: #DAA520; /* Color dorado */
 text-shadow: 0px 0px 3px #555; /* Sombra oscura para resaltar el texto */
 font-weight: bold; /* Hacer la fuente más gruesa */
 transition: all 0.3s ease; /* Transición suave para cambios de estilo */
 text-decoration: none; /* Eliminar el subrayado del enlace */
}

.olvido
 hover, .olvido:focus {
    color: #FFD700; /* Un dorado más brillante cuando el mouse pasa por encima */
 text-shadow: 0px 0px 8px #ffd700; /* Sombra más luminosa al pasar el mouse */
}


















/* Media Queries para elementos visuales generales */
 @media only screen and (max-width: 480px) { 

    .border, 

    .section, 

    .parallax, 

    .category {margin-top: -4.7rem; /* Ajustar márgenes en dispositivos móviles */
 background-size: contain; /* Asegurar que los fondos no se corten */} 

     

    /* Ajustar tamaños de fuente para dispositivos móviles */ 

    .section p, 

    .category, 

    .contenido article p {
 font-size: 0.9rem; 

    } 

}
 @media only screen and (min-width: 481px) and (max-width: 768px) { 

    /* Ajustes intermedios para tablets */ 

    .border, 

    .section, 

    .parallax, 

    .category { 

        margin-top: 1.5rem;
 padding: 1.5rem; 

    } 

     

    .section p, 

    .category, 

    .contenido article p {
 font-size: 1rem; 

    } 

}
 @media only screen and (min-width: 769px) { 

    /* Ajustes para pantallas grandes y escritorios */ 

    .border, 

    .section, 

    .parallax, 

    .category {

margin-top: -14.6rem;
 padding: 2rem;

} 

     

    .section p, 

    .category, 

    .contenido article p {
 margin: 0px;

} 

} 

  

/* Asegúrate de agregar más media queries si tienes puntos de interrupción adicionales o ajustes específicos para ciertos tamaños de pantalla. */ 

  

/* Ajustes finales y generales */
 html { 

    scroll-behavior: smooth; /* Suaviza el scroll */ 

} 

  

/* Tipografía y elementos base */
 body, 

button, 

input, 

textarea, 

select { 

    font-family: 'Raleway', sans-serif; /* Fuente consistente en todo */ 

}
}


.error {
    color: #00BFFF; /* Esto es azul celeste */
    font-weight: bold; /* Esto hará que el texto sea más grueso */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Esto añade sombra al texto */
    /* Agrega aquí más estilos si es necesario, como padding, margenes, etc. */
}

/* Estilos para los iconos en el formulario de registro */

/* Estilo para el icono del sobre (email) */
.fa-envelope {
    color: wheat; /* Cambia 'wheat' por el color que prefieras */
}
.icono.izquierda {
    top: 10px;
    position: absolute;
    left: -27px;
    color: wheat;
    font-size: 20px;
}

/* Estilo para el icono de usuario */
.fa-user {
    color: wheat; /* Cambia 'wheat' por el color que prefieras */
}

/* Estilo para el icono de candado (password) */
.fa-lock {
    color: wheat; /* Cambia 'wheat' por el color que prefieras */
}

/* Estilo para el icono de flecha en el botón de submit */
.submit-btn.fa-arrow-right {
    color: wheat; /* Cambia 'wheat' por el color que prefieras */
}



/* Estilos para el footer */
.footer {
    position: relative;
    top: 6.4em;
    background-color: #111; /* Fondo oscuro */
    color: #fff; /* Texto claro */
    padding: 40px 0;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    z-index: 1;
}

.footer-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section {
    flex: 1;
    margin: 15px;
}

.footer-section h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #fbffca; /* Color del texto principal del footer */
}

.footer-section p, 
.footer-section ul {
    font-size: 1rem;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #fbffca; /* Color de los enlaces */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #00BFFF; /* Color al pasar el ratón */
}

.socials {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

.socials li {
    margin: 0 10px;
}

.socials li a {
    color: #fbffca;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.socials li a:hover {
    color: #00BFFF;
}

.footer-bottom {
    margin-top: 20px;
    border-top: 1px solid #444;
    padding-top: 20px;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.9rem;
    color: #888;
}

/* Media Queries para el footer */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        margin: 10px 0;
    }
}





/* CONTENEDOR DE OLAS */
.wave-container {
  position: fixed;
  top: -32px;
  left: 0;
  width: 100%;
  height: 1598%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.wave-svg {
  width: 100%;
  height: 100%;
}

/* Movimiento suave para cada ola */
.wave-path {
  fill-opacity: 0.5;
  animation: waveMotion 10s infinite ease-in-out;
  transform-origin: center;
}

/* Colores personalizados */
.wave-stop-1 { stop-color: #4DA8DA; }
.wave-stop-2 { stop-color: #6786B7; }
.wave-stop-3 { stop-color: #A0D7F3; }

.wave-stop-4 { stop-color: #C5E4EA; }
.wave-stop-5 { stop-color: #73C2FB; }
.wave-stop-6 { stop-color: #87CEEB; }

/* Movimiento leve vertical + horizontal + zoom horizontal */
@keyframes waveMotion {
  0% {
    transform: translateX(0) translateY(0) scaleX(1.05);
  }
  25% {
    transform: translateX(-10px) translateY(-4px) scaleX(1.5);
  }
  50% {
    transform: translateX(-20px) translateY(0px) scaleX(4.4); /* 440% */
  }
  75% {
    transform: translateX(-10px) translateY(4px) scaleX(1.5);
  }
  100% {
    transform: translateX(0) translateY(0) scaleX(1.05);
  }
}

/* Alternancia entre olas */
.wave-path:nth-of-type(odd) {
  animation-duration: 11s;
  animation-direction: alternate;
}
.wave-path:nth-of-type(even) {
  animation-duration: 13s;
  animation-direction: alternate-reverse;
}