/* --- Estilos de Base --- */
body {
    margin: 0;
    padding-top: 90px; 
    font-family: 'Quicksand', sans-serif;
    /* Fondo con capa clara para que se lea el texto */
    background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("fondo-unicornio.jpg");
    background-attachment: fixed;
    background-size: cover;
}

/* --- MENÚ --- */
.navbar {
    background: #ff1493;
    padding: 15px;
    text-align: center;
    position: fixed; 
    top: 0; width: 100%; z-index: 2000;
    display: flex; justify-content: center; gap: 10px;
}

.navbar a {
    color: white; text-decoration: none; font-weight: bold;
    background: #ff69b4; padding: 8px 15px; border-radius: 20px;
}

/* --- ESTRUCTURA (Habilidades arriba, Familia e Izquierda/Derecha abajo) --- */
.fila {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column; /* Habilidades arriba */
    gap: 20px;
}

.caja-superior {
    background: white;
    padding: 20px;
    border-radius: 15px;
    border: 3px solid #ff69b4;
    text-align: center;
}

.contenedor-inferior {
    display: flex; /* Familia a la izquierda, Enemigos a la derecha */
    gap: 20px;
}

.columna-izquierda, .columna-derecha {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #ffc1e3;
}

/* --- BOTONES DE PERSONAJES --- */
.contenedor-familia {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.miembro-familia {
    position: relative;
    width: 100px;
    height: 100px;
    border: 3px solid #ff69b4;
    border-radius: 12px;
    overflow: hidden;
    background: #eee;
}

.miembro-familia img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; /* <--- ESTO ENFOCA LA CARA */
}

/* --- TEXTO QUE APARECE AL PASAR EL RATÓN --- */
.miembro-familia p {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    margin: 0;
    background: rgba(216, 27, 96, 0.9); /* Fondo rosa al pasar el ratón */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    padding: 5px;
    box-sizing: border-box;
    
    /* Lo ocultamos por defecto */
    opacity: 0;
    transition: 0.3s;
}

.miembro-familia:hover p {
    opacity: 1; /* Se vuelve visible al pasar el ratón */
}

/* Estilo simple para villanos */
.villano { border-color: #555; }
.villano p { background: rgba(0, 0, 0, 0.8); }

/* --- TEXTOS --- */
h1, h2, h3 {
    font-family: 'Luckiest Guy', cursive;
    color: #d81b60;
}

.center { text-align: center; }

/* Para móviles: se pone todo en una sola columna */
@media (max-width: 700px) {
    .contenedor-inferior { flex-direction: column; }
}