/* Estilos generales */
/*Division de los elemntos de mi pàgina web*/

/*ELEMNTOS BASE: FUENTES, BODY, BOXSIZING*/
/*Body i contingut*/

* {                             /*Centramos contenido*/
    box-sizing: border-box;  /*Contenido a nuestra medida*/
}

body {
    color: black;
    line-height: 1.6;
    font-family: 'Lexend', sans-serif;
    background-image: url("../../Home/IMG/Fondo2.jpg");
}
/*Font*/
.lexend_font {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}



/*REDEFINICION DE ETIQUETAS HTMl*/

h1 {                             /*ESTILO H1*/
    margin-bottom: 10px;
    font-size: 3.2rem;
    
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),  
        0 0 10px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

p {                          /*ESTILO P*/
    
    font-size: 1.1rem;
}

h3 {                         /*ESTILO h3*/
    
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),  
        0 0 10px rgba(0, 0, 0, 0.5);
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}



/*ELEMENTOS DE REDEFINICION DE ETIQUETAS COMPARTIDAS*/

/* ESTOS 4 COMPARTEN LOS MISMOS ESTILOS */
h1,p,h3{
    color: white;
}
header, .content,.left-sidebar,.right-sidebar {
    background-color: rgb(45, 29, 13);  /*Mismo fondo */
    border-radius: 5px; /* Mismo radio */
    box-shadow: 10px 4px 15px rgba(255, 255, 255, 0.1); /* Misma sombra */
}


/*CONTAINER PRINCIAPL DE EL INDICE DE LA PAGINA WEB*/
.container {
    max-width: 1300px;                       /*Ancho de la pàgina web*/
    margin: 0 auto;                         /*Centrado general del contenido*/
    display: grid;                          /*Columnas para la estructura del Indice */
    grid-template-columns: 1fr 3fr 1fr;     /*· Columnas con diferentes midas*/
    gap: 22px;                               /*Espacio entre las brechas */
    
}


/*---------------------------------------------------------------*/

/*---------------------------------------------------------------*/
/* ENCABEZADO DE LA PÀGINA WEB */
header {
    grid-column: 1 / 4;     /*Mida equivalente a las columnas creadas*/
    padding: 10px 15px 10px 15px;     /*espacio entre el propio encabezado*/
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
    text-align: center;
}


/*---------------------------------------------------------------*/
/* BARRAS LATERALES*/


.left-sidebar{
    padding: 35px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /*Sombreado con efecto de profundidad*/
}

.right-sidebar{
    padding: 35px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /*Sombreado con efecto de profundidad*/
}
section + section {
    margin-top: 50px;
}

.widget + .widget {         /*Espacios entre los widget*/
    margin-bottom: 30px;
}


.profile img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 134px;
    height: 144px;
    border-radius: 50%;
    border: 3px solid #C4A484;
    padding-top: 0px;
}

/*ESTILOS DE LAS LISTAS*/
/*Widget de los sidebars*/
.widget ul {
    padding-left: 0; /* ← Elimina el padding por defecto */
    text-align: center; /* ← Centra el texto */

}
.widget li {
    border-radius: 8px;
    padding: 10px;
    transition: all 0.3s ease; 
    cursor: pointer;
    display: inline-block; 
    text-align: left; 
    width: 100%;
    margin-bottom: 0px;
}

li + li {
    margin-top: 10px;
}

.widget li:hover {
    background-color: #624a2e;
    transform: scale(1.02); 
    
}

.widget li.active {
    background-color: #624a2e; /* ← Fondo azul sólido */
    transform: scale(1.03); /* ← Un poco más de agrandamiento */
    box-shadow: 0 4px 12px rgba(37, 117, 252, 0.3); /* ← Sombra azul */
}


.widget li:hover a {
    color: white; /* ← Texto blanco en hover */
}

.widget a {
    color: #ffffff;;
    text-decoration: none;
}






/*ESTILOS DE LOS ARTICULOSs*/

/* Apuntes css */

/* 
PSEUDO-ELEMENTO ::before EXPLICADO:
Este crea una capa invisible que funciona como "fondo inteligente". 
En lugar de aplicar la imagen directamente al artículo, la colocamos 
en este pseudo-elemento para poder animarla independientemente.

¿POR QUÉ HACERLO ASÍ?
- Podemos usar transform: scale() para un zoom suave y profesional
- El contenido (texto) permanece siempre visible y nítido
- Evita el efecto "tosco" de animar background-size directamente
- z-index: -1 coloca la imagen DETRÁS del contenido, como un verdadero fondo

¡Elimina la necesidad de divs extras en el HTML y mantiene tu código limpio!*/

/*REDEFINICIONES DE ETIQUETAS--ARTICLE*/
article h2 {
    padding: 0 20px;
}

article p {
    padding: 0 20px;
}


/*REDEFINICIONES DE CLASSES ARTICLE*/

/*ARTICULO DESTACADO 1 - CSS*/
/*--------------------------------------------------------------------------------------------*/
.blog-post.featured-post{
    position: relative;                    /* Posicionamiento para elementos hijos absolutos */            
    color: white;                       /* Color del texto blanco para contraste */
    min-height: 360px;                    /* Altura mínima del contenedor */
    display: flex;                        /* Flexbox para organizar el contenido */
    flex-direction: column;               /* Organizar elementos en columna */
    justify-content: space-between;       /* Espacio entre elementos (header y título) */
    padding: 30px;                        /* Espaciado interno */
    overflow: hidden;                     /* Oculta cualquier contenido que se salga */
   
} 

/*--------------------------------------------------------------------------------------------*/
/*PSEUDO ELEMENTO */
/*--------------------------------------------------------------------------------------------*/
.blog-post.featured-post::before {
    content: "";                          /* Contenido vacío para el pseudo-elemento */
    position: absolute;                   /* Posicionamiento absoluto respecto al contenedor */
    top: 0;                               /* Posición desde arriba */
    left: 0;                              /* Posición desde la izquierda */
    width: 100%;                          /* Ancho completo del contenedor */
    height: 100%;                         /* Alto completo del contenedor */
    z-index: -1;                          /* Coloca detrás del contenido */
    transition: transform 1s ease-in-out; /* Transición suave de 1 segundo para transform */
    background-size: cover;  
    background-repeat: no-repeat;
}
/*--------------------------------------------------------------------------------------------*/
/*VELOCIDAD TRANSICIONES*/
.blog-post.featured-post:hover::before {
    transform: scale(1.05);               /* Agranda la imagen 5% al hacer hover */
}
/*--------------------------------------------------------------------------------------------*/
/*MODIFICACION DE LOS ARTICULOS DESCADOS*/
/*--------------------------------------------------------------------------------------------*/
/*IMAGEN DE ARTICULO DESTACADO 1*/
.blog-post.featured-post.fondo-articulo1::before {
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), 
                url("../../Home/IMG/FotoArticle1.jpg");       
    
    
}

/*IMAGEN DE ARTICULO DESTACADO 2*/
.blog-post.featured-post.fondo-articulo2::before {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url("../../Home/IMG/FotoArticle2.jpg");
                  
    background-position: center 12%;          /* Centra la imagen */

    
}

/*IMAGEN DE ARTICULO DESTACADO 3*/
.blog-post.featured-post.fondo-articulo3::before {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url("../../Home/IMG/FotoArticle3.jpg");
                  
    background-position: center 20%;
}
/*--------------------------------------------------------------------------------------------*/
/*Estructura imagenes articulos como links*/


/* Estilos para los enlaces de artículos */

.article-link {
    text-decoration: none;
    display: block;
    margin-bottom: 0px;
}

/* Mantener el cursor de pointer para indicar que es clickeable */
.article-link,
.article-link article {
    cursor: pointer;
    text-decoration: none;
}

/* Asegurar que los enlaces no tengan estilos por defecto */
.article-link:link,
.article-link:visited,
.article-link:hover,
.article-link:active {
    text-decoration: none;
    color: inherit;
}

/* Mantener las transiciones originales de las imágenes */
.blog-post.featured-post:hover::before {
    transform: scale(1.05);
}

a:-webkit-any-link{
    text-decoration: none;
}
/*--------------------------------------------------------------------------------------------*/

/*ESTRUCTURA DE DEL CONTENIDOR DE ARTICULOS*/
.content{
    padding: 0px; 
    margin: 0;
    background: transparent; 

}



/* CONTENEDORES PARA ETIQUETAS Y SUS CONTENIDOS */
.post-header {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 10px 10px 0 0; /* ← top right bottom left */
}

/* ESTILO DE LOS TITULOS DE LOS ARTICULOS*/

/*ESTILO 1 - IZQUIERDA*/
/*--------------------------------------------------------------------------------------------*/
.post-title {
    align-self: flex-start;
    margin-bottom: 0;
    margin-top: auto;
    margin-left: 0px;
}

.post-title h2 {
    color: #ffffff; /* Amarillo */
    font-size: 2.2rem;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.8),  /* Sombra negra para contraste */
        0 0 10px rgba(0, 0, 0, 0.5);
    margin: 20px 0 0 20px;
    font-weight: bold;
}
/*--------------------------------------------------------------------------------------------*/



/*ESTILO 2 - DERECHA*/
/*--------------------------------------------------------------------------------------------*/
.post-title.articulo2{
     align-self: flex-end;
}
/*--------------------------------------------------------------------------------------------*/





/*ESTILO 1 DE LEYENDA - IZQUIERDA*/
/*--------------------------------------------------------------------------------------------*/
.leyenda {
    position: absolute;
    bottom: 50px;
    left: 0;
    font-weight: small;
    color: white;
    text-shadow:   2px 2px 4px rgba(0, 0, 0, 0.16),  /* Sombra negra para contraste */
        0 0 10px rgba(0, 0, 0, 0.10);
    font-style: italic;
    margin-left: 20px;

}
/*--------------------------------------------------------------------------------------------*/



/*ESTILO 2 DE LEYENDA - DERECHA*/
/*--------------------------------------------------------------------------------------------*/
.leyenda.articulo2{
      /* RESET de posición izquierda */
    left: auto;
    margin-left: 0;
    
    /* NUEVA posición derecha */
    right: 0;
    margin-right: 20px;
    text-align: right;
}
/*--------------------------------------------------------------------------------------------*/



/* ESTILOS DE LAS ETIQUIETAS */
/*--------------------------------------------------------------------------------------------*/
.post-header.articulo2 {
    justify-content: flex-start !important;
    margin: 10px 10px 0 20px !important; /* ← Márgen izquierdo */
}
.post-tags {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.post-tags.articulo2{
      justify-content: flex-start !important;
      margin: 10px;
}


.post-tags .date,
.post-tags .category {
    background: rgba(255,255,255,0.9);
    color: #333;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 5px;
}
/*--------------------------------------------------------------------------------------------*/
/* Contenido del post */
.post-content {
    margin-top: 20px;
}

.post-content p {
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 0;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-links a {
    display: inline-block;
    padding: 8px 15px;
    background-color: rgb(118, 77, 35);  /*Mismo fondo */
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.social-links a:hover {
    background-color: rgb(129, 106, 84);  /*Mismo fondo */
}

/* Contenido principal */

.blog-post {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
    margin: 0 !important;
    padding: 0 !important;
}

.blog-post:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}


.post-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #ffffff;
}

.post-meta .date {
    background-color: #f0f8ff;
    padding: 5px 10px;
    border-radius: 5px;
}

.post-meta .category {
    background-color: #e6f7ff;
    padding: 5px 10px;
    border-radius: 5px;
}

.blog-post img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

.blog-post p {
    margin-bottom: 15px;
    text-align: justify;
}

.read-more {
    display: inline-block;
    padding: 10px 20px;
    background-color: #2575fc;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin-top: 10px;
    margin-left: 10px;
}

.read-more:hover {
    background-color: #1a5fd8;
}



/*Borramos id's del escritorio*/

#buttonMenu{
    display: none;
}

#NetWork{
    display: none;
}

/*Escritorios pequeños*/
@media(max-width:1024px){
.container {
    margin: 0 auto;      /*Centrado general del contenido*/
    display: grid;              /*Columnas para la estructura del Indice */
    grid-template-columns: 1fr 4fr 0fr;     /*· Columnas con diferentes midas*/
    gap: 11px;                  /*Espacio entre las brechas */
}
.right-sidebar{
    display: none;
}
.blog-post.featured-post.fondo-articulo1::before {
    background-position: center 12%;         
    background-repeat: no-repeat;         
}

.blog-post.featured-post{
    min-height: 300px;               
}


.left-sidebar{
    padding: 15px;
}

#NetWork{
    display: block;
}

}

/*RESPONSIVE DE TABLETS*/
@media (max-width:770px){

    body{
        margin: 0px 0px 0px 0px;
    }
    /*Quitamos el elemento grid*/
    .container{
        display: block;
        position: relative;
    }


    /*Ajustamos contenido Principal*/
    .content{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    

    header{
    position: relative;
    width: 100%;
    padding: 7px 25px 7px 5px;     /*espacio entre el propio encabezado*/
    margin: 0px 0px 25px 0px;
    }

/*Quitamos Tags, leyendas, animaciones y ajustamos imagenes de los backgrounds 
y de los elementos contenedores y ajustamos titulos*/

.blog-post.featured-post{
min-height: 240px;                   
margin: 0px;                        
overflow: hidden;                     
}
.post-tags,.leyenda,footer {
    display: none;
}


.blog-post.featured-post:hover::before {
    transform: none;               
}

.blog-post.featured-post.fondo-articulo1::before {
    background-position: center 12%;         
    background-repeat: no-repeat;         
}

.blog-post.featured-post.fondo-articulo3::before {
    background-position: center 12%;         
    background-repeat: no-repeat;         
}

.post-title h2 {
    font-size: 1.8rem;
    margin: 2px 0 0 2px;
    font-weight: bold;
}

/*Propiedades del boton*/
#buttonMenu {
display: block;
width: 50px;
height: 50px;
text-align: center;
position:fixed;
z-index: 5;
top: 0;
margin-top: 20px;
margin-left: 5px;
background-color: rgb(45, 29, 13);
box-shadow: 0px 1px 13px rgba(255, 255, 255, 0.1); 
}

i {
font-size: 1.7em;
color: rgb(187, 187, 187);
} 


.left-sidebar{
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 35%;
z-index: 1200;
}

.left-sidebar {
transform: translateX(100%);
}

.left-sidebar.abierto {
transform: translateX(0);
}

#NetWork{
    display: block;
}

}


/*RESPONSIVE DE TABLETS*/
@media (max-width:512px){

    body{
        margin: 0px;
    }
    /*Quitamos el elemento grid*/
    .container{
        display: block;
        position: relative;
    }

    /*Ajustamos contenido Principal*/
    .content{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    

    header{
    position: relative;
    width: 100%;
    padding: 7px 3px 7px 5px;     /*espacio entre el propio encabezado*/
    margin: 0px 0px 25px 0px;
    font-size: 1.3em;
    }

/*Quitamos Tags, leyendas, animaciones y ajustamos imagenes de los backgrounds 
y de los elementos contenedores y ajustamos titulos*/

.blog-post.featured-post{
min-height: 200px;                   
margin: 0px;                        
overflow: hidden;                     
}
.post-tags,.leyenda,footer {
    display: none;
}


.blog-post.featured-post:hover::before {
    transform: none;               
}


.blog-post.featured-post.fondo-articulo1::before {
    background-position: center 12%;         
    background-repeat: no-repeat;         
}

.blog-post.featured-post.fondo-articulo2::before {
    background-position: center 12%;         
    background-repeat: no-repeat;         
}

.blog-post.featured-post.fondo-articulo3::before {
    background-position: center 12%;         
    background-repeat: no-repeat;         
}

.post-title h2 {
    font-size: 1.3rem;
    margin: 2px 0 0 2px;
    font-weight: bold;
}

/*Propiedades del boton*/
#buttonMenu {
display: block;
width: 50px;
height: 50px;
text-align: center;
position:fixed;
z-index: 5;
top: 0;
margin-top: 20px;
margin-left: 5px;
background-color: rgb(45, 29, 13);
box-shadow: 0px 1px 13px rgba(255, 255, 255, 0.1); 
}

i {
font-size: 1.7em;
color: rgb(187, 187, 187);
} 


.left-sidebar{
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 40%;
z-index: 1200;
padding: 15px;
}

.left-sidebar {
transform: translateX(100%);
}

.left-sidebar.abierto {
transform: translateX(0);
}

#NetWork{
    display: block;
}

}

/*RESPONSIVE DE TABLETS*/
@media (max-width:412px){

    h1{
        font-size: 2.3rem;
      }
    body{
        margin: 0px;
    }
    /*Quitamos el elemento grid*/
    .container{
        display: block;
        position: relative;
    }

    /*Ajustamos contenido Principal*/
    .content{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    

    header{
    position: relative;
    width: 100%;
    font-size: 1.3em;
    padding: 4px 10px 10px 5px;     /*espacio entre el propio encabezado*/
    margin: 0px 0px 25px 0px;
    }

/*Quitamos Tags, leyendas, animaciones y ajustamos imagenes de los backgrounds 
y de los elementos contenedores y ajustamos titulos*/

.blog-post.featured-post{
min-height: 180px;                   
margin: 0px;                        
overflow: hidden;                     
}
.post-tags,.leyenda,footer {
    display: none;
}


.blog-post.featured-post:hover::before {
    transform: none;               
}


.blog-post.featured-post.fondo-articulo1::before {
    background-position: center 12%;         
    background-repeat: no-repeat;         
}

.blog-post.featured-post.fondo-articulo2::before {
    background-position: center 12%;         
    background-repeat: no-repeat;         
}

.blog-post.featured-post.fondo-articulo3::before {
    background-position: center 12%;         
    background-repeat: no-repeat;         
}

.post-title h2 {
    font-size: 1.1rem;
    margin: 2px 0 0 2px;
    font-weight: bold;
}

/*Propiedades del boton*/
#buttonMenu {
display: block;
width: 50px;
height: 50px;
text-align: center;
position:fixed;
z-index: 5;
top: 0;
margin-top: 20px;
margin-left: 5px;
background-color: rgb(45, 29, 13);
box-shadow: 0px 1px 13px rgba(255, 255, 255, 0.1); 
}

i {
font-size: 1.7em;
color: rgb(187, 187, 187);
} 


.left-sidebar{
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 55%;
z-index: 1200;
padding: 15px;
}

.left-sidebar {
transform: translateX(100%);
}

.left-sidebar.abierto {
transform: translateX(0);
}

#NetWork{
    display: block;
}

}