:root {
    --Error: hsl(0, 100%, 74%);
    --ButtonMain: hsl(154, 59%, 51%);
    --InHover: hsl(248, 32%, 49%);
    --Neutro: hsl(249, 10%, 26%);
    --Noclick: hsl(246, 25%, 77%);
}

body {
    background-color: var(--Error);
    background-image: url(./images/bg-intro-desktop.png);
    font-family: 'Poppins', sans-serif;
}

/**Txt*/
h1 {
    font-size: 30px;
    color: white;
    margin: 0; 
    font-weight: 700;
}
p {
    color: white;
    font-size: 20px;
    font-weight: 400;
}
.negritas{
    font-weight: 700;
}
.TyS{
    font-size: 13px;
    color: var(--Noclick);
}
.TySNegritas{
    font-weight: 700;
    color: var(--Error);
}
@media (min-width: 768px) {

    /**Txt*/
    h1 {font-size: 60px;}
    p {font-size: 20px;}
    .TyS{font-size: 15px;}  
}


/**Containers*/
.container {
    min-height: 100vh;
    width: 80%;
    margin: 50px auto ;
    text-align: center;
}
@media (min-width: 768px) {
    /**Containers*/
    .container {
        margin: auto;
        text-align: left;
    }
}

/**Info*/
@media (min-width: 768px) {
    /**Info*/
    .info{width: 600px;}
}

/**Form*/
.prueba {
    flex-direction: column;
    background-color: var(--InHover);
    height: 60px;
    color: white;
    border-radius: 10px;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.formulario {
    background-color: white;
    flex-direction: column;
    border-radius: 10px;
    padding: 2px 10px;
    position: relative;
}
@media (min-width: 768px) {
    
    /**Form*/
    .prueba {
        width: 600px;
    }
    .formulario {
        width: 600px;
        padding: 5px 20px;
    }
    .Dipsflex{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.sombra{
    box-shadow: 0 10px 0 0 rgba(0, 0, 0, 0.2);
}
input {
   width: 90%;
   height: 50px;
   border-radius: 5px;
   color: var(--Neutro);
   padding: 5px 10px;
   font-weight: 700;
   margin: 20px 10px; 
   border: 1px solid var(--Neutro);
}
button {
    width: 93%;
    height: 50px;
    border-radius: 10px;
    background-color: var(--ButtonMain);
    color: white;
    font-weight: 700;
    margin: 10px; 
    border: none;
    font-family: 20px;
    text-transform: uppercase;
    cursor: pointer;
}

button:hover {
  background-color: var(--ButtonMain); 
  opacity: 0.8;
}

/**Error*/
.imgError{
    position: absolute;
    top: 38%;
    right: 10%; 
}
.textError{
    color: var(--Error);
    position: absolute;
    top: 75%;
    right: 8%;
    font-size: 12px;
}

/**Active/Noactive*/    
.noactive{
    visibility: hidden;
}
.active{
    visibility: visible;
}