/*=========================================================
  CARDS - MI TIENDA ONLINE
=========================================================*/

.card{

    position:relative;

    display:flex;

    flex-direction:column;

    width:100%;

    min-width:0;

    max-width:none;

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 8px 22px rgba(0,0,0,.12);

}

.card:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}



.social-buttons{
    margin-top:auto;
}

/*=========================================================
  IMAGEN
=========================================================*/

.card>a{
     position:relative;

    display:block;

    width:100%;

    height:250px;

    overflow:hidden;
}

.card > a img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}

/*=========================================================
  DEGRADADO INFERIOR SOBRE IMAGEN
=========================================================*/

.card > a::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:42%;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.68) 0%,
        rgba(0,0,0,.42) 38%,
        rgba(0,0,0,.16) 70%,
        rgba(0,0,0,0) 100%
    );

    z-index:10;

    pointer-events:none;
}

.card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transition:.45s;
}

.card:hover img{
    transform:scale(1.06);
}



/*=========================================================
  CODIGO Y ESTADO
=========================================================*/

.prop-id{
    position:absolute;
    top:12px;
    left:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(6px);
    color:#fff;
    font-size:12px;
    font-weight:700;
    border-radius:30px;
    z-index:20;
}

.prop-id i{
    font-size:11px;
}

.prop-id:nth-of-type(2){
    left:auto;
    right:12px;
}

/*=========================================================
  ESTADOS
=========================================================*/

.prop-id.disponible{
    background:#198754;
}

.prop-id.vendido{
    background:#b30000;
}

.prop-id.alquilado{
    background:#0d6efd;
}

.prop-id.reservado{
    background:#ff9800;
    color:#fff;
}

.prop-id.inactivo{
    background:#6c757d;
}

/*=========================================================
  PRECIO
=========================================================*/

.precio{
        position: relative;
    left: 14px;
    bottom: 60px;
    margin: 0;
    padding: 4px 4px !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 400;
    border-radius: 8px;
    z-index: 30;
}

.card:hover .precio{
}

/*=========================================================
  ICONOS DE CARACTERISTICAS
=========================================================*/

.iconoindex{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    background:#fafafa;
    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec;
}

.iconosindex{
    padding:14px 8px;
    text-align:center;
    transition:.25s;
    border-right:1px solid #ececec;
}

.iconosindex:last-child{
    border-right:none;
}

.iconosindex:hover{
    background:#f2f2f2;
}

.iconosindex p{
    margin:0;
}

.iconosindex p:first-child{
    margin-bottom:6px;
}

.iconosindex i{
    font-size:18px;
    color:#8b1e1e;
}

.iconosindex p:last-child{
    font-size:10px;
    font-weight:400;
    color:#555;
    line-height:1.3;
}

/*=========================================================
  BOTONES INFERIORES
=========================================================*/

.social-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    border-top:1px solid #ececec;
    padding:0;
}

.social-buttons .btn-box{
    width:33.333%;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    border-right:1px solid #ececec;
}

.social-buttons .btn-box:last-child{
    border-right:none;
}

.btn-box{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:52px;
    text-decoration:none;
    background:#fff;
    color:#444;
    border-right:1px solid #ececec;
    border-radius:0;
    transition:.25s;
    font-size:20px;
}

.btn-box:last-child{
    border-right:none;
}

.btn-box i{
    color:#444;
    transition:.25s;
}

.btn-box:hover{
    background:#f7f7f7;
}

.btn-box:hover i{
    color:#8b1e1e;
}

/*=========================================================
  TRANSICIONES
=========================================================*/

.card,
.card img,
.prop-id,
.precio,
.btn-box,
.iconosindex{
    transition:all .30s ease;
}

/*=========================================================
  RESPONSIVE
=========================================================*/

@media(max-width:1200px){

    .card img{
        height:230px;
    }

}

@media(max-width:992px){

    .card img{
        height:220px;
    }

    .precio{
        font-size:20px;
    }

}

@media(max-width:768px){


    .card{
        border-radius:6px;
    }

    .card img{
        height:210px;
    }

    .prop-id{
        font-size:11px;
        padding:6px 10px;
    }

    .precio{
        left:10px;
        bottom:10px;
        font-size:18px;
        padding:8px 12px !important;
    }

     


    .iconosindex{
        padding:12px 6px;
    }

    .iconosindex i{
        font-size:17px;
    }

    .iconosindex p:last-child{
        font-size:11px;
    }


}

@media(max-width:576px){

    .card img{
        height:200px;
    }

    

    .precio{
        font-size:17px;
    }

    .prop-id{
        font-size:10px;
    }

    .btn-box{
        width:36px;
        height:36px;
        font-size:14px;
    }

}

@media(max-width:420px){

    .card img{
        height:190px;
    }

    .precio{
        font-size:16px;
    }

    .iconosindex{
        padding:10px 5px;
    }

}

/*=========================================================
  SUPERIOR CARD
=========================================================*/

.card-top{
    position:absolute;
    top:12px;
    left:12px;
    right:12px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    z-index:30;
}

.card-top-left{
    display:flex;
    align-items:center;
}

.card-top-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    margin-left:auto;
    padding-right:12px;
    max-width:75%;
}

.prop-fotos{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    background:rgba(35,35,35,.85);
    color:#fff;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
}

.prop-categoria{
    padding:7px 12px;
    background:rgba(35,35,35,.85);
    color:#fff;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
}

.prop-fotos{
    flex:0 0 auto;
}

.prop-id{
    position:static !important;
    flex:0 0 auto;
}

/* Compartir */

.btn-share{
    font-size: 16px;
}

.btn-share i{
}

/* Facebook */

.btn-facebook{
}

.btn-facebook i{
    font-size: 16px;
}

/* Mapa */

.btn-map{
}

.btn-map i{
    font-size: 16px;
}

/*=========================================================
  UBICACIÓN
=========================================================*/

.prop-ubicacion{
    position:absolute;
    left:18px;
    right:18px;
    bottom:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:30;
    color:#fff;
    font-size:11px;
    text-shadow:0 1px 4px rgba(0,0,0,.60);
}

.prop-ubicacion .ciudad{
    font-weight:700;
}

.prop-ubicacion .barrio{
    opacity:.90;
}

/*=============================
=      PRECIOS OFERTA
=============================*/

.precio-anterior{

    color:#9a9a9a;

    font-size:14px;

    text-decoration:line-through;

    margin-bottom:3px;

}

.precio.oferta{

    color:#c30000;

}

/* FAVORITOS */

.card{
    position:relative;
}

.btn-favorito{
    position:absolute;
    top:12px;
    left:12px;
    z-index:9999;
    pointer-events:auto;

    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.95);
    color:#98001b;

    font-size:18px;
    cursor:pointer;

    box-shadow:0 2px 8px rgba(0,0,0,.18);
}

.btn-favorito i{
    margin:0;
}

.btn-favorito.activo{
    background:#98001b;
    color:#ffffff;
}