body {
    background-size: cover;
    background-position: center;
    animation: changeBackground 30s infinite; /* 15 segundos por imagen, infinito bucle */
    text-align: left;
    margin: 0;
    padding: 20px;
    font-family: "Montserrat";
}

@keyframes changeBackground {
    0% {background-image: url('imgs/sala.jpg');}
    33% {background-image: url('imgs/cafe.jpg');}
    66% {background-image: url('imgs/patio.jpg');}
    100% {background-image: url('imgs/sala.jpg');}
}


.container {
    margin-top: 100px;
    height: 80vh; /* Establece la altura del contenedor al 100% del viewport */
    align-items: normal;
}

#logo{
    margin-bottom: 20px;
    margin-top: 0px;
    margin-left: 00px;
    position: relative;
}


#contacto{
        margin-top: -3px;
        font-optical-sizing: auto;
        font-weight: weight;
        font-style: normal;
        font-size: 55px;
}

#pep1{
    margin-top: -15px;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    font-size: 20px;
    color: rgb(155, 155, 155);
}

#pep2{
    font-family: "Montserrat";
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    font-size: 15px;
    font-weight: bold;
}

h2{
    margin-top: -5px;
    font-family: "Montserrat";
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    font-size: 25px;
}

#formulario{
    font-family: "Montserrat";
}

.formulario {
    margin-right: 5%;
    width: 100%; /* Ocupa la otra mitad del contenedor */  
    display: flex;  
    flex-direction: column; /* Los elementos dentro del formulario estarán uno debajo del otro */  
    justify-content: center; /* Centra verticalmente los elementos del formulario */  
    padding: 20px; /* Espacio entre el formulario y los bordes */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con un 80% de opacidad */
    border-radius: 10px; /* Agrega bordes redondeados al formulario */
    background-size: 10% 10%;
}

form .grupo {
    position: relative;
    margin-top: 15px;
    margin-bottom: 25px;
}

input {
    background-color: rgba(255, 255, 255, 0.7);;
    font-size: 18px;
    padding: 6px 6px 6px 6px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--colorTextos);
}

input:focus {
    outline: none;
    color: #5e5d5d;
}

label {
    color: var(--colorTextos);
    font-size: 12px;
    position: absolute;
    left: 5px;
    top: 10px;
    transition: 0.5s ease all;
    pointer-events: none;
}

input:focus~label,
input:valid~label {
    top: -14px;
    font-size: 12px;
    color: #aeb0b3;
    font-weight: bold;
}

.barra {
    position: relative;
    display: block;
    width: 100%;
}

.barra::before {
    content: "";
    height: 2px;
    width: 0%;
    bottom: 0;
    position: absolute;
    background: linear-gradient(to right, #1b1a1b, #4568DC);
    transition: 0.3s ease width;
    left: 0;
}

input:focus~.barra::before {
    width: 100%;
}


#redes{
    display: flex;
    gap: 10px;
    font-size: 10px;
}

/*
----------------
input[type="text"],

input[type="email"],

textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #795f5f;
    border-radius: 5px;
    box-sizing: border-box;
    }
*/
.redes-sociales {
margin-top: 20px; /* Espacio entre el formulario y los enlaces */
}
.redes-sociales a {
align-items: center;
display: flex; /* Para que cada enlace esté en una línea nueva */
margin-bottom: 10px; /* Espacio entre cada enlace */
}

#registrar {
    background-color: rgba(255, 255, 255, 0.87);
    border: 2px solid rgb(7, 7, 7);
    border-radius: 4px;
    color: rgb(2, 2, 2);
    font-size: 15px;
    animation: pulse 1.5s infinite;
    font-weight: bold;
    margin-bottom: 15px;
    font-weight: bold;
    position: static;
   
}

button:focus {
    outline: 1px dotted;
    outline: 5px auto;
}