/* ---------------------------------------------------- */
/* RESET Y FONDO */
/* ---------------------------------------------------- */

body {
    background-color: black;
    color: #090016; 
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0; /* Aseguramos padding: 0 para centrado */
    text-align: center; /* Centra el contenedor principal */
    
    background-color: #090016; /* Color de respaldo, si la imagen falla */
    cursor: url("/images/cursor.png"), default;
    /* ---------------------------------------------------- */
    /* PROPIEDADES PARA EL FONDO DE IMAGEN COMPLETO Y FIJO */
    /* ---------------------------------------------------- */
    
    /* ¡IMPORTANTE! Reemplaza 'ruta/a/tu/imagen_de_fondo.png' por la ruta real */
    background-image: url('https://maseramer.neocities.org/Images/retrowall.jpg'); 
    
    background-repeat: no-repeat;
    background-attachment: fixed; /* Esto hace que la imagen no se mueva al hacer scroll */
    background-size: cover;       /* Esto asegura que la imagen cubra toda la ventana */
    background-position: center;  /* Centra la imagen */
    
    /* ---------------------------------------------------- */
    /* OTRAS PROPIEDADES DEL BODY (No modificar si ya están) */
    /* ---------------------------------------------------- */
    color: #19003e;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------- */
/* CONTENEDOR PRINCIPAL - LA CAJA CENTRAL */
/* ---------------------------------------------------- */
#contenedor-principal-JSAB {
    width: 90%;
    max-width: 1000px;
    margin: 10px auto; /* CAMBIO: Reducción del espacio exterior */
    background-color: #090016; 
    border: 3px solid #f93550; 
    border-radius: 30px; /* ¡Bordes redondeados para el contenedor principal! */
    box-shadow: 0px 0px 5px #fc0c20; 
    overflow: hidden;
    min-height: 80vh; 
    text-align: left; /* Restablecemos alineación de texto dentro del contenedor */
}

/* ---------------------------------------------------- */
/* ENCABEZADO SUPERIOR (PARA EL BANNER DE IMAGEN) */
/* ---------------------------------------------------- */
#encabezado-JSAB {
    background-color: #160036; 
    padding: 0; 
    text-align: center;
    border-bottom: 3px solid #f93550;
    /* Los bordes redondeados del contenedor principal se "cortarán" aquí por el overflow:hidden */
}
#encabezado-JSAB img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto; 
    /* Si la imagen no tiene bordes transparentes, es posible que no se vean los redondeados aquí */
    /* Podríamos añadir un border-radius a la imagen si es necesario, pero max-width:100% es suficiente */
}

/* ---------------------------------------------------- */
/* CONTENEDOR DE COLUMNAS (MENÚ Y CONTENIDO) */
/* ---------------------------------------------------- */
#contenido-y-menu {
    display: flex; 
}

/* MENÚ LATERAL (Columna Izquierda) */
#menu-lateral {
    width: 220px;
    padding: 10px; /* CAMBIO: Reducción del espacio interior */
    background-color: #a5021f; 
    border-right: 2px solid #820018; 
    flex-shrink: 0;
    border-radius: 0 0 0 7px; /* Solo redondeamos la esquina inferior izquierda */
}

#menu-lateral h2 {
    color: #f93550;
    border-bottom: 2px solid #f93550;
    font-size: 1.1em;
    padding-bottom: 5px;
}

#menu-lateral ul {
    list-style: square; 
    color: #fc0c20; 
    padding-left: 20px;
}

#menu-lateral a {
    color: #080014; 
    text-decoration: none;
    display: block; 
    padding: 3px 5px; /* CAMBIO: Reducción del padding en los enlaces */
}

#menu-lateral a:hover {
    background-color: #080014; 
    color: #fc0c20; 
}

/* CONTENIDO PRINCIPAL (Columna Derecha) */
#contenido-principal {
    flex-grow: 1; 
    padding: 15px; /* CAMBIO: Reducción del espacio interior */
    border-radius: 0 0 7px 0; 

    /* --- NUEVAS PROPIEDADES PARA EL FONDO DE IMAGEN --- */
    background-color: #090016; /* Color de respaldo si la imagen falla */
    background-image: url('Images/rayas.png'); /* ¡Cambia esto por tu nombre de archivo! */
    background-repeat: repeat; /* O usa no-repeat, cover, etc., según lo que desees */
    /* --- FIN DE NUEVAS PROPIEDADES --- */
}

/* CAJAS DE CONTENIDO (Secciones separadas dentro del contenido principal) */
.caja-contenido-inicio {
    background-color: #f93550; 
    border: 1px solid #9e0000; 
    border-radius: 5px; 
    padding: 15px; /* CAMBIO: Reducción del padding */
    margin-bottom: 15px; /* CAMBIO: Reducción del margen inferior */
}

.caja-contenido-inicio h2 {
    color: #fc3558; 
    border-bottom: 1px dashed #090016; 
    margin-top: 0;
}

/* CAJAS DE CONTENIDO (Secciones separadas dentro del contenido principal) */
.caja-contenido {
    background-color: #090016; 
    border: 1px solid #fc3558; 
    border-radius: 5px; 
    padding: 15px; /* CAMBIO: Reducción del padding */
    margin-bottom: 15px; /* CAMBIO: Reducción del margen inferior */
}
.caja-contenido h2 {
    color: #FFFFFF; 
    border-bottom: 1px dashed #FFFFFF; 
    margin-top: 0;
}

/* ---------------------------------------------------- */
/* PIE DE PÁGINA (FOOTER) */
/* ---------------------------------------------------- */
#pie-pagina-JSAB {
    background-color: #19003e; /* Fondo negro */
    color: #fc3558; /* Texto gris claro */
    padding: 15px 10px;
    text-align: center;
    border-top: 3px solid #fc3558; /* Línea roja de separación superior */
    font-size: 0.9em;
}

#pie-pagina-JSAB p {
    margin-top: 0;
    margin-bottom: 10px;
}

#enlaces-footer-JSAB a {
    color: #fc3558; /* Enlaces en color rojo */
    text-decoration: none;
    margin: 0 10px;
    padding-bottom: 2px;
    /* Efecto de subrayado al pasar el mouse */
    border-bottom: 1px dotted transparent; 
    transition: border-bottom 0.2s;
}

#enlaces-footer-JSAB a:hover {
    color: #fc3558;
    border-bottom: 1px dotted #fc3558; /* Subrayado punteado rojo al pasar el mouse */
}


.imagen-flotante {
width: 150px !important;
height: auto !important;
float: left !important;
margin-right: 15px !important;
}

.contenedor-bio {
    display: flex; /* Convierte el contenedor en Flexbox */
    gap: 15px;      /* Añade espacio entre los elementos */
    align-items: flex-start; /* Opcional: alinea los elementos al inicio */
}
/* No necesitas float: left; en la imagen con Flexbox */