/* style.css */

/* Contenedor principal de la página */
.container-1100 {
    max-width: 1300px;
    margin: 140px auto 0 auto; /* Centra el contenedor */
    padding: 20px 0; /* Espaciado interno si es necesario */
}

/* Contenedor principal del contenido y la sidebar */
.main-content-wrapper {
    display: flex; /* Usa Flexbox para alinear el contenido principal y la sidebar */
    gap: 20px; /* Espacio entre el contenido y la sidebar */
}

/* Área de las entradas de blog */
.posts-grid-area {
    flex: 1;
    padding: 10px 20px;
}

.texto-resultados{
    padding-bottom:20px;
}

/* Cuadrícula de 3 columnas */
.posts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 columnas adaptables */
    gap: 20px; /* Espacio entre las entradas */
    
}

/* Estilo para cada elemento de la cuadrícula (entrada) */
.grid-item {
    padding: 15px;
    text-align: left;
    box-sizing: border-box; /* Asegura que el padding no aumente el ancho */
    display: flex; /* Para organizar el contenido interno verticalmente */
    flex-direction: column;
    justify-content: space-between; /* Espacia los elementos dentro de la caja */
    height: 100%; /* Asegura que todas las cajas tengan la misma altura si están en la misma fila */
    min-height: 350px;
    border:#F6F6F6 solid 1px;
    border-radius: 20px; 
}

.grid-item:hover {
    box-shadow: #F6F6F6 0px 0px 10px;
}

.post-link-wrapper:hover > .read-more-link {
    color:var(--color1);
}

.grid-item .post-link-wrapper {
    text-decoration: none;
    color: inherit; /* Hereda el color del texto */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    max-width: 100%;
}

/* Espacio para el header en páginas de entrada */
.es-una-entrada{
    margin-top: 120px;
}

/* Thumbnail con bordes redondeados */
.rounded-thumbnail {
    border-radius: 20px;
    max-width: 100%;
    height: auto;
    display: block; /* Elimina espacio extra debajo de la imagen */
    margin-bottom: 15px;
}

/* Título de la entrada */
.grid-item .entry-title {
    font-size:1.05rem;
    font-weight: 600;
    line-height: 130%;
    margin-top: 0px;
    margin-bottom: 3px;
    padding-left:3px;
}

/* Extracto de la entrada */
.grid-item .entry-excerpt p{
    font-size:0.8rem;
    text-align: left;
    padding-right: 30px;
    padding-left:3px;
    margin-block-end: 0.8rem;
}

/* Link "Conocer más" */
.read-more-link {
    font-family: var(--font2);
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.2em;
	text-align:justify;
    padding-left:3px;

    letter-spacing: 4%;
    line-height: 150%;
    margin-block-start: 0.3rem;
    margin-block-end: 1.7rem;
}

.sp .taxonomy-type-product{
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.05rem;
    color: white;
    margin: 6px 0;
    padding: 3px 8px;
    border-radius: 10px;
    background-color: var(--color2);

}

/* Área del sidebar */
.blog-controls{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 20px;
}

.widget-area {
    width: 288px; /* Ancho fijo para el sidebar */
    /* background-color: #f9f9f9;  Color de fondo para diferenciarlo */
    padding: 15px; /* Espaciado interno */
    box-sizing: border-box;
}

.widget-area p{ margin-block-end: 0.5rem;}

/* Estilos básicos para widgets dentro del sidebar */
.widget-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-area ul li {
    margin-bottom: 5px;
}

.widget-area ul li a {
    text-decoration: none;
    
    font-family: var(--font2);
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 0.8rem;
    color: var(--negro);

    letter-spacing: 6%;
    line-height: 150%;
}

.widget-area ul li a:hover {
    letter-spacing: 4%;
    font-weight: 600;
}
/* Paginación */
.navigation.pagination {
    margin-top: 30px;
    text-align: left;
}

.nav-links{
    padding: 20px 0;
}

.nav-links .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid var(--color3);
    text-decoration: none;
    color: #8B8B8B;
    border-radius:6px;
    background-color: var(--color3);
    font-weight: 600;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
    background-color: var(--color1);
    color: #fff;
    border-color: var(--color1);
}

.barra-busqueda div{
    border: var(--color1) solid 1px;
    padding:5px 10px;
    border-radius:7px;
}

.barra-busqueda input{
    font-family: var(--font2);
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 0.8rem;
    color:var(--color5);

    letter-spacing: 6%;
    line-height: 150%;
}

.barra-busqueda button{
    background-color: white;
    color:var(--color1);
    border:none;
}



/* Ajustes responsivos básicos (ejemplo) */
@media (max-width: 992px) {
    
    .main-content-wrapper {
        flex-flow: column-reverse;
    }
  
    .widget-area, .posts-grid-area{
        max-width: 100%; /* Ocupa todo el ancho disponible */
        width: 100%;
    }

    .posts-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta las columnas en pantallas más pequeñas */
    }
}


/* Ajustes responsivos básicos (ejemplo) */
@media (max-width: 992px) {
    
    .main-content-wrapper {
        flex-flow: column-reverse;
    }
  
    .widget-area, .posts-grid-area{
        max-width: 100%; /* Ocupa todo el ancho disponible */
        width: 100%;
    }

    .posts-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta las columnas en pantallas más pequeñas */
    }
}