* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estilos generales */

body {
    font-family: 'Lato', sans-serif;
    background-color: #ffffff;
    color: #0D0A6B;
    line-height: 1.6;
}


/* header */

header {
    
    height: 30%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background:  linear-gradient(to right, #1BE7B0, #0D0A6B);
    color: #ffffff;
    padding: 1px 20px;
    text-align: center;
}


.header__img {
   
    max-width: 24%; /* Ajuste del tamaño del logo */
    height: auto;
}

h1 {
    
    font-family: 'Karma', serif;
    font-size: 4.5vw; /* Ajuste del tamaño del encabezado */
    height: auto;
    color: #ffffff;
}


/* Nav */
.nav {
    background-color: #FFFFFF;
    padding: 10px 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.nav__ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
}

.nav__ul li {
    margin-right: 20px;
    color: #111111;
}


.nav__ul li a {
    color: #0D0A6B;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'karma', serif;
    font-weight: bold;
}


.nav__ul li a:hover {
    background-color: #1BE7B0;
}

/* Estilos para dispositivos móviles */
@media screen and (max-width: 768px) {
    .nav {
        flex-direction: column;
        align-items: left;
    }

    .nav__ul {
        flex-direction: column;
        text-align: left;
    }

    .nav__ul li {
        margin: 0;
        margin-bottom: 10px;
    }
}


h2 { 

    font-family: "Karma", serif;
    text-align: center;
    padding: 30px 20px;
    background-color: #1BE7B0;
    height: auto;
    font-size: 25px;

 }

 .formato__busqueda {
    text-align: center;
    margin-top: 20px; /* Espacio superior */
}

.formato__busqueda label {
    font-family: 'Karma', serif;
    font-weight: bold;
    color: #0D0A6B;
    margin-right: 10px;
}

.formato__busqueda input[type="text"] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    transition: border-color 0.3s ease;
    font-family: 'Lato', sans-serif;
}

.formato__busqueda input[type="text"]:focus {
    border-color: #1BE7B0;
    outline: none;
}

.formato__busqueda button {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #0D0A6B;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Karma', serif;
    font-weight: bold;
}

.formato__busqueda button:hover {
    background-color: #1BE7B0;
}

.sin__coincidencias {
    text-align: center;
    color: #FF0000; /* Color rojo para resaltar el mensaje de error */
    font-family: 'Lato', sans-serif;
    font-size: 1.1em;
    margin-top: 20px; /* Espacio superior */
}


.lista__publicaciones {
    margin-top: 20px; /* Espacio entre el título "Blog" y la lista de publicaciones */
}

.lista__publicaciones a {
    display: block; /* Hace que los enlaces ocupen toda la anchura del contenedor */
    color: #0D0A6B;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'Karma', serif;
    font-weight: bold;
    background-color: #FFFFFF; /* Color de fondo */
    margin-bottom: 10px; /* Espacio entre cada enlace */
    border: 1px solid #ddd; /* Borde alrededor de cada enlace */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra alrededor de cada enlace */
}

.lista__publicaciones a:hover {
    background-color: #F5F5F5; /* Cambio de color de fondo al pasar el cursor */
}

.lista__publicaciones a:last-child {
    margin-bottom: 0; /* Elimina el espacio inferior del último enlace */
}

.lista__contenedor__publicacion {
    padding: 10px; /* Agrega un espacio alrededor del contenido */
    border: 1px solid #ddd; /* Agrega un borde alrededor del contenido */
    border-radius: 5px; /* Redondea los bordes del contenedor */
    background-color: #f9f9f9; /* Color de fondo del contenedor */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Agrega una sombra al contenedor */
    margin-bottom: 20px; /* Espacio entre cada publicación */
}


.lista__publicacion {
    margin-bottom: 20px; /* Espacio entre cada publicación */
}

.lista__resumen {
    font-size: 0.9em; /* Tamaño del texto del resumen */
    color: #666666; /* Color del texto del resumen */
    font-family: 'Lato', sans-serif;
}


/* Estilos para la sección de Publicaciones */
#publicaciones {
    text-align: justify;
    padding: 20px;
}

.blog__contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 100%
}

.blog-post {
    width: calc(100% - 20px); /* Ajuste del ancho según tu diseño */
    margin-bottom: 10px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

.blog-post h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.blog-post p {
    line-height: 1.4;
    font-family: 'Lato', sans-serif;
    background-color: #ffffff;
    color: #111111;
}

.publicaciones__imagenes {

    display: block;
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    height: auto;
    margin-bottom: 15px; 
    margin-top:15px;
    border: 1px solid #808080;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

@media screen and (min-width: 768px) {
    .publicaciones__imagenes {
    max-width: 40%; /* Establece el límite de anchura en pantallas grandes */
    height: auto; /* Mantiene la proporción de aspecto */
    }
    }

/* Estilo para el título "Compartir" */
.blog-post h4 {
    font-family: 'Karma', serif; /* Ajuste de la fuente */
    font-weight: bold;
    margin-bottom: 10px; /* Espacio inferior entre el título y los botones */
    margin-top: 10px;
}


/* Estilos para los botones de compartir */
.share-button {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 15px;
    border-radius: 5px;
    background-color: #0D0A6B;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-family: 'karma', serif;
    font-weight: bold;
}

.share-button:hover {
    background-color: #1BE7B0;
}


.share-button i {
    font-size: 16px; /* Ajusta el tamaño del ícono según sea necesario */
    color: #FFFFFF;
}

h6 { 

    font-family: "Karma", serif;
    text-align: center;
    padding: 30px 20px;
    background-color: #1BE7B0;
    height: auto;
    font-size: 25px;

 }

.enlaces {
    
    padding: 10px;
    margin-left: 10px;
    font-family: 'karma', serif;
    color: #111111;

}

.link__publicaciones {
    margin-top: 20px; /* Espacio superior */
    text-align: justify;
    margin-bottom: 20px;
}

.link__publicaciones a {
    color: #0D0A6B;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'karma', serif;
    font-weight: bold;
}

.link__publicaciones a:hover {
    background-color: #1BE7B0; /* Cambio de color de fondo al pasar el cursor */
}


footer {
    text-align: center;
    color: #111111;
    margin-bottom: 180px;
    margin-top: 0px;
}