/*---------------------------------------
  BUTTONS
  Botones reutilizables en todo el sitio.
-----------------------------------------*/
.custom-btn {
    background: var(--custom-btn-bg-color);
    border: 2px solid transparent;
    border-radius: var(--border-radius-large);
    color: var(--white-color);
    font-size: var(--btn-font-size);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    line-height: normal;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    padding: 12px 24px;
    box-shadow: 0 8px 20px rgba(238, 80, 7, 0.28);
}

.custom-btn:hover,
.custom-btn:focus-visible {
    background: var(--custom-btn-bg-hover-color);
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(238, 80, 7, 0.4);
}

.custom-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(238, 80, 7, 0.3);
}

.custom-btn i {
    margin-right: 0.4rem;
}

/* Botón de WhatsApp (reservar / contactar) */
.custom-btn-whatsapp {
    background: #25D366;
    border: 2px solid transparent;
    border-radius: var(--border-radius-large);
    color: var(--white-color);
    font-size: var(--btn-font-size);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    line-height: normal;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    padding: 12px 24px;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.28);
}

.custom-btn-whatsapp:hover,
.custom-btn-whatsapp:focus-visible {
    background: #1da851;
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(37, 211, 102, 0.4);
}

.custom-btn-whatsapp:active {
    transform: translateY(0);
}

/* Botón transparente con borde blanco, para fondos oscuros/imágenes */
.custom-btn-transparent {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--border-radius-large);
    color: var(--white-color);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    line-height: normal;
    transition: all var(--transition-fast);
    padding: 10px 20px;
}

.custom-btn-transparent:hover,
.custom-btn-transparent:focus-visible {
    background: var(--custom-btn-bg-color);
    color: var(--white-color);
    border-color: var(--custom-btn-bg-color);
    transform: translateY(-2px);
}

/* Botón con borde de color, fondo transparente */
.custom-border-btn {
    background: transparent;
    border: 2px solid var(--custom-btn-bg-color);
    color: var(--custom-btn-bg-color);
}

.navbar-expand-lg .navbar-nav .nav-link.custom-btn:hover,
.custom-border-btn:hover {
    background: var(--custom-btn-bg-hover-color);
    border-color: transparent;
    color: var(--white-color);
}

.custom-btn-bg-white {
    border-color: var(--white-color);
    color: var(--white-color);
}