/* =====================================================
   OBJETIVOS ESTRATÉGICOS
   ===================================================== */


.objetivos-card{

    background:#ffffff;

    border-radius:18px;

    padding:2.5rem;

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

    border:1px solid #eeeeee;

}



/* =====================================================
   INTRODUCCIÓN
   ===================================================== */


.objetivos-header{

    padding-bottom:2rem;

    margin-bottom:2rem;

    border-bottom:1px solid #eeeeee;

}


.objetivos-header p{

    margin:0;

    color:#666;

    font-size:1.05rem;

    line-height:1.8;

    max-width:900px;

}



/* =====================================================
   LISTADO DE OBJETIVOS
   ===================================================== */


.objetivos-lista{

    position:relative;

}


/* Línea vertical de continuidad */

.objetivos-lista::before{

    content:"";

    position:absolute;

    left:32px;

    top:32px;

    bottom:32px;

    width:1px;

    background:#e5e5e5;

}



/* =====================================================
   ITEM
   ===================================================== */


.objetivo-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:2rem;

    padding:0 0 2rem;

}


.objetivo-item:last-child{

    padding-bottom:0;

}



/* =====================================================
   NUMERACIÓN
   ===================================================== */


.objetivo-indicador{

    position:relative;

    z-index:2;

    flex:0 0 65px;

    display:flex;

    align-items:center;

    justify-content:center;

}



.objetivo-indicador span{


    display:flex;

    align-items:center;

    justify-content:center;


    width:65px;

    height:65px;


    border-radius:50%;


    background:#ffffff;


    border:2px solid #c62828;


    color:#c62828;


    font-size:1.25rem;


    font-weight:600;


    line-height:1;


    transition:.3s ease;

}



.objetivo-item:hover .objetivo-indicador span{

    background:#c62828;

    color:#ffffff;

}



/* =====================================================
   CONTENIDO DEL OBJETIVO
   ===================================================== */


.objetivo-contenido{


    flex:1;


    background:#fafafa;


    border-radius:12px;


    padding:1.5rem 1.8rem;


    border:1px solid #eeeeee;


    transition:.3s ease;

}



.objetivo-item:hover .objetivo-contenido{


    transform:translateX(5px);


    box-shadow:

            0 8px 20px rgba(0,0,0,.05);

}




.objetivo-contenido h3{


    margin:0 0 .6rem;


    color:#333;


    font-size:1.15rem;


    font-weight:600;


    line-height:1.4;

}




.objetivo-contenido p{


    margin:0;


    color:#666;


    line-height:1.75;


    text-align:justify;

}



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


@media(max-width:768px){


    .objetivos-card{


        padding:1.5rem;

    }



    .objetivos-lista::before{


        left:22px;


    }



    .objetivo-item{


        gap:1rem;

    }



    .objetivo-indicador{


        flex:0 0 45px;

    }



    .objetivo-indicador span{


        width:45px;


        height:45px;


        font-size:1rem;


    }



    .objetivo-contenido{


        padding:1rem;

    }



    .objetivo-contenido h3{


        font-size:1rem;

    }



    .objetivo-contenido p{


        font-size:.95rem;

    }


}