/* ========================================
   TOFU ASIAN BUFFET — ULTRA PREMIUM STYLES v2
   Mobile-First · Dark Theme · Asian Elegance
   ======================================== */
:root {
    --primary: #C8282A;
    --primary-light: #E04040;
    --primary-dark: #8B0000;
    --primary-glow: rgba(200,40,42,0.35);
    --accent: #D4AF37;
    --accent-light: #F0D060;
    --gold: #D4AF37;
    --bg-dark: #08080D;
    --bg-card: #0F0F18;
    --bg-card-hover: #181825;
    --bg-surface: #131320;
    --bg-elevated: #1C1C2C;
    --text-white: #FFFFFF;
    --text-light: #E8E0D0;
    --text-gray: #A09898;
    --text-muted: #5C5060;
    --success: #25D366;
    --danger: #E53935;
    --border: rgba(255,255,255,0.06);
    --border-light: rgba(255,255,255,0.10);
    --shadow-primary: rgba(200,40,42,0.28);
    --shadow-deep: rgba(0,0,0,0.65);
    --gradient-premium: linear-gradient(135deg, #C8282A 0%, #8B0000 100%);
    --gradient-gold: linear-gradient(135deg, #D4AF37, #F0D060);
    --gradient-card: linear-gradient(160deg, #131320 0%, #0A0A10 100%);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --font-display: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;
    --font-serif: 'Noto Serif', serif;
    --ease-premium: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    font-size: 16px;
    line-height: 1.5;
}
img { max-width:100%; height:auto; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:4px; }

/* ====== WELCOME SCREEN ====== */
.welcome-screen {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:var(--bg-dark);
    display:flex; align-items:center; justify-content:center;
    z-index:10000; overflow:hidden;
}
.welcome-overlay {
    position:absolute; top:0; left:0; width:100%; height:100%;
    background: radial-gradient(ellipse at center, rgba(200,40,42,0.10) 0%, transparent 60%),
                radial-gradient(ellipse at 20% 80%, rgba(139,0,0,0.07) 0%, transparent 50%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path d="M30 5 L35 20 L50 20 L38 30 L42 45 L30 36 L18 45 L22 30 L10 20 L25 20Z" fill="none" stroke="rgba(212,175,55,0.04)" stroke-width="1"/></svg>') repeat;
    z-index:0;
}
.welcome-particles { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.welcome-particle { position:absolute; opacity:0; animation: floatP 8s infinite ease-in-out; }
@keyframes floatP {
    0%  { opacity:0; transform:translateY(100vh) rotate(0) scale(.5); }
    15% { opacity:.6; }
    85% { opacity:.6; }
    100%{ opacity:0; transform:translateY(-10vh) rotate(360deg) scale(1); }
}

.welcome-content {
    position:relative; z-index:2; text-align:center;
    padding:28px 24px; width:100%; max-width:500px;
    animation: fadeUp 1.2s var(--ease-premium);
}
@keyframes fadeUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }

/* Logo container */
.welcome-logo-container {
    width:220px; height:220px; margin:0 auto 20px;
    position:relative; display:flex; align-items:center; justify-content:center;
}
.welcome-logo-glow {
    position:absolute; width:170px; height:170px;
    background:radial-gradient(circle, rgba(200,40,42,0.22) 0%, transparent 70%);
    border-radius:50%; animation: glowPulse 3s infinite ease-in-out;
}
@keyframes glowPulse { 0%,100% { opacity:.4; transform:scale(1); } 50% { opacity:1; transform:scale(1.25); } }
.welcome-logo-ring {
    position:absolute; width:100%; height:100%;
    border-radius:50%;
    border:2px solid rgba(200,40,42,0.18);
    animation: ringPulse 3s infinite ease-in-out;
}
.welcome-logo-ring.ring2 {
    width:115%; height:115%;
    border-color:rgba(212,175,55,0.12);
    animation-delay:1.5s; animation-duration:4s;
}
@keyframes ringPulse { 0%,100% { opacity:.3; transform:scale(1); } 50% { opacity:.8; transform:scale(1.06); } }

.welcome-logo-img {
    width:84%; height:84%; object-fit:contain;
    animation: logoEntrance 1.5s var(--ease-premium), logoFloat 4s 1.5s infinite ease-in-out;
    filter: drop-shadow(0 0 40px rgba(200,40,42,0.30));
}
@keyframes logoEntrance {
    0%  { opacity:0; transform:scale(0.3) rotate(-15deg); }
    60% { opacity:1; transform:scale(1.08) rotate(3deg); }
    100%{ transform:scale(1) rotate(0); }
}
@keyframes logoFloat { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-10px) scale(1.02); } }

/* Welcome title */
.welcome-title {
    font-family:var(--font-display); font-size:26px; font-weight:700;
    letter-spacing:2px; color:var(--text-white);
    text-shadow:0 0 40px rgba(200,40,42,0.3);
    margin-bottom:4px; line-height:1.2;
}
.welcome-subtitle {
    font-family:var(--font-serif); font-size:14px; color:var(--accent);
    letter-spacing:1px; font-style:italic; margin-bottom:18px;
}

.welcome-divider { display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0 18px; }
.divider-line { height:1px; width:70px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.divider-diamond { color:var(--accent); font-size:14px; animation: sparkle 2s infinite; }
@keyframes sparkle { 0%,100% { opacity:.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.3); } }

/* Price cards on welcome */
.welcome-prices {
    display:grid; grid-template-columns:1fr; gap:10px; margin:0 0 24px;
}
@media(min-width:440px) { .welcome-prices { grid-template-columns:repeat(3,1fr); } }

.price-card-welcome {
    background:linear-gradient(160deg, rgba(200,40,42,0.10), rgba(139,0,0,0.06));
    border:1px solid rgba(200,40,42,0.22); border-radius:var(--radius-md);
    padding:16px 12px; position:relative; overflow:hidden;
    transition:all .3s; cursor:pointer;
}
.price-card-welcome:hover { border-color:var(--primary); transform:translateY(-3px); }
.price-card-welcome.price-special {
    background:linear-gradient(160deg, rgba(212,175,55,0.12), rgba(200,40,42,0.08));
    border-color:rgba(212,175,55,0.30);
}
.price-card-welcome.price-kids {
    background:linear-gradient(160deg, rgba(200,40,42,0.07), rgba(0,0,0,0.1));
    border-color:rgba(200,40,42,0.15);
}
.price-badge {
    font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    background:var(--gradient-gold); color:#000; padding:3px 8px;
    border-radius:20px; display:inline-block; margin-bottom:6px;
}
.kids-badge { background:var(--gradient-premium); color:#fff; }
.price-days { font-size:11px; color:var(--text-gray); margin-bottom:4px; }
.price-amount { font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--accent); line-height:1; }
.price-note { font-size:10px; color:var(--text-muted); margin-top:4px; }

.welcome-message {
    font-size:15px; color:var(--text-gray); line-height:1.8;
    margin-bottom:28px; padding:0 8px; font-weight:400;
}
.welcome-message strong { color:var(--accent); font-weight:700; }

/* Welcome CTA button */
.welcome-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:12px;
    padding:18px 52px; background:var(--gradient-premium);
    border:none; border-radius:60px; color:#fff;
    font-size:17px; font-weight:700; font-family:var(--font-body);
    cursor:pointer; transition:all .4s var(--ease-premium);
    box-shadow:0 10px 40px var(--shadow-primary), inset 0 0 0 1px rgba(255,255,255,.08);
    letter-spacing:.5px; margin-bottom:20px;
}
.welcome-btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 16px 50px var(--shadow-primary); }
.welcome-btn:active { transform:translateY(0) scale(.98); }

.welcome-wa {
    display:inline-flex; align-items:center; gap:8px;
    color:var(--success); font-size:15px; font-weight:600;
    text-decoration:none;
}
.welcome-wa i { font-size:20px; }
.welcome-wa:hover { opacity:.8; }

/* ====== APP HEADER ====== */
.app-header {
    background:rgba(8,8,13,0.96); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
    padding:10px 20px; z-index:50; position:relative;
    transition: transform .4s var(--ease-premium), opacity .4s ease, max-height .5s ease, padding .4s ease;
    will-change: transform, opacity, max-height;
}
/* Header se oculta al hacer scroll hacia abajo — slides up smoothly */
.app-header.header-scrolled-up { transform:translateY(0); opacity:1; max-height:120px; padding:10px 20px; }
.app-header.header-scrolled-down { transform:translateY(-100%); opacity:0; pointer-events:none; padding:0; max-height:0; overflow:hidden; }
.app-header.hidden { transform:translateY(-100%); opacity:0; pointer-events:none; }
.header-inner {
    display:flex; align-items:center; justify-content:space-between;
    max-width:840px; margin:0 auto;
}
.header-brand { display:flex; align-items:center; gap:14px; }
.header-logo-img {
    width:64px; height:64px; object-fit:contain;
    filter:drop-shadow(0 0 14px rgba(200,40,42,.35));
    transition: transform .3s;
    border-radius:12px;
}
.header-logo-img:hover { transform:scale(1.08); }
.header-text { text-align:left; }
.header-title { font-family:var(--font-display); font-size:20px; font-weight:700; line-height:1.1; letter-spacing:1px; }
.header-tagline {
    font-family:var(--font-serif); font-size:16px; color:var(--accent); font-style:italic;
    font-weight:600; letter-spacing:.5px; line-height:1.3;
    text-shadow: 0 0 20px rgba(212,175,55,.4);
}
.cart-btn {
    position:relative; width:48px; height:48px;
    background:var(--bg-surface); border:1px solid var(--border); border-radius:50%;
    color:#fff; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .3s;
}
.cart-btn:hover { background:var(--primary); border-color:var(--primary); box-shadow:0 4px 20px var(--shadow-primary); }
.cart-badge {
    position:absolute; top:-4px; right:-4px;
    min-width:22px; height:22px;
    background:var(--gradient-premium); border-radius:12px;
    color:#fff; font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    padding:0 5px; border:2px solid var(--bg-dark);
}

/* ====== PROMO BAR (2 Horizontal Buttons) ====== */
.promo-bar {
    display:flex; gap:10px; padding:10px 20px;
    max-width:840px; margin:0 auto;
    transition: transform .4s ease, opacity .4s ease, max-height .4s ease;
}
.promo-bar.hidden { transform:translateY(-30px); opacity:0; max-height:0; padding:0; overflow:hidden; margin:0 auto; }
.promo-pill {
    flex:1; padding:13px 16px;
    background:linear-gradient(135deg, rgba(200,40,42,0.12), rgba(139,0,0,0.08));
    border:1px solid rgba(200,40,42,0.22);
    border-radius:60px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:all .3s var(--ease-premium);
    font-family:var(--font-body);
}
.promo-pill span {
    font-size:13px; font-weight:700; color:var(--text-white);
    letter-spacing:.3px;
}
.promo-pill i { color:var(--accent); font-size:15px; }
.promo-pill:hover {
    background:linear-gradient(135deg, rgba(200,40,42,0.22), rgba(139,0,0,0.16));
    border-color:var(--primary);
    transform:translateY(-2px);
    box-shadow:0 6px 24px rgba(200,40,42,.22);
}
.promo-pill:active { transform:scale(.97); }

/* ====== CATEGORY NAV (STICKY — independent from header) ====== */
.category-nav-sticky-wrap {
    position:sticky; top:0; z-index:200;
    background:var(--bg-dark);
    will-change:auto;
}
.category-nav {
    position:relative;
    background:rgba(8,8,13,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    padding:10px 0 12px; border-bottom:1px solid var(--border);
    box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.category-nav-inner {
    display:flex; gap:6px; padding:0 16px;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    max-width:860px; margin:0 auto;
}
.category-nav-inner::-webkit-scrollbar { display:none; }

.cat-chip {
    flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:6px 10px 8px; background:transparent;
    border:2px solid transparent; border-radius:var(--radius-md);
    cursor:pointer; transition:all .3s; min-width:66px;
    font-family:var(--font-body); position:relative;
}
.cat-chip-icon {
    width:50px; height:50px; border-radius:50%; overflow:hidden;
    background:var(--bg-surface); border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    transition:all .3s; box-shadow:0 2px 10px rgba(0,0,0,.2);
    font-size:22px;
}
.cat-chip-img { width:100%; height:100%; object-fit:cover; }
/* Logo chip especial */
.cat-chip-icon-logo { background:var(--bg-dark) !important; border-color:var(--primary) !important; }
.cat-logo-img { object-fit:contain !important; padding:4px; background:var(--bg-dark); }
.cat-chip-logo.active .cat-chip-icon-logo {
    box-shadow:0 0 22px var(--shadow-primary), 0 0 8px var(--primary-glow) !important;
}
.cat-chip-label {
    font-size:10px; font-weight:700; color:var(--text-muted);
    transition:all .3s; white-space:nowrap; letter-spacing:.5px;
    text-transform:uppercase;
}
.cat-chip.active .cat-chip-icon {
    border-color:var(--primary); box-shadow:0 0 18px var(--shadow-primary), 0 0 6px var(--primary-glow);
    transform:scale(1.06);
}
.cat-chip.active .cat-chip-label { color:var(--primary-light); }
.cat-chip.active::after {
    content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:20px; height:3px; background:var(--gradient-premium); border-radius:3px;
}
.cat-chip:not(.active):hover .cat-chip-icon {
    border-color:rgba(200,40,42,.35); transform:scale(1.04);
}

/* ====== MENU SECTIONS ====== */
.menu-content { padding:24px 20px 120px; max-width:840px; margin:0 auto; position:relative; z-index:0; }
.menu-section { margin-bottom:40px; }
.section-header { text-align:center; margin-bottom:22px; }
.section-title { font-family:var(--font-display); font-size:26px; font-weight:700; margin-bottom:6px; letter-spacing:1px; }
.section-desc { font-size:14px; color:var(--text-gray); margin-bottom:12px; font-family:var(--font-serif); font-style:italic; }
.section-line { width:56px; height:3px; background:var(--gradient-premium); border-radius:3px; margin:0 auto; }

/* Section banner image */
.section-banner {
    width:100%; height:200px; border-radius:var(--radius-lg); overflow:hidden;
    position:relative; margin-bottom:20px;
}
.section-banner img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s;
}
.section-banner:hover img { transform:scale(1.04); }
.section-banner-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background:linear-gradient(transparent, rgba(8,8,13,.85));
    padding:20px 20px 14px;
}
.section-banner-label {
    font-family:var(--font-display); font-size:18px; font-weight:700;
    color:#fff; text-align:left; letter-spacing:1px;
}

/* ====== PRODUCT CARD GRID (menu items) ====== */
.donut-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media(min-width:600px) { .donut-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px) { .donut-grid { grid-template-columns:repeat(4,1fr); } }

.donut-card {
    background:var(--gradient-card); border:1px solid var(--border);
    border-radius:var(--radius-lg); overflow:hidden;
    transition:all .4s var(--ease-premium); position:relative;
}
.donut-card:hover {
    transform:translateY(-5px);
    border-color:rgba(200,40,42,.25);
    box-shadow:0 14px 44px rgba(0,0,0,.45);
}
.donut-img-wrapper {
    position:relative; width:100%; aspect-ratio:1;
    background:var(--bg-dark); overflow:hidden; cursor:pointer;
}
.donut-card-img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s;
}
.donut-card:hover .donut-card-img { transform:scale(1.07); }
.donut-img-wrapper::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:linear-gradient(135deg,var(--bg-surface) 25%,var(--bg-elevated) 50%,var(--bg-surface) 75%);
    background-size:200% 200%; animation:shimmer 1.5s infinite;
    z-index:1; opacity:1; transition:opacity .3s;
}
.donut-img-wrapper.loaded::before { opacity:0; pointer-events:none; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

/* Emoji fallback placeholder */
.emoji-placeholder {
    width:100%; height:100%; background:var(--bg-elevated);
    display:flex; align-items:center; justify-content:center;
    font-size:40px;
}

.donut-card-body { padding:12px 14px 14px; text-align:left; }
.donut-card-name {
    font-family:var(--font-serif); font-size:15px; font-weight:700;
    margin-bottom:4px; line-height:1.25; color:var(--text-white);
}
.donut-card-desc { font-size:12px; color:var(--text-gray); margin-bottom:10px; line-height:1.5; }
.donut-card-footer { display:flex; align-items:center; justify-content:space-between; }
.donut-card-price { font-size:20px; font-weight:800; color:var(--accent); }

.donut-add-btn {
    width:36px; height:36px; background:var(--gradient-premium);
    border:none; border-radius:50%; color:#fff; font-size:14px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .3s; box-shadow:0 4px 14px var(--shadow-primary);
}
.donut-add-btn:hover { transform:scale(1.14); }
.donut-add-btn:active { transform:scale(.93); }

.donut-qty-controls, .item-qty-controls {
    display:flex; align-items:center; gap:8px;
}
.donut-qty-btn, .item-qty-btn {
    width:30px; height:30px; background:var(--bg-elevated);
    border:1px solid var(--border-light); border-radius:50%;
    color:#fff; font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .2s;
}
.donut-qty-btn:hover, .item-qty-btn:hover { background:var(--primary); border-color:var(--primary); }
.donut-qty-btn.minus:hover, .item-qty-btn.minus:hover { background:var(--danger); border-color:var(--danger); }
.donut-qty-val, .item-qty-val { font-size:15px; font-weight:800; min-width:22px; text-align:center; }

/* ====== PRODUCT DETAIL MODAL ====== */
.modal-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,.87); backdrop-filter:blur(12px);
    z-index:9000; display:none; align-items:center; justify-content:center;
    padding:16px;
}
.modal-overlay.active { display:flex; }
.modal-box {
    background:var(--bg-dark); border:1px solid var(--border-light);
    border-radius:var(--radius-lg); width:100%; max-width:480px;
    max-height:92vh; overflow-y:auto;
    animation:modalIn .3s ease; position:relative;
}
@keyframes modalIn { from { opacity:0; transform:scale(.94) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } }
.modal-close-x {
    position:absolute; top:14px; right:14px; z-index:10;
    width:38px; height:38px; background:rgba(0,0,0,.55);
    border:1px solid var(--border); border-radius:50%;
    color:#fff; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .2s; backdrop-filter:blur(8px);
}
.modal-close-x:hover { background:var(--danger); border-color:var(--danger); }

.product-detail-box { padding:0; }
.pd-img-wrap {
    width:100%; aspect-ratio:1; overflow:hidden;
    background:var(--bg-surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.pd-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.pd-info { padding:22px; }
.pd-info h3 {
    font-family:var(--font-display); font-size:22px; font-weight:700;
    margin-bottom:8px; letter-spacing:.5px;
}
.pd-desc { font-size:14px; color:var(--text-gray); margin-bottom:16px; line-height:1.6; font-family:var(--font-serif); }
.pd-prices { margin-bottom:18px; }
.pd-size-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0; border-bottom:1px solid var(--border);
}
.pd-size-label { font-size:15px; color:var(--text-light); font-weight:500; }
.pd-size-price { font-size:20px; font-weight:800; color:var(--accent); }
.pd-single-price { font-size:32px; font-weight:800; color:var(--accent); text-align:center; padding:10px 0; }

.pd-add-btns {
    display:flex; gap:10px; flex-wrap:wrap;
}
.pd-add-btns .btn-gradient { flex:1; min-width:140px; }

/* ====== PROMO MODAL (Registration / Club) ====== */
.promo-modal-box { max-width:520px; }
.promo-modal-header { text-align:center; padding:28px 22px 16px; }
.promo-modal-icon { font-size:48px; margin-bottom:10px; }
.promo-modal-header h3 {
    font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:1px;
}
.promo-modal-body { padding:0 22px 26px; }
.promo-modal-desc {
    font-size:15px; color:var(--text-light); line-height:1.7;
    margin-bottom:20px; text-align:center; font-family:var(--font-serif);
}
.promo-modal-desc strong { color:var(--accent); }
.promo-modal-note {
    font-size:13px; color:var(--text-muted); text-align:center;
    margin-top:16px; line-height:1.6;
}
.promo-modal-note strong { color:var(--primary-light); }

.promo-steps { margin-bottom:16px; }
.promo-step {
    display:flex; align-items:center; gap:14px;
    padding:12px 0; border-bottom:1px solid var(--border);
}
.promo-step:last-child { border-bottom:none; }
.step-num {
    width:32px; height:32px; background:var(--gradient-premium);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:800; color:#fff; flex-shrink:0;
}
.promo-step span { font-size:14px; color:var(--text-light); text-align:left; }

.benefits-list { margin-bottom:20px; }
.benefit-item {
    display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border);
    text-align:left;
}
.benefit-item:last-child { border-bottom:none; }
.benefit-item i {
    font-size:22px; color:var(--accent); margin-top:3px; width:28px;
    flex-shrink:0; text-align:center;
}
.benefit-item strong { font-size:15px; display:block; margin-bottom:3px; }
.benefit-item p { font-size:13px; color:var(--text-muted); margin:0; line-height:1.5; }

.promo-form-divider {
    text-align:center; margin:20px 0 16px; position:relative;
}
.promo-form-divider::before {
    content:''; position:absolute; top:50%; left:0; right:0;
    height:1px; background:var(--border);
}
.promo-form-divider span {
    position:relative; background:var(--bg-dark); padding:0 16px;
    font-size:12px; color:var(--text-muted); font-weight:600;
    text-transform:uppercase; letter-spacing:.8px;
}

.promo-form {}
.promo-result { margin-top:16px; }

/* Form fields shared */
.form-field { margin-bottom:14px; text-align:left; }
.form-field label {
    display:block; font-size:11px; font-weight:700; color:var(--text-muted);
    margin-bottom:6px; text-transform:uppercase; letter-spacing:.7px;
}
.form-field input, .form-field textarea {
    width:100%; padding:14px 16px; background:var(--bg-surface);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    color:#fff; font-size:15px; font-family:var(--font-body); outline:none;
    transition:border-color .3s;
}
.form-field input:focus, .form-field textarea:focus {
    border-color:var(--primary); box-shadow:0 0 0 3px rgba(200,40,42,.10);
}
.form-field input::placeholder, .form-field textarea::placeholder { color:var(--text-muted); }
.form-field textarea { height:70px; resize:vertical; }

/* ====== HEADER NAV BUTTON (hamburguer - REMOVED from header, now floating) ====== */
.btn-header-nav {
    width:44px; height:44px; background:var(--bg-surface);
    border:1px solid var(--border); border-radius:50%;
    color:#fff; font-size:17px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .3s;
}
.btn-header-nav:hover { background:var(--primary); border-color:var(--primary); }
.btn-header-account {
    display:flex; align-items:center; gap:7px;
    padding:9px 16px; background:var(--bg-surface);
    border:1px solid var(--border); border-radius:60px;
    color:var(--text-light); font-size:13px; font-weight:600;
    font-family:var(--font-body); cursor:pointer;
    transition:all .3s;
}
.btn-header-account:hover { background:rgba(212,175,55,.1); border-color:rgba(212,175,55,.3); color:var(--accent); }
.btn-header-account i { font-size:18px; }

/* ── HEADER ACCIONES ── */
.header-actions-row {
    display:flex; align-items:center; gap:10px;
}

/* Gradient button */
.btn-gradient {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 24px; background:var(--gradient-premium);
    border:none; border-radius:60px; color:#fff;
    font-size:15px; font-weight:700; font-family:var(--font-body);
    cursor:pointer; transition:all .3s;
    box-shadow:0 6px 24px var(--shadow-primary);
}
.btn-gradient:hover { transform:translateY(-2px); box-shadow:0 10px 32px var(--shadow-primary); }
.btn-gradient:active { transform:scale(.97); }
.btn-gradient.full { width:100%; }

/* Success / Error messages */
.success-box {
    background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.2);
    border-radius:var(--radius-md); padding:20px; text-align:center;
}
.success-box i { font-size:36px; color:var(--success); margin-bottom:10px; display:block; }
.success-box p { font-size:14px; color:var(--text-light); margin-bottom:6px; line-height:1.6; }
.success-box strong { color:var(--accent); }
.promo-result .err, .coupon-result .err {
    color:var(--danger); font-size:14px; text-align:center; padding:10px;
}

/* ====== COUPON MODAL ====== */
.coupon-modal-box { max-width:430px; padding:24px; }
.coupon-modal-box h3 {
    font-family:var(--font-display); font-size:21px; font-weight:600;
    margin-bottom:8px; display:flex; align-items:center; gap:10px;
}
.coupon-modal-box h3 i { color:var(--accent); }
.modal-sub { font-size:14px; color:var(--text-muted); margin-bottom:18px; }
.coupon-result { margin-top:16px; }

.coupon-found, .coupon-progress, .coupon-not-found {
    text-align:center; padding:20px;
    border-radius:var(--radius-md);
}
.coupon-found { background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.2); }
.coupon-found i { font-size:36px; color:var(--success); margin-bottom:10px; display:block; }
.coupon-found p { font-size:14px; color:var(--text-light); margin-bottom:6px; }
.coupon-found strong { color:var(--accent); }
.coupon-code-display {
    display:inline-block; padding:10px 28px; margin:14px 0;
    background:var(--gradient-premium); border-radius:60px;
    font-size:20px; font-weight:800; color:#fff;
    letter-spacing:1px;
}

.coupon-progress { background:rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.18); }
.coupon-progress i { font-size:32px; color:var(--accent); margin-bottom:10px; display:block; }
.coupon-progress p { font-size:14px; color:var(--text-light); margin-bottom:6px; }
.coupon-progress strong { color:var(--accent); }
.progress-bar-wrap {
    width:100%; height:10px; background:var(--bg-surface);
    border-radius:5px; margin:14px 0 6px; overflow:hidden;
}
.progress-bar {
    height:100%; background:var(--gradient-premium); border-radius:5px;
    transition:width .5s ease;
}
.progress-label { font-size:13px; color:var(--text-muted); }

.coupon-not-found { background:rgba(229,57,53,.06); border:1px solid rgba(229,57,53,.15); }
.coupon-not-found i { font-size:32px; color:var(--danger); margin-bottom:10px; display:block; }
.coupon-not-found p { font-size:14px; color:var(--text-gray); }

/* ====== CART MODAL ====== */
.cart-modal-box { max-width:540px; width:95%; }
.cart-modal-header { padding:22px 22px 14px; text-align:left; border-bottom:1px solid var(--border); }
.cart-modal-header h3 {
    font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:.5px;
    display:flex; align-items:center; gap:10px;
}
.cart-modal-header h3 i { color:var(--accent); }
.cart-items-list { padding:0 22px; max-height:280px; overflow-y:auto; }
.cart-item {
    display:flex; align-items:center; gap:14px;
    padding:14px 0; border-bottom:1px solid var(--border);
}
.cart-item:last-child { border-bottom:none; }
.cart-item-emoji { font-size:28px; flex-shrink:0; }
.cart-item-info { flex:1; text-align:left; }
.cart-item-name { font-size:15px; font-weight:600; margin-bottom:2px; }
.cart-item-size { font-size:12px; color:var(--text-muted); }
.cart-item-price { font-size:16px; font-weight:800; color:var(--accent); }
.cart-item-qty {
    display:flex; align-items:center; gap:8px;
}
.cart-item-qty button {
    width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
    background:var(--bg-elevated); color:#fff; font-size:12px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .2s;
}
.cart-item-qty button:hover { background:var(--primary); border-color:var(--primary); }
.cart-qty-num { font-size:15px; font-weight:700; min-width:20px; text-align:center; }

.cart-footer { padding:18px 22px 22px; }
.cart-total-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 0; border-top:1px solid var(--border); margin-bottom:16px;
}
.cart-total-label { font-size:15px; color:var(--text-gray); }
.cart-total-price { font-size:24px; font-weight:800; color:var(--accent); }
.cart-notes-input {
    width:100%; padding:12px 14px; background:var(--bg-surface);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    color:#fff; font-size:14px; font-family:var(--font-body);
    resize:vertical; min-height:60px; outline:none; margin-bottom:14px;
}
.cart-notes-input:focus { border-color:var(--primary); }
.cart-notes-input::placeholder { color:var(--text-muted); }
.cart-empty { padding:40px 22px; text-align:center; }
.cart-empty i { font-size:44px; color:var(--text-muted); margin-bottom:14px; display:block; }
.cart-empty p { font-size:15px; color:var(--text-muted); }

/* Cart sticky bar */
.cart-sticky {
    position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
    z-index:500; display:none; width:calc(100% - 32px); max-width:500px;
}
.cart-sticky.has-items { display:block; }
.cart-sticky-btn {
    display:flex; align-items:center; justify-content:center; gap:14px;
    width:100%; padding:18px 32px; background:var(--gradient-premium);
    border:none; border-radius:60px; color:#fff;
    font-size:17px; font-weight:700; font-family:var(--font-body);
    cursor:pointer; transition:all .3s;
    box-shadow:0 8px 35px var(--shadow-primary), 0 0 60px rgba(200,40,42,.15);
    white-space:nowrap;
}
.cart-sticky-btn:hover { transform:translateY(-3px); box-shadow:0 12px 45px var(--shadow-primary); }
.cart-sticky-btn:active { transform:translateY(0); }
.cart-sticky-btn i { font-size:22px; }
.cart-sticky-count {
    background:rgba(255,255,255,.25); padding:3px 12px;
    border-radius:20px; font-size:15px; font-weight:800;
    min-width:32px; text-align:center;
}
.cart-sticky-total { font-size:17px; font-weight:700; letter-spacing:.3px; }

/* ====== TOAST NOTIFICATIONS ====== */
.toast-wrap {
    position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
    z-index:9999; display:flex; flex-direction:column; gap:8px;
    align-items:center; pointer-events:none;
}
.toast {
    padding:12px 22px; border-radius:60px;
    font-size:14px; font-weight:600; color:#fff;
    background:rgba(20,20,30,.94); border:1px solid var(--border-light);
    backdrop-filter:blur(10px);
    animation: toastIn .3s ease;
    pointer-events:none; max-width:320px; text-align:center;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.toast.success { border-color:rgba(37,211,102,.3); }
.toast.error { border-color:rgba(229,57,53,.3); }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateY(-10px); } }

/* ====== FOOTER ====== */
.site-footer {
    background:rgba(5,5,8,0.98); border-top:1px solid var(--border);
    padding:30px 20px; text-align:center;
}
.footer-logo { margin-bottom:16px; }
.footer-logo img { height:60px; object-fit:contain; opacity:.85; }
.footer-brand {
    font-family:var(--font-display); font-size:18px; font-weight:700;
    letter-spacing:2px; margin-bottom:4px;
}
.footer-tagline {
    font-family:var(--font-serif); font-size:13px; color:var(--accent);
    font-style:italic; margin-bottom:16px;
}
.footer-wa {
    display:inline-flex; align-items:center; gap:8px;
    color:var(--success); font-size:16px; font-weight:700;
    text-decoration:none; margin-bottom:16px;
}
.footer-wa i { font-size:20px; }
.footer-links { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:16px; }
.footer-links a { color:var(--text-muted); text-decoration:none; font-size:13px; transition:color .2s; }
.footer-links a:hover { color:var(--accent); }
.footer-copy { font-size:12px; color:var(--text-muted); margin-top:16px; }
.footer-divider { width:60px; height:2px; background:var(--gradient-gold); margin:16px auto; border-radius:2px; }

/* ====== SEARCH BAR ====== */
.search-bar {
    padding:10px 20px; background:rgba(8,8,13,.96);
    border-bottom:1px solid var(--border);
    display:none;
}
.search-bar.open { display:block; }
.search-input-wrap {
    max-width:500px; margin:0 auto;
    display:flex; align-items:center; gap:10px;
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:8px 16px;
}
.search-input-wrap i { color:var(--text-muted); font-size:14px; }
.search-input-wrap input {
    flex:1; background:none; border:none; outline:none;
    color:#fff; font-size:15px; font-family:var(--font-body);
}
.search-input-wrap input::placeholder { color:var(--text-muted); }
.search-clear { color:var(--text-muted); cursor:pointer; font-size:14px; transition:color .2s; }
.search-clear:hover { color:#fff; }

/* ====== RESERVATION MODAL ====== */
.reservation-modal-box { max-width:480px; }
.res-modal-header { text-align:center; padding:24px 22px 16px; }
.res-modal-header i { font-size:36px; color:var(--accent); margin-bottom:10px; display:block; }
.res-modal-header h3 {
    font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:.8px;
}
.res-modal-body { padding:0 22px 22px; }
.res-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:480px) { .res-form-grid { grid-template-columns:1fr; } }
.res-form-grid .full { grid-column:1/-1; }
.res-wa-note {
    font-size:12px; color:var(--text-muted); text-align:center;
    margin-top:12px; line-height:1.6;
}
.res-wa-note i { color:var(--success); }

/* ====== EVENTS SECTION ====== */
.events-banner {
    width:100%; border-radius:var(--radius-lg); overflow:hidden;
    position:relative; margin-bottom:20px; min-height:180px;
    background:var(--bg-card);
}
.events-banner img {
    width:100%; height:100%; object-fit:cover; display:block;
    max-height:220px;
}
.events-banner-overlay {
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(200,40,42,.7) 0%, rgba(8,8,13,.6) 100%);
    display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:8px; padding:20px;
}
.events-banner-title {
    font-family:var(--font-display); font-size:24px; font-weight:700;
    letter-spacing:2px; text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.events-banner-sub { font-family:var(--font-serif); font-size:14px; color:rgba(255,255,255,.8); font-style:italic; }

.events-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(min-width:600px) { .events-grid { grid-template-columns:repeat(3,1fr); } }
.event-card {
    background:var(--gradient-card); border:1px solid var(--border);
    border-radius:var(--radius-md); padding:18px 14px;
    text-align:center; transition:all .3s;
}
.event-card:hover { border-color:rgba(200,40,42,.3); transform:translateY(-3px); }
.event-card-icon { font-size:28px; margin-bottom:10px; color:var(--accent); }
.event-card-name {
    font-family:var(--font-display); font-size:14px; font-weight:700;
    margin-bottom:4px; letter-spacing:.5px;
}
.event-card-date { font-size:12px; color:var(--accent); margin-bottom:6px; font-weight:600; }
.event-card-desc { font-size:12px; color:var(--text-muted); line-height:1.5; font-family:var(--font-serif); font-style:italic; }

/* ====== CLUB / LOYALTY SECTION ====== */
.loyalty-banner {
    background:linear-gradient(135deg, rgba(200,40,42,0.12) 0%, rgba(212,175,55,0.08) 100%);
    border:1px solid rgba(212,175,55,0.20); border-radius:var(--radius-lg);
    padding:24px 20px; text-align:center; margin-bottom:20px;
}
.loyalty-icon { font-size:40px; color:var(--accent); margin-bottom:12px; }
.loyalty-title {
    font-family:var(--font-display); font-size:20px; font-weight:700;
    letter-spacing:1px; margin-bottom:6px;
}
.loyalty-desc { font-size:14px; color:var(--text-gray); font-family:var(--font-serif); font-style:italic; }

.loyalty-steps {
    display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:18px 0;
}
.loyalty-step {
    display:flex; flex-direction:column; align-items:center; gap:6px;
}
.loyalty-dot {
    width:44px; height:44px; border-radius:50%;
    background:var(--bg-elevated); border:2px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--text-muted);
    transition:all .3s;
}
.loyalty-dot.filled {
    background:var(--gradient-premium); border-color:var(--primary);
    color:#fff; box-shadow:0 4px 14px var(--shadow-primary);
}
.loyalty-dot.free {
    background:var(--gradient-gold); border-color:var(--accent);
    color:#000; font-size:22px;
}
.loyalty-step-label { font-size:10px; color:var(--text-muted); font-weight:600; }

/* User panel */
.user-panel-header {
    display:flex; align-items:center; gap:14px;
    padding:0 0 16px; border-bottom:1px solid var(--border); margin-bottom:16px;
}
.user-avatar {
    width:52px; height:52px; border-radius:50%;
    background:var(--gradient-premium); border:2px solid var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size:24px; flex-shrink:0;
}
.user-name { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:.5px; }
.user-phone { font-size:13px; color:var(--text-muted); margin-top:2px; }
.user-badge {
    display:inline-block; font-size:10px; font-weight:700; letter-spacing:1px;
    padding:3px 10px; background:var(--gradient-gold); color:#000;
    border-radius:20px; margin-top:4px;
}

.my-orders-list { display:flex; flex-direction:column; gap:10px; }
.order-chip {
    background:var(--bg-surface); border:1px solid var(--border);
    border-radius:var(--radius-md); padding:12px 14px;
    display:flex; align-items:center; justify-content:space-between;
    text-align:left;
}
.order-chip-info { font-size:13px; color:var(--text-gray); }
.order-chip-num { font-size:15px; font-weight:700; color:var(--text-white); margin-bottom:2px; }
.order-chip-status {
    font-size:11px; font-weight:700; padding:4px 12px;
    border-radius:20px; letter-spacing:.5px;
}
.status-new { background:rgba(200,40,42,.15); color:var(--primary-light); }
.status-done { background:rgba(37,211,102,.12); color:var(--success); }

.my-coupons-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.coupon-chip {
    background:linear-gradient(135deg, rgba(212,175,55,0.08), rgba(200,40,42,0.05));
    border:1px solid rgba(212,175,55,0.20); border-radius:var(--radius-md);
    padding:12px 16px; text-align:center;
}
.coupon-chip-code {
    font-family:var(--font-display); font-size:18px; font-weight:700;
    color:var(--accent); letter-spacing:2px;
}
.coupon-chip-desc { font-size:12px; color:var(--text-muted); margin-top:4px; }

/* ====== MAIN APP WRAPPER ====== */
.main-app { display:none; }
.main-app.visible { display:block; }

/* App header wrap — NOT sticky anymore, scrolls with page */
.app-header-wrap {
    position:relative; z-index:50;
    background:var(--bg-dark);
}

/* ====== FLOATING NAV BUTTON (bottom-right) ====== */
.floating-nav-btn {
    position:fixed;
    bottom:24px;
    right:22px;
    z-index:600;
    width:60px; height:60px;
    background:var(--gradient-premium);
    border:none; border-radius:50%;
    color:#fff; font-size:22px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 28px rgba(200,40,42,.50), 0 2px 8px rgba(0,0,0,.4);
    transition:all .3s var(--ease-premium);
    flex-direction:column; gap:3px;
    overflow:hidden;
}
.floating-nav-btn:hover { transform:scale(1.08); box-shadow:0 10px 36px rgba(200,40,42,.60); }
.floating-nav-btn:active { transform:scale(.95); }
.floating-nav-btn .fnb-logo {
    width:38px; height:38px; object-fit:contain;
    filter:drop-shadow(0 0 6px rgba(255,255,255,.3));
    border-radius:50%;
    pointer-events:none;
}
.floating-nav-btn .fnb-icon {
    font-size:24px; line-height:1;
    pointer-events:none;
}

/* Pulse ring on floating btn */
.floating-nav-btn::after {
    content:'';
    position:absolute; inset:-4px;
    border:2px solid rgba(200,40,42,.35);
    border-radius:50%;
    animation: floatBtnPulse 2.5s infinite;
}
@keyframes floatBtnPulse {
    0%,100% { opacity:.4; transform:scale(1); }
    50% { opacity:.8; transform:scale(1.12); }
}

/* ====== SECTION IMAGES (category banners) ====== */
.cat-banner {
    width:100%; height:160px; border-radius:var(--radius-lg);
    overflow:hidden; position:relative; margin-bottom:20px;
    background:var(--bg-card);
}
.cat-banner img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s;
}
.cat-banner:hover img { transform:scale(1.04); }
.cat-banner-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to right, rgba(8,8,13,.8) 0%, transparent 60%);
    display:flex; align-items:center; padding:0 20px;
}
.cat-banner-title {
    font-family:var(--font-display); font-size:22px; font-weight:700;
    letter-spacing:1.5px; text-shadow:0 2px 16px rgba(0,0,0,.5);
    text-align:left;
}

/* ====== SEARCH RESULTS ====== */
.search-results { padding:16px 0; }
.search-no-results { padding:40px 20px; text-align:center; color:var(--text-muted); }
.search-no-results i { font-size:40px; margin-bottom:12px; display:block; }

/* ====== LOADING STATE ====== */
.loading-shimmer {
    background:linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75%);
    background-size:200% 100%; animation:shimmer 1.5s infinite;
    border-radius:var(--radius-md); height:100px;
}

/* ====== PRICE IMAGE CARDS (Buffet Section) ====== */
.price-img-card {
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    background:var(--bg-card); border:1px solid var(--border);
    cursor:pointer; transition:all .35s var(--ease-premium);
    box-shadow:0 4px 20px rgba(0,0,0,.3);
    z-index:0;
    transform:translateZ(0); /* Force compositing layer to prevent freeze */
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
.price-img-card:hover {
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(0,0,0,.4);
    border-color:rgba(200,40,42,.35);
}
.price-img-card.featured-price {
    border-color:rgba(212,175,55,.3);
    box-shadow:0 6px 28px rgba(212,175,55,.12);
}
.price-img-card.featured-price:hover {
    border-color:var(--accent);
    box-shadow:0 14px 40px rgba(212,175,55,.2);
}
.price-img-ribbon {
    position:absolute; top:14px; right:-30px;
    background:var(--gradient-gold); color:#000;
    font-size:10px; font-weight:800; letter-spacing:1px;
    padding:5px 40px; transform:rotate(35deg);
    z-index:3; white-space:nowrap;
    box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.price-img-wrap {
    position:relative; width:100%; height:220px; overflow:hidden;
    will-change:auto;
}
.price-img-wrap img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s var(--ease-premium);
    pointer-events:none; /* Prevent image from blocking clicks */
    will-change:transform;
}
.price-img-card:hover .price-img-wrap img { transform:scale(1.06); }

.price-img-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(8,8,13,.95) 0%, rgba(8,8,13,.5) 45%, rgba(8,8,13,.1) 100%);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:20px 16px; gap:4px;
    pointer-events:none; /* Let clicks pass through to the card */
}
.price-img-overlay.gold-overlay {
    background:linear-gradient(to top, rgba(8,8,13,.96) 0%, rgba(50,30,0,.4) 50%, transparent 100%);
}
.price-img-badge {
    display:inline-block; padding:4px 12px; border-radius:20px;
    font-size:11px; font-weight:700; letter-spacing:.5px; color:#fff;
    align-self:flex-start; margin-bottom:6px;
    backdrop-filter:blur(6px);
}
.price-img-amount {
    font-family:var(--font-display); font-size:38px; font-weight:700;
    color:#fff; line-height:1; text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.price-img-amount.gold-amount { color:var(--accent); text-shadow:0 2px 20px rgba(212,175,55,.4); }
.price-img-note { font-size:13px; color:rgba(255,255,255,.7); font-family:var(--font-serif); font-style:italic; }

.price-img-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px;
    background:var(--bg-surface);
    border-top:1px solid var(--border);
}
.price-img-footer i { color:var(--accent); font-size:18px; }
.price-img-footer span {
    flex:1; margin:0 10px; font-size:14px; font-weight:700;
    font-family:var(--font-display); letter-spacing:.5px;
    text-align:left;
}
.price-reservar-btn {
    padding:8px 16px; background:var(--gradient-premium);
    border:none; border-radius:30px; color:#fff;
    font-size:12px; font-weight:700; font-family:var(--font-body);
    cursor:pointer; transition:all .3s; white-space:nowrap;
    pointer-events:auto;
    position:relative; z-index:2;
}
.price-reservar-btn.gold-btn { background:var(--gradient-gold); color:#000; }
.price-img-card:hover .price-reservar-btn { box-shadow:0 4px 16px var(--shadow-primary); }

/* ====== NAVIGATION DRAWER ====== */
.nav-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.65); z-index:300;
    backdrop-filter:blur(4px);
    transition:opacity .3s;
}
.nav-overlay.open { display:block; }
.nav-drawer {
    position:fixed; top:0; left:0; height:100%;
    width:280px; max-width:85vw;
    background:rgba(10,10,18,.98); backdrop-filter:blur(30px);
    border-right:1px solid var(--border);
    z-index:301; display:flex; flex-direction:column;
    transform:translateX(-100%);
    transition:transform .35s var(--ease-premium);
    box-shadow:4px 0 30px rgba(0,0,0,.5);
}
.nav-drawer.open { transform:translateX(0); }
.nav-drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 16px 16px;
    border-bottom:1px solid var(--border);
}
.nav-drawer-links {
    flex:1; overflow-y:auto; padding:8px 0;
}
.nav-drawer-links a {
    display:flex; align-items:center; gap:12px;
    padding:14px 20px; color:var(--text-light);
    text-decoration:none; font-size:15px; font-weight:600;
    font-family:var(--font-body); transition:all .2s;
    border-bottom:1px solid rgba(255,255,255,.03);
}
.nav-drawer-links a i {
    width:22px; text-align:center; color:var(--accent); font-size:16px;
}
.nav-drawer-links a:hover {
    background:rgba(200,40,42,.10); color:#fff; padding-left:26px;
}
.nav-divider {
    height:1px; background:var(--border); margin:8px 16px;
}
.nav-drawer-footer {
    padding:16px 20px;
    border-top:1px solid var(--border);
}
.nav-drawer-footer p { font-size:11px; color:var(--text-muted); }

/* Header nav button */
.btn-header-nav {
    width:40px; height:40px; background:var(--bg-surface);
    border:1px solid var(--border); border-radius:50%;
    color:var(--text-light); font-size:16px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:all .3s;
}
.btn-header-nav:hover { background:var(--primary); border-color:var(--primary); color:#fff; }
.header-actions-row { display:flex; align-items:center; gap:8px; }
.btn-header-account {
    display:flex; align-items:center; gap:6px;
    padding:8px 14px; background:var(--bg-surface);
    border:1px solid rgba(255,255,255,.12); border-radius:30px;
    color:var(--text-gray); font-size:13px; font-weight:600;
    font-family:var(--font-body); cursor:pointer; transition:all .3s;
}
.btn-header-account:hover { border-color:var(--accent); color:var(--accent); }
.btn-header-account i { font-size:18px; }

/* Product detail modal enhancements */
.pd-img-wrap {
    width:100%; height:240px; overflow:hidden;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    background:var(--bg-elevated);
}
.pd-img-wrap img { width:100%; height:100%; object-fit:cover; }
.pd-info { padding:20px 22px 22px; text-align:left; }
.pd-info h3 {
    font-family:var(--font-display); font-size:22px; font-weight:700;
    letter-spacing:.5px; margin-bottom:8px;
}
.pd-desc { font-size:14px; color:var(--text-gray); line-height:1.6; margin-bottom:14px; font-family:var(--font-serif); }
.pd-single-price {
    font-family:var(--font-display); font-size:30px; font-weight:700;
    color:var(--accent); margin-bottom:4px;
}
/* Club register link inside product modal */
.pd-club-link {
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; color:var(--accent); text-decoration:none;
    padding:8px 16px; background:rgba(212,175,55,.07);
    border:1px solid rgba(212,175,55,.18); border-radius:30px;
    transition:all .3s; font-weight:600;
}
.pd-club-link:hover { background:rgba(212,175,55,.12); border-color:rgba(212,175,55,.3); }
.pd-club-link small { color:var(--text-muted); font-weight:400; }

/* ====== RESPONSIVE ====== */
@media(max-width:400px) {
    .price-img-amount { font-size:30px; }
    .header-tagline { font-size:13px; }
    .price-img-ribbon { font-size:9px; }
}

@media(min-width:600px) {
    .welcome-content { max-width:560px; }
    .welcome-title { font-size:32px; }
    .welcome-btn { font-size:18px; }
    .header-title { font-size:22px; }
    .header-tagline { font-size:18px; }
    .menu-content { padding:28px 24px 120px; }
    .price-img-wrap { height:280px !important; }
}
@media(min-width:900px) {
    .welcome-content { max-width:640px; }
    .menu-content { padding:32px 32px 120px; }
    .donut-grid { grid-template-columns:repeat(4,1fr); }
    .events-grid { grid-template-columns:repeat(4,1fr); }
    .header-tagline { font-size:18px; }
}

/* ====== EVENT DETAIL MODAL ====== */
.event-detail-box { padding:0; overflow:hidden; }
.event-detail-img {
    width:100%; height:240px; overflow:hidden;
    position:relative; background:var(--bg-elevated);
}
.event-detail-img img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s;
}
.event-detail-img-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(8,8,13,.9) 0%, rgba(8,8,13,.3) 50%, transparent 100%);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:24px 22px;
}
.event-detail-title {
    font-family:var(--font-display); font-size:24px; font-weight:700;
    letter-spacing:1px; margin-bottom:4px;
    text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.event-detail-date {
    font-size:14px; color:var(--accent); font-weight:600;
    display:flex; align-items:center; gap:6px;
}
.event-detail-body { padding:22px; }
.event-detail-desc {
    font-size:15px; color:var(--text-light); line-height:1.8;
    margin-bottom:20px; font-family:var(--font-serif);
}
.event-detail-features {
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    margin-bottom:20px;
}
.event-detail-feature {
    display:flex; align-items:center; gap:10px;
    padding:12px; background:var(--bg-surface);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    font-size:13px; color:var(--text-light);
}
.event-detail-feature i { color:var(--accent); font-size:16px; flex-shrink:0; }
.event-detail-actions {
    display:flex; gap:10px; flex-wrap:wrap;
}
.event-detail-actions .btn-gradient { flex:1; min-width:140px; }
.event-detail-actions .btn-outline {
    flex:1; min-width:140px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 24px; background:transparent;
    border:2px solid var(--accent); border-radius:60px; color:var(--accent);
    font-size:15px; font-weight:700; font-family:var(--font-body);
    cursor:pointer; transition:all .3s;
}
.event-detail-actions .btn-outline:hover {
    background:rgba(212,175,55,.1); transform:translateY(-2px);
}

/* ====== PROMO DETAIL MODAL ====== */
.promo-detail-box { padding:0; overflow:hidden; }
.promo-detail-img {
    width:100%; height:200px; overflow:hidden;
    position:relative; background:var(--bg-elevated);
}
.promo-detail-img img { width:100%; height:100%; object-fit:cover; display:block; }
.promo-detail-body { padding:22px; }
.promo-detail-title {
    font-family:var(--font-display); font-size:22px; font-weight:700;
    letter-spacing:.5px; margin-bottom:8px; text-align:center;
}
.promo-detail-icon-header {
    text-align:center; margin-bottom:10px;
}
.promo-detail-icon-header i {
    font-size:36px; color:var(--accent);
}
.promo-detail-desc {
    font-size:15px; color:var(--text-light); line-height:1.8;
    margin-bottom:16px; text-align:center; font-family:var(--font-serif);
}
.promo-detail-highlight {
    background:linear-gradient(135deg, rgba(212,175,55,.08), rgba(200,40,42,.06));
    border:1px solid rgba(212,175,55,.2);
    border-radius:var(--radius-md); padding:16px;
    text-align:center; margin-bottom:20px;
}
.promo-detail-highlight p { font-size:14px; color:var(--text-light); line-height:1.7; }
.promo-detail-highlight strong { color:var(--accent); }
.promo-detail-actions {
    display:flex; gap:10px; flex-wrap:wrap;
}
.promo-detail-actions .btn-gradient { flex:1; min-width:140px; }
.promo-detail-actions .btn-outline {
    flex:1; min-width:140px;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 24px; background:transparent;
    border:2px solid var(--accent); border-radius:60px; color:var(--accent);
    font-size:15px; font-weight:700; font-family:var(--font-body);
    cursor:pointer; transition:all .3s;
}
.promo-detail-actions .btn-outline:hover {
    background:rgba(212,175,55,.1); transform:translateY(-2px);
}

/* ====== CLICKABLE EVENT CARDS ====== */
.event-card {
    background:var(--gradient-card); border:1px solid var(--border);
    border-radius:var(--radius-md); overflow:hidden;
    text-align:center; transition:all .3s; cursor:pointer;
}
.event-card:hover { border-color:rgba(200,40,42,.3); transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.4); }
.event-card-img {
    width:100%; height:120px; overflow:hidden;
    background:var(--bg-elevated);
}
.event-card-img img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s;
}
.event-card:hover .event-card-img img { transform:scale(1.08); }
.event-card-body { padding:14px 12px; }

/* ====== CLICKABLE PROMO CARDS ====== */
.promo-benefit-card {
    background:var(--gradient-card); border:1px solid var(--border);
    border-radius:var(--radius-md); overflow:hidden;
    text-align:center; transition:all .35s var(--ease-premium); cursor:pointer;
    position:relative;
}
.promo-benefit-card:hover {
    border-color:rgba(212,175,55,.3); transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.promo-benefit-card-img {
    width:100%; height:100px; overflow:hidden;
    background:var(--bg-elevated);
}
.promo-benefit-card-img img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s;
}
.promo-benefit-card:hover .promo-benefit-card-img img { transform:scale(1.08); }
.promo-benefit-card-body { padding:12px 10px; }
.promo-benefit-card-body i {
    font-size:22px; color:var(--accent); margin-bottom:6px; display:block;
}
.promo-benefit-card-body .pbc-title {
    font-family:var(--font-display); font-size:11px; font-weight:700;
    margin-bottom:4px; letter-spacing:.3px; color:var(--text-white);
}
.promo-benefit-card-body .pbc-desc {
    font-size:11px; color:var(--text-muted); line-height:1.4;
}

/* Asegura que la grid de precios sea responsive en móvil pequeño */
@media(max-width:360px) {
    .price-img-amount { font-size:26px; }
    .header-tagline { font-size:12px; }
    .event-card-img { height:90px; }
    .promo-benefit-card-img { height:80px; }
}

@media(min-width:600px) {
    .event-detail-img { height:300px; }
    .promo-detail-img { height:260px; }
}

/* ====== FLATPICKR DARK THEME OVERRIDES ====== */
.flatpickr-calendar {
    background: #1A1118 !important;
    border: 1px solid rgba(212,175,55,.2) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 20px rgba(200,40,42,.1) !important;
    font-family: 'Montserrat', sans-serif !important;
    overflow: hidden;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: rgba(212,175,55,.2) !important; }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: rgba(212,175,55,.2) !important; }
.flatpickr-months {
    background: linear-gradient(135deg, rgba(200,40,42,.08), transparent) !important;
    border-bottom: 1px solid rgba(212,175,55,.12) !important;
    padding: 6px 0 !important;
}
.flatpickr-months .flatpickr-month { fill: #D4AF37 !important; color: #D4AF37 !important; }
.flatpickr-current-month { font-family: 'Cinzel', serif !important; font-weight: 700 !important; color: #fff !important; font-size: 15px !important; }
.flatpickr-current-month .cur-month { color: #fff !important; }
.flatpickr-current-month .numInputWrapper span { border-color: #D4AF37 !important; }
.flatpickr-current-month input.cur-year { color: #D4AF37 !important; font-weight: 700 !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { fill: #D4AF37 !important; color: #D4AF37 !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #F0D77C !important; }
span.flatpickr-weekday {
    color: #D4AF37 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}
.flatpickr-day {
    color: #F5F0E8 !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: all .2s !important;
}
.flatpickr-day:hover {
    background: rgba(200,40,42,.15) !important;
    border-color: rgba(200,40,42,.3) !important;
    color: #fff !important;
}
.flatpickr-day.today {
    border-color: #D4AF37 !important;
    color: #D4AF37 !important;
    font-weight: 800 !important;
}
.flatpickr-day.today:hover { background: rgba(212,175,55,.12) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: linear-gradient(135deg, #C8282A, #E04E95) !important;
    border-color: #C8282A !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(200,40,42,.4) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #4A3A42 !important;
}
.flatpickr-time {
    border-top: 1px solid rgba(212,175,55,.12) !important;
    background: #1A1118 !important;
}
.flatpickr-time input {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    font-family: 'Montserrat', sans-serif !important;
}
.flatpickr-time .flatpickr-am-pm {
    color: #D4AF37 !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    background: rgba(212,175,55,.08) !important;
    border: 1px solid rgba(212,175,55,.15) !important;
    border-radius: 8px !important;
}
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
    background: rgba(212,175,55,.15) !important;
}
.flatpickr-time .flatpickr-time-separator { color: #D4AF37 !important; }
.flatpickr-time .numInputWrapper span {
    border-color: rgba(212,175,55,.2) !important;
}
.flatpickr-time .numInputWrapper span::after {
    border-top-color: #D4AF37 !important;
    border-bottom-color: #D4AF37 !important;
}
.flatpickr-time .numInputWrapper:hover span {
    border-color: rgba(212,175,55,.4) !important;
}
.flatpickr-innerContainer { background: #1A1118 !important; }
.flatpickr-rContainer { background: #1A1118 !important; }
.dayContainer { background: #1A1118 !important; }
.flatpickr-weekdays { background: #1A1118 !important; }

/* ====== THANK YOU MODAL ANIMATION ====== */
@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}