:root {
  /* Core Eco-Tourism Palette (Rio Celeste) */
  --bg-main: #f0f9ff;         /* pale aqua */
  --bg-surface: #e0f2fe;      /* light water tint */
  --bg-footer: #bae6fd;       /* calm turquoise footer */
  --bg-nav: #e0f2fe;          /* keep a soft mint nav for balance */

  
  --text-main: #0c4a6e;       /* deep river blue */
  --text-secondary: #374151;  /* slate gray */
  --text-footer: #075985;     /* stronger footer contrast */

  --accent: #0ea5e9;          /* Rio Celeste turquoise */
  --accent-hover: #0284c7;    /* deeper aqua hover */

  --brand-primary: #0077b6;   /* bold turquoise blue */
  --brand-secondary: #00b4d8; /* bright aqua */
  --brand-accent: #90e0ef;    /* soft highlight aqua */

  --shadow: rgba(14, 165, 233, 0.25); /* blue-tinted shadow */
}


/* Global */
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  line-height: 1.7;
}

/* Links */
a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover,
a:focus {
  color: var(--accent-hover);
  outline: none;
}

/* Hero Section */
.hero-section {
  background: url('/images/baldi.webp') center center/cover no-repeat;
  min-height: 70vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(240,253,244,0.85) 0%, rgba(46,125,50,0.45) 100%);
  z-index: 0;
}
.hero-content {
  position: relative;
  max-width: 960px;
  text-align: center;
  color: var(--text-main);
  z-index: 1;
}
.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 800;
  text-shadow: 1px 1px 3px var(--shadow);
}
.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: var(--text-secondary);
}
.hero-content .btn-book {
  background-color: var(--accent);
  color: #fff;
  padding: 0.85rem 2.2rem;
  font-weight: 600;
  border-radius: 0.75rem;
  box-shadow: 0 6px 12px var(--shadow);
  transition: all 0.3s ease;
  display: inline-block;
}
.hero-content .btn-book:hover,
.hero-content .btn-book:focus {
  background-color: var(--accent-hover);
  box-shadow: 0 8px 18px var(--shadow);
}

/* Cards */
.hot-spring-card {
  background-color: var(--bg-surface);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  color: var(--text-main);
}
.hot-spring-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px var(--shadow);
}
.hot-spring-card h3 {
  margin-bottom: 0.75rem;
  color: var(--accent);
  font-weight: 700;
}
.hot-spring-card p {
  color: var(--text-secondary);
  line-height: 1.5;
}
.hot-spring-card a {
  margin-top: 1rem;
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  transition: color 0.3s ease;
}
.hot-spring-card a:hover,
.hot-spring-card a:focus {
  color: var(--accent-hover);
  outline: none;
}