.seccion-portada {
   height: 40dvh;

   h1 {
      margin-top: 1em;
   }

   img,
   video {
      height: 100%;
   }
}


.seccion-posts {
   .contenedor-buscador {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: .5em;
      width: 100%;
      max-width: 700px;
      margin-inline: auto;

      .contenedor-botones {
         display: flex;
         gap: .5em;

         button,
         .boton-1 {
            display: block;
            width: max-content;
         }
      }
   }

   #contenedorTodoPosts {
      display: none;
      flex-direction: column;
      gap: 1em;

      &.on {
         display: flex;
      }

      .detalles-busqueda {
         display: flex;
         align-items: center;
         gap: 1em;
         width: 100%;
         overflow-x: auto;

         .contenedor-botones-paginas {
            display: flex;
            width: 100%;

            button,
            .boton-1 {
               display: flex;
               justify-content: center;
               align-items: center;
               width: 2.5em;
               height: 2.5em;
               border-radius: 0;
               background-color: var(--color-blanco);
               color: var(--color-negro);
               outline: 1px solid var(--color-negro-transparente-05);

               &:hover,
               &.on {
                  background-color: var(--color-primario);
                  color: var(--color-blanco);
               }

               &:disabled {
                  background-color: var(--color-negro-transparente-05);
                  color: var(--color-negro-menos-intenso-3);
               }
            }
         }

         .contenedor-parametros-busqueda {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1em;

            .contenedor-parametro {
               display: flex;
               flex-direction: column;
               gap: .5em;
               width: max-content;
            }
         }
      }

      .contenedor-general-posts {
         display: grid;
         grid-template-columns: 1fr;

         .contenedor-general-filtros {
            display: flex;
            flex-direction: column;
            gap: 2em;
            padding: 1em;
            border: 1px solid var(--color-negro);

            .contenedor-filtros-elegidos {
               display: flex;
               flex-direction: column;
               gap: 1em;
               border-bottom: 1px solid var(--color-negro);
               padding-bottom: 1em;

               h3 {
                  text-align: left;
                  font-weight: normal;
               }

               .filtros-elegidos {
                  display: flex;
                  flex-direction: column;
                  gap: .5em;

                  button,
                  .boton-1 {
                     width: fit-content;
                     color: var(--color-negro);
                  }
               }
            }

            .contenedor-filtros-disponibles {
               display: flex;
               flex-direction: column;
               gap: 2em;

               .contenedor-grupo-filtros {
                  display: flex;
                  flex-direction: column;
                  gap: 1em;
                  padding-bottom: 1em;
                  border-bottom: 1px solid var(--color-negro);

                  button {
                     display: block;
                     margin-left: auto;
                     width: fit-content;
                     color: var(--color-negro);
                  }

                  h3 {
                     text-align: left;
                     font-weight: normal;
                  }

                  .contenedor-filtros {
                     display: flex;
                     flex-direction: column;
                     gap: .5em;

                     .contenedor-filtro {
                        display: flex;
                        gap: .3em;
                     }
                  }
               }
            }
         }

         .contenedor-posts {
            display: grid;
            grid-template-columns: 1fr;
            border: 1px solid var(--color-negro);
            height: fit-content;

            .contenedor-post {
               display: grid;
               grid-template-columns: 1fr;
               gap: 1em;
               padding: 1em;
               border-bottom: 1px solid var(--color-negro);

               &:hover {
                  background-color: var(--color-negro-transparente-05);
               }

               img {
                  width: 100%;
                  object-fit: cover;
                  border-radius: var(--radio-borde-boton);
               }

               .contenedor-texto {
                  display: flex;
                  flex-direction: column;
                  gap: .5em;

                  .texto-encontrado {
                     background-color: var(--color-primario);
                  }

                  .enlace-titulo-post,
                  .enlace-descarga-pdf {
                     width: fit-content;
                     font-weight: bold;
                     text-decoration: underline;
                     text-align: left;

                     &:hover {
                        color: var(--color-primario);
                     }
                  }

                  .enlace-titulo-post {
                     font-size: 1.2rem;
                  }

                  .contenedor-detalles {
                     display: grid;
                     grid-template-columns: 1fr;
                     gap: .5em;
                     margin-top: 1em;

                     strong {
                        padding-bottom: 1em;
                     }
                  }
               }

               .contenedor-botones-extra {
                  display: flex;
                  flex-direction: column;
                  gap: .5em;
                  justify-content: flex-end;
                  align-items: flex-end;
               }
            }
         }
      }
   }


}

@media (min-width: 768px) {
   .seccion-posts {
      .contenedor-buscador {
         flex-direction: row;
      }

      #contenedorTodoPosts {
         .contenedor-general-posts {
            grid-template-columns: max-content 1fr;

            .contenedor-posts {
               border-left: none;

               .contenedor-post {
                  .contenedor-texto {
                     .contenedor-detalles {
                        grid-template-columns: max-content 1fr;
                        gap: 1em;
   
                        strong {
                           padding-left: 2em;
                        }
                     }
                  }
               }
            }
         }
      }
   }
}

@media (min-width: 1024px) {
   .seccion-posts {
      #contenedorTodoPosts {
         .contenedor-general-posts {
            .contenedor-posts {
               .contenedor-post {
                  grid-template-columns: 100px 1fr max-content;
               }
            }
         }
      }
   }

}