/* 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("Imagenes Blog/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: 2.5rem;
    color: #ffffff; 
    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*/
    color: white;
    font-size: 1.1rem;
}

h3 {                         /*ESTILO h3*/
    color: #ffffff; 
    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 */
header, .sidebar, .content, footer {
    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*/
.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;
}
section #footer_profile{
margin-top: 0px;
}
/*Propiedad de el Widget Autobiografico*/
#footer_profile h3{
text-align: left;
border-bottom: none;
margin-left: 35px;
font-size: 20px;
padding-bottom: 0px;
text-decoration: underline;
}

.profile {
    text-align: center;
    display: flex;
    align-content: center;
}
.profile img {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 180px;
    height: 196px;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid #C4A484;
    padding-top: 0px;
}
/*PARRAFO DE TEXTO AUTOBIOGRAFICO*/
.text_me {
margin-top: 0px;
padding-top: 0px;
margin-left: 50px;
background-color: burlywood;
border-radius: 8px;
border: solid 1px black;
height: 300px;
width: 1000px;
}
/*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; /* ← Transición suave para todos los cambios */
    cursor: pointer;
    display: inline-block; /* ← Convierte a bloque en línea */
    text-align: left; /* ← Alinea el texto a la izquierda dentro del bloque */
    width: 100%;
    margin-bottom: 0px;
}

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

.widget li:hover {
    background-color: #624a2e; /* ← Fondo azul muy claro */
    transform: scale(1.02); /* ← Leve agrandamiento */
    
}

/* Efecto de selección ACTIVA (nuevo) */
.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;
}


.widget ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 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 */
    margin: 0 !important;                 /* Eliminar márgenes externos */
    border-radius: 0 !important;          /* Eliminar bordes redondeados */
    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 */
    background-size: cover;               /* La imagen cubre todo el espacio */
    background-position: center;          /* Centra la imagen */
    background-repeat: no-repeat;         /* Evita que la imagen se repita */
    z-index: -1;                          /* Coloca detrás del contenido */
    transition: transform 1s ease-in-out; /* Transición suave de 1 segundo para transform */
}
/*--------------------------------------------------------------------------------------------*/
/*VELOCIDAD TRANSICIONES*/
.blog-post.featured-post:hover::before {
    transform: scale(1.05);               /* Agranda la imagen 5% al hacer hover */
}

.blog-post.featured-post .post-content {
    position: relative;                   /* Posicionamiento para estar sobre la imagen */
    z-index: 1;                          /* Asegura que esté por encima del ::before */
}
/*--------------------------------------------------------------------------------------------*/
/*MODIFICACION DE LAS CLASSES*/
/*--------------------------------------------------------------------------------------------*/
/*IMAGEN DE ARTICULO DESTACADO 1*/
.blog-post.featured-post.fondo-articulo1::before {
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), 
                url("Imagenes Blog/FotoArticle1.jpg");
                  background-size: cover;               /* La imagen cubre todo el espacio */
    background-position: center;          /* Centra la imagen */
    background-repeat: no-repeat;         /* Evita que la imagen se repita */
}

/*IMAGEN DE ARTICULO DESTACADO 2*/
.blog-post.featured-post.fondo-articulo2::before {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url("Imagenes Blog/FotoArticle2.jpg");
                  background-size: cover;               /* La imagen cubre todo el espacio */
    background-position: center;          /* Centra la imagen */
    background-repeat: no-repeat;         /* Evita que la imagen se repita */
}

/*IMAGEN DE ARTICULO DESTACADO 3*/
.blog-post.featured-post.fondo-articulo3::before {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
                url("Imagenes Blog/FotoArticle3.jpg");
                  background-size: cover;               /* La imagen cubre todo el espacio */
    background-position: center;          /* Centra la imagen */
    background-repeat: no-repeat;         /* Evita que la imagen se repita */
    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: #2575fc;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.social-links a:hover {
    background-color: #1a5fd8;
}

/* 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;
}

/* Pie de página */
footer {
    grid-column: 1 / 4;
    padding: 20px;
    padding-top: 0px;
    text-align: center;
    color: #ffffff;
    margin-top: 0px;
    padding-top: 0px;
}


/*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 3fr 1fr;     /*· Columnas con diferentes midas*/
    gap: 11px;                  /*Espacio entre las brechas */
}

header {
    grid-column: 1 / 4;     /*Mida equivalente a las columnas creadas*/
    padding: 5px 10px 5px 10px;     /*espacio entre el propio encabezado*/
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
    text-align: center;
}
.sidebar {
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /*Sombreado con efecto de profundidad*/

}
.profile img {
    width: 100px;
    height: 116px;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid #C4A484;
    transition: none;
}
}
/*Tablets*/
@media(max-width:768px){
.container {
    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: 11px;                  /*Espacio entre las brechas */
}

header {
    grid-column: 1 / 4;     /*Mida equivalente a las columnas creadas*/
    padding: 5px 10px 5px 10px;     /*espacio entre el propio encabezado*/
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
    text-align: center;
}
.sidebar {
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /*Sombreado con efecto de profundidad*/
}

.profile img {
    width: 100px;
    height: 116px;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid #C4A484;
    transition: none;
}


}
/*Responsive de Moviles*/
@media (max-width: 512px) {
    .container {
        grid-template-columns: 1fr;
        gap: 15px;
        width: 100%;
    }
    
    header {
        grid-column: 1 / 2;
    }
    .profile img {
        width: 70px;
        height: 86px;
    }
    
    /* Asegurar que el contenido principal ocupe toda la columna */
    .content {
        grid-column: 1 / 2;
    }

    .blog-post.featured-post{
    position: relative;                    /* Posicionamiento para elementos hijos absolutos */            
    color: white;                       /* Color del texto blanco para contraste */
    min-height: 160px;                    /* 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: 15px;                        /* Espaciado interno */
    margin: 0 !important;                 /* Eliminar márgenes externos */
    border-radius: 0 !important;          /* Eliminar bordes redondeados */
    overflow: hidden;                     /* Oculta cualquier contenido que se salga */
   
}

.post-title h2 {
    color: #ffffff; /* Amarillo */
    font-size: 1.5rem;
    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: 2px 0 0 2px;
    font-weight: bold;
}
/*Desactivamos todos los elementos de pantallas pequñas*/
.post-tags,.leyenda,footer,.sidebar,.widget {
    display: none;
}

.profile img:hover {
    transform: none; 
    box-shadow: none; 
}

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