/*Para el grid de 4 columnas*/
.bgsc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
}
.bgsc-tags {
	text-align:center;
	margin-top:50px;
	margin-bottom:30px;
	font-size:1.3rem;
	
}
.bgsc-tags a {
	color:#49766A;
}
.bgsc-grid-item {
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
}

.bgsc-grid-item:hover {
    transform: scale(1.05);
}

.bgsc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 20px;
}

.bgsc-title {
    font-size: 1.5rem;
    margin: 0;
}

.bgsc-excerpt {
    font-size: 1rem;
    margin-top: 10px;
    line-height: 1.5; /* Altura de línea */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Número máximo de líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Puntos suspensivos (...) */
}


.bgsc-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.bgsc-post-header {
    position: relative;
    height: 60vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.bgsc-post-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* Filtro oscuro */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.bgsc-post-title {
    font-size: 2vw;
    margin: 0;
    z-index: 1;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.bgsc-single-content {
    margin: 20px 100px; /* Márgenes alrededor del contenido */
    text-align: left; /* Justificación del texto */
    font-size: 1.1rem; /* Tamaño de fuente */
    line-height: 1.8; /* Altura de línea para mejor legibilidad */
}

/*Desabilitar mierdas*/
.nav-next {display:none;}
.nav-previous {display:none;}
.entry-footer {display:none;} 
.entry-meta {display:none;}
.post-thumbnail {display:none;}

/**/

/*Botón de cargar mas*/
.bgsc-load-more {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #49766A;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
	text-transform:uppercase;
}

.bgsc-load-more:hover {
    background-color: #005177;
}

.bgsc-load-more:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}


/**/

/*Estilos de la flecha*/
/* Estilo inicial de la flecha */
.bgsc-arrow {
    width: 20px;
    height: 3px;
    background-color: white;
    margin: 10px auto 0;
    transition: all 0.3s ease;
    position: relative;
}

.bgsc-arrow:after {
    content: '';
    position: absolute;
    top: -4px;
    right: -8px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid white;
    transition: transform 0.3s ease;
}

/* Efecto de hover */
.bgsc-grid-item:hover .bgsc-arrow {
    width: 40px; /* La flecha se hace más grande */
}

.bgsc-grid-item:hover .bgsc-arrow:after {
    transform: translateX(10px); /* La punta de flecha se mueve a la derecha */
}

/**/

/*Estilos de la categoria encima del title en las entradas individuales*/
/* Estilos para el nombre de la categoría */
.bgsc-category-name {
    text-align: center; /* Centra el texto */
    font-size: 1.2rem;  /* Tamaño de la fuente */
    color: white;       /* Color blanco para que contraste con el fondo */
    margin-bottom: 10px; /* Espacio entre la categoría y el título */
    font-weight: bold;   /* Hacer la categoría en negrita */
    text-transform: uppercase; /* Mayúsculas para mayor énfasis */
}

/**/
/*Botón de la entrada individual para volver al blog*/
.bgsc-back-to-blog {
    position: absolute;
    top: 3vw;
    left: 20px;
    z-index: 100;
}

.bgsc-back-button {
    display: inline-block;
    background-color: #49766A;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
	text-transform:uppercase;
}

.bgsc-back-button:hover {
    background-color: #49766A;
}

/**/
/* Contenedor de los botones de compartir */
.bgsc-share-buttons {
    text-align: center;
    margin-top: 30px;
}

.bgsc-share-buttons p {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 10px;
}

/* Estilos para los botones */
.bgsc-share-button {
    display: inline-block;
    margin: 0 10px;
    padding: 10px;
    font-size: 20px;
    color: white;
    width:50px;
    text-align: center;
    transition: transform 0.3s ease;
	
}

.bgsc-share-button:hover {
    transform: scale(1.2); /* Aumenta el tamaño cuando se pasa el ratón */
}

/* Colores de los botones */
.bgsc-facebook {
    background-color: #3b5998; /* Color de Facebook */
}

.bgsc-twitter {
    background-color: #1da1f2; /* Color de Twitter */
}

.bgsc-pinterest {
    background-color: #e60023; /* Color de Pinterest */
}
/*Sidebar*/
.single-post-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
}

.single-post-content {
    flex: 1;
    max-width: 80%; /* Ajusta el tamaño según tus necesidades */
}

.single-post-sidebar {
    flex: 0 0 300px; /* Sidebar con ancho fijo */
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
	margin:0;
	height:100%;
}
.wp-block-latest-posts__featured-image img {margin:0;width:100%;}
.single-post-sidebar .widget {
    margin-bottom: 20px;
}

.single-post-sidebar .widget-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
	text-transform:uppercase;
}
.wp-block-latest-posts__post-title {color:#000;text-decoration:none;font-size:1.5rem;}
.wp-block-latest-posts__list {margin:0;}

.bgsc-share-buttons p {text-align:center;}

@media (min-width:800px) and (max-width:1300px){
	.bgsc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}
	
}

@media (max-width:800px){
	.bgsc-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    padding: 20px;
}
	.bgsc-single-content {
    margin: 20px 40px; /* Márgenes alrededor del contenido */
    text-align: justify; /* Justificación del texto */
    font-size: 1.1rem; /* Tamaño de fuente */
    line-height: 1.8; /* Altura de línea para mejor legibilidad */
}
	.bgsc-post-title {
    font-size: 1.5rem;
    margin: 0;
    z-index: 1;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
	.single-post-content {
    flex: 1;
    max-width: 100%; /* Ajusta el tamaño según tus necesidades */
}
	.single-post-sidebar {width:100%;flex:100%;}
	.bgsc-back-to-blog {top:20px;}
}
@media (min-width:800px){
	.bgsc-back-to-blog {
		display:none;
	}
}