/* Estilos Generales para la página principal (index.html) */
body {
    margin: 0;
    background-color: #290606; /* Fondo rojo oscuro */
    color: #FFFCFC;
    text-align: center; /* Alinea todo el texto y elementos de bloque */
    font-family: Arial, sans-serif;
}

.font-strange {
  font-family: 'Rye', cursive; 
  font-weight: normal;
}

/* Encabezado */
h1 { 
    margin: 20px 0 0 0; /* Restaurado el margen superior */
    color: white; 
    font-size: 60px; 
    text-shadow: 0 0 10px #e50914, 0 0 20px #e50914; /* Efecto de brillo rojo */
}

/* Subtítulo */
.subtitulo {
    background-color: #ED5151; 
    width: fit-content;
    padding: 10px 20px;
    margin: 10px auto 30px auto; /* Centra el div */
    border-radius: 5px;
}

.subtitulo h3 {
    margin: 0;
    color: white;
}

/* Menú de Navegación */
.menu-principal ul {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px auto; /* CRÍTICO: Centra el menú */
    display: flex;
    justify-content: center; /* Centra los elementos de la lista */
    flex-wrap: wrap; 
    gap: 10px;
    /* Fondo del contenedor UL se mantiene transparente */
    background-color: transparent; 
    max-width: 1000px;
}

.menu-principal ul li a {
    display: inline-block;
    padding: 8px 15px;
    text-decoration: none;
    color: #f0f0f0;
    border: 1px solid #444;
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
    background-color: #024445; 
}

.menu-principal ul li a:hover {
    background-color: #169191;
    border-color: #00CFCF;
    color: #1a1a1a;
}

/* Contenedor de Imagen y Centrado */
.contenedor-principal {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto; 
    text-align: center;
}

.imagen-bonita {
    display: block; 
    max-width: 100%; /* CRÍTICO: Corrige la adaptabilidad de la imagen */
    height: auto;
    border: 5px solid #ED5151;
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.8);
    margin: 0 auto; 
}

/* Footer */
footer {
    margin-top: 50px;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0.3);
}

/* MEDIA QUERIES para adaptación */
@media (max-width: 600px) {
    h1 {
        font-size: 40px;
    }
    .subtitulo {
        width: 90%;
    }
}