@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

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

/*BODY*/

body {
    font-family: 'Lato', sans-serif;
    place-items: center;
    background-color: whitesmoke;
}

/*HEADER LOGIN*/
.header-login {
    padding: .8em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: whitesmoke;
}

.header-recorrido {
    width: 10em;;
    padding: .40em;
}

/*FORMULARIO*/

.formulario {
    padding: 4em 3em;
    text-align: center;
    border-radius: .5em;
    background-color: whitesmoke;
}
  
.formulario__titulo {
    margin-block-end: .5em;
    font-size: 2rem;
    color: #207b36;
}
 
.formulario__link {
    text-decoration: none;
    font-weight: bold;
    color: #207b36;
}

.formulario__contenedor {
    margin-block-start: 3em;
    display: grid;
    gap: 2.5em;
}
  
.formulario__grupo {
    --color: hsl(0 0% 35% / 50%);
    position: relative;
}

.boton-enviar-form {
    margin: 1.5em;
    display: flex;
    align-items: center;
    flex-direction: column;
}
  
.formulario__input {
    width: 100%;
    padding: .5em;
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
    border: solid 1px var(--color);
    border-radius: .25em;
    background-color: whitesmoke;
    cursor: pointer;
    transition: 1s;
}
  
.formulario__input:focus {
    font-weight: 700;
    color: var(--color);
}
  
.formulario__etiqueta {
    position: absolute;
    left: .5em;
    transform: translateY(.5em);
    transition:
    transform .5s,
    color .3s,
    padding .5s;
    color: var(--color);
    background-color: whitesmoke;
}
  
:is(.formulario__input:not(:placeholder-shown),
    .formulario__input:focus) {
    --color: #6ec17e;
}
  
:is(.formulario__input:not(:placeholder-shown),
    .formulario__input:focus) + .formulario__etiqueta {
    transform: translateY(-.6em) scale(.7);
    transform-origin: left top;
    padding: 4px;
    --color: #6ec17e;
}
  
.formulario__etiqueta::before {
    width: 1em;
    aspect-ratio: 1;
    background-color: #6ec17e;
    border-radius: 50%;
    transform: scale(0);
    transition: .5s;
    content: "";
    position: absolute;
    inset: calc(50% - .5em) auto auto 0;
}
  
.formulario__input:focus + .formulario__etiqueta::before {
    transform: scale(1.5);
    inset: calc(100% + .3em) auto auto -2.5em;
}

.formulario__enviar {
    padding-block: 1em;
    font-family: 'Lato', sans-serif;
    border: none;
    border-radius: 3em;
    background-color: #6ec17e;
    cursor: pointer;
    transition: .5s;
}

.btn-home {
    padding: 1em;
    text-decoration: none;
    font-weight: bold;
    color: hsl(0 0% 100%);
}
  
/*FOOTER*/

.contenedora-footer {
    background-color: #6ec17e;
}

.contacto {
    padding: .4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 600;
    color: white;
}

.contenedora-redes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    list-style: none;
}

.ubicacion {
    text-align: center;
    font-weight: 600;
    color: white;

}

.contenedora-redes img {
    width: 3em;
    height: 3em;
}

.li-logo-acumar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo-acumar {
    width: 180px;
    height: 100%;
}

/*:HOVER*/

.formulario__link:hover,
.formulario__link:focus {
    text-decoration: underline;
}

.formulario__enviar:focus,
.formulario__enviar:hover {
    background-color: #b4e6bd;
}

/*@MEDIA*/

/*@media 640PX*/

@media screen and (min-width: 40em) {
.header-recorrido {
    width: 15em;
    margin-top: 2em;
}
.p-sumar{
    font-size: 1.2em;
}
.formulario__input {
    width: 45%
}
.formulario__enviar {
    border-radius: 4em;
}
.btn-home {
    padding: 3em;
    font-size: larger;
}
.contacto {
    padding: .4em;
    font-size: 1.2em;
}
.contenedora-redes img {
    width: 2em;
    height: 2em;
}
.ubicacion {
    font-weight: 400;
}
#logo-acumar {
    width: 10em;
}
}

/*@media 1024PX*/

@media screen and (min-width: 64em) {
.p-sumar{
    font-size: 1.5em;
}
.formulario__input {
    width: 30%
}
.btn-home {
    font-size: x-large;
}
.contacto {
    font-size: 1em;
}
.contenedora-redes img {
    width: 2.2em;
    height: 2.2em;
} 
.ubicacion {
    font-size: small;
}
#logo-acumar {
    width: 8em;
}
}