:root {
            --primary: #5C2E0B;
            --primary-light: #8B4513;
            --secondary: #D4A574;
            --accent: #2E8B57;
            --dark: #1a0f0a;
            --light: #EDE1D2;
            --cream: #F4EBDD;
            --white: #FFFFFF;
            --gold: #C9A96E;
            --gold-dark: #8B6B2E;
            --shadow: 0 8px 30px rgba(0,0,0,0.12);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Open Sans', sans-serif;
            color: var(--dark);
            line-height: 1.6;
            overflow-x: hidden;
            background: var(--cream);
        }

        /* Navigation */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(26,15,10,0.95);
            backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 0.8rem 0;
            transition: all 0.3s ease;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }

        .logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--gold);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .logo i { color: var(--secondary); }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 1.5rem;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--cream);
            font-weight: 600;
            font-size: 0.9rem;
            transition: color 0.3s;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .nav-links a:hover { color: var(--gold); }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gold);
            transition: width 0.3s;
        }

        .nav-links a:hover::after { width: 100%; }

        .mobile-menu {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--gold);
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            background: linear-gradient(135deg, rgba(26,15,10,0.9) 0%, rgba(92,46,11,0.85) 100%),
                        url('images/hero.webp') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
            position: relative;
            padding-top: 80px;
        }

        .hero-content {
            max-width: 800px;
            padding: 2rem;
            animation: fadeInUp 1s ease;
        }

        .hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: 4rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
            color: var(--gold);
        }

        .hero-subtitle {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 0.95;
            font-weight: 300;
            color: var(--cream);
        }

        .hero-location {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-size: 1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            color: var(--cream);
        }

        .btn-group {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            border: none;
        }

        .btn-primary {
            background: var(--gold);
            color: var(--dark);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(201,169,110,0.3);
        }

        .btn-outline {
            background: transparent;
            color: var(--white);
            border: 2px solid var(--gold);
        }

        .btn-outline:hover {
            background: var(--gold);
            color: var(--dark);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            animation: bounce 2s infinite;
        }

        .scroll-indicator i {
            font-size: 2rem;
            color: var(--gold);
        }

        /* Sections General */
        section { padding: 5rem 2rem; }

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

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }

        .section-header p {
            color: #666;
            font-size: 1.1rem;
        }

        .divider {
            width: 60px;
            height: 3px;
            background: var(--gold-dark);
            margin: 1rem auto;
            border-radius: 2px;
        }

        /* About Section */
        .about { background: var(--cream); }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .about-image {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            background: linear-gradient(135deg, var(--dark) 0%, #2a1a10 100%);
        }

        .about-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            transition: transform 0.5s;
            padding: 10px;
        }

        .about-image:hover img { transform: scale(1.05); }

        .about-content h3, .about-content .about-title {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }

        .about-content p {
            margin-bottom: 1.5rem;
            color: #555;
            font-size: 1.05rem;
        }

        .features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

        .feature-icon {
            width: 50px;
            height: 50px;
            background: var(--primary);
            color: var(--gold);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .feature-text h4, .feature-text h3 {
            font-size: 1rem;
            color: var(--dark);
            margin-bottom: 0.3rem;
        }

        .feature-text p {
            font-size: 0.9rem;
            color: #777;
            margin: 0;
        }

        /* Menu Tabs */
        .menu-section { background: var(--cream); }

        .menu-tabs {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 3rem;
            flex-wrap: wrap;
        }

        .menu-tab {
            padding: 0.8rem 1.5rem;
            border: 2px solid var(--primary);
            background: transparent;
            color: var(--primary);
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .menu-tab.active, .menu-tab:hover {
            background: var(--primary);
            color: var(--gold);
            border-color: var(--primary);
        }

        /* Menu Cards */
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }

        .menu-card {
            background: #F9F2E7;
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.3s;
            border: 2px solid transparent;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
            display: flex;
            flex-direction: column;
        }

        .menu-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
            border-color: var(--gold);
        }

        .menu-card-image-wrapper {
            width: 100%;
            height: 260px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, var(--dark) 0%, #2a1a10 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }

        .menu-card-image-wrapper.placeholder {
            background: linear-gradient(135deg, #3d2317 0%, #2a1a10 100%);
        }

        .menu-card-image-wrapper .placeholder-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--gold);
            font-family: 'Oswald', sans-serif;
            font-size: 1.3rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            gap: 0.5rem;
        }

        .menu-card-image-wrapper .placeholder-content i {
            font-size: 2.5rem;
            opacity: 0.7;
        }

        .menu-card-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
            transition: transform 0.5s;
            padding: 8px;
        }

        .menu-card:hover .menu-card-image { transform: scale(1.03); }

        .menu-card-body { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }

        .menu-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 0.5rem;
        }

        .menu-card h3 {
            font-family: 'Oswald', sans-serif;
            font-size: 1.4rem;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .menu-price {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--gold-dark);
            white-space: nowrap;
        }

        .menu-card p {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            line-height: 1.5;
            flex-grow: 1;
        }

        .menu-tags {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-bottom: 0.5rem;
        }

        .tag {
            padding: 0.3rem 0.8rem;
            background: var(--light);
            border-radius: 20px;
            font-size: 0.75rem;
            color: var(--primary);
            font-weight: 600;
            text-transform: uppercase;
        }

        .tag.special {
            background: var(--gold-dark);
            color: var(--white);
        }

        /* Allergens Section — diseño limpio y elegante */
        .allergens {
            background: var(--cream);
            padding: 3.5rem 1.25rem 4rem;
        }

        .allergens .section-header {
            margin-bottom: 2.6rem;
        }

        .allergens .section-header h2 {
            font-size: 2.45rem;
            line-height: 1.12;
            color: var(--dark);
        }

        .allergens .section-header p {
            color: #666;
            max-width: 620px;
            margin: 0 auto;
        }

        .allergens-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(70px, 1fr));
            gap: 1.6rem 1rem;
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        .allergen-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.55rem;
            min-width: 0;
        }

        .allergen-icon {
            width: 74px;
            height: 74px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            background: rgba(255,255,255,0.32);
            border: 2px solid var(--gold-dark);
            box-shadow: 0 5px 14px rgba(92,46,11,0.10);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .allergen-item:hover .allergen-icon {
            transform: translateY(-3px);
            box-shadow: 0 8px 18px rgba(92,46,11,0.16);
        }

        .allergen-icon.gluten { color: #B87516; }
        .allergen-icon.crustaceos { color: #E06442; }
        .allergen-icon.huevos { color: #C9902E; }
        .allergen-icon.pescado { color: #2D7394; }
        .allergen-icon.cacahuetes { color: #98571F; }
        .allergen-icon.soja { color: #5B7437; }
        .allergen-icon.lacteos { color: #7C4E2B; }
        .allergen-icon.frutos-cascara { color: #A14A3C; }
        .allergen-icon.apio { color: #66883B; }
        .allergen-icon.mostaza { color: #C99116; }
        .allergen-icon.sesamo { color: #746B5E; }
        .allergen-icon.sulfitos { color: #8050A0; }
        .allergen-icon.moluscos { color: #2B8E83; }
        .allergen-icon.altramuces { color: #B65A68; }

        .allergen-item span {
            font-size: 0.72rem;
            line-height: 1.15;
            color: #4E4A45;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.3px;
            min-height: 1.65em;
        }

        /* Gallery Section */
        .gallery { background: var(--cream); padding-top: 3.5rem; padding-bottom: 4rem; }

        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .gallery-item {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            height: 320px;
            cursor: pointer;
            box-shadow: var(--shadow);
            background: linear-gradient(135deg, var(--dark) 0%, #2a1a10 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
            transition: transform 0.5s;
            padding: 10px;
        }

        .gallery-item:hover img { transform: scale(1.05); }

        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(26,15,10,0.9));
            padding: 2rem 1.5rem 1.5rem;
            color: var(--white);
            transform: translateY(100%);
            transition: transform 0.3s;
        }

        .gallery-item:hover .gallery-overlay { transform: translateY(0); }

        .gallery-overlay h4, .gallery-overlay .gallery-name {
            display: block;
            font-family: 'Oswald', sans-serif;
            font-size: 1.3rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--gold);
        }

        /* Hours Section */
        .hours-section {
            background: var(--cream);
            padding: 3rem 2rem;
        }

        .hours-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            max-width: 800px;
            margin: 0 auto;
        }

        .hours-card {
            background: var(--cream);
            padding: 1.5rem;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border: 2px solid transparent;
            transition: all 0.3s;
        }

        .hours-card:hover { border-color: var(--gold); }

        .hours-card h3, .hours-card h4 {
            color: var(--primary);
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
        }

        .hours-card p {
            color: #666;
            font-size: 0.95rem;
        }

        .hours-card .status {
            display: inline-block;
            padding: 0.3rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-top: 0.5rem;
        }

        .status.open {
            background: #d4edda;
            color: #155724;
        }

        .status.closed {
            background: #f8d7da;
            color: #721c24;
        }

        /* Info Banner */
        .info-banner {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            color: var(--white);
            padding: 2rem;
            text-align: center;
        }

        .info-banner p {
            font-size: 1rem;
            margin: 0.3rem 0;
            opacity: 0.9;
        }

        .info-banner .highlight {
            color: var(--gold);
            font-weight: 700;
        }

        /* Contact Section */
        .contact {
            background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 100%);
            color: var(--white);
        }

        .contact .section-header h2,
        .contact .section-header p { color: var(--white); }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }

        .contact-info h3 {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--gold);
        }

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .contact-icon {
            width: 50px;
            height: 50px;
            background: rgba(201,169,110,0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
            color: var(--gold);
        }

        .contact-text h4 {
            font-size: 1rem;
            margin-bottom: 0.3rem;
            color: var(--gold);
        }

        .contact-text p, .contact-text a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.3s;
        }

        .contact-text a:hover { color: var(--gold); }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .social-links a {
            width: 45px;
            height: 45px;
            background: rgba(201,169,110,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gold);
            text-decoration: none;
            transition: all 0.3s;
            font-size: 1.2rem;
        }

        .social-links a:hover {
            background: var(--gold);
            color: var(--dark);
            transform: translateY(-3px);
        }

        .map-container {
            background: rgba(255,255,255,0.1);
            border-radius: 20px;
            overflow: hidden;
            height: 100%;
            min-height: 400px;
            position: relative;
        }

        .map-iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 20px;
        }

        /* Footer */
        footer {
            background: var(--dark);
            color: rgba(255,255,255,0.6);
            padding: 2rem;
            text-align: center;
        }

        footer p { font-size: 0.9rem; }

        footer a {
            color: var(--gold);
            text-decoration: none;
        }

        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
            40% { transform: translateX(-50%) translateY(-10px); }
            60% { transform: translateX(-50%) translateY(-5px); }
        }

        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Scroll to top */
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 50px;
            height: 50px;
            background: var(--gold);
            color: var(--dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: all 0.3s;
            box-shadow: var(--shadow);
            z-index: 999;
            border: none;
        }

        .scroll-top.visible { opacity: 1; }

        .scroll-top:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }

        /* Lightbox */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            z-index: 10000;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
        }

        .lightbox.active { display: flex; }

        .lightbox img {
            max-width: 90%;
            max-height: 80vh;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

        .lightbox-caption {
            color: var(--gold);
            font-family: 'Oswald', sans-serif;
            font-size: 1.5rem;
            margin-top: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .lightbox-close {
            position: absolute;
            top: 2rem;
            right: 2rem;
            color: var(--white);
            font-size: 2.5rem;
            cursor: pointer;
            transition: color 0.3s;
            z-index: 10001;
        }

        .lightbox-close:hover { color: var(--gold); }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: var(--white);
            font-size: 3rem;
            cursor: pointer;
            padding: 1rem;
            transition: color 0.3s;
            z-index: 10001;
        }

        .lightbox-nav:hover { color: var(--gold); }

        .lightbox-prev { left: 2rem; }
        .lightbox-next { right: 2rem; }

        /* WhatsApp Float */
        .whatsapp-float {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 60px;
            height: 60px;
            background: #25D366;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
            z-index: 9999;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            text-decoration: none;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--dark);
                flex-direction: column;
                padding: 1rem;
                box-shadow: 0 10px 20px rgba(0,0,0,0.3);
            }

            .nav-links.active { display: flex; }
            .mobile-menu { display: block; }
            .hero h1 { font-size: 2.5rem; }
            .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
            .features { grid-template-columns: 1fr; }
            .menu-grid { grid-template-columns: 1fr; }
            section { padding: 3rem 1.5rem; }
            .allergens-grid { grid-template-columns: repeat(4, 1fr); }
            .menu-card-image-wrapper { height: 240px; }
            .gallery-item { height: 280px; }
        }

        @media (max-width: 480px) {
            .hero h1 { font-size: 1.8rem; }
            .section-header h2 { font-size: 1.8rem; }
            .gallery-grid { grid-template-columns: 1fr; }
            .allergens-grid { grid-template-columns: repeat(3, 1fr); }
            .menu-card-image-wrapper { height: 220px; }
            .gallery-item { height: 260px; }
        }
    
        /* Clases para elementos que tenían inline styles */
        .nav-logo-img {
            width: 36px;
            height: 36px;
            object-fit: contain;
            border-radius: 8px;
        }
        .hero-logo-img {
            width: 120px;
            height: 120px;
            object-fit: contain;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        }
        .map-btn {
            position: absolute;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            padding: 0.8rem 2rem;
            font-size: 0.95rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
    
        .menu-list {
            line-height: 2;
        }
        .hero-logo-wrap {
            margin-bottom: 1.5rem;
        }
/* Páginas secundarias: la cabecera no debe tapar el contenido al cargar */
body:has(.allergens) .navbar,
body:has(.gallery) .navbar {
    position: relative;
    top: auto;
    left: auto;
}

/* Deja respirar el encabezado de las páginas de Alérgenos y Galería */
body:has(.allergens) .allergens,
body:has(.gallery) .gallery {
    padding-top: 4rem;
}

/* Menú móvil estilo El Racó */
@media (max-width: 768px) {
    /* Cabecera móvil compacta: nombre en una sola línea y menú discreto */
    .nav-container {
        padding: 0 1rem;
    }

    .logo {
        font-size: 1.15rem;
        gap: 0.4rem;
        white-space: nowrap;
        line-height: 1;
    }

    .nav-logo-img {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .mobile-menu {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0d0907;
        border: 1px solid rgba(212, 160, 23, 0.45);
        border-radius: 12px;
        box-shadow: 0 3px 9px rgba(0,0,0,0.25);
        padding: 0;
        flex: 0 0 44px;
    }

    /* Tres líneas pequeñas y claramente visibles */
    .mobile-menu i {
        display: block;
        width: 20px;
        height: 2.5px;
        position: relative;
        font-size: 0;
        background: var(--gold);
        border-radius: 3px;
        box-sizing: border-box;
    }

    .mobile-menu i::before,
    .mobile-menu i::after {
        content: '';
        position: absolute;
        left: 0;
        width: 20px;
        height: 2.5px;
        border-radius: 3px;
    }

    .mobile-menu i::before {
        top: -6px;
        background: #b58b43;
    }

    .mobile-menu i::after {
        bottom: -6px;
        background: #e0b86e;
    }
}


/* Acabado unificado: páginas secundarias y fondos cálidos */
body { background: var(--cream); }
body:has(.allergens) .allergens,
body:has(.gallery) .gallery {
    background: var(--cream);
}

@media (max-width: 768px) {
    .allergens { padding: 2.8rem 1rem 3.5rem; }
    .allergens .section-header { margin-bottom: 2rem; }
    .allergens .section-header h2 { font-size: 2.15rem; }
    .allergens .section-header p { font-size: 1rem; }
    .allergens-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.45rem 0.45rem;
        max-width: 520px;
    }
    .allergen-icon {
        width: 62px;
        height: 62px;
        font-size: 1.5rem;
    }
    .allergen-item span {
        font-size: 0.62rem;
        letter-spacing: 0;
    }
    .gallery { padding: 2.8rem 1rem 3.5rem; }
}

@media (max-width: 420px) {
    .allergens-grid { gap: 1.35rem 0.25rem; }
    .allergen-icon { width: 58px; height: 58px; font-size: 1.4rem; }
    .allergen-item span { font-size: 0.58rem; }
}

/* =====================================================================
   MEJORAS (noviembre 2026): accesibilidad, carta, horarios, reservas
   ===================================================================== */

/* --- Utilidades --- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 20000;
    background: var(--gold); color: var(--dark); font-weight: 700;
    padding: 0.7rem 1.2rem; border-radius: 10px; text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }
section[id], main[id] { scroll-margin-top: 80px; }

/* --- Foco visible (doble anillo: se ve sobre fondos claros y oscuros) --- */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #fff;
}
.nav-links a:focus-visible, .mobile-menu:focus-visible { border-radius: 6px; }

/* --- Animaciones: solo si el JS está activo y el usuario no pide menos movimiento --- */
.fade-in { opacity: 1; transform: none; }
.js .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; }
.js .fade-in.visible { opacity: 1; transform: translateY(0); }
.panel-in { animation: fadeInUp 0.4s ease; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .js .fade-in { opacity: 1; transform: none; }
}

/* --- Botón "volver arriba" ya no tapa el de WhatsApp ni es enfocable oculto --- */
.scroll-top { bottom: 6.5rem; }
.scroll-top:not(.visible) { visibility: hidden; pointer-events: none; }

/* --- Cabecera: menú móvil como <button> --- */
.mobile-menu { font-family: inherit; }

/* --- Hero --- */
.reservation-notice {
    margin: 1.25rem auto 0; padding: 0.85rem 1.1rem; text-align: center; line-height: 1.5;
    border-radius: 10px;
}
.reservation-notice--hero {
    max-width: 560px; border: 1px solid var(--gold);
    background: rgba(0,0,0,0.38); color: #fff;
}
.reservation-notice--hero strong:first-child { color: var(--gold); }
.reservation-notice--hero a { color: var(--gold); font-weight: 700; }
.reservation-notice--contact {
    max-width: 680px; padding: 1rem 1.2rem; border: 2px solid #C9A45C; border-radius: 12px;
    background: #F3E7D0; color: #321B10; font-weight: 500; line-height: 1.55;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.reservation-notice--contact strong { color: var(--primary); }
.hero .status, .hoy-estado .status { display: inline-block; padding: 0.35rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
.hero .status { margin-top: 1.1rem; }
.status.soon { background: #fff3cd; color: #664d03; }
.hoy-estado { text-align: center; margin: -1rem 0 2rem; }

/* --- Carta: pestañas, paneles y fichas --- */
.menu-tabs { gap: 0.6rem; }
.menu-tab { min-height: 44px; font-family: inherit; }
.menu-tab[aria-selected="true"] { background: var(--primary); color: var(--gold); border-color: var(--primary); }
.menu-grid[hidden] { display: none; }
button.menu-card-image-wrapper, button.gallery-btn {
    appearance: none; -webkit-appearance: none; border: 0; padding: 0; font: inherit; color: inherit;
}
.menu-card { position: relative; }
.menu-card-body h3 { text-wrap: balance; }
.menu-allergens { margin-top: auto; padding-top: 0.25rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; }
.chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.2rem 0.6rem; border-radius: 14px; font-size: 0.74rem; font-weight: 600;
    background: var(--light); color: var(--primary); border: 1px solid rgba(92,46,11,0.25);
}
.chip i { font-size: 0.78rem; }
.chip--none { font-weight: 400; font-style: italic; border-style: dashed; }
.salsa-note { font-size: 0.78rem; color: #5a4a3d; margin-top: 0.45rem; }
.salsa-note i { margin-right: 0.3rem; }

/* Listas de precios (bebidas y tostadas) */
.price-list { margin: 0.25rem 0 0.5rem; }
.price-list > div { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; }
.price-list dt { font-weight: 600; color: #3a2a20; }
.price-list dd { flex: 1 1 auto; display: flex; align-items: baseline; font-weight: 700; color: var(--gold-dark); white-space: nowrap; margin: 0; }
.price-list dd::before { content: ''; flex: 1 1 auto; min-width: 1rem; margin: 0 0.5rem; border-bottom: 2px dotted rgba(139,107,46,0.55); transform: translateY(-3px); }
.menu-card .menu-card-body > .price-list { margin-bottom: 0.75rem; }

/* Bloque informativo bajo la carta */
.carta-nota {
    max-width: 760px; margin: 2rem auto 0; padding: 1rem 1.25rem; text-align: center;
    background: #F9F2E7; border: 1px solid rgba(139,107,46,0.35); border-radius: 14px;
    color: #4a3a2f; font-size: 0.95rem;
}
.carta-nota a { color: var(--primary); font-weight: 700; }

/* --- Galería: figuras con botón (teclado y táctil) --- */
.gallery-item { cursor: default; }
button.gallery-btn {
    position: absolute; inset: 0; width: 100%; height: 100%; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gallery-overlay { pointer-events: none; }
.gallery-item:focus-within .gallery-overlay { transform: translateY(0); }
@media (hover: none) { .gallery-overlay { transform: translateY(0); } }
.gallery-overlay p { font-size: 0.9rem; opacity: 0.95; }

/* --- Lightbox accesible --- */
.lightbox-close, .lightbox-nav { background: none; border: 0; font-family: inherit; line-height: 1; padding: 0.5rem 1rem; }
.lightbox-close { cursor: pointer; }
.lightbox-caption { text-align: center; padding: 0 1rem; }
.lightbox[hidden] { display: none; }

/* --- Horarios y reservas --- */
.reservas { background: var(--light); }
.reserva-form {
    max-width: 680px; margin: 0 auto; padding: 1.75rem; background: var(--cream);
    border: 2px solid var(--gold); border-radius: 18px; box-shadow: var(--shadow);
}
.reserva-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.reserva-grid .full { grid-column: 1 / -1; }
.reserva-form label { display: block; font-weight: 600; color: var(--primary); margin-bottom: 0.3rem; font-size: 0.95rem; }
.reserva-form input, .reserva-form textarea {
    width: 100%; min-height: 46px; padding: 0.65rem 0.8rem; font: inherit; font-size: 1rem;
    color: var(--dark); background: #fff; border: 2px solid var(--primary-light); border-radius: 10px;
}
.reserva-form textarea { min-height: 90px; resize: vertical; }
.reserva-form input[aria-invalid="true"] { border-color: #b3261e; background: #fff6f5; }
.reserva-form .ayuda { font-size: 0.82rem; color: #5a4a3d; margin-top: 0.25rem; }
.reserva-form .error-msg.ok { color: #155724; }
.reserva-form .error-msg { color: #8c1d18; font-weight: 600; font-size: 0.9rem; margin-top: 1rem; min-height: 1.2em; }
.reserva-form .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
.reserva-alt { text-align: center; margin-top: 1.25rem; color: #4a3a2f; font-size: 0.95rem; }
.reserva-alt a { color: var(--primary); font-weight: 700; }
@media (max-width: 560px) { .reserva-grid { grid-template-columns: 1fr; } .reserva-form { padding: 1.25rem; } }

/* --- Contacto --- */
.contact-text a { overflow-wrap: anywhere; }
.contact-extra { margin-top: 1.25rem; }
.contact-extra a { color: var(--gold); font-weight: 600; }

/* --- Alérgenos: lista por plato --- */
.allergens .section-header h1 { font-family: 'Playfair Display', serif; font-size: 2.45rem; line-height: 1.12; color: var(--dark); margin-bottom: 0.5rem; }
.section-header h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--primary); margin-bottom: 0.5rem; }
.aviso-alergenos {
    max-width: 820px; margin: 0 auto 2.5rem; padding: 1.1rem 1.4rem;
    background: #F3E7D0; border: 2px solid #C9A45C; border-radius: 14px; color: #321B10; line-height: 1.55;
}
.aviso-alergenos strong { color: var(--primary); }
.dish-section { max-width: 900px; margin: 3rem auto 0; }
.dish-section h2 { font-family: 'Playfair Display', serif; color: var(--primary); font-size: 1.7rem; margin-bottom: 1rem; text-align: left; }
.dish-list { list-style: none; border-top: 1px solid rgba(92,46,11,0.25); }
.dish-row {
    display: grid; grid-template-columns: minmax(150px, 0.8fr) 2fr; gap: 0.4rem 1.25rem;
    padding: 0.8rem 0.2rem; border-bottom: 1px solid rgba(92,46,11,0.25); align-items: center;
}
.dish-row strong { color: var(--dark); }
.dish-row small { display: block; color: #5a4a3d; font-size: 0.8rem; font-weight: 400; }
@media (max-width: 600px) { .dish-row { grid-template-columns: 1fr; } }
.allergens-legend-title { text-align: center; font-family: 'Playfair Display', serif; color: var(--primary); font-size: 1.6rem; margin: 0 0 1.5rem; }
.allergens-grid { margin-bottom: 1rem; }

/* --- Pie --- */
footer a { text-underline-offset: 3px; }
footer .footer-links { margin-top: 0.4rem; }
footer p { color: rgba(255,255,255,0.8); }

/* --- Sección de enlaces secundarios --- */
.enlaces-secundarios { background: var(--cream); padding: 3rem 2rem; text-align: center; }
.enlaces-secundarios .btn-outline { border-color: var(--primary); color: var(--primary); }
.enlaces-secundarios .btn-outline:hover { background: var(--primary); color: var(--gold); }

/* =====================================================================
   OPTIMIZACIÓN MÓVIL
   ===================================================================== */
@media (max-width: 600px) {
    section { padding: 2.5rem 1.1rem; }
    .section-header { margin-bottom: 1.75rem; }
    .section-header h1, .section-header h2 { font-size: 1.9rem; }
    .section-header p { font-size: 1rem; }

    /* Hero más compacto: cabe todo sin sentir una pared de texto */
    .hero { min-height: 100svh; padding-top: 72px; padding-bottom: 2rem; }
    .hero-logo-img { width: 84px; height: 84px; border-radius: 16px; }
    .hero-logo-wrap { margin-bottom: 1rem; }
    .hero-subtitle { font-size: 1.05rem; line-height: 1.45; margin-bottom: 1rem; }
    .hero-location { font-size: 0.92rem; line-height: 1.4; margin-bottom: 1.25rem; }
    .hero .btn-group { flex-direction: column; gap: 0.7rem; width: 100%; max-width: 320px; margin: 0 auto; }
    .hero .btn { width: 100%; justify-content: center; padding: 0.85rem 1.25rem; min-height: 48px; }
    .reservation-notice--hero { font-size: 0.88rem; padding: 0.7rem 0.9rem; margin-top: 1rem; }
    .scroll-indicator { display: none; }

    /* Pestañas de la carta: una sola fila deslizable en vez de 5 filas */
    .menu-tabs {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 0.5rem;
        margin: 0 -1.1rem 1.5rem; padding: 0.3rem 1.1rem 0.6rem;
        scroll-snap-type: x proximity; scroll-padding-left: 1.1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .menu-tabs::-webkit-scrollbar { display: none; }
    .menu-tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; padding: 0.6rem 1rem; font-size: 0.8rem; letter-spacing: 0.5px; }

    /* Fichas */
    .menu-grid { gap: 1.1rem; }
    .menu-card-image-wrapper { height: 200px; }
    .menu-card-body { padding: 1.1rem; }
    .menu-card h3 { font-size: 1.2rem; }
    .menu-price { font-size: 1.15rem; }
    .menu-card p { font-size: 0.95rem; }
    .chip { font-size: 0.72rem; }

    /* Botones flotantes pequeños y sin tapar contenido; "arriba" no hace falta en móvil */
    .scroll-top { display: none; }
    .whatsapp-float { width: 50px; height: 50px; font-size: 1.6rem; bottom: 1rem; right: 1rem; }
    body { padding-bottom: 4.5rem; }

    /* Menú desplegable: filas táctiles grandes */
    .nav-links a { display: block; padding: 0.9rem 0.5rem; font-size: 1rem; }
    .nav-links li + li { border-top: 1px solid rgba(255,255,255,0.1); }

    /* Otros bloques */
    .info-banner { padding: 1.5rem 1.1rem; }
    .info-banner p { font-size: 0.95rem; line-height: 1.5; }
    .hours-grid { gap: 1rem; }
    .map-container { min-height: 320px; }
    .map-btn { width: calc(100% - 2rem); justify-content: center; }
    .gallery-item { height: 260px; }
    .allergen-icon { width: 60px; height: 60px; font-size: 1.5rem; }
    .carta-nota { font-size: 0.92rem; }
    .contact-grid { gap: 1.5rem; }
}