/* ═══════════════════════════════════════════════════════════
   ANDENES HOTEL — Hoja de estilos compartida
   Usada por: index.html, habitaciones/*.html, salones/index.html
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --cream:      #F5F0E4;
  --sand:       #EBE3D0;
  --dark:       #1B2820;
  --forest:     #263C2E;
  --earth:      #6E3D16;
  --clay:       #B85C28;
  --clay-light: #D4784A;
  --sage:       #5C7860;
  --gold:       #C4902A;
  --gold-pale:  #DEB86A;
  --mid:        #6A5C4E;
  --border:     rgba(196, 144, 42, 0.2);
  --f-serif:    'Spectral', Georgia, serif;
  --f-sans:     'Mulish', system-ui, sans-serif;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--f-sans); font-size: 15px; color: var(--dark); background: var(--cream); font-weight: 300; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
a:hover { color: var(--clay); }
p { line-height: 1.85; color: var(--mid); font-weight: 300; }

/* ── UTILITIES ───────────────────────────────────────────── */
.container   { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.section-pad { padding: 100px 0; }
.label       { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.terrace-line { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.terrace-line::before { content: ''; display: block; width: 32px; height: 1px; background: var(--gold); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn              { display: inline-block; font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: all 0.35s var(--ease); }
.btn-clay         { background: var(--clay); color: #fff; padding: 14px 38px; border: none; }
.btn-clay:hover   { background: var(--clay-light); color: #fff; transform: translateY(-2px); }
.btn-outline-white       { border: 1px solid rgba(255,255,255,0.5); color: rgba(255,255,255,0.8); padding: 14px 36px; }
.btn-outline-white:hover { border-color: #fff; color: #fff; }
.btn-outline-dark        { border: 1px solid var(--dark); color: var(--dark); padding: 14px 36px; }
.btn-outline-dark:hover  { background: var(--clay); border-color: var(--clay); color: #fff; }
.btn-white        { background: #fff; color: var(--clay); padding: 14px 38px; font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; transition: all 0.3s var(--ease); white-space: nowrap; display: inline-block; }
.btn-white:hover  { background: var(--cream); transform: translateY(-2px); }

/* ── NAV ─────────────────────────────────────────────────── */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all 0.4s var(--ease); }
#nav.solid { background: rgba(27,40,32,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(196,144,42,0.15); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo img { height: 40px; filter: brightness(0) invert(1); opacity: 0.9; transition: opacity 0.3s; }
.nav-logo:hover img { opacity: 1; }
.nav-logo-text { font-family: var(--f-serif); font-size: 18px; font-weight: 400; color: #fff; letter-spacing: 0.01em; line-height: 1.1; }
.nav-logo-text span { display: block; font-family: var(--f-sans); font-size: 9.5px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-pale); opacity: 0.65; margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { font-family: var(--f-sans); font-size: 10.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.65); transition: color 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--gold-pale); }
.nav-book       { font-family: var(--f-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #fff !important; background: var(--clay); padding: 11px 28px; transition: background 0.3s var(--ease) !important; }
.nav-book:hover { background: var(--clay-light) !important; color: #fff !important; }

/* ── HERO ────────────────────────────────────────────────── */
#hero { position: relative; height: 100vh; min-height: 600px; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-slide.active { opacity: 1; }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(27,40,32,0.35) 0%, rgba(27,40,32,0.15) 40%, rgba(27,40,32,0.65) 80%, rgba(27,40,32,0.85) 100%); }
.hero-content { position: absolute; bottom: 130px; left: 0; right: 0; z-index: 2; }
.hero-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; animation: rise 1s var(--ease) 0.4s both; }
.hero-eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--gold); display: block; }
.hero-eyebrow span { font-family: var(--f-sans); font-size: 10px; font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-pale); opacity: 0.8; }
.hero-h1 { font-family: var(--f-serif); font-size: clamp(60px, 9vw, 130px); font-weight: 300; color: #fff; line-height: 0.9; letter-spacing: -0.02em; animation: rise 1s var(--ease) 0.6s both; }
.hero-h1 em { font-style: italic; color: var(--gold-pale); }
.hero-sub { margin-top: 28px; font-size: 15.5px; font-weight: 300; color: rgba(255,255,255,0.55); max-width: 460px; line-height: 1.8; animation: rise 1s var(--ease) 0.8s both; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 44px; animation: rise 1s var(--ease) 1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.hero-dots { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.hero-dot { width: 28px; height: 2px; background: rgba(255,255,255,0.3); cursor: pointer; transition: background 0.3s, width 0.3s var(--ease); }
.hero-dot.active { background: var(--gold); width: 48px; }
.hero-scroll { position: absolute; right: 48px; bottom: 48px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--gold), transparent); animation: pulse 2.2s ease-in-out infinite; }
.scroll-label { font-size: 8.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.3); writing-mode: vertical-rl; font-family: var(--f-sans); }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ── STATS ───────────────────────────────────────────────── */
#stats { background: var(--dark); border-bottom: 1px solid rgba(196,144,42,0.15); }
.stats-inner { display: flex; align-items: stretch; height: 88px; }
.stat-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 20px; border-right: 1px solid rgba(255,255,255,0.06); transition: background 0.3s; }
.stat-item:last-child { border-right: none; }
.stat-item:hover { background: rgba(255,255,255,0.03); }
.stat-num { font-family: var(--f-serif); font-size: 36px; font-weight: 300; color: #fff; line-height: 1; letter-spacing: -0.01em; }
.stat-text { display: flex; flex-direction: column; gap: 2px; }
.stat-text strong { font-family: var(--f-sans); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-pale); }
.stat-text span { font-size: 10px; color: rgba(255,255,255,0.3); letter-spacing: 0.06em; }

/* ── ABOUT ───────────────────────────────────────────────── */
#about { background: var(--cream); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-image { position: relative; }
.about-image-main { width: 100%; aspect-ratio: 4/5; overflow: hidden; position: relative; }
.about-image-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.about-image:hover .about-image-main img { transform: scale(1.04); }
.about-image-secondary { position: absolute; bottom: -32px; right: -32px; width: 48%; aspect-ratio: 4/3; overflow: hidden; border: 4px solid var(--cream); }
.about-image-secondary img { width: 100%; height: 100%; object-fit: cover; }
.about-accent { position: absolute; top: -16px; left: -16px; width: 80px; height: 80px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); opacity: 0.5; }
.about-text h2 { font-family: var(--f-serif); font-size: clamp(32px, 3.8vw, 52px); font-weight: 300; color: var(--dark); line-height: 1.1; letter-spacing: -0.01em; margin-top: 14px; }
.about-text h2 em { font-style: italic; color: var(--clay); }
.about-text > p { margin-top: 24px; font-size: 15.5px; line-height: 1.9; }
.about-mv { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.about-mv-item { background: var(--sand); padding: 24px 22px; position: relative; }
.about-mv-item::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--clay); }
.about-mv-item h3 { font-family: var(--f-serif); font-size: 18px; font-weight: 500; color: var(--dark); margin-bottom: 8px; }
.about-mv-item p { font-size: 13px; line-height: 1.7; }
.about-cta { margin-top: 38px; display: flex; gap: 16px; align-items: center; }

/* ── ROOMS — Category cards (index) ─────────────────────── */
#rooms { background: var(--dark); }
#rooms::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), var(--clay), var(--gold), transparent); }
.rooms-hdr { padding: 80px 0 52px; display: flex; justify-content: space-between; align-items: flex-end; }
.rooms-hdr h2 { font-family: var(--f-serif); font-size: clamp(32px, 4vw, 52px); font-weight: 300; color: #fff; line-height: 1.05; letter-spacing: -0.01em; margin-top: 12px; }
.rooms-hdr h2 em { font-style: italic; color: var(--gold-pale); }
.rooms-hdr-desc { color: rgba(255,255,255,0.32); max-width: 260px; text-align: right; font-size: 13.5px; line-height: 1.7; }

.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding-bottom: 80px; }
.cat-card { position: relative; overflow: hidden; cursor: pointer; height: 460px; display: block; text-decoration: none; }
.cat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--ease); }
.cat-card:hover .cat-img { transform: scale(1.06); }
.cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,40,32,0.95) 0%, rgba(27,40,32,0.4) 50%, rgba(27,40,32,0.08) 100%); transition: background 0.45s; display: flex; flex-direction: column; justify-content: flex-end; padding: 38px 36px; }
.cat-card:hover .cat-overlay { background: linear-gradient(to top, rgba(27,40,32,0.98) 0%, rgba(27,40,32,0.72) 58%, rgba(27,40,32,0.28) 100%); }
.cat-num { font-family: var(--f-serif); font-size: 120px; font-weight: 300; color: rgba(255,255,255,0.05); line-height: 1; position: absolute; top: 8px; right: 18px; letter-spacing: -0.04em; pointer-events: none; user-select: none; }
.cat-types { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.cat-type-tag { font-family: var(--f-sans); font-size: 9px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.38); border: 1px solid rgba(255,255,255,0.12); padding: 4px 10px; }
.cat-card h3 { font-family: var(--f-serif); font-size: clamp(26px, 2.8vw, 36px); font-weight: 300; color: #fff; line-height: 1.15; letter-spacing: -0.01em; }
.cat-desc { font-size: 13.5px; color: rgba(255,255,255,0.5); line-height: 1.75; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s var(--ease), opacity 0.4s, margin-top 0.4s; margin-top: 0; }
.cat-card:hover .cat-desc { max-height: 100px; opacity: 1; margin-top: 14px; }
.cat-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateY(10px); transition: opacity 0.3s var(--ease) 0.1s, transform 0.3s var(--ease) 0.1s, margin-top 0.4s, max-height 0.4s; margin-top: 0; max-height: 0; overflow: hidden; }
.cat-card:hover .cat-btn { opacity: 1; transform: translateY(0); margin-top: 22px; max-height: 40px; }

/* ── SALONES — Cards (index) ─────────────────────────────── */
#salones { background: var(--forest); }
#salones::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, transparent, var(--clay), var(--gold), var(--clay), transparent); }
.salones-hdr { padding: 80px 0 52px; display: flex; justify-content: space-between; align-items: flex-end; }
.salones-hdr h2 { font-family: var(--f-serif); font-size: clamp(32px, 4vw, 52px); font-weight: 300; color: #fff; line-height: 1.05; letter-spacing: -0.01em; margin-top: 12px; }
.salones-hdr h2 em { font-style: italic; color: var(--gold-pale); }
.salones-hdr-desc { color: rgba(255,255,255,0.32); max-width: 260px; text-align: right; font-size: 13.5px; line-height: 1.7; }

.sal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding-bottom: 80px; }
.sal-card { position: relative; overflow: hidden; cursor: pointer; height: 440px; display: block; text-decoration: none; }
.sal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--ease); }
.sal-card:hover .sal-img { transform: scale(1.07); }
.sal-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,40,32,0.94) 0%, rgba(27,40,32,0.38) 52%, rgba(27,40,32,0.1) 100%); transition: background 0.45s; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px 30px; }
.sal-card:hover .sal-overlay { background: linear-gradient(to top, rgba(27,40,32,0.97) 0%, rgba(27,40,32,0.7) 58%, rgba(27,40,32,0.28) 100%); }
.sal-tag { font-family: var(--f-sans); font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.sal-card h3 { font-family: var(--f-serif); font-size: clamp(24px, 2.4vw, 32px); font-weight: 300; color: #fff; line-height: 1.2; letter-spacing: -0.01em; }
.sal-desc { font-size: 13px; color: rgba(255,255,255,0.48); line-height: 1.75; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s var(--ease), opacity 0.4s, margin-top 0.4s; margin-top: 0; }
.sal-card:hover .sal-desc { max-height: 100px; opacity: 1; margin-top: 12px; }
.sal-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateY(10px); transition: opacity 0.3s var(--ease) 0.1s, transform 0.3s var(--ease) 0.1s, margin-top 0.4s, max-height 0.4s; margin-top: 0; max-height: 0; overflow: hidden; }
.sal-card:hover .sal-btn { opacity: 1; transform: translateY(0); margin-top: 18px; max-height: 40px; }

/* ── SERVICES ────────────────────────────────────────────── */
#services { background: var(--sand); }
.services-header { text-align: center; margin-bottom: 60px; }
.services-header .terrace-line { justify-content: center; }
.services-header h2 { font-family: var(--f-serif); font-size: clamp(30px, 3.8vw, 48px); font-weight: 300; color: var(--dark); letter-spacing: -0.01em; margin-top: 12px; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.svc-card { background: var(--cream); padding: 38px 28px; position: relative; overflow: hidden; transition: background 0.3s; }
.svc-card::after { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--clay), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.svc-card:hover { background: #fff; }
.svc-card:hover::after { transform: scaleX(1); }
.svc-icon { width: 48px; height: 48px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 18px; margin-bottom: 20px; transition: all 0.3s; }
.svc-card:hover .svc-icon { background: var(--clay); border-color: var(--clay); color: #fff; }
.svc-card h3 { font-family: var(--f-serif); font-size: 19px; font-weight: 400; color: var(--dark); margin-bottom: 9px; }
.svc-card p { font-size: 13.5px; line-height: 1.7; }

/* ── GALLERY ─────────────────────────────────────────────── */
#gallery { background: var(--dark); padding: 80px 0; }
.gallery-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; }
.gallery-header h2 { font-family: var(--f-serif); font-size: clamp(28px, 3.5vw, 42px); font-weight: 300; color: #fff; letter-spacing: -0.01em; margin-top: 12px; }
.gallery-link { font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 8px; transition: gap 0.3s; }
.gallery-link:hover { gap: 14px; color: var(--gold-pale); }
.gallery-strip { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; height: 420px; }
.gallery-item { overflow: hidden; position: relative; }
.gallery-item.main { grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item::after { content: ''; position: absolute; inset: 0; background: rgba(27,40,32,0.0); transition: background 0.3s; }
.gallery-item:hover::after { background: rgba(27,40,32,0.25); }

/* ── TESTIMONIALS ────────────────────────────────────────── */
#testimonials { background: var(--cream); position: relative; overflow: hidden; }
#testimonials::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--clay), transparent); }
.test-header { text-align: center; margin-bottom: 56px; }
.test-header .terrace-line { justify-content: center; }
.test-header h2 { font-family: var(--f-serif); font-size: clamp(28px, 3.5vw, 44px); font-weight: 300; color: var(--dark); margin-top: 12px; letter-spacing: -0.01em; }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.test-card { background: var(--sand); padding: 36px 32px; position: relative; }
.test-card::before { content: '\201C'; font-family: var(--f-serif); font-size: 80px; color: var(--clay); opacity: 0.18; line-height: 0.7; position: absolute; top: 24px; left: 24px; }
.test-card p { font-family: var(--f-serif); font-size: 16px; font-style: italic; font-weight: 300; color: var(--dark); line-height: 1.75; position: relative; z-index: 1; }
.test-author { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.test-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sage); display: flex; align-items: center; justify-content: center; font-family: var(--f-serif); font-size: 16px; color: #fff; font-style: italic; flex-shrink: 0; }
.test-author-info strong { display: block; font-family: var(--f-sans); font-size: 12px; font-weight: 600; color: var(--dark); letter-spacing: 0.04em; }
.test-author-info span { font-size: 10.5px; color: var(--mid); letter-spacing: 0.04em; }
.test-stars { display: flex; gap: 3px; margin-top: 18px; }
.test-stars i { color: var(--gold); font-size: 12px; }

/* ── CONTACT ─────────────────────────────────────────────── */
#contact { background: var(--dark); }
#contact::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, var(--clay), var(--gold), var(--clay)); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: start; padding-top: 100px; padding-bottom: 100px; }
.contact-left h2 { font-family: var(--f-serif); font-size: clamp(30px, 3.8vw, 50px); font-weight: 300; color: #fff; line-height: 1.08; letter-spacing: -0.01em; margin-top: 14px; }
.contact-left h2 em { font-style: italic; color: var(--gold-pale); }
.contact-left > p { margin-top: 20px; color: rgba(255,255,255,0.38); font-size: 14.5px; }
.contact-items { margin-top: 44px; display: flex; flex-direction: column; gap: 22px; }
.ci { display: flex; align-items: flex-start; gap: 16px; }
.ci-icon { width: 38px; height: 38px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.ci-body { display: flex; flex-direction: column; gap: 2px; }
.ci-label { font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.ci-val { font-size: 14px; color: rgba(255,255,255,0.62); font-weight: 300; }
.ci-val a { color: rgba(255,255,255,0.62); transition: color 0.3s; }
.ci-val a:hover { color: var(--gold-pale); }
.contact-social { display: flex; gap: 10px; margin-top: 36px; }
.soc { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.35); font-size: 13px; transition: all 0.3s; }
.soc:hover { border-color: var(--gold); color: var(--gold); background: rgba(196,144,42,0.08); }
.contact-otas { margin-top: 36px; display: flex; align-items: center; gap: 16px; }
.contact-otas span { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.25); font-family: var(--f-sans); }
.ota-logo { height: 24px; width: auto; filter: brightness(0) invert(1); opacity: 0.3; transition: opacity 0.3s; }
.ota-logo:hover { opacity: 0.65; }
.contact-form h3 { font-family: var(--f-serif); font-size: 28px; font-weight: 400; color: #fff; margin-bottom: 30px; }
.fg { margin-bottom: 16px; }
.fg label { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 7px; }
.fg input, .fg textarea, .fg select { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 12px 15px; font-family: var(--f-sans); font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.72); outline: none; transition: border-color 0.3s; appearance: none; }
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color: var(--gold); }
.fg input::placeholder, .fg textarea::placeholder { color: rgba(255,255,255,0.18); }
.fg textarea { height: 112px; resize: none; }
.fg select option, .fg select optgroup { background: var(--forest); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.btn-submit { width: 100%; padding: 14px; background: var(--clay); color: #fff; border: none; font-family: var(--f-sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background 0.3s; }
.btn-submit:hover { background: var(--clay-light); }
.contact-map { height: 220px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); overflow: hidden; }
.contact-map iframe { width: 100%; height: 100%; border: none; filter: grayscale(1) invert(0.85) hue-rotate(180deg); opacity: 0.7; }

/* ── FOOTER ──────────────────────────────────────────────── */
#footer { background: var(--dark); border-top: 1px solid rgba(255,255,255,0.05); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { height: 28px; filter: brightness(0) invert(1); opacity: 0.28; }
.footer-brand span { font-family: var(--f-serif); font-size: 14px; color: rgba(255,255,255,0.28); }
.footer-copy { font-size: 10.5px; color: rgba(255,255,255,0.15); letter-spacing: 0.1em; }
.footer-links { display: flex; gap: 24px; list-style: none; }
.footer-links a { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.22); transition: color 0.3s; }
.footer-links a:hover { color: var(--gold-pale); }

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }

/* ── PAGE HERO (interior pages) ──────────────────────────── */
.page-hero { position: relative; height: 68vh; min-height: 480px; overflow: hidden; display: flex; align-items: flex-end; padding-top: 74px; }
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,40,32,0.94) 0%, rgba(27,40,32,0.42) 55%, rgba(27,40,32,0.5) 100%); }
.page-hero-content { position: relative; z-index: 2; padding-bottom: 72px; width: 100%; }
.page-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 10px; font-family: var(--f-sans); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.32); }
.page-breadcrumb a { color: rgba(255,255,255,0.32); transition: color 0.3s; }
.page-breadcrumb a:hover { color: var(--gold-pale); }
.page-breadcrumb i { font-size: 7px; opacity: 0.4; }
.page-hero h1 { font-family: var(--f-serif); font-size: clamp(40px, 5.5vw, 72px); font-weight: 300; color: #fff; line-height: 1.02; letter-spacing: -0.02em; }
.page-hero h1 em { font-style: italic; color: var(--gold-pale); }
.page-hero-types { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.page-type-tag { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.15); padding: 5px 12px; font-family: var(--f-sans); }
.page-cat-num { font-family: var(--f-serif); font-size: 160px; font-weight: 300; color: rgba(255,255,255,0.035); line-height: 1; position: absolute; bottom: 0; right: 0; letter-spacing: -0.04em; pointer-events: none; }
.page-hero-sub { margin-top: 18px; font-size: 15px; color: rgba(255,255,255,0.45); max-width: 480px; line-height: 1.7; font-weight: 300; }
.page-hero-actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }

/* ── CATEGORY INTRO (habitaciones) ───────────────────────── */
.cat-intro { background: var(--sand); padding: 56px 0; border-bottom: 1px solid rgba(196,144,42,0.12); }
.cat-intro-inner { display: flex; align-items: flex-start; gap: 72px; }
.cat-intro-text { flex: 1; }
.cat-intro-text h2 { font-family: var(--f-serif); font-size: clamp(24px, 2.8vw, 36px); font-weight: 300; color: var(--dark); letter-spacing: -0.01em; margin-top: 12px; line-height: 1.15; }
.cat-intro-text h2 em { font-style: italic; color: var(--clay); }
.cat-intro-text p { margin-top: 16px; font-size: 15px; line-height: 1.85; }
.cat-intro-feats { display: flex; flex-direction: column; gap: 10px; min-width: 240px; padding-top: 4px; }
.cif { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--mid); }
.cif i { width: 30px; height: 30px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 11px; flex-shrink: 0; }

/* ── ROOMS SECTION (habitaciones) ────────────────────────── */
.rooms-section { background: var(--dark); padding-bottom: 80px; }
.rooms-section::before { content: ''; display: block; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), var(--clay), var(--gold), transparent); }
.rooms-section-hdr { padding: 64px 0 40px; }
.rooms-section-hdr h2 { font-family: var(--f-serif); font-size: clamp(28px, 3.2vw, 42px); font-weight: 300; color: #fff; letter-spacing: -0.01em; margin-top: 10px; }

/* ── MINI SLIDER ─────────────────────────────────────────── */
.ms { position: absolute; inset: 0; overflow: hidden; }
.ms-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s var(--ease); }
.ms-slide.on { opacity: 1; }
.ms-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: rgba(27,40,32,0.65); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: background 0.3s; }
.ms-btn:hover { background: var(--clay); border-color: var(--clay); }
.ms-btn.prev { left: 14px; }
.ms-btn.next { right: 14px; }
.ms-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.ms-d { width: 22px; height: 2px; background: rgba(255,255,255,0.22); cursor: pointer; transition: background 0.3s, width 0.3s; }
.ms-d.on { background: var(--gold); width: 32px; }
.ms[data-n="1"] .ms-btn, .ms[data-n="1"] .ms-dots { display: none; }

/* ── ROOM CARD (habitaciones) ────────────────────────────── */
.rcard { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; margin-bottom: 3px; }
.rcard:nth-child(even) .rcard-img  { order: 2; }
.rcard:nth-child(even) .rcard-body { order: 1; }
.rcard-img { position: relative; }
.rcard-body { background: var(--forest); padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.rcard-cat { font-family: var(--f-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.rcard-body h3 { font-family: var(--f-serif); font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; color: #fff; line-height: 1.1; letter-spacing: -0.01em; }
.rcard-desc { margin-top: 16px; font-size: 14px; color: rgba(255,255,255,0.42); line-height: 1.8; }
.rcard-feats { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; list-style: none; }
.rcard-feats li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,0.38); }
.rcard-feats li i { color: var(--gold); font-size: 10px; width: 14px; flex-shrink: 0; }
.rcard-cta { margin-top: 28px; }

/* ── CTA BAND ────────────────────────────────────────────── */
.cta-band { background: var(--clay); padding: 72px 0; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cta-band h2 { font-family: var(--f-serif); font-size: clamp(26px, 3vw, 42px); font-weight: 300; color: #fff; line-height: 1.1; letter-spacing: -0.01em; }
.cta-band h2 em { font-style: italic; }
.cta-band p { color: rgba(255,255,255,0.58); margin-top: 10px; font-size: 14.5px; max-width: 460px; }

/* ── INTRO STRIP (salones) ───────────────────────────────── */
.intro-strip { background: var(--sand); padding: 52px 0; border-bottom: 1px solid rgba(196,144,42,0.12); }
.intro-strip-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.intro-feat { display: flex; align-items: center; gap: 16px; padding: 0 32px; border-right: 1px solid rgba(196,144,42,0.15); }
.intro-feat:first-child { padding-left: 0; }
.intro-feat:last-child { border-right: none; }
.intro-feat-icon { width: 44px; height: 44px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 16px; flex-shrink: 0; }
.intro-feat-text strong { display: block; font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark); margin-bottom: 3px; }
.intro-feat-text span { font-size: 13px; color: var(--mid); }

/* ── SALON SECTIONS (salones) ────────────────────────────── */
.salon-section { scroll-margin-top: 74px; }
.salon-section:nth-child(odd)  { background: var(--dark); }
.salon-section:nth-child(even) { background: var(--forest); }
.salon-section::before { content: ''; display: block; height: 3px; }
.salon-section:nth-child(odd)::before  { background: linear-gradient(90deg, transparent, var(--gold), var(--clay), var(--gold), transparent); }
.salon-section:nth-child(even)::before { background: linear-gradient(90deg, transparent, var(--clay), var(--gold), var(--clay), transparent); }

.salon-inner { display: grid; grid-template-columns: 55% 45%; min-height: 540px; }
.salon-section:nth-child(even) .salon-inner { direction: rtl; }
.salon-section:nth-child(even) .salon-inner > * { direction: ltr; }
.salon-img { position: relative; overflow: hidden; }

.salon-body { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.salon-tag { font-family: var(--f-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.salon-body h2 { font-family: var(--f-serif); font-size: clamp(30px, 3.5vw, 48px); font-weight: 300; color: #fff; line-height: 1.1; letter-spacing: -0.01em; }
.salon-body h2 em { font-style: italic; color: var(--gold-pale); }
.salon-body > p { margin-top: 18px; font-size: 14.5px; color: rgba(255,255,255,0.42); line-height: 1.8; }

.salon-cap { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.cap-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); padding: 14px 16px; text-align: center; }
.cap-num { font-family: var(--f-serif); font-size: 30px; font-weight: 300; color: #fff; line-height: 1; }
.cap-label { font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-top: 4px; font-family: var(--f-sans); }

.salon-feats { margin-top: 24px; display: flex; flex-direction: column; gap: 9px; }
.sf { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.4); }
.sf i { color: var(--gold); font-size: 11px; width: 16px; flex-shrink: 0; }
.salon-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── CONTACT MINI (salones) ──────────────────────────────── */
.contact-mini { background: var(--dark); padding: 80px 0; border-top: 1px solid rgba(196,144,42,0.12); }
.contact-mini-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; }
.cmi { background: var(--forest); padding: 32px 28px; display: flex; gap: 16px; align-items: flex-start; }
.cmi-icon { width: 40px; height: 40px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 14px; flex-shrink: 0; }
.cmi-body { display: flex; flex-direction: column; gap: 4px; }
.cmi-label { font-size: 9px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.cmi-val { font-size: 14px; color: rgba(255,255,255,0.55); font-weight: 300; }
.cmi-val a { color: rgba(255,255,255,0.55); transition: color 0.3s; }
.cmi-val a:hover { color: var(--gold-pale); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about-image-secondary { display: none; }
  .gallery-strip { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 360px; }
  .gallery-item.main { grid-column: span 1; grid-row: span 1; }
  .stats-inner { flex-wrap: wrap; height: auto; padding: 20px 0; }
  .stat-item { border-right: 1px solid rgba(255,255,255,0.06); min-width: 50%; padding: 16px 20px; }
  .sal-grid { grid-template-columns: repeat(2, 1fr); }
  .salon-inner { grid-template-columns: 1fr 1fr; }
  .salon-body { padding: 44px 36px; }
}

@media (max-width: 900px) {
  .rcard { grid-template-columns: 1fr; min-height: auto; }
  .rcard:nth-child(even) .rcard-img,
  .rcard:nth-child(even) .rcard-body { order: unset; }
  .rcard-img { height: 300px; position: relative; }
  .rcard-body { padding: 36px 28px; }
  .cat-intro-inner { flex-direction: column; gap: 32px; }
  .cta-band-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 768px) {
  .nav-links, .nav-book { display: none; }
  .section-pad { padding: 68px 0; }
  .about-grid, .contact-grid, .test-grid { grid-template-columns: 1fr; gap: 40px; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card { height: 340px; }
  .sal-grid { grid-template-columns: 1fr; }
  .sal-card { height: 300px; }
  .rooms-hdr, .salones-hdr { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rooms-hdr-desc, .salones-hdr-desc { text-align: left; max-width: 100%; }
  .gallery-strip { grid-template-columns: 1fr 1fr; height: 300px; }
  .gallery-item.main { grid-column: span 2; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .hero-scroll { display: none; }
  .footer-inner { flex-direction: column; height: auto; padding: 20px 0; gap: 12px; }
  .footer-links { display: none; }
  .contact-grid { padding-top: 68px; padding-bottom: 68px; }
  .page-cat-num { font-size: 90px; }
  .salon-inner { grid-template-columns: 1fr; }
  .salon-section:nth-child(even) .salon-inner { direction: ltr; }
  .salon-img { height: 280px; position: relative; }
  .salon-body { padding: 36px 28px; }
  .intro-strip-inner { grid-template-columns: 1fr; gap: 20px; }
  .intro-feat { border-right: none; padding: 0; }
  .contact-mini-grid { grid-template-columns: 1fr; }
  .page-hero-actions { flex-direction: column; }
}

@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .about-mv { grid-template-columns: 1fr; }
  .stat-item { min-width: 100%; }
  .salon-cap { grid-template-columns: 1fr; }
}