/* ==========================================================================
   1. IMPORTACIÓN DE FUENTES Y VARIABLES GLOBALES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Syne+Mono&display=swap');

body {
    background-color: #000;
    /* Textura de rayas diagonales */
    background-image: repeating-linear-gradient(
        45deg, 
        #000, 
        #000 10px, 
        #0f001a 10px, 
        #0f001a 20px
    );
    color: #d19fe8;
    font-family: 'Special Elite', cursive;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* ==========================================================================
   2. CONTENEDORES PRINCIPALES
   ========================================================================== */
#perfil-container, .main-content-full {
    background-color: rgba(15, 0, 25, 0.9);
    width: 95%;
    max-width: 800px;
    border: 4px solid #9400D3;
    box-shadow: 0 0 15px #9400D3, inset 0 0 10px #000;
    padding: 20px;
    margin: 20px auto;
}

/* ==========================================================================
   3. ENCABEZADO Y NAVEGACIÓN
   ========================================================================== */
.emo-header, .emo-header-full {
    text-align: center;
    border-bottom: 4px double #bc13fe;
    padding-bottom: 20px;
    margin-bottom: 20px;
    width: 100%;
}

h1 {
    color: #9400D3;
    font-family: 'Syne Mono', monospace;
    font-size: 3rem;
    margin: 0;
    text-shadow: 2px 2px 0 #000, 4px 4px 0 #D8BFD8;
    text-transform: uppercase;
}

.emo-nav ul, .emo-nav-full ul {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
    background-color: #9400D3;
    border: 2px solid #D8BFD8;
}

.emo-nav a, .emo-nav-full a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-transform: lowercase;
    transition: 0.2s;
    font-size: 0.9rem;
}

.emo-nav a:hover {
    background-color: #000;
    color: #9400D3;
    text-shadow: 0 0 5px #9400D3;
}

/* ==========================================================================
   4. LAYOUT Y COMPONENTES (GRID/COLLAGE)
   ========================================================================== */
.emo-main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

/* Collage 4x4 */
.collage-4x4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
    margin-top: 15px;
    width: 100%;
}

.foto-frame {
    background-color: #000;
    border: 4px solid #bc13fe; 
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    transition: transform 0.2s;
}

.foto-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8) contrast(1.2);
}

.foto-frame:hover {
    animation: tremble 0.3s infinite;
    border-color: #fff;
    z-index: 10;
}

/* ==========================================================================
   5. SECCIONES ESPECÍFICAS (FAMILIA/MÚSICA)
   ========================================================================== */
.fam-box {
    border: 3px double #fff;
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(141, 2, 206, 0.2);
}

.cercanos { border-color: #ff00ff; box-shadow: 0 0 10px #ff00ff; }
.lejanos { border-color: #00ffff; box-shadow: 0 0 10px #00ffff; }

/* Tablas */
.emo-table {
    width: 100%;
    border-collapse: collapse;
    color: #fff;
}

.emo-table td, .emo-table th {
    border: 1px solid #9400D3;
    padding: 8px;
}

/* ==========================================================================
   6. ANIMACIONES Y BOTONES
   ========================================================================== */
@keyframes tremble {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(1deg) translate(1px, 1px); }
    50% { transform: rotate(0deg) translate(-1px, -1px); }
    75% { transform: rotate(-1deg) translate(1px, -1px); }
    100% { transform: rotate(0deg); }
}

.emo-btn {
    background-color: #000;
    color: #bc13fe;
    border: 3px outset #9400D3;
    padding: 8px 15px;
    cursor: pointer;
    font-family: inherit;
}

.emo-btn:active {
    border-style: inset;
}
/* 1. Header centrado */
.emo-header-full {
    width: 100%;
    text-align: center;
    padding: 40px 0 20px 0; /* Espaciado ajustado */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2. Menú: Ahora es un bloque simple entre el título y el contenido */
.emo-nav-full {
    width: 100%;
    max-width: 800px; /* Alineado con el ancho del cuadro de música */
    background: #bc13fe;
    border: 2px solid #fff;
    margin: 10px 0; /* Espacio arriba y abajo */
}

.emo-nav-full ul {
    display: flex;
    justify-content: center; 
    list-style: none;
    padding: 10px;
    margin: 0;
    gap: 20px;
}

.emo-nav-full a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* 3. El cuadro de música */
.main-content-full {
    width: 95%;
    max-width: 800px;
    background-color: rgba(15, 0, 25, 0.9);
    border: 4px solid #9400D3;
    padding: 20px;
    box-shadow: 0 0 15px #9400D3;
    text-align: center;
}