:root {
    --bg-dark: #000000;
    --text-white: #ffffff;
    --gold-accent: #d4af37;
    /* Luxury Gold */
    --card-bg: rgba(20, 20, 20, 0.6);
    --glass-crystal: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Outfit', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text-white);
    /* Blue/Orange gradient covering entire page */
    background:
        radial-gradient(ellipse at 15% 20%, rgba(255, 100, 0, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 60%, rgba(0, 150, 255, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 100, 200, 0.2) 0%, transparent 40%),
        #000;
    /* Use clip instead of hidden to preserve sticky behavior */
    overflow-x: clip;
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}

/* --- Fixed Background & DARKER Overlay --- */
#video-container {
    position: absolute;
    /* Changed from fixed to absolute so it scrolls with Hero */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
    /* Mask to fade out the bottom edge ("Black Stripe" fix) - Updated to 80% to 100% fade */
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease;
    /* SMOOTHER FADE (updated from 0.5s) */
    filter: brightness(0.8);
    /* Increased brightness from 0.5 */
    /* Darkening the video itself to ensure text pops */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reverted to simple dark overlay as requested */
    background: rgba(0, 0, 0, 0.3);
    /* Reduced opacity from 0.5 */
    z-index: -1;
}

/* --- Layout --- */
main {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Reuse Hero Styles (Compact for brevity, same as before) */
#hero {
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    /* Ensure no gap at bottom */
}

.hero-content {
    text-align: center;
    color: var(--text-white);
    z-index: 10;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 6rem;
    letter-spacing: 5px;
    margin: 0;
}

.hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.scroll-indicator {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.8;
}

.scroll-logo {
    width: 60px;
    /* Adjusted size for the logo */
    height: auto;
    margin-bottom: 10px;
    animation: bounceLogo 2s infinite;
}

.scroll-text {
    font-size: 0.7rem;
    letter-spacing: 3px;
    margin: 0;
}

@keyframes bounceLogo {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.corner-text {
    position: absolute;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 10;
}

.top-left {
    top: 40px;
    left: 40px;
}

.top-right {
    top: 40px;
    right: 40px;
}

.bottom-left {
    bottom: 40px;
    left: 40px;
}

.bottom-right {
    bottom: 40px;
    right: 40px;
}

/* Navbar */
.crystal-nav {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    /* User Request: Header 50 */
    display: flex;
    align-items: center;
    background: var(--glass-crystal);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 40px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    transition: all 0.4s ease;
}

.crystal-nav.scrolled {
    top: 0;
    width: 100%;
    border-radius: 0;
    background: rgba(10, 10, 10, 0.6);
    /* Translucent dark */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);

    /* Fixed Height for Gap consistency */
    height: 80px;
    box-sizing: border-box;
    padding: 0;
    justify-content: center;
}

.logo-center {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 40px;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: font-size 0.3s ease;
    text-decoration: none;
}

.crystal-nav.scrolled .logo-center {
    font-size: 1.8rem;
}

.nav-link {
    text-decoration: none;
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 10px 20px;
    transition: all 0.3s;
    opacity: 0.9;
}

.nav-link:hover {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* Responsive Navbar */
@media (max-width: 900px) {
    .crystal-nav {
        /* Ensure it fits nicely on mobile */
        width: 90%;
        /* Use percentage width */
        box-sizing: border-box;
        /* Include padding in width */
        justify-content: space-between;
        padding: 10px 15px;
        /* Reduced padding */
    }

    .logo-center {
        margin: 0;
        /* Remove huge margins */
        font-size: 1.5rem;
        /* Smaller logo */
    }

    .nav-link {
        padding: 5px 10px;
        /* Smaller touch targets padding */
        font-size: 0.75rem;
        /* Smaller text */
        letter-spacing: 1px;
    }
}

/* --- FAVORITES SECTION (NEW 3D GRID) --- */
.favorites-section {
    position: relative;
    z-index: 10;
    /* Ensure text sits on top of video */
    padding: 0px 5% 20px 5%;
    /* DRASTICALLY Reduced bottom padding (was 100px) */
    background: #080808;
    /* Deep Dark */
    background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
    /* Subtle Noise */
    min-height: 100vh;
}

.favorites-header {
    text-align: center;
    margin-bottom: 60px;
}

.subtitle-gold {
    font-family: var(--font-body);
    color: var(--gold-accent);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 1.5rem;
    display: block;
    margin-bottom: 10px;
}

.section-title-gold {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 3.5rem;
    margin: 0;
    letter-spacing: 2px;
}

/* Grid Layout */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* 3D Card Style */
.fav-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    perspective: 1000px;
    /* Enable 3D */
}

.fav-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Image & Ingredients Reveal */
.card-image {
    width: 100%;
    height: 320px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.ingredients-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Dark Reveal */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* Hover Effect: Show Ingredients */
.fav-card:hover .ingredients-overlay {
    opacity: 1;
    transform: translateY(0);
}

.ingredients-overlay h4 {
    color: var(--gold-accent);
    font-family: var(--font-heading);
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.ingredients-overlay p {
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Card Info */
.card-info {
    padding: 25px;
    position: relative;
}

.title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.card-info h3 {
    font-family: var(--font-heading);
    margin: 0;
    font-size: 1.4rem;
    color: #fff;
}

.price {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--gold-accent);
}

.desc {
    color: #aaa;
    font-size: 0.9rem;
    margin: 5px 0 0 0;
}

/* View All Button */
.view-all-container {
    text-align: center;
    margin-top: 60px;
}

.gold-btn {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid var(--gold-accent);
    color: var(--gold-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.gold-btn:hover {
    background: var(--gold-accent);
    color: #000;
}

.glass-pill-btn {
    display: inline-flex;
    /* Changed from inline-block to inline-flex for better centering */
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 18px 60px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
}

/* Inner Light Shine */
.glass-pill-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: left 0.5s;
}

.glass-pill-btn:hover::before {
    left: 100%;
}

.glass-pill-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.2),
        /* Gold hint */
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
    color: var(--gold-accent);
}

/* Reveal Animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 900px) {
    .section-title-gold {
        font-size: 2.5rem;
    }

    .favorites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 2x2 Grid for Mobile */
        gap: 15px;
        /* Reduced gap for mobile */
    }
}

/* --- FRESHNESS SECTION --- */
#freshness {
    position: relative;
    min-height: auto;
    display: flex;
    flex-direction: column;
    /* Stack content and video vertically */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #050505;
    /* Deep dark background to contrast glass */
    padding: 150px 20px 150px 20px;
    /* INCREASED top padding to 150px, Added 150px bottom */
}

.freshness-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 1200px;
}

/* Glass Cards */
.glass-card {
    position: absolute;
    width: 320px;
    height: 450px;
    border-radius: 30px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.1s linear;
    /* Smooth scroll update */
    z-index: 2;
}

.orange-tint {
    background: rgba(255, 165, 0, 0.15);
    /* Light Orange */
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(-5deg);
    /* Initial Rotation */
    left: 20%;
    /* Start closer to center */
}

.blue-tint {
    background: rgba(0, 162, 255, 0.15);
    /* Light Blue */
    background: linear-gradient(135deg, rgba(0, 195, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: rotate(5deg);
    /* Initial Rotation */
    right: 20%;
    /* Start closer to center */
}

/* Floating Sushi Images */
.floating-sushi {
    width: 120%;
    max-width: none;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
    pointer-events: none;
}

.left-card .floating-sushi {
    transform: rotate(-10deg) scale(1.1);
}

.right-card .floating-sushi {
    transform: rotate(10deg) scale(1.1);
}

/* Hover Effects */
.glass-card:hover .floating-sushi {
    transform: scale(1.15) rotate(0deg);
}

/* Center Content */
.freshness-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 600px;
    padding: 0 20px;
    opacity: 0;
    /* Hidden initially, reveal on scroll */
    transform: translateY(20px) scale(0.9);
    transition: all 0.8s ease-out;
}

.freshness-content.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.freshness-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.1;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.freshness-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
}

/* Responsive */
@media (max-width: 900px) {
    .freshness-container {
        flex-direction: row;
        /* Horizontal layout */
        flex-wrap: wrap;
        /* Allow wrapping */
        justify-content: center;
        gap: 15px;
        padding-top: 50px;
    }

    .glass-card {
        position: relative;
        width: 45%;
        /* Fits 2 per row roughly */
        max-width: 160px;
        /* Limit size */
        height: 220px;
        /* Smaller height */
        margin: 0;
        left: auto !important;
        right: auto !important;
        transform: rotate(0deg) !important;
    }

    .freshness-content {
        order: -1;
        /* Show text above cards */
        width: 100%;
        margin-bottom: 20px;
    }

    .orange-tint {
        transform: rotate(-2deg);
    }

    .blue-tint {
        transform: rotate(2deg);
    }

    .freshness-content {
        margin-top: 40px;
        opacity: 1;
        /* Always visible on mobile */
        transform: none;
    }
}

/* Text Growth & Pop Effect */
.freshness-content.highlight {
    transform: scale(1.1) translateY(0) translateZ(20px);
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    /* "Move Forward" feel */
    z-index: 10;
}

/* Updated Title Style */
.freshness-title {
    white-space: nowrap;
    /* Force single line */
}

/* --- NEW GRADIENT BACKGROUND (Applies GLOBALLY) --- */
/* Sections are transparent to let body background show through */
.favorites-section,
#freshness {
    background: transparent;
    box-shadow: none;
    /* Remove blending shadow as we want one continuous piece */
}

/* Global Background Wrapper */
body {
    background-color: #030303;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 100, 0, 0.15) 0%, transparent 40%),
        /* Orange Glow Top Left */
        radial-gradient(circle at 90% 80%, rgba(0, 195, 255, 0.1) 0%, transparent 40%),
        /* Blue Glow Bottom Right */
        radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 1) 0%, rgba(0, 0, 0, 0) 60%);
    /* Center darkness */
    background-attachment: fixed;
    /* Create depth */
}

#freshness {
    clip-path: none;
    /* Remove clip path from previous step */
    box-shadow: none;
    z-index: 2;
    position: relative;
    /* Context for absolute koi */
}

/* 3D Koi Container (Now holding Spline) */
#koi-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Behind cards (which should be higher) */
    /* pointer-events: none; REMOVED: Allow interaction with Spline if desired, or keep to pass through. 
      Usually Spline needs interaction. Let's enable it but content is on top. 
      If content covers it, interaction might be blocked on covered areas. */
    overflow: hidden;
}

/* Ensure content sits above fish */
.freshness-container {
    position: relative;
    z-index: 5;
    margin-bottom: 20px;
    /* Add spacing between cards and video */
}

/* --- MAP SECTION --- */
#location {
    position: relative;
    padding: 20px 5% 100px 5%;
    /* Reduced top padding (was 100px) => Total gap 40px */
    background: transparent;
    /* Requirement */
    z-index: 10;
}

.map-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
}

/* Glass Card Base */
.glass-map-card {
    background: rgba(10, 10, 30, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2.5rem;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Left Column - Text */
.text-col {
    box-shadow: 0 0 20px rgba(255, 100, 0, 0.15);
    /* Orange Neon */
}

.map-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: #fff;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.map-desc {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Cyberpunk Button */
.cyber-btn {
    display: inline-block;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid #00f3ff;
    /* Neon Blue */
    color: #00f3ff;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
    width: fit-content;
}

.cyber-btn:hover {
    background: #00f3ff;
    color: #fff;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.8);
    transform: translateY(-3px);
}

/* Right Column - Map */
.map-col {
    padding: 0;
    /* Map fills the card */
    overflow: hidden;
    /* Round corners */
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.15);
    /* Blue Neon */
    min-height: 450px;
}

.map-frame {
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: none;
    filter: invert(100%) hue-rotate(180deg) contrast(1.2) grayscale(20%);
    display: block;
}

/* Responsive */
@media (max-width: 900px) {
    .map-container {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .map-title {
        font-size: 2.5rem;
    }
}

/* =========================================
  Social Media Section (Global)
  ========================================= */

#social-media {
    padding: 0 0 6rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: transparent;
}

#social-media .container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#social-media .section-title {
    font-size: 4rem;
    /* Increased size to match "large" requirement */
    color: #fff;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: var(--font-heading);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.social-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    font-weight: 300;
    line-height: 1.6;
}

/* Button Container */
.social-buttons-container {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* New Squircle Icon Buttons */
.social-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    /* Squircle */

    background: rgba(0, 0, 0, 0.6);
    /* Dark semi-transparent fill */
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: #fff;
    text-decoration: none;
    font-size: 1.8rem;

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Base state - slight white inner glow */
.social-icon-btn i {
    filter: drop-shadow(0 0 0 transparent);
    transition: all 0.4s ease;
}


/* --- HORIZONTAL GRADIENT GLOW LOGIC --- */
/* Requested Colors: FB(Light Blue), Insta(Magenta), TikTok(Cyan), WA(Light Green) */

/* Facebook - Light Blue */
.btn-facebook:hover {
    border-color: #4da6ff;
    box-shadow:
        0 0 20px rgba(77, 166, 255, 0.4),
        inset 0 0 15px rgba(77, 166, 255, 0.2);
    transform: translateY(-5px);
}

.btn-facebook:hover i {
    text-shadow: 0 0 15px rgba(77, 166, 255, 0.8);
    color: #4da6ff;
}

/* Instagram - Magenta */
.btn-instagram:hover {
    border-color: #ff00ff;
    box-shadow:
        0 0 20px rgba(255, 0, 255, 0.4),
        inset 0 0 15px rgba(255, 0, 255, 0.2);
    transform: translateY(-5px);
}

.btn-instagram:hover i {
    text-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
    color: #ff00ff;
}

/* TikTok - Cyan */
.btn-tiktok:hover {
    border-color: #00f3ff;
    box-shadow:
        0 0 20px rgba(0, 243, 255, 0.4),
        /* Outer Glow */
        inset 0 0 15px rgba(0, 243, 255, 0.2);
    /* Inner Glow */
    transform: translateY(-5px);
}

.btn-tiktok:hover i {
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.8);
    color: #00f3ff;
}

/* =========================================
   Footer Section (Glassmorphism)
   ========================================= */

#main-footer {
    position: relative;
    z-index: 100;
    margin-top: 0;
}

.footer-glass {
    background: rgba(10, 10, 10, 0.4);
    /* High transparency dark */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    /* Thin bright border */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
        /* High-light */
        inset 0 0 40px rgba(0, 0, 0, 0.5);
    /* Inner shadow for volume */
    padding: 60px 5% 0 5%;
    color: #eee;
    font-weight: 300;
    /* Light text globally in footer */
}

/* Footer Global Text */
.footer-glass p,
.footer-glass span,
.footer-glass a,
.footer-glass div,
.footer-glass li {
    font-weight: 300 !important;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    /* Brand wider */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 60px;
}

/* Columns */
.footer-col {
    display: flex;
    flex-direction: column;
}

/* Brand Col */
.brand-col {
    align-items: center;
    /* Center content horizontally */
    text-align: center;
}

.footer-logo-img {
    width: 140px;
    /* Good size */
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
    transition: transform 0.3s ease;
}

.footer-logo-img:hover {
    transform: scale(1.05);
}

.footer-tagline {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    max-width: 300px;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Optional, looks clearer */
}

/* Headings */
.footer-heading {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #FF6B00;
    /* Orange Accent */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
    margin-top: 10px;
    /* Align with logo top somewhat */
    font-weight: 400 !important;
    /* Slightly more weight for headings, but still clean */
}

/* Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(5px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Info List */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    align-items: flex-start;
    /* Centering icons vertically relative to text block */
    margin-bottom: 20px;
    /* Increased spacing */
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.5;
}

.info-icon-wrapper {
    width: 35px;
    /* Slightly wider */
    min-width: 35px;
    margin-right: 15px;
    /* More space */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FF6B00;
    font-size: 1.2rem;
    /* Slightly larger icons */
    height: 1.5rem;
    /* Match line height for first line vertical alignment */
}

/* Footer Bottom (Sub-footer) */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Very subtle divider */
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

.tecycom-link {
    color: #fff;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.tecycom-link:hover {
    opacity: 1;
    color: #FF6B00;
}

/* Responsive Footer */
@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .footer-logo {
        margin: 0 auto 15px auto;
        width: fit-content;
    }

    .footer-tagline {
        margin: 0 auto;
    }

    .info-list li {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* WhatsApp - Light Green */
.btn-whatsapp:hover {
    border-color: #00ff88;
    box-shadow:
        0 0 20px rgba(0, 255, 136, 0.4),
        inset 0 0 15px rgba(0, 255, 136, 0.2);
    transform: translateY(-5px);
}

.btn-whatsapp:hover i {
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
    color: #00ff88;
}

/* Responsive */
@media (max-width: 768px) {
    .social-buttons-container {
        gap: 1rem;
    }

    .social-icon-btn {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* --- DIGITAL MENU (DARK NEON) --- */
#menu-digital {
    /* Transparent to show body gradient */
    background: transparent;
    padding: 150px 2% 100px 2%;
    min-height: 100vh;
    position: relative;
    z-index: 10;
}

.menu-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Filters */
/* Filters (Redesigned for Full Width Sticky) */
.category-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;

    /* Sticky Positioning */
    position: sticky;
    top: 80px;
    /* Matches Header Height */
    z-index: 40;
    /* Lower than Header (50) */

    /* Default State: Transparent & Floating */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;

    padding: 15px 0;
    width: 100%;
    /* ONLY animate cosmetic properties - no layout props! */
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
    /* GPU acceleration with translate3d for iOS stability */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Sticky State (Applied via JS class .scrolled-menu) */
.category-filters.scrolled-menu {
    background: rgba(0, 0, 0, 0.7);
    /* Dark translucent black */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    /* Full Width Hack when sticky */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    /* Centers element relative to viewport */
    padding-left: 5%;
    padding-right: 5%;

    /* FIX: Alignment Bug */
    justify-content: center;
    box-sizing: border-box;
}

.filter-pill {
    background: rgba(255, 255, 255, 0.05);
    /* Floating Pill BG */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 25px;
    border-radius: 999px;
    /* Rounded Full */
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* Floating Shadow */
}

.filter-pill:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.filter-pill.active {
    border-color: #FF6B00;
    background: #FF6B00;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
    text-shadow: none;
}

/* --- HERO BANNER (Promo Estudiante) --- */
.hero-banner-container {
    width: 100%;
    max-width: 1200px;
    /* Aligned with map container */
    margin: 0 auto 60px auto;
}

.promo-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Glassmorphism Style */
    background: rgba(255, 255, 255, 0.05);
    /* very translucent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;

    /* Subtle neon border */
    border: 1px solid rgba(255, 107, 0, 0.3);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    /* Softer shadow */
}

/* Animations */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: scale(0.95) rotate(3deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(3deg);
    }
}

.animate-text {
    opacity: 0;
    /* Start hidden */
    animation: fadeInSlideUp 0.8s ease-out forwards;
}

.animate-scale {
    opacity: 0;
    animation: fadeInScaleUp 1s ease-out forwards;
}

/* Delays */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-400 {
    animation-delay: 400ms;
}


.promo-content {
    flex: 1;
    z-index: 2;
    padding-right: 40px;
}

.promo-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: #fff;
    margin: 0 0 10px 0;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    line-height: 1;
}

.promo-price {
    display: block;
    font-size: 4rem;
    font-weight: 700;
    color: #FFD700;
    /* Gold */
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    margin-bottom: 20px;
}

.promo-desc {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 500px;
}

.promo-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.promo-image {
    width: 400px;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    transform: rotate(3deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.2);
    /* Mask/Clip if needed, but simple card looks premium too */
}

@media (max-width: 900px) {
    .promo-banner {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .promo-content {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .promo-title {
        font-size: 2.5rem;
    }

    .promo-image-wrapper {
        justify-content: center;
    }

    .promo-image {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
}

/* --- HERO BANNER (Promo Estudiante) --- */
.hero-banner-container {
    width: 100%;
    max-width: 1200px;
    /* Aligned with map container */
    margin: 0 auto 60px auto;
}

.promo-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.9), rgba(255, 107, 0, 0.5));
    /* Dark Red to Orange */
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 107, 0, 0.6);
    box-shadow: 0 0 30px rgba(255, 107, 0, 0.3);
    animation: neonPulse 3s infinite alternate;
}

@keyframes neonPulse {
    0% {
        box-shadow: 0 0 20px rgba(255, 107, 0, 0.3);
        border-color: rgba(255, 107, 0, 0.6);
    }

    100% {
        box-shadow: 0 0 40px rgba(255, 107, 0, 0.6);
        border-color: rgba(255, 107, 0, 1);
    }
}

.promo-content {
    flex: 1;
    z-index: 2;
    padding-right: 40px;
}

.promo-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: #fff;
    margin: 0 0 10px 0;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    line-height: 1;
}

.promo-price {
    display: block;
    font-size: 4rem;
    font-weight: 700;
    color: #FFD700;
    /* Gold */
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    margin-bottom: 20px;
}

.promo-desc {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 500px;
}

.promo-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
}

.promo-image {
    width: 400px;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    transform: rotate(3deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.2);
    /* Mask/Clip if needed, but simple card looks premium too */
}

@media (max-width: 900px) {
    .promo-banner {
        flex-direction: row;
        /* Restore horizontal layout */
        text-align: left;
        /* Left align text */
        padding: 20px;
        /* Balanced padding */
        gap: 15px;
    }

    .promo-content {
        padding-right: 0;
        margin-bottom: 0;
        /* Remove bottom margin */
        flex: 1;
        /* Allow text to take available space */
    }

    .promo-title {
        font-size: 1.8rem;
        /* Adjusted for mobile horizontal */
        margin-bottom: 5px;
    }

    .promo-price {
        font-size: 3rem;
        margin-bottom: 5px;
    }

    .promo-desc {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .promo-image-wrapper {
        justify-content: center;
        width: auto;
        /* Auto width */
        flex-shrink: 0;
        /* Prevent shrinking */
    }

    .promo-image {
        width: 140px;
        /* Fixed width for mobile list view look */
        max-width: none;
        height: auto;
        transform: rotate(3deg);
    }
}

/* Dishes Grid */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 cols Desktop */
    gap: 24px;
    /* gap-6 */
    margin-bottom: 60px;
}

/* New Section Titles */
.menu-category-section {
    scroll-margin-top: 160px;
    /* Ensure title isn't hidden by sticky header */
}

.category-title {
    font-family: var(--font-heading);
    color: #D4AF37;
    /* Gold/Elegant */
    font-size: 2rem;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-left: 4px solid #FF6B00;
    /* Neon Orange Accent */
    padding-left: 15px;
}

/* Dish Card */
.menu-card {
    /* Glassmorphism Base */
    background: rgba(255, 255, 255, 0.03);
    /* Translucent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);

    border-radius: 12px;
    /* rounded-xl */
    overflow: hidden;
    /* Removed old border-orange-500/30 in favor of glass border */

    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.4s ease, border-color 0.3s ease;
    opacity: 1;
    /* Default visible */

    /* NEW: Flex Layout & Increased Height */
    display: flex;
    flex-direction: column;
    min-height: 520px;
    /* Considerable increase for long text */
    height: 100%;
    /* Fill grid cell */
}

.menu-card.hidden {
    display: none;
    opacity: 0;
}

.menu-card.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

.menu-card:hover {
    transform: translateY(-4px);
    /* Enhanced Glass Hover */
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 107, 0, 0.15);
}

.menu-card-img {
    width: 100%;
    height: 250px;
    /* Approx 60% of card or fixed height */
    aspect-ratio: 4/3;
    object-fit: cover;
    background-color: #222;
}

.menu-card-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Fill remaining space */
    justify-content: flex-start;
}

.menu-card-title {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.menu-card-desc {
    color: #aaa;
    font-size: 0.8rem;
    /* Reduced to text-xs equivalent */
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 20px;

    /* REMOVED LINE CLAMP to show full text */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 3; */
    /* line-clamp: 3; */
    /* -webkit-box-orient: vertical; */
    /* overflow: hidden; */
}

.menu-card-price {
    color: #FF6B00;
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 107, 0, 0.3);
    margin-top: auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    /* Ensure parent containers allow sticky positioning on iOS */
    #menu-digital,
    main,
    body {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    .category-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-left: 10px;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        -ms-overflow-style: none;

        top: 60px !important;
        /* Sit directly below navbar */
        position: -webkit-sticky !important;
        position: sticky !important;
        z-index: 40 !important;
        /* Below Navbar (z=50) */

        /* Glassmorphism effect */
        background: rgba(0, 0, 0, 0.85) !important;
        -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
        backdrop-filter: blur(25px) saturate(150%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

        /* JITTER FIX: GPU acceleration with translate3d */
        will-change: transform !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        /* Only cosmetic transitions allowed */
        transition: background-color 0.3s ease, backdrop-filter 0.3s ease !important;

        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding: 10px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
    }

    /* FIX: Keep left alignment on mobile when sticky */
    .category-filters.scrolled-menu {
        justify-content: flex-start;
    }

    .category-filters::-webkit-scrollbar {
        display: none;
    }

    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols Mobile */
        gap: 10px;
        /* gap-10px (Requested small gap, but we need space for content) */
    }

    .menu-card {
        min-height: auto;
        /* Remove huge height constraint */
        display: flex;
        flex-direction: column;
    }

    .menu-card-img {
        height: auto;
        aspect-ratio: 1 / 1;
        /* Square format */
        object-fit: cover;
    }

    .menu-card-info {
        padding: 10px;
    }

    .menu-card-title {
        font-size: 0.95rem;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .menu-card-desc {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.8rem !important;
        color: #ccc !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        overflow: visible !important;
        max-height: none !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        /* Show up to 4 lines */
        text-overflow: ellipsis;
    }

    .menu-card-price {
        font-size: 1.05rem;
        margin-top: auto;
        /* Push to bottom */
    }
}





/* =========================================
   Immersive Dark Map Section
   ========================================= */

#location-immersive {
    position: relative;
    width: 100%;
    height: 600px;
    /* Tall, immersive height */
    overflow: hidden;
    margin-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.immersive-map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    /* Soft Fade Edges via Mask - INTENSIFIED */
    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 85%);
    mask-image: radial-gradient(circle at center, black 30%, transparent 85%);
    /* Safety Net Shadow to hide hard lines */
    box-shadow: inset 0px 0px 60px 40px #000;
}

/* Dark Map Effect via Filters */
.dark-map-frame {
    width: 100%;
    height: 100%;
    border: none;
    /* Verified Combo for "Midnight" look: */
    filter: grayscale(80%) invert(92%) contrast(83%);
    mix-blend-mode: screen;
    opacity: 0.8;
}

/* Custom Red Marker (Overlay) */
.custom-map-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    /* Point to center */
    color: #FF0000;
    /* Intense Red */
    font-size: 3rem;
    z-index: 5;
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.6));
    pointer-events: none;
}

.marker-pulse {
    position: absolute;
    width: 20px;
    height: 10px;
    background: rgba(255, 0, 0, 0.5);
    border-radius: 50%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation: pulse-shadow 2s infinite;
    z-index: -1;
    filter: blur(4px);
}

@keyframes pulse-shadow {
    0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translateX(-50%) scale(2);
        opacity: 0;
    }
}

/* Vignette / Mask Effect - Kept as subtle overlay layer */
.map-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.5;
    /* Reduced since mix-blend and mask do heavy lifting */
    background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.8) 80%, #000 100%);
}

/* Floating Info Panel */
.map-info-overlay {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    z-index: 20;
    max-width: 400px;
    width: 90%;
}

.map-info-content {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    padding: 30px;
    color: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.map-overlay-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #fff;
    margin-bottom: 25px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    border-left: 4px solid #FF6B00;
    padding-left: 15px;
}

.map-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

/* ... detail items ... */
.map-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.map-icon {
    font-size: 1.2rem;
    color: #FF6B00;
    margin-top: 5px;
    min-width: 20px;
}

.detail-text {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.detail-text p {
    font-size: 1rem;
    color: #fff;
    line-height: 1.5;
    margin: 0;
}

.mt-6 {
    margin-top: 0;
    width: auto;
    max-width: fit-content;
    align-self: center;
    padding: 0.5rem 1.5rem;
}

/* Responsive */
@media (max-width: 900px) {
    #location-immersive {
        height: auto;
        min-height: 600px;
    }

    .map-info-overlay {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: -100px;
        /* Pull up over map */
        padding: 20px;
        z-index: 20;
        display: flex;
        justify-content: center;
    }

    .map-info-content {
        width: 100%;
        max-width: 500px;
        text-align: center;
    }

    .map-overlay-title {
        border-left: none;
        border-bottom: 3px solid #FF6B00;
        padding-left: 0;
        padding-bottom: 10px;
        display: inline-block;
    }

    .map-detail-item {
        justify-content: center;
        text-align: left;
        /* Keep text left aligned for readability, or center? Left is better for address blocks. */
    }

    .immersive-map-wrapper {
        display: flex;
        flex-direction: column;
    }

    .map-background {
        position: relative;
        height: 400px;
    }
}

/* =========================================
   MOBILE RESPONSIVENESS (< 768px)
   ========================================= */
@media (max-width: 768px) {

    /* --- Global Layout & Spacing --- */
    /* Ensure all structural containers have breathing room */
    .container,
    .hero-content,
    .freshness-container,
    .favorites-section,
    .map-container,
    .menu-container,
    .footer-content {
        padding-left: clamp(15px, 5%, 30px) !important;
        padding-right: clamp(15px, 5%, 30px) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .menu-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .container,
    section {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* Reduce menu grid gap for wider cards */
    .menu-grid {
        gap: 8px !important;
    }

    /* Prevent horizontal overflow (using clip to preserve sticky behavior) */
    body,
    html {
        overflow-x: clip;
        width: 100%;
        max-width: 100vw;
    }

    /* Blue/Orange gradient on mobile with 75% dark overlay */
    body {
        background-attachment: scroll;
        background:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
            radial-gradient(ellipse at 15% 20%, rgba(255, 100, 0, 0.35) 0%, transparent 50%),
            radial-gradient(ellipse at 85% 60%, rgba(0, 150, 255, 0.3) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 100%, rgba(0, 100, 200, 0.2) 0%, transparent 40%),
            #000 !important;
    }

    h1,
    .hero-title {
        font-size: clamp(2.5rem, 8vw, 4rem) !important;
        /* Fluid: Min 2.5rem, Max 4rem */
        line-height: 1.1;
        word-wrap: break-word;
        max-width: 100%;
    }

    h2,
    .section-title,
    .section-title-gold,
    .freshness-title,
    .map-title,
    .promo-title {
        font-size: clamp(2rem, 6vw, 3rem) !important;
        /* Fluid Title */
        word-wrap: break-word;
        /* Break long words if needed */
        line-height: 1.2;
    }

    .hero-subtitle,
    .freshness-text,
    .promo-desc,
    .map-desc {
        font-size: 1rem !important;
        line-height: 1.6;
    }

    /* --- Sections Specific --- */

    /* Hero */
    #hero {
        min-height: 100vh;
        /* Padding top/bottom to handle vertical content */
        padding: 120px 0 60px 0;
    }

    /* Freshness (About) - Stack image cards and text */
    .freshness-container {
        flex-direction: column !important;
        padding-top: 40px !important;
        gap: 40px;
    }

    .glass-card {
        position: relative !important;
        /* Disable absolute positioning */
        width: 100% !important;
        max-width: 300px;
        height: 380px;
        margin: 0 auto !important;
        left: auto !important;
        right: auto !important;
        transform: rotate(0deg) !important;
        /* Simplify rotation */
    }

    /* Favorites Grid */
    .favorites-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
        padding: 0 10px;
        /* Extra internal padding */
    }

    .fav-card {
        max-width: 100%;
        /* Fill width */
    }

    /* Cards - Image height check */
    .card-image {
        height: 250px;
        /* Slightly smaller on mobile */
    }

    /* --- Promo Estudiante Badge (Fix Overlap) --- */
    /* Target specifically the detailed promo banner */
    .promo-banner {
        flex-direction: column !important;
        padding: 30px 20px !important;
        height: auto !important;
        text-align: center;
        margin-top: 40px;
    }

    .promo-content {
        padding-right: 0 !important;
        margin-bottom: 0 !important;
        /* Remove margin */
        width: auto !important;
        flex: 1;
    }

    .promo-image-wrapper {
        width: auto !important;
        justify-content: flex-end !important;
    }

    .promo-image {
        width: 140px !important;
        max-width: none;
        height: auto;
        transform: rotate(3deg) !important;
        margin: 0;
    }

    /* --- Digital Menu Grid --- */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
        /* Slightly tighter gap */
    }

    .menu-card {
        min-height: 0 !important;
        height: auto !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: column !important;
        flex-direction: column !important;
        border-radius: 12px;
        overflow: visible !important;
    }

    /* FORCE description visibility on iOS */
    .menu-card .menu-card-info {
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-direction: column !important;
        flex-direction: column !important;
        -webkit-flex: 1 !important;
        flex: 1 !important;
        padding: 12px !important;
    }

    .menu-card .menu-card-desc {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        max-height: none !important;
        -webkit-line-clamp: 4 !important;
        line-clamp: 4 !important;
        font-size: 0.75rem !important;
        color: #bbb !important;
        line-height: 1.35 !important;
    }

    .menu-card-img {
        height: 120px !important;
    }

    .menu-card-info {
        padding: 10px !important;
    }

    .menu-card-title {
        font-size: 0.9rem !important;
        margin-bottom: 4px;
        line-height: 1.2;
    }

    .menu-card-desc {
        margin-bottom: 15px;
        display: block;
        /* Force show full text */
        -webkit-line-clamp: unset;
        line-clamp: unset;
        overflow: visible;
        height: auto;
    }

    .menu-card-price {
        font-size: 1rem !important;
    }

    /* --- Map Section --- */
    .map-container {
        grid-template-columns: 1fr !important;
        gap: 40px;
        display: flex;
        flex-direction: column;
    }

    .glass-map-card {
        padding: 2rem !important;
    }

    .text-col {
        order: 2;
        /* Map first? Or text first? Usually text first is fine. Default is fine. */
    }

    /* --- Footer --- */
    .footer-content {
        grid-template-columns: 1fr !important;
        display: flex;
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .footer-col {
        align-items: center;
        /* Center align all footer items */
    }

    .info-list li {
        justify-content: center;
    }

    /* --- Social Media --- */
    .social-buttons-container {
        gap: 15px;
        flex-wrap: wrap;
    }

    .social-icon-btn {
        width: 60px;
        height: 60px;
        font-size: 1.4rem;
    }

    #social-media .section-title {
        font-size: 2.5rem !important;
        /* Fix huge social title */
    }
}

/* --- MOBILE OPTIMIZATIONS (iPhone 11 & Small Screens) --- */
@media (max-width: 480px) {

    /* Navbar Compaction */
    .crystal-nav {
        width: 95%;
        padding: 5px 10px;
        /* Tighter padding */
        top: 20px;
        /* Closer to top */
        height: auto;
        min-height: 50px;
    }

    .crystal-nav.scrolled {
        padding: 0 10px;
        height: 60px;
    }

    .logo-center {
        font-size: 1.2rem;
        /* Smaller logo */
        margin: 0 5px;
    }

    .crystal-nav.scrolled .logo-center {
        font-size: 1.1rem;
    }

    .nav-link {
        font-size: 0.65rem;
        /* Tiny text for menu */
        padding: 5px 6px;
        letter-spacing: 0.5px;
    }

    /* Hero Text */
    .hero-title {
        font-size: 3rem !important;
        /* Much smaller than 6rem */
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 0.85rem !important;
        letter-spacing: 1.5px;
        margin-top: 10px;
        padding: 0 20px;
        /* Prevent edge touching */
    }

    .scroll-indicator {
        margin-top: 20px;
        /* Pull up */
    }

    .scroll-logo {
        width: 40px;
    }

    /* Overlapping Headings Fix */
    section {
        scroll-margin-top: 80px;
        /* Ensure sticky header doesn't cover titles */
    }

    /* Freshness Section */
    .freshness-title {
        font-size: 1.8rem !important;
        margin-bottom: 20px;
        white-space: normal;
        /* Allow wrapping */
        line-height: 1.2;
    }

    .freshness-text {
        font-size: 0.9rem !important;
        padding: 0 5px;
    }

    .glass-card {
        width: 130px !important;
        /* Smaller cards */
        height: 180px !important;
        max-width: 45% !important;
    }

    .freshness-container {
        gap: 20px !important;
    }

    /* Favorites Grid to 2 Columns */
    .favorites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        padding: 0;
    }

    .fav-card {
        max-width: 100%;
        /* Fill width */
    }

    /* Cards - Image height check */
    .card-image {
        height: 140px !important;
        /* Smaller on mobile for 2-col */
    }

    .fav-card .card-info {
        padding: 10px !important;
    }

    .fav-card .title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 5px;
    }

    .fav-card h3 {
        font-size: 0.9rem !important;
    }

    .fav-card .price {
        font-size: 0.9rem !important;
    }

    .fav-card .desc {
        font-size: 0.7rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .section-title-gold {
        font-size: 2rem !important;
        /* Fix huge title */
        line-height: 1.2;
    }

    .subtitle-gold {
        font-size: 1rem;
    }

    .favorites-header {
        margin-bottom: 30px;
        padding: 0 10px;
    }

    /* Map Section */
    .immersive-map-wrapper {
        height: auto;
        /* Allow auto height */
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
    }

    .map-background {
        height: 250px;
        position: relative;
    }

    .map-info-overlay {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        margin-top: -30px;
        /* Slight overlap */
        padding: 0 10px;
        transform: none;
        /* Remove centering transform if any */
        margin-bottom: 20px;
    }

    .map-info-content {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .map-overlay-title {
        font-size: 1.5rem;
    }

    /* Social Media */
    .social-buttons-container {
        gap: 10px;
    }

    .social-icon-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 1.8rem !important;
    }

    /* --- Promo Banner Fixes (Horizontal layout like desktop) --- */
    #hero-banner {
        flex-direction: row !important;
        height: auto !important;
        min-height: 120px !important;
        padding: 15px 10px !important;
        text-align: left !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Text Container (Left Side) */
    #hero-banner>div:first-child {
        width: 55% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        z-index: 20 !important;
    }

    /* "Promo Estudiante" Title */
    #hero-banner h2 {
        font-size: 1.1rem !important;
        letter-spacing: 0px !important;
        text-align: left !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    /* Price */
    #hero-banner div[class*="text-8xl"] {
        font-size: 2.8rem !important;
    }

    /* Image (Right Side - Breakout Effect) */
    #hero-banner img {
        position: absolute !important;
        right: -15px !important;
        bottom: -20px !important;
        margin-top: 0 !important;
        width: 180px !important;
        max-width: none !important;
        transform: none !important;
        pointer-events: none;
        z-index: 10 !important;
    }

    /* --- Menu Grid 2x2 (Edge-to-Edge Cards) --- */
    .menu-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .menu-card-img {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .menu-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 240px !important;
        height: auto !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: rgba(0, 0, 0, 0.5);
        /* Ensure visibility */
    }

    .menu-card-img {
        height: auto !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    .menu-card-info {
        padding: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .menu-card-title {
        font-size: 0.9rem !important;
        margin-bottom: 4px;
        line-height: 1.2;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto;
        /* Allow title breaking if needed */
    }

    .menu-card-desc {
        display: none !important;
    }

    .menu-card-price {
        font-size: 1rem !important;
        margin-top: auto !important;
        display: block !important;
    }
}

/* =========================================
   RESCUE Media Query for Narrow Mobiles (Real Devices)
   Target: iPhone/Android with 360px-430px physical width
   ========================================= */
@media (max-width: 430px) {

    /* 1. Safe Area for containers EXCEPT menu grid */
    .container,
    section:not(#menu-digital),
    #freshness {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    /* Menu section: Zero padding for true edge-to-edge */
    #menu-digital {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* Menu container also zero */
    .menu-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    /* 2. Menu Grid: True edge-to-edge cards */
    .menu-grid {
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* SQUARE images */
    .menu-card-img {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* 3. Text: Prevent long words from breaking layout */
    h1,
    h2,
    .section-title,
    .promo-price {
        word-break: break-word;
        font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    }

    /* 4. Promo Banner: HORIZONTAL + Glassmorphism */
    #hero-banner {
        flex-direction: row !important;
        padding: 15px 10px !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 110px !important;
        /* Glassmorphism effect */
        background: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    #hero-banner>div:first-child {
        width: 55% !important;
        text-align: left !important;
    }

    #hero-banner img {
        position: absolute !important;
        right: -10px !important;
        bottom: -15px !important;
        width: 265px !important;
        max-width: none !important;
    }

    /* 5. Menu Cards: Ensure descriptions fit */
    .menu-card {
        min-height: auto !important;
    }

    .menu-card-desc {
        font-size: 0.75rem !important;
        line-height: 1.3;
    }
}