:root{
  --bg:#0b0b12;
  --bg-soft:#111120;
  --primary:#A855F7;
  --accent:#22d3ee;
  --text:#e6e6f0;
  --muted:#a3a3b2;
  --card: #131328;
  --glow: 0 0 20px rgba(168,85,247,.45), 0 0 40px rgba(34,211,238,.25);
}

html, body { height: 100%; }
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';
  background: #0a090f;
  color: var(--text);
  overflow-x: hidden;
}

/* --- Estilo de la Imagen en la Galería --- */

/* Hace que el enlace ocupe todo el espacio y que el cursor cambie */
.col-md-4 a {
    display: block;
    cursor: pointer;
}

/* Estilo base de la imagen */
.gallery-img {
    border-radius: 1rem;
    object-fit: cover;
    aspect-ratio: 16/10;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Efecto Hover: se agranda un poco al pasar el mouse */
.col-md-4 a:hover .gallery-img {
    transform: scale(1.03);
    filter: brightness(1.1);
}


/*descripcion*/
.con-d{
  width: auto;
  height: auto;
}
/* Navbar */
.navbar{ transition: background-color .25s ease, box-shadow .25s ease; }
.navbar-scrolled{
  background: rgba(11,11,18,.75) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.navbar-brand{ font-weight: 800; letter-spacing:.5px; }
.nav-link{ color: var(--text) !important; opacity:.85 }
.nav-link:hover{ color: white !important; opacity:1 }

/*log*/

.log{
  width: 179px;
  height: 97px;
  background: url("images/log.png") top center no-repeat;
}

/* Hero */
.hero{
  position: relative;
  min-height: 2050px;
  display: flex; align-items: self-start; justify-content: center;
  padding-top: 300px;
  background: url("images/bg_01_02-min.jpg") top center no-repeat;
  background-size: cover;
}
.hero .badge{ background: rgba(168,85,247,.15); border:1px solid rgba(168,85,247,.5); }
.hero-title{
  font-size: clamp(2.2rem, 4vw + 1rem, 5rem);
  line-height: 1.05;
  text-shadow: 0 6px 30px rgba(0,0,0,.55);
}
.neon{ color: var(--primary); text-shadow: var(--glow); }

.btn-neon{
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border: 0; color:#0b0b12; font-weight:700;
  box-shadow: 0 10px 25px rgba(168,85,247,.35);
}
.btn-neon:hover{ filter: brightness(1.05) contrast(1.05); box-shadow: 0 16px 35px rgba(168,85,247,.55); }


/* Social buttons row (Hero) */
.social-row { margin-top: .25rem; }

.social-btn{
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;

  /* fondo igual al botón neon */
  background: linear-gradient(90deg, var(--primary), var(--accent));

  /* icono en blanco */
  color: #ffffff;

  text-decoration: none;
  box-shadow: 0 10px 25px rgba(168,85,247,.25);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.social-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05) contrast(1.05);
  box-shadow: 0 16px 35px rgba(168,85,247,.45);
}

.social-btn:focus-visible{
  outline: 3px solid rgba(34,211,238,.6);
  outline-offset: 3px;
}

.social-btn svg{
  width: 40px;   /* más grande */
  height: 40px;  /* más grande */
  display: block;
}





/*down-log*/
#down-log{
  position: relative;
  min-height: 870px;
  display: flex; align-items: center; justify-content: center;
  background:url("images/bg_02.jpg") no-repeat;
  background-size: cover;
  background-position: top center;
}
/* Sections */
section { padding: 5rem 0; }
.section-title{ font-weight:800; letter-spacing:.5px; }
.section-sub{ color:var(--muted); }

/*---music---*/
#music{
  background: url("images/bg_05-min.jpg") top center no-repeat;
  background-size: contain;
}
/*---press---*/
#press{
  background: url("images/bg_06-min.jpg") top center no-repeat;
  background-size: cover;
  min-height: 700px;
}
/* Cards & form */
.card{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); border: 1px solid rgba(168,85,247,.15); }
.card:hover{ border-color: rgba(168,85,247,.35); box-shadow: 0 12px 28px rgba(0,0,0,.35), var(--glow); transform: translateY(-3px); }
.card, .btn, .form-control, .form-select { border-radius: 1rem; }

/* Tour pills */
.tour-tag{ background: rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.45); color:#8be9f4; padding:.25rem .6rem; border-radius: 999px; font-size:.8rem; }

/* Gallery */
.gallery-img{ border-radius:1rem; object-fit: cover; height: 320px; width: 100%; }
.fly-img{ border-radius:1rem; object-fit: cover; height: 700px; width: 100%; }

/* Press */
.press-logos .press-logo{
  min-width: 110px; min-height: 70px;
  display:flex; align-items:center; justify-content:center;
  padding: .75rem 1rem;
  border-radius: 1rem;
  border: 1px dashed rgba(168,85,247,.35);
  color:#cfd3ff;
  background: rgba(168,85,247,.06);
  text-align:center;
  font-weight: 700;
  letter-spacing: .4px;
  line-height:1.1;
}

/*brake*/

.brake{
  width: 100%;
  height: 20px;
  margin: 0 auto;
  padding: 0;
  border: 0;
}

/* Footer */
footer{ background: #0d0d16; }

/* Scroll to top */
#toTop{
  position: fixed; 
  right: 1rem; 
  bottom: 1rem; 
  z-index: 9999; 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity .25s ease, background-color .3s ease, transform .3s ease; /* Añadimos transiciones para el color y el transform */

  /* Estilos para el botón morado y el icono blanco */
  background-color: #8A2BE2; /* Un tono de morado (Blue Violet) */
  color: #FFFFFF; /* Color de texto blanco para el icono SVG */
  border: none; /* Quitamos el borde si no lo quieres */
  border-radius: 50%; /* Hace el botón circular */
  padding: 0.8rem 1rem; /* Ajusta el padding para que el círculo se vea bien */
  display: flex; /* Para centrar el SVG */
  align-items: center; /* Centrado vertical */
  justify-content: center; /* Centrado horizontal */
  width: 3.5rem; /* Ancho fijo para el círculo */
  height: 3.5rem; /* Alto fijo para el círculo */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para darle profundidad */
}

#toTop.show{ 
  opacity: 1; 
  pointer-events: auto; 
}

/* Estilo para el SVG dentro del botón */
#toTop svg {
  width: 1.5rem; /* Tamaño del icono SVG */
  height: 1.5rem;
  /* fill: currentColor; ya lo tienes en el SVG, pero lo repito aquí para claridad */
  fill: currentColor; 
}

/* Efecto hover (opcional): Ligeramente más claro y con un pequeño levantamiento */
#toTop:hover {
    background-color: #9370DB; /* Un morado un poco más claro al pasar el mouse */
    transform: translateY(-3px); /* Se "levanta" un poco */
}

/* Decorative pulse */
.pulse{ position: relative; display:inline-block; }
.pulse::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-12px; width:60px; height:4px; border-radius:999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  filter: drop-shadow(0 0 10px rgba(168,85,247,.55));
  animation: pulseLine 2.6s ease-in-out infinite;
}
@keyframes pulseLine{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* Small screens tweaks */
@media (max-width: 576px){
  .gallery-img{ height: 220px; }
}