/* Global Styles for Restaurante Alberca */
body {
    background: linear-gradient(to bottom, #000000 0%, #000000 20%, #1A1A1A 60%, #0A0A0A 100%) !important;
    color: #E2E2E2;
    overflow-x: hidden;
    min-height: 100vh;
}

.title-glow {
    text-shadow: 0 0 15px rgba(255, 90, 0, 0.55), 0 0 30px rgba(179, 70, 37, 0.35);
}

@keyframes logo-heartbeat {
    0% { transform: scale(1); }
    10% { transform: scale(1.03); }
    20% { transform: scale(1); }
    30% { transform: scale(1.03); }
    40% { transform: scale(1); }
    100% { transform: scale(1); }
}

.logo-heartbeat {
    animation: logo-heartbeat 2.5s infinite;
}

/* Selector de Idiomas Lateral */
.lang-selector-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(calc(100% - 32px));
    z-index: 9999;
    display: flex;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* El menú de idiomas */
.lang-selector-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 226, 222, 0.1);
    border-right: none;
    padding: 16px 12px;
    border-radius: 12px 0 0 12px;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.4s ease;
}

/* El botón disparador/icono que queda visible en el borde */
.lang-selector-trigger {
    width: 32px;
    height: 120px;
    cursor: pointer;
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid rgba(226, 226, 222, 0.1);
    border-right: none;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}

.lang-selector-trigger img {
    width: 24px;
    height: auto;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Al pasar el ratón por encima del contenedor completo o si tiene clase active (móvil) */
.lang-selector-container:hover,
.lang-selector-container.active {
    transform: translateY(-50%) translateX(0);
}

.lang-selector-container:hover .lang-selector-menu,
.lang-selector-container.active .lang-selector-menu {
    box-shadow: -5px 0 35px rgba(179, 70, 37, 0.25);
}

.lang-selector-container:hover .lang-selector-trigger,
.lang-selector-container.active .lang-selector-trigger {
    background: rgba(179, 70, 37, 0.15);
    border-color: rgba(179, 70, 37, 0.4);
}

.lang-selector-container:hover .lang-selector-trigger img,
.lang-selector-container.active .lang-selector-trigger img {
    opacity: 1;
    transform: scale(1.1);
}

/* Elementos del menú */
.lang-item {
    display: block;
    width: 36px;
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.lang-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
}

/* Idiomas inactivos */
.lang-item.inactive {
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: not-allowed;
    position: relative;
}

.lang-item:not(.inactive):hover {
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(179, 70, 37, 0.6);
}

.lang-item:not(.inactive):hover img {
    border-color: #B34625;
}

/* Tooltip para los idiomas inactivos o activos */
.lang-item::after {
    content: attr(data-lang-name);
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%) scale(0.85);
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(226, 226, 222, 0.15);
    color: #E2E2E2;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Hanken Grotesk', sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lang-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Estilos globales para la barra de menú (Navbar) */
nav {
    background-color: #000000 !important;
}

/* Resaltado de la página activa en el menú (subrayado y texto en color naranja ember-glow) */
nav a.border-b {
    border-color: #B34625 !important; /* Color naranja de la marca (ember-glow) */
    color: #B34625 !important;
}

/* Barra de desplazamiento vertical estándar y elegante en toda la web (exclusiva para la página) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: #000000 !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: #3a3a3a !important;
    border-radius: 6px !important;
    border: 3px solid #000000 !important; /* Margen negro para un efecto visual más estilizado */
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
    background: #B34625 !important; /* Naranja corporativo (ember-glow) al tocarla/hover */
}

/* Botón Premium con brillos y reflejos */
.premium-btn-custom {
    position: relative;
    overflow: hidden;
    animation: premiumPulse 2s infinite;
}

@keyframes premiumPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(179, 70, 37, 0.4), inset 0 0 10px rgba(179, 70, 37, 0.2); border-color: rgba(179, 70, 37, 0.5); }
    50% { box-shadow: 0 0 35px rgba(226, 226, 226, 0.6), inset 0 0 20px rgba(179, 70, 37, 0.5); border-color: rgba(226, 226, 226, 0.9); text-shadow: 0 0 8px rgba(255,255,255,0.5); }
}

.premium-btn-custom::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: sparkleShine 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

@keyframes sparkleShine {
    0% { left: -100%; }
    15% { left: 200%; }
    100% { left: 200%; }
}