/* 1. Reset y Variables */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

:root {
    --color-background: #121212; /* Fondo Oscuro (Dark Mode) */
    --color-text: #EAEAEA; /* Texto Claro */
    --color-accent: #1ecbd7; /* Color de Énfasis (Cian/Azul) */
    --max-width: 600px; /* Limita el ancho en escritorio para el look 'link-in-bio' */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto Mono', monospace; /* Fuente tecnológica/moderna */
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    padding: 20px 10px;
}

/* 2. Estructura General y Cabecera */

.site-main {
    max-width: var(--max-width);
    margin: 0 auto;
}

.site-header {
    text-align: center;
    padding: 30px 0;
}

.logo h1 {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--color-accent); /* Destacamos el logo */
}

.site-header a {
    text-decoration: none;
    color: inherit;
}

.site-description {
    font-size: 0.85em;
    text-transform: uppercase;
    color: #888;
}

/* 2.1. Llamado a la Acción (CTA) */

.cta-link {
    text-decoration: none; /* Quitamos el subrayado del enlace */
    display: block;
    margin-top: 15px;
}

.cta-slogan {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color-accent); /* Color de acento (Cian) */
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 0;
    
    /* Efecto de atención: Sombra de neón y animación de parpadeo */
    text-shadow: 0 0 5px var(--color-accent);
    animation: pulse-attention 1.5s infinite alternate; /* Aplica la animación */
}

.cta-slogan:hover {
    color: var(--color-text); /* Cambia el color al pasar el ratón */
    text-shadow: none; /* Desactiva la sombra para un efecto de "apagado" */
    animation: none; /* Detiene la animación al interactuar */
}

/* Definición de la animación de Parpadeo */
@keyframes pulse-attention {
    0% {
        opacity: 0.8;
        transform: scale(1.0);
    }
    100% {
        opacity: 1.0;
        transform: scale(1.02);
    }
}


/* 3. Sección de Artista */

.artist-section {
    padding: 40px 0 20px;
    text-align: center;
}

.artist-name {
    font-size: 2.2em;
    margin-bottom: 25px;
    color: var(--color-text);
    text-transform: uppercase; /* Añadido para consistencia */
    /* Animación sutil al pasar el ratón */
    transition: color 0.3s;
}
.artist-name:hover {
    color: var(--color-accent);
}

.artist-media {
    margin-bottom: 25px;
}

.artist-image {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Sombra oscura para profundidad */
}

/* 4. Reproductores Incrustados (Spotify) */

.embed-player {
    margin: 30px 0;
    /* Da un ligero borde al reproductor usando el color de acento */
    border: 1px solid var(--color-accent); /* Corregido para usar la variable */
    border-radius: 12px;
    overflow: hidden; /* Asegura que el iframe no se salga */
}

/* 5. Enlaces Sociales */

.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap; /* Para asegurar que no se salgan en pantallas pequeñas */
}

.social-icon {
    padding: 10px 18px;
    background-color: #282828; /* Gris oscuro sutil */
    color: var(--color-text);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

/* Colores específicos y efectos de hover */
.social-icon.spotify:hover {
    background-color: #1ED760; /* Usamos el verde original de Spotify para el hover */
    color: var(--color-background);
}
.social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.social-icon.tiktok:hover {
    background-color: #FE2C55;
}
.social-icon.youtube:hover { /* El estilo de YouTube es correcto */
    background-color: #FF0000;
}

/* 6. Botón de Acción/Booking */

.action-button {
    display: block;
    width: 90%;
    max-width: 400px;
    margin: 0 auto 50px;
    padding: 15px 20px;
    background-color: var(--color-accent);
    color: var(--color-background); /* Texto oscuro sobre botón de acento */
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
    font-size: 1.1em;
}

.action-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* 7. Divisor */

.section-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 80%;
    margin: 20px auto;
}

/* 8. Pie de Página */

.site-footer {
    text-align: center;
    font-size: 0.8em;
    padding: 30px 0;
    color: #666;
}

.site-footer a {
    color: #666;
    text-decoration: underline;
    transition: color 0.3s;
}
.site-footer a:hover {
    color: var(--color-accent);
}