/* Reset y base */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: Arial, sans-serif; 
}

html {
  scroll-behavior: smooth;
}

body { 
  background-color: #0a0906; /* color base */ 
  color: #fff; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%23d62828' fill-opacity='0.14' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E"); 
  background-repeat: repeat; 
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: rgba(0, 0, 0, 0.85);
  position: sticky;  /* cambia de relative a sticky */
  top: 0;            /* se pega al top */
  z-index: 1000;
}

header.sticky {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo h1 { 
  color: #ffffff; 
  font-size: 28px; 
}

.logo-img { 
  width: 40px; 
  height: 40px; 
  object-fit: contain; 
}

/* Enlaces del menú */
nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: color 0.3s;
}

nav ul li a:hover { 
  color: #e63946; 
}

/* Hamburguesa */
.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
  transition: transform 0.3s;
}

/* Responsivo */
@media (max-width: 768px) {
  nav ul {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 250px;
    background-color: #1a1a1a;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transition: right 0.5s ease;
  }

  nav ul li {
    opacity: 0;
    transform: translateX(50px);
    transition: transform 0.5s ease, opacity 0.5s ease;
  }

  nav ul.active {
    right: 0;
  }

  nav ul.active li {
    opacity: 1;
    transform: translateX(0);
  }

  .hamburger { 
    display: block; 
  }

  .hamburger.open { 
    transform: rotate(90deg); 
  }
}

/* Línea debajo del menú */
hr { 
  border: none; 
  height: 5px; 
  background-color: #e63946; 
  margin: 0; 
}

/* Fuente moderna */
body {
  font-family: 'Poppins', Arial, sans-serif;
}







/* --- Hero Beats Destacados (robusto y sin conflictos) --- */
.beats-hero {
  box-sizing: border-box;
  position: relative;           /* crea contexto para z-index */
  padding: 60px 20px 30px;
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgba(20,20,20,0.95) 100%);
  color: var(--color-texto, #bb2929);
  overflow: visible;
}

/* Inner con max-width para que el texto siempre quede dentro del hero */
.beats-hero-inner {
  max-width: 1100px;            /* mismo ancho que tu swiper para coherencia */
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 3;                   /* aseguramos que el texto esté encima */
  padding: 0 14px;
}

/* Título y texto */
.beats-hero h2 {
  font-size: clamp(28px, 4vw, 36px);
  margin: 0 0 12px;
  color: var(--color-primario, #e63946);
  line-height: 1.05;
}

.beats-hero p {
  margin: 0 auto 18px;
  max-width: 800px;
  color: #cfcfcf;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.5;
}

/* Botón */
.btn-hero {
  display: inline-block;
  padding: 10px 22px;
  background: var(--color-primario, #e63946);
  color: var(--color-texto, #fff);
  border-radius: 26px;
  text-decoration: none;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease;
}
.btn-hero:hover {
  transform: translateY(-3px);
  background: var(--color-primario-hover, #ff4d5a);
}

/* Asegura separación entre hero y carrusel (evita solapamiento visual) */
.beats-carousel {
  margin-top: 6px; /* pequeño espacio. Cambia a 0 si quieres más pegado */
}

/* DEBUG (temporal): si todavía no ves el texto, quita el comentario para detectar caja del hero
.beats-hero { outline: 2px dashed lime; }
*/




/* CARRUSEL

/* contenedor de sección (tu fondo se mantiene si está en .beats o .beats-carousel) */
.beats-carousel {
  padding: 40px 20px;
  background-color: rgba(20,20,20,0.95); /* o lo que uses */
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* Swiper principal centrado y con ancho máximo (no lo hagas demasiado pequeño en desktop) */
.mySwiper {
  width: 100%;
  max-width: 1100px;      /* mantén grande en desktop */
  box-sizing: border-box;
  margin: 0 auto;
  overflow: visible;      /* Swiper gestiona el overflow */
}

/* Aseguramos que el wrapper centre verticalmente slides si hiciera falta */
.mySwiper .swiper-wrapper {
  display: flex;
  align-items: center;
}

/* Cada slide se centra y no fuerza ancho fijo */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* Link que envuelve cada slide (para click) */
.slide-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 0 8px; /* pequeño padding interior para que no pegue a los bordes */
}

/* Imagen: controla altura máxima para evitar estirones verticales en móvil */
.swiper-slide img {
  width: 100%;
  max-width: 900px;      /* tamaño grande en desktop */
  height: auto;
  max-height: 60vh;      /* evita imágenes gigantes verticales en móvil */
  object-fit: cover;
  border-radius: 14px;
  display: block;
  transition: transform 0.35s ease;
}

/* Contenedor que define el "frame" visible de la imagen */
.img-wrap {
  width: 100%;
  max-width: 900px;   /* tamaño grande en desktop (ajusta si quieres) */
  height: 60vh;       /* controla la altura visual del frame (evita imágenes gigantes) */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;   /* evita overflow si la imagen es mayor */
  box-sizing: border-box;
}

/* La imagen dentro se escala para caber COMPLETA dentro del frame */
.img-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain; /* garantiza que no se recorta */
}

/* Si quieres zoom al hover en desktop */
@media (hover: hover) {
  .swiper-slide:hover img { transform: scale(1.03); }
}

/* Texto debajo de la imagen, centrado */
.beat-info {
  margin-top: 14px;
  text-align: center;
}

.beat-info h2 {
  color: #e63946;
  font-size: 22px;
  margin: 0 0 6px;
}

.beat-info p {
  color: #fff;
  font-size: 14px;
  margin: 0;
}

/* Paginación y flechas: asegúrate que estén encima */
.swiper-button-next, .swiper-button-prev {
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.swiper-pagination-bullet { background: rgba(255,255,255,0.7); }

/* ===== Ajustes responsivos ===== */

/* En pantallas pequeñas: no tocar max-width del contenedor, solo controlar la img */
@media (max-width: 768px) {
  .img-wrap {
    max-width: 95%;
    height: 48vh; /* menor altura para móviles */
  }
}

/* Si ves algún desbordamiento horizontal, fuerza que body y principales sean box-sizing border-box */
html,body, .beats-carousel, .mySwiper { box-sizing: border-box; }



/*BEATS*/

.beats {
  padding: 60px 20px;
  background-color: rgba(20, 20, 20, 0.95);
  text-align: center;
}

.section-title {
  font-size: 26px;
  margin-bottom: 30px;
  color: #e63946;
}

/* Grid */
.beats .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card */
.beat-card {
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, opacity 0.5s, max-height 0.5s ease;
  opacity: 1;
  max-height: 400px;
}

.beat-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.beat-card h3 {
  padding: 12px;
  color: #fff;
  font-size: 18px;
}

.beat-card:hover {
  transform: translateY(-8px);
}

/* Estado oculto con animación */
.hidden {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Botón */
#toggleBeats {
  margin-top: 30px;
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  background: #e63946;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

#toggleBeats:hover {
  background: #ff4d5a;
}

/* Responsivo */
@media (max-width: 992px) {
  .beats .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .beats .container {
    grid-template-columns: 1fr;
  }
}