@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: all .2s linear;
    font-family: "Google Sans", sans-serif;
    text-decoration: none;
    outline: none;
    list-style: none;
    border: none;
}

html{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

section{
    min-height: 100vh;
    padding: 2rem 9%;
    cursor: default;
}



.underText{
    justify-content: center;
    display: flex;
    background: #f7f7f7;
    width: 100%;
}

.underText .container{
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}
.underText .container .textCont{
    margin-bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 1rem;
    padding: 1rem;
    width: 100%;
    box-shadow: 0 10px 22px rgba(0,0,0, .080);
    background: #fff;
    min-height: 30vh;
}
.underText .container h2{
    width: 100%;
    text-align: center;
    font-size: clamp(1.2rem, 3vw, 3rem);
    font-weight: 400;
    color: #506177;
}
.underText .container .textCont i{
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: #ff4500;
}
.underText .container .textCont h1{
    color: #506177;
    font-size: clamp(1rem, 3vw, 2rem);
}




/*Estilo Loader Empieza*/
      #loader {
        position: absolute;
        top: calc(70% - 0%);
        left: calc(50% - 0%);
      }
    @keyframes loader {
        0% {left: -100px}
        100% {left: 110%;}
    }
    #box {
        width: 50px;
        height: 50px;
        background: #6997db;
        animation: animate .5s linear infinite;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 3px;
        z-index: 2; /* Asegura que el cubo esté por encima de la sombra */
    }
    @keyframes animate {
        17%{
          border-bottom-right-radius: 3px;   
        }
        25% {
           transform: translateY(9px) rotate(22.5deg); 
        }
        50% {
          transform: translateY(18px) scale(1, .9) rotate(45deg);
          border-bottom-right-radius: 40px;  
        }
        75% {
          transform: translateY(9px) rotate(67.5deg);  
        }
        100% {
          transform: translateY(0) rotate(90deg);
        }
    }
    #shadow {
        width: 50px;
        height: 5px;
        background: #000;
        opacity: 0.1;
        position: absolute;
        top: 59px;
        left: 0;
        border-radius: 50%;
        animation: shadow .5s linear infinite;
        z-index: 1;
    }
    @keyframes shadow {
    50% {
      transform: scale(1.2, 1);  
      }    
    }

/*Estilo Loader Termina*/