@font-face {
    font-family: 'Garamond Bio';
    src: url('assets/fonts/ITCGaramondStd-LtNarrow.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Garamond Heading';
    src: url('assets/fonts/ITCGaramondStd-BkCond.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* --- ESTÉTICA GENERAL --- */
:root {
    --apple-orange: #ff9500;
    --glass: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.15);
}

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

html, body {
    width: 100%;
    min-height: 100vh; /* Permite que crezca si el contenido es largo */
    height: auto;     /* Fundamental para que el scroll funcione */
    font-family: 'ITC Garamond', serif; 
    color: white; 
    
    /* IMPORTANTE: Auto para permitir scroll vertical, Hidden para evitar scroll horizontal */
    overflow-y: visible; 
    overflow-x: hidden;
    
    /* El fondo se queda fijo aunque hagas scroll */
    background: radial-gradient(circle at center, #4a1200 0%, #1a0500 100%) no-repeat fixed;
    background-size: cover;
}

/* 
    .viewport-container {
    min-height: 100dvh; 
    height: auto;      
    display: flex; 
    flex-direction: column;
    justify-content: flex-start; /
    align-items: center; 
    padding-top: 40px;
    
    padding-bottom: 60px; 
    
    gap: 30px;
}
*/

/* La clase antigua la desactivamos para evitar conflictos */
.glass-background { display: none; }

/* --- CONTENEDOR PRINCIPAL (Limpieza Definitiva) --- */
.viewport-container {
    width: 100%;
    min-height: 100vh; /* Asegura que cubra la pantalla */
    height: auto;      /* Deja que crezca con el contenido (Spotify, Footer, etc.) */
    
    display: flex; 
    flex-direction: column;
    
    /* ALINEACIÓN: flex-start es vital ahora que tenemos mucho contenido. */
    /* Evita que 'space-between' separe los elementos kilómetros unos de otros. */
    justify-content: flex-start; 
    align-items: center; 
    
    padding-top: 40px;
    
    /* ESPACIO FINAL: 60px para PC (como pediste) */
    padding-bottom: 60px; 
    
    gap: 40px; /* Separación estándar entre bloques */
}

/* Ajuste de seguridad para Móvil (Para que la barra del navegador no tape el Copyright) */
@media (max-width: 768px) {
    .viewport-container {
        /* En móvil damos un poco más de aire abajo por si acaso */
        padding-bottom: 120px; 
    }
}

.logo-text { letter-spacing: 10px; font-weight: 200; font-size: 1.6rem; text-transform: uppercase; }
.bio { 
    font-family: 'Garamond Bio', serif; /* Aplicamos la fuente solo aquí */
    font-size: 1.1rem; /* Un poco más grande para que se lea bien */
    line-height: 1.4;  /* Altura de línea para elegancia */
    opacity: 0.9; 
    margin-top: 15px; 
    text-align: center;
    max-width: 600px; /* Evita que el texto se estire demasiado a los lados */
    margin-left: auto;
    margin-right: auto;
}
/* FILTROS */
.filter-group {
    display: flex; gap: 10px; background: var(--glass);
    padding: 8px; border-radius: 40px; border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.filter-btn {
    padding: 10px 25px; border: none; background: transparent;
    color: rgba(255,255,255,0.5); border-radius: 30px;
    cursor: pointer; font-size: 0.75rem; font-weight: 600; transition: 0.3s;
}
.filter-btn.active { background: white; color: black; }

/* CARRUSEL Y FLECHAS */
.carousel-section {
    display: flex; align-items: center; justify-content: center;
    width: 100%; position: relative; perspective: 1000px;
}
.carousel-track {
    display: flex; align-items: center; justify-content: center;
    gap: 40px; width: 100%; height: 500px;
}
/* Flechas corregidas */
.nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: white;
    font-size: 3rem; cursor: pointer; opacity: 0.5; padding: 20px; z-index: 100;
}
.left-arrow { left: 5%; }
.right-arrow { right: 5%; }
.nav-arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.1); }

/* TARJETAS */
.player-card {
    width: 380px; min-width: 380px; background: var(--glass);
    backdrop-filter: blur(30px); border: 1px solid var(--glass-border);
    border-radius: 44px; padding: 35px; text-align: center;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.player-card.side { opacity: 0.2; transform: scale(0.85); filter: blur(5px); pointer-events: none; }
.cover-art { width: 140px; height: 140px; border-radius: 20px; margin-bottom: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); object-fit: cover;}

/* CONTROL A/B */
.ab-switch {
    display: flex; gap: 5px; margin-bottom: 20px;
    background: rgba(0,0,0,0.2); padding: 4px; border-radius: 30px;
    width: 100%;
}
.ab-btn {
    flex: 1; border: none; padding: 8px 0; border-radius: 25px;
    font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: 0.3s;
    background: transparent; color: rgba(255,255,255,0.6);
}
.ab-btn.active { background: white; color: black; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }

/* BARRA DE PROGRESO */
.progress-area {
    width: 100%; height: 20px; display: flex; align-items: center;
    cursor: pointer; margin-bottom: 20px;
}
.progress-bar-bg {
    width: 100%; height: 4px; background: rgba(255,255,255,0.2); border-radius: 10px; position: relative;
}
.progress-bar-fill {
    height: 100%; width: 0%; background: white; border-radius: 10px; position: relative;
}
/* Tirador circular */
.progress-bar-fill::after {
    content: ''; position: absolute; right: -6px; top: -5px;
    width: 14px; height: 14px; background: white; border-radius: 50%;
    opacity: 0; transition: 0.2s; box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.progress-area:hover .progress-bar-fill::after { opacity: 1; }

/* --- BOTÓN PLAY (Estilo Apple Music) --- */

.play-btn-modern {
    /* Mantenemos un área de clic grande (70x70) aunque el icono sea más pequeño */
    width: 70px; 
    height: 70px; 
    
    /* CAMBIO CLAVE: Fondo transparente y sin sombra */
    background: transparent; 
    border: none;
    box-shadow: none;
    border-radius: 0; 

    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    margin: 0 auto; 
    transition: all 0.2s ease;
    
    /* Un poco de opacidad por defecto para que al hacer hover destaque más */
    opacity: 0.9;
}

/* Efecto hover: crece un poco y se vuelve blanco puro */
.play-btn-modern:hover { 
    transform: scale(1.1); 
    opacity: 1;
}

/* Efecto click: se achica ligeramente */
.play-btn-modern:active {
    transform: scale(0.95);
}

/* CAMBIO CLAVE: El icono ahora es blanco y un poco más grande */
.play-btn-modern svg { 
    width: 40px; /* Icono más protagonista */
    height: 40px; 
    fill: white; /* Color blanco */
    
    /* Pequeño ajuste óptico para centrar el triángulo de Play */
    margin-left: 2px; 
}

/* CONTROL DEL LOGO */
.logo {
    max-width: 1000px; /* Aquí controlas el tamaño. Prueba 150px o 200px si prefieres */
    width: 60%;       /* En móvil ocupará el 60% del ancho disponible */
    height: auto;     /* Mantiene la proporción para que no se deforme */
    display: block;   /* Necesario para centrar */
    margin: 0 auto 15px auto; /* Centrado horizontal y margen abajo */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3)); /* Sombra suave para que destaque del fondo */
}

/* --- 2. ESTILOS ACTUALIZADOS DE LA BIO --- */

.bio-section {
    text-align: center;
    margin-top: 25px;
    padding: 0 20px;
    max-width: 700px; /* Evita que se desparrame en pantallas grandes */
    margin-left: auto;
    margin-right: auto;
}

/* El Titular: Ahora con ITC Garamond Bold Narrow */
.bio-heading {
    font-family: 'Garamond Heading', serif;
    font-size: 1.6rem;   /* Tamaño grande para impactar */
    line-height: 1.1;    /* Interlineado ajustado para títulos */
    font-weight: normal; /* La fuente ya es bold de por sí */
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    color: white;
}

/* El Cuerpo: Se mantiene con la Light Narrow que ya tenías */
.bio-text {
    font-family: 'Garamond Bio', serif; 
    font-size: 1.15rem;   
    line-height: 1.5;    
    opacity: 0.8;
    max-width: 550px;    
    margin: 0 auto;      
}

/* --- VERSIÓN MÓVIL (Responsive) --- */
@media (max-width: 768px) {
    
    /* 1. Ajuste de Textos */
    .bio-heading {
        font-size: 1.4rem; /* Un poco más pequeño para que quepa */
        line-height: 1.2;
    }
    
    .bio-text {
        font-size: 1rem;
        padding: 0 10px;
    }

    /* 2. Ajuste del Reproductor (El cambio más importante) */
    .carousel-track {
        height: auto;
        min-height: 500px; /* Altura suficiente para el player */
        gap: 0; /* Eliminamos huecos laterales */
    }

    .player-card {
        /* La tarjeta ahora ocupa el 90% del ancho de la pantalla del móvil */
        width: 90vw; 
        min-width: auto; /* Anulamos el bloqueo de 380px */
        padding: 25px 20px;
    }

    /* Ocultamos las tarjetas de los lados en móvil para limpiar la vista */
    .player-card.side {
        display: none;
    }

    /* Ajustamos las flechas para que no tapen el contenido */
    .nav-arrow {
        font-size: 2rem;
        padding: 10px;
        background: rgba(0,0,0,0.5); /* Fondo oscuro para que se vean sobre la tarjeta */
    }
    .left-arrow { left: 2%; }
    .right-arrow { right: 2%; }
    
    /* Ajuste del botón Play para dedos */
    .play-btn-modern {
        width: 60px;
        height: 60px;
    }
}

/* --- CORRECCIÓN DE FUENTES DE INTERFAZ --- */
/* Esto fuerza la fuente limpia (Apple System) en elementos de UI */
.player-card h3,        /* Título de canción */
.player-card p,         /* Etiqueta Mezcla/Prod */
.filter-btn,            /* Filtros */
.ab-btn,                /* Botones A/B */
.contact-pill {              
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
}                       /* Botón final */


/* Ajuste específico para el título de la canción para que destaque */
.player-card h3 {
    font-weight: 700;
    margin-bottom: 5px;
}

/* --- BOTÓN DE CONTACTO (Recuperado) --- */
.contact-pill {
    display: inline-block; /* Importante para que acepte el tamaño */
    background: white;
    color: black;
    padding: 18px 50px;
    border-radius: 50px;
    
    /* Quita el aspecto de enlace azul */
    text-decoration: none; 
    
    font-weight: 800;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Fuente moderna limpia (Sans-Serif) */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-pill:hover {
    transform: scale(1.05); /* Efecto zoom al pasar el ratón */
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4); /* Brillo blanco */
}

/* --- SECCIÓN SPOTIFY --- */
.spotify-section {
    width: 100%;
    max-width: 900px; /* Ancho máximo para que no se desparrame en pantallas grandes */
    display: flex;
    justify-content: center;
    gap: 30px; /* Espacio entre las dos listas */
    padding: 0 20px;
    margin-bottom: 40px;
    flex-wrap: wrap; /* Importante para que bajen en móvil */
}

.spotify-wrapper {
    flex: 1; /* Ocupan el mismo espacio */
    min-width: 300px; /* No se hacen más pequeñas de 300px */
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 20px;
    backdrop-filter: blur(20px);
}

.spotify-title {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-align: center;
    opacity: 0.8;
}

/* --- FOOTER CON INSTAGRAM --- */
.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.social-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    transition: 0.3s;
    border-bottom: 1px solid transparent; /* Para el efecto hover */
}

.social-link:hover {
    color: white;
    border-bottom: 1px solid white; /* Subrayado elegante al pasar el ratón */
}

/* --- AJUSTE MÓVIL --- */
@media (max-width: 768px) {
    .spotify-section {
        flex-direction: column; /* Una debajo de otra en móvil */
        align-items: center;
    }
    
    .spotify-wrapper {
        width: 100%; /* Ocupan todo el ancho en móvil */
    }
}

/* --- NUEVA ESTRUCTURA (Orden) --- */

/* Contenedor del botón 'Trabajemos Juntos' */
.cta-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px; /* Separación con las playlists */
}

/* Ajustes de la sección Spotify (para que no se pegue al footer) */
.spotify-section {
    /* ... tus estilos anteriores ... */
    margin-bottom: 60px; /* Espacio antes del footer */
}

/* --- FOOTER CON ICONOS --- */
.footer {
    width: 100%;
    display: flex;
    
    /* ESTO ES LO IMPORTANTE: */
    flex-direction: column; /* Pone los elementos uno debajo de otro */
    align-items: center;    /* Los centra horizontalmente */
    
    gap: 40px;              /* Espacio vertical entre los iconos y el texto */
    /*padding-bottom: 40px;   /* Margen final para que respire */
}

.social-icons {
    display: flex;
    gap: 30px; /* Separación entre iconos */
    align-items: center;
}

.icon-link svg {
    width: 30px;
    height: 30px;
    fill: rgba(255, 255, 255, 0.6); /* Blanco semitransparente por defecto */
    transition: all 0.3s ease;
}

.icon-link:hover svg {
    fill: white; /* Blanco puro al pasar el ratón */
    transform: scale(1.1); /* Pequeño zoom */
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.4)); /* Brillo */
}

/* --- COPYRIGHT (Estilo Bio) --- */
.copyright {
    /* Usamos la misma fuente que definimos para la Bio */
    font-family: 'Garamond Bio', serif; 
    
    /* La Garamond es un poco más pequeña, así que subimos ligeramente el tamaño */
    font-size: 0.9rem; 
    
    /* Un poco de opacidad para que sea sutil pero legible */
    color: rgba(255, 255, 255, 0.5); 
    
    text-align: center;
    letter-spacing: 1px; /* Un poco de aire entre letras queda muy elegante */
    margin: 0;
}

/* --- LAYOUT ESCRITORIO (Split Header) --- */

/* Solo se aplica en pantallas de PC/Tablet grande */
@media (min-width: 769px) {

    /* El contenedor principal se convierte en una fila flexible */
    .header-split {
        display: flex;
        align-items: center; /* Centrado verticalmente */
        justify-content: center;
        width: 100%;
        max-width: 1600px; /* Ancho máximo para que no se separen demasiado */
        margin: 0 auto 40px auto; /* Centrado en la página */
        padding: 40px 20px;
    }

    /* Las columnas ocupan exactamente el 50% cada una */
    .header-col {
        flex: 1;
        width: 50%;
    }

    /* COLUMNA IZQUIERDA (Logo) */
    .header-col.left {
        display: flex;
        justify-content: flex-end; /* Empuja el logo a la derecha (hacia el centro) */
        padding-right: 60px; /* Espacio respecto a la línea imaginaria central */
        border-right: 1px solid rgba(255,255,255,0.1); /* (OPCIONAL) Línea sutil divisoria. Si no te gusta, borra esta línea */
    }

    /* COLUMNA DERECHA (Bio) */
    .header-col.right {
        display: flex;
        align-items: center;
        padding-left: 40px; /* Espacio respecto a la línea imaginaria central */
    }

    /* AJUSTES ESPECÍFICOS PARA ESTE MODO */
    
    /* El logo ya no necesita márgenes automáticos, lo controla el flexbox */
    .logo {
        margin: 0 !important; 
        max-width: 1500px; /* En este diseño el logo pide ser un poco más grande */
    }

    /* La bio se alinea a la izquierda */
    .bio-section {
        text-align: left !important; /* Forzamos alineación izquierda */
        margin: 0 !important;
        max-width: 500px; /* Limitamos el ancho del texto */
    }
}

/* --- SECCIÓN REPRODUCTOR AGRUPADA (FIX CENTRADO) --- */

.player-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    
    /* ESTO ES LA CLAVE DEL CENTRADO: */
    align-items: center; /* Evita que se estiren a lo ancho y los centra */
    justify-content: center;
    
    /* Espacio controlado entre Título, Filtros y Player */
    gap: 20px; 
    
    margin-bottom: 40px; 
    position: relative;
    z-index: 10;
}

/* Estilo del Título "Explora mis trabajos" */
.section-title {
    /* Recuperamos la fuente del Header */
    font-family: 'Garamond Heading', serif; 
    
    font-size: 2.5rem;   
    color: white;
    
    /* Aseguramos centrado de texto */
    text-align: center;
    width: 100%; 
    
    margin: 0;
    letter-spacing: 1px;
    
    /* Sombra suave para que destaque sobre el fondo */
    text-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Aseguramos que los filtros no se estiren */
.player-wrapper .filter-group {
    width: auto;      /* Que ocupen solo lo que necesitan */
    max-width: 90%;   /* Por seguridad en móviles */
    display: flex;
    justify-content: center;
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
        padding: 0 20px; /* Evita que toque los bordes en pantallas estrechas */
    }
    
    .player-wrapper {
        gap: 15px; /* Un poco más compacto en móvil */
    }
}