.shipping-info{
    width: 100%;
    overflow-x:clip;
    display: flex;
    padding:50px;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    background-color: var(--c-primario);
}
.shipping-info__text{
  max-width: 430px;
  padding: 10px;
  position: relative;
  z-index: 1111;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
  opacity 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform: scale(0.4);
  opacity: 0;
}
.shipping-info__text-title{
    font-size: var(--fz-title);
    font-family: var(--font-primaria);
    font-weight: 800;
    color: var(--bg-primario);
    text-transform:capitalize;
}
.shipping-info-text-subtitle{
    font-size: var(--fz-subtitle);
    font-family: var(--font-primaria);
    color: var(--c-terciario);
    letter-spacing: 2px;
    font-weight: 700;
}
.shipping-info__text-paragraph{
    font-size:var(--fz-parrafo);
    font-family: var(--font-secundaria);
    font-weight: 600;
    color: var(--bg-primario);
    margin: 15px 0px;
}
.shipping-info-btn{
    padding: 8px 20px;
    border-radius: 20px;
    border: none;
    color:var(--bg-primario);
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font-primaria);
    background-color:var(--c-terciario);
    transition: scale 0.3s ease-in-out;
}
.shipping-info-btn:hover{
    box-shadow: 0px 0px 20px rgba(255, 142, 12, 0.5);
}
.shipping-info__img{
    max-width: 700px;
    height:auto;
    position: relative;
    z-index: 111;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
    opacity 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: scale(0.4);
    opacity: 0;
}

.shipping-info__img-imagen{
    width: 100%;
}
.shipping-wave{
    position: absolute;
    bottom: -20px;
    z-index: 111;
}
.shipping-mapa{
    filter: brightness(0.1);
    opacity: 0.1;
    position: absolute;
    width: 100vw;
    z-index: 11;
}

/*animacion de elementos con una clase e intersection observer*/
.animate-scale{
    transition: transform 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
    opacity 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform: scale(1);
    opacity: 1;
}

@media (max-width:760px){
    .shipping-info{
        padding: 10px;
    }
}