/*====================================================
CARDS.CSS
LANDING V3 PREMIUM
====================================================*/

/* TARJETA BASE */

.card{

    background:var(--color-blanco);

    border-radius:var(--radio);

    box-shadow:var(--shadow-soft);

    overflow:hidden;

    transition:var(--transition);

}

/* EFECTO HOVER */

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-medium);

}

/* TARJETA CON PADDING */

.card-body{

    padding:30px;

}

/* TÍTULOS */

.card h3{

    color:var(--texto-principal);

    margin-bottom:15px;

    font-size:28px;

}

/* TEXTO */

.card p{

    color:var(--texto-secundario);

    line-height:1.8;

}

/* IMÁGENES */

.card img{

    width:100%;

    display:block;

}

/* BADGES */

.badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    font-size:15px;

    font-weight:700;

    color:white;

}

/* VARIANTES */

.badge-blue{

    background:var(--color-primario);

}

.badge-orange{

    background:var(--color-acento);

}

.badge-green{

    background:var(--color-verde);

}

/* GRID */

.grid{

    display:grid;

    gap:30px;

}

/* GRID DOS COLUMNAS */

.grid-2{

    grid-template-columns:repeat(2,1fr);

}

/* GRID TRES COLUMNAS */

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

/* GRID CUATRO COLUMNAS */

.grid-4{

    grid-template-columns:repeat(4,1fr);

}

/* RESPONSIVE */

@media(max-width:900px){

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

.card-body{

padding:25px;

}

}