/*
  Cabañas del Tío Tavo — design tokens (Opción B: "Teal Nocturno")
  Color: warm stone ground/ink, a deep teal as the working accent (distinct
    from WhatsApp's own green — no more two-greens clash), firefly gold
    reserved for rare highlights, tying to the property's actual night/
    luciérnagas moments. The WhatsApp button uses its own muted olive-green,
    deliberately far from the teal so the two don't read as a mismatched pair.
  Type: Zilla Slab (headings) — a slab serif reads as built, hewn, load-bearing,
    which suits hand-built stone-and-timber cabins — paired with Karla, a warm
    humanist grotesque for body/UI text.
  Layout: full-bleed photography with grounded gradient overlays, cards on a
    consistent flex grid so button rows always align, horizontal scroll-snap
    galleries instead of a boxed thumbnail wall.
*/

:root {
  --color-bg: #f1ece0;
  --color-bg-alt: #e7dfcc;
  --color-surface: #ffffff;
  --color-ink: #1d2422;
  --color-ink-soft: #52605c;
  --color-teal: #2b5d5a;
  --color-teal-deep: #1f4644;
  --color-clay: #b1502f;
  --color-gold: #b9822f;
  --color-border: rgba(29, 36, 34, 0.14);
  --color-whatsapp: #4c7a4a;
  --color-whatsapp-deep: #3d6339;

  /* Fixed — NOT redefined in dark-mode blocks. Navbar/footer/"always dark"
     sections need to stay dark regardless of the viewer's light/dark
     preference; --color-ink itself flips (it's the *text* color, so it must
     go light-on-dark), which is why it can't double as this. */
  --color-chrome-bg: #1d2422;
  --color-chrome-text: #f1ece0;

  --font-display: "Zilla Slab", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", system-ui, -apple-system, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-card: 0 1px 2px rgba(29, 36, 34, 0.06), 0 8px 24px -12px rgba(29, 36, 34, 0.25);

  color-scheme: light;

  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-ink);
  --bs-body-font-family: var(--font-body);
  --bs-link-color: var(--color-teal-deep);
  --bs-link-hover-color: var(--color-teal);
  --bs-secondary-color: var(--color-ink-soft);
  --bs-tertiary-bg: var(--color-bg-alt);
  --bs-success: var(--color-teal);
  --bs-success-rgb: 43, 93, 90;
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141b1a;
    --color-bg-alt: #1b2321;
    --color-surface: #202826;
    --color-ink: #e8e4d8;
    --color-ink-soft: #a9b2ae;
    --color-teal: #6fa39d;
    --color-teal-deep: #8cbdb6;
    --color-clay: #d97c55;
    --color-gold: #e8b94a;
    --color-whatsapp: #6b9a5e;
    --color-whatsapp-deep: #85b378;
    --color-border: rgba(232, 228, 216, 0.16);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #141b1a;
  --color-bg-alt: #1b2321;
  --color-surface: #202826;
  --color-ink: #e8e4d8;
  --color-ink-soft: #a9b2ae;
  --color-teal: #6fa39d;
  --color-teal-deep: #8cbdb6;
  --color-clay: #d97c55;
  --color-gold: #e8b94a;
  --color-whatsapp: #6b9a5e;
  --color-whatsapp-deep: #85b378;
  --color-border: rgba(232, 228, 216, 0.16);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --color-bg: #f1ece0;
  --color-bg-alt: #e7dfcc;
  --color-surface: #ffffff;
  --color-ink: #1d2422;
  --color-ink-soft: #52605c;
  --color-teal: #2b5d5a;
  --color-teal-deep: #1f4644;
  --color-clay: #b1502f;
  --color-gold: #b9822f;
  --color-whatsapp: #4c7a4a;
  --color-whatsapp-deep: #3d6339;
  --color-border: rgba(29, 36, 34, 0.14);
  color-scheme: light;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
}

a {
  color: var(--color-teal-deep);
}

a:hover {
  color: var(--color-teal);
}

h1, h2, h3, h4, h5, h6,
.display-4, .display-5 {
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.lead {
  font-family: var(--font-body);
}

.bg-light {
  background-color: var(--color-bg-alt) !important;
}

.bg-dark {
  background-color: var(--color-chrome-bg) !important;
  color: var(--color-chrome-text) !important;
}

.bg-dark .text-light-emphasis {
  color: rgba(243, 238, 227, 0.72) !important;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-teal-deep);
}

.breadcrumb {
  font-size: 0.88rem;
  margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-ink-soft);
}

.breadcrumb-item.active {
  color: var(--color-ink-soft);
}

.facility-icon svg {
  width: 34px;
  height: 34px;
}

/* Navbar */

.navbar {
  background-color: var(--color-chrome-bg) !important;
}

.navbar-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
}

.navbar-brand-text {
  color: var(--color-gold);
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f1ece0;
  margin-right: 0.6rem;
  flex: 0 0 auto;
}

.logo-chip img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.navbar-dark .nav-link {
  color: rgba(243, 238, 227, 0.75);
  font-weight: 500;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
  color: var(--color-gold);
}

/* Buttons */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.btn-success {
  --bs-btn-bg: var(--color-teal);
  --bs-btn-border-color: var(--color-teal);
  --bs-btn-hover-bg: var(--color-teal-deep);
  --bs-btn-hover-border-color: var(--color-teal-deep);
  --bs-btn-active-bg: var(--color-teal-deep);
  --bs-btn-active-border-color: var(--color-teal-deep);
}

.btn-outline-success {
  --bs-btn-color: var(--color-teal-deep);
  --bs-btn-border-color: var(--color-teal);
  --bs-btn-hover-bg: var(--color-teal);
  --bs-btn-hover-border-color: var(--color-teal);
}

.btn-whatsapp {
  background-color: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
  color: #fff;
}

.btn-whatsapp:hover {
  background-color: var(--color-whatsapp-deep);
  border-color: var(--color-whatsapp-deep);
  color: #fff;
}

/* Hero sections */

.hero {
  background-size: cover;
  background-position: center;
  min-height: 60vh;
  position: relative;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hero-crossfade 30s infinite;
}

@keyframes hero-crossfade {
  0% { opacity: 0; }
  4% { opacity: 1; }
  21% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
    opacity: 0;
  }

  .hero-slide:first-child {
    opacity: 1;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(29, 36, 34, 0.72), rgba(29, 36, 34, 0.2));
}

.cabin-hero {
  background-size: cover;
  background-position: center;
  min-height: 40vh;
  position: relative;
}

.cabin-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(29, 36, 34, 0.75), rgba(29, 36, 34, 0.2));
}

.cabin-hero .container {
  position: relative;
  z-index: 1;
}

/* Cabin cards */

.cabin-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.cabin-card-img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.cabin-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem;
}

.cabin-capacity {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-bottom: 0.85rem;
}

.amenity-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.1rem;
  list-style: none;
  flex: 1 1 auto;
}

.amenity-grid li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.amenity-grid svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-teal-deep);
}

.cabin-card-body > .btn,
.cabin-card-body > a.btn {
  margin-top: auto;
}

/* Gallery slider */

.gallery-slider {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-teal) transparent;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-slider {
    scroll-behavior: auto;
  }
}

.gallery-slider img {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(78vw, 380px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.gallery-wrap {
  position: relative;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-nav:hover {
  color: var(--color-teal-deep);
}

.gallery-nav.prev {
  left: -8px;
}

.gallery-nav.next {
  right: -8px;
}

@media (max-width: 767.98px) {
  .gallery-nav {
    display: none;
  }
}

/* WhatsApp floating button */

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: var(--color-whatsapp);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.whatsapp-float:hover {
  background-color: var(--color-whatsapp-deep);
}

/* Firefly accent — used sparingly, night/luciérnagas sections only */

.firefly-dot {
  color: var(--color-gold);
}

@media (prefers-reduced-motion: no-preference) {
  .cabin-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .cabin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(42, 36, 29, 0.08), 0 16px 32px -16px rgba(42, 36, 29, 0.35);
  }
}