@charset "utf-8";

.h1_Blog{
	font-family: OpenSans-Regular;
	font-size: 38px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #424242;
	text-decoration: none;
	padding: 0px;
	margin-bottom: 7px;
}

.h2_Blog{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #424242;
	text-decoration: none;
	padding: 0px;
	margin-bottom: 40px;
}

.h3_Blog{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 3%;
	box-sizing:border-box;
	display:block;
}

.h4_Blog{
	font-family: OpenSans-Regular;
	font-size: 20px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #424242;
	text-decoration: none;
	padding: 0px;
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
}

.h5_Blog{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #2196F3;
	text-decoration: none;
	cursor: pointer;
	padding: 0px;
	margin-top: 0%;
	margin-right: 5%;
	margin-bottom: 0%;
	margin-left: 0%;
}

.h5_Blog:link, .h5_Blog:visited, .h5_Blog:hover, .h5_Blog:active{
	color: #2196F3;
	
}

.blogCircularImage {
    width: 150px; /* Tamaño deseado de la imagen */
    height: 150px; /* Igual al ancho para mantener la forma circular */
    border-radius: 50%; /* Hace que los bordes sean redondeados */
    object-fit: cover; /* Ajusta la imagen para que llene el contenedor */
    border: 2px solid #ddd; /* (Opcional) Agrega un borde */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* (Opcional) Agrega sombra */
}

/*LINKS*/
.blogSpanTitulos {
	font-family: RobotoCondensed-Regular;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #2196F3;
	text-decoration: none;
	padding: 0px;
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 10%; /* Eliminar el margen izquierdo para evitar desplazamiento */
	cursor: pointer;
	box-sizing: border-box;
	display: block;
}

/* Estilo para los títulos de las entradas */
.blogSpanEntradas {
	font-family: OpenSans-Regular;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #333; /* Azul para los títulos */
	text-decoration: none; /* Espaciado superior e inferior */
	transition: color 0.3s ease;
	border: thin none #000;
	cursor: pointer;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 15%;
	box-sizing: border-box;
	display: block;
}

/*ENTADAS EN LA PARTE CENTRAL*/
.blogContentPublicaciones {
	background-color: #FFF;
	margin: 0px;
	padding: 0px;
	height: auto;
	width: 100%;
	border: thin solid #FFF;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Agregar sombra */
	border-radius: 0px; /* Ajusta el valor para mayor o menor redondeo */
}

.blogContentPublicaciones .titulo{
	font-family: OpenSans-Regular;
	font-size: 26px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #424242;
	text-decoration: none;
	box-sizing: border-box;
	display: block;
	padding: 12px;
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
}

.blogContentPublicaciones .fecha{
	font-family: OpenSans-Regular;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666;
	text-decoration: none;
	box-sizing: border-box;
	display: block;
	padding: 12px;
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
}

.blogContentPublicaciones .imagenOrPdf{
	height: auto;
	width: 100%;
	padding: 12px;
	box-sizing: border-box;
	display: block;
	box-sizing: border-box;
	margin-top: 1%;
	margin-right: 0px;
	margin-bottom: 1%;
	margin-left: 0px;
}

.blogContentPublicaciones .descrip{
	font-family: OpenSans-Regular;
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
	padding: 12px;
	margin-top: 1%;
	margin-right: 0px;
	margin-bottom: 1%;
	margin-left: 0px;
	box-sizing:border-box;
	display:block;
}

.blogContentPublicaciones .url{
	font-family: OpenSans-Regular;
	font-size: 18px;
	font-style: italic;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
	padding: 12px;
	margin-top: 1%;
	margin-right: 0px;
	margin-bottom: 1%;
	margin-left: 0px;
	box-sizing: border-box;
	display: block;
}

.blogContentPublicaciones .url a:link,
.blogContentPublicaciones .url a:visited,
.blogContentPublicaciones .url a:hover,
.blogContentPublicaciones .url a:active {
	font-family: OpenSans-Regular;
	font-size: 18px;
	font-style: italic;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
	padding: 0px;
	margin-top: 0%;
	margin-right: 0px;
	margin-bottom: 0%;
	margin-left: 0px;
	box-sizing: border-box;
	display:inline-block;
	text-decoration: underline; 
}

.blogContentPublicaciones .metatags {
    margin-left: 20px; /* Aquí sí se mueve todo el grupo */
}

.blogContentPublicaciones .metatags .tag {
    display: inline-block;
    background-color: #FB8C00; /* Verde estilo "success" */
    color: #fff;               /* Texto blanco */
    padding: 4px 10px;
    margin-top: 2%;
	margin-right: 0px;
	margin-bottom: 4%;
	margin-left: 0px;
    border-radius: 5px;       /* Chip redondeado */
    font-size: 14px;
    font-family: OpenSans-Regular;
    font-style: italic;
    line-height: normal;
    white-space: nowrap;       /* Para que no se rompa la palabra */
	box-sizing:border-box;
}

.contenedor {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}

.columna1 {
  width: 30%;
  position: sticky;
  top: 0;
  height: 100vh;         /* La columna mide toda la altura visible */
  overflow-y: auto;      /* ¡Aquí está la magia! Scroll vertical */
  padding: 10px;
  box-sizing: border-box;
}

.columna2 {
  width: 70%;
  background-color: #D2D6DE;
  overflow-y: scroll;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Media Query para pantallas menores a 800px */
@media screen and (max-width: 800px) {
  .contenedor {
    flex-direction: column; /* columnas apiladas verticalmente */
    height: auto; /* que la altura se ajuste al contenido */
  }
  
  .columna1,
  .columna2 {
    width: 100%; /* ocupan todo el ancho */
    height: auto; /* altura según contenido */
    position: relative; /* desactiva sticky */
    overflow: visible; /* desactiva scroll interno */
  }

  .columna2 {
    overflow-y: visible; /* que el scroll desaparezca y se muestre todo el contenido */
  }
}