/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Variables de colores */
:root {
--fondo-principal: #1a1a1a;
--fondo-secundario: #2a2a2a;
--texto-principal: #e0e0e0;
--texto-secundario: #b0b0b0;
--violeta-oscuro: #6a0dad;
--violeta-medio: #9370db;
--violeta-claro: #b19cd9;
--lavanda: #e6e6fa;
--amatista: #9966cc;
}

/* Estilos generales */
body {
font-family: 'Georgia', 'Times New Roman', serif;
background-color: var(--fondo-principal);
color: var(--texto-principal);
line-height: 1.7;
font-size: 16px;
}

.contenedor {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

/* Header */
header {
text-align: center;
padding: 60px 20px 40px;
border-bottom: 3px solid var(--violeta-medio);
margin-bottom: 50px;
}

h1 {
font-family: 'Arial', sans-serif;
font-size: 2.5em;
color: var(--violeta-claro);
margin-bottom: 15px;
letter-spacing: 2px;
text-transform: uppercase;
}

.subtitulo {
color: var(--texto-secundario);
font-style: italic;
font-size: 1.1em;
}

/* Secciones */
section {
background-color: var(--fondo-secundario);
padding: 30px;
margin-bottom: 40px;
border: 2px solid var(--violeta-oscuro);
border-radius: 8px;
}

h2 {
font-family: 'Arial', sans-serif;
color: var(--amatista);
font-size: 1.8em;
margin-bottom: 20px;
border-bottom: 1px solid var(--violeta-oscuro);
padding-bottom: 10px;
}

h3 {
color: var(--violeta-medio);
font-size: 1.4em;
margin-bottom: 10px;
}

p {
margin-bottom: 15px;
color: var(--texto-principal);
}

/* Entradas */
.entrada {
background-color: var(--fondo-principal);
padding: 20px;
margin-bottom: 25px;
border-left: 4px solid var(--violeta-medio);
border-radius: 4px;
}

.fecha {
color: var(--texto-secundario);
font-size: 0.9em;
font-style: italic;
margin-bottom: 10px;
}

/* Botón Signal */
.boton-signal {
display: inline-block;
background-color: var(--violeta-oscuro);
color: white;
padding: 15px 30px;
text-decoration: none;
border-radius: 8px;
font-weight: bold;
margin-top: 15px;
transition: all 0.3s ease;
border: 2px solid var(--violeta-medio);
}

.boton-signal:hover {
background-color: var(--violeta-medio);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(147, 112, 219, 0.4);
}

.icono {
font-size: 1.2em;
margin-right: 8px;
}

/* Footer */
footer {
text-align: center;
padding: 30px 20px;
color: var(--texto-secundario);
font-size: 0.9em;
border-top: 2px solid var(--violeta-oscuro);
}

/* Responsivo para móviles */
@media (max-width: 768px) {
h1 {
font-size: 1.8em;
}

h2 {
font-size: 1.4em;
}

section {
padding: 20px;
}

.contenedor {
padding: 10px;
}
}

/* Accesibilidad: mejora el contraste en enlaces */
a {
color: var(--lavanda);
}

a:hover {
color: var(--violeta-claro);
}