/* PARA IMPORTANTE*/



.importante {
    max-width: 600px; /* Ancho máximo del contenedor */
    padding: 20px;
    margin-top: 20px;

	/*border: 1px solid #ccc;*/
}

.imagen {
    width: 250px; /* Ancho de la imagen */
    display: block;
    margin-bottom: 10px;
}

.contenedorimp {
    padding: 0;
    height: 400px;
    border: 1px solid black;
    padding: 10px;
	max-width: 600px; /* Ancho máximo del contenedor */
    margin-top: -25px;
    max-height: 400px; /* Altura máxima del contenedor */
    overflow-y: auto; /* Agrega una barra de desplazamiento vertical si el contenido excede la altura máxima */
    /*Color de fondo de la tarjeta*/
    background: #77aca2;

}

#lista2 li {
    

    list-style: none; /* Eliminar viñetas */
	text-align: left; /* Alineación del texto a la izquierda */
}

#lista2 li a {
    text-decoration: none;
    color: #031926;
}

#lista2 {
    
    align-items: center;


    counter-reset: li; 
    list-style: decimal; 
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: auto; /* Espacio para la lista */
	margin-top: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(22, 20, 20, 0.5);
}
.contenedorimp ol {

    margin: 0 0 0 2em; 
	margin-top: 0; /* Eliminar el margen superior de la lista ordenada */
    padding-left: 2px; /* Agregar un espaciado a la izquierda de la lista ordenada */
	
}

.contenedorimp li {
	margin-bottom: 5px; /* Agregar un margen inferior a los elementos de la lista */
    list-style-type: none; /* Eliminar los marcadores de la lista */

    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    margin: .5em 0;
    
    color: #031926;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;   
}

#lista2 li:hover{
    background: #eee;
}

#lista2 li:hover:before{
    transform: rotate(360deg);  
}

#lista2 li:before{
    content: counter(li);
    counter-increment: li;
    position: absolute; 
    left: -1.3em;
    top: 10%;
    margin-top: -1.3em;
    background: #3b97bb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}


/* PARA TARJETAS*/
.contenedor-doc {
	display: flex;
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

.columnas {
	width: 50%;
    flex: 1;
    padding: 0 20px; /* Espacio interior para separar el título del borde */
	text-align: center;
    
}

.columna{
	flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espacio entre tarjetas */
}

.columna2{
	flex: 1;
    padding: 0px;
	text-align: left;
    
}


.tarjeta{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Ajusta el tamaño y el espacio según sea necesario */
    border: 1px solid #ccc;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	width: calc(33.33% - 10px); /* Para tres columnas en pantallas grandes */
    padding: 5px;
    /*box-sizing: border-box;*/
    /*Color de fondo de la tarjeta*/
    background: #77aca2;
	border-radius: 4px;
	cursor: pointer;
}

.tarjeta:hover{
	background-position: 3 100%;
}
.tarjeta:hover h2{
	color: #660606; /* color del texto al seleccionar tarjeta*/

}
.tarjeta:hover a{
	color: #660606; /* color del texto al seleccionar tarjeta*/

}
 
.tarjeta a{
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
	color: #031926;
	margin: 1em 0;
	text-align: center;
    
	
}
.tarjeta h2{
	font-size: 20px;
	font-weight: 600;
	color: #031926;
	margin: 1em 0;
	text-align: center;
}

/* Media query para pantallas aún más pequeñas */
@media screen and (max-width: 768px) {
    .contenedor-doc {
        flex-direction: column; /* Cambia a disposición de columna en pantallas pequeñas */
    }

    .tarjeta {
        width: calc(100% - 10px); /* Una columna en pantallas más pequeñas */
    }
	.columnas{
		width: 100%;
	}
}
@media screen and (max-width: 992px) {
    .tarjeta {
        width: calc(50% - 10px); /* Cambio a dos columnas en pantallas medianas */
    }
	
}