@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body{
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  position: relative;
}
html, body {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

.container, .container-fluid, .row {
  overflow-x: clip;
  padding: 0;
}

.fb{
  width: 42px;
  color: #ffff;
}

/* ------------------------- Banner ------------------------- */
.banner-title{
  color: var(--#f8fafa);
  font-weight: 800; 
  line-height: 1.1; 
  letter-spacing: .3px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  margin: 0;
}

/* ======================= BANNER ======================= */
.banner {
  position: relative;
  display: grid;
  align-items: center;
  /* Altura base en desktop */
  min-height: 70vh;
  padding-top: 90px; /* para que no choque con el navbar fixed-top */
  padding-bottom: 90px;
  width: 100%;
  overflow: clip; /* evita rebases de la imagen al hacer zoom/rotate */
}

/* Imagen del banner a pantalla completa */
.banner-img {
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorte proporcional, sin distorsión */
  object-position: center center;
  z-index: -1; /* queda detrás del contenido del header */
  filter: brightness(0.65);
}

.banner-middle {
  position: relative;
  min-height: 60vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

/* 🔥 Simula background-attachment: fixed */
.banner-middle::before {
  content: "";
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("../imagenes/vinilos-splatter-banner.png");
  background-size: cover;
  background-position: center;
  filter: brightness(.65);
  z-index: -1; /* detrás del contenido */
}

/* ------------------------- Botones ------------------------- */
.btn-music, .btn-banner{
  padding: 15px 30px;
  background-color: #000;
  border-color: #000;
  color: #f8fafa;
}
.btn-music:hover{
  background-color: transparent;
  color: rgb(0, 0, 0);
  border: 2px solid #0a0a0a;
  font-weight: bold;
}
.btn-banner:hover{
  background-color: #f8fafa;
  color: rgb(0, 0, 0);
  border: 2px solid #0a0a0a;
}

/* ------------------------- Logo ------------------------- */
/* evitar width % y usar altura fija */
.logo1{
  height: 40px;
  width: auto;
}
@media (min-width: 992px) {
  .logo1 {
    height: 48px;
  }
}

/* ======================= NAV (original base) ======================= */
/* Cambia el background del menu al hacerle scroll */
.menu-white {
  background-color:rgba(15, 15, 15, 0.918);
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.678);
}

/************** MENU NAV **************/
.navbar{
  color: #000;
  letter-spacing: 2px;
  font-size: 15px;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
/* Navbar más compacto en desktop */
@media (min-width: 992px) {
  .navbar {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
  .navbar .nav-link,
  .optmenu {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    line-height: 1.2;
  }
}
/* Alinear toggler a la derecha */
.navbar .navbar-toggler{
  margin-left: auto !important;
}
/* Menú a la derecha en desktop */
@media (min-width: 992px) {
  .navbar-nav {
    margin-left: auto;
  }
}
.optmenu{
  font-size: 17px;
  transition: all 1s solid;
  color: #fff;
}
.optmenu:hover{
  color: rgb(11, 11, 11);
  background-color: #f8fafa;
  text-decoration: none;
  font-weight: bold;
}

/* ======================= HAMBURGUESA ======================= */
.navbar-toggler{
  background-color: #101111;
  border: 3px solid #fff;
}
.navbar-nav li a {
  text-decoration: none;
  font-size: 16px;
}
.nav-item img{
  height: 1.25rem;
  margin-top: 0;
}
.custom-toggler.navbar-toggler{
  border-color: #fff;
}
/* 3 líneas */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* ======================= SCROLL TOP ====================== */
.goto-top {
  position: fixed;
  bottom: 30px;
  right: 20px; /*para que el boton de scrolltop se ponga del lado derecho*/
  width: 50px;
  height: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.goto-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ------------------------- Sección Nosotros ------------------------- */
.fondo-nosotros{
  background-color:rgba(201, 194, 186, 0.304);
  padding: 25px;
}

/* ------------------------- Iconos ------------------------- */
.icons1{
  width: 15%;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------- Links / Footer ------------------------- */
a{
  text-decoration: none !important;
}
.fondo-footer{
  background-color:#000;
}
.icon-redes{
  font-size: 40px;
  color: #ffff;
}

/* ------------------------- Imagen contacto ------------------------- */
.form-contact{
  clip-path: circle();
}

/* ------------------------- Transiciones imágenes ------------------------- */
.thumb{
  display: block;
  position: relative;
  overflow: hidden; /*es para que la imagen no tape el texto al hacerle el hover con el mouse*/
}
.thumb .img-vermas{
  display: block;
  position: relative;
  overflow: hidden; /*es para que la imagen no tape el texto al hacerle el hover con el mouse*/
  transition: transform 0.8s ease; /*transicion para que la imagen se agrande al hacerle hover con el mouse*/
}
.thumb:hover .img-vermas{
  transform: scale(1.2);
}

/* ------------------------- Cards ------------------------- */
.card{
  border-radius: 8px;
  height:350px;
  width: 300px;
  padding:0;
  margin: 20px auto;
  transition-duration: 0.3s;
}
.card:hover{
  scale:1.1;
  z-index: 1000;
}

/* barra negra VER MAS */
.card-bottom{
  background-color: #050505;
  position: relative;
  color: #fff;
  font-size: 15px;
}
.card-bottom:hover .card-info{
  display: block;
  transition-duration: 0.5s;
}

/* fondo de la informacion descriptiva */
.card-info{
  background: #f8fafa;
  color: #0c0c0c;
  display: none;
  left: 0;
  overflow: hidden;
  z-index: 1000;
}

/*
.img-content:hover{
  scale:1.1;
  z-index: 1000;
}
.img-content{
  width:90%;
}
*/

/* ------------------------- Línea divisoria ------------------------- */
.linea {
  border-top: 1px solid #000;
  height: 2px;
  max-width: 200px;
  margin: 20px auto 0 auto;
}

/* ========================================================
   EFECTOS IMAGEHOVER
   ======================================================== */
/* Base para todos los efectos */
figure[class^="imghvr-"],
figure[class*=" imghvr-"] {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
}
figure[class^="imghvr-"] img,
figure[class*=" imghvr-"] img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .8s ease;
}
/* FIGCAPTION ocupa el 100% del figure */
figure[class^="imghvr-"] figcaption,
figure[class*=" imghvr-"] figcaption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  text-align: center;
  color: #fff;
  background: rgba(0,0,0,.48); /* overlay oscuro uniforme */
  transition: transform .8s ease, opacity .8s ease;
  will-change: transform, opacity;
}

/* EFECTO: imghvr-slide-down - El overlay baja cubriendo la imagen */
.imghvr-slide-down figcaption {
  transform: translateY(-100%);
  opacity: 0;
}
.imghvr-slide-down:hover figcaption {
  transform: translateY(0);
  opacity: 1;
}

/* =========================================================
   REDISEÑO NAVBAR (GLASS + COMPACTO + ACTIVO POR SECCIÓN)
   Estas reglas sobrescriben las anteriores donde aplica
   ========================================================= */

/* Variables y base del navbar */
.navbar {
  --nav-bg: rgba(15,15,15,.55);
  --nav-text: #fff;
  --nav-hover: #f8fafa;
  --nav-active: #00e5ff;          /* color del ítem activo */
  --nav-border: rgba(255,255,255,.08);

  font-size: 15.5px;
  letter-spacing: .5px;
  padding: .6rem 0;
  transition: backdrop-filter .3s ease, background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* Modo glassmorphism: aplicalo al <nav id="menu" class="navbar ... navbar-glass"> */
.navbar-glass {
  background: var(--nav-bg);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--nav-border);
}

/* Estado compacto al hacer scroll (añadido vía JS) */
.navbar.is-compact {
  background: rgba(10,10,10,.75);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  padding: .4rem 0;
  transform: translateZ(0);
}

/* Logo ligeramente más alto (mejora proporción con glass) */
.logo1 { height: 44px; width: auto; }
@media (min-width: 992px){
  .logo1 { height: 50px; }
}

/* Links del menú con subrayado animado */
.navbar .nav-link.optmenu {
  color: var(--nav-text);
  padding: .35rem .9rem;
  border-radius: 8px;
  position: relative;
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

/* Quita el fondo blanco del hover previo (más limpio sobre glass) */
.optmenu:hover{
  background-color: transparent;
  font-weight: inherit;
  text-decoration: none;
  color: var(--nav-hover);
}

/* Subrayado animado */
.navbar .nav-link.optmenu::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .2rem;
  height: 2px;
  background: transparent;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease, background-color .25s ease;
}
.navbar .nav-link.optmenu:hover::after {
  background: var(--nav-hover);
  transform: scaleX(1);
}

/* Activo por sección (marcado por JS con .is-active) */
.navbar .nav-link.optmenu.is-active {
  color: var(--nav-active);
}
.navbar .nav-link.optmenu.is-active::after {
  background: var(--nav-active);
  transform: scaleX(1);
}

/* Toggler (mobile) coherente con glass */
.navbar-toggler {
  background-color: rgba(16,17,17,.7);
  border: 2px solid #fff;
}

/* Menú colapsado móvil con blur */
@media (max-width: 991.98px){
  .navbar-collapse {
    background: rgba(10,10,10,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: .75rem;
    margin-top: .5rem;
  }
  .navbar .nav-link.optmenu {
    display: inline-block;
    margin: .15rem 0;
    padding: .45rem .85rem;
    border-radius: 6px;
  }
}

/* Compatibilidad con tu clase .menu-white si la usabas en otros scripts */
.menu-white {
  background-color: rgba(15,15,15,.82) !important;
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

/* Accesibilidad: foco visible */
.navbar .nav-link.optmenu:focus-visible {
  outline: 2px solid var(--nav-active);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Espaciados finos en desktop grande */
@media (min-width: 1200px){
  .navbar .nav-link.optmenu { padding: .35rem 1rem; }
}