html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #0e0e0e;
  color: #f8f9fa;
  overflow-y: scroll;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #c89f3d; border-radius: 10px; }
::-webkit-scrollbar-track { background: #1a1a1a; }

.navbar { background-color: rgba(0, 0, 0, 0.9); 
box-shadow: 0 4px 6px rgba(0,0,0,0.4);
backdrop-filter: blur(5px);}
.navbar-brand { font-weight: 700; color: #c89f3d !important; font-size: 1.4rem; }
.nav-link { color: #f8f9fa !important; margin-right: 1rem; }
.nav-link:hover { color: #c89f3d !important; }
.navbar-brand .logo {
  height: 35px;        /* Tamaño base del logo */
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease-in-out;
}

/* Efecto hover sutil */
.navbar-brand:hover .logo {
  transform: scale(1.05);
}

/* Ajuste responsivo */
@media (max-width: 768px) {
  .navbar-brand .logo {
    height: 28px; /* un poco más pequeño en móviles */
  }
}
.hero {
  background: url('../imagenes/fondo-bar.jpeg') center center/cover no-repeat;;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.hero-content {
  position: relative;
  z-index: 1;
}
.hero h1 { font-size: 3rem; font-weight: 700; }
.hero p { font-size: 1.2rem; }

.cocktail-card {
  background-color: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  transition: transform 0.3s ease;
}
.cocktail-card:hover { transform: scale(1.03); }
.cocktail-card img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.cocktail-card h5 { color: #c89f3d; font-weight: 600; }

footer {
  background-color: #000;
  padding: 2rem 0;
  text-align: center;
}
footer a {
  color: #c89f3d;
  margin: 0 10px;
  text-decoration: none;
  font-size: 1.3rem;
}
footer a:hover { color: #fff; }

.form-control, .form-select {
  background-color: #1a1a1a;
  color: #fff;
  border: 1px solid #444;
}
.form-control:focus, .form-select:focus {
  border-color: #c89f3d;
  box-shadow: none;
}
.btn-gold {
  background-color: #c89f3d;
  color: #000;
  font-weight: 600;
}
.btn-gold:hover {
  background-color: #e4b64f;
  color: #000;
}

.hero-content h1 {
  animation: fadeInDown 1.5s ease;
}

.hero-content p {
  animation: fadeInUp 2s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(200,159,61)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.menu-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #111;
  color: #fff;
}

.menu-section h2 {
  font-size: 2rem;
  margin-bottom: 40px;
  font-weight: 600;
  color: #f4b400;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  justify-items: center;
}

.trago {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.trago:hover {
  transform: scale(1.03);
}

.trago img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 15px;
}

/* Descripción oculta */
.descripcion {
  max-height: 0;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 0 20px;
  border-radius: 0 0 15px 15px;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

/* Descripción visible */
.trago.activo .descripcion {
  max-height: 200px;
  padding: 20px;
}

.descripcion h3 {
  color: #f4b400;
  margin-bottom: 10px;
}

.descripcion p {
  font-size: 0.95rem;
  line-height: 1.5;
}