/* CONFIGURACIÓN GENERAL DEL FONDO Y LETRAS */
body {
    background-color: #120e2e; /* Un azul muy oscuro, casi morado de medianoche */
    color: #e2e1f1; /* Letras en un tono blanco azulado suave para que no canse la vista */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* DISEÑO DE LA CABECERA (EL TÍTULO PRINCIPAL) */
header {
    background: linear-gradient(135deg, #2c1654, #120e2e); /* Degradado de morado a azul oscuro */
    padding: 40px 20px;
    text-align: center;
    border-bottom: 3px solid #ffd700; /* Línea dorada/amarilla brillante abajo del título */
}

header h1 {
    color: #ffd700; /* Título principal en amarillo dorado */
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 0px 2px 10px rgba(255, 215, 0, 0.3); /* Destello amarillo sutil */
}

header p {
    color: #b0a8df; /* Subtítulo en un morado pastel claro */
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* CONTENEDOR DE LAS ENTRADAS DEL BLOG */
main {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

/* DISEÑO DE CADA ARTÍCULO (TIPO TARJETA) */
.post {
    background-color: #1b1544; /* Morado oscuro para el fondo de cada tarjeta */
    padding: 30px;
    border-radius: 12px; /* Bordes redondeados */
    margin-bottom: 30px;
    border-left: 5px solid #ffd700; /* Barra amarilla/dorada decorativa a la izquierda */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Sombra para dar profundidad */
    transition: transform 0.3s ease;
}

/* Efecto cuando pasas el mouse sobre una tarjeta */
.post:hover {
    transform: translateY(-5px); /* Se eleva un poquito */
}

/* TÍTULOS DE LAS ENTRADAS */
.post h2 {
    color: #ffd700; /* Títulos de los artículos en amarillo */
    margin-top: 0;
    font-size: 1.6rem;
}

/* FECHAS O SUBTÍTULOS DE CADA ENTRADA */
.post small {
    color: #8c7ae6; /* Morado brillante para las etiquetas pequeñas */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 15px;
}

/* PIE DE PÁGINA */
footer {
    text-align: center;
    padding: 30px 20px;
    color: #635b94;
    font-size: 0.9rem;
    background-color: #0b0822;
}

/* CUALQUIER LÍNEA DIVISORIA */
hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 215, 0, 0), #ffd700, rgba(255, 215, 0, 0));
    margin: 20px 0;
}