@font-face {
    font-family: 'Montserrat';
    src: url('../Assets/Font/Montserrat-VariableFont_wght.ttf') format('truetype');
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root{
    color-scheme:light;
    --txt-col-1:#101010;
    --txt-col-2:#333333;
    --txt-col-3:#555555;

    --bg-col-1:#fafafa;
    --bg-col-2:#F4F0ED;
    --bg-col-3:#E8E8E8;

    --primary:#F6892A;
    --primary-hover:#df4e15;
    --shadow-col:#00000025;

    
    --alert-r:#ff8181;
    --alert-txt:#7e1313;
    --alert-form:#f13434;
    --succes-col:#56ae57;
    --form-blue:#4c6acc;
    
    --padding:clamp(.5rem, 2rem + 2vw, 4rem);
    --margin:clamp(.3rem, .3rem + 4.5vw, 4rem);

    --margin-1:12px;
    --margin-2:16px;
    --margin-3:32px;
    --margin-4:48px;
    --margin-5:64px;

    --margin-mobile:min(3.5vw, 16px);

    --title-l:48px;
    --title-m:40px;
    --title-s:32px;

    --subtitle:20px;
    
    --txt:16px;
    --txt-s:14px;

    --btn-l:24px;
    --btn-m:18px;
    --btn-s:16px;

    --regular:400;
    --bold:700;
    
    --shadow:0 2px 4px #00000025;
}

html{
    line-height:1.15;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    line-height:1.5;
    
    font-family:'Montserrat', sans-serif;
    font-size:clamp(1rem, .15vw + 1rem ,1.125rem);
    
    color:var(--txt-col-1);
    background-color: var(--bg-col-1);
}

h1,h2,h3,h4{
    font-family: sans-serif;
    font-family: 'Montserrat';

    margin:0
}

img{
    max-width:100%;
    height:auto;
    border-style:none
}

ol,ul{
    margin:0;
    padding:0;
    list-style:none
}

a{
    text-decoration:none;
    color:inherit
}

button{
    border: none;
}

input[type='submit']:disabled{
    background-color:#a1a1a1;
    color: #7e7e7e;
    cursor: initial;
}




.loader-container{
    background-color: #00000090;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    align-content: center;
}

.loader {
  border: 16px solid #f3f3f3; 
  border-top: 16px solid #3498db; 
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
  margin-inline: auto;
}


/*Modal mensaje left*/
.modal-alert{
    background-color: var(--succes-col);
    color: var(--bg-col-1);
    width: 250px;
    position: fixed;
    left: 8px;
    bottom: -50px;
    border-radius: 4px;
    box-shadow: 0 2px 4px var(--shadow);
    z-index: 1000;
    padding: .8rem .5rem;
    transition: bottom 600ms ease;
}

.modal-alert.active-modal{
    bottom: 10px;

}

.modal-alert > p {
    margin: 0;
}


.modal-alert.modal-big{
    text-align: center;
    height: fit-content;
    
    left: 50%;
    top: -30px;
    transition: top 600ms ease;
    transform: translate(-50%, -50%); 
   
}

.alert-error{
    background-color: var(--alert-form);
}

.modal-big.active-modal{
    top: 55px;
    min-width: 250px;
    width: auto;
}


.input-error{
    color: var(--alert-form); 
    border:2px solid var(--alert-form);
}


.form-error{
    color: var(--alert-form); 
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@media screen and (min-width: 416px){
    .form-margin{
        margin-inline: auto;
    }
}