/* ========================================
   TARJETAS - BASE UNIVERSAL
======================================== */


/* ========================================
   CONTENEDOR
======================================== */

.cards-container {

    width:100%;
    display:grid;

}


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

.card {

    position:relative;

    width:100%;

    min-width:0;

    overflow:hidden;

    background:#F4F4F2;

    border-radius:0;

}


/* ========================================
   TARJETA INTERACTIVA
======================================== */

.card-clickable {

    cursor:pointer;

}


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

.card-image {

    position:relative;

    width:100%;

    overflow:hidden;

}


.card-image img {

    display:block;

    width:100%;

    height:auto;

}


/* ========================================
   CONTENIDO
======================================== */

.card-content {

    position:relative;

    width:100%;

}


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

.card-icon {

    display:flex;

    align-items:center;

    justify-content:flex-start;

}


.card-icon svg {

    display:block;

    width:28px;

    height:28px;

}


/* ========================================
   CABECERA
======================================== */

.card-header {

    width:100%;

}


/* ========================================
   TAG
======================================== */

.card-tag {

    display:inline-block;

}


/* ========================================
   NÚMERO
======================================== */

.card-number {

    display:inline-block;

}


/* ========================================
   TÍTULO
======================================== */

.card-title {

    margin:0;

}


/* ========================================
   SUBTÍTULO
======================================== */

.card-subtitle {

    margin:0;

}


/* ========================================
   DESCRIPCIÓN
======================================== */

.card-description {

    margin:0;

}


/* ========================================
   META
======================================== */

.card-meta {

    width:100%;

}


.card-meta-item {

    display:flex;

}


/* ========================================
   LISTA
======================================== */

.card-items {

    margin:0;

    padding:0;

    list-style:none;

}


.card-items li {

    display:flex;

}


/* ========================================
   ACCIÓN
======================================== */

.card-action {

    cursor:pointer;

}


/* ========================================
   BENEFICIOS
======================================== */

.beneficios {

    width:min(
        1290px,
        90%
    );

    margin:0 auto;

}


/* ========================================
   CONTENEDOR BENEFICIOS
======================================== */

.beneficios-container {

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

    gap:20px;

}


/* ========================================
   TARJETA BENEFICIO
======================================== */

.card-beneficio {

    min-height:280px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


/* ========================================
   CONTENIDO BENEFICIO
======================================== */

.card-beneficio
.card-content {

    height:250px;

    box-sizing:border-box;

    padding:
        42px
        42px
        36px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


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

.card-beneficio
.card-icon {

    margin-bottom:12px;

    color:#333333;

}


.card-beneficio
.card-icon svg {

    width:27px;

    height:27px;

}


/* ========================================
   TÍTULO BENEFICIO
======================================== */

.card-beneficio
.card-title {

    margin:0 0 12px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:30px;

    font-weight:400;

    line-height:1.15;

    color:#161616;

}


/* ========================================
   DESCRIPCIÓN BENEFICIO
======================================== */

.card-beneficio
.card-description {

    max-width:330px;

    font-family:
        "Roboto",
        sans-serif;

    font-size:15px;

    font-weight:400;

    line-height:1.75;

    color:#607086;

}

/* ========================================
   HOVER DE TARJETAS
======================================== */

.card{
    position:relative;

    transition:
        transform .3s ease,
        color .3s ease;

    overflow:hidden;
}


/* ========================================
   LÍNEA LATERAL
======================================== */

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:4px;

    height:100%;

    background:#ff0000;

    transform:
        scaleY(0);

    transform-origin:
        top;

    transition:
        transform .3s ease;

}


/* ========================================
   HOVER TARJETA
======================================== */

.card:hover{

    transform:
        scale(1.02);

}


/* ========================================
   ACTIVAR LÍNEA
======================================== */

.card:hover::before{

    transform:
        scaleY(1);

}


/* ========================================
   TODO EL CONTENIDO ROJO
======================================== */

.card:hover .card-title,
.card:hover .card-subtitle,
.card:hover .card-description,
.card:hover .card-tag,
.card:hover .card-number,
.card:hover .card-meta,
.card:hover .card-meta-item,
.card:hover .card-action,
.card:hover .card-icon,
.card:hover .card-items,
.card:hover .card-items li{

    color:#ff0000;

}


/* ========================================
   TRANSICIONES DE CONTENIDO
======================================== */

.card-title,
.card-subtitle,
.card-description,
.card-tag,
.card-number,
.card-meta,
.card-meta-item,
.card-action,
.card-icon,
.card-items,
.card-items li{

    transition:
        color .3s ease;

}