/* =====================================================
   ICONOS TARJETAS
===================================================== */

.fa-icon{
    display:block;
    font-size:3.5rem;
    line-height:1;
    color:#3e7705;
    transition:all .35s ease;
    text-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* =====================================================
   DISEÑO TARJETAS TEMAS DE INTERÉS
===================================================== */

.card-temint{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#ffffff;
    color:#000;
    padding:1.5rem;
    border-radius:1rem;
    cursor:pointer;
    overflow:hidden;
    transition:all .35s ease;
    min-height:100%;
}

.card-temint::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(-45deg,#e2fdd0 0%,#e8e8e8 100%);
    transform:scale(.96);
    filter:blur(12px);
    transition:all .35s ease;
}

/* =====================================================
   CONTENEDOR DEL ICONO
===================================================== */

.card-icon{

    width:100%;
    height:90px;

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

    flex-shrink:0;

}

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

.card-content{

    width:100%;

    display:flex;
    flex-direction:column;

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

    flex:1;

}

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

.head-temint{

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

    width:100%;

    min-height:64px;

    margin:0 0 .75rem 0;

    font-size:1.2rem;
    font-weight:700;
    line-height:1.3;

    color:#3e7705;

}

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

.card-content p:not(.head-temint){

    width:100%;

    margin:0;

    font-size:.95rem;
    line-height:1.55;

    color:#333;

}

/* =====================================================
   NORMA
===================================================== */

.card-content small{

    display:block;

    width:100%;

    margin-top:auto;
    padding-top:.75rem;

    font-size:.82rem;
    line-height:1.45;

    color:#666;

}

/* =====================================================
   EFECTO HOVER
===================================================== */

.card-temint:hover,
.card-temint:focus-within{

    transform:translateY(-8px);

    background:#fff;

    box-shadow:
        0 12px 30px rgba(0,128,0,.18);

}

.card-temint:hover .fa-icon,
.card-temint:focus-within .fa-icon{

    color:#0a8044;

    transform:
        translateY(-4px)
        scale(1.08);

    text-shadow:
        0 8px 16px rgba(0,128,0,.30);

}

.card-temint:hover .head-temint,
.card-temint:focus-within .head-temint{

    color:#0a8044;

}

/* =====================================================
   ENLACE COMPLETO
===================================================== */

.card-temint .stretched-link{

    position:static;

}

.card-temint .stretched-link:focus-visible{

    outline:3px solid #0a8044;

    outline-offset:6px;

    border-radius:1rem;

}

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

@media (max-width:991.98px){

    .card-temint{

        padding:1.25rem;

    }

    .card-icon{

        height:80px;

    }

    .fa-icon{

        font-size:3rem;

    }

    .head-temint{

        min-height:58px;

        font-size:1.15rem;

    }

}

@media (max-width:575.98px){

    .card-temint{

        padding:1.15rem;

    }

    .card-icon{

        height:70px;

    }

    .fa-icon{

        font-size:2.7rem;

    }

    .head-temint{

        min-height:auto;

        font-size:1.05rem;

    }

}