@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Montserrat", sans-serif;

}



body {

    width: 100%;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: #F0F4F3;

}



.container {

    width: 800px;

    height: 500px;

    display: flex;

    position: relative;

    background-color: white;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

}



/* Responsivo para pantallas pequeñas */

@media (max-width: 600px) {

    .container {

        width: 90%;

        height: auto;

        flex-direction: column;

    }

}



/* Contenedor del formulario */

.container-form {

    width: 100%;

    overflow: hidden;

}



.container-form form {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    transition: transform 0.5s ease-in;

    transform: translateX(-170px);

}



.container-form h2 {

    font-size: 30px;

    margin-bottom: 20px;

}



/* Contenedor para logo (imagen) */

.social-networks {

    display: flex;

    gap: 12px;

    margin-bottom: 25px;

}



/* Texto debajo del logo */

.container-form span {

    font-size: 12px;

    margin-bottom: 15px;

}



/* Campo de entrada y su contenedor */

.container-input {

    width: 300px;

    height: 40px;

    margin-bottom: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    padding: 0 15px;

    background-color: #EEEEEE;

}



.container-input input {

    border: none;

    outline: none;

    width: 100%;

    height: 100%;

    background-color: inherit;

}



/* Iconos ion-icon dentro de container-input */

.container-input ion-icon {

    font-size: 20px;

    color: #888;

}



/* Botón */

.button {

    width: 170px;

    height: 45px;

    font-size: 15px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    margin-top: 10px;

    background-color: #611232;

    color: white;

}



/* Contenedor de bienvenida */

.container-welcome {

    position: absolute;

    width: 50%;

    height: 100%;

    display: flex;

    align-items: center;

    transform: translateX(100%);

    background-color: #611232;

    transition: transform 0.5s ease-in-out, border-radius 0.5s ease-in-out;

    overflow: hidden;

    border-radius: 50% 0 0 50%;

}



.container.toggle .container-welcome {

    transform: translateX(0);

    border-radius: 0 50% 50% 0;

    background-color: #611232;

}



/* Contenido dentro del contenedor de bienvenida */

.container-welcome .welcome {

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

    padding: 0 50px;

    color: white;

    transition: transform 0.5s ease-in-out;

}



.welcome-sign-in {

    transform: translateX(100%);

}



.container-welcome h3 {

    font-size: 40px;

}



.container-welcome p {

    font-size: 14px;

    text-align: center;

}



/* Botón dentro de bienvenida */

.container-welcome .button {

    border: 2px solid white;

    background-color: transparent;

}



.container.toggle .welcome-sign-in {

    transform: translateX(0);

}



.container.toggle .welcome-sign-up {

    transform: translateX(-100%);

}