:root {
--section-pad: 90px;
--max-width: 1240px;
--radius: 10px;
--transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

html { scroll-behavior: smooth; }

body {
font-family: var(--font-body);
font-size: 15px;
color: var(--text);
line-height: 1.7;
background: var(--white);
-webkit-font-smoothing: antialiased;
}

a { color: var(--gold-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ==================== HEADER ==================== */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
transition: all 0.4s ease;
background: transparent;
}
.site-header.scrolled {
background: var(--header-scrolled-bg);
backdrop-filter: blur(12px);
box-shadow: var(--header-scrolled-shadow);
}
.site-header.scrolled .nav-link { color: var(--header-scrolled-text); }
.site-header.scrolled .nav-link:hover { color: var(--gold); }
.site-header.scrolled .header-logo { color: var(--header-scrolled-text); }
.site-header.scrolled .header-stars { color: var(--gold); }

.header-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 0;
max-width: var(--max-width); margin: 0 auto; padding-left: 24px; padding-right: 24px;
}

.header-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.header-logo-img { height: 44px; width: auto; border-radius: 4px; }
.header-logo {
font-family: var(--font-heading); font-size: 22px; font-weight: 700;
color: var(--white); letter-spacing: 0.5px; transition: color 0.4s;
}
.header-stars { font-size: 9px; color: var(--gold-light); letter-spacing: 3px; margin-top: 2px; transition: color 0.4s; }

.header-nav { display: flex; align-items: center; gap: 32px; }
.nav-link {
font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.9);
text-transform: uppercase; letter-spacing: 1.2px; transition: all var(--transition);
position: relative;
}
.nav-link::after {
content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px;
background: var(--gold); transition: width var(--transition);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.lang-dropdown.open { display: block !important; animation: langFadeIn 0.2s ease; }
@keyframes langFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.lang-switcher .lang-btn, .currency-switcher .lang-btn { color: #fff; }
.site-header.scrolled .lang-btn { border-color: rgba(0,0,0,0.15); color: var(--header-scrolled-text) !important; }

.btn-reserve {
padding: var(--btn-padding); background: var(--gold); color: var(--white) !important;
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
border-radius: var(--btn-radius); transition: all var(--transition); border: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
}
.btn-reserve:hover { background: var(--gold-dark); transform: translateY(-1px); color: var(--white) !important; }
.btn-reserve-outline {
padding: var(--btn-padding); background: transparent; color: var(--gold) !important;
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
border-radius: var(--btn-radius); transition: all var(--transition); border: 2px solid var(--gold);
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.btn-reserve-outline:hover { background: var(--gold); color: var(--white) !important; transform: translateY(-1px); }

/* Mobile menu */
.mobile-toggle { display: none; background: none; border: none; color: var(--white); font-size: 22px; cursor: pointer; transition: color 0.4s; }
.mobile-close { display: none; }
.site-header.scrolled .mobile-toggle { color: var(--header-scrolled-text); }

/* ==================== HERO ==================== */
.hero {
position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 30%, var(--charcoal) 60%, var(--charcoal) 100%);
background-size: cover; background-position: center;
}
.hero-bg::after {
content: ''; position: absolute; inset: 0;
background: var(--hero-overlay);
}
.hero-content {
position: relative; z-index: 2; text-align: center; color: var(--hero-text);
padding: 0 24px; max-width: 800px;
}
.hero-badge {
display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 4px;
text-transform: uppercase; color: var(--hero-badge); margin-bottom: 20px;
padding: 8px 20px; border: 1px solid rgba(184,149,106,0.3); border-radius: 2px;
}
.hero-title {
font-family: var(--font-heading); font-size: clamp(36px, 6vw, 64px);
font-weight: 700; line-height: 1.15; margin-bottom: 20px;
text-shadow: 0 2px 30px rgba(0,0,0,0.2);
}
.hero-subtitle {
font-size: clamp(15px, 2vw, 18px); font-weight: 300;
color: rgba(255,255,255,0.85); line-height: 1.7; margin-bottom: 36px;
max-width: 560px; margin-left: auto; margin-right: auto;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-hero-outline {
padding: 12px 28px; border: 1.5px solid rgba(255,255,255,0.5); color: var(--white);
font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px;
border-radius: var(--btn-radius); transition: all var(--transition);
}
.btn-hero-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--white); color: var(--white); }

.hero-scroll {
position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2;
}
.hero-scroll i { animation: scrollBounce 2s infinite; }
@keyframes scrollBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ==================== SECTIONS ==================== */
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--cream); }
.section-dark { background: var(--charcoal); color: var(--white); }
.section-dark .section-subtitle { color: rgba(255,255,255,0.6); }
.section-dark .text-muted { color: rgba(255,255,255,0.5); }

.section-header {
text-align: center; margin-bottom: 50px;
}
.section-overtitle {
font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
color: var(--gold); margin-bottom: 12px;
}
.section-title {
font-family: var(--font-heading); font-size: clamp(28px, 4vw, 42px);
font-weight: 600; line-height: 1.2; margin-bottom: 16px;
}
.section-subtitle {
font-size: 15px; color: var(--text-light); max-width: 540px; margin: 0 auto; line-height: 1.7;
}
.section-divider {
width: 50px; height: 2px; background: var(--gold); margin: 0 auto 16px;
}

/* ==================== ROOMS ==================== */
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 28px; }
.room-card {
background: var(--white); border-radius: var(--radius); overflow: hidden;
box-shadow: 0 2px 20px rgba(0,0,0,0.06); transition: all var(--transition);
}
.room-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
.room-card-img {
position: relative; height: 240px; overflow: hidden;
}
.room-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.room-card:hover .room-card-img img { transform: scale(1.06); }
.room-card-price {
position: absolute; bottom: 16px; right: 16px;
background: var(--gold); color: var(--white); padding: 6px 14px;
font-size: 14px; font-weight: 600; border-radius: 4px;
}
.room-card-price small { font-weight: 400; font-size: 11px; opacity: 0.85; }
.room-card-body { padding: 24px; }
.room-card-name { font-family: var(--font-heading); font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.room-card-desc { font-size: 13px; color: var(--text-light); margin-bottom: 14px; line-height: 1.6; }
.room-card-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-light); flex-wrap: wrap; }
.room-card-meta span { display: flex; align-items: center; gap: 5px; }
.room-card-meta i { color: var(--gold); font-size: 11px; }

/* ==================== FEATURES ==================== */
.features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px; }
.feature-card { text-align: center; padding: 30px 20px; }
.feature-icon {
width: 64px; height: 64px; border-radius: 50%;
background: linear-gradient(135deg, var(--gold-light), var(--gold));
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px; color: var(--white); font-size: 22px;
}
.feature-title { font-family: var(--font-heading); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.feature-desc { font-size: 13px; color: var(--text-light); line-height: 1.6; }

/* ==================== GALLERY ==================== */
.gallery-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.gallery-item {
position: relative; overflow: hidden; border-radius: 4px;
aspect-ratio: 1; cursor: pointer;
}
.gallery-item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item::after {
content: ''; position: absolute; inset: 0;
background: rgba(0,0,0,0); transition: background 0.3s;
pointer-events: none;
}
.gallery-item:hover::after { background: rgba(0,0,0,0.15); }

/* ==================== TESTIMONIALS ==================== */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.testimonial-card {
padding: 32px; border-radius: var(--radius); background: var(--white);
box-shadow: 0 2px 16px rgba(0,0,0,0.04); border: 1px solid var(--border);
}
.testimonial-stars { color: var(--gold); font-size: 13px; margin-bottom: 14px; letter-spacing: 2px; }
.testimonial-text { font-size: 14px; line-height: 1.8; font-style: italic; color: var(--text); margin-bottom: 18px; }
.testimonial-author { font-weight: 600; font-size: 13px; }
.testimonial-origin { font-size: 12px; color: var(--text-light); }

/* ==================== MAP ==================== */
.map-section { position: relative; }
.map-container { height: 400px; border-radius: var(--radius); overflow: hidden; }
#hotelMap { height: 100%; width: 100%; }

/* ==================== CTA ==================== */
.cta-section {
position: relative; padding: 100px 0; text-align: center; color: var(--cta-color);
background: var(--cta-bg);
}
.cta-title { font-family: var(--font-heading); font-size: clamp(26px, 4vw, 38px); font-weight: 600; margin-bottom: 16px; }
.cta-text { font-size: 15px; color: var(--cta-subtitle); margin-bottom: 30px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* ==================== FOOTER ==================== */
.site-footer {
background: var(--footer-bg); color: var(--footer-color); padding: 60px 0 0;
}
.footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; gap: 36px;
padding-bottom: 40px; border-bottom: 1px solid var(--footer-border);
}
.footer-brand { font-family: var(--font-heading); font-size: 24px; color: var(--footer-title); font-weight: 700; margin-bottom: 12px; }
.footer-desc { font-size: 13px; line-height: 1.8; margin-bottom: 16px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.6); font-size: 13px; transition: all 0.3s;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

.footer-title { font-size: 14px; font-weight: 600; color: var(--footer-title); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 13px; color: var(--footer-link); transition: color 0.3s; }
.footer-links a:hover { color: var(--footer-link-hover); }

.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 13px; }
.footer-contact-item i { color: var(--gold); margin-top: 3px; width: 16px; text-align: center; }

.footer-bottom {
padding: 20px 0; display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: 12px; color: var(--footer-copy); }
.footer-dev { font-size: 11px; color: var(--footer-copy); }
.footer-dev a { color: var(--gold); }
.footer-dev a:hover { color: var(--gold-light); }

/* ==================== WHATSAPP FAB ==================== */
.whatsapp-fab {
position: fixed; bottom: 24px; right: 24px; z-index: 999;
width: 56px; height: 56px; border-radius: 50%;
background: #25D366; color: #fff; font-size: 28px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 20px rgba(37,211,102,0.4);
transition: all 0.3s; text-decoration: none;
}
.whatsapp-fab:hover { transform: scale(1.1); color: #fff; box-shadow: 0 6px 28px rgba(37,211,102,0.5); }

/* ==================== PAGE HEADER ==================== */
.page-header {
padding: 140px 0 60px;
background: var(--page-header-bg);
text-align: center; color: var(--page-header-color);
}
.page-header-title { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 44px); font-weight: 600; }
.page-header-breadcrumb { margin-top: 12px; font-size: 13px; color: var(--page-header-breadcrumb); }
.page-header-breadcrumb a { color: var(--page-header-breadcrumb-link); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
:root { --section-pad: 60px; }
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 768px) {
.header-nav { 
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #2c2c2c; backdrop-filter: blur(10px);
    flex-direction: column; align-items: center; justify-content: center; gap: 24px;
    z-index: 1001;
}
.header-nav.open { display: flex; }
.header-nav.open .nav-link { color: var(--white) !important; }
.header-nav.open .lang-btn { color: #fff !important; border-color: rgba(255,255,255,0.3) !important; }
.header-nav .nav-link { color: var(--white); font-size: 16px; }
.header-nav .lang-switcher .lang-btn,
.header-nav .currency-switcher .lang-btn { color: #fff !important; font-size: 14px; border-color: rgba(255,255,255,0.3) !important; padding: 6px 14px; }
.header-nav .btn-reserve { margin-top: 8px; }
.mobile-toggle { display: block; z-index: 1002; position: relative; }
.mobile-close { display: block; position: absolute; top: 24px; right: 24px; background: none; border: none; color: var(--white); font-size: 28px; cursor: pointer; z-index: 1003; }
.rooms-grid { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
.gallery-item:first-child { grid-column: span 2; }
.footer-grid { grid-template-columns: 1fr; }
.hero-title { font-size: 32px; }
.features-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
.features-grid { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr 1fr; }
.gallery-item:first-child { grid-column: span 1; grid-row: span 1; }
.testimonials-grid { grid-template-columns: 1fr; }
}

/* ==================== ANIMATIONS ==================== */
.fade-up { opacity: 0; transform: translateY(30px); transition: all 0.7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ==================== CHATBOT ==================== */
#chatWindow.open{display:flex!important;animation:chatSlideUp .3s ease}
@keyframes chatSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.chat-msg{display:flex;gap:8px;max-width:85%;animation:chatFadeIn .3s ease}
.chat-msg.bot{align-self:flex-start}.chat-msg.user{align-self:flex-end;flex-direction:row-reverse}
.chat-msg .chat-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.chat-msg.bot .chat-avatar{background:linear-gradient(135deg,var(--gold,#b8956a),#d4a843);color:#fff}
.chat-msg .chat-bubble{padding:10px 14px;font-size:13px;line-height:1.6;word-wrap:break-word}
.chat-msg.bot .chat-bubble{background:#fff;border-radius:0 12px 12px 12px;box-shadow:0 1px 3px rgba(0,0,0,.06);color:#333}
.chat-msg.user .chat-bubble{background:linear-gradient(135deg,#1e1ea0,#2043a0);border-radius:12px 0 12px 12px;color:#fff}
.chat-typing{display:flex;gap:4px;padding:4px 0}
.chat-typing span{width:7px;height:7px;border-radius:50%;background:#999;animation:typingDot 1.4s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
@keyframes chatFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#chatMessages::-webkit-scrollbar{width:4px}#chatMessages::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}
@media(max-width:768px){
#chatWindow{width:100vw!important;height:100dvh!important;height:calc(var(--vh,1vh)*100)!important;right:0!important;bottom:auto!important;top:0!important;left:0!important;border-radius:0!important;position:fixed!important;z-index:99999!important;box-shadow:none!important;border:none!important;display:none;flex-direction:column!important}
#chatWindow.open{display:flex!important}
#chatWindow>div:first-child{flex-shrink:0}
#chatWindow>div:nth-child(2){flex:1;min-height:0;overflow-y:auto}
#chatWindow>div:last-child{flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,12px)!important}
#chatWidget{position:fixed;bottom:24px;right:24px}
#chatWindow.open~#chatFab{display:none!important}
}