/* Botón de Reserva Mejorado - Más Elegante e Impactante */

/* Estilo base mejorado - botón fijo en esquina */ 
.btn-reserva {   
  display: flex;   
  align-items: center;   
  justify-content: center;   
  background-color: var(--brand-yellow);
  background-image: var(--gradient-button);
  color: var(--brand-light) !important;
  font-weight: 700;   
  border-radius: 50px;   
  padding: 18px 38px;
  text-transform: uppercase;   
  letter-spacing: 1.5px;   
  font-size: 17px;
  transition: all 0.4s var(--transition-bounce);
  box-shadow: var(--box-shadow-button);
  border: none;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);   
  overflow: hidden;      
  position: fixed;   
  bottom: 30px;
  right: 30px;
  z-index: 999;   
  margin: 0;    
  animation: float 3s ease-in-out infinite;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform-origin: center;
}  

/* Efecto de borde brillante */
.btn-reserva::before {   
  content: '\f274'; /* Código para ícono de calendario */   
  font-family: 'Font Awesome 6 Free';   
  font-weight: 900;   
  font-size: 20px;
  margin-right: 12px;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.4s var(--transition-bounce);
}  

/* Efectos hover mejorados */
.btn-reserva:hover {   
  transform: translateY(-10px) scale(1.05);
  box-shadow: var(--box-shadow-button-hover);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);   
  background-image: var(--gradient-button-hover);
  animation-play-state: paused;
  letter-spacing: 1.8px;
  padding: 18px 40px;
}  

.btn-reserva:hover::before {
  transform: rotate(15deg) scale(1.2);
}

/* Efecto activo refinado */
.btn-reserva:active {   
  transform: translateY(-5px) scale(0.98);   
  box-shadow: 0 4px 10px rgba(var(--brand-yellow-rgb), 0.3), 
              0 2px 5px rgba(0, 0, 0, 0.2),
              0 0 0 2.5px rgba(255, 255, 255, 0.4) inset;
  transition: all 0.1s ease;
}  

/* Efecto de brillo deslizante mejorado */ 
.btn-reserva::after {   
  content: '';   
  position: absolute;   
  top: -10%;   
  left: -100%;   
  width: 80%;   
  height: 120%;   
  background: linear-gradient(     
    90deg,     
    rgba(255, 255, 255, 0) 0%,     
    rgba(255, 255, 255, 0.5) 50%,     
    rgba(255, 255, 255, 0) 100%   
  );   
  transform: skewX(-25deg);   
  transition: all 0.7s ease; 
  opacity: 0.6;
}  

.btn-reserva:hover::after {   
  left: 130%;   
  transition: all 0.9s ease; 
}  

/* Animación flotante mejorada con ligera rotación */ 
@keyframes float {   
  0% {     
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 10px 25px rgba(var(--brand-yellow-rgb), 0.5), 
                0 6px 10px rgba(0, 0, 0, 0.2),
                0 0 0 2.5px rgba(255, 255, 255, 0.2) inset;
  }   
  50% {     
    transform: translateY(-10px) rotate(0.5deg);
    box-shadow: 0 15px 30px rgba(var(--brand-yellow-rgb), 0.55), 
                0 8px 15px rgba(0, 0, 0, 0.15),
                0 0 0 2.5px rgba(255, 255, 255, 0.2) inset;
  }   
  100% {     
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 10px 25px rgba(var(--brand-yellow-rgb), 0.5), 
                0 6px 10px rgba(0, 0, 0, 0.2),
                0 0 0 2.5px rgba(255, 255, 255, 0.2) inset;
  } 
}  

/* Modo oscuro con más impacto */ 
body.dark-mode .btn-reserva {   
  background-image: linear-gradient(135deg, var(--brand-yellow) 0%, rgba(235, 165, 0, 0.85) 100%);
  box-shadow: 0 10px 25px rgba(var(--brand-yellow-rgb), 0.7), 
              0 6px 12px rgba(0, 0, 0, 0.35),
              0 0 0 2.5px rgba(255, 255, 255, 0.15) inset;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}  

body.dark-mode .btn-reserva:hover {   
  box-shadow: 0 15px 35px rgba(var(--brand-yellow-rgb), 0.8), 
              0 8px 20px rgba(0, 0, 0, 0.4),
              0 0 0 2.5px rgba(255, 255, 255, 0.3) inset;
  background-image: var(--gradient-button-hover);
}  

/* Nuevo efecto de pulsación para mayor atención */
.btn-reserva::before {
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Efecto especial en hover para detener la pulsación */
.btn-reserva:hover::before {
  animation: none;
  transform: rotate(15deg) scale(1.2);
}

/* Ajustes responsivos manteniendo el impacto */ 
@media (max-width: 992px) {   
  .btn-reserva {
    padding: 15px 30px;
    font-size: 16px;
    bottom: 25px;
    right: 25px;
    letter-spacing: 1.2px;
  }
  
  .btn-reserva::before {
    font-size: 18px;
    margin-right: 10px;
  }
  
  .btn-reserva:hover {
    padding: 15px 32px;
  }
  
  /* Ajuste de la animación para pantallas medianas */
  @keyframes float {   
    0% { transform: translateY(0); }   
    50% { transform: translateY(-8px); }   
    100% { transform: translateY(0); } 
  }
  
  /* Mejor integración con menú móvil */
  .mobile-menu-items .menu-item.reserva-item .menu-circle {     
    background-color: var(--brand-yellow);
    background-image: var(--gradient-accent);
    box-shadow: 0 6px 16px rgba(var(--brand-yellow-rgb), 0.5), 
                0 3px 8px rgba(0, 0, 0, 0.2),
                0 0 0 2px rgba(255, 255, 255, 0.15) inset;
  }      
  
  .mobile-menu-items .menu-item.reserva-item:hover .menu-circle {     
    background-color: var(--brand-coral);
    background-image: var(--gradient-coral);
    transform: scale(1.15);
    box-shadow: 0 8px 20px rgba(var(--brand-coral-rgb), 0.4), 
                0 4px 10px rgba(0, 0, 0, 0.25),
                0 0 0 2px rgba(255, 255, 255, 0.25) inset;
  } 
}  

/* Ajustes para pantallas medianas */ 
@media (max-width: 768px) {   
  .btn-reserva {     
    padding: 12px 25px;     
    font-size: 15px;
    bottom: 20px;
    right: 20px;
    letter-spacing: 1px;
  }      
  
  .btn-reserva::before {     
    font-size: 16px;     
    margin-right: 8px;   
  }
  
  .btn-reserva:hover {
    padding: 12px 27px;
    transform: translateY(-7px) scale(1.03);
  }
  
  @keyframes float {   
    0% {transform: translateY(0);}   
    50% {transform: translateY(-6px);}   
    100% {transform: translateY(0);} 
  }
}  

/* Para pantallas muy pequeñas */ 
@media (max-width: 480px) {   
  .btn-reserva {     
    bottom: 15px;     
    right: 15px;     
    padding: 10px 20px;     
    font-size: 14px;
    letter-spacing: 0.8px;
    border-radius: 40px;
  }      
  
  .btn-reserva::before {     
    font-size: 15px;     
    margin-right: 6px;   
  }
  
  .btn-reserva:hover {
    padding: 10px 22px;
    transform: translateY(-5px) scale(1.02);
  }
  
  @keyframes float {   
    0% {transform: translateY(0);}   
    50% {transform: translateY(-4px);}   
    100% {transform: translateY(0);} 
  }
}