/*==================================================
    CARDS.CSS
    Grupo Vivexa
==================================================*/

/* VARIABLES */

:root{

    --azul:#0B1F3A;
    --azul-hover:#163A67;
    --dorado:#FFC107;
    --gris:#f8f9fa;
    --texto:#555;

}

/*==================================================
    TARJETA BASE
==================================================*/

.card-vivexa{

    background:#fff;

    border:none;

    border-radius:20px;

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    height:100%;

}

.card-vivexa:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

/*==================================================
    CUERPO
==================================================*/

.card-vivexa .card-body{

    padding:35px;

}

/*==================================================
    ICONO
==================================================*/

.card-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:45px;

    color:var(--dorado);

    border-radius:50%;

    background:#fff9e8;

}

/*==================================================
    TITULO
==================================================*/

.card-vivexa h3,
.card-vivexa h4{

    color:var(--azul);

    margin-bottom:18px;

    font-weight:700;

}

/*==================================================
    TEXTO
==================================================*/

.card-vivexa p{

    color:var(--texto);

    line-height:1.8;

    margin-bottom:20px;

}

/*==================================================
    TARJETA SERVICIOS
==================================================*/

.card-servicio{

    text-align:center;

}

/*==================================================
    TARJETA PROPIEDADES
==================================================*/

.card-propiedad{

    border-radius:18px;

    overflow:hidden;

}

.card-propiedad img{

    width:100%;

    height:230px;

    object-fit:cover;

    transition:.4s;

}

.card-propiedad:hover img{

    transform:scale(1.08);

}

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

.precio{

    font-size:28px;

    color:var(--dorado);

    font-weight:bold;

}

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

.ubicacion{

    color:#777;

    font-size:15px;

}

/*==================================================
    CARACTERÍSTICAS
==================================================*/

.caracteristicas{

    display:flex;

    justify-content:space-between;

    margin-top:15px;

    padding-top:15px;

    border-top:1px solid #eee;

}

.caracteristicas span{

    font-size:14px;

    color:#666;

}

/*==================================================
    TARJETA EQUIPO
==================================================*/

.card-equipo{

    text-align:center;

}

.card-equipo img{

    width:170px;

    height:170px;

    object-fit:cover;

    border-radius:50%;

    margin-bottom:20px;

}

/*==================================================
    TARJETA ADMIN
==================================================*/

.card-admin{

    border-left:5px solid var(--dorado);

}

/*==================================================
    EFECTOS
==================================================*/

.card-vivexa:hover .card-icon{

    transform:rotate(8deg) scale(1.05);

    transition:.3s;

}

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

@media(max-width:768px){

.card-vivexa{

    margin-bottom:25px;

}

.card-icon{

    width:70px;

    height:70px;

    font-size:35px;

}

}


.btn-property{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    width:100%;

    padding:12px 18px;

    border-radius:10px;

    background:#0B1F3A;
    color:#fff !important;

    text-decoration:none;

    font-size:.9rem;
    font-weight:700;

    transition:all .25s ease;
}

.btn-property:hover{
    background:#F68B1F;
    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(246,139,31,.22);
}