/* Variables de Color */
:root {
  --oro: #d4af37;
  --oscuro: #121212;
  --gris: #1e1e1e;
  --blanco: #ffffff;
}

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

body {
  font-family: "Montserrat", sans-serif;
  background-color: var(--oscuro);
  color: var(--blanco);
  line-height: 1.6;
}

section {
  padding-inline: 3rem;
  margin-top: 3rem;
  padding-top: 10rem;
  margin-top: -5rem;
}
.boton-arriba {
  /* Posicionamiento en pantalla */
  position: fixed;
  bottom: 20px;
  right: 20px;

  /* Tamaño del botón */
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Lo hace circular */

  /* CENTRADO PERFECTO DEL ICONO */
  display: flex; /* Activa Flexbox */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */

  /* Estética */
  background-color: var(--gris);
  text-decoration: none;
  font-size: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Efecto al pasar el ratón */
.boton-arriba:hover {
  background-color: var(--oro);
  transform: translateY(-5px); /* Pequeño salto hacia arriba */
}

/* Navegación */
header {
  padding: 50px 5%;
  position: absolute;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 1000;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav ul {
  display: flex;
  list-style: none;
}
nav ul li a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
  font-size: 0.9rem;
}
nav ul li a:hover {
  color: #d4af37;
  transition: .4s ease;
}
.logo-container {
  display: flex;
  align-items: center;
  gap: 12px; /* Espacio entre el logo y el texto */
}

.nav-logo {
  height: 150px; /* Ajusta el tamaño de tu logo aquí */
  width: auto;
  filter: brightness(0) invert(1); /* Opcional: vuelve blanco un logo negro para que resalte en el fondo oscuro */
}

.logo-text {
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 1.2rem;
}

.fab{
  font-size: 24px;
}

.fa-facebook{
  color: blue;
}

.fa-youtube{
  color: red;
}
.fa-instagram{
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.fab:hover{
  transform: scale(1.2);
  transition: .4s ease;
}


/* Hero con Imagen de Fondo */
.hero {
  height: 100vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
    url("img/cesar\ tenerife\ copy.jpg");

  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero h1 {
  font-family: "Playfair Display", serif;
  font-size: 3.5rem;
}
.accent {
  color: var(--oro);
}
.hero-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 25px;
}

.btn-outline {
  background: transparent !important;
  border: 2px solid var(--oro);
  color: var(--oro) !important;
}

.btn-outline:hover {
  background: var(--oro) !important;
  color: black !important;
}

.bio-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--oro);
  text-decoration: underline;
  font-weight: 600;
}

/* Suavizar el desplazamiento al hacer clic en los enlaces */
html {
  scroll-behavior: smooth;
}

.btn {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 35px;
  background: var(--oro);
  color: black;
  text-decoration: none;
  font-weight: 600;
  border-radius: 50px;
  transition: 0.3s;
}

/* Reproductor Estilizado */
.container {
  padding: 80px 10%;
  text-align: center;
}

.audio-card {
  background: var(--gris);
  padding: 40px;
  border-radius: 20px;
  max-width: 500px;
  margin: 40px auto;
  border: 1px solid #333;
}

audio {
  width: 100%;
  margin-top: 20px;
  filter: invert(100%); /* Hace que el reproductor se vea blanco/plata */
}

/* Grid de Repertorio */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
}
.card {
  background: var(--gris);
  padding: 25px;
  border-radius: 10px;
  border-left: 4px solid var(--oro);
}
.tag {
  color: var(--oro);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Contenedor de la cuadrícula de videos */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

/* Truco para que el video sea responsivo (proporción 16:9) */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Efecto al pasar el mouse por el video */
.video-container:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

footer {
  padding: 40px;
  color: #555;
  font-size: 0.8rem;
  text-align: center;
}

.iframe{
  width: 100%;
  height: 500px;
}



/* --- AJUSTES RESPONSIVOS --- */

@media (max-width: 768px) {
  /* 1. Menú de Navegación */
  nav {
    flex-direction: column; /* Logo arriba, enlaces abajo */
    gap: 15px;
  }

  nav ul {
    padding: 0;
    justify-content: center;
    width: 100%;
  }

  nav ul li a {
    margin: 0 10px;
    font-size: 0.8rem;
  }

 

  /* 2. Sección Hero (Portada) */
  .hero h1 {
    font-size: 2.2rem; /* Texto más pequeño para que no se corte */
    padding: 0 10px;
  }

  .hero-buttons {
    flex-direction: column; /* Botones uno sobre otro */
    align-items: center;
  }

  .btn {
    width: 80%; /* Botones más anchos para tocar fácil con el dedo */
    text-align: center;
  }

  /* 3. Cuadrículas (Grid) */
  .grid,
  .video-grid {
    grid-template-columns: 1fr; /* Una sola columna en móvil */
    gap: 15px;
  }

  /* 4. Espaciado General */
  .container {
    padding: 40px 5%; /* Menos margen lateral en móvil */
  }

  .audio-card {
    padding: 20px;
    width: 100%;
  }

  .logo-text {
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 1rem;
}

header {
  padding: 50px 5%;
  position: absolute;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 1000;
}

}