/* ============================================================
   BBKey Guest Guide — Arta Terme, Piano d'Arta & Sutrio
   Premium CSS Stylesheet
   ============================================================ */

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --forest:     #2d5016;
  --forest-mid: #3d6b20;
  --forest-light: #5a8f35;
  --gold:       #c9a227;
  --gold-light: #e8c060;
  --cream:      #faf8f3;
  --warm-white: #ffffff;
  --dark:       #1a1a1a;
  --dark-mid:   #2c2c2c;
  --gray-text:  #555555;
  --gray-light: #f0ede6;
  --border:     #e0dbd0;
  --shadow:     0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:  0 12px 48px rgba(0,0,0,0.18);
  --radius:     12px;
  --radius-lg:  20px;
  --transition: all 0.3s ease;
  --font-head:  'Playfair Display', Georgia, serif;
  --font-body:  'Inter', system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--dark);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img { max-width: 100%; display: block; }

ul { list-style: none; }

/* ===== CONTAINER ===== */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      160deg,
      rgba(30,55,10,0.82) 0%,
      rgba(45,80,22,0.75) 40%,
      rgba(100,70,20,0.70) 100%
    ),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1800&q=80') center/cover no-repeat;
  overflow: hidden;
  padding: 80px 24px 120px;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center bottom, rgba(0,0,0,0.3) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  width: 100%;
}

.bbkey-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 8px 22px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.badge-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* Logo BBKey.FVG (PNG trasparente 500x500, senza sfondo, ritagliato via CSS sui margini vuoti) */
.bbkey-logo {
  --logo-w: 230px;
  width: var(--logo-w);
  height: calc(var(--logo-w) * 0.75);
  position: relative;
  margin: 0 auto 28px;
}

.bbkey-logo img {
  position: absolute;
  width: calc(var(--logo-w) * 1.39);
  max-width: none;
  left: calc(var(--logo-w) * -0.195);
  top: calc(var(--logo-w) * -0.265);
}

.bbkey-logo--footer {
  --logo-w: 190px;
  margin: 0 0 16px;
}

@media (max-width: 720px) {
  .bbkey-logo { --logo-w: 190px; margin-bottom: 22px; }
  .bbkey-logo--footer { --logo-w: 170px; }
}

.hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 18px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.hero-title .accent {
  color: var(--gold-light);
  font-style: italic;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: rgba(255,255,255,0.88);
  font-weight: 300;
  letter-spacing: 0.04em;
  margin-bottom: 48px;
}

.hero-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition);
  cursor: pointer;
}

.pill-btn:hover {
  background: rgba(255,255,255,0.30);
  transform: translateY(-2px);
}

.pill-btn.featured {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1a1a;
  font-weight: 600;
}

.pill-btn.featured:hover {
  background: var(--gold-light);
}

.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 1.3rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ===== SECTIONS ===== */
.section {
  padding: 90px 0;
}

.section.dark-section {
  background: var(--dark-mid);
  color: #fff;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header h2 {
  font-family: var(--font-head);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 12px;
  line-height: 1.2;
}

.section-header.light h2 {
  color: #fff;
}

.section-header p {
  font-size: 1.05rem;
  color: var(--gray-text);
  max-width: 560px;
  margin: 0 auto;
}

.section-header.light p {
  color: rgba(255,255,255,0.70);
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--forest-mid);
  background: rgba(90,143,53,0.12);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.section-label.light {
  color: var(--gold-light);
  background: rgba(201,162,39,0.18);
}

/* ===== WELCOME SECTION ===== */
.welcome-section {
  background: var(--warm-white);
  padding: 80px 0;
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.welcome-text h2 {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--dark);
  margin-bottom: 20px;
  line-height: 1.3;
}

.welcome-text p {
  color: var(--gray-text);
  margin-bottom: 14px;
  font-size: 1.05rem;
}

.welcome-text p strong {
  color: var(--forest-mid);
}

.welcome-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 18px;
  text-align: center;
  transition: var(--transition);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.stat-card i {
  font-size: 1.8rem;
  color: var(--forest-light);
  margin-bottom: 10px;
  display: block;
}

.stat-card strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

.stat-card span {
  font-size: 0.8rem;
  color: var(--gray-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===== APARTMENTS ===== */
.apartments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* Link generico alle strutture su bbkey.net */
.apt-zone-links {
  margin-top: 44px;
  text-align: center;
}

.apt-zone-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--forest);
  color: #fff;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 500;
  transition: var(--transition);
}

.apt-zone-btn i {
  color: var(--gold-light);
}

.apt-zone-btn:hover {
  background: var(--forest-light);
  transform: translateY(-2px);
}

.apartment-card {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  transition: var(--transition);
  overflow: hidden;
}

.apartment-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--forest), var(--forest-light));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.apartment-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--forest-light);
}

.apartment-card.featured-apt {
  background: linear-gradient(135deg, #f5f8f2 0%, #fff 100%);
  border-color: var(--forest-light);
}

.apartment-card.featured-apt::before {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.apt-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.apt-icon {
  font-size: 2.2rem;
  color: var(--forest-light);
  margin-bottom: 16px;
}

.apartment-card h3 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  color: var(--dark);
  margin-bottom: 8px;
}

.apt-address {
  font-size: 0.88rem;
  color: var(--gray-text);
  margin-bottom: 12px;
}

.apt-address i {
  color: var(--forest-light);
  margin-right: 4px;
}

.apt-desc {
  font-size: 0.95rem;
  color: var(--gray-text);
  line-height: 1.6;
  margin-bottom: 20px;
}

.apt-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--forest);
  color: #fff;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  transition: var(--transition);
}

.apt-map-btn:hover {
  background: var(--forest-light);
  transform: translateX(2px);
}

/* ===== CONVENZIONI ===== */
.convenzioni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}

.convenzione-card {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.convenzione-card:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-4px);
}

.convenzione-card.prime {
  border-color: var(--gold);
  background: rgba(201,162,39,0.10);
}

.conv-ribbon {
  position: absolute;
  top: 20px;
  right: -30px;
  background: var(--gold);
  color: #1a1a1a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 6px 50px;
  transform: rotate(35deg);
}

.conv-icon {
  font-size: 2.8rem;
  color: var(--gold-light);
  margin-bottom: 18px;
}

.convenzione-card h3 {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 4px;
}

.conv-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.60);
  margin-bottom: 16px;
  font-style: italic;
}

.convenzione-card p {
  color: rgba(255,255,255,0.85);
  font-size: 0.97rem;
  line-height: 1.65;
  margin-bottom: 20px;
}

.conv-how {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(201,162,39,0.15);
  border: 1px solid rgba(201,162,39,0.30);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--gold-light);
  margin-bottom: 20px;
}

.conv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #1a1a1a;
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: var(--transition);
}

.conv-btn:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}

/* Card unica: occupa tutta la riga, centrata, layout orizzontale (nessun vuoto a destra) */
.convenzione-card:only-child {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 36px;
  align-items: start;
  padding: 44px 90px 44px 44px;
}

.convenzione-card:only-child .conv-icon {
  grid-column: 1;
  grid-row: 1 / span 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  margin: 0;
  font-size: 3.6rem;
  border-radius: 50%;
  background: rgba(201,162,39,0.14);
  border: 1.5px solid rgba(201,162,39,0.40);
}

.convenzione-card:only-child > :not(.conv-icon):not(.conv-ribbon) {
  grid-column: 2;
}

.convenzione-card:only-child .conv-btn {
  justify-self: start;
}

@media (max-width: 720px) {
  .convenzione-card:only-child {
    display: block;
    padding: 36px 32px;
  }
  .convenzione-card:only-child .conv-icon {
    width: auto;
    height: auto;
    justify-content: flex-start;
    font-size: 2.8rem;
    margin-bottom: 18px;
    border: 0;
    background: none;
    border-radius: 0;
  }
}

/* ===== RESTAURANTS ===== */
.subsection-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: var(--dark);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.subsection-title i {
  color: var(--forest-light);
}

.restaurant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.restaurant-card {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  transition: var(--transition);
}

.restaurant-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.restaurant-card.top-pick {
  border-color: var(--gold);
  background: linear-gradient(135deg, #fefbf2 0%, #fff 100%);
}

.top-badge {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: #1a1a1a;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.rest-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.rest-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.rest-icon.pizza    { background: #fff3e0; color: #e65100; }
.rest-icon.trattoria { background: #e8f5e9; color: #2e7d32; }
.rest-icon.bar       { background: #fce4ec; color: #c2185b; }
.rest-icon.sutrio    { background: #f3e5f5; color: #7b1fa2; }

.rest-header h4 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 3px;
}

.rest-location {
  font-size: 0.82rem;
  color: var(--gray-text);
}

.rest-location i { color: var(--forest-light); }

.restaurant-card p {
  font-size: 0.93rem;
  color: var(--gray-text);
  line-height: 1.6;
  margin-bottom: 14px;
}

.rest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tag {
  background: var(--gray-light);
  color: var(--gray-text);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
}

.rest-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-mid);
  transition: var(--transition);
}

.rest-link:hover {
  color: var(--forest);
  gap: 9px;
}

/* ===== SHOPS ===== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.shop-card {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  transition: var(--transition);
}

.shop-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.shop-card.featured-shop {
  border-color: var(--forest-light);
  background: linear-gradient(135deg, #f2f8ee 0%, #fff 100%);
}

.shop-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--forest-light);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.shop-icon {
  font-size: 2.2rem;
  color: var(--forest-light);
  margin-bottom: 12px;
}

.shop-icon.small {
  font-size: 1.8rem;
}

.shop-card h4 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--dark);
  margin-bottom: 6px;
}

.shop-location {
  font-size: 0.83rem;
  color: var(--gray-text);
  margin-bottom: 10px;
}

.shop-location i { color: var(--forest-light); }

.shop-card p {
  font-size: 0.93rem;
  color: var(--gray-text);
  line-height: 1.6;
  margin-bottom: 14px;
}

.shop-hours {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  color: var(--gray-text);
  background: var(--gray-light);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.shop-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-mid);
  transition: var(--transition);
}

.shop-link:hover { color: var(--forest); }

/* ===== TERME SECTION ===== */
.terme-section {
  background: linear-gradient(135deg, #f0f7ea 0%, #faf8f3 100%);
}

.terme-info {
  max-width: 750px;
  margin: 0 auto;
}

.terme-info > p {
  font-size: 1.02rem;
  color: var(--gray-text);
  margin-bottom: 24px;
  line-height: 1.7;
}

.terme-info h4 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  color: var(--dark);
  margin-bottom: 14px;
}

.terme-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 28px;
}

.terme-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--gray-text);
}

.terme-list li i {
  color: var(--forest-light);
  width: 18px;
}

.distance-box {
  display: flex;
  gap: 14px;
  background: rgba(45,80,22,0.08);
  border: 1px solid rgba(45,80,22,0.18);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.distance-box i {
  color: var(--forest-mid);
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.distance-box strong {
  display: block;
  font-size: 0.9rem;
  color: var(--dark);
  margin-bottom: 4px;
}

.distance-box span {
  font-size: 0.87rem;
  color: var(--gray-text);
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--forest);
  color: #fff;
  padding: 12px 28px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  transition: var(--transition);
}

.cta-btn:hover {
  background: var(--forest-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45,80,22,0.25);
}

/* ===== VEDERE ===== */
.vedere-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.vedere-card {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

.vedere-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.vedere-img-wrap {
  padding: 0;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-light);
}

.vedere-icon-bg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.vedere-icon-bg.blue   { background: #e3f2fd; color: #1565c0; }
.vedere-icon-bg.green  { background: #e8f5e9; color: #2e7d32; }
.vedere-icon-bg.orange { background: #fff3e0; color: #e65100; }
.vedere-icon-bg.purple { background: #f3e5f5; color: #6a1b9a; }
.vedere-icon-bg.teal   { background: #e0f7fa; color: #00838f; }
.vedere-icon-bg.red    { background: #fce4ec; color: #c62828; }

.vedere-body {
  padding: 24px;
}

.vedere-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-mid);
  background: rgba(90,143,53,0.12);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
}

.vedere-body h4 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--dark);
  margin-bottom: 10px;
}

.vedere-body p {
  font-size: 0.93rem;
  color: var(--gray-text);
  line-height: 1.6;
  margin-bottom: 12px;
}

.dist-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--forest-mid);
  font-weight: 600;
}

/* ===== SENTIERI ===== */
.sentieri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.sentiero-card {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: var(--transition);
}

.sentiero-card:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-3px);
}

.sentiero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.difficulty {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 100px;
}

.difficulty.easy   { background: rgba(76,175,80,0.25);  color: #81c784; }
.difficulty.medium { background: rgba(255,152,0,0.25);  color: #ffb74d; }
.difficulty.hard   { background: rgba(244,67,54,0.25);  color: #e57373; }

.sentiero-time {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.55);
}

.sentiero-card h4 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 10px;
}

.sentiero-card p {
  font-size: 0.93rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: 14px;
}

.sentiero-meta {
  display: flex;
  gap: 18px;
  font-size: 0.83rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 12px;
}

.sentiero-meta i { color: var(--gold-light); }

.sentiero-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--gold-light);
  transition: var(--transition);
  opacity: 0.80;
}

.sentiero-link:hover {
  opacity: 1;
  color: #fff;
  gap: 9px;
}

/* ===== TROI INTRO BOX ===== */
.troi-intro-box {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(201,162,39,0.35);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 44px;
}

.troi-intro-icon {
  font-size: 2.8rem;
  color: var(--gold-light);
  flex-shrink: 0;
  line-height: 1;
}

.troi-intro-text strong {
  display: block;
  font-size: 1.05rem;
  color: var(--gold-light);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.troi-intro-text p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.80);
  line-height: 1.65;
  margin-bottom: 16px;
}

.troi-komoot-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #1a1a1a;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 700;
  transition: var(--transition);
}

.troi-komoot-btn:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
}

/* ===== CAI NOTE ===== */
.cai-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(201,162,39,0.12);
  border: 1px solid rgba(201,162,39,0.30);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 36px;
  color: var(--gold-light);
  font-size: 0.93rem;
  line-height: 1.6;
}

.cai-note i {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.cai-note strong { color: #fff; }

/* ===== CAI SEPARATOR & HARDER ===== */
.cai-separator {
  text-align: center;
  margin: 44px 0 28px;
  position: relative;
}

.cai-separator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.12);
}

.cai-separator span {
  position: relative;
  background: var(--dark-mid);
  padding: 0 18px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cai-harder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.cai-harder-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.cai-harder-card h4 {
  font-family: var(--font-head);
  font-size: 1rem;
  color: #fff;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cai-harder-card h4 i {
  color: var(--gold-light);
}

.cai-harder-card p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.60);
  line-height: 1.55;
}

/* ===== ESPERIENZE ===== */
.esperienze-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.esperienza-card {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: var(--transition);
  text-align: center;
}

.esperienza-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--forest-light);
}

.esp-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #fff;
  margin: 0 auto 18px;
}

.esperienza-card h4 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: 10px;
}

.esperienza-card p {
  font-size: 0.93rem;
  color: var(--gray-text);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* ===== NOLEGGIO BOX ===== */
.noleggio-box {
  background: var(--gray-light);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 4px;
  text-align: left;
}

.noleggio-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.noleggio-header i {
  font-size: 1.2rem;
  color: var(--forest-light);
}

.noleggio-header strong {
  font-size: 0.92rem;
  color: var(--dark);
  font-weight: 700;
}

.noleggio-header span {
  font-size: 0.78rem;
  color: var(--gray-text);
}

.noleggio-orari {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--forest-mid);
  font-weight: 600;
  margin-bottom: 10px;
}

.noleggio-prezzi {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.noleggio-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--gray-text);
  border-bottom: 1px dashed var(--border);
  padding-bottom: 4px;
  gap: 8px;
}

.noleggio-row span:first-child {
  font-weight: 600;
  color: var(--dark);
  flex-shrink: 0;
}

.noleggio-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: var(--gray-text);
  margin-bottom: 12px;
  font-style: italic;
}

.noleggio-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--forest);
  color: #fff;
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.80rem;
  font-weight: 600;
  transition: var(--transition);
}

.noleggio-link:hover {
  background: var(--forest-light);
  transform: translateY(-2px);
}

/* ===== MAPPA ===== */
.map-section {
  background: var(--cream);
}

.map-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 30px;
}

.map-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 12px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--dark);
  text-align: center;
  transition: var(--transition);
}

.map-link-card i {
  font-size: 1.5rem;
  color: var(--forest-light);
}

.map-link-card:hover {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
  transform: translateY(-3px);
}

.map-link-card:hover i {
  color: var(--gold-light);
}

.map-link-card.highlight {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  color: #fff;
  border-color: var(--forest);
}

.map-link-card.highlight i {
  color: var(--gold-light);
}

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--border);
}

/* ===== GITE ===== */
.gite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.gita-card {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  transition: var(--transition);
}

.gita-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}

.gita-dist {
  display: inline-block;
  background: var(--forest);
  color: var(--gold-light);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
}

.gita-card h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gita-card h4 i {
  color: var(--forest-light);
}

.gita-card p {
  font-size: 0.93rem;
  color: var(--gray-text);
  line-height: 1.6;
}

/* ===== SERVIZI ===== */
.servizi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.servizio-card {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 24px;
  transition: var(--transition);
}

.servizio-card:hover {
  background: rgba(255,255,255,0.12);
}

.servizio-card.emergency {
  border-color: rgba(239, 83, 80, 0.4);
  background: rgba(239, 83, 80, 0.08);
}

.serv-icon {
  font-size: 1.8rem;
  color: var(--gold-light);
  margin-bottom: 12px;
}

.servizio-card h4 {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 8px;
}

.servizio-card p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  margin-bottom: 12px;
}

.serv-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-light);
  transition: var(--transition);
}

.serv-link:hover { color: #fff; }

.serv-link.emergency-link { color: #ef9a9a; }
.serv-link.emergency-link:hover { color: #fff; }

.meteo-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 36px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.80);
  line-height: 1.6;
}

.meteo-icon {
  font-size: 2rem;
  color: var(--gold-light);
  flex-shrink: 0;
}

.meteo-box a {
  color: var(--gold-light);
  font-weight: 600;
  text-decoration: underline;
}

/* ===== DISTANZE TABLE ===== */
.distanze-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.distanze-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--warm-white);
  font-size: 0.95rem;
}

.distanze-table thead tr {
  background: var(--forest);
  color: #fff;
}

.distanze-table th {
  padding: 14px 20px;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.distanze-table td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--gray-text);
}

.distanze-table td:first-child {
  color: var(--dark);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.distanze-table td:first-child i {
  color: var(--forest-light);
  width: 16px;
}

.distanze-table tbody tr:hover td {
  background: var(--gray-light);
}

.distanze-table tr.highlighted-row td {
  background: rgba(201,162,39,0.10);
  font-weight: 600;
}

.distanze-table tr.highlighted-row td:last-child {
  color: var(--forest-mid);
  font-weight: 700;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,0.75);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand h3 {
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--gold-light);
  margin-bottom: 6px;
}

.footer-brand p {
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.footer-tagline {
  font-style: italic;
  color: rgba(255,255,255,0.50) !important;
}

.footer-links h4,
.footer-emergency h4 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 14px;
}

.footer-links ul li,
.footer-emergency ul li {
  font-size: 0.88rem;
  margin-bottom: 8px;
  padding-left: 0;
}

.footer-emergency ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.70);
  transition: var(--transition);
}

.footer-emergency ul li a:hover {
  color: var(--gold-light);
}

.footer-emergency ul li a i {
  width: 16px;
  color: var(--gold-light);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.83rem;
  color: rgba(255,255,255,0.40);
}

.back-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.60);
  padding: 8px 16px;
  border-radius: 100px;
  font-size: 0.83rem;
  transition: var(--transition);
}

.back-top:hover {
  background: var(--gold);
  color: #1a1a1a;
  border-color: var(--gold);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .hero { padding: 60px 20px 100px; }

  .hero-nav { gap: 8px; }
  .pill-btn { padding: 7px 14px; font-size: 0.78rem; }

  .section { padding: 60px 0; }

  .apartments-grid,
  .convenzioni-grid,
  .restaurant-grid,
  .shop-grid,
  .vedere-grid,
  .sentieri-grid,
  .esperienze-grid,
  .gite-grid,
  .servizi-grid {
    grid-template-columns: 1fr;
  }

  .terme-list {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .map-links-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .distanze-table th,
  .distanze-table td {
    padding: 10px 12px;
    font-size: 0.83rem;
  }

  .welcome-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .welcome-cards {
    grid-template-columns: 1fr;
  }
  .hero-title { font-size: 2.2rem; }
}

/* ===== SCROLL ANIMATION ===== */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher {
  position: absolute;
  top: 22px;
  right: 28px;
  z-index: 100;
}

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 8px 14px 8px 12px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.03em;
  font-family: inherit;
}

.lang-current:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.55);
}

.lang-flag {
  font-size: 1.1em;
  line-height: 1;
}

.lang-code {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lang-arrow {
  font-size: 0.65rem;
  transition: transform 0.3s ease;
  opacity: 0.8;
}

.lang-switcher.open .lang-arrow {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(20, 40, 10, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  overflow: hidden;
  list-style: none;
  min-width: 170px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.40);
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.lang-switcher.open .lang-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.lang-dropdown li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.80);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  font-family: inherit;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.lang-dropdown li:last-child {
  border-bottom: none;
}

.lang-dropdown li:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}

.lang-dropdown li.active {
  background: rgba(201,162,39,0.25);
  color: var(--gold-light);
  font-weight: 700;
}

.lang-dropdown li .lang-flag {
  font-size: 1.15em;
}

/* Responsive lang switcher */
@media (max-width: 640px) {
  .lang-switcher {
    top: 14px;
    right: 14px;
  }
  .lang-current {
    padding: 6px 11px 6px 10px;
    font-size: 0.78rem;
  }
  .lang-dropdown {
    min-width: 150px;
  }
}