/* ═══════════════════════════════════════════════════════════
   INSPIRA RANCH · EARTH THEME (design preview v2, Nov 2026)
   Loaded AFTER theme-pastel.css. Re-skins the same markup:
   earthy neutrals 70 / forest olive + espresso 20 / burnished gold 10.
   Instrument Serif headings, IBM Plex Mono labels, Jost body (already loaded, no extra font).
   Footer keeps its existing look (owner approved, Nov 11).
   ═══════════════════════════════════════════════════════════ */

:root {
  --ivory:      #F6F1E8;  /* alabaster, the 70% base */
  --linen:      #EFE7DA;
  --petal:      #E9E1D3;  /* limestone */
  --blush:      #D8C6A6;
  --blush-light:#EADFCB;
  --sage:       #DDE0D2;
  --sage-deep:  #6B7556;
  --sky:        #E9E1D3;
  --mauve:      #8C7B62;
  --champagne:  #D8CDB9;
  --accent:     #7A5A22;  /* deep gold, passes 4.5:1 on alabaster */
  --ink:        #3B332C;
  --ink-soft:   #4A5A3C;
  --ink-deep:   #2F3826;  /* forest olive, primary actions */
  --muted:      #5C5246;
  --gold-light: #C9A45C;  /* burnished gold, the 10% accent */
  --espresso:   #2E2620;
  --olive:      #3E4A33;
  --font-heading: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-display: 'IBM Plex Mono', ui-monospace, monospace;
  --font-script:  'Instrument Serif', Georgia, serif;
  --font-body:    'Jost', system-ui, -apple-system, sans-serif;
}
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
p { font-weight: 400; }

/* ── Type: editorial scale ─────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400 !important; letter-spacing: -.005em; }
h2 { font-size: clamp(2.5rem, 4.6vw, 4.2rem) !important; line-height: 1.02 !important; }
h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); }
.script, .ir-script { font-style: italic; }
.gold-label, .hero-eyebrow, .section-label, .eyebrow, .kicker {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--accent) !important;
}

/* ── Section rhythm: alabaster, limestone, then deep olive / espresso bands ── */
.section-light { background: var(--petal) !important; }
.section-dark, .section-black, .faq-section { background: var(--ivory) !important; }
.section-dark, .section-black, .section-light, .services-teaser, .testimonials,
.contact-section, .story-section, .team-section, .values-section,
.packages-section, .lodging-section, .conferences-section { border-top: 0 !important; }

/* Stats: espresso band, gold figures */
.stats-strip { background: var(--espresso) !important; }
.stats-strip .stat-number { color: var(--gold-light) !important; font-family: var(--font-heading) !important; font-size: clamp(2.6rem, 4vw, 3.6rem) !important; }
.stats-strip .stat-label, .stats-strip p, .stats-strip span { color: #E9E1D3 !important; font-family: var(--font-display); font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase; }
.stats-strip .stat-divider { background: rgba(233,225,211,.2) !important; }

/* Testimonials: deep olive band */
.testimonials, .testimonials.section-dark { background: var(--olive) !important; }
.testimonials h2, .testimonials h3, .testimonials .section-header h2 { color: #F6F1E8 !important; }
.testimonials .gold-label { color: #E8D9B8 !important; }
.testimonials p, .testimonials span, .testimonials cite { color: #E9E1D3; }
.testimonials .review-card, .testimonials .testimonial-card { background: rgba(246,241,232,.06) !important; border-color: rgba(246,241,232,.18) !important; }
.testimonials .review-card p, .testimonials .testimonial-card p { color: #F6F1E8 !important; }
.testimonials .btn-primary, .testimonials .btn-outline, .testimonials a.btn-primary { background: var(--gold-light) !important; border-color: var(--gold-light) !important; color: var(--espresso) !important; }
.testimonials .btn-primary *, .testimonials .btn-outline * { color: var(--espresso) !important; }

/* Explore cards band: espresso */
#explore.section-dark { background: var(--espresso) !important; }
#explore h2, #explore h3, #explore .section-header h2 { color: #F6F1E8 !important; }
#explore .gold-label { color: #E8D9B8 !important; }
#explore p { color: #E9E1D3 !important; }

/* CTA banner on a photo stays light type */
.cta-banner h2 { color: #F6F1E8 !important; }

/* ── Buttons ──────────────────────────────────────────── */
.btn-primary, button.btn-primary, a.btn-primary, #submitBtn {
  background: var(--ink-deep) !important; border-color: var(--ink-deep) !important; color: #F6F1E8 !important;
  font-family: var(--font-display) !important; font-size: 12.5px !important; letter-spacing: .16em !important;
  outline: 0 !important; min-height: 48px;
}
.btn-primary:hover, #submitBtn:hover { background: var(--olive) !important; border-color: var(--olive) !important; }
.btn-outline, .btn-outline-dark, .btn-secondary {
  font-family: var(--font-display) !important; letter-spacing: .16em !important;
  border-color: var(--ink-deep) !important; color: var(--ink-deep) !important;
}

/* ── Navigation: alabaster bar, olive type ─────────────── */
nav:not(.footer-nav):not([aria-label]), #mainNav {
  background: rgba(246,241,232,.94) !important;
  border-bottom: 1px solid rgba(216,205,185,.7) !important;
}
.nav-logo, .nav-logo-text, #mainNav .nav-logo-text, #mainNav.scrolled .nav-logo-text {
  font-family: var(--font-heading) !important; font-size: 1.5rem !important; letter-spacing: .26em !important;
  text-transform: uppercase; color: var(--espresso) !important;
}
.nav-links a, #mainNav .nav-links a {
  font-family: var(--font-display) !important; font-size: 12px !important; font-weight: 400 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--espresso) !important;
}
#mainNav .nav-links a.nav-bundle {
  background: var(--gold-light) !important; color: var(--espresso) !important; outline: 0 !important;
  font-family: var(--font-display) !important; letter-spacing: .14em !important;
}
#mainNav .nav-links a.nav-bundle:hover { background: #D8B66E !important; color: var(--espresso) !important; }
.lang-toggle, #mainNav .nav-inner > #langBtn, #langBtn {
  font-family: var(--font-display) !important; letter-spacing: .14em !important; font-size: 12px !important;
  color: var(--espresso) !important; border-color: var(--espresso) !important;
}
.hamburger span, #mainNav .hamburger span { background: var(--espresso) !important; }

/* ── Homepage hero: full-bleed photo, headline set over it, bottom-left ── */
.hero {
  position: relative !important; display: block !important;
  min-height: 100vh !important; min-height: 100svh !important;
  padding: 0 !important; background: var(--espresso) !important; overflow: hidden;
}
.hero .hero-bg {
  position: absolute !important; inset: 0 !important; height: 100% !important; min-height: 0 !important;
  background: var(--espresso) !important;
}
.hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero .hero-overlay {
  display: block !important; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(28,24,20,.30) 0%, rgba(28,24,20,.12) 22%, rgba(28,24,20,.50) 50%, rgba(24,20,16,.88) 78%, rgba(24,20,16,.94) 100%) !important;
}
.hero .hero-content {
  position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 2;
  max-width: 1360px !important; margin: 0 auto !important; text-align: left !important;
  padding: 0 40px clamp(40px, 7vh, 72px) !important;
}
.hero .hero-content .gold-label, .hero .hero-content .hero-eyebrow { color: #E8D9B8 !important; }
.hero .hero-content h1 {
  color: #F6F1E8 !important; text-shadow: none !important;
  font-family: var(--font-heading) !important; font-weight: 400 !important;
  font-size: clamp(2rem, 3.4vw, 3.4rem) !important; line-height: 1.05 !important; letter-spacing: -.01em;
  max-width: 22ch; text-shadow: 0 2px 24px rgba(0,0,0,.35) !important; margin: 14px 0 0 !important;
}
.hero .hero-rule { background: var(--gold-light) !important; width: 64px; margin: 22px 0 !important; }
.hero .hero-content p { color: #EFE8DC !important; font-size: 1rem !important; max-width: 46ch; margin: 0 0 26px !important; }
.hero .hero-btns { justify-content: flex-start !important; }
.hero .btn-primary { background: var(--gold-light) !important; border-color: var(--gold-light) !important; color: var(--espresso) !important; }
.hero .btn-primary:hover { background: #D8B66E !important; border-color: #D8B66E !important; color: var(--espresso) !important; }
.hero .btn-primary * { color: var(--espresso) !important; }
.hero .btn-outline { background: transparent !important; border-color: rgba(246,241,232,.85) !important; color: #F6F1E8 !important; }
.hero .btn-outline:hover { background: #F6F1E8 !important; color: var(--espresso) !important; }
@media (max-width: 1024px) {
  .hero { min-height: 92svh !important; }
  .hero .hero-content { padding: 0 20px 34px !important; }
  .hero .hero-content h1 { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; }
  .hero .hero-content p { font-size: .98rem !important; }
  .hero .hero-btns { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
  .hero .hero-btns .btn-primary { flex: 1 1 100%; }
}

/* ── Offer tiles: square editorial crops, mono captions ── */
.offer-tiles { background: var(--ivory) !important; }
.offer-tile span, .offer-tile .offer-label { font-family: var(--font-display) !important; letter-spacing: .14em !important; text-transform: uppercase; }

/* ── Cards and forms ─────────────────────────────────── */
.faq-item, .pkg-card, .pkg-select-card, .amenity-card, .value-item, .service-item,
.blog-card, .review-card, .contact-form-wrap, .ir-facts, .pkg-note-card { border-color: rgba(216,205,185,.9) !important; border-radius: 0 !important; }
.faq-item { background: #FBF8F2 !important; }
.pkg-note-card { background: var(--olive) !important; }
.pkg-note-card .pkg-chips li, .pkg-note-card li { background: #F6F1E8 !important; color: var(--espresso) !important; border-color: #F6F1E8 !important; }
.pkg-note-card .btn-primary { background: var(--gold-light) !important; border-color: var(--gold-light) !important; color: var(--espresso) !important; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { box-shadow: 0 0 0 3px rgba(201,164,92,.35) !important; }
img { background: var(--petal); }

/* Gallery tabs: mono pills */
.idx-gallery .gallery-tab, .idx-gallery [role="tab"], .gallery-tabs button {
  font-family: var(--font-display) !important; letter-spacing: .12em !important; text-transform: uppercase; font-size: 12px !important; border-radius: 0 !important;
}

/* Cookie banner and a11y pill in the new palette */
#cookie-banner button.bg-brand-gold { background: var(--ink-deep) !important; color: #F6F1E8 !important; }
#a11y-toggle-btn { background: var(--ink-deep) !important; border-color: var(--ink-deep) !important; }

/* ── Footer: unchanged look. Pin the original fonts so it matches the current site. ── */
footer[role="contentinfo"], body > footer {
  --font-heading: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-display: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', 'Inter', system-ui, sans-serif;
  font-family: 'Jost', 'Inter', system-ui, sans-serif;
}

/* ═══ Structure v2 (Nov 11): page flow modeled on the strongest venue sites ═══
   Hero → trust band → choose your occasion → story → services → celebrations →
   gallery → conferences → stay → reviews → everything handled → build your event →
   FAQ → final call → tour and contact form → property marks → footer.
   Backgrounds alternate calm alabaster / limestone with one dark band every few
   sections, so the photos carry the color. */
.stats-strip                 { background: var(--espresso) !important; }
.offer-tiles                 { background: var(--ivory) !important; }
.about-snap                  { background: var(--petal) !important; }
#servicios.idx-services      { background: var(--ivory) !important; }
#explore                     { background: var(--espresso) !important; }
#galeria.idx-gallery         { background: var(--ivory) !important; }
#conferencias                { background: var(--petal) !important; }
#alojamiento                 { background: var(--ivory) !important; }
.testimonials                { background: var(--olive) !important; }
.pkg-note                    { background: var(--ivory) !important; }
#faq.faq-section             { background: var(--ivory) !important; }
#contacto.idx-contact        { background: var(--petal) !important; }
.property-logo-pair          { background: var(--ivory) !important; }

/* One generous, consistent vertical rhythm for every content section */
.about-snap, #servicios, #explore, #galeria, #conferencias, #alojamiento,
.testimonials, #reserva, #faq, #contacto {
  padding-top: clamp(72px, 9vw, 120px) !important;
  padding-bottom: clamp(72px, 9vw, 120px) !important;
}
.pkg-note { padding: clamp(56px, 7vw, 96px) 20px !important; }

/* Trust band sits tight under the hero, like a credential strip */
.stats-strip { padding-top: 34px !important; padding-bottom: 34px !important; }

/* Occasion tiles read as the first choice a visitor makes */
.offer-tiles { padding: clamp(24px, 3vw, 40px) clamp(12px, 2vw, 24px) !important; }

/* Final call band over a photo: darker scrim for legible type */
.cta-banner .cta-overlay { background: rgba(28,24,20,.55) !important; }
.cta-banner .btn-primary { background: var(--gold-light) !important; border-color: var(--gold-light) !important; color: var(--espresso) !important; }
.cta-banner .btn-primary * { color: var(--espresso) !important; }

/* Property marks: a quiet sign-off before the footer */
.property-logo-pair { border-top: 1px solid rgba(216,205,185,.8); }

/* Build-your-event: dark photo band so the call to action reads clearly */
#reserva.idx-packages { position: relative; overflow: hidden; background: var(--espresso) !important; }
#reserva .pkg-bg { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3 !important; filter: none !important; background: transparent !important; }
#reserva .container { position: relative; z-index: 1; }
#reserva h2 { color: #F6F1E8 !important; }
#reserva .gold-label, #reserva .gold-label * { color: #E8D9B8 !important; }
#reserva p, #reserva p * { color: #E9E1D3 !important; }
#reserva .btn-primary { background: var(--gold-light) !important; border-color: var(--gold-light) !important; color: var(--espresso) !important; }
#reserva .btn-primary * { color: var(--espresso) !important; }