:root{
    --celeste :#02B194;
    --azul-gris:#2E3D50;
    --gris:#3F3F3F;
}

.poppins{
    font-family: 'Poppins', sans-serif;
}

.bg-azul{
    background-color: var(--azul-gris);
}

.celeste{
    color: var(--celeste);
}
.azul{
    color: var(--azul-gris);
}

/* MARGIN */
.mt-10{
    margin-top: 8rem;
}

/* BOTONES */
.btn-celeste{
    padding: 0.5rem 1.5rem;
    background-color: var(--celeste);
    color: white;
    font-family:'Poppins', sans-serif;
    font-weight: bold;
    font-size: 1.4rem;
    border-radius: 1.6rem;
    border: white solid 1px;
    letter-spacing: 0.05rem;
}

.btn-celeste:hover{
   
    background-color: white;
    color: var(--celeste);
    border: var(--celeste) solid 1px;
}

.btn-celeste-border{
    padding: 0.5rem 1.5rem;
    background-color: var(--celeste);
    color: white;
    font-family:'Poppins', sans-serif;
    font-weight: bold;
    font-size: 1.4rem;
    border-radius: 1.6rem;
    border: var(--celeste) solid 1px;
    letter-spacing: 0.05rem;
}
.btn-celeste-border:hover{
    background-color: white;
    color: var(--celeste);
    border: white solid 1px;
}

.btn-enviar{
    padding: 0.5rem 1.5rem;
    background-color: var(--celeste);
    color: white;
    font-family:'Poppins', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 1.6rem;
    border: white solid 1px;
    letter-spacing: 0.05rem;
}

/* BARRITA */

.barrita{
    color:var(--celeste);
    font-size: 1.5rem;
    
}

/* TEXT BLOCK */
.text-block {
    position: absolute;
    top: 7.5rem;
    right: 2rem;
    background-color:transparent;
    color: white;
    padding: 1rem;
    
}
.text-block h1{
    font-size:4.5rem;
    text-align: right;
}

.text-block-down-center{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.text-block-up-left{
    position: absolute;
    top: 8%;
    left: 8%;
    
}

.servicios h2{
    font-size: 4rem;
}
.servicios h3{
    font-size: 3rem;
    color:var(--celeste);
    font-weight: bold;
    line-height: 2.6rem;
}
.servicios h4{
    font-size: 1.7rem;
    color:var(--celeste);
    font-weight: bold;
    line-height: 2.6rem;
}
.servicios p{
    font-size: 1.7rem;
    color:var(--gris);
    line-height: 1;
}
.servicios li{
    color: rgb(36, 36, 36);
    font-size: 1.1rem;
}
.rastrea h3{
    font-size: 4rem;
    color:white;
    font-weight: bolder;
    line-height: 4rem;
   
}

.subrayado-corto {
    position: relative;
    display: inline-block;
  }

  .subrayado-corto::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px; /* Ajusta la distancia vertical del subrayado */
    width: 60px; /* Ajusta la longitud del subrayado */
    height: 2px; /* Ajusta el grosor del subrayado */
    background: var(--celeste); /* Ajusta el color del subrayado */
    
  }

  .brillo{
    filter: brightness(90%);
}

  @media only screen and (max-width: 764px) {
    .rastrea h3{
        font-size: 2.5rem;
        color:white;
        font-weight: bolder;
        line-height: 2.5rem;
       
        
    }
    .text-block-down-center{
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }
    .text-block-up-left{
        position: absolute;
        top: 13%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
    }
   .txt-celu{
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
   }
    .brillo{
        filter: brightness(55%);
    }
  }