/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* --- PALETA DE COLORES "COZY" --- */
:root {
  --fondo-principal: #F9F7F2;  /* Crema suave (como papel antiguo) */
  --color-texto: #4A403A;      /* Marrón café oscuro (no negro puro, cansa menos) */
  --color-acento: #A67B5B;     /* Marrón caramelo (para enlaces) */
  --color-hover: #C08552;      /* Terracota suave (al pasar el mouse) */
  --fondo-tarjeta: #FFFFFF;    /* Blanco para el área de texto */
}

/* --- CONFIGURACIÓN GENERAL --- */
body {
  animation: entradaSuave 2.2s ease-out;
  background-color: var(--fondo-principal);
  color: var(--color-texto);
  font-family: 'Inter', sans-serif; /* Letra limpia para párrafos */
  line-height: 1.8; /* Altura entre líneas: CLAVE para que no sature */
  margin: 0;
  padding: 20px;
}

/* --- ESTRUCTURA DE LA PÁGINA (COLUMNA CENTRAL) --- */
/* Esto centra todo y evita que el texto se estire de borde a borde */
.contenedor-texto, header, footer {
  max-width: 700px; /* Ancho máximo de lectura cómodo */
  margin: 0 auto;   /* Centrar en la pantalla */
  padding: 0 10px;
}

/* --- ENCABEZADO Y NAVEGACIÓN --- */
header {
    /* 1. Ocupar todo el ancho */
    width: 100%;
    
    /* 2. Fondo sólido para tapar los puntos y destacar */
    background-color: #FFFFFF; /* O usa #F9F7F2 si prefieres crema */
    
    /* 3. Espaciado interno para que "respire" (lo hace más alto) */
    padding: 40px 0; 
    
    /* 4. Sombra suave inferior para separarlo del contenido */
    box-shadow: 0 4px 20px rgba(166, 123, 91, 0.1); 
    border-bottom: 1px solid #E0DCD5;
    
    /* 5. Asegurar que todo se centre verticalmente */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Margen para no pegarse al contenido de abajo */
    margin-bottom: 50px;
}

h1, h2, h3 {
  font-family: 'Lora', serif; /* Letra elegante para títulos */
  font-weight: 600;
  color: #2E2622; /* Un marrón casi negro */
  margin-bottom: 15px;
}

h1 {
  font-size: 2.5rem;
  letter-spacing: -1px;
}

nav {
  margin-top: 20px;
  border-top: 1px solid #E0DCD5; /* Línea divisoria sutil */
  border-bottom: 1px solid #E0DCD5;
  padding: 15px 0;
}

nav a {
  text-decoration: none;
  color: var(--color-texto);
  margin: 0 15px;
  font-size: 0.9rem;
  text-transform: uppercase; /* Letras en mayúscula para el menú */
  letter-spacing: 1px;
}

/* --- ENLACES GENERALES --- */
a {
  color: var(--color-acento);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-acento); /* Subrayado sutil */
  transition: all 0.3s ease;
}

a:hover {
  color: var(--color-hover);
  background-color: #F0EBE5; /* Pequeño fondo al pasar el mouse */
}

/* --- IMÁGENES --- */
img {
  max-width: 100%; /* Para que no se salgan de la pantalla */
  height: auto;
  border-radius: 4px; /* Bordes ligeramente redondeados */
  margin: 20px 0;
  display: block;
}

/* --- DETALLES DE RESEÑAS MUSICALES --- */
/* Usa esto para resaltar frases o letras de canciones */
blockquote {
  border-left: 3px solid var(--color-acento);
  margin: 30px 0;
  padding-left: 20px;
  font-family: 'Lora', serif;
  font-style: italic;
  color: #6B5E55;
  background-color: #F4F1ED;
  padding: 15px;
}

/* --- PIE DE PÁGINA --- */
footer {
  text-align: center;
  margin-top: 80px;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* --- WIDGET DE MÚSICA --- */
.caja-musica {
    background-color: #FFFFFF; /* Fondo blanco para resaltar sobre el crema */
    padding: 15px;             /* Espacio interno para que no toque los bordes */
    border-radius: 12px;       /* Bordes redondeados */
    border: 1px solid #E0DCD5; /* Borde sutil */
    margin-bottom: 30px;       /* Espacio por debajo para separarlo de lo siguiente */
    text-align: center;        /* Centrar el título */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombrita muy suave "cozy" */
}

.titulo-widget {
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    color: #A67B5B;
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* --- ESTRUCTURA DE 2 COLUMNAS --- */
.layout-principal {
    display: flex;       /* Activa las columnas */
    gap: 40px;           /* Espacio entre el texto y la barra lateral */
    max-width: 900px;    /* Ancho máximo del sitio */
    margin: 0 auto;      /* Centrado */
    padding: 20px;
}

.columna-izquierda {
    flex: 3; /* El contenido ocupa más espacio */
}

aside 

    flex: 1;
    min-width: 250px;
    
    /* ESTO ES LO NUEVO: Hace que toda la columna te siga al bajar */
    position: sticky;
    top: 20px; 
    height: fit-content;

/* --- WIDGET DE MÚSICA --- */
.caja-musica {
    background-color: #FFFFFF;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #E0DCD5;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    
}

.titulo-widget {
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    color: #A67B5B;
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .layout-principal { flex-direction: column; }
}
/* --- BOTONES DE REDES SOCIALES --- */
.lista-social {
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
    margin: 0;
}

.lista-social li {
    margin-bottom: 10px; /* Espacio entre botones */
}

.btn-social {
    display: block; /* Ocupa todo el ancho */
    background-color: #F9F7F2; /* Fondo crema suave */
    color: #A67B5B; /* Texto color café */
    padding: 10px;
    border-radius: 8px; /* Bordes redondeados */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease; /* Transición suave */
    border: 1px solid transparent;
}

.btn-social:hover {
    background-color: #A67B5B; /* Se vuelve café al pasar el mouse */
    color: #FFFFFF; /* Letra blanca */
    cursor: pointer;
}
@keyframes entradaSuave {
  from {
    opacity: 0;
    transform: translateY(20px); /* Empieza un poco más abajo */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* Termina en su sitio */
  }
}
/* --- ANIMACIÓN DE LA TACITA DE CAFÉ --- */
@keyframes flotar-suave {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(10deg); } /* Sube un poco y se inclina */
    100% { transform: translateY(0) rotate(0deg); }
}

.icono-cafe {
    display: inline-block; /* OJO: Esto es obligatorio para que se mueva */
    animation: flotar-suave 3s ease-in-out infinite; /* Se mueve para siempre */
    cursor: default; /* El cursor sigue normal */
}
/* --- EFECTO VINILO GIRATORIO --- */

/* 1. Definimos la animación (el giro completo) */
@keyframes girar-vinilo {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 2. Creamos la clase para la imagen */
.vinilo-destacado {
    /* FORMA: Círculo perfecto */
    border-radius: 50%;
    /* Truco PRO: Asegura que sea cuadrado/redondo aunque la foto original sea rectangular */
    aspect-ratio: 1 / 1; 
    object-fit: cover;

    /* ESTÉTICA VINILO */
    /* Un borde gris oscuro grueso para parecer el borde del disco */
    border: 6px solid #2A2A2A; 
    /* Una sombra suave para que parezca que flota un poquito */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);

    /* ANIMACIÓN */
    /* Nombre | Duración (10s es lento y relajado) | Tipo de movimiento (lineal es constante) | Repetición */
    animation: girar-vinilo 10s linear infinite;
}

/* 3. BONUS INTERACTIVO: Si pasas el mouse, el disco se frena */
.vinilo-destacado:hover {
    animation-play-state: paused;
    cursor: grab; /* Cambia el cursor a una manito agarrando */
}
body {
    /* Color de fondo base (crema muy suave) */
    background-color: #FDFBF7;
    
    /* El patrón de puntitos generado por código */
    background-image: radial-gradient(#D6CFC7 1px, transparent 1px);
    background-size: 25px 25px; /* Distancia entre puntos */
    
    /* El resto de tus configuraciones que ya tenías... */
    font-family: 'Inter', sans-serif;
    color: #4A403A;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    animation: entradaSuave 1.2s ease-out; /* Si pusiste la animación de entrada */
}
/* --- SELECCIÓN DE TEXTO PERSONALIZADA --- */
::selection {
    background: #A67B5B; /* Fondo café al seleccionar */
    color: #FFFFFF;      /* Letras blancas */
}

/* Para navegadores Firefox */
::-moz-selection {
    background: #A67B5B;
    color: #FFFFFF;
}
/* --- PANTALLA DE BIENVENIDA --- */
/* --- PANTALLA DE BIENVENIDA (SPLASH SCREEN) --- */
#pantalla-intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    
    /* Fondo con puntitos */
    background-color: #FDFBF7;
    background-image: radial-gradient(#D6CFC7 1px, transparent 1px);
    background-size: 25px 25px;
    
    /* Centrado general */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Transición de salida */
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

#pantalla-intro.cerrado {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- AJUSTES NUEVOS DE TAMAÑO Y CENTRADO --- */

/* 1. Contenedor interno para asegurar alineación vertical */
.contenido-intro {
    display: flex;
    flex-direction: column; /* Pone uno encima del otro */
    align-items: center;    /* Centra horizontalmente */
    text-align: center;     /* Asegura que el texto esté centrado */
    width: 100%;
}

/* 2. La Imagen (Vinilo/Ilustración) */
.imagen-giratoria-intro {
    /* TAMAÑO: Aquí controlas qué tan grande se ve */
    max-width: 480px;  
    width: 90%; /* Esto evita que se corte en celulares */
    height: auto;
    
    margin-bottom: 30px; /* Espacio entre imagen y texto */
    
    /* Animación */
    animation: girar-vinilo 60s linear infinite;
}

/* 3. El Botón de Texto */
#boton-entrar {
    font-family: 'Lora', serif;
    font-size: 1.3rem; /* Lo hice un poquito más grande también */
    color: #A67B5B; 
    cursor: pointer;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 10px 20px;
    border-bottom: 1px dotted transparent; /* Truco para que no brinque al pasar el mouse */
    transition: all 0.3s ease;
}

#boton-entrar:hover {
    letter-spacing: 5px; 
    color: #4A403A;
    border-bottom: 1px dotted #A67B5B;
}