:root {
  --dorado: #d4af37;
  --fondo-negro: rgba(0, 0, 0, 0.6);
  --fondo-transparente: rgba(0, 0, 0, 0.5);
  --blanco: #fff;
  --fuente-principal: 'Segoe UI', sans-serif;
  --fuente-titular: 'Montserrat', sans-serif;
}

/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fondo y tipografía */
body {
  font-family: var(--fuente-principal);
  background: url('imagenes/estudio8.png') center/cover no-repeat fixed;
  color: var(--blanco);
}

/* ================================================= */
/* === 1. ENCABEZADO (LOGO Y ESLOGAN CENTRADOS) === */
/* ================================================= */
.encabezado { 
  display: flex;
  flex-direction: column; 
  align-items: center; 
  padding: 20px 40px;
  background-color: var(--fondo-negro); 
}

.logo { 
  width: 470px; /* Tamaño de escritorio */
  max-width: 100%; 
  height: auto; 
  display: block;
  margin-bottom: 0px; 
}

.slogan { 
  font-size: 1.8rem; 
  color: var(--dorado);
  font-family: var(--fuente-titular);
  font-weight: 900;
  text-align: center;
  margin-top: -40px; 
  margin-bottom: 0;
}
/* ================================================= */

/* Estructura principal */
.contenido {
  display: flex;
  flex-wrap: wrap; 
  gap: 40px;
  padding: 40px;
  /* Alinea reproductor (izquierda) y contacto (derecha) */
  justify-content: space-between; 
}

/* ================================================= */
/* === 2. REPRODUCTOR (Compacto y Horizontal) === */
/* ================================================= */
.reproductor {
  max-width: 550px; 
  flex-grow: 1; 
}

.reproductor h2 { 
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: var(--dorado); 
  font-weight: 500;
}

/* Contenedor principal del reproductor (HORIZONTAL en ESCRITORIO y MÓVIL) */
.player { 
  display: flex; 
  align-items: center; 
  gap: 15px;
  background-color: var(--fondo-transparente);
  padding: 15px 20px; 
  border-radius: 8px;
}

.cover { 
  width: 80px; 
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
  flex-shrink: 0; 
}

/* Contenedor de la información y control de audio */
.info { 
  flex-grow: 1; 
  display: flex;
  flex-direction: column; 
  gap: 2px;
}

.titulo, .artista, .anio {
  font-size: 1.0rem; 
  color: var(--blanco);
}

.artista {
  color: var(--dorado);
  font-weight: bold;
}

audio {
  width: 100%; 
  max-width: 100%; 
  margin-top: 5px;
}

/* ================================================= */
/* === 3. CONTACTO Y REDES (Alineado a la DERECHA) === */
/* ================================================= */

.contacto { 
  max-width: 340px; 
  background-color: var(--fondo-negro);
  padding: 15px 20px;
  border-radius: 10px;
  text-align: left; 
  margin-left: auto; 
  align-self: flex-start;
}

.contacto h2 {
  font-size: 1.3rem; 
  color: var(--dorado); 
  margin-bottom: 10px;
}

.contacto p {
  font-size: 0.9rem; 
  margin: 4px 0;
  text-align: left; 
}

.contacto strong {
  color: var(--dorado); 
  font-weight: 600;
}

.contacto a {
  color: var(--blanco);
  text-decoration: none;
}

.redes { 
  display: flex;
  gap: 12px;
  padding: 10px 0 0 0; 
  margin-top: 0; 
}

.icono {
  width: 32px;
  height: 32px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  transition: transform 0.3s ease;
  display: inline-block;
}

.icono:hover {
  transform: scale(1.2);
}

.instagram {
  background-image: url('imagenes/instagram-logo4-amarillo.jpg');
}

.whatsapp {
  background-image: url('imagenes/logo_whatsapp_amarillo.jpg');
}

.x {
  background-image: url('imagenes/x-logo6-amarillo.jpg');
}

/* ================================================= */
/* === 4. MARQUESINA === */
/* ================================================= */
.marquesina { 
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: var(--fondo-negro);
  overflow: hidden;
  z-index: 997;
  border-top: 1px solid var(--dorado);
}

.titulares-scroll {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  white-space: nowrap;
  animation: scroll-titulares 120s linear infinite;
}

.titulares-scroll span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--blanco);
  height: 40px;
}

.titulares-scroll img {
  height: 20px;
  width: auto;
  vertical-align: middle;
}

@keyframes scroll-titulares {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Responsive: móviles */
@media screen and (max-width: 768px) {
  
  /* AJUSTE 1: Encabezado más compacto */
  .encabezado {
    padding: 5px 20px; 
  }
  
  /* Logo ligeramente más pequeño */
  .logo {
    width: 240px; 
    max-width: 100%;
  }
  
  /* AJUSTE 2: Subir el eslogan */
  .slogan {
    font-size: 1.2rem; 
    margin-top: -30px; 
  }
  
  .contenido {
    justify-content: center;
    flex-direction: column;
    /* Reducir padding horizontal */
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    
    /* 💥 AJUSTE CLAVE 1: Reducir el espacio entre Reproductor y Contacto */
    gap: 5px; /* Reducido de 10px */
    
    /* 💥 AJUSTE CLAVE 2: Reducir el padding inferior */
    padding-bottom: 30px; /* Reducido de 35px */
  }

  /* Limitamos el ancho del reproductor en móvil y lo centramos */
  .reproductor {
    max-width: 340px; 
    width: 100%;
    margin: 0 auto; 
    align-self: auto;
  }
  
  /* Hacemos lo mismo con el bloque de contacto para que se vea alineado */
  .contacto {
    max-width: 340px; 
    width: 100%;
    margin: 0 auto; 
    align-self: auto;
    /* AJUSTE 4: Reducir padding del contacto */
    padding: 10px 15px; 
  }

  /* Título del Reproductor */
  .reproductor h2 {
    font-size: 0.9rem; 
  }

  /* Contenedor del reproductor */
  .player {
    flex-direction: row; 
    align-items: center; 
    /* AJUSTE 5: Reducir padding del reproductor */
    padding: 8px 15px; 
  }
  
  /* Carátula */
  .cover {
    width: 60px; 
    height: 60px;
    flex-shrink: 0; 
  }

  /* Metadata del Reproductor */
  .titulo, .artista, .anio {
    font-size: 0.8rem; 
  }
  
  /* Control de Audio (ancho limitado, altura nativa) */
  audio {
    width: 100%; 
    max-width: 200px; 
    margin-top: 5px;
    align-self: center; 
  }

  /* Párrafos de Contacto */
  .contacto p {
    font-size: 0.75rem; 
  }

  /* Título de Contacto */
  .contacto h2 {
    font-size: 1.0rem; 
  }

  .redes {
    padding: 8px 0 0 0;
    justify-content: center; 
  }
  
  /* Íconos de redes sociales - MANTENEMOS EL AJUSTE A 20PX */
  .icono {
    width: 20px; 
    height: 20px;
    transition: transform 0.2s ease;
  }
  
  .icono:hover {
    transform: scale(1.1);
  }

  .marquesina {
    height: 25px; 
  }

  .titulares-scroll span {
    font-size: 0.7rem; 
    height: 25px;
  }
  
  .titulares-scroll img {
    height: 12px;
  }
}