/* Estilos para recuadros 2x1 de publicaciones */

.boton-multiespacio .principal {
    position: relative;
    width: calc(100% - 18px);
    height: 181px;
    transition: all ease-in-out 0.4s;
    text-align: left;
    padding: 12px;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    border: 8px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.3s ease-in-out;
    background: url('../images/background-multiespacio.jpg') center center no-repeat;
    background-size: 120%;
    z-index: 4;
}

.boton-multiespacio .principal:hover {
    transform: scale(1.03); /* Agranda el iframe un 3% */
    transition: transform 0.3s ease-in-out; /* Transición suave */
    cursor: pointer;
}

.boton-multiespacio .body {
    margin-top: 20px;
}

.boton-multiespacio .logo {
    width: 220px;
    position: absolute;
    top: 12px;
    left: 12px;
}

.boton-multiespacio .banner {
    width: 360px;
    position: absolute;
    top: 12px;
    right: 12px;
}

.boton-multiespacio .data {
    transition: all ease-in-out 0.4s;
    opacity: 0;
    position: relative;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 50px 30px;
}

.boton-multiespacio  p {
    clear: both;
    line-height: 18px;
    font-size: 13.5px;
    margin-bottom: 0;
    color: rgb(46, 46, 46);
}

.boton-multiespacio  h4 {
    font-weight: bold;
    color: #003A74;
    text-transform: uppercase;
    font-size: 20px !important;
    line-height: 20px !important;
}

.boton-multiespacio  .description {
    position: absolute;
    bottom: 12px;
    width: 100%;
    padding: 0px 6px;
    left: 6px;
}

.tarjetas-bg-dinamico .icon-box.bg-remitidas::before {
    background: url(../assets/img/copias-remitidas-bg.jpg) no-repeat bottom center;
    background-size: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: 0.45;
}

/* Ajustes responsivos */
@media (max-width: 768px) {

    .boton-multiespacio {
        padding-right: 0px !important;
        height: 200px !important;
    }

    .boton-multiespacio .principal {
        width: 100%;
        height: 100%;
        padding: 10px;
        background-size: 280% !important;
    }

    .boton-multiespacio .description {
        padding: 10px 20px 10px 10px !important;
    }

    .boton-multiespacio .logo {
        width: 160px;
    }

    .boton-multiespacio .banner {
        width: 180px;
        top: 8px;
        right: 8px;
    }

    .boton-multiespacio h4 {
        font-size: 20px !important;
        line-height: 24px !important;
    }

    .boton-multiespacio p {
        font-size: 14.5px;
        line-height: 17px;
    }

    .tarjetas-2x1 h4 {
        font-size: 20px !important;
        line-height: 24px !important;
    }

    .tarjetas-2x1 .tarjetas-data {
       margin-bottom: 30px !important;
    }

    .tarjetas-2x1 .denuncias .body {
        padding-top: 50px !important;
    }

    .tarjetas-2x1 .denuncias .icon img {
        width: 80px;
        height: 80px;
        display: block;
        margin: 6px 6px;
    }

    .tarjetas-2x1 .bg-remitidas .icon img, .tarjetas-2x1 .bg3 .icon img, .tarjetas-2x1 .icon-box-4  .icon img{
        transform: scale(1.8);
        margin-top: 20px !important; margin-right: 20px !important;
    }

    .tarjetas-2x1 .bg-remitidas .icon img, .tarjetas-2x1 .bg3 .icon img, .tarjetas-2x1 .icon-box-4  .icon img{
        transform: scale(1.8);
        margin-top: 20px !important; margin-right: 20px !important;
    }

    .tarjetas-2x1 .tarjetas-data .icon i{
        position: absolute;
        font-size: 72px;
        right: 20px;
        top: 20px;
    }

    .tarjetas-2x1 .tarjeta-autogestion, .tarjetas-2x1 .tarjeta-visados, .tarjetas-2x1 .tarjeta-autogestion .icon-box-4, .tarjetas-2x1 .tarjeta-visados .icon-box-4 {
       height: 245px !important;
    }


    .tarjetas-2x1 .tarjeta-autogestion .description, .tarjetas-2x1 .tarjeta-visados .description{
        position: absolute;
        text-align: left !important;
        left: 25px;
        bottom: 26px;
        padding-right: 20px;
    }

    .tarjetas-2x1 .tarjeta-autogestion h4,.tarjetas-2x1 .tarjeta-visados h4 {
        color: #003A74 !important;
        font-size: 20px !important;
        line-height: 24px !important;
        text-transform: uppercase;
    }

    .tarjetas-bg-dinamico .icon-box h4 {
        margin-top: 40px;
        font-weight: bold;
    }

    .tarjetas-data .denuncias {
        background-size: 120% !important;
        border: 10px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 28px !important;
    }

    #services .owl-carousel .owl-stage-outer {
        height: 468px !important;
    }

    #services .mosaico-tarjetas .tarjetas-deslizables .owl-item, .mosaico-tarjetas .tarjetas-deslizables .item {
        width: 415px !important;
        aspect-ratio: 4 / 5;
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        height: 515px !important;
        margin-top: -20px;
    }

    #services  .mosaico-tarjetas .tarjetas-deslizables .owl-item img, .mosaico-tarjetas .tarjetas-deslizables .item img {
        width: 415px !important;
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        height: 515px !important;
    }
}

@media (max-width: 480px) {
    .boton-multiespacio .principal {
        height: 100%;
        padding: 8px;
    }

    .boton-multiespacio .logo {
        width: 130px;
    }

    .boton-multiespacio .banner {
        width: 150px;
    }

    .boton-multiespacio .description {
        padding: 0 4px;
    }

    .boton-multiespacio .data {
        padding: 24px 14px;
    }
}