/* ==========================================
   RESET UNIVERSAL (Arregla los anchos)
   ========================================== */
   * {
    box-sizing: border-box;
}

/*Declaro la fuente que quiero usar*/
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/PlayfairDisplay-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* 1. EL FONDO GENERAL */
body {
    background-image: url('pics/fog2.jpg');
    margin: 0; /* Le sacamos el margen por defecto que traen los navegadores */
    font-family: Georgia, serif; /* Le damos una letra linda para empezar */
        /* 1. APAGAR EL MOSAICO */
        background-repeat: no-repeat;
    
        /* 2. ESTIRAR LA FOTO */
        background-size: cover;
        
        /* 3. CENTRAR EL FOCO */
        background-position: center;
}

h1 {
    font-family: 'Playfair Display';
    color: #1D212C; /* COLOR DEL TITULO CENTRAL*/
    font-size: 40px;
    /* EL TRUCO: 0 desplazamiento, 10px de desvanecido, blanco puro */
    text-shadow: 0 0 10px #ffffff;
}

/* 2. EL CARTEL DE ARRIBA */
.cabecera {
    text-align: center; /* Centramos el título */
    padding: 20px;
}

/* 3. LA CAJA MADRE (El truco principal) */
.contenedor-columnas {
    display: flex;/* ¡MAGIA! Esto pone a las columnas lado a lado */
    justify-content: center; 
    max-width: 1200px; /* Evita que la página se estire infinitamente en monitores gigantes */
    margin: 0 auto; /* Centra el bloque entero en el medio de la pantalla */
    padding: 20px; /* Le da un poco de aire contra los bordes */
    gap: 20px; /* Crea una separación (pasillo) de 20px entre las tres columnas */
}

/* 4. TAMAÑOS Y COLORES DE LAS COLUMNAS */
.columna-izquierda {
    width: 15%; /* Ocupa un cuarto del espacio */
    background-color: rgba(29, 33, 44, 0.60); /* Un fondo sutil para que veas dónde empieza y termina la caja */
    padding: 15px; /* Aire hacia adentro */
    border-radius: 8px; /* Le redondeamos un poquito las puntas */
}

.columna-central {
    width: 40%; /* Ocupa la mitad del espacio (es la más importante) */
    background-color: rgba(29, 33, 44, 0.60);;
    padding: 15px;
    border-radius: 8px;
}

.columna-derecha {
    width: 15%; /* Ocupa el otro cuarto del espacio */
    background-color: rgba(29, 33, 44, 0.60);;
    padding: 15px;
    border-radius: 8px;
}

.columna-derecha p {
    color: #f5f0b5;
    

}
    /* ==========================================
   DISEÑO DE LOS POSTEOS INDIVIDUALES
   ========================================== */

/* 1. La "Hoja de papel" de cada posteo */

.entrada-bitacora {
    background-color: #fdfbf7; /* Un blanco roto, color papel antiguo */
    border: 1px solid #dcd396; /* Un borde fino apenas más oscuro que el fondo de la columna */
    border-radius: 4px; /* Apenas redondeado en las puntas */
    padding: 25px; /* Mucho aire por dentro para que el texto respire */
    margin-bottom: 30px; /* La distancia fundamental para separar un posteo del que sigue abajo */
    
    /* Un toque mágico: una sombra diminuta para que parezca un papel apoyado */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05); 
}

/* 2. El título del posteo */
.entrada-titulo {
    color: #415f27; /* Ese verde oscuro precioso que elegiste antes */
    font-size: 24px;
    margin-top: 0; /* Le sacamos el margen superior por defecto para que quede pegado arriba */
    margin-bottom: 5px; /* Poca distancia con la fecha */
}

/* 3. La fecha de publicación */
.entrada-fecha {
    color: #888888; /* Un gris sutil para que no robe protagonismo */
    font-size: 14px;
    font-style: italic; /* Letra cursiva para darle ese toque clásico */
    display: block; /* Obliga a la fecha a usar su propio renglón */
    
    /* Le agregamos una línea divisoria punteada por debajo para separar la cabecera del texto */
    border-bottom: 1px dashed #dcd396; 
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* 4. El texto en sí */
.entrada-contenido p {
    color: #333333;
    line-height: 1.7; /* El interlineado amplio es clave para lecturas filosóficas o largas */
    font-size: 16px;
}


/* ==========================================
   DISEÑO RESPONSIVO (PARA CELULARES)
   ========================================== */

/* Le decimos al CSS: "Si la pantalla mide 768 píxeles de ancho o menos..." */
@media (max-width: 768px) {
    
    /* 1. Cambiamos la dirección de la caja madre */
    .contenedor-columnas {
        /* En lugar de ponerlas lado a lado (row), las apilamos en columna (column) */
        flex-direction: column; 
    }
    
    /* 2. Le damos todo el ancho a las tres cajas hijas */
    .columna-izquierda, 
    .columna-central, 
    .columna-derecha {
        width: 100%; /* Ahora cada una ocupa de borde a borde del celular */
        margin-bottom: 20px; /* Les damos un margen abajo para que no queden pegadas entre sí */
    }

    /* 3. Un pequeño ajuste para que la liebre o cualquier foto no se salga de la pantalla */
    img {
        max-width: 100%;
        height: auto;
    }
}

/*==================================
    ESTILO DE MENU DE NAVEGACION :D
  ==================================*/

/* 1. Limpio la lista (La etiqueta <ul>) */
.columna-izquierda ul {
    list-style: none; /* Elimina las viñetas (los puntitos negros feos) */
    padding: 0;       /* Quita el espacio invisible que el navegador pone a la izquierda */
    margin: 0;        /* Quita los márgenes por defecto */
}

/* 2. Separo los renglones (La etiqueta <li>) */
.columna-izquierda li {
    margin-bottom: 15px; /* Deja 20 píxeles de aire debajo de cada enlace para que no se amontonen */
}

/* 3. El estilo de las palabras (El enlace <a>) */
.columna-izquierda a {
    color: #f5f0b5; /* Cambio el color de las palabras */
    text-decoration: none; /* Elimina la línea de subrayado */
    font-family: 'Courier New', Courier, monospace; /* Una tipografía estilo máquina de escribir clásica */
    font-size: 18px; /* Agrandamos la letra para que sea súper legible */
    font-weight: normal; /* Hace que la letra tenga un poco más grosor */
    letter-spacing: 1px; /* Separa un poquitito las letras entre si */
    text-align: center; 
    
    display: block; /* Truco vital: hace que el área donde podés hacer clic sea más grande, no solo la palabra */
    transition: all 0.3s ease; /* Hace que cualquier cambio (como pasar el mouse) sea suave, fluido y no de golpe */
}

/* 4. El efecto de interacción (La pseudo-clase :hover) */
.columna-izquierda a:hover {
    color: #ffffff; /* El texto se vuelve blanco puro al pasar el puntero */
    transform: translateX(8px); /* Un detalle de diseño hermoso: el texto se desliza 8 píxeles hacia la derecha */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Le da un leve resplandor fantasmal en la oscuridad */
    font-weight: bold;
}

.columna-central h3{
    color:#ffffff;
}

.columna-central p{
    color:#ffffff;
    font-size: 18px;
    font-style: italic;
    text-align: justify;
}