/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*Plantilla CSS del BLOG 2026 de Pitágoras Cloud*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*Panel de Navegación (Top y Bottom) */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.filterflex {
  width: auto;
  padding: 0 !important;
  display: inline-flex !important;
  margin-bottom: 7px;
  margin-right: -5px;
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*Area de Tarjeta */
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.flex_blog_card {    
    display: flex;  
    display: -webkit-flex; /* Safari */     
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap; /* Safari */    
    -moz-flex-flow: row wrap; 
    -o-flex-flow: row wrap; /* Safari */
    margin: 0px auto 30px !important;
    padding: 0px;       
    background:var(--superlightgray);
    width: 31%;
}

article.item {
	background-color: var(--superlightgray);
	padding: 12px;
}


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*Area de Imagen*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.roundedimage {
	border-radius: 8px !important;
}
.roundedimage img {
	border-top-left-radius: 8px !important;
	border-top-right-radius: 8px !important;
	border-bottom-left-radius: 8px !important;
	border-bottom-right-radius: 8px !important;

}
/*Altura de la imagen en formato 16:9 tres columnas*/
.item_intro_image {	
	width: 100%; /* O el ancho responsive que tenga tu DIV */
  	aspect-ratio: 16 / 9; /* Esto fija la altura a 0.75W */
}

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*Area de Heading & Textos*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.item_intro_card {
	display: flex;  
    display: -webkit-flex; /* Safari */ 
    width: 100%;  
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap; /* Safari */    
    -moz-flex-flow: row wrap; 
    -o-flex-flow: row wrap; /* Safari */
 	margin: 0px;
	padding: 2%;		
	background-color: var(--superlightgray);
}

.item_flex_date {	
	font-family: "Proxima Nova";
	width: 150px;    	
	color: var(--chroma70);
	font-weight: 800;
	font-size: 0.9rem;
	padding: 0;
}
.item_flex_date i {
	margin-right:10px;
}

.item_flex_separator {	
    width: calc(100% - 150px);
    padding: 0;
    border-top: 2px solid var(--chroma70);
    position: relative;
  	top: 12px;  
}

.item_flex_category {	
	font-family: "Proxima Nova";
	text-transform: uppercase;
    width: 100%;
    margin: 0 !important;
    color: var(--chroma70);
    font-size: 1rem;
    font-weight: 300;
}

.item_flex_category i {
	margin-right:10px;
}

a.item_title_link {
	width: 100%;
	margin: 0 !important;
}

h2.item_title  {
	font-family: "Baloo 2", sans-serif;
	font-size: 1.4rem !important;
	font-weight: 700;		
	line-height: 1.2;
	color: var(--chroma50);
	letter-spacing: -0.02em;	
	margin: 10px 0 10px !important;

}

h4.item_author  {
	font-family: "Manrope", sans-serif;
	width: 100%;	
	font-size: 1.1rem !important;
	font-weight: 300;
	margin: 0px 0 10px !important;
	line-height: 1.1;
	color: var(--chroma50);
	letter-spacing: 0.01em;			
}


.item_introtext {
	font-family: "NeueHaasDisplay-Light";
	width: 100%;
	margin: 0px 0;
	font-size: 1.02rem;
	color: var(--chroma50);
	font-weight: 300;
	letter-spacing: 0.03em;		
	line-height: 1.3;
}




/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/
/*>>BLOQUE RESPONSIVE **/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/

/*Tarjeta al 32%*/
@media (min-width:992px) and (max-width:1024px) {	
	h2.item_title {font-size: 1.3rem !important; }
}

/*Tarjeta al 48%*/
@media (min-width:800px) and (max-width:991px) {
	.flex_blog_card { width: 46%;}
	/*Elementos en su tamaño nativo*/	
}

/*Tarjeta al 48%*/
@media (min-width:640px) and (max-width:799px) {
	
	.flex_blog_card { width:48% }	
	.item_flex_date, .item_flex_category {font-size: 0.9rem;}
	h2.item_title {font-size: 1.3rem !important;}
	.item_introtext	{font-size: 1rem;}	
	
}

@media (min-width:400px) and (max-width:639px) {
	.flex_blog_card { width: 96%;}
	/*Elementos en su tamaño nativo*/	
	
}

@media (max-width:399px) {
	.flex_blog_card { width: 98%;}
	.item_flex_date, .item_flex_category {font-size: 0.9rem;}
	h2.item_title {font-size: 1.2rem !important;}
	.item_introtext	{font-size: 0.96rem;}	
	
}