/* ========================================
   TIPOGRAFÍA RESPONSIVE MÓVIL
   ======================================== */

@media (max-width: 767px) {
    h1,
    .header-title,
    .title-h2 h1 {
        font-size: 35px !important;
    }

    h2,
    .title-h2,
    .title-h2-left {
        font-size: 20px !important;
        text-align: left !important;
    }
    span.tittle {
    font-size: 20px !important;
    text-align: left !important;
    }


    h3,
    .tittle-icon,
    .h5 {
        font-size: 17px !important;
    }



    .image-semicircle-right,
    .image-semicircle-left,
    .image-woman,
    .image-man {
        height: 200px !important;
        min-height: 100px !important;
    }

    .store-badge {
        max-width: 200px;
        height: 24px;
        /* object-fit: contain; */
        display: block;
        margin: 0 auto;
    }
    .icon {
        width: 40px;
        height: 40px;
        margin-left: 16px;
    }

    .oval-icon::before {
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 50%;
        background-color: #3dbab3;
        position: absolute;
        z-index: -1;
        transition: all 0.3s ease-in-out 0s;
        opacity: 0.3;
        top: -16px;
        left: calc(50% - 40px);
    }

    .oval-icon-second::before {
        content: "";
        display: inline-block;
        width: 40px;
        height: 40px;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 50%;
        background-color: #3dbab3;
        position: absolute;
        z-index: -1;
        transition: all 0.3s ease-in-out 0s;
        opacity: 0.3;
        top: -16px;
        left: calc(50% - 20px);
    }
}

/* Regla para que en los moviles estrechos (iphone se, zfold etc) la cabecera (titulos y subtitulos) vayan a corde con el tamaño y las proporciones */
@media (max-width: 423px) {
    h1,
    .header-title,
    .title-h2 h1 {
        font-size: 30px !important;
    }

    h2,
    .title-h2,
    .title-h2-left {
        font-size: 18px !important;
        text-align: left !important;
    }  
    
    span.tittle {
    font-size: 18px !important;
    text-align: left !important;
    }


    h3,
    .tittle-icon,
    .h5 {
        font-size: 15px !important;
    }
}