#mensaje_inicio{
    margin-bottom: 20px;
}

#construccion{
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 0 0 3px 0;
    height: 270px;
}

#fotoBio{
    filter:brightness(130%) grayscale(60%);
    width: 100px;
}

img.fotoMediana{
    width: 100%;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.marco img  {    
    float: left;
    margin-right: 10px;
}

.marco{
    border:0.2em solid #8c8c8c;
    padding: 10px;
    background-color: #FFF;
    box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    text-align: left;
}

.personal{
    font-style: oblique;
    font-size: 0.9em;
}

h2 a{
    color: #212529;
    text-decoration: none;
}

h2 a:hover{
    color: #4f4f4f;
    text-decoration: none;
}

#lista-articulos .marco {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px; /* Espacio entre cada artículo */
}
#lista-articulos .marco a{
    color: black;
    text-decoration: none;
}
#lista-articulos .marco a:hover{
    color: #4f4f4f;
    text-decoration: none;
}

.form-busqueda, .centrar_texto {
    width: 100%;
    /*max-width: 700px;  Ajusta este valor según el ancho deseado para el formulario */
    margin-bottom: 20px; /* Espacio entre el formulario y el listado de artículos */
    display: flex;
    justify-content: space-between; /* Centra el contenido del formulario */
}
.centrar_texto{
    text-align: center;
}

hr{
    border-top: 2px solid rgba(0,0,0,.4);
}

.historial{
    margin-top: 30px;
}
.historial p{
    font-size: 0.9em;
}

.boton-navegacion {
    padding: 5px 10px;
    margin: 0 5px;
    text-decoration: none;
    color: #000;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}

.boton-navegacion:hover {
    background-color: #e9e9e9;
}

a.primera, a.anterior, a.siguiente, a.ultima, a.lista{
    margin-left:10px;
    color: #1f1f1f;
    width: 30px;
    height: 30px;
    background-position: center;
    text-align: center;
    background-repeat: no-repeat; 
    margin-top: 4px;
    border: 1px solid #6c757d;
    border-radius: .25rem;
}
.navegacion-paginas a.primera { 
    background-image: url('../icons/nav_first.svg'); 
    float: inline-start;
}
.navegacion-paginas a.anterior { 
    background-image: url('../icons/nav_prev.svg'); 
    float: left;
}
.navegacion-paginas a.siguiente { 
    background-image: url('../icons/nav_next.svg'); 
    float: right;
}
.navegacion-paginas a.ultima { 
    background-image: url('../icons/nav_last.svg');
    float: inline-end; 
}

.subtitulo_articulo { 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.subtitulo_articulo a.lista { 
    background-image: url('../icons/list.svg'); 
    float: right;
    margin-bottom: 10px;
}

.info_resultados{
    font-size: 0.82em;
    margin-bottom: 5px;
    padding: 0px;
}

.form-control {
    padding: 5px 10px;
    border: 1px solid #ccc;
    width: 60%;
}

.btn-primary {
    padding: 5px 15px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.form-busqueda .form-row {
    width: 100%;
    display: flex;
    justify-content: center; /* Ajusta los elementos del formulario para que ocupen todo el ancho */
}

.form-busqueda .form-group {
    flex-grow: 1; /* Hace que los elementos del formulario ocupen el espacio disponible */
}

.titulo_articulo{
    font-weight: bold;
}

.info_p{
    display: flex;
    justify-content: space-between;
}
.fecha_articulo, .visitas{
    font-size: 0.7em;
    font-style: italic;
}
.visitas{
    float: right;
}

.rrss{
    margin-top: 15px;
}

.g-recaptcha{
    margin-bottom: 10px;
}

/* Estilos generales para las secciones con efecto parallax */
.parallax {
    min-height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center; /* Alinea verticalmente el contenido en el centro */
    justify-content: flex-start; /* Alineación horizontal inicial */
}
  
/* Estilos para el contenido de texto */
.text-content {
    /* max-width: 50%; Ancho máximo del texto para garantizar legibilidad */
    /* margin: 0 20px; Margen para separar el texto de los bordes */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo semi-transparente */
    color: white;
    /*box-shadow: 0 4px 8px rgba(0,0,0,0.1);  Sombra suave para resaltar el texto */
}
  
/* Alineación alternativa * /
.parallax:nth-child(even) .text-content {
    margin-left: auto; /* Alinea el texto a la derecha en secciones pares * /
    background-color: rgba(0, 0, 0, 0.65); /* Mantiene el fondo semi-transparente * /
}
*/

div#bienvenida section{
    background-image: url('/_include/images/fondo_1.png');
}

div#quiensoy section{
    background-image: url('/_include/images/fondo_2.png');
}

div#miobra section{
    background-image: url('/_include/images/fondo_3.png');
}

div#contacto section{
    background-image: url('/_include/images/fondo_4.png');
}

section p{
    font-size: 0.85em;
}



/* Media query para tabletas y escritorios */
@media (min-width: 768px) {
    div#bienvenida section, div#quiensoy section, div#miobra section, div#contacto section{
        background-size: auto;
        background-position: center 80px;
    }

    div#bienvenida section{
        background-image: url('/_include/images/fondo_1.png');
    }

    div#quiensoy section{
        background-image: url('/_include/images/fondo_2.png');
    }

    div#miobra section{
        background-image: url('/_include/images/fondo_3.png');
    }

    div#contacto section{
        background-image: url('/_include/images/fondo_4.png');
    }

    section p{
        font-size: 0.95em;
    }

    /* Alineación alternativa */
    #quiensoy .seccion .parallax .text-content,
    #contacto .seccion .parallax .text-content{
        background-color: rgba(0, 0, 0, 0.75); /* Mantiene el fondo semi-transparente */
    }

    #bienvenida .seccion .parallax .text-content,
    #miobra .seccion .parallax .text-content {
        margin-left: auto; /* Alinea el texto a la derecha en secciones pares */
        background-color: rgba(0, 0, 0, 0.75); /* Mantiene el fondo semi-transparente */
    }

    /* Estilos generales para las secciones con efecto parallax */
    .parallax {
        min-height: 100vh;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center; /* Alinea verticalmente el contenido en el centro */
        justify-content: flex-start; /* Alineación horizontal inicial */
    }
    
    /* Estilos para el contenido de texto */
    .text-content {
        max-width: 50%; /* Ancho máximo del texto para garantizar legibilidad */
        /*margin: 0 20px;  Margen para separar el texto de los bordes */
        padding: 40px 40px 20px 40px;
        background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
        color: white;
        /*box-shadow: 0 4px 8px rgba(0,0,0,0.1);  Sombra suave para resaltar el texto */
    }
    
    /* Alineación alternativa */
    .parallax:nth-child(even) .text-content {
        margin-left: auto; /* Alinea el texto a la derecha en secciones pares */
        background-color: rgba(0, 0, 0, 0.5); /* Mantiene el fondo semi-transparente */
    }

    #construccion{
        background-size: cover;
        background-position: center;
        text-align: center;
        padding: 0 0 3px 0;
        height: auto;
    }

    #fotoBio{
        filter:brightness(130%) grayscale(60%);
        width: 150px;
    }

    .personal{
        text-align: justify;
    }
    
    img.fotoMediana{
        width: 300px;
        float: left;
        margin-right: 10px;
    }

}



.yesMobile{
    display: none;
}

.boton-navegacion {
    padding: 5px 10px;
    margin: 0 5px;
    text-decoration: none;
    color: #000;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}

.boton-navegacion:hover {
    background-color: #e9e9e9;
}

.form-control, .btn-primary {
    padding: 5px 10px;
    margin: 5px 0; /* Ajusta para separar los elementos cuando estén en columna */
    width: 80%; /* Ajusta al gusto para controlar el ancho en dispositivos móviles */
}

.btn-primary {
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.buscador_cuerpo{
    width: 80%;
    text-align: center;
}
.navegacion-paginas{
    width: 20%;
}


.siguiente{
    display: flex;
    width: auto;
}

.margen{
    height: 50px;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Asegura que los elementos estén centrados verticalmente */
}

.titulo_ficha {
    flex-grow: 1; /* Hace que el título ocupe el espacio restante */
    text-align: center; /* Centra el texto del título */
    padding: 0 10px; /* Asegúrate de que el título no toque los botones de navegación */
}

/* Estilos para hacerlo responsive */
@media (max-width: 600px) {
    .container {
        flex-direction: column; /* Cambia la disposición a vertical en pantallas pequeñas */
    }
    .titulo_ficha {
        padding: 10px 0; /* Ajusta el padding para la disposición vertical */
    }
}

/* Media query para dispositivos con ancho menor a 768px */
@media (max-width: 768px) {
    .form-busqueda {
        flex-direction: column;
    }

    .nav_mobile{
        display: flex;
        width: 100%;
        margin-top: 10px;
    }
    .espacio{
        width: 60%;
    }

    .anterior{
        width: 45%;
    }
    .siguiente{
        float: right;
    }
    
    .busqueda {
        width: 100%;
        text-align: center;
    }
    
    .boton-navegacion, .form-control, .btn-primary {
        width: auto; /* Ajusta a 'auto' para que el contenido dicte el ancho */
        margin: 5px; /* Añade margen para separación */
    }
}