/* Estilos base */ 

* { 

    margin: 0; 

    padding: 0; 

    box-sizing: border-box; 

} 

  

body { 

    background-image: url('../imagenes/registro.png'); 

    background-size: cover; 

    background-position: center center; 

    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: 13px;

margin-bottom: 15px;

font-family: 'Raleway', sans-serif;

font-size: 1rem; /* Tamaño de fuente unificado */

background-color: rgba(0, 0, 0, 0.57);

border: none;

border-radius: 4px;

color: #00BFFF; /* Azul celeste */

caret-color: #00BFFF; /* Color del cursor en el input */
} 

  

.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, 

.texto-pregunta { 

    font-weight: bold; 

    color: #ffffff; 

    text-align: center; 

    margin-top: 20px; 

    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); 

} 

  

/* Botones y enlaces */ 

a, 

.submit-btn { 

    transition: background-color 0.3s, color 0.3s; 

} 

  

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, 

.texto-pregunta { 

    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; 

} 









 .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; 

} 

  

.texto-pregunta { 

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

    padding: 1rem; 

    margin-top: 2rem; /* Asegurar suficiente espacio sobre y debajo */ 

} 

  

/* 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, 

    .texto-pregunta {position: relative;top: 36px;font-size: 1rem; /* Tamaño más pequeño para legibilidad en móviles */z-index: 3;} 

     

    .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, 

    .texto-pregunta { 

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

    } 

} 

  

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

    .titulologin, 

    .tituloregistrate, 

    .texto-pregunta { 

        font-size: 1.5rem; /* Tamaño más grande para pantallas más grandes */ 

    } 

} 

  

/* 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 {
 position: relative;
 background: #000000;
 padding: 3em;
 margin: auto; /* Agregar margen y centrar el formulario horizontalmente */
 max-width: 500px; /* Limitar el ancho maximo del formulario */
 border-radius: 197px;/* Agregar bordes redondeados */
 background-image: url('../imagenes/inicio.png');
 background-size: 500px 467px;
 background-repeat: no-repeat;
 background-position: 50% -90px;
 animation: intercalarFondo 5s infinite; /* 5s Puedes ajustar este valor segÃƒÆ la rapidez con la que quieras que se complete la 
    z-index: 1;
} 




  

  


  

/* Estilos para texto adicional y enlaces */ 

.texto-registrate, 

.texto-pregunta {position: relative;top: 2.4rem;font-size: 1rem; /* Tamaño unificado para una mejor legibilidad */margin: -64px 0; /* Espacio vertical */color: #fff; /* Texto en color blanco */} 

  

.texto-registrate a, 

.texto-pregunta a {position: relative;right: 0em;top: 3em;color: #00b4ff; /* Color para enlaces */text-decoration: none; /* Sin subrayado */transition: color 0.3s; /* Transición suave al cambiar de color */} 

  

.texto-registrate a:hover, 

.texto-pregunta a:hover { 

    color: #00ffff; /* Cambio de color al pasar el ratón por encima */ 

} 

















/* 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 */
}

/* 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 */
}